build: migrate to @storybook/builder-vite

Author: openscript

.eslintrc.js

@@ -1,24 +1,24 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true,
+    es2021: true
   },
-  extends: ['plugin:react/recommended', 'airbnb', 'airbnb-typescript', 'plugin:react/jsx-runtime', 'plugin:prettier/recommended'],
+  extends: ['plugin:react/recommended', 'airbnb', 'airbnb-typescript', 'plugin:react/jsx-runtime', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
-      jsx: true,
+      jsx: true
     },
     ecmaVersion: 13,
     sourceType: 'module',
-    project: './tsconfig.json',
+    project: './tsconfig.json'
   },
   plugins: ['react', '@typescript-eslint'],
   rules: {
     'import/prefer-default-export': 'off',
     'import/no-relative-packages': 'off',
     'import/no-extraneous-dependencies': 'off',
     'react/require-default-props': 'off',
-    'react/jsx-fragments': ['error', 'element'],
-  },
-};
+    'react/jsx-fragments': ['error', 'element']
+  }
+};

.storybook/main.js

@@ -1,47 +1,42 @@
 const react = require("@vitejs/plugin-react");
 
 module.exports = {
-  stories: [
-    "../stories/Start.stories.mdx",
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-        transcludeMarkdown: true
-      },
-    },
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-storysource"
-  ],
+  stories: ["../stories/Start.stories.mdx", "../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [{
+    name: '@storybook/addon-docs',
+    options: {
+      configureJSX: true,
+      transcludeMarkdown: true
+    }
+  }, "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-storysource"],
   core: {
-    "builder": "storybook-builder-vite"
+    "builder": "@storybook/builder-vite"
   },
-  async viteFinal(config, { configType }) {
-    config.plugins = config.plugins.filter(
-      (plugin) => !(Array.isArray(plugin) && plugin[0]?.name.includes("vite:react"))
-    );
 
-    if(config.optimizeDeps) {
-      config.optimizeDeps.include = [...(config.optimizeDeps.include) || [], '@emotion/react/jsx-dev-runtime'];
+  async viteFinal(config, {
+    configType
+  }) {
+    config.plugins = config.plugins.filter(plugin => !(Array.isArray(plugin) && plugin[0]?.name.includes("vite:react")));
+
+    if (config.optimizeDeps) {
+      config.optimizeDeps.include = [...(config.optimizeDeps.include || []), '@emotion/react/jsx-dev-runtime'];
     }
-    config.plugins.push(
-      react({
-        exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
-        jsxImportSource: "@emotion/react",
-        babel: {
-          plugins: ["@emotion/babel-plugin"],
-        },
-      })
-    );
 
-    if(configType === "PRODUCTION") {
-      return {...config, base: './'};
+    config.plugins.push(react({
+      exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
+      jsxImportSource: "@emotion/react",
+      babel: {
+        plugins: ["@emotion/babel-plugin"]
+      }
+    }));
+
+    if (configType === "PRODUCTION") {
+      return { ...config,
+        base: './'
+      };
     }
+
     return config;
   }
-}
+
+};