[refactor] Migrate to Antd 5, refactor stories

agentlab · Aug 16, 2024 · 2355d2b · 2355d2b
1 parent 1dc2087
commit 2355d2b
Show file tree

Hide file tree

Showing 24 changed files with 4,399 additions and 5,410 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -12,4 +12,4 @@ const config = {
   //quoteProps: 'consistent',
 };
 
-export default config;
+export default config;
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,40 +1,26 @@
 const config = {
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
 
-  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
+  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
   staticDirs: ['../stories/public'],
 
-
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/preset-scss',
     'storybook-css-modules-preset',
-    {
-      name: '@storybook/preset-ant-design',
-      options: {
-        lessOptions: {
-          //see https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
-          modifyVars: {
-            'primary-color': '#1864FB', //'#1DA57A', // primary color for all components  24 100 251
-            'font-size-base': '12px', // major text font size
-            'link-color': '#1DA57A',
-          },
-        },
-      },
-    },
-    '@storybook/addon-webpack5-compiler-babel'
+    '@storybook/addon-webpack5-compiler-babel',
   ],
 
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: false, // type-check stories during Storybook build
     reactDocgen: false, //'react-docgen-typescript',
   },
-  docs: {}
+  docs: {},
 };
 
-export default config;
+export default config;
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,18 +1,38 @@
 import React from 'react';
 
-import moment from 'moment';
-import { ConfigProvider } from 'antd';
+import * as moment from 'moment';
+import { ConfigProvider, theme } from 'antd';
 import ruRu from 'antd/es/locale/ru_RU';
 
-import 'antd/dist/antd.less';
 
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {
   // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
   actions: { argTypesRegex: '^on.*' },
 };
 
-export const decorators = [(Story) => <ConfigProvider locale={ruRu}>{Story()}</ConfigProvider>];
+export const decorators = [
+  (Story) => (
+    <ConfigProvider
+      locale={ruRu}
+      theme={{
+        token: {
+          // Seed Token
+          colorPrimary: '#1DA57A', // '#1864FB', // primary color for all components  24 100 251
+          //borderRadius: 2,
+          fontSize: 12, // 14 // major text font size
+          colorLink: '#1DA57A', //
+
+          // Alias Token
+          //colorBgContainer: '#f6ffed',
+
+          algorithm: theme.compactAlgorithm,
+        },
+      }}>
+      {Story()}
+    </ConfigProvider>
+  ),
+];
 
 moment.locale('ru');
 moment.defaultFormat = 'LLL';

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,39 +18,40 @@
   "jest.runMode": "on-demand",
   "cSpell.words": [
     "A",
-    "Aртефакт",
-    "Constrs",
-    "Descr",
-    "Descrs",
-    "Individ",
-    "Interp",
-    "Intrnl",
-    "Modifiability",
-    "Rubberband",
-    "SHACL",
-    "SPDX",
-    "Scroller",
-    "Subcat",
     "agentlab",
     "aldkg",
     "antd",
     "antv",
+    "Aртефакт",
     "collapsable",
     "colls",
+    "Constrs",
     "dcterms",
+    "Descr",
+    "Descrs",
+    "Docgen",
     "dryrun",
+    "Individ",
+    "Interp",
+    "Intrnl",
     "jsld",
     "jumpover",
     "ldkg",
     "middlewares",
     "mktp",
+    "Modifiability",
     "oslc",
     "pannable",
     "plotly",
     "pporoles",
     "remotedev",
+    "Rubberband",
+    "Scroller",
+    "SHACL",
     "sider",
     "sparql",
+    "SPDX",
+    "Subcat",
     "undelegate",
     "uuidv"
   ],

