CSF: Add addon-themes for testing to sandboxes & main storybook

code/.storybook/main.ts

@@ -68,6 +68,10 @@ const config: StorybookConfig = {
       directory: '../addons/toolbars/template/stories',
       titlePrefix: 'addons/toolbars',
     },
+    {
+      directory: '../addons/themes/template/stories',
+      titlePrefix: 'addons/themes',
+    },
     {
       directory: '../addons/onboarding/src',
       titlePrefix: 'addons/onboarding',
@@ -83,6 +87,7 @@ const config: StorybookConfig = {
   ],
   addons: [
     '@storybook/addon-links',
+    '@storybook/addon-themes',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',

code/.storybook/preview.tsx

@@ -166,7 +166,7 @@ export const decorators = [
    * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar
    */
   (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
-    let theme = globals.theme;
+    let theme = globals.sb_theme;
     let showPlayFnNotice = false;
 
     // this makes the decorator be out of 'phase' with the actually selected theme in the toolbar
@@ -315,6 +315,9 @@ export const parameters = {
   viewport: {
     options: MINIMAL_VIEWPORTS,
   },
+  themes: {
+    disable: true,
+  },
   backgrounds: {
     options: {
       light: { name: 'light', value: '#edecec' },

code/addons/controls/template/stories/conditional.stories.ts

@@ -54,9 +54,9 @@ export const ToggleExpandCollapse = {
 
 export const GlobalBased = {
   argTypes: {
-    ifThemeExists: { control: 'text', if: { global: 'theme' } },
-    ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } },
-    ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } },
-    ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } },
+    ifThemeExists: { control: 'text', if: { global: 'sb_theme' } },
+    ifThemeNotExists: { control: 'text', if: { global: 'sb_theme', exists: false } },
+    ifLightTheme: { control: 'text', if: { global: 'sb_theme', eq: 'light' } },
+    ifNotLightTheme: { control: 'text', if: { global: 'sb_theme', neq: 'light' } },
   },
 };

code/addons/interactions/src/components/Interaction.stories.tsx

@@ -54,7 +54,7 @@ export const Disabled: Story = {
 
 export const Hovered: Story = {
   ...Done,
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.hover(canvas.getByRole('button'));

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -34,7 +34,7 @@ const meta = {
     ),
   ],
   parameters: { layout: 'fullscreen' },
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
   args: {
     calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
     controls: SubnavStories.args.controls,

code/addons/interactions/template/stories/basics.stories.ts

@@ -15,7 +15,7 @@ export default {
     onSuccess: fn(),
   },
   globals: {
-    theme: 'light',
+    sb_theme: 'light',
   },
 };
 

code/addons/themes/src/constants.ts

@@ -15,6 +15,7 @@ export const DEFAULT_ADDON_STATE: ThemeAddonState = {
 
 export interface ThemeParameters {
   themeOverride?: string;
+  disable?: boolean;
 }
 
 export const DEFAULT_THEME_PARAMETERS: ThemeParameters = {};

code/addons/themes/src/decorators/class-name.decorator.tsx

@@ -14,7 +14,7 @@ const DEFAULT_ELEMENT_SELECTOR = 'html';
 const classStringToArray = (classString: string) => classString.split(' ').filter(Boolean);
 
 // TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. <Story extends (...args: any[]) => any>
-export const withThemeByClassName = <TRenderer extends Renderer = any>({
+export const withThemeByClassName = <TRenderer extends Renderer = Renderer>({
   themes,
   defaultTheme,
   parentSelector = DEFAULT_ELEMENT_SELECTOR,
@@ -47,7 +47,7 @@ export const withThemeByClassName = <TRenderer extends Renderer = any>({
       if (newThemeClasses.length > 0) {
         parentElement.classList.add(...newThemeClasses);
       }
-    }, [themeOverride, selected, parentSelector]);
+    }, [themeOverride, selected]);
 
     return storyFn();
   };

code/addons/themes/src/decorators/data-attribute.decorator.tsx

@@ -31,7 +31,7 @@ export const withThemeByDataAttribute = <TRenderer extends Renderer = any>({
       if (parentElement) {
         parentElement.setAttribute(attributeName, themes[themeKey]);
       }
-    }, [themeOverride, selected, parentSelector, attributeName]);
+    }, [themeOverride, selected]);
 
     return storyFn();
   };

code/addons/themes/src/decorators/provider.decorator.tsx

@@ -38,7 +38,7 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
       const pairs = Object.entries(themes);
 
       return pairs.length === 1 ? pluckThemeFromKeyPairTuple(pairs[0]) : themes[selectedThemeName];
-    }, [themes, selected, themeOverride]);
+    }, [selected, themeOverride]);
 
     if (!Provider) {
       return (

code/addons/themes/src/preview.tsx

@@ -1,7 +1,6 @@
 import type { Renderer, ProjectAnnotations } from 'storybook/internal/types';
-import { GLOBAL_KEY } from './constants';
+import { GLOBAL_KEY as KEY } from './constants';
 
-export const globals: ProjectAnnotations<Renderer>['globals'] = {
-  // Required to make sure SB picks this up from URL params
-  [GLOBAL_KEY]: '',
+export const initialGlobals: ProjectAnnotations<Renderer>['initialGlobals'] = {
+  [KEY]: '',
 };

code/addons/themes/src/theme-switcher.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React from 'react';
 import {
   useAddonState,
   useChannel,
@@ -17,6 +17,7 @@ import {
   THEMING_EVENTS,
   DEFAULT_ADDON_STATE,
   DEFAULT_THEME_PARAMETERS,
+  GLOBAL_KEY as KEY,
 } from './constants';
 
 const IconButtonLabel = styled.div(({ theme }) => ({
@@ -27,11 +28,11 @@ const hasMultipleThemes = (themesList: ThemeAddonState['themesList']) => themesL
 const hasTwoThemes = (themesList: ThemeAddonState['themesList']) => themesList.length === 2;
 
 export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
-  const { themeOverride } = useParameter<ThemeParameters>(
+  const { themeOverride, disable } = useParameter<ThemeParameters>(
     PARAM_KEY,
     DEFAULT_THEME_PARAMETERS
   ) as ThemeParameters;
-  const [{ theme: selected }, updateGlobals] = useGlobals();
+  const [{ theme: selected }, updateGlobals, storyGlobals] = useGlobals();
 
   const channel = addons.getChannel();
   const fromLast = channel.last(THEMING_EVENTS.REGISTER_THEMES);
@@ -45,6 +46,8 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
     initializeThemeState
   );
 
+  const isLocked = KEY in storyGlobals || !!themeOverride;
+
   useChannel({
     [THEMING_EVENTS.REGISTER_THEMES]: ({ themes, defaultTheme }) => {
       updateState((state) => ({
@@ -55,21 +58,24 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
     },
   });
 
-  const label = useMemo(() => {
-    if (themeOverride) {
-      return <>Story override</>;
-    }
-
-    const themeName = selected || themeDefault;
+  const themeName = selected || themeDefault;
+  let label = '';
+  if (isLocked) {
+    label = 'Story override';
+  } else if (themeName) {
+    label = `${themeName} theme`;
+  }
 
-    return themeName && <>{`${themeName} theme`}</>;
-  }, [themeOverride, themeDefault, selected]);
+  if (disable) {
+    return null;
+  }
 
   if (hasTwoThemes(themesList)) {
     const currentTheme = selected || themeDefault;
     const alternateTheme = themesList.find((theme) => theme !== currentTheme);
     return (
       <IconButton
+        disabled={isLocked}
         key={THEME_SWITCHER_ID}
         active={!themeOverride}
         title="Theme"
@@ -78,40 +84,43 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
         }}
       >
         <PaintBrushIcon />
-        {label && <IconButtonLabel>{label}</IconButtonLabel>}
+        {label ? <IconButtonLabel>{label}</IconButtonLabel> : null}
       </IconButton>
     );
   }
 
   if (hasMultipleThemes(themesList)) {
     return (
-      <Fragment>
-        <WithTooltip
-          placement="top"
-          trigger="click"
-          closeOnOutsideClick
-          tooltip={({ onHide }) => {
-            return (
-              <TooltipLinkList
-                links={themesList.map((theme) => ({
-                  id: theme,
-                  title: theme,
-                  active: selected === theme,
-                  onClick: () => {
-                    updateGlobals({ theme });
-                    onHide();
-                  },
-                }))}
-              />
-            );
-          }}
+      <WithTooltip
+        placement="top"
+        trigger="click"
+        closeOnOutsideClick
+        tooltip={({ onHide }) => {
+          return (
+            <TooltipLinkList
+              links={themesList.map((theme) => ({
+                id: theme,
+                title: theme,
+                active: selected === theme,
+                onClick: () => {
+                  updateGlobals({ theme });
+                  onHide();
+                },
+              }))}
+            />
+          );
+        }}
+      >
+        <IconButton
+          key={THEME_SWITCHER_ID}
+          active={!themeOverride}
+          title="Theme"
+          disabled={isLocked}
         >
-          <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
-            <PaintBrushIcon />
-            {label && <IconButtonLabel>{label}</IconButtonLabel>}
-          </IconButton>
-        </WithTooltip>
-      </Fragment>
+          <PaintBrushIcon />
+          {label && <IconButtonLabel>{label}</IconButtonLabel>}
+        </IconButton>
+      </WithTooltip>
     );
   }
 

code/addons/themes/template/stories/decorators.stories.ts

@@ -0,0 +1,93 @@
+import { global as globalThis } from '@storybook/global';
+import {
+  withThemeByClassName,
+  withThemeByDataAttribute,
+  withThemeFromJSXProvider,
+} from '@storybook/addon-themes';
+import { useEffect } from 'storybook/internal/preview-api';
+
+const cleanup = () => {
+  const existing = globalThis.document.querySelector('style[data-theme-css]');
+  if (existing) {
+    existing.remove();
+  }
+};
+
+const addStyleSheetDecorator = (storyFn: any) => {
+  useEffect(() => {
+    cleanup();
+
+    const sheet = globalThis.document.createElement('style');
+    sheet.setAttribute('data-theme-css', '');
+    sheet.textContent = `
+      [data-theme="theme-a"], .theme-a {
+        background-color: white;
+        color: black;
+      }
+      [data-theme="theme-b"], .theme-b {
+        background-color: black;
+        color: white;
+      }
+    `;
+
+    globalThis.document.body.appendChild(sheet);
+
+    return cleanup;
+  });
+
+  return storyFn();
+};
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Testing the themes',
+  },
+  parameters: {
+    chromatic: { disable: true },
+    themes: { disable: false },
+  },
+  decorators: [addStyleSheetDecorator],
+};
+
+export const WithThemeByClassName = {
+  globals: {},
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
+
+export const WithThemeByDataAttribute = {
+  globals: {},
+  decorators: [
+    withThemeByDataAttribute({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
+
+export const WithThemeFromJSXProvider = {
+  globals: {},
+  decorators: [
+    withThemeFromJSXProvider({
+      defaultTheme: 'a',
+      themes: { a: { custom: 'theme-a' }, b: { custom: 'theme-b' } },
+      Provider: ({ theme, children }: any) => {
+        // this is not was a normal provider looks like obviously, but this needs to work in non-react as well
+        // the timeout is to wait for the render to complete, as it's not possible to use the useEffect hook here
+        setTimeout(() => {
+          const element = globalThis.document.querySelector('#storybook-root > *');
+          element?.classList.remove('theme-a', 'theme-b');
+          element?.classList.add(theme.custom);
+        }, 16);
+        return children;
+      },
+    }),
+  ],
+};