sb theme switching (wip)

toolkit/storybook/common/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
+    "@storybook/types": "^8.1.6",
     "babel-plugin-macros": "^3.1.0",
     "config": "workspace:*",
     "react-exo": "workspace:*",

toolkit/storybook/common/utils/blocks.tsx

@@ -4,18 +4,49 @@ import 'react-exo/radio.css';
 import 'react-exo/slider.css';
 
 import {useState, useEffect} from 'react';
+import {useInitialTheme, UnistylesRuntime} from 'design/styles';
 import {ColorPalette, ColorItem, IconGallery, IconItem} from '@storybook/blocks';
 import {extractBasics, extractScales, getBasicProps} from 'utils/colors';
+import {themes, palette, initialTheme} from 'design/theme';
 import {loadIconSet} from 'utils/icons';
-import {palette} from 'design/theme';
 import {Icon} from 'react-exo/icon';
 
-export function Story(props: React.PropsWithChildren) {
-  return (
-    <>
-      {props.children}
-    </>
-  );
+import type {Globals, Parameters} from '@storybook/types';
+
+export function Story(props: {
+  children: React.ReactNode,
+  globals: Globals,
+  parameters: Parameters,
+}) {
+  const {children, globals, parameters} = props;
+  const getCurrentTheme = () => {
+    let theme = initialTheme;
+    // Runtime theme
+    if (globals?.backgrounds) {
+      const color = globals?.backgrounds?.value;
+      if (color === 'transparent') {
+        theme = initialTheme;
+      } else {
+        const [name] = Object.entries(themes).find(([_, t]) =>
+          t.colors.background === color) || [initialTheme];
+        theme = name as never;
+      }
+    // Theme set in the toolbar
+    } else if (parameters?.backgrounds) {
+      theme = parameters?.backgrounds?.default;
+    }
+    return theme;
+  }
+
+  useInitialTheme(getCurrentTheme() as never);
+
+  useEffect(() => {
+    const theme = getCurrentTheme();
+    console.log('[changed]', theme, globals.backgrounds.value, parameters.backgrounds);
+    UnistylesRuntime.setTheme(theme as never);
+  }, [parameters, globals]);
+
+  return <>{children}</>
 }
 
 export function Colors() {

toolkit/storybook/web/.storybook/manager-head.html

@@ -25,6 +25,9 @@
   div:has(> a[href="https://storybook.js.org/docs/react/essentials/controls"]) {
     display: none;
   }
+  /*#list-item-reset {
+    display: none !important;
+  }*/
 </style>
 <script>
   document.addEventListener('DOMContentLoaded', () => {

toolkit/storybook/web/.storybook/preview.tsx

@@ -1,36 +1,18 @@
-import 'design/styles';
-
 import React from 'react';
 import {themes} from '@storybook/theming';
-import {initialTheme, themes as uniThemes} from 'design/theme';
+import {initialTheme, themes as appThemes} from 'design/theme';
 import {Story} from 'storybook-common/utils/blocks';
 
 import type {Preview} from '@storybook/react';
 
 const preview: Preview = {
   decorators: [
-    (Outlet) => (
-      <Story>
+    (Outlet, {globals, parameters}) => (
+      <Story {...{globals, parameters}}>
         <Outlet/>
       </Story>
     ),
   ],
-  globalTypes: {
-    theme: {
-      name: 'Theme',
-      description: 'Change the component theme',
-      defaultValue: initialTheme,
-      toolbar: {
-        icon: 'paintbrush',
-        dynamicTitle: true,
-        items: Object.keys(uniThemes).map((k) => ({
-          value: k,
-          title: k.charAt(0).toUpperCase() + k.slice(1),
-          icon: k === 'light' ? 'sun' : k === 'dark' ? 'moon' : '',
-        })),
-      },
-    },
-  },
   parameters: {
     layout: 'centered',
     docs: {
@@ -76,16 +58,13 @@ const preview: Preview = {
       },
     },
     backgrounds: {
-      values: [
-        {
-          name: 'Dark',
-          value: '#181818',
-        },
-        {
-          name: 'Light',
-          value: '#f3f3f3',
-        },
-      ],
+      default: initialTheme,
+      values: Object.keys(appThemes)
+      .sort((a, b) => a.localeCompare(b))
+      .map((t) => ({
+        name: t.charAt(0).toUpperCase() + t.slice(1),
+        value: appThemes[t || initialTheme]?.colors?.background || 'transparent',
+      })),
     },
   },
 };