repo: move UIKit to packages/ui
This commit is contained in:
parent
7b9dbdaeb5
commit
eff67858dc
@ -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)`
|
||||
|
||||
@ -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)`
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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)`
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 }) {
|
||||
|
||||
@ -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)`
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import { mediaQuery } from './mq';
|
||||
|
||||
const theme = {
|
||||
...mediaQuery,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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`);
|
||||
16
packages/ui/package.json
Normal file
16
packages/ui/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
7
packages/ui/theme.js
Normal file
7
packages/ui/theme.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { breakpoints } from './mq';
|
||||
|
||||
const theme = {
|
||||
breakpoints,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
20
packages/ui/tsconfig.json
Normal file
20
packages/ui/tsconfig.json
Normal file
@ -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"]
|
||||
}
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
51
yarn.lock
51
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user