fix(component): replace storybook-dark-mode with globalTypes toolbar impl (#8066)

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

@@ -13,7 +13,6 @@ export default {
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-mdx-gfm'),
-    getAbsolutePath('storybook-dark-mode'),
     '@chromatic-com/storybook',
   ],
 
@@ -60,6 +59,7 @@ export default {
           mode: 'development',
           channel: 'canary',
           coverage: false,
+          static: false,
         }),
       },
     });

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

@@ -1,13 +1,11 @@
 import './polyfill';
 import '../src/theme/global.css';
 import './preview.css';
-import { ThemeProvider, useTheme } from 'next-themes';
+import { ThemeProvider } from 'next-themes';
 import type { ComponentType } from 'react';
-import { useEffect } from 'react';
-import { useDarkMode } from 'storybook-dark-mode';
 
 import type { Preview } from '@storybook/react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ConfirmModalProvider } from '../src/ui/modal/confirm-modal';
 import { setupGlobal } from '@affine/env/global';
 
@@ -19,47 +17,37 @@ export const parameters: Preview = {
       table: { category: 'Group' },
     },
   },
-  globalTypes: {
-    theme: {
-      description: 'Global theme for components',
-      defaultValue: 'light',
-      toolbar: {
-        title: 'Theme',
-        icon: 'circlehollow',
-        items: ['light', 'dark'],
-        dynamicTitle: true,
-      },
+};
+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 ThemeChange = () => {
-  const isDark = useDarkMode();
-  const theme = useTheme();
-  if (theme.resolvedTheme === 'dark' && !isDark) {
-    theme.setTheme('light');
-  } else if (theme.resolvedTheme === 'light' && isDark) {
-    theme.setTheme('dark');
-  }
-  return null;
-};
+const useTheme = context => {
+  const { theme } = context.globals;
 
-const Component = () => {
-  const isDark = useDarkMode();
-  const theme = useTheme();
   useEffect(() => {
-    theme.setTheme(isDark ? 'dark' : 'light');
-  }, [isDark]);
-  return null;
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
 };
 
 export const decorators = [
   (Story: ComponentType, context) => {
+    useTheme(context);
     return (
       <ThemeProvider themes={['dark', 'light']} enableSystem={true}>
         <ConfirmModalProvider>
-          <ThemeChange />
-          <Component />
           <Story {...context} />
         </ConfirmModalProvider>
       </ThemeProvider>

packages/frontend/component/package.json

@@ -105,7 +105,6 @@
     "@vanilla-extract/css": "^1.14.2",
     "fake-indexeddb": "^6.0.0",
     "storybook": "^8.2.9",
-    "storybook-dark-mode": "4.0.2",
     "typescript": "^5.4.5",
     "unplugin-swc": "^1.5.1",
     "vite": "^5.2.8",