build(component): fix storybook config (#1798)

packages/component/.storybook/main.ts

@@ -1,19 +1,33 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import { fileURLToPath } from 'node:url';
+import { mergeConfig } from 'vite';
 
 export default {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../../../apps/web/public'],
   addons: [
     '@storybook/addon-links',
-    'storybook-dark-mode-v7',
+    'storybook-dark-mode',
     '@storybook/addon-interactions',
   ],
   framework: {
     name: '@storybook/react-vite',
-    options: {
-      builder: {
-        viteConfigPath: '.storybook/vite.config.ts',
+  },
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      define: {
+        'process.env': {},
       },
-    },
+      resolve: {
+        alias: {
+          'next/config': fileURLToPath(
+            new URL(
+              '../../../scripts/vitest/next-config-mock.ts',
+              import.meta.url
+            )
+          ),
+        },
+      },
+    });
   },
 } as StorybookConfig;

packages/component/.storybook/preview.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import '@blocksuite/editor/themes/affine.css';
 
 import { getDarkTheme, getLightTheme, ThemeProvider } from '@affine/component';
-import { useDarkMode } from 'storybook-dark-mode-v7';
+import { useDarkMode } from 'storybook-dark-mode';
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {

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

@@ -1,33 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-import { mergeConfig } from 'vite';
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'url';
-import istanbul from 'vite-plugin-istanbul';
-
-const config: Pick<StorybookConfig, 'viteFinal'> = {
-  async viteFinal(config, { configType }) {
-    return mergeConfig(config, {
-      plugins: [
-        istanbul({
-          include: ['src/*'],
-          exclude: ['node_modules', 'test', 'stories'],
-          extension: ['.ts', '.tsx'],
-          forceBuildInstrument: process.env.COVERAGE === 'true',
-        }),
-      ],
-      resolve: {
-        alias: {
-          '@': resolve(fileURLToPath(new URL('../src', import.meta.url))),
-          '@affine/component': resolve(
-            fileURLToPath(new URL('../src/index.ts', import.meta.url))
-          ),
-          '@affine/i18n': resolve(
-            fileURLToPath(new URL('../../i18n/src', import.meta.url))
-          ),
-        },
-      },
-    });
-  },
-};
-
-export default config;

packages/component/package.json

@@ -52,7 +52,7 @@
     "@vitejs/plugin-react": "^3.1.0",
     "jest-mock": "^29.5.0",
     "storybook": "7.0.0",
-    "storybook-dark-mode-v7": "3.0.0-alpha.0",
+    "storybook-dark-mode": "^3.0.0",
     "typescript": "^5.0.3",
     "vite": "^4.2.1",
     "yjs": "^13.5.51"