ready project

README.md

@@ -0,0 +1,9 @@
+# Конструктор калькулятора
+
+[Демоверсия](https://maker27.github.io/calculator-constructor/) (github pages)
+
+## Стэк:
+- TypeScript, React
+- Redux, Redux Toolkit
+- Scss
+- react-beautiful-dnd (drag and drop)

package.json

@@ -3,7 +3,9 @@
   "version": "0.0.1",
   "scripts": {
     "start": "webpack serve --config webpack.dev.config.ts",
-    "build": "webpack --config webpack.prod.config.ts"
+    "build": "webpack --config webpack.prod.config.ts",
+    "test": "jest",
+    "deploy": "gh-pages -d build"
   },
   "dependencies": {
     "react": "^17.0.1",
@@ -16,9 +18,12 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
+    "@reduxjs/toolkit": "^1.6.2",
     "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
+    "@types/jest": "^27.0.2",
     "@types/mini-css-extract-plugin": "^2.0.1",
     "@types/react": "^17.0.0",
+    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.0.0",
     "@types/webpack": "^4.41.25",
     "@types/webpack-dev-server": "^3.11.1",
@@ -33,11 +38,17 @@
     "eslint-webpack-plugin": "^2.4.1",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.0.8",
+    "gh-pages": "^3.2.3",
     "html-webpack-plugin": "^4.5.1",
+    "jest": "^27.3.1",
     "mini-css-extract-plugin": "^2.1.0",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-redux": "^7.2.6",
+    "redux": "^4.1.2",
     "sass": "^1.43.4",
     "sass-loader": "^12.3.0",
     "style-loader": "^3.0.0",
+    "ts-jest": "^27.0.7",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3",
     "webpack": "^5.11.1",

src/assets/boxes.ts

@@ -0,0 +1,12 @@
+import { DigitsBox, DisplayBox, OperationsBox, ResultBox } from '../components/ButtonBox';
+
+const boxes = {
+    display: DisplayBox,
+    operations: OperationsBox,
+    digits: DigitsBox,
+    result: ResultBox
+};
+
+export type TBoxType = keyof typeof boxes;
+
+export default boxes;

src/assets/constants.ts

@@ -0,0 +1,12 @@
+import { IOperations } from './types';
+
+export const operations: IOperations = {
+    '/': (a, b) => a / b,
+    // prettier-ignore
+    'х': (a, b) => a * b,
+    '-': (a, b) => a - b,
+    '+': (a, b) => a + b,
+    '=': null
+};
+
+export const dot = '.';

src/assets/types.ts

@@ -0,0 +1,12 @@
+type TOperationFunction = ((a: number, b: number) => number) | null;
+
+export interface IOperations {
+    '/': TOperationFunction;
+    // prettier-ignore
+    'х': TOperationFunction;
+    '-': TOperationFunction;
+    '+': TOperationFunction;
+    '=': TOperationFunction;
+}
+
+export type TOperation = keyof IOperations;

src/components/App/App.scss

@@ -0,0 +1,81 @@
+html {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    display: flex;
+    min-height: 100%;
+    justify-content: center;
+    align-items: center;
+    background-color: #e5e5e5;
+
+    @media (max-width: 550px) {
+        height: 100%;
+        overflow-y: auto;
+    }
+}
+
+#root {
+    @media (max-width: 550px) {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 695px;
+    height: 640px;
+    background: #ffffff;
+    font: 500 14px/15px "Inter", sans-serif;
+
+    &.runtime-mode {
+        .aside {
+            visibility: hidden;
+        }
+        .main .button:not(.button-display) {
+            cursor: pointer;
+
+            &:hover,
+            &:active {
+                border: 2px solid #5d5fef;
+            }
+        }
+    }
+    @media (max-width: 550px) {
+        width: 100%;
+        height: max-content;
+        flex-direction: column;
+        justify-content: flex-start;
+        padding: 20px 0;
+    }
+}
+
+.aside,
+.main {
+    width: 243px;
+    height: 514px;
+}
+
+.aside {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    margin-right: 56px;
+
+    @media (max-width: 550px) {
+        order: 1;
+        margin-right: 0;
+    }
+}
+
+.main {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    flex-direction: column;
+}

src/components/App/index.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import './App.scss';
+import { Sidebar } from '../Sidebar';
+import { Box } from '../ButtonBox';
+import Switcher from '../Switcher';
+import Calculator from '../Calculator';
+import boxes, { TBoxType } from '../../assets/boxes';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../store';
+import { setItems, toggleMode } from '../../store/constructionSlice';
+import { combineClassnames } from '../../utils';
+import {
+    DragDropContext,
+    Droppable,
+    Draggable,
+    DroppableProvided,
+    DraggableProvided,
+    DropResult
+} from 'react-beautiful-dnd';
+
+function App(): React.ReactElement {
+    const { items, mode: constructorMode } = useSelector((state: RootState) => state.construction);
+    const dispatch = useDispatch();
+    const onToggleMode = (mode: boolean) => dispatch(toggleMode(mode));
+    const onSetItems = (items: TBoxType[]) => dispatch(setItems(items));
+
+    const handleOnDragEnd = (result: DropResult) => {
+        const { destination, draggableId } = result;
+        if (!destination) return;
+        const boxType = draggableId as TBoxType;
+        if (destination.droppableId === 'calculator' && !items.includes(boxType)) {
+            const newItems = [...items];
+            newItems.splice(destination.index, 0, boxType);
+            onSetItems(newItems);
+        }
+    };
+
+    return (
+        <div className={combineClassnames('container', constructorMode ? '' : 'runtime-mode')}>
+            <DragDropContext onDragEnd={handleOnDragEnd}>
+                <Droppable droppableId="sidebar" isDropDisabled={true}>
+                    {(provided: DroppableProvided) => (
+                        <div className="aside" ref={provided.innerRef} {...provided.droppableProps}>
+                            <Sidebar>
+                                {Object.entries(boxes).map(([type, Node], index) => {
+                                    const boxType = type as TBoxType;
+                                    const inactive = items.includes(boxType);
+                                    return (
+                                        <Draggable
+                                            key={type}
+                                            draggableId={inactive ? type + '-inactive' : type}
+                                            index={index}
+                                            isDragDisabled={inactive}>
+                                            {(draggableProvided: DraggableProvided, snapshot) => (
+                                                <React.Fragment>
+                                                    <div
+                                                        ref={draggableProvided.innerRef}
+                                                        {...draggableProvided.draggableProps}
+                                                        {...draggableProvided.dragHandleProps}
+                                                        className={snapshot.isDragging ? 'dragging' : ''}>
+                                                        <Box key={type} Node={Node} inactive={inactive} />
+                                                    </div>
+                                                    {snapshot.isDragging && (
+                                                        <Box key={type} Node={Node} inactive={true} />
+                                                    )}
+                                                </React.Fragment>
+                                            )}
+                                        </Draggable>
+                                    );
+                                })}
+                            </Sidebar>
+                        </div>
+                    )}
+                </Droppable>
+                <div className="main">
+                    <Switcher constructorMode={constructorMode} onToggleMode={onToggleMode} />
+                    <Calculator />
+                </div>
+            </DragDropContext>
+        </div>
+    );
+}
+
+export default App;

src/components/Button/Button.scss

@@ -0,0 +1,37 @@
+.button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 72px;
+    height: 48px;
+    background: #ffffff;
+    border: 1px solid #e2e3e5;
+    border-radius: 6px;
+    color: #000;
+    overflow: hidden;
+    user-select: none;
+
+    &-display {
+        background: #f3f4f6;
+        color: #111827;
+        text-align: right;
+        font-weight: 800;
+        font-size: 36px;
+        line-height: 44px;
+        justify-content: flex-end;
+        flex-direction: row;
+    }
+    &-zero {
+        width: 152px;
+    }
+    &-result {
+        height: 64px;
+        background: #5d5fef;
+        color: #fff;
+    }
+    &-display,
+    &-result {
+        width: 232px;
+    }
+}

src/components/Button/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Button.scss';
+import { combineClassnames } from '../../utils';
+
+interface IButtonProps {
+    label: string;
+    className?: string;
+}
+
+export const Button: React.FC<IButtonProps> = ({ label, className }) => {
+    return <div className={combineClassnames('button', className)}>{label}</div>;
+};

src/components/ButtonBox/ButtonBox.scss

@@ -0,0 +1,28 @@
+.button-box {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+    padding: 4px;
+    background: #ffffff;
+}
+
+.box {
+    &__display {
+        height: 60px;
+    }
+    &__operations .button {
+        width: 52px;
+    }
+    &__digits {
+        height: 224px;
+    }
+    &__result {
+        height: 72px;
+    }
+}
+
+.dragging {
+    opacity: 0.7;
+}