feat/calculator - add calculator functionallity

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  moduleNameMapper: {
+    '^@__/(.*)$': '<rootDir>/src/$1',
+  },
+};

package.json

@@ -1,7 +1,10 @@
 {
   "scripts": {
     "start": "vite",
+    "type-check": "tsc --noEmit",
+    "type-check-watch": "tsc src/**/*.{ts,tsx} --noEmit --watch",
     "build": "tsc && vite build",
+    "test": "jest",
     "postbuild": "workbox generateSW workbox-config.js",
     "serve": "vite preview"
   },
@@ -20,9 +23,13 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.1.0",
+    "@types/jest": "^26.0.23",
     "@types/react": "^17.0.11",
     "autoprefixer": "^10.2.6",
+    "jest": "^27.0.4",
+    "prettier": "^2.3.1",
     "sass": "^1.34.1",
+    "ts-jest": "^27.0.3",
     "typescript": "^4.3.2",
     "typescript-plugin-css-modules": "^3.4.0",
     "vite": "^2.2.4",

src/components/apps/Calculator/Calculator.module.scss

@@ -17,11 +17,49 @@
   font-family: var(--app-font-family) !important;
 }
 
+.buttonsContainer {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  gap: 0.9px;
+
+  margin: 1.5px;
+
+  & > button {
+    font-size: 1.618rem;
+    font-weight: 300 !important;
+    color: white;
+    fill: white;
+  }
+}
+
+.topRowButton {
+  background-color: hsla(0, 0%, 35%, 0.6);
+}
+
+.numberButton {
+  background-color: hsla(0, 0%, 45%, 0.6);
+}
+
+.operationButton {
+  background-color: hsla(33, 87%, 59%, 1);
+}
+
+.curvedBottomLeftButton {
+  border-radius: 0 0 0 0.7rem;
+}
+
+.curvedBottomRightButton {
+  border-radius: 0 0 0.7rem 0;
+}
+
 .showArea {
   font-size: 3rem;
   color: white;
   text-align: end;
   font-weight: 200;
 
+  overflow: auto;
+
   padding: 0.5rem 1rem;
 }

src/components/apps/Calculator/Calculator.tsx

@@ -1,13 +1,98 @@
+import { useReducer } from 'react';
+import { mdiClose, mdiDivision, mdiMinus, mdiPercentOutline, mdiPlusMinusVariant } from '@mdi/js';
 import clsx from 'clsx';
-import { CalculatorButtonsArea } from './CalculatorButtonsArea/CalculatorButtonsArea';
+import { AppIcon } from '__/components/utils/AppIcon';
+import {
+  ActionT,
+  CalculatorKeyT,
+  calculatorReducer,
+  initialState,
+  IState,
+} from './calculatorReducer';
 import css from './Calculator.module.scss';
 
 const Calculator = () => {
+  const [state, dispatch] = useReducer<React.Reducer<IState, ActionT>>(
+    calculatorReducer,
+    initialState,
+  );
+
+  const { result } = state;
+
+  function handlePress(key: CalculatorKeyT) {
+    dispatch({ type: 'Press', payload: key });
+  }
+
   return (
     <section class={css.container}>
-      <header class={clsx('app-window-drag-handle', css.header)}></header>
-      <section class={css.showArea}>0</section>
-      <CalculatorButtonsArea />
+      <header class={clsx('app-window-drag-handle', css.header)} />
+      <section class={css.showArea}>{result}</section>
+      <section class={css.buttonsContainer}>
+        <button class={css.topRowButton} onClick={() => handlePress('AC')}>
+          AC
+        </button>
+        <button class={css.topRowButton} onClick={() => handlePress('+/-')}>
+          <AppIcon path={mdiPlusMinusVariant} />
+        </button>
+        <button class={css.topRowButton} onClick={() => handlePress('%')}>
+          <AppIcon path={mdiPercentOutline} />
+        </button>
+        <button class={css.operationButton} onClick={() => handlePress('/')}>
+          <AppIcon path={mdiDivision} />
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress(7)}>
+          7
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress(8)}>
+          8
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress(9)}>
+          9
+        </button>
+        <button class={css.operationButton} onClick={() => handlePress('*')}>
+          <AppIcon path={mdiClose} />
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress(4)}>
+          4
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress(5)}>
+          5
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress(6)}>
+          6
+        </button>
+        <button class={css.operationButton} onClick={() => handlePress('-')}>
+          <AppIcon path={mdiMinus} size={24} />
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress(1)}>
+          1
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress(2)}>
+          2
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress(3)}>
+          3
+        </button>
+        <button class={css.operationButton} onClick={() => handlePress('+')}>
+          +
+        </button>
+        <button
+          class={clsx(css.numberButton, css.curvedBottomLeftButton)}
+          style={{ gridColumn: '1 / span 2' }}
+          onClick={() => handlePress(0)}
+        >
+          0
+        </button>
+        <button class={css.numberButton} onClick={() => handlePress('.')}>
+          .
+        </button>
+        <button
+          class={clsx(css.operationButton, css.curvedBottomRightButton)}
+          onClick={() => handlePress('=')}
+        >
+          =
+        </button>
+      </section>
     </section>
   );
 };