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'];