evo/EvoCalculator.Client2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scripts: add antd generate css script

Browse Source
This commit is contained in:
vchikalkin 2024-04-11 13:48:16 +03:00
parent 61132928b5
commit 501ed13f8a
13 changed files with 167 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/.gitignore vendored
View File

@ -1,3 +1,4 @@
# Sentry Config File
.sentryclirc
/styles/antd.min.css

1
apps/web/Dockerfile
View File

@ -47,6 +47,7 @@ ARG URL_CORE_CALCULATE_DIRECT
ARG URL_1C_TRANSTAX_DIRECT
ARG URL_ELT_OSAGO_DIRECT
ARG URL_ELT_KASKO_DIRECT
RUN pnpm dotenv -v NODE_ENV=production -e .env turbo run prebuild --filter=web...
RUN pnpm dotenv -e .env turbo run build --filter=web...
FROM node:alpine AS runner

3
apps/web/package.json
View File

@ -4,7 +4,9 @@
"private": true,
"scripts": {
"build": "next build",
"prebuild": "ts-node --project ./tsconfig.node.json ./scripts/generate-antd-css.ts",
"dev": "next dev",
"predev": "ts-node --project ./tsconfig.node.json ./scripts/generate-antd-css.ts",
"lint": "next lint",
"lint:fix": "next lint -- --fix",
"start": "next start",
@ -60,6 +62,7 @@
"msw": "^1.1.0",
"shared": "workspace:*",
"ts-jest": "^29.0.5",
"ts-node": "^10.9.1",
"typescript": "^5.3.3"
},
"msw": {

1
apps/web/pages/_app.jsx
View File

@ -2,6 +2,7 @@ import 'normalize.css';
import '../styles/fonts.css';
import '../styles/globals.css';
import '../styles/antd-fix.css';
import '../styles/antd.min.css';
import initializeQueryClient from '@/api/client';
import initializeApollo from '@/apollo/client';
import { Loading, Notification } from '@/Components/Common';

16
apps/web/pages/_document.jsx
View File

@ -1,38 +1,26 @@
/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/explicit-member-accessibility */
import { metaFavicon } from '@/config/meta';
import { withBasePath } from '@/config/urls';
import { PAGE_DESCRIPTION } from '@/constants/page';
import Document, { Head, Html, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import { createCache, doExtraStyle, StyleProvider } from 'ui/tools';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const cache = createCache();
let fileName = '';
const originalRenderPage = ctx.renderPage;
const sheet = new ServerStyleSheet();
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
<StyleProvider cache={cache}>{sheet.collectStyles(<App {...props} />)}</StyleProvider>,
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
fileName = doExtraStyle({
cache,
});
return {
...initialProps,
styles: [
initialProps.styles,
sheet.getStyleElement(),
fileName && <link rel="stylesheet" href={withBasePath(`/${fileName}`)} />,
],
styles: [initialProps.styles, sheet.getStyleElement()],
};
} finally {
sheet.seal();

17
apps/web/scripts/generate-antd-css.ts Normal file
View File

@ -0,0 +1,17 @@
import withTheme from '../styles/theme';
import fs from 'fs';
import { extractStyle } from 'ui/tools';
const outputPath = './styles/antd.min.css';
// 1. default theme
// const css = extractStyle();
// 2. With custom theme
const css = extractStyle(withTheme);
fs.writeFileSync(outputPath, css);
console.log(`🎉 Antd CSS generated at ${outputPath}`);

29
apps/web/styles/theme.tsx Normal file
View File

@ -0,0 +1,29 @@
import envSchema from '../config/schema/env';
import { COLORS_DEV, COLORS_PROD } from '../constants/colors';
import { Config as AntdConfig } from 'ui/elements';
const env = envSchema.parse(process.env);
let colors = COLORS_DEV;
if (env.USE_DEV_COLORS) {
colors = COLORS_DEV;
} else {
colors = COLORS_PROD;
}
const withTheme = (node: JSX.Element) => (
<AntdConfig
theme={{
token: {
borderRadius: 2,
borderRadiusLG: 2,
colorLink: colors.COLOR_PRIMARY,
colorPrimary: colors.COLOR_PRIMARY,
},
}}
>
{node}
</AntdConfig>
);
export default withTheme;

13
apps/web/tsconfig.node.json Normal file
View File

@ -0,0 +1,13 @@
{
"compilerOptions": {
"strictNullChecks": true,
"module": "NodeNext",
"jsx": "react-jsx",
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"@/*": ["*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

2
package.json
View File

@ -4,8 +4,10 @@
"private": true,
"scripts": {
"build": "dotenv -e .env turbo run build",
"prebuild": "dotenv -v NODE_ENV=production -e .env turbo run prebuild",
"clean": "turbo run clean",
"dev": "dotenv -e .env.local turbo run dev",
"predev": "dotenv -e .env.local turbo run predev",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx}\"",
"lint": "dotenv -e .env.local turbo run lint",
"lint:fix": "dotenv -e .env.local turbo run lint:fix",

1
packages/ui/package.json
View File

@ -8,6 +8,7 @@
"lint": "TIMING=1 eslint \"**/*.ts*\""
},
"devDependencies": {
"@ant-design/static-style-extract": "^1.0.2",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@types/rebass": "^4.0.10",

43
packages/ui/tools.ts
View File

@ -1,42 +1 @@
import { extractStyle } from '@ant-design/cssinjs';
import type Entity from '@ant-design/cssinjs/lib/Cache';
import { createHash } from 'crypto';
import fs from 'fs';
import path from 'path';
export type DoExtraStyleOptions = {
baseFileName?: string;
cache: Entity;
dir?: string;
};
export function doExtraStyle({
cache,
dir = 'antd-output',
baseFileName = 'antd.min',
}: DoExtraStyleOptions) {
const baseDir = path.resolve(__dirname, '../../static/css');
const outputCssPath = path.join(baseDir, dir);
if (!fs.existsSync(outputCssPath)) {
fs.mkdirSync(outputCssPath, { recursive: true });
}
const css = extractStyle(cache, true);
if (!css) return '';
const md5 = createHash('md5');
const hash = md5.update(css).digest('hex');
const fileName = `${baseFileName}.${hash.slice(0, 8)}.css`;
const fullpath = path.join(outputCssPath, fileName);
const res = `_next/static/css/${dir}/${fileName}`;
if (fs.existsSync(fullpath)) return res;
fs.writeFileSync(fullpath, css);
return res;
}
export { createCache, StyleProvider } from '@ant-design/cssinjs';
export { extractStyle } from '@ant-design/static-style-extract';

102
pnpm-lock.yaml generated
View File

@ -246,7 +246,7 @@ importers:
version: 1.1.0
jest:
specifier: ^29.4.3
version: 29.7.0(@types/node@18.19.18)
version: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
jest-environment-jsdom:
specifier: ^29.3.1
version: 29.7.0
@ -259,6 +259,9 @@ importers:
ts-jest:
specifier: ^29.0.5
version: 29.1.1(@babel/core@7.23.9)(jest@29.7.0)(typescript@5.3.3)
ts-node:
specifier: ^10.9.1
version: 10.9.2(@types/node@18.19.18)(typescript@5.3.3)
typescript:
specifier: ^5.3.3
version: 5.3.3
@ -310,6 +313,9 @@ importers:
specifier: ^9.0.3
version: 9.0.4(react@18.2.0)
devDependencies:
'@ant-design/static-style-extract':
specifier: ^1.0.2
version: 1.0.2(antd@5.14.2)(react-dom@18.2.0)(react@18.2.0)
'@types/react':
specifier: ^18.2.14
version: 18.2.58
@ -453,6 +459,27 @@ packages:
resize-observer-polyfill: 1.5.1
throttle-debounce: 5.0.0
/@ant-design/static-style-extract@1.0.2(antd@5.14.2)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-3Bsg+5zTd7aaKuWpIPH/Can+UtPkVaA1hHJge9ZgaYYDQX+YrqnB+TVDARzpKHXFGcHZVj4ChV+VOD6f84E3Wg==}
engines: {node: '>=8.x'}
peerDependencies:
antd: ^5.3.0
react: '>=16.9.0'
react-dom: '>=16.9.0'
dependencies:
'@ant-design/cssinjs': 1.18.4(react-dom@18.2.0)(react@18.2.0)
'@babel/runtime': 7.23.9
'@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
antd: 5.14.2(react-dom@18.2.0)(react@18.2.0)
classnames: 2.5.1
rc-align: 4.0.15(react-dom@18.2.0)(react@18.2.0)
rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
rc-util: 5.38.2(react-dom@18.2.0)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: true
/@apollo/client@3.9.5(@types/react@18.2.58)(graphql@16.8.1)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-7y+c8MTPU+hhTwvcGVtMMGIgWduzrvG1mz5yJMRyqYbheBkkky3Lki6ADWVSBXG1lZoOtPYvB2zDgVfKb2HSsw==}
peerDependencies:
@ -5790,7 +5817,7 @@ packages:
lodash.get: 4.4.2
dev: true
/create-jest@29.7.0(@types/node@18.19.18):
/create-jest@29.7.0(@types/node@18.19.18)(ts-node@10.9.2):
resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
hasBin: true
@ -5799,7 +5826,7 @@ packages:
chalk: 4.1.2
exit: 0.1.2
graceful-fs: 4.2.11
jest-config: 29.7.0(@types/node@18.19.18)
jest-config: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
jest-util: 29.7.0
prompts: 2.4.2
transitivePeerDependencies:
@ -6148,6 +6175,10 @@ packages:
resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
dev: true
/dom-align@1.12.4:
resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
dev: true
/domexception@4.0.0:
resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
engines: {node: '>=12'}
@ -6925,7 +6956,7 @@ packages:
'@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3)
'@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.3.3)
eslint: 8.57.0
jest: 29.7.0(@types/node@18.19.18)
jest: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
transitivePeerDependencies:
- supports-color
- typescript
@ -9157,7 +9188,7 @@ packages:
- supports-color
dev: true
/jest-cli@29.7.0(@types/node@18.19.18):
/jest-cli@29.7.0(@types/node@18.19.18)(ts-node@10.9.2):
resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
hasBin: true
@ -9171,10 +9202,10 @@ packages:
'@jest/test-result': 29.7.0
'@jest/types': 29.6.3
chalk: 4.1.2
create-jest: 29.7.0(@types/node@18.19.18)
create-jest: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
exit: 0.1.2
import-local: 3.1.0
jest-config: 29.7.0(@types/node@18.19.18)
jest-config: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
jest-util: 29.7.0
jest-validate: 29.7.0
yargs: 17.7.2
@ -9213,7 +9244,7 @@ packages:
- ts-node
dev: true
/jest-config@29.7.0(@types/node@18.19.18):
/jest-config@29.7.0(@types/node@18.19.18)(ts-node@10.9.2):
resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
peerDependencies:
@ -9248,6 +9279,7 @@ packages:
pretty-format: 29.7.0
slash: 3.0.0
strip-json-comments: 3.1.1
ts-node: 10.9.2(@types/node@18.19.18)(typescript@5.3.3)
transitivePeerDependencies:
- babel-plugin-macros
- supports-color
@ -9288,7 +9320,7 @@ packages:
pretty-format: 29.7.0
slash: 3.0.0
strip-json-comments: 3.1.1
ts-node: 10.9.2(@types/node@20.11.20)(typescript@5.3.3)
ts-node: 10.9.2(@types/node@18.19.18)(typescript@5.3.3)
transitivePeerDependencies:
- babel-plugin-macros
- supports-color
@ -9609,7 +9641,7 @@ packages:
supports-color: 8.1.1
dev: true
/jest@29.7.0(@types/node@18.19.18):
/jest@29.7.0(@types/node@18.19.18)(ts-node@10.9.2):
resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
hasBin: true
@ -9622,7 +9654,7 @@ packages:
'@jest/core': 29.7.0(ts-node@10.9.2)
'@jest/types': 29.6.3
import-local: 3.1.0
jest-cli: 29.7.0(@types/node@18.19.18)
jest-cli: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
transitivePeerDependencies:
- '@types/node'
- babel-plugin-macros
@ -11284,6 +11316,21 @@ packages:
iconv-lite: 0.4.24
unpipe: 1.0.0
/rc-align@4.0.15(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==}
peerDependencies:
react: '>=16.9.0'
react-dom: '>=16.9.0'
dependencies:
'@babel/runtime': 7.23.9
classnames: 2.5.1
dom-align: 1.12.4
rc-util: 5.38.2(react-dom@18.2.0)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
resize-observer-polyfill: 1.5.1
dev: true
/rc-cascader@3.21.2(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-J7GozpgsLaOtzfIHFJFuh4oFY0ePb1w10twqK6is3pAkqHkca/PsokbDr822KIRZ8/CK8CqevxohuPDVZ1RO/A==}
peerDependencies:
@ -13193,7 +13240,7 @@ packages:
'@babel/core': 7.23.9
bs-logger: 0.2.6
fast-json-stable-stringify: 2.1.0
jest: 29.7.0(@types/node@18.19.18)
jest: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
jest-util: 29.7.0
json5: 2.2.3
lodash.memoize: 4.1.2
@ -13223,6 +13270,37 @@ packages:
resolution: {integrity: sha512-PGcnJoTBnVGy6yYNFxWVNkdcAuAMstvutN9MgDJIV6L0oG8fB+ZNNy1T+wJzah8RPGor1mZuPQkVfXNDpy9eHA==}
dev: true
/ts-node@10.9.2(@types/node@18.19.18)(typescript@5.3.3):
resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
hasBin: true
peerDependencies:
'@swc/core': '>=1.2.50'
'@swc/wasm': '>=1.2.50'
'@types/node': '*'
typescript: '>=2.7'
peerDependenciesMeta:
'@swc/core':
optional: true
'@swc/wasm':
optional: true
dependencies:
'@cspotcode/source-map-support': 0.8.1
'@tsconfig/node10': 1.0.9
'@tsconfig/node12': 1.0.11
'@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.4
'@types/node': 18.19.18
acorn: 8.11.3
acorn-walk: 8.3.2
arg: 4.1.3
create-require: 1.1.1
diff: 4.0.2
make-error: 1.3.6
typescript: 5.3.3
v8-compile-cache-lib: 3.0.1
yn: 3.1.1
dev: true
/ts-node@10.9.2(@types/node@20.11.20)(typescript@5.3.3):
resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
hasBin: true

6
turbo.json
View File

@ -30,6 +30,12 @@
},
"graphql:update": {
"cache": false
},
"predev": {
"cache": false
},
"prebuild": {
"cache": false
}
}
}