fix: remove mui theme provider (#2055)

packages/component/.storybook/preview.tsx

@@ -1,16 +1,10 @@
-import React, { useMemo } from 'react';
+import { useEffect, ComponentType } from 'react';
+import { ThemeProvider, useTheme } from 'next-themes';
 import '@blocksuite/editor/themes/affine.css';
-import '../src/theme/global.css';
-
-import {
-  AffineCssVariables,
-  AffineMuiThemeProvider,
-  getTheme,
-  muiThemes,
-} from '@affine/component';
+import '@affine/component/theme/global.css';
+import '@affine/component/theme/theme.css';
 import { useDarkMode } from 'storybook-dark-mode';
-import { GlobalStyles } from '@mui/material';
-import kebabCase from 'kebab-case';
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
@@ -21,35 +15,22 @@ export const parameters = {
   },
 };
 
-export const decorators = [
-  (Story: React.ComponentType) => {
-    const isDark = useDarkMode();
+const Component = () => {
+  const isDark = useDarkMode();
+  const theme = useTheme();
+  useEffect(() => {
+    theme.setTheme(isDark ? 'dark' : 'light');
+  }, [isDark]);
+  return null;
+};
 
-    const theme = useMemo(
-      () => getTheme(isDark ? 'dark' : 'light', 'page'),
-      [isDark]
-    );
+export const decorators = [
+  (Story: ComponentType) => {
     return (
-      <AffineMuiThemeProvider theme={muiThemes}>
-        <GlobalStyles
-          styles={{
-            ':root': {
-              ...Object.entries(theme).reduce((variables, [key, value]) => {
-                variables[
-                  `--affine-${kebabCase(key)}` as keyof AffineCssVariables
-                ] = value;
-                return variables;
-              }, {} as AffineCssVariables),
-            },
-            html: {
-              fontFamily: theme.fontFamily,
-              fontSize: theme.fontBase,
-              lineHeight: theme.lineHeight,
-            },
-          }}
-        />
+      <ThemeProvider>
+        <Component />
         <Story />
-      </AffineMuiThemeProvider>
+      </ThemeProvider>
     );
   },
 ];