refactor(storybook): move to apps folder (#2901)

apps/storybook/.storybook/main.ts

@@ -0,0 +1,61 @@
+import { runCli } from '@magic-works/i18n-codegen';
+import type { StorybookConfig } from '@storybook/react-vite';
+import { fileURLToPath } from 'node:url';
+import { mergeConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
+runCli(
+  {
+    config: fileURLToPath(
+      new URL('../../../.i18n-codegen.json', import.meta.url)
+    ),
+    watch: false,
+  },
+  error => {
+    console.error(error);
+    process.exit(1);
+  }
+);
+
+export default {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../../../apps/web/public'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-storysource',
+    'storybook-dark-mode',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+  },
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      assetsInclude: ['**/*.md'],
+      plugins: [
+        vanillaExtractPlugin(),
+        tsconfigPaths({
+          root: fileURLToPath(new URL('../../../', import.meta.url)),
+        }),
+      ],
+      define: {
+        'process.env': {},
+      },
+      resolve: {
+        alias: {
+          'dotenv/config': fileURLToPath(
+            new URL('../../../scripts/vitest/dotenv-config.ts', import.meta.url)
+          ),
+          'next/config': fileURLToPath(
+            new URL(
+              '../../../scripts/vitest/next-config-mock.ts',
+              import.meta.url
+            )
+          ),
+        },
+      },
+    });
+  },
+} as StorybookConfig;

apps/storybook/.storybook/preview-head.html

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

apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,70 @@
+import '@affine/component/theme/global.css';
+import '@affine/component/theme/theme.css';
+import { LOCALES, createI18n } from '@affine/i18n';
+import { ThemeProvider, useTheme } from 'next-themes';
+import { setupGlobal } from '@affine/env/global';
+import type { ComponentType } from 'react';
+import { useEffect } from 'react';
+import { useDarkMode } from 'storybook-dark-mode';
+
+setupGlobal();
+
+export const parameters = {
+  backgrounds: { disable: true },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: LOCALES.map(locale => ({
+        title: locale.originalName,
+        value: locale.tag,
+        right: locale.flagEmoji,
+      })),
+    },
+  },
+};
+
+const createI18nDecorator = () => {
+  const i18n = createI18n();
+  const withI18n = (Story: any, context: any) => {
+    const locale = context.globals.locale;
+    useEffect(() => {
+      i18n.changeLanguage(locale);
+    }, [locale]);
+    return <Story {...context} />;
+  };
+  return withI18n;
+};
+
+const Component = () => {
+  const isDark = useDarkMode();
+  const theme = useTheme();
+  useEffect(() => {
+    theme.setTheme(isDark ? 'dark' : 'light');
+  }, [isDark]);
+  return null;
+};
+
+export const decorators = [
+  (Story: ComponentType) => {
+    return (
+      <ThemeProvider>
+        <Component />
+        <Story />
+      </ThemeProvider>
+    );
+  },
+  createI18nDecorator(),
+];