From eff67858dcc3c2c647371d04869dbedd2a8506d7 Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Tue, 20 Dec 2022 11:33:18 +0300 Subject: [PATCH] repo: move UIKit to packages/ui --- .../Form/Insurance/FinGAPTable/index.jsx | 2 +- .../Form/Insurance/InsuranceTable/index.jsx | 2 +- .../Calculation/Form/Insurance/index.jsx | 2 +- .../Form/Payments/PaymentsParams.jsx | 2 +- .../Form/Payments/PaymentsTable/index.jsx | 4 +- .../Calculation/Form/Payments/index.jsx | 2 +- Components/Calculation/Form/index.jsx | 2 +- Components/Calculation/Settings/index.jsx | 2 +- Components/Calculation/lib/render-rows.tsx | 4 +- Components/Layout/Auth.jsx | 4 +- Components/Layout/Element.tsx | 4 +- Components/Layout/Header.jsx | 4 +- Components/Layout/Logo.jsx | 4 +- Components/Layout/index.jsx | 2 +- Components/Output/Results/index.jsx | 4 +- Components/Output/Validation.jsx | 2 +- Components/Output/index.jsx | 2 +- UIKit/theme.js | 7 --- package.json | 3 +- packages/elements/layout/Background.jsx | 4 +- packages/elements/package.json | 3 ++ {UIKit => packages/ui}/colors.js | 0 {UIKit => packages/ui}/grid.ts | 0 {UIKit => packages/ui}/mq.ts | 4 +- packages/ui/package.json | 16 ++++++ packages/ui/theme.js | 7 +++ packages/ui/tsconfig.json | 20 ++++++++ pages/_app.jsx | 4 +- pages/index.jsx | 4 +- yarn.lock | 51 ++++++++++++++++++- 30 files changed, 127 insertions(+), 44 deletions(-) delete mode 100644 UIKit/theme.js rename {UIKit => packages/ui}/colors.js (100%) rename {UIKit => packages/ui}/grid.ts (100%) rename {UIKit => packages/ui}/mq.ts (78%) create mode 100644 packages/ui/package.json create mode 100644 packages/ui/theme.js create mode 100644 packages/ui/tsconfig.json diff --git a/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx b/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx index 6ed91c6..ea28b61 100644 --- a/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx +++ b/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx @@ -4,7 +4,7 @@ import { toJS } from 'mobx'; import { observer } from 'mobx-react-lite'; import { useStore } from 'stores/hooks'; import styled from 'styled-components'; -import { Flex } from 'UIKit/grid'; +import { Flex } from 'ui/grid'; import { columns } from './config'; const Grid = styled(Flex)` diff --git a/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx b/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx index cc8d98c..4ae25cc 100644 --- a/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx +++ b/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx @@ -3,7 +3,7 @@ import Table from 'elements/Table'; import { observer } from 'mobx-react-lite'; import { useStore } from 'stores/hooks'; import styled from 'styled-components'; -import { Flex } from 'UIKit/grid'; +import { Flex } from 'ui/grid'; import { columns } from './config'; const Grid = styled(Flex)` diff --git a/Components/Calculation/Form/Insurance/index.jsx b/Components/Calculation/Form/Insurance/index.jsx index 830515d..a3b4330 100644 --- a/Components/Calculation/Form/Insurance/index.jsx +++ b/Components/Calculation/Form/Insurance/index.jsx @@ -1,4 +1,4 @@ -import { Flex } from 'UIKit/grid'; +import { Flex } from 'ui/grid'; import renderFormRows from '../../lib/render-rows'; import { id, rows, title } from './config'; import FinGAPTable from './FinGAPTable'; diff --git a/Components/Calculation/Form/Payments/PaymentsParams.jsx b/Components/Calculation/Form/Payments/PaymentsParams.jsx index 97fd0d3..9de2a76 100644 --- a/Components/Calculation/Form/Payments/PaymentsParams.jsx +++ b/Components/Calculation/Form/Payments/PaymentsParams.jsx @@ -1,6 +1,6 @@ import { observer } from 'mobx-react-lite'; import { useStore } from 'stores/hooks'; -import { Flex } from 'UIKit/grid'; +import { Flex } from 'ui/grid'; import elementsRender from '../../config/elements-render'; import { elements } from './config'; diff --git a/Components/Calculation/Form/Payments/PaymentsTable/index.jsx b/Components/Calculation/Form/Payments/PaymentsTable/index.jsx index 6b82fd8..15f5c6e 100644 --- a/Components/Calculation/Form/Payments/PaymentsTable/index.jsx +++ b/Components/Calculation/Form/Payments/PaymentsTable/index.jsx @@ -4,8 +4,8 @@ import { computed } from 'mobx'; import { observer } from 'mobx-react-lite'; import { useStore } from 'stores/hooks'; import styled from 'styled-components'; -import { Box, Flex } from 'UIKit/grid'; -import { min } from 'UIKit/mq'; +import { Box, Flex } from 'ui/grid'; +import { min } from 'ui/mq'; import { columns } from './config'; const Grid = styled(Flex)` diff --git a/Components/Calculation/Form/Payments/index.jsx b/Components/Calculation/Form/Payments/index.jsx index 11f0673..cfc8504 100644 --- a/Components/Calculation/Form/Payments/index.jsx +++ b/Components/Calculation/Form/Payments/index.jsx @@ -1,4 +1,4 @@ -import { Box, Flex } from 'UIKit/grid'; +import { Box, Flex } from 'ui/grid'; import elementsRender from '../../config/elements-render'; import { id, title } from './config'; import PaymentsParams from './PaymentsParams'; diff --git a/Components/Calculation/Form/index.jsx b/Components/Calculation/Form/index.jsx index 6e77d90..7ec18ea 100644 --- a/Components/Calculation/Form/index.jsx +++ b/Components/Calculation/Form/index.jsx @@ -1,7 +1,7 @@ import Background from 'elements/layout/Background'; import Tabs from 'elements/layout/Tabs'; import styled from 'styled-components'; -import { min } from 'UIKit/mq'; +import { min } from 'ui/mq'; import AddProduct from './AddProduct'; import CreateKP from './CreateKP'; import Insurance from './Insurance'; diff --git a/Components/Calculation/Settings/index.jsx b/Components/Calculation/Settings/index.jsx index ad86528..171b5a3 100644 --- a/Components/Calculation/Settings/index.jsx +++ b/Components/Calculation/Settings/index.jsx @@ -1,6 +1,6 @@ import Background from 'elements/layout/Background'; import styled from 'styled-components'; -import { min } from 'UIKit/mq'; +import { min } from 'ui/mq'; import renderFormRows from '../lib/render-rows'; import { rows } from './config'; diff --git a/Components/Calculation/lib/render-rows.tsx b/Components/Calculation/lib/render-rows.tsx index 4a63efa..d568224 100644 --- a/Components/Calculation/lib/render-rows.tsx +++ b/Components/Calculation/lib/render-rows.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/no-array-index-key */ import Divider from 'elements/layout/Divider'; -import type { BoxProps } from 'UIKit/grid'; -import { Box } from 'UIKit/grid'; +import type { BoxProps } from 'ui/grid'; +import { Box } from 'ui/grid'; import elementsRender from '../config/elements-render'; import type { Elements as ActionElements } from '../config/map/actions'; import type { Elements as ValuesElements } from '../config/map/values'; diff --git a/Components/Layout/Auth.jsx b/Components/Layout/Auth.jsx index d3c0805..9e21cad 100644 --- a/Components/Layout/Auth.jsx +++ b/Components/Layout/Auth.jsx @@ -1,8 +1,8 @@ import { useQuery } from '@tanstack/react-query'; import { getUser } from 'api/user/query'; import styled from 'styled-components'; -import { Flex } from 'UIKit/grid'; -import { min } from 'UIKit/mq'; +import { Flex } from 'ui/grid'; +import { min } from 'ui/mq'; const UserText = styled.span` margin: 0; diff --git a/Components/Layout/Element.tsx b/Components/Layout/Element.tsx index 5f968d5..f01ba40 100644 --- a/Components/Layout/Element.tsx +++ b/Components/Layout/Element.tsx @@ -1,7 +1,7 @@ import type { ReactNode } from 'react'; import styled from 'styled-components'; -import { Flex } from 'UIKit/grid'; -import { min } from 'UIKit/mq'; +import { Flex } from 'ui/grid'; +import { min } from 'ui/mq'; const ElementTitle = styled.label` color: rgba(0, 0, 0, 0.75); diff --git a/Components/Layout/Header.jsx b/Components/Layout/Header.jsx index e99f0d0..769273c 100644 --- a/Components/Layout/Header.jsx +++ b/Components/Layout/Header.jsx @@ -1,7 +1,7 @@ /* eslint-disable import/no-unresolved */ import styled from 'styled-components'; -import { Flex } from 'UIKit/grid'; -import { min } from 'UIKit/mq'; +import { Flex } from 'ui/grid'; +import { min } from 'ui/mq'; import Auth from './Auth'; import Logo from './Logo'; diff --git a/Components/Layout/Logo.jsx b/Components/Layout/Logo.jsx index a3ec989..70fc6d4 100644 --- a/Components/Layout/Logo.jsx +++ b/Components/Layout/Logo.jsx @@ -1,8 +1,8 @@ import Image from 'next/image'; import logo from 'public/assets/images/logo-primary.svg'; import styled from 'styled-components'; -import { Flex } from 'UIKit/grid'; -import { min } from 'UIKit/mq'; +import { Flex } from 'ui/grid'; +import { min } from 'ui/mq'; const ImageWrapper = styled.div` width: 100px; diff --git a/Components/Layout/index.jsx b/Components/Layout/index.jsx index ad5d83b..9b0a517 100644 --- a/Components/Layout/index.jsx +++ b/Components/Layout/index.jsx @@ -1,6 +1,6 @@ /* eslint-disable react/prop-types */ /* eslint-disable import/no-unresolved */ -import { Flex } from 'UIKit/grid'; +import { Flex } from 'ui/grid'; import Header from './Header'; export default function Layout({ children }) { diff --git a/Components/Output/Results/index.jsx b/Components/Output/Results/index.jsx index ec95eb6..28fcfa6 100644 --- a/Components/Output/Results/index.jsx +++ b/Components/Output/Results/index.jsx @@ -4,8 +4,8 @@ import { toJS } from 'mobx'; import { observer } from 'mobx-react-lite'; import { useStore } from 'stores/hooks'; import styled from 'styled-components'; -import { Box } from 'UIKit/grid'; -import { min } from 'UIKit/mq'; +import { Box } from 'ui/grid'; +import { min } from 'ui/mq'; import { formatters, id, title, titles } from './config'; const Grid = styled(Box)` diff --git a/Components/Output/Validation.jsx b/Components/Output/Validation.jsx index 107ee96..af7f8b8 100644 --- a/Components/Output/Validation.jsx +++ b/Components/Output/Validation.jsx @@ -2,7 +2,7 @@ import Alert from 'elements/Alert'; import { observer } from 'mobx-react-lite'; import { useStore } from 'stores/hooks'; import styled from 'styled-components'; -import { Box, Flex } from 'UIKit/grid'; +import { Box, Flex } from 'ui/grid'; const Bold = styled.span` font-weight: bold; diff --git a/Components/Output/index.jsx b/Components/Output/index.jsx index 15194be..3916dd5 100644 --- a/Components/Output/index.jsx +++ b/Components/Output/index.jsx @@ -1,7 +1,7 @@ import Background from 'elements/layout/Background'; import Tabs from 'elements/layout/Tabs'; import styled from 'styled-components'; -import { min } from 'UIKit/mq'; +import { min } from 'ui/mq'; import PaymentsTable from './PaymentsTable'; import Results from './Results'; import Validation from './Validation'; diff --git a/UIKit/theme.js b/UIKit/theme.js deleted file mode 100644 index 6fe084f..0000000 --- a/UIKit/theme.js +++ /dev/null @@ -1,7 +0,0 @@ -import { mediaQuery } from './mq'; - -const theme = { - ...mediaQuery, -}; - -export default theme; diff --git a/package.json b/package.json index 30b2b2f..2c25400 100644 --- a/package.json +++ b/package.json @@ -44,10 +44,10 @@ "radash": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "rebass": "^4.0.7", "sharp": "^0.30.4", "styled-components": "^5.3.5", "superjson": "^1.11.0", + "ui": "*", "use-debounce": "^8.0.1", "zod": "^3.19.1" }, @@ -61,7 +61,6 @@ "@types/node": "18.7.18", "@types/react": "18.0.20", "@types/react-dom": "18.0.6", - "@types/rebass": "^4.0.10", "@types/styled-components": "^5.1.25", "@typescript-eslint/eslint-plugin": "^5.37.0", "@typescript-eslint/parser": "^5.37.0", diff --git a/packages/elements/layout/Background.jsx b/packages/elements/layout/Background.jsx index bdde6ee..baa7eec 100644 --- a/packages/elements/layout/Background.jsx +++ b/packages/elements/layout/Background.jsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { Box } from 'UIKit/grid'; -import { min } from 'UIKit/mq'; +import { Box } from 'ui/grid'; +import { min } from 'ui/mq'; const Background = styled(Box)` background: #fff; diff --git a/packages/elements/package.json b/packages/elements/package.json index 5b8b8a0..a0ee81b 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -6,11 +6,14 @@ "license": "MIT", "devDependencies": { "@types/react": "18.0.20", + "@types/styled-components": "^5", "react": "^18.2.0", "typescript": "^4.9.4" }, "dependencies": { "antd": "^4.24.5", + "styled-components": "^5.3.6", + "ui": "*", "use-debounce": "^9.0.2" } } diff --git a/UIKit/colors.js b/packages/ui/colors.js similarity index 100% rename from UIKit/colors.js rename to packages/ui/colors.js diff --git a/UIKit/grid.ts b/packages/ui/grid.ts similarity index 100% rename from UIKit/grid.ts rename to packages/ui/grid.ts diff --git a/UIKit/mq.ts b/packages/ui/mq.ts similarity index 78% rename from UIKit/mq.ts rename to packages/ui/mq.ts index 0e01a54..7ca9f68 100644 --- a/UIKit/mq.ts +++ b/packages/ui/mq.ts @@ -15,6 +15,4 @@ export function max(breakpoint: keyof typeof screens) { return `@media (max-width: calc(${screens[breakpoint]}px))`; } -export const mediaQuery = { - breakpoints: Object.values(screens).map((value) => `${value + threshold}px`), -}; +export const breakpoints = Object.values(screens).map((value) => `${value + threshold}px`); diff --git a/packages/ui/package.json b/packages/ui/package.json new file mode 100644 index 0000000..cc8e670 --- /dev/null +++ b/packages/ui/package.json @@ -0,0 +1,16 @@ +{ + "name": "ui", + "version": "0.0.0", + "main": "./index.tsx", + "types": "./index.tsx", + "license": "MIT", + "devDependencies": { + "@types/rebass": "^4.0.10", + "@types/styled-components": "^5", + "typescript": "^4.9.4" + }, + "dependencies": { + "rebass": "^4.0.7", + "styled-components": "^5.3.6" + } +} diff --git a/packages/ui/theme.js b/packages/ui/theme.js new file mode 100644 index 0000000..b8c8dea --- /dev/null +++ b/packages/ui/theme.js @@ -0,0 +1,7 @@ +import { breakpoints } from './mq'; + +const theme = { + breakpoints, +}; + +export default theme; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json new file mode 100644 index 0000000..d72a9f3 --- /dev/null +++ b/packages/ui/tsconfig.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "display": "Default", + "compilerOptions": { + "composite": false, + "declaration": true, + "declarationMap": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "inlineSources": false, + "isolatedModules": true, + "moduleResolution": "node", + "noUnusedLocals": false, + "noUnusedParameters": false, + "preserveWatchOutput": true, + "skipLibCheck": true, + "strict": true + }, + "exclude": ["node_modules"] +} diff --git a/pages/_app.jsx b/pages/_app.jsx index f5c1063..46b10c0 100644 --- a/pages/_app.jsx +++ b/pages/_app.jsx @@ -10,8 +10,8 @@ import { useMemo } from 'react'; import StoreProvider from 'stores/Provider'; import { ThemeProvider } from 'styled-components'; import { trpcClient } from 'trpc/client'; -import { GlobalStyle } from 'UIKit/colors'; -import theme from 'UIKit/theme'; +import { GlobalStyle } from 'ui/colors'; +import theme from 'ui/theme'; import '../styles/fonts.css'; import '../styles/globals.css'; diff --git a/pages/index.jsx b/pages/index.jsx index 4c951b5..e22233a 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -8,8 +8,8 @@ import Head from 'next/head'; import { getOwnerData, useInsuranceData, useMainData } from 'process/init/get-data'; import { useReactions } from 'process/init/inject-reactions/hooks'; import styled from 'styled-components'; -import { Box } from 'UIKit/grid'; -import { min } from 'UIKit/mq'; +import { Box } from 'ui/grid'; +import { min } from 'ui/mq'; const Grid = styled(Box)` display: flex; diff --git a/yarn.lock b/yarn.lock index 672ea32..b2251ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3287,6 +3287,17 @@ __metadata: languageName: node linkType: hard +"@types/styled-components@npm:^5": + version: 5.1.26 + resolution: "@types/styled-components@npm:5.1.26" + dependencies: + "@types/hoist-non-react-statics": "*" + "@types/react": "*" + csstype: ^3.0.2 + checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76 + languageName: node + linkType: hard + "@types/styled-system@npm:*": version: 5.1.15 resolution: "@types/styled-system@npm:5.1.15" @@ -5881,9 +5892,12 @@ __metadata: resolution: "elements@workspace:packages/elements" dependencies: "@types/react": 18.0.20 + "@types/styled-components": ^5 antd: ^4.24.5 react: ^18.2.0 + styled-components: ^5.3.6 typescript: ^4.9.4 + ui: "*" use-debounce: ^9.0.2 languageName: unknown linkType: soft @@ -6554,7 +6568,6 @@ __metadata: "@types/node": 18.7.18 "@types/react": 18.0.20 "@types/react-dom": 18.0.6 - "@types/rebass": ^4.0.10 "@types/styled-components": ^5.1.25 "@typescript-eslint/eslint-plugin": ^5.37.0 "@typescript-eslint/parser": ^5.37.0 @@ -6588,13 +6601,13 @@ __metadata: radash: ^8.0.0 react: ^18.2.0 react-dom: ^18.2.0 - rebass: ^4.0.7 sharp: ^0.30.4 styled-components: ^5.3.5 superjson: ^1.11.0 ts-jest: ^29.0.1 turbo: ^1.6.3 typescript: 4.8.3 + ui: "*" use-debounce: ^8.0.1 zod: ^3.19.1 languageName: unknown @@ -12913,6 +12926,28 @@ __metadata: languageName: node linkType: hard +"styled-components@npm:^5.3.6": + version: 5.3.6 + resolution: "styled-components@npm:5.3.6" + dependencies: + "@babel/helper-module-imports": ^7.0.0 + "@babel/traverse": ^7.4.5 + "@emotion/is-prop-valid": ^1.1.0 + "@emotion/stylis": ^0.8.4 + "@emotion/unitless": ^0.7.4 + babel-plugin-styled-components: ">= 1.12.0" + css-to-react-native: ^3.0.0 + hoist-non-react-statics: ^3.0.0 + shallowequal: ^1.1.0 + supports-color: ^5.5.0 + peerDependencies: + react: ">= 16.8.0" + react-dom: ">= 16.8.0" + react-is: ">= 16.8.0" + checksum: 68eac1e451be81d66739cf86de8ec9e72f46e7584aa359271761a2437468210bd7cf0a864281fc97dab08c32b35e6bf7513dc8b4104ed6b196cf8d65674dd289 + languageName: node + linkType: hard + "styled-jsx@npm:5.0.6": version: 5.0.6 resolution: "styled-jsx@npm:5.0.6" @@ -13580,6 +13615,18 @@ __metadata: languageName: node linkType: hard +"ui@*, ui@workspace:packages/ui": + version: 0.0.0-use.local + resolution: "ui@workspace:packages/ui" + dependencies: + "@types/rebass": ^4.0.10 + "@types/styled-components": ^5 + rebass: ^4.0.7 + styled-components: ^5.3.6 + typescript: ^4.9.4 + languageName: unknown + linkType: soft + "unbox-primitive@npm:^1.0.1": version: 1.0.1 resolution: "unbox-primitive@npm:1.0.1"