merge branch upgrade/packages-2606

apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx

@@ -1,8 +1,9 @@
 import type { columns } from '../lib/config';
 import type { Row, StoreSelector } from '../types';
+import { message } from '@/Components/Common/Notification';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
-import { message, Table } from 'ui/elements';
+import { Table } from 'ui/elements';
 
 export const PolicyTable = observer(
   ({

apps/web/Components/Calculation/Form/ELT/Components/ReloadButton.tsx

@@ -19,7 +19,7 @@ export const ReloadButton = observer(
           disabled={hasErrors}
           loading={rows.some((x) => x.status === 'fetching')}
           shape="circle"
-          icon={<ReloadOutlined />}
+          icon={<ReloadOutlined rev="" />}
         />
       </Flex>
     );

apps/web/Components/Calculation/Form/ELT/lib/config.tsx

@@ -41,13 +41,13 @@ export const columns: ColumnsType<Row> = [
       if (record.status === 'fetching')
         return (
           <Flex justifyContent="center">
-            <LoadingOutlined spin />
+            <LoadingOutlined spin rev="" />
           </Flex>
         );
       if (record.status === 'error')
         return (
           <Flex justifyContent="center">
-            <CloseOutlined />
+            <CloseOutlined rev="" />
           </Flex>
         );
 

apps/web/Components/Calculation/Form/Insurance/InsuranceTable/config.tsx

@@ -22,7 +22,7 @@ export const columns: ColumnsType<Insurance.RowValues> = [
           (record.key === 'osago' && $tables.elt.osago.getSelectedRow?.key) ||
           (record.key === 'kasko' && $tables.elt.kasko.getSelectedRow?.key)
         ) {
-          return <CheckOutlined />;
+          return <CheckOutlined rev="" />;
         }
 
         return null;

apps/web/Components/Calculation/builders/build-link.tsx

@@ -20,7 +20,7 @@ export function buildLink<T>(
 
     return (
       <Component
-        href={value || undefined}
+        href={status === 'Disabled' ? undefined : value || undefined}
         disabled={!value || status === 'Disabled'}
         loading={status === 'Loading'}
         {...props}

apps/web/Components/Calculation/builders/build-readonly.tsx

@@ -4,12 +4,17 @@ import { useValue } from '@/stores/calculation/values/hooks';
 import type { Values } from '@/stores/calculation/values/types';
 import { observer } from 'mobx-react-lite';
 import type { ComponentType } from 'react';
+import styled from 'styled-components';
 
 type BuilderProps = {
   elementName: Elements;
   valueName: Values;
 };
 
+const Wrapper = styled.div`
+  margin-bottom: 24px;
+`;
+
 export function buildReadonly<T>(
   Component: ComponentType<T>,
   { elementName, valueName }: BuilderProps
@@ -18,6 +23,10 @@ export function buildReadonly<T>(
     const [value] = useValue(valueName);
     const status = useStatus(elementName);
 
-    return <Component readOnly status={status} value={value} {...props} />;
+    return (
+      <Wrapper>
+        <Component readOnly status={status} value={value} {...props} />
+      </Wrapper>
+    );
   });
 }

apps/web/Components/Calculation/config/elements-components.ts

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
 import type { Elements as ActionElements } from './map/actions';
 import type { Elements as ValuesElements } from './map/values';

apps/web/Components/Calculation/config/elements-props.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
 import CurrencyAddon from '../addons/currency-addon';
 import type { ElementsProps } from './elements-components';
@@ -412,12 +411,12 @@ const props: Partial<ElementsProps> = {
   btnCreateKP: {
     type: 'primary',
     children: 'Создать КП',
-    icon: <PlusOutlined />,
+    icon: <PlusOutlined rev="" />,
   },
   btnCreateKPMini: {
     children: '',
     type: 'primary',
-    icon: <PlusOutlined />,
+    icon: <PlusOutlined rev="" />,
     block: true,
   },
   tbxCreditRate: {
@@ -504,7 +503,7 @@ const props: Partial<ElementsProps> = {
       width: '100%',
     },
   },
-  linkDownloadKp: { children: 'Скачать КП', icon: <DownloadOutlined />, type: 'primary' },
+  linkDownloadKp: { children: 'Скачать КП', icon: <DownloadOutlined rev="" />, type: 'primary' },
   tbxMileage: {
     min: 0,
     step: 100,

apps/web/Components/Calculation/config/elements-render/override.tsx

@@ -10,6 +10,7 @@ import { useErrors, useStore } from '@/stores/hooks';
 import { useIsFetching } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
+import styled from 'styled-components';
 import { Link, Tooltip } from 'ui/elements';
 import { LoadingOutlined } from 'ui/elements/icons';
 
@@ -24,6 +25,10 @@ const formatter = Intl.NumberFormat('ru', {
   minimumFractionDigits: 2,
 }).format;
 
+const TextAddon = styled.span`
+  font-size: 14px;
+`;
+
 const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
   btnCalculate: {
     render: () => {
@@ -305,13 +310,11 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
         const { $calculation } = useStore();
         const { min, max } = $calculation.$values.getValue('irrInfo');
 
+        const addon = <TextAddon>{`${formatter(min)}% - ${formatter(max)}%`}</TextAddon>;
+
         return (
           <Container>
-            <Head
+            <Head htmlFor={elementName} title={title} addon={addon} />
-              htmlFor={elementName}
-              title={title}
-              addon={`${formatter(min)}% - ${formatter(max)}%`}
-            />
             <Element {...props} min={min > 0 ? min : undefined} max={max > 0 ? max : undefined} />
           </Container>
         );
@@ -345,7 +348,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
               <Element
                 {...props}
                 id={elementName}
-                addonBefore={isFetching && <LoadingOutlined spin />}
+                addonBefore={isFetching && <LoadingOutlined spin rev="" />}
               />
             </Container>
           </Tooltip>

apps/web/Components/Calculation/config/elements-titles.ts

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
 import type { Elements as ActionElements } from './map/actions';
 import type { Elements as ValuesElements } from './map/values';

apps/web/Components/Calculation/config/elements-types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
 import * as b from '../builders';
 import type { Elements as ActionElements } from './map/actions';

apps/web/Components/Calculation/config/map/values.ts

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
 import type { CalculationValues, Values } from '@/stores/calculation/values/types';
 

apps/web/Components/Common/Notification.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-mutable-exports */
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import type { ReactNode } from 'react';
+import { message as antdMessage, notification as antdNotification } from 'ui/elements';
+
+export let message: Readonly<MessageInstance>;
+export let notification: Readonly<NotificationInstance>;
+
+export function Notification({ children }: { children: ReactNode }) {
+  const [messageApi, messageContextHolder] = antdMessage.useMessage({
+    maxCount: 3,
+    top: 70,
+  });
+
+  const [notificationApi, notificationContextHolder] = antdNotification.useNotification({
+    placement: 'bottomRight',
+  });
+
+  message = messageApi;
+  notification = notificationApi;
+
+  return (
+    <>
+      {messageContextHolder}
+      {notificationContextHolder}
+      {children}
+    </>
+  );
+}

apps/web/Components/Layout/Auth.jsx

@@ -13,6 +13,7 @@ const UserText = styled.span`
   font-size: 0.5rem;
   font-family: 'Montserrat';
   font-weight: 500;
+  line-height: 1;
 
   ${min('laptop')} {
     font-size: 0.75rem;
@@ -35,6 +36,7 @@ const Logout = styled.a`
   font-size: 0.45rem;
   font-family: 'Montserrat';
   font-weight: 500;
+  margin-top: 4px;
 
   ${min('laptop')} {
     font-size: 0.55rem;

apps/web/Components/Layout/Header.jsx

@@ -15,9 +15,9 @@ const HeaderContent = styled(Flex)`
     var(--color-tertiarty) 100%
   );
 
-  padding: 10px 12px;
+  padding: 14px 12px;
   ${min('laptop')} {
-    padding: 10px 12px;
+    padding: 14px 12px;
     padding-left: 20px;
   }
 `;

apps/web/config/meta.jsx

@@ -1,18 +1,12 @@
-import getUrls from '@/config/urls';
+import { withBasePath } from '@/config/urls';
-
-const { BASE_PATH } = getUrls();
-
-function buildPath(filePath) {
-  return String.prototype.concat(BASE_PATH, filePath);
-}
 
 export const metaFavicon = (
   <>
-    <link rel="apple-touch-icon" sizes="180x180" href={buildPath('/apple-touch-icon.png')} />
+    <link rel="apple-touch-icon" sizes="180x180" href={withBasePath('/apple-touch-icon.png')} />
-    <link rel="icon" type="image/png" sizes="32x32" href={buildPath('/favicon-32x32.png')} />
+    <link rel="icon" type="image/png" sizes="32x32" href={withBasePath('/favicon-32x32.png')} />
-    <link rel="icon" type="image/png" sizes="16x16" href={buildPath('/favicon-16x16.png')} />
+    <link rel="icon" type="image/png" sizes="16x16" href={withBasePath('/favicon-16x16.png')} />
-    <link rel="manifest" href={buildPath('/site.webmanifest')} />
+    <link rel="manifest" href={withBasePath('/site.webmanifest')} />
-    <link rel="mask-icon" href={buildPath('/safari-pinned-tab.svg')} color="#5bbad5" />
+    <link rel="mask-icon" href={withBasePath('/safari-pinned-tab.svg')} color="#5bbad5" />
     <meta name="theme-color" content="#ffffff" />
   </>
 );

apps/web/config/urls.ts

@@ -4,14 +4,13 @@ import getConfig from 'next/config';
 import { isServer } from 'tools/common';
 
 const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
+const { BASE_PATH } = publicRuntimeConfigSchema.parse(publicRuntimeConfig);
+
+export function withBasePath(path: string) {
+  return String.prototype.concat(BASE_PATH, path);
+}
 
 function getUrls() {
-  const { BASE_PATH } = publicRuntimeConfigSchema.parse(publicRuntimeConfig);
-
-  function withBasePath(url: string) {
-    return BASE_PATH + url;
-  }
-
   if (isServer()) {
     const {
       URL_CRM_GRAPHQL_DIRECT,

apps/web/next.config.js

@@ -1,13 +1,11 @@
-const { withPlugins } = require('next-composed-plugins');
-const withLess = require('next-with-less');
 const fs = require('fs');
 const path = require('path');
-const { COLORS_DEV, COLORS_PROD } = require('./constants/colors');
 const envSchema = require('./config/schema/env');
 const urls = require('./constants/urls');
 const { devices } = require('./config/ui');
 const { publicRuntimeConfigSchema } = require('./config/schema/runtime-config');
 const { serverRuntimeConfigSchema } = require('./config/schema/runtime-config');
+const { Config } = require('next-recompose-plugins');
 
 const env = envSchema.parse(process.env);
 
@@ -20,8 +18,7 @@ function buildFaviconRewrite(source) {
   };
 }
 
-/** @type {import('next').NextConfig} */
+module.exports = new Config({
-const nextConfig = {
   basePath: env.BASE_PATH,
   compiler: {
     styledComponents: true,
@@ -73,22 +70,5 @@ const nextConfig = {
   },
   serverRuntimeConfig: serverRuntimeConfigSchema.parse(env),
   swcMinify: true,
-  transpilePackages: ['ui', 'tools'],
+  transpilePackages: ['ui', 'tools', 'antd'],
-};
+}).build();
-
-const plugins = [withLess];
-
-const colorPrimary = env.USE_DEV_COLORS ? COLORS_DEV.COLOR_PRIMARY : COLORS_PROD.COLOR_PRIMARY;
-
-const config = {
-  ...nextConfig,
-  lessLoaderOptions: {
-    lessOptions: {
-      modifyVars: {
-        'primary-color': colorPrimary,
-      },
-    },
-  },
-};
-
-module.exports = withPlugins(config, plugins);

apps/web/package.json

@@ -22,13 +22,10 @@
     "@trpc/server": "^10.13.0",
     "axios": "^1.3.4",
     "dayjs": "^1.11.7",
-    "less": "^4.1.3",
-    "less-loader": "^11.1.0",
     "mobx": "^6.8.0",
     "mobx-react-lite": "^3.4.0",
-    "next": "^13.2.1",
+    "next": "^13.4.7",
-    "next-composed-plugins": "^1.0.1",
+    "next-recompose-plugins": "^2.0.0",
-    "next-with-less": "^2.0.5",
     "normalize.css": "^8.0.1",
     "radash": "^10.7.0",
     "react": "^18.2.0",
@@ -50,10 +47,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/node": "^18.14.2",
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^18.2.6",
     "@types/styled-components": "^5.1.26",
-    "eslint": "^8.35.0",
+    "eslint": "^8.43.0",
     "eslint-config-custom": "*",
     "gql-sdl": "^1.0.0",
     "jest": "^29.4.3",

apps/web/pages/_app.jsx

@@ -1,12 +1,13 @@
 import 'normalize.css';
-import 'ui/elements/styles/antd.less';
 import '../styles/fonts.css';
 import '../styles/globals.css';
 import initializeQueryClient from '@/api/client';
 import initializeApollo from '@/apollo/client';
+import { Notification } from '@/Components/Common/Notification';
 import Layout from '@/Components/Layout';
 import { theme } from '@/config/ui';
 import StoreProvider from '@/stores/Provider';
+import getColors from '@/styles/colors';
 import { GlobalStyle } from '@/styles/global-style';
 import { trpcClient } from '@/trpc/client';
 import { ApolloProvider } from '@apollo/client';
@@ -14,13 +15,15 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import Head from 'next/head';
 import { useMemo } from 'react';
 import { ThemeProvider } from 'styled-components';
-import { Config as AntdConfig } from 'ui/elements/Config';
+import { Config as AntdConfig } from 'ui/elements';
 
 // eslint-disable-next-line turbo/no-undeclared-env-vars
 if (process.env.NODE_ENV === 'development') {
   require('../mocks');
 }
 
+const colorPrimary = getColors().COLOR_PRIMARY;
+
 function App({ Component, pageProps }) {
   const { initialApolloState, initialQueryState } = pageProps;
   const apolloClient = useMemo(() => initializeApollo(initialApolloState), [initialApolloState]);
@@ -36,15 +39,26 @@ function App({ Component, pageProps }) {
       </Head>
       <GlobalStyle />
       <StoreProvider {...pageProps}>
-        <AntdConfig>
+        <ApolloProvider client={apolloClient}>
-          <ApolloProvider client={apolloClient}>
+          <QueryClientProvider client={queryClient}>
-            <QueryClientProvider client={queryClient}>
+            <AntdConfig
-              <Layout>
+              theme={{
-                <Component {...pageProps} />
+                token: {
-              </Layout>
+                  borderRadius: 2,
-            </QueryClientProvider>
+                  borderRadiusLG: 2,
-          </ApolloProvider>
+                  colorLink: colorPrimary,
-        </AntdConfig>
+                  colorPrimary,
+                },
+              }}
+            >
+              <Notification>
+                <Layout>
+                  <Component {...pageProps} />
+                </Layout>
+              </Notification>
+            </AntdConfig>
+          </QueryClientProvider>
+        </ApolloProvider>
       </StoreProvider>
     </ThemeProvider>
   );

apps/web/pages/_document.jsx

@@ -1,29 +1,36 @@
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
 import { metaFavicon } from '@/config/meta';
+import { withBasePath } from '@/config/urls';
 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 sheet = new ServerStyleSheet();
+    const cache = createCache();
+    let fileName = '';
     const originalRenderPage = ctx.renderPage;
+    const sheet = new ServerStyleSheet();
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
-          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+          enhanceApp: (App) => (props) =>
+            <StyleProvider cache={cache}>{sheet.collectStyles(<App {...props} />)}</StyleProvider>,
         });
 
       const initialProps = await Document.getInitialProps(ctx);
+      fileName = doExtraStyle({
+        cache,
+      });
 
       return {
         ...initialProps,
-        styles: (
+        styles: [
-          <>
+          initialProps.styles,
-            {initialProps.styles}
+          sheet.getStyleElement(),
-            {sheet.getStyleElement()}
+          fileName && <link rel="stylesheet" href={withBasePath(`/${fileName}`)} />,
-          </>
+        ],
-        ),
       };
     } finally {
       sheet.seal();

apps/web/process/calculate/action.ts

@@ -1,6 +1,6 @@
 import type { ProcessContext } from '../types';
+import { notification } from '@/Components/Common/Notification';
 import { toJS } from 'mobx';
-import { notification } from 'ui/elements';
 
 const key = 'ACTION_CALCULATE';
 const errorMessage = 'Ошибка во время расчета графика!';
@@ -36,6 +36,7 @@ export async function action({ store, trpcClient }: ProcessContext) {
           description: res.error,
           key,
           message: errorMessage,
+          placement: 'bottomRight',
         });
       } else {
         $results.setPayments(res.data.resultPayments);
@@ -45,6 +46,7 @@ export async function action({ store, trpcClient }: ProcessContext) {
         notification.success({
           key,
           message: successMessage,
+          placement: 'bottomRight',
         });
       }
     })
@@ -53,6 +55,7 @@ export async function action({ store, trpcClient }: ProcessContext) {
         description: JSON.stringify(error),
         key,
         message: errorMessage,
+        placement: 'bottomRight',
       });
     })
     .finally(() => {

apps/web/process/create-kp/action.ts

@@ -1,8 +1,8 @@
 import type { ProcessContext } from '../types';
+import { notification } from '@/Components/Common/Notification';
 import * as CRMTypes from '@/graphql/crm.types';
 import { normalizeOptions } from '@/utils/entity';
 import { toJS } from 'mobx';
-import { notification } from 'ui/elements';
 
 const key = 'ACTION_CREATEKP';
 const errorMessage = 'Ошибка во время создания КП!';
@@ -47,6 +47,7 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) {
           description: res.error,
           key,
           message: errorMessage,
+          placement: 'bottomRight',
         });
       } else {
         $results.setPayments(res.data.resultPayments);
@@ -56,6 +57,7 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) {
         notification.success({
           key,
           message: successMessage,
+          placement: 'bottomRight',
         });
 
         const leadid = $calculation.element('selectLead').getValue();
@@ -83,6 +85,7 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) {
         description: JSON.stringify(error),
         key,
         message: errorMessage,
+        placement: 'bottomRight',
       });
     })
     .finally(() => {

apps/web/process/leasing-without-kasko/reactions.ts

@@ -1,5 +1,6 @@
 /* eslint-disable canonical/sort-keys */
 
+import { notification } from '@/Components/Common/Notification';
 import * as CRMTypes from '@/graphql/crm.types';
 import type { ProcessContext } from '@/process/types';
 import { normalizeOptions } from '@/utils/entity';
@@ -7,7 +8,6 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { reaction } from 'mobx';
 import { uid } from 'radash';
-import { notification } from 'ui/elements';
 
 dayjs.extend(utc);
 
@@ -24,6 +24,7 @@ export function common({ store, apolloClient }: ProcessContext) {
           key: NOTIFICATION_KEY,
           message: 'Внимание',
           description: 'Лизинг без КАСКО был сброшен',
+          placement: 'bottomRight',
         });
       }
     }

apps/web/process/load-kp/reactions.ts

@@ -1,9 +1,9 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import eltHelper from '../elt/lib/helper';
+import { message } from '@/Components/Common/Notification';
 import type { ProcessContext } from '@/process/types';
 import { reaction } from 'mobx';
 import { omit } from 'radash';
-import { message } from 'ui/elements';
 
 const key = 'KP_LOADING_INFO';
 

apps/web/stores/results/index.ts

@@ -1,9 +1,9 @@
 import { defaultResultsValues } from './default-values';
 import type { ResultPayment, ResultValues } from './types';
+import { notification } from '@/Components/Common/Notification';
 import type RootStore from '@/stores/root';
 import type { IObservableArray } from 'mobx';
 import { makeAutoObservable, observable } from 'mobx';
-import { notification } from 'ui/elements';
 
 export default class Results {
   private root: RootStore;
@@ -40,6 +40,7 @@ export default class Results {
       description: 'Результаты расчета были сброшены',
       key: 'ACTION_CALCULATE',
       message: 'Внимание',
+      placement: 'bottomRight',
       type: 'warning',
     });
   };

