diff --git a/craco.config.js b/craco.config.js new file mode 100644 index 0000000..eea1ec9 --- /dev/null +++ b/craco.config.js @@ -0,0 +1,18 @@ +const CracoLessPlugin = require('craco-less'); +const colors = require('./src/client/UIKit/colors'); + +module.exports = { + plugins: [ + { + plugin: CracoLessPlugin, + options: { + lessLoaderOptions: { + lessOptions: { + modifyVars: { '@primary-color': colors.blue[0] }, + javascriptEnabled: true + } + } + } + } + ] +}; diff --git a/package.json b/package.json index 3adbdcb..6cf6046 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/helper-split-export-declaration": "^7.11.0", + "@craco/craco": "^5.6.4", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", @@ -15,6 +16,7 @@ "compression": "^1.7.4", "cookie-parser": "^1.4.5", "cors": "^2.8.5", + "craco-less": "^1.17.0", "express": "^4.17.1", "express-node-sspi": "^1.0.1", "helmet": "^4.1.0", @@ -31,7 +33,7 @@ "react-dom": "^16.13.1", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", - "react-scripts": "3.4.3", + "react-scripts": "^3.4.3", "recompose": "^0.30.0", "reflect-metadata": "^0.1.13", "rxjs": "^6.6.2", @@ -59,16 +61,16 @@ "webpack-node-externals": "^2.5.1" }, "scripts": { - "test": "react-scripts test", + "test": "craco test", "eject": "react-scripts eject", "dev": "cross-env NODE_ENV=development concurrently -p name -c \"yellow,magenta,blue\" -n \"webpack-server,nodemon-server,CRA\" \"yarn dev:server:webpack\" \"yarn dev:server:nodemon\" \"yarn dev:client\"", - "dev:client:only": "react-scripts start", - "dev:client": "wait-on -l tcp:3001 && react-scripts start", + "dev:client:only": "craco start", + "dev:client": "wait-on -l tcp:3001 && craco start", "dev:server": "concurrently -p name -c \"yellow,magenta\" -n \"webpack-server,nodemon-server\" \"yarn dev:server:webpack\" \"yarn dev:server:nodemon\"", "dev:server:webpack": "webpack --config webpack.config.server.js --watch", "dev:server:nodemon": "rimraf build/server.js && wait-on -l build/server.js && nodemon build/server.js", "build": "yarn build:client && yarn build:server", - "build:client": "react-scripts build", + "build:client": "craco build", "build:server": "cross-env NODE_ENV=production webpack --config webpack.config.server.js" }, "eslintConfig": { diff --git a/src/client/App.css b/src/client/App.css deleted file mode 100644 index c4c61e7..0000000 --- a/src/client/App.css +++ /dev/null @@ -1 +0,0 @@ -@import "~antd/dist/antd.css"; diff --git a/src/client/App.less b/src/client/App.less new file mode 100644 index 0000000..ce63c10 --- /dev/null +++ b/src/client/App.less @@ -0,0 +1 @@ +@import '~antd/dist/antd.less'; diff --git a/src/client/App.tsx b/src/client/App.tsx index 6e0dcd3..137d4b3 100644 --- a/src/client/App.tsx +++ b/src/client/App.tsx @@ -4,7 +4,7 @@ import theme from 'client/UIKit/theme'; import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import { ThemeProvider } from 'styled-components'; -import './App.css'; +import './App.less'; import Layout from './Layout'; import { ConfigProvider } from 'antd'; import ruRu from 'antd/es/locale/ru_RU'; diff --git a/src/client/Elements/Button.jsx b/src/client/Elements/Button.jsx index 7d48fa6..a840864 100644 --- a/src/client/Elements/Button.jsx +++ b/src/client/Elements/Button.jsx @@ -2,17 +2,12 @@ import { Button as AntButton } from 'antd'; import { useStatus } from 'client/hooks/useStatus'; import { Status } from 'core/types/elements'; import React from 'react'; -import colors from 'client/UIKit/colors'; const Button = ({ type, size, name, text, onClick }) => { const { status } = useStatus(name); return ( ( const styles = { root: { - height: '100%', + height: '100%' }, flex: { width: '100%' }, header: { position: 'sticky', top: 0, - // backgroundColor: colors.violet.shades[700], - background: 'linear-gradient(90deg, #1C01A9 0%, #3A0185 50%, #580161 100%)', + background: `linear-gradient(90deg, + ${colors.blueTemp[0]} 0%, + ${colors.blueTemp[300]} 50%, + ${colors.blueTemp[600]} 100%)`, height: '65px', padding: '10px 12px', paddingLeft: '20px', // borderRadius: "0 0 10px 10px", - zIndex: 999999, - }, + zIndex: 999999 + } }; export default Layout; diff --git a/src/client/UIKit/colors.js b/src/client/UIKit/colors.js index f75816b..ecbfa4b 100644 --- a/src/client/UIKit/colors.js +++ b/src/client/UIKit/colors.js @@ -1,36 +1,84 @@ -export default { - black: { - 0: '#000000', - 100: '#121212', - 200: '#242424', - 300: '#373737', - 400: '#494949', - 500: '#5B5B5B' - }, +const createColorProxy = require('./lib/createColorProxy'); - white: { - 0: '#FFFFFF', - 100: '#EDEDED', - 200: '#DBDBDB', - 300: '#C8C8C8', - 400: '#B6B6B6', - 500: '#A4A4A4' - }, - gray: { - 0: '#A1A1A1', - 100: '#959595', - 200: '#8A8A8A', - 300: '#7E7E7E', - 400: '#737373', - 500: '#676767', - 600: '#5C5C5C', - 700: '#505050', - 800: '#454545', - 900: '#393939', - 1000: '#2E2E2E', - 1100: '#222222' - }, - primary: { - 0: '#1C01A9' - } +module.exports = { + black: createColorProxy( + { + 0: '#000000', + 100: '#121212', + 200: '#242424', + 300: '#373737', + 400: '#494949', + 500: '#5B5B5B' + }, + 'black', + 0 + ), + + white: createColorProxy( + { + 0: '#FFFFFF', + 100: '#EDEDED', + 200: '#DBDBDB', + 300: '#C8C8C8', + 400: '#B6B6B6', + 500: '#A4A4A4' + }, + 'white', + 0 + ), + + gray: createColorProxy( + { + 0: '#A1A1A1', + 100: '#959595', + 200: '#8A8A8A', + 300: '#7E7E7E', + 400: '#737373', + 500: '#676767', + 600: '#5C5C5C', + 700: '#505050', + 800: '#454545', + 900: '#393939', + 1000: '#2E2E2E', + 1100: '#222222' + }, + 'gray' + ), + + blue: createColorProxy( + { + 0: '#1C01A9', + 100: '#1B019B', + 200: '#190190', + 300: '#160184', + 400: '#140178', + 500: '#12016C', + 600: '#100060', + 700: '#0E0054', + 800: '#0C0048', + 900: '#0A003C', + 1000: '#080030', + 1100: '#060024', + 1200: '#040018', + 1300: '#02000C', + 1400: '#000000' + }, + 'blue', + '#1C01A9' + ), + + blueTemp: createColorProxy( + { + 0: '#1C01A9', + 100: '#26019D', + 200: '#300191', + 300: '#3A0185', + 400: '#440179', + 500: '#4E016D', + 600: '#580161', + 700: '#620256' + }, + 'blue', + '#1C01A9' + ) }; diff --git a/src/client/UIKit/lib/createColorProxy.js b/src/client/UIKit/lib/createColorProxy.js new file mode 100644 index 0000000..17f8752 --- /dev/null +++ b/src/client/UIKit/lib/createColorProxy.js @@ -0,0 +1,24 @@ +/* eslint-disable indent */ +const createColorProxy = + process.env.NODE_ENV === 'development' && typeof Proxy !== 'undefined' + ? (obj, colorName) => { + return new Proxy(obj, { + get(target, name) { + if ( + typeof name === 'number' && + !(name in target) && + process.env.NODE_ENV !== 'production' + ) { + console.error( + `You are trying to get color ${colorName}[${name}] that doesn't exist` + ); + } + + return target[name]; + } + }); + } + : x => x; +/* eslint-enable indent */ + +module.exports = createColorProxy; diff --git a/src/client/hooks/useStoreValue.js b/src/client/hooks/useStoreValue.js index e376b94..bee90a2 100644 --- a/src/client/hooks/useStoreValue.js +++ b/src/client/hooks/useStoreValue.js @@ -1,7 +1,7 @@ import { useStores } from './useStores'; import { useState, useEffect } from 'react'; import { useDebounce } from 'use-debounce/lib'; -import { DEBOUNCE_DELAY } from 'constants/debounce'; +import { DEBOUNCE_DELAY } from 'core/constants/debounce'; export const useStoreValue = ({ computedValue, valueName }) => { const { calculationStore } = useStores(); diff --git a/src/constants/debounce.js b/src/core/constants/debounce.js similarity index 100% rename from src/constants/debounce.js rename to src/core/constants/debounce.js diff --git a/src/constants/urls.ts b/src/core/constants/urls.ts similarity index 100% rename from src/constants/urls.ts rename to src/core/constants/urls.ts diff --git a/src/index.tsx b/src/index.tsx index b196323..09bb63c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,7 +4,7 @@ import ReactDOM from "react-dom"; import App from "./client/App"; import "./index.css"; import * as serviceWorker from "./client/serviceWorker"; -import { API_URL } from "./constants/urls"; +import { API_URL } from "./core/constants/urls"; const isDevelopmentMode = process.env.NODE_ENV === "development";