upgrade storybook@9

Author: renjie-run

.eslintrc.json

@@ -5,22 +5,16 @@
   },
   "extends": [
     "react-app",
-    "react-app/jest",
-    "eslint:recommended"
+    "eslint:recommended",
+    "plugin:storybook/recommended"
   ],
-  "parser": "@babel/eslint-parser",
+  "parser": "babel-eslint",
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,
       "jsx": true
     },
-    "sourceType": "module",
-    "babelOptions": {
-      "presets": [
-        [ "babel-preset-react-app", false ],
-        "babel-preset-react-app/prod"
-      ]
-    }
+    "sourceType": "module"
   },
   "plugins": [
     "react",
@@ -36,33 +30,91 @@
     "no-var": "off",
     "no-case-declarations": "off",
     "no-redeclare": "off",
-    "indent": ["warn", 2, { 
-      "SwitchCase": 1,
-      "ignoreComments": false
-    }],
-    "linebreak-style": ["warn", "unix"],
-    "quotes": ["warn", "single"],
-    "semi": ["warn", "always"],
+    "indent": [
+      "warn",
+      2,
+      {
+        "SwitchCase": 1,
+        "ignoreComments": false
+      }
+    ],
+    "linebreak-style": [
+      "warn",
+      "unix"
+    ],
+    "quotes": [
+      "warn",
+      "single"
+    ],
+    "semi": [
+      "warn",
+      "always"
+    ],
     "no-unreachable": "warn",
     "no-class-assign": "warn",
     "no-unused-vars": "warn",
     "no-useless-escape": "off",
     "no-irregular-whitespace": "warn",
     "no-trailing-spaces": "warn",
-    "react/jsx-indent": ["warn", 2],
+    "react/jsx-indent": [
+      "warn",
+      2
+    ],
     "eol-last": "error",
-    "space-before-function-paren": ["warn", {"named": "never"}],
-    "array-bracket-spacing": ["warn", "never"],
-    "object-curly-spacing": ["warn", "always"],
+    "space-before-function-paren": [
+      "warn",
+      {
+        "named": "never"
+      }
+    ],
+    "array-bracket-spacing": [
+      "warn",
+      "never"
+    ],
+    "object-curly-spacing": [
+      "warn",
+      "always"
+    ],
     "spaced-comment": "warn",
-    "keyword-spacing": ["warn", {"before": true}],
+    "keyword-spacing": [
+      "warn",
+      {
+        "before": true
+      }
+    ],
     "space-infix-ops": "error",
-    "key-spacing": ["error", { "beforeColon": false }],
-    "arrow-spacing": ["error", { "before": true, "after": true }],
-    "comma-spacing": ["error", { "before": false, "after": true }],
+    "key-spacing": [
+      "error",
+      {
+        "beforeColon": false
+      }
+    ],
+    "arrow-spacing": [
+      "error",
+      {
+        "before": true,
+        "after": true
+      }
+    ],
+    "comma-spacing": [
+      "error",
+      {
+        "before": false,
+        "after": true
+      }
+    ],
     "no-duplicate-imports": "error",
-    "one-var": ["error", "never"],
-    "no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1 }],
+    "one-var": [
+      "error",
+      "never"
+    ],
+    "no-multiple-empty-lines": [
+      "error",
+      {
+        "max": 2,
+        "maxEOF": 1
+      }
+    ],
     "no-multi-spaces": "error",
     "react/jsx-closing-tag-location": "error"
   }

.gitignore

@@ -35,3 +35,7 @@ yarn-error.log*
 
 # Developer scripts for translation
 /translate.py
+
+# storybook
+*storybook.log
+storybook-static

.storybook/main.js

@@ -1,37 +1,20 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  staticDirs: ['../public'],
-  addons: [
-    '@storybook/addon-actions', 
-    '@storybook/addon-links',
-    '@storybook/addon-controls',
-    '@storybook/preset-create-react-app',
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-      }
-    }
+
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  "stories": [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
   ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
-  },
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.(js|jsx)$/,
-      exclude: /node_modules/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-react']
-        }
-      }
-    });
-    return config;
+  "addons": [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding",
+  ],
+  "framework": {
+    "name": "@storybook/react-webpack5",
+    "options": {}
   }
 };
+
+export default config;

.storybook/preview.js

@@ -1,10 +1,11 @@
-import React from 'react';
-import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+/** @type { import('@storybook/react-webpack5').Preview } */
+
+import '../public/media/dtable-font.css';
+import '../public/media/seatable-ui.css';
+import '../stories/css/story-cover.css';
 
-/** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -13,22 +14,14 @@ const preview = {
     },
     options: {
       storySort: {
-        method: '',
-        order: [],
-        locales: '',
-      }
+        order: [
+          'General',
+          'Formatter',
+          'Editor',
+          'Mobile',
+        ],
+      },
     },
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <Primary />
-          <Controls />
-        </>
-      ),
-    }
   },
 };
 

config/webpack.config.js

@@ -407,15 +407,18 @@ module.exports = function (webpackEnv) {
                   },
                 },
                 {
-                  loader: require.resolve('file-loader'),
+                  loader: 'svgo-loader',
                   options: {
-                    name: 'static/media/[name].[hash].[ext]',
-                  },
-                },
+                    plugins: [
+                      'removeTitle',
+                      'removeStyleElement',
+                      'cleanupIDs',
+                      'inlineStyles',
+                      'removeXMLProcInst',
+                    ]
+                  }
+                }
               ],
-              issuer: {
-                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-              },
             },
             {
               test: /\.worker\.js$/,

jest.config.js

@@ -2,9 +2,10 @@ const path = require('path');
 
 module.exports = {
   rootDir: path.resolve(__dirname, './'),
-  roots: ["<rootDir>/tests/"],
-  setupFiles: ["<rootDir>/tests/setup.js"],
-  testMatch: [ "<rootDir>/tests/**/(*.)+(spec|test).[jt]s?(x)"],
+  roots: ['<rootDir>/tests/'],
+  testMatch: ['<rootDir>/tests/**/(*.)+(spec|test).[jt]s?(x)'],
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/tests/setupTests.js'],
   transform: {
     '^.+\\.(js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest',
     '^.+\\.(css|less)$': '<rootDir>/config/jest/cssTransform.js',
@@ -13,4 +14,4 @@ module.exports = {
   transformIgnorePatterns: [
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$',
   ],
-}
+};