apps/web/stores/tables/elt/policy.ts

@@ -2,9 +2,9 @@ import type RootStore from '../../root';
 import Validation from '../../validation';
 import type { ValidationConfig } from '../../validation/types';
 import type * as ELT from '@/Components/Calculation/Form/ELT/types';
+import { notification } from '@/Components/Common/Notification';
 import type { IObservableArray } from 'mobx';
 import { makeAutoObservable, observable, reaction, toJS } from 'mobx';
-import { notification } from 'ui/elements';
 
 type ConstructorInput = {
   rootStore: RootStore;
@@ -38,6 +38,7 @@ export default class PolicyStore {
             description: 'Выбранный расчет ЭЛТ был сброшен',
             key: validationConfig.err_key,
             message: validationConfig.err_title,
+            placement: 'bottomRight',
             type: 'warning',
           });
         }

apps/web/stores/validation/index.ts

@@ -1,8 +1,8 @@
 import type RootStore from '../root';
 import type { RemoveError, ValidationConfig, ValidationError, ValidationParams } from './types';
+import { notification } from '@/Components/Common/Notification';
 import { makeAutoObservable } from 'mobx';
 import { isServer } from 'tools';
-import { notification } from 'ui/elements';
 
 export default class Validation {
   private root: RootStore;
@@ -27,7 +27,7 @@ export default class Validation {
   public removeError = ({ key }: Pick<ValidationError, 'key'>) => {
     const error = [...this.errors].find((x) => x.key === key);
     if (error) this.errors.delete(error);
-    if (this.errors.size === 0) notification.close(this.params.err_key);
+    if (this.errors.size === 0 && !isServer()) notification.destroy(this.params.err_key);
   };
 
   public setError = ({ key, message, silent }: ValidationParams) => {
@@ -41,6 +41,7 @@ export default class Validation {
         description: message,
         key: this.params.err_key,
         message: this.params.err_title,
+        placement: 'bottomRight',
         type: this.root.$process.has('Unlimited') ? 'warning' : 'error',
       });
 
@@ -49,6 +50,6 @@ export default class Validation {
 
   public clearErrors = () => {
     this.errors.clear();
-    notification.close(this.params.err_key);
+    notification.destroy(this.params.err_key);
   };
 }

package.json

@@ -27,7 +27,7 @@
     "lint-staged": "^13.2.0",
     "prettier": "^2.8.4",
     "tools": "*",
-    "turbo": "^1.8.5"
+    "turbo": "^1.10.6"
   },
   "packageManager": "yarn@1.22.17",
   "engines": {

packages/eslint-config-custom/index.js

@@ -18,7 +18,7 @@ module.exports = {
   ],
   overrides: [
     {
-      extends: ['canonical/typescript', 'canonical/zod'],
+      extends: ['canonical/typescript', 'canonical/zod', 'canonical/regexp'],
       files: '*.ts',
     },
     {

packages/eslint-config-custom/package.json

@@ -4,16 +4,16 @@
   "license": "MIT",
   "main": "index.js",
   "devDependencies": {
-    "@typescript-eslint/parser": "^5.54.0",
+    "@typescript-eslint/parser": "^5.60.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.43.0",
-    "eslint-config-canonical": "^40.0.8",
+    "eslint-config-canonical": "^41.0.5",
-    "eslint-config-next": "^13.2.1",
+    "eslint-config-next": "^13.4.7",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-turbo": "^0.0.9",
+    "eslint-config-turbo": "^1.10.6",
-    "eslint-plugin-canonical": "^4.2.0",
+    "eslint-plugin-canonical": "^4.2.2",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-sonarjs": "^0.18.0",
+    "eslint-plugin-sonarjs": "^0.19.0",
-    "eslint-plugin-testing-library": "^5.10.2"
+    "eslint-plugin-testing-library": "^5.11.0"
   },
   "publishConfig": {
     "access": "public"

packages/tools/package.json

@@ -8,7 +8,7 @@
     "lint": "TIMING=1 eslint \"**/*.ts*\""
   },
   "devDependencies": {
-    "eslint": "^8.35.0",
+    "eslint": "^8.43.0",
     "eslint-config-custom": "*"
   },
   "dependencies": {}

packages/ui/elements/Config.jsx

@@ -1,6 +0,0 @@
-import { ConfigProvider } from 'antd';
-import ru_RU from 'antd/lib/locale/ru_RU';
-
-export function Config({ children }) {
-  return <ConfigProvider locale={ru_RU}>{children}</ConfigProvider>;
-}

packages/ui/elements/Config.tsx

@@ -0,0 +1,12 @@
+import { ConfigProvider } from 'antd';
+import type { ConfigProviderProps } from 'antd/es/config-provider';
+import ru_RU from 'antd/lib/locale/ru_RU';
+import type { ReactNode } from 'react';
+
+export function Config({ children, ...config }: ConfigProviderProps & { children: ReactNode }) {
+  return (
+    <ConfigProvider {...config} locale={ru_RU}>
+      {children}
+    </ConfigProvider>
+  );
+}

packages/ui/elements/index.ts

@@ -1,14 +1,3 @@
-import { message, notification } from 'antd';
-
-message.config({
-  maxCount: 3,
-  top: 70,
-});
-
-notification.config({
-  placement: 'bottomRight',
-});
-
 export * from './Button';
 export * from './Checkbox';
 export * from './Config';

packages/ui/elements/styles/antd.less

@@ -1 +0,0 @@
-@import 'antd/dist/antd.less';

packages/ui/package.json

@@ -8,19 +8,20 @@
     "lint": "TIMING=1 eslint \"**/*.ts*\""
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^18.2.6",
     "@types/rebass": "^4.0.10",
     "@types/styled-components": "^5.1.26",
-    "eslint": "^8.35.0",
+    "eslint": "^8.43.0",
     "eslint-config-custom": "*",
     "react": "^18.2.0",
     "tsconfig": "*",
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@ant-design/icons": "4.8.0",
+    "@ant-design/cssinjs": "^1.10.1",
-    "antd": "4.24.7",
+    "@ant-design/icons": "^5.1.4",
+    "antd": "^5.6.3",
     "rebass": "^4.0.7",
     "styled-components": "^5.3.6",
     "use-debounce": "^9.0.3"

packages/ui/tools.ts

@@ -0,0 +1,42 @@
+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';