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: {
+};
+export const globalTypes = {
   theme: {
     description: 'Global theme for components',
     defaultValue: 'light',
     toolbar: {
-        title: 'Theme',
+      title: 'theme',
       icon: 'circlehollow',
-        items: ['light', 'dark'],
-        dynamicTitle: true,
-      },
+      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",

yarn.lock

@@ -384,7 +384,6 @@ __metadata:
     rxjs: "npm:^7.8.1"
     sonner: "npm:^1.4.41"
     storybook: "npm:^8.2.9"
-    storybook-dark-mode: "npm:4.0.2"
     swr: "npm:^2.2.5"
     typescript: "npm:^5.4.5"
     unplugin-swc: "npm:^1.5.1"
@@ -13685,7 +13684,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:^8.0.0, @storybook/components@npm:^8.2.9":
+"@storybook/components@npm:^8.2.9":
   version: 8.2.9
   resolution: "@storybook/components@npm:8.2.9"
   peerDependencies:
@@ -13694,15 +13693,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:^8.0.0":
-  version: 8.2.9
-  resolution: "@storybook/core-events@npm:8.2.9"
-  peerDependencies:
-    storybook: ^8.2.9
-  checksum: 10/6ac658a75702c645695d82fbd69da5cf4d559050ffa1f0023729ad34c0d84965b2abeeb65efd168b0cdb049314de002c00267eaf692064e3efeae1337cc3ba52
-  languageName: node
-  linkType: hard
-
 "@storybook/core@npm:8.2.9":
   version: 8.2.9
   resolution: "@storybook/core@npm:8.2.9"
@@ -13772,7 +13762,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:^8.0.0, @storybook/manager-api@npm:^8.2.9":
+"@storybook/manager-api@npm:^8.2.9":
   version: 8.2.9
   resolution: "@storybook/manager-api@npm:8.2.9"
   peerDependencies:
@@ -13892,7 +13882,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:^8.0.0, @storybook/theming@npm:^8.2.9":
+"@storybook/theming@npm:^8.2.9":
   version: 8.2.9
   resolution: "@storybook/theming@npm:8.2.9"
   peerDependencies:
@@ -33298,22 +33288,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook-dark-mode@npm:4.0.2":
-  version: 4.0.2
-  resolution: "storybook-dark-mode@npm:4.0.2"
-  dependencies:
-    "@storybook/components": "npm:^8.0.0"
-    "@storybook/core-events": "npm:^8.0.0"
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.5"
-    "@storybook/manager-api": "npm:^8.0.0"
-    "@storybook/theming": "npm:^8.0.0"
-    fast-deep-equal: "npm:^3.1.3"
-    memoizerific: "npm:^1.11.3"
-  checksum: 10/c9ef7bc6734df7486ff763c9da3c69505269eaf5fd7b5b489553f023b363ea892862241e6d701ad647ca5d1e64fd9a2646b8985c7ea8ac97a3bca87891db6fe5
-  languageName: node
-  linkType: hard
-
 "storybook@npm:^8.2.9":
   version: 8.2.9
   resolution: "storybook@npm:8.2.9"