{this.props.value}
8 | ); 9 | } 10 | } 11 | 12 | Display.propTypes = { 13 | value: PropTypes.string, 14 | className:PropTypes.string, 15 | }; 16 | 17 | export default Display; 18 | -------------------------------------------------------------------------------- /src/scss/home.scss: -------------------------------------------------------------------------------- 1 | .home { 2 | left: 50%; 3 | opacity: 0; 4 | position: absolute; 5 | top: 50%; 6 | transform: translateY(-50%) translateX(-50%); 7 | 8 | &__content { 9 | border-radius: 8px; 10 | box-shadow: 0 6px 17px 0 rgba(0, 0, 0, .21); 11 | height: 88vh; 12 | margin: 0 auto; 13 | overflow: hidden; 14 | width: 95vw; 15 | } 16 | } 17 | 18 | .fadeIn { 19 | opacity: 1; 20 | transition: opacity .3s .2s; 21 | } 22 | -------------------------------------------------------------------------------- /src/scripts/reducers/del.js: -------------------------------------------------------------------------------- 1 | import { DEL } from '../actions/constants'; 2 | import helper from '../model/helper'; 3 | 4 | function del(state = '0', action) { 5 | let output = '0'; 6 | 7 | switch (action.type) { 8 | case DEL: 9 | output = helper.removeLastChar(state); 10 | if (helper.isNaN(output) || helper.isNumberZero(output)) { 11 | output = '0'; 12 | } 13 | 14 | return output; 15 | } 16 | 17 | return state; 18 | } 19 | 20 | export default del; 21 | -------------------------------------------------------------------------------- /runtime.webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | output: { 3 | // YOU NEED TO SET libraryTarget: 'commonjs2' 4 | libraryTarget: 'commonjs2', 5 | }, 6 | 7 | module: { 8 | rules: [ 9 | { 10 | test: /\.scss$/, 11 | loaders: [ 12 | 'style-loader', 13 | 'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[local]', 14 | 'sass-loader', 15 | 'postcss-loader', 16 | ], 17 | }, 18 | ], 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/scripts/reducers/comma.js: -------------------------------------------------------------------------------- 1 | import { COMMA } from '../actions/constants'; 2 | 3 | function comma(state = '', action) { 4 | let output = state; 5 | 6 | switch (action.type) { 7 | case COMMA: 8 | if (action.data.calculated) { 9 | output = `0${action.value}`; 10 | } else if (state.indexOf(',') === -1) { 11 | output = `${state}${action.value}`; 12 | } 13 | 14 | return output; 15 | } 16 | 17 | return state; 18 | } 19 | 20 | export default comma; 21 | -------------------------------------------------------------------------------- /src/scss/soundIcon.scss: -------------------------------------------------------------------------------- 1 | .soundIcon { 2 | cursor: pointer; 3 | fill: #1f2525; 4 | height: 22px; 5 | left: 10px; 6 | position: absolute; 7 | top: 10px; 8 | width: 25px; 9 | z-index: 1; 10 | 11 | &__wave { 12 | opacity: 1; 13 | } 14 | 15 | &__stripe { 16 | opacity: 0; 17 | } 18 | 19 | &--muted { 20 | .soundIcon__wave { 21 | opacity: 0; 22 | } 23 | 24 | .soundIcon__stripe { 25 | opacity: 1; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/scripts/reducers/historyDisplay.js: -------------------------------------------------------------------------------- 1 | import { CLEAR, OPERATOR, PERCENT, HISTORY_CLEAR } from '../actions/constants'; 2 | import operator from '../reducers/operator'; 3 | 4 | function historyDisplay(state = '', action) { 5 | switch (action.type) { 6 | case CLEAR: 7 | case HISTORY_CLEAR: 8 | case PERCENT: 9 | return ''; 10 | case OPERATOR: 11 | return operator(action.data.historyDisplay, action); 12 | } 13 | 14 | return state; 15 | } 16 | 17 | export default historyDisplay; 18 | -------------------------------------------------------------------------------- /src/images/favicons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/speaker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/favicons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/speaker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scripts/actions/constants.js: -------------------------------------------------------------------------------- 1 | export const ADD = 'ADD'; 2 | export const KEY_DOWN = 'KEY_DOWN'; 3 | export const KEY_UP = 'KEY_UP'; 4 | export const CALC = 'CALC'; 5 | export const CLEAR = 'CLEAR'; 6 | export const DEL = 'DEL'; 7 | export const OPERATOR = 'OPERATOR'; 8 | export const CALCULATED = 'CALCULATED'; 9 | export const COMMA = 'COMMA'; 10 | export const SWITCH_OPERATOR = 'SWITCH_OPERATOR'; 11 | export const PERCENT = 'PERCENT'; 12 | export const MUTED = 'MUTED'; 13 | export const HISTORY_CLEAR = 'HISTORY_CLEAR'; 14 | -------------------------------------------------------------------------------- /src/scripts/reducers/switchOperator.js: -------------------------------------------------------------------------------- 1 | import { SWITCH_OPERATOR } from '../actions/constants'; 2 | import helper from '../model/helper'; 3 | 4 | function switchOperator(state = '', action) { 5 | let output = ''; 6 | 7 | switch (action.type) { 8 | case SWITCH_OPERATOR: 9 | if (helper.isPositiveNumber(state)) { 10 | output = `-${state}`; 11 | } else { 12 | output = state.replace(/-/, ''); 13 | } 14 | 15 | return output; 16 | } 17 | 18 | return state; 19 | } 20 | 21 | export default switchOperator; 22 | -------------------------------------------------------------------------------- /src/scss/fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'geosanslightregular'; 3 | font-style: normal; 4 | font-weight: normal; 5 | src: url('../fonts/geosanslight.woff2') format('woff2'), url('../fonts/geosanslight.woff') format('woff'); 6 | font-display: swap; 7 | } 8 | 9 | @font-face { 10 | font-family: 'rounded_eleganceregular'; 11 | font-style: normal; 12 | font-weight: normal; 13 | src: url('../fonts/rounded_elegance.woff2') format('woff2'), url('../fonts/rounded_elegance.woff') format('woff'); 14 | font-display: swap; 15 | } 16 | -------------------------------------------------------------------------------- /src/scripts/reducers/root.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import historyDisplay from './historyDisplay'; 3 | import history from './history'; 4 | import displayValue from './displayValue'; 5 | import MapKeys from '../model/mapKeys'; 6 | import keyDown from './keyDown'; 7 | import calculated from './calculated'; 8 | import muted from './muted'; 9 | 10 | const RootReducer = combineReducers({ 11 | historyDisplay, 12 | history, 13 | displayValue, 14 | calculated, 15 | keyDown, 16 | keys: () => MapKeys, 17 | muted 18 | }); 19 | 20 | export default RootReducer; 21 | -------------------------------------------------------------------------------- /src/scripts/reducers/percent.js: -------------------------------------------------------------------------------- 1 | import { PERCENT } from '../actions/constants'; 2 | import helper from '../model/helper'; 3 | 4 | function percent(state = '0', action) { 5 | const { historyDisplay, displayValue } = action.data; 6 | let output = '0'; 7 | 8 | switch (action.type) { 9 | case PERCENT: 10 | if (!helper.isEmpty(historyDisplay)) { 11 | output = eval(`${helper.commaToPoint(state)}${displayValue}`) / 100; 12 | output = helper.pointToComma(output); 13 | } 14 | 15 | return output; 16 | } 17 | 18 | return state; 19 | } 20 | 21 | export default percent; 22 | -------------------------------------------------------------------------------- /src/scripts/model/helper.js: -------------------------------------------------------------------------------- 1 | 2 | const helper = { 3 | isNumberZero(value) { 4 | return Number(value) === 0; 5 | }, 6 | 7 | hasValue(value) { 8 | return value.length > 0; 9 | }, 10 | 11 | isEmpty(value) { 12 | return value.length === 0; 13 | }, 14 | 15 | commaToPoint(value) { 16 | //in 15,53 17 | //out 15.53 18 | return value.toString().replace(/,/g, '.'); 19 | }, 20 | 21 | pointToComma(value) { 22 | //in 15.53 23 | //out 15,53 24 | return value.toString().replace(/\./g, ','); 25 | }, 26 | 27 | isNaN(value) { 28 | return isNaN(parseFloat(value)); 29 | }, 30 | 31 | isInteger(value) { 32 | return parseInt(value, 10) === Number(value); 33 | }, 34 | 35 | isPositiveNumber(value) { 36 | return Number(helper.commaToPoint(value)) > 0; 37 | }, 38 | 39 | removeLastChar(value) { 40 | return value.toString().substring(0, value.length - 1); 41 | } 42 | }; 43 | 44 | export default helper; 45 | -------------------------------------------------------------------------------- /src/scss/calculator.scss: -------------------------------------------------------------------------------- 1 | @import './variables'; 2 | 3 | .calculator { 4 | display: flex; 5 | flex-direction: column; 6 | height: inherit; 7 | 8 | &__header { 9 | align-content: space-between; 10 | background-color: $air; 11 | display: inherit; 12 | flex-basis: 38%; 13 | flex-wrap: wrap; 14 | padding: 10px; 15 | } 16 | 17 | &__body { 18 | background-color: $base-color; 19 | display: inherit; 20 | flex: 1 auto; 21 | flex-basis: 77%; 22 | flex-wrap: wrap; 23 | } 24 | 25 | &__history { 26 | font-size: 1.1rem; 27 | margin: 0; 28 | opacity: .6; 29 | overflow-x: hidden; 30 | position: relative; 31 | right: -12%; 32 | text-align: right; 33 | width: 89%; 34 | } 35 | 36 | &__result { 37 | font-size: 2.5rem; 38 | margin: 0; 39 | overflow-x: hidden; 40 | padding: 0; 41 | text-align: right; 42 | width: 100%; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "PRODUCTION": true, 4 | "describe": true, 5 | "it": true, 6 | "expect": true, 7 | "beforeEach": true, 8 | "jest": true, 9 | "afterEach": true, 10 | "spyOn": true, 11 | "ga": true 12 | }, 13 | "plugins": [ 14 | "react" 15 | ], 16 | "extends": [ 17 | "eslint:recommended", 18 | "plugin:react/recommended" 19 | ], 20 | "parser": "babel-eslint", 21 | "parserOptions": { 22 | "ecmaVersion": 7, 23 | "sourceType": "module" 24 | }, 25 | "env": { 26 | "es6": true, 27 | "browser": true, 28 | "node": true 29 | }, 30 | "rules": { 31 | "no-const-assign": "warn", 32 | "no-this-before-super": "warn", 33 | "no-undef": "warn", 34 | "no-unreachable": "warn", 35 | "no-unused-vars": "warn", 36 | "constructor-super": "warn", 37 | "valid-typeof": "warn", 38 | "eqeqeq": 1, 39 | "no-console": 0, 40 | "curly": 1, 41 | "quotes": [ 42 | 1, 43 | "single" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /spec/del.spec.js: -------------------------------------------------------------------------------- 1 | import del from '../src/scripts/reducers/del'; 2 | import createAction from '../src/scripts/actions/createAction'; 3 | import * as constants from '../src/scripts/actions/constants'; 4 | import dataFixture from './dataFixture'; 5 | 6 | describe('Del reducer tests', () => { 7 | let data = {}; 8 | 9 | beforeEach(function () { 10 | data = Object.assign({}, data, dataFixture); 11 | }); 12 | 13 | it('deletes char', () => { 14 | const state = '20,12'; 15 | const value = ''; 16 | const action = createAction(constants.DEL, { value, data }); 17 | let result = del(state, action); 18 | 19 | expect(del(state, action)).toBe('20,1'); 20 | 21 | result = del(result, action); 22 | expect(result).toBe('20,'); 23 | 24 | result = del(result, action); 25 | expect(result).toBe('20'); 26 | 27 | result = del(result, action); 28 | expect(result).toBe('2'); 29 | 30 | result = del(result, action); 31 | expect(result).toBe('0'); 32 | 33 | result = del('-2', action); 34 | expect(result).toBe('0'); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |  2 | 3 |  4 |  5 | [](https://codeclimate.com/github/iondrimba/react-calculator/test_coverage) 6 | [](https://codeclimate.com/github/iondrimba/react-calculator) 7 | 8 | ## [Live demo](https://calculator.iondrimbafilho.me/) 9 | 10 | ## Stack 11 | 12 | - React + Redux 13 | - Sass 14 | - ES6 15 | - Jest + Enzyme 16 | - Webpack 17 | 18 | ## Features 19 | 20 | - PWA 21 | - Offline ready 22 | - Desktop version via manifest (Add to homescreen) 23 | - Responsive 24 | - Keyboard ready 25 | 26 | ## Todo 27 | 28 | - more tests 29 | - animations 30 | 31 | ### Design inspired via [http://collectui.com/designers/pramodrhegde](http://collectui.com/designers/pramodrhegde) 32 | -------------------------------------------------------------------------------- /spec/clear.spec.js: -------------------------------------------------------------------------------- 1 | import clear from '../src/scripts/reducers/clear'; 2 | import createAction from '../src/scripts/actions/createAction'; 3 | import * as constants from '../src/scripts/actions/constants'; 4 | import dataFixture from './dataFixture'; 5 | 6 | describe('Clear reducer tests', () => { 7 | let data = {}; 8 | 9 | beforeEach(function () { 10 | data = Object.assign({}, data, dataFixture); 11 | }); 12 | 13 | it('returns 0 after clear', () => { 14 | const state = '2'; 15 | const value = '99'; 16 | const action = createAction(constants.CLEAR, { value, data }); 17 | const result = clear(state, action); 18 | 19 | expect(result).toBe('0'); 20 | }); 21 | 22 | describe('default action', () => { 23 | describe('when action.type not CLEAR', () => { 24 | it('returns default state', () => { 25 | const state = '2'; 26 | const value = '99'; 27 | const action = createAction(constants.ADD, { value, data }); 28 | const result = clear(state, action); 29 | 30 | expect(result).toBe('2'); 31 | }); 32 | }); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /src/scripts/components/githubIcon.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import Styles from '../../scss/githubIcon.scss'; 3 | 4 | class GithubIcon extends PureComponent { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | } 13 | 14 | export default GithubIcon; 15 | -------------------------------------------------------------------------------- /src/scripts/reducers/displayValue.js: -------------------------------------------------------------------------------- 1 | import * as constants from '../actions/constants'; 2 | import add from '../reducers/add'; 3 | import clear from '../reducers/clear'; 4 | import del from '../reducers/del'; 5 | import comma from '../reducers/comma'; 6 | import switchOperator from '../reducers/switchOperator'; 7 | import percent from '../reducers/percent'; 8 | import history from '../reducers/history'; 9 | import calc from '../reducers/calc'; 10 | 11 | function displayValue(state = '', action) { 12 | switch (action.type) { 13 | case constants.SWITCH_OPERATOR: 14 | return switchOperator(state, action); 15 | case constants.COMMA: 16 | return comma(state, action); 17 | case constants.DEL: 18 | return del(state, action); 19 | case constants.CALC: 20 | return calc(history(action.data.history, action), action); 21 | case constants.CLEAR: 22 | return clear(state, action); 23 | case constants.PERCENT: 24 | return add(percent(action.data.historyDisplay, action), action); 25 | case constants.ADD: 26 | return comma(add(state, action), action); 27 | } 28 | 29 | return state; 30 | } 31 | 32 | export default displayValue; 33 | -------------------------------------------------------------------------------- /src/scripts/reducers/operator.js: -------------------------------------------------------------------------------- 1 | import { OPERATOR } from '../actions/constants'; 2 | import helper from '../model/helper'; 3 | 4 | function _appendOperatorToZero({ output, formatedValue, value }) { 5 | if (helper.isNaN(formatedValue) || helper.isNumberZero(formatedValue)) { 6 | output = `0 ${value} `; 7 | } 8 | return output; 9 | } 10 | 11 | function _appendOperatorToHistory({ output, historyDisplay, displayValue, value, calculated }) { 12 | if (calculated === false || helper.isEmpty(historyDisplay)) { 13 | output = `${historyDisplay}${displayValue} ${value} `; 14 | } else { 15 | output = historyDisplay.replace(/\D $/, ` ${value} `); 16 | } 17 | return output; 18 | } 19 | 20 | function operator(state = '0', action) { 21 | const { historyDisplay, displayValue, calculated } = action.data; 22 | let output = '0'; 23 | 24 | switch (action.type) { 25 | case OPERATOR: 26 | var formatedValue = helper.commaToPoint(displayValue); 27 | 28 | output = _appendOperatorToZero({ output, formatedValue, value: action.value }) 29 | 30 | output = _appendOperatorToHistory({ output, historyDisplay, displayValue, value: action.value, calculated }) 31 | 32 | return output; 33 | } 34 | 35 | return state; 36 | } 37 | 38 | export default operator; 39 | -------------------------------------------------------------------------------- /spec/comma.spec.js: -------------------------------------------------------------------------------- 1 | import comma from '../src/scripts/reducers/comma'; 2 | import createAction from '../src/scripts/actions/createAction'; 3 | import * as constants from '../src/scripts/actions/constants'; 4 | import dataFixture from './dataFixture'; 5 | 6 | describe('Comma reducer tests', () => { 7 | let data = {}; 8 | 9 | beforeEach(() => { 10 | data = Object.assign({}, data, dataFixture); 11 | }); 12 | 13 | afterEach(() => { 14 | data = Object.assign({}, data, dataFixture); 15 | }); 16 | 17 | it('adds comma to state', () => { 18 | const value = ','; 19 | const action = createAction(constants.COMMA, { value, data }); 20 | 21 | expect(comma('20', action)).toBe('20,'); 22 | expect(comma('0', action)).toBe('0,'); 23 | }); 24 | 25 | it('resets string to 0,', () => { 26 | const state = '150'; 27 | const value = ','; 28 | const action = createAction(constants.COMMA, { value, data }); 29 | 30 | action.data.calculated = true; 31 | 32 | expect(comma(state, action)).toBe('0,'); 33 | }); 34 | 35 | it('does not add another comma', () => { 36 | const state = '150,'; 37 | const value = ','; 38 | const action = createAction(constants.COMMA, { value, data }); 39 | 40 | expect(comma(state, action)).toBe('150,'); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /spec/percent.spec.js: -------------------------------------------------------------------------------- 1 | import percent from '../src/scripts/reducers/percent'; 2 | import createAction from '../src/scripts/actions/createAction'; 3 | import * as constants from '../src/scripts/actions/constants'; 4 | import dataFixture from './dataFixture'; 5 | 6 | describe('Clear reducer tests', () => { 7 | let data = {}; 8 | 9 | beforeEach(function () { 10 | data = Object.assign({}, data, dataFixture); 11 | }); 12 | 13 | describe('default action', () => { 14 | describe('when no matching action.type present', () => { 15 | it('returns default state', () => { 16 | const state = '2'; 17 | const value = '99'; 18 | const action = createAction(constants.ADD, { value, data }); 19 | const result = percent(state, action); 20 | 21 | expect(result).toBe('2'); 22 | }); 23 | }); 24 | 25 | describe('when matching action.type present', () => { 26 | it('returns 0,525', () => { 27 | const state = '10,50*'; 28 | const value = '5'; 29 | const action = createAction(constants.PERCENT, { value, data:{ 30 | displayValue: '5', 31 | historyDisplay: '10,50 * ', 32 | calculated: false, 33 | history:[] 34 | }}); 35 | 36 | const result = percent(state, action); 37 | 38 | expect(result).toBe('0,525'); 39 | }); 40 | }); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: build 5 | 6 | on: 7 | push: 8 | branches: [ '*' ] 9 | pull_request: 10 | branches: [ main ] 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | strategy: 16 | matrix: 17 | node-version: [15.x] 18 | 19 | steps: 20 | - uses: actions/checkout@v2 21 | - name: Use Node.js ${{ matrix.node-version }} 22 | uses: actions/setup-node@v1 23 | with: 24 | node-version: ${{ matrix.node-version }} 25 | - run: npm ci 26 | - run: npm run build 27 | 28 | test: 29 | name: test 30 | runs-on: ubuntu-latest 31 | strategy: 32 | matrix: 33 | node-version: [15.x] 34 | 35 | steps: 36 | - uses: actions/checkout@main 37 | - name: Use Node.js ${{ matrix.node-version }} 38 | uses: actions/setup-node@main 39 | with: 40 | node-version: ${{ matrix.node-version }} 41 | - run: npm ci 42 | - uses: paambaati/codeclimate-action@v2.6.0 43 | env: 44 | CI: true 45 | CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }} 46 | with: 47 | coverageCommand: npm test 48 | -------------------------------------------------------------------------------- /src/scripts/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Provider } from 'react-redux'; 3 | import { render } from 'react-dom'; 4 | import { createStore } from 'redux'; 5 | import AppContainer from './container/appContainer.js'; 6 | import RootReducer from './reducers/root'; 7 | import defaultStore from './model/initialState'; 8 | import './../scss/app.scss'; 9 | 10 | let store = createStore(RootReducer, defaultStore, window.devToolsExtension && window.devToolsExtension()); 11 | 12 | render( 13 |