chore: bump up storybook monorepo to v8 (major) (#6068)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: EYHN <cneyhn@gmail.com>

packages/frontend/component/.storybook/main.ts

@@ -1,33 +1,58 @@
+import { dirname, join } from 'path';
 import { StorybookConfig } from '@storybook/react-vite';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import swc from 'unplugin-swc';
 import { mergeConfig } from 'vite';
 import { getRuntimeConfig } from '@affine/cli/src/webpack/runtime-config';
 
 export default {
-  stories: ['../src/ui/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: ['../src/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm',
-    'storybook-dark-mode',
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
+    getAbsolutePath('storybook-dark-mode'),
+    '@chromatic-com/storybook',
   ],
+
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  features: {
-    storyStoreV7: true,
-  },
-  docs: {
-    autodocs: true,
-  },
+
+  features: {},
+
+  docs: {},
+
   async viteFinal(config, _options) {
     return mergeConfig(config, {
-      plugins: [vanillaExtractPlugin()],
-      esbuild: {
-        target: 'ES2022',
-      },
+      plugins: [
+        vanillaExtractPlugin(),
+        swc.vite({
+          jsc: {
+            preserveAllComments: true,
+            parser: {
+              syntax: 'typescript',
+              dynamicImport: true,
+              tsx: true,
+              decorators: true,
+            },
+            target: 'es2022',
+            externalHelpers: false,
+            transform: {
+              react: {
+                runtime: 'automatic',
+              },
+              useDefineForClassFields: false,
+              decoratorVersion: '2022-03',
+            },
+          },
+          sourceMaps: true,
+          inlineSourcesContent: true,
+        }),
+      ],
       define: {
         'process.env.CAPTCHA_SITE_KEY': `"${process.env.CAPTCHA_SITE_KEY}"`,
         runtimeConfig: getRuntimeConfig({
@@ -39,4 +64,12 @@ export default {
       },
     });
   },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 } satisfies StorybookConfig;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

packages/frontend/component/.storybook/preview.tsx

@@ -63,3 +63,4 @@ export const decorators = [
     );
   },
 ];
+export const tags = ['autodocs'];

packages/frontend/component/package.json

@@ -84,19 +84,18 @@
     "@blocksuite/icons": "2.1.62",
     "@blocksuite/presets": "0.17.0-canary-202408160752-cb4b196",
     "@blocksuite/store": "0.17.0-canary-202408160752-cb4b196",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
-    "@storybook/addon-storysource": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/builder-vite": "^7.6.17",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
+    "@chromatic-com/storybook": "^1",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/addon-storysource": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.19.0",
-    "@storybook/testing-library": "^0.2.2",
     "@testing-library/react": "^16.0.0",
     "@types/bytes": "^3.1.4",
     "@types/react": "^18.2.75",
@@ -104,9 +103,10 @@
     "@types/react-dom": "^18.2.24",
     "@vanilla-extract/css": "^1.14.2",
     "fake-indexeddb": "^6.0.0",
-    "storybook": "^7.6.17",
+    "storybook": "^8.2.9",
     "storybook-dark-mode": "4.0.1",
     "typescript": "^5.4.5",
+    "unplugin-swc": "^1.5.1",
     "vite": "^5.2.8",
     "vitest": "1.6.0"
   },

packages/frontend/core/package.json

@@ -117,6 +117,7 @@
     "fake-indexeddb": "^6.0.0",
     "lodash-es": "^4.17.21",
     "mime-types": "^2.1.35",
+    "react-refresh": "^0.10.0",
     "vitest": "1.6.0"
   }
 }