refactor: use storybook v7 (#951)

packages/component/.storybook/main.js

@@ -1,44 +0,0 @@
-const path = require('node:path');
-
-module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  staticDirs: ['../../../apps/web/public'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  core: {
-    builder: '@storybook/builder-webpack5',
-  },
-  webpackFinal: config => {
-    const transpile = config.module.rules.find(x =>
-      x.test.toString().includes('tsx')
-    ).use;
-    transpile.push({
-      loader: require.resolve('swc-loader'),
-      options: {
-        parseMap: true,
-        jsc: {
-          parser: {
-            syntax: 'typescript',
-            dynamicImport: true,
-            tsx: true,
-          },
-          target: 'es2022',
-          transform: {
-            react: {
-              runtime: 'automatic',
-            },
-          },
-        },
-      },
-    });
-
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      '@': path.resolve(__dirname, '..', 'src'),
-      '@affine/i18n': path.resolve(__dirname, '..', '..', 'i18n', 'src'),
-    };
-    return config;
-  },
-  reactOptions: {
-    fastRefresh: true,
-  },
-};

packages/component/.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+export default {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../../../apps/web/public'],
+  addons: ['@storybook/addon-links'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: '.storybook/vite.config.ts',
+      },
+    },
+  },
+} as StorybookConfig;

packages/component/.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { getLightTheme, ThemeProvider } from '../src';
 
 export const parameters = {
@@ -13,7 +14,7 @@ export const parameters = {
 const lightTheme = getLightTheme('page');
 
 export const decorators = [
-  Story => {
+  (Story: React.ComponentType) => {
     return (
       <ThemeProvider theme={lightTheme}>
         <Story />

packages/component/.storybook/vite.config.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+import path from 'node:path';
+import { fileURLToPath } from 'url';
+
+const config: Pick<StorybookConfig, 'viteFinal'> = {
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@': path.resolve(fileURLToPath(new URL('../src', import.meta.url))),
+          '@affine/i18n': path.resolve(
+            fileURLToPath(new URL('../../i18n/src', import.meta.url))
+          ),
+        },
+      },
+    });
+  },
+};
+
+export default config;