snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,72 @@
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { StorybookConfig } from '@storybook/react-vite';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import swc from 'unplugin-swc';
+import { mergeConfig } from 'vite';
+
+export default {
+  stories: ['../src/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+
+  addons: [],
+
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+
+  features: {},
+
+  docs: {},
+
+  async viteFinal(config, _options) {
+    const { getBuildConfig } = await import('@affine-tools/utils/build-config');
+    const { Package } = await import('@affine-tools/utils/workspace');
+
+    return mergeConfig(config, {
+      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: Object.entries(
+        getBuildConfig(new Package('@affine/web'), {
+          mode: 'development',
+          channel: 'canary',
+        })
+      ).reduce((envs, [key, value]) => {
+        envs[`BUILD_CONFIG.${key}`] = JSON.stringify(value);
+        return envs;
+      }, {}),
+    });
+  },
+
+  // typescript: {
+  //   reactDocgen: 'react-docgen-typescript',
+  // },
+} satisfies StorybookConfig;
+
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(join(value, 'package.json'))));
+}
+

packages/frontend/component/.storybook/polyfill.ts

@@ -0,0 +1,2 @@
+import 'core-js/modules/esnext.symbol.async-dispose';
+import 'core-js/modules/esnext.symbol.dispose';

packages/frontend/component/.storybook/preview.css.ts

@@ -0,0 +1,22 @@
+import { globalStyle } from '@vanilla-extract/css';
+
+globalStyle('*', {
+  margin: 0,
+  padding: 0,
+});
+
+globalStyle('body', {
+  color: 'var(--affine-text-primary-color)',
+  fontFamily: 'var(--affine-font-family)',
+  fontSize: 'var(--affine-font-base)',
+  lineHeight: 'var(--affine-font-height)',
+  backgroundColor: 'var(--affine-background-primary-color)',
+});
+
+globalStyle('.docs-story', {
+  backgroundColor: 'var(--affine-background-primary-color)',
+});
+
+globalStyle('body.sb-main-fullscreen', {
+  overflowY: 'auto',
+});

packages/frontend/component/.storybook/preview.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

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

@@ -0,0 +1,67 @@
+import { getOrCreateI18n, I18nextProvider } from '@affine/i18n';
+import { ThemeProvider } from 'next-themes';
+import type { ComponentType } from 'react';
+import '../src/theme';
+import './polyfill';
+import './preview.css';
+
+import type { Preview } from '@storybook/react';
+import React, { useEffect } from 'react';
+import { ConfirmModalProvider } from '../src/ui/modal/confirm-modal';
+
+import { setupGlobal } from '@affine/env/global';
+import { useTheme as useNextTheme } from 'next-themes';
+
+setupGlobal();
+
+export const parameters: Preview = {
+  argTypes: {
+    param: {
+      table: { category: 'Group' },
+    },
+  },
+};
+export const globalTypes = {
+  theme: {
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      title: 'theme',
+      icon: 'circlehollow',
+      dynamic: true,
+      items: [
+        { value: 'light', title: 'Light', icon: 'sun' },
+        { value: 'dark', title: 'Dark', icon: 'moon' },
+      ],
+    },
+  },
+};
+
+const ThemeToggle = ({ context }) => {
+  const { theme } = context.globals;
+  const { setTheme } = useNextTheme();
+
+  useEffect(() => {
+    setTheme(theme);
+  }, [theme]);
+
+  return null;
+};
+
+const i18n = getOrCreateI18n();
+
+export const decorators = [
+  (Story: ComponentType, context) => {
+    return (
+      <ThemeProvider themes={['dark', 'light']} enableSystem={true}>
+        <ThemeToggle context={context} />
+        <I18nextProvider i18n={i18n}>
+          <ConfirmModalProvider>
+            <Story {...context} />
+          </ConfirmModalProvider>
+        </I18nextProvider>
+      </ThemeProvider>
+    );
+  },
+];
+export const tags = ['autodocs'];