diff --git a/apps/web/.gitignore b/apps/web/.gitignore
index 387b425..9865b60 100644
--- a/apps/web/.gitignore
+++ b/apps/web/.gitignore
@@ -1,3 +1,4 @@
# Sentry Config File
.sentryclirc
+/styles/antd.min.css
\ No newline at end of file
diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
index e4ed170..71d7724 100644
--- a/apps/web/Dockerfile
+++ b/apps/web/Dockerfile
@@ -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
diff --git a/apps/web/package.json b/apps/web/package.json
index bff01d0..d770551 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -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": {
diff --git a/apps/web/pages/_app.jsx b/apps/web/pages/_app.jsx
index 20c0bd4..b4de8ef 100644
--- a/apps/web/pages/_app.jsx
+++ b/apps/web/pages/_app.jsx
@@ -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';
diff --git a/apps/web/pages/_document.jsx b/apps/web/pages/_document.jsx
index 4e2f9f9..cbdcda6 100644
--- a/apps/web/pages/_document.jsx
+++ b/apps/web/pages/_document.jsx
@@ -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) =>
- {sheet.collectStyles()},
+ enhanceApp: (App) => (props) => sheet.collectStyles(),
});
const initialProps = await Document.getInitialProps(ctx);
- fileName = doExtraStyle({
- cache,
- });
return {
...initialProps,
- styles: [
- initialProps.styles,
- sheet.getStyleElement(),
- fileName && ,
- ],
+ styles: [initialProps.styles, sheet.getStyleElement()],
};
} finally {
sheet.seal();
diff --git a/apps/web/scripts/generate-antd-css.ts b/apps/web/scripts/generate-antd-css.ts
new file mode 100644
index 0000000..c3a81e0
--- /dev/null
+++ b/apps/web/scripts/generate-antd-css.ts
@@ -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}`);
diff --git a/apps/web/styles/theme.tsx b/apps/web/styles/theme.tsx
new file mode 100644
index 0000000..f9645d2
--- /dev/null
+++ b/apps/web/styles/theme.tsx
@@ -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) => (
+
+ {node}
+
+);
+
+export default withTheme;
diff --git a/apps/web/tsconfig.node.json b/apps/web/tsconfig.node.json
new file mode 100644
index 0000000..ad59341
--- /dev/null
+++ b/apps/web/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+ "compilerOptions": {
+ "strictNullChecks": true,
+ "module": "NodeNext",
+ "jsx": "react-jsx",
+ "esModuleInterop": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}
diff --git a/package.json b/package.json
index d04517e..b3346fd 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e478c5d..a03ad5a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -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",
diff --git a/packages/ui/tools.ts b/packages/ui/tools.ts
index 46a6e77..431d0cc 100644
--- a/packages/ui/tools.ts
+++ b/packages/ui/tools.ts
@@ -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';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bfc3003..3d1f845 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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
diff --git a/turbo.json b/turbo.json
index 8dadfa3..16132b7 100644
--- a/turbo.json
+++ b/turbo.json
@@ -30,6 +30,12 @@
},
"graphql:update": {
"cache": false
+ },
+ "predev": {
+ "cache": false
+ },
+ "prebuild": {
+ "cache": false
}
}
}