diff --git a/package.json b/package.json
@@ -56,68 +56,69 @@
   "peerDependencies": {
     "@agentlab/react-collapse-pane": ">=2.0.3",
     "@agentlab/sparql-jsld-client": ">=5.0.10",
-    "@ant-design/icons": ">=4.7.0",
+    "@ant-design/icons": ">=5.4.0",
     "@tinymce/tinymce-react": ">=3.13.0",
-    "antd": ">=4.24.16",
+    "antd": ">=5.20.1",
     "history": ">=5.3.0",
     "lodash-es": ">=4.17.21",
     "mobx": ">=6.13.1",
     "mobx-react-lite": ">=4.0.7",
     "mobx-state-tree": ">=6.0.1",
     "moment": ">=2.30.1",
-    "rc-util": ">=5.17.0",
+    "rc-util": ">=5.43.0",
     "react": ">=18.3.1",
     "react-base-table": ">=1.13.0",
     "react-dnd": ">=13.1.1",
     "react-dnd-html5-backend": ">=12.1.1",
     "react-dom": ">=18.3.1",
-    "react-error-boundary": ">=3.1.4",
+    "react-error-boundary": ">=4.0.13",
     "react-horizontal-scrolling-menu": ">=2.7.0",
-    "react-router": ">=6.2.2",
-    "react-router-dom": ">=6.2.2",
+    "react-router": ">=6.26.1",
+    "react-router-dom": ">=6.26.1",
     "react-sortable-hoc": ">=2.0.0",
     "react-split-pane": ">=2.0.3",
-    "react-virtualized": ">=9.22.3",
-    "styled-components": ">=5.3.3",
+    "react-virtualized": ">=9.22.5",
+    "styled-components": ">=6.1.12",
     "tinymce": ">=5.10.2",
     "uri-js": ">=4.4.1",
     "uuid62": ">=1.0.2"
   },
   "dependencies": {
     "@agentlab/react-collapse-pane": "^2.0.3",
     "@agentlab/sparql-jsld-client": "^5.0.10",
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/icons": "^5.4.0",
     "@tinymce/tinymce-react": "^3.13.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/react-router": "^5.1.18",
+    "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-virtualized": "^9.21.17",
-    "@types/styled-components": "^5.1.22",
+    "@types/react-virtualized": "^9.21.30",
+    "@types/styled-components": "^5.1.34",
     "@types/tinymce": "^4.6.4",
-    "antd": "^4.24.16",
+    "antd": "^5.20.1",
     "history": "^5.3.0",
     "mobx-react-lite": "^4.0.7",
+    "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-base-table": "^1.13.0",
     "react-dnd": "13.1.1",
     "react-dnd-html5-backend": "12.1.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-horizontal-scrolling-menu": "^2.7.0",
-    "react-is": "^17.0.2",
-    "react-router": "^6.2.2",
-    "react-router-dom": "^6.2.2",
+    "react-is": "^18.3.1",
+    "react-router": "^6.26.1",
+    "react-router-dom": "^6.26.1",
     "react-sortable-hoc": "^2.0.0",
     "react-split-pane": "^2.0.3",
-    "react-virtualized": "^9.22.3",
-    "styled-components": "^5.3.3",
+    "react-virtualized": "^9.22.5",
+    "styled-components": "^6.1.12",
     "tinymce": "5.10.2",
     "uri-js": "^4.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/preset-env": "^7.25.2",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@chromatic-com/storybook": "1.6.1",
@@ -126,68 +127,68 @@
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-actions": "^8.2.6",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-    "@storybook/addons": "7.6.20",
-    "@storybook/node-logger": "^8.2.6",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/node-logger": "^8.2.9",
     "@storybook/preset-ant-design": "^0.0.2",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.2.6",
-    "@storybook/react-webpack5": "^8.2.6",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-webpack5": "^8.2.9",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "^22.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "autoprefixer": "^10.4.2",
-    "babel-loader": "^8.2.3",
-    "cpy-cli": "^4.0.0",
+    "@types/node": "^22.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
+    "autoprefixer": "^10.4.20",
+    "babel-loader": "^9.1.3",
+    "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.17",
-    "cypress": "^13.13.2",
+    "cssnano": "^5.1.15",
+    "cypress": "^13.13.3",
     "cypress-storybook": "^1.0.0",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^3.4.0",
+    "eslint-plugin-cypress": "^3.5.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "globals": "^15.8.0",
+    "globals": "^15.9.0",
     "husky": "^9.1.4",
     "jest": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.9",
     "mst-middlewares": "^6.1.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.7",
+    "postcss": "^8.4.41",
     "prettier": "3.3.3",
-    "react-redux": "^7.2.6",
-    "redux": "^4.1.2",
+    "react-redux": "^9.1.2",
+    "redux": "^5.0.1",
     "remotedev": "^0.2.9",
     "rimraf": "^6.0.1",
-    "rollup": "^4.19.1",
+    "rollup": "^4.20.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.32.12",
     "sass-loader": "10.1.1",
-    "storybook": "^8.2.6",
+    "storybook": "^8.2.9",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^2.0.0",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.4",
     "tslib": "^2.6.3",
-    "tsx": "^4.16.3",
+    "tsx": "^4.17.0",
     "typescript": "5.5.4",
-    "typescript-eslint": "^8.0.0",
+    "typescript-eslint": "^8.1.0",
     "typescript-plugin-css-modules": "^5.1.0"
   },
   "lint-staged": {

diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -52,7 +52,7 @@ export interface IconProps extends CoreIconProps {
   component?: React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>;
 }
 
-export interface IconComponent<P> extends React.SFC<P> {
+export interface IconComponent<P> extends React.FC<P> {
   createFromIconfontCN: typeof createFromIconfontCN;
   getTwoToneColor: typeof getTwoToneColor;
   setTwoToneColor: typeof setTwoToneColor;

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -11,16 +11,6 @@ declare module 'uuid62';
 
 declare module 'react-split-pane/lib/Pane';
 
-declare module '*.less' {
-  const content: any;
-  export default content;
-}
-
-declare module '*.module.less' {
-  const classes: { [className: string]: string };
-  export default classes;
-}
-
 declare module '*.module.scss' {
   const classes: { [className: string]: string };
   export default classes;
@@ -37,3 +27,5 @@ declare module '*.css' {
 }
 
 declare module 'react-base-table';
+
+declare module 'remotedev';