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,37 @@
-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)"
+  ],
+  "addons": [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding",
   ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
+  "framework": {
+    "name": "@storybook/react-webpack5",
+    "options": {}
   },
   webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.(js|jsx)$/,
-      exclude: /node_modules/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-react']
-        }
+    config.module.rules = config.module.rules.map(rule => {
+      if (rule.test && rule.test.toString().includes('svg')) {
+        return {
+          ...rule,
+          test: new RegExp(rule.test.toString().replace('svg|', '').slice(1, -1))
+        };
       }
+      return rule;
+    });
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack']
     });
+
     return config;
   }
 };
+
+export default config;

.storybook/manager.js

@@ -0,0 +1,10 @@
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'dtable-ui-component',
+    brandUrl: 'https://github.com/seatable/dtable-ui-component',
+  }),
+});

.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

@@ -393,29 +393,7 @@ module.exports = function (webpackEnv) {
             },
             {
               test: /\.svg$/,
-              use: [
-                {
-                  loader: require.resolve('@svgr/webpack'),
-                  options: {
-                    prettier: false,
-                    svgo: false,
-                    svgoConfig: {
-                      plugins: [{ removeViewBox: false }],
-                    },
-                    titleProp: true,
-                    ref: true,
-                  },
-                },
-                {
-                  loader: require.resolve('file-loader'),
-                  options: {
-                    name: 'static/media/[name].[hash].[ext]',
-                  },
-                },
-              ],
-              issuer: {
-                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-              },
+              use: ['@svgr/webpack'],
             },
             {
               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)$',
   ],
-}
+};