feat: customize theming

Author: shijistar

.storybook/main.ts

@@ -3,6 +3,9 @@ import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   stories: ['./stories/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+  docs: {
+    defaultName: 'API',
+  },
   framework: {
     name: '@storybook/react-vite',
     options: {},

.storybook/manager.css

@@ -1,10 +1,39 @@
 import { addons } from 'storybook/manager-api';
-// import { create } from 'storybook/theming';
-import './manager.css';
+import { create } from 'storybook/theming';
 
+// import './manager.css';
+
+const isPreferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 addons.setConfig({
-  // theme: create({
-  //   base: 'light',
-  //   fontBase: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-  // }),
+  theme: create({
+    base: isPreferDark ? 'dark' : 'light',
+    brandTitle: '@tiny-codes/react-easy',
+  }),
+  // navSize: 300,
+  // bottomPanelHeight: 300,
+  // rightPanelWidth: 300,
+  // panelPosition: 'bottom',
+  // enableShortcuts: true,
+  // showToolbar: true,
+  // selectedPanel: undefined,
+  // initialActive: 'sidebar',
+  // layoutCustomisations: {
+  //   showSidebar(state: State, defaultValue: boolean) {
+  //     return state.storyId === 'landing' ? false : defaultValue;
+  //   },
+  //   showToolbar(state: State, defaultValue: boolean) {
+  //     return state.viewMode === 'docs' ? false : defaultValue;
+  //   },
+  // },
+  // sidebar: {
+  //   showRoots: false,
+  //   collapsedRoots: ['other'],
+  // },
+  // toolbar: {
+  //   title: { hidden: false },
+  //   zoom: { hidden: false },
+  //   eject: { hidden: false },
+  //   copy: { hidden: false },
+  //   fullscreen: { hidden: false },
+  // },
 });

.storybook/manager.ts

@@ -4,12 +4,16 @@ import type { Preview, ReactRenderer } from '@storybook/react-vite';
 import { App as AntdApp, ConfigProvider as AntdConfigProvider, theme } from 'antd';
 import enUS from 'antd/es/locale/en_US';
 import zhCN from 'antd/es/locale/zh_CN';
+import { FORCE_RE_RENDER } from 'storybook/internal/core-events';
 import type { StoryContext, StoryContextForEnhancers } from 'storybook/internal/csf';
+import { addons, useStoryContext } from 'storybook/preview-api';
 import { themes } from 'storybook/theming';
 import ConfigProvider from '../src/components/ConfigProvider';
+import { useRefValue } from '../src/hooks';
 import storyI18n from './locales';
 import { inferControlFromDocgenType, standardizeJsDocDefaultValue } from './utils/jsdoc';
-import './preview.css';
+
+// import './preview.css';
 
 const isPreferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
@@ -66,10 +70,18 @@ const preview: Preview = {
       const bgValue = context.globals?.backgrounds?.value;
       const lang = context.globals.lang ?? 'en-US';
       const antdLocale = lang === 'zh-CN' ? zhCN : enUS;
+      const { viewMode } = useStoryContext();
+      const viewModeRef = useRefValue(viewMode);
+
       useMemo(() => {
         if (storyI18n.language !== lang) {
-          storyI18n.changeLanguage(lang);
-          (window.top ?? window.parent ?? window).location.reload();
+          storyI18n.changeLanguage(lang).then(() => {
+            if (viewModeRef.current === 'docs') {
+              addons.getChannel().emit(FORCE_RE_RENDER);
+            } else if (viewModeRef.current === 'story') {
+              (window.top ?? window.parent ?? window).location.reload();
+            }
+          });
         }
       }, [lang]);