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',
+    getAbsolutePath('@storybook/addon-links'),
-    '@storybook/addon-essentials',
+    getAbsolutePath('@storybook/addon-essentials'),
-    '@storybook/addon-interactions',
+    getAbsolutePath('@storybook/addon-interactions'),
-    '@storybook/addon-mdx-gfm',
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
-    'storybook-dark-mode',
+    getAbsolutePath('storybook-dark-mode'),
+    '@chromatic-com/storybook',
   ],
+
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  features: {
+
-    storyStoreV7: true,
+  features: {},
-  },
+
-  docs: {
+  docs: {},
-    autodocs: true,
+
-  },
   async viteFinal(config, _options) {
     return mergeConfig(config, {
-      plugins: [vanillaExtractPlugin()],
+      plugins: [
-      esbuild: {
+        vanillaExtractPlugin(),
-        target: 'ES2022',
+        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",
+    "@chromatic-com/storybook": "^1",
-    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
+    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-storysource": "^7.6.17",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
-    "@storybook/blocks": "^7.6.17",
+    "@storybook/addon-storysource": "^8.2.9",
-    "@storybook/builder-vite": "^7.6.17",
+    "@storybook/blocks": "^8.2.9",
-    "@storybook/jest": "^0.2.3",
+    "@storybook/react": "^8.2.9",
-    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^8.2.9",
-    "@storybook/react-vite": "^7.6.17",
+    "@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"
   }
 }

tools/cli/package.json

@@ -14,6 +14,7 @@
     "@perfsee/webpack": "^1.12.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@sentry/webpack-plugin": "^2.16.1",
+    "@types/mime-types": "^2.1.4",
     "@types/webpack-env": "^1.18.4",
     "@vanilla-extract/webpack-plugin": "^2.3.7",
     "autoprefixer": "^10.4.19",