chore(docs): storybook v.10 migration

Author: droshev

.storybook/custom/addons/theme-switcher/register.js

@@ -1 +1 @@
-import './src/register';
+import './src/register.js';

…tcher/src/containers/IconButtonLabel.jsx …itcher/src/containers/IconButtonLabel.js.storybook/custom/addons/theme-switcher/src/containers/IconButtonLabel.jsx renamed to .storybook/custom/addons/theme-switcher/src/containers/IconButtonLabel.js .storybook/custom/addons/theme-switcher/src/containers/IconButtonLabel.jsx renamed to .storybook/custom/addons/theme-switcher/src/containers/IconButtonLabel.js

@@ -5,4 +5,4 @@ const IconButtonLabel = styled.div(({ theme }) => ({
     marginLeft: 10
 }));
 
-export default IconButtonLabel;
+export default IconButtonLabel;

.storybook/custom/addons/theme-switcher/src/containers/Selector.js

@@ -0,0 +1,90 @@
+import { getOwner } from '../../../utilities/get-owner.js';
+import IconButtonLabel from './IconButtonLabel.js';
+import React, { useState, useEffect } from 'react';
+import { WithTooltip, TooltipLinkList, IconButton } from 'storybook/internal/components';
+import { PaintBrushIcon } from '@storybook/icons';
+
+const Selector = ({ api }) => {
+    const [availableThemes, setAvailableThemes] = useState([]);
+    const [currentTheme, setCurrentTheme] = useState(null);
+    const [globals, setGlobals] = useState(api.getGlobals());
+    const [currentStory, setCurrentStory] = useState(api.getCurrentStoryData());
+
+    const storyProject = getOwner(currentStory);
+
+    // Listen for globals and story changes
+    useEffect(() => {
+        const onGlobalsChanged = () => {
+            setGlobals(api.getGlobals());
+        };
+        
+        const onStoryChanged = () => {
+            setCurrentStory(api.getCurrentStoryData());
+        };
+
+        api.on('globalsUpdated', onGlobalsChanged);
+        api.on('storyChanged', onStoryChanged);
+
+        return () => {
+            api.off('globalsUpdated', onGlobalsChanged);
+            api.off('storyChanged', onStoryChanged);
+        };
+    }, [api]);
+
+    useEffect(() => {
+        if (currentStory && storyProject?.themes) {
+            setAvailableThemes(storyProject.themes.themes || []);
+        }
+    }, [currentStory, storyProject]);
+
+    useEffect(() => {
+        if (storyProject) {
+            const themeKey = `${storyProject.value}-theme`;
+            const theme = availableThemes.find((theme) => theme.value === globals?.[themeKey]);
+            if (theme) {
+                setCurrentTheme(theme);
+            } else {
+                // Set default theme if no theme is selected
+                const defaultTheme = availableThemes.find(t => t.value === storyProject.themes?.defaultTheme);
+                setCurrentTheme(defaultTheme || null);
+            }
+        }
+    }, [availableThemes, globals, storyProject]);
+    const RenderThemes = (onHide) => availableThemes.map(theme => {
+        return {
+            id: theme.value,
+            title: theme.title,
+            active: theme.value === currentTheme?.value,
+            onClick: () => {
+                const newGlobals = { ...globals, [`${storyProject?.value}-theme`]: theme.value };
+                api.updateGlobals(newGlobals);
+                setCurrentTheme(theme);
+                onHide();
+            }
+        };
+    });
+
+    return React.createElement(React.Fragment, null,
+        React.createElement(WithTooltip, {
+            placement: "top",
+            trigger: "click",
+            closeOnOutsideClick: true,
+            tooltip: ({ onHide }) => {
+                return React.createElement(TooltipLinkList, { links: RenderThemes(onHide) });
+            }
+        },
+            React.createElement(IconButton, {
+                disabled: availableThemes.length === 0,
+                title: 'Theme Selector',
+                active: !!currentTheme
+            },
+                React.createElement(PaintBrushIcon),
+                currentTheme 
+                    ? React.createElement(IconButtonLabel, null, currentTheme?.title) 
+                    : React.createElement(React.Fragment)
+            )
+        )
+    );
+};
+
+export default Selector;

.storybook/custom/addons/theme-switcher/src/containers/Selector.jsx

@@ -0,0 +1,29 @@
+import { addons, types } from 'storybook/manager-api';
+import React from 'react';
+import { ADDON_ID } from './constants.js';
+
+addons.register(ADDON_ID, (api) => {
+    addons.add(ADDON_ID, {
+        title: ADDON_ID,
+        type: types.TOOL,
+        match: ({ viewMode }) => viewMode === 'story',
+        render: () => {
+            // Dynamically import Selector to avoid SSR issues
+            const [Selector, setSelector] = React.useState(null);
+            
+            React.useEffect(() => {
+                import('./containers/Selector.js').then(module => {
+                    setSelector(() => module.default);
+                });
+            }, []);
+            
+            if (!Selector) {
+                return React.createElement('div', { 
+                    style: { padding: '8px', fontSize: '12px', color: '#666' } 
+                }, 'Loading theme switcher...');
+            }
+            
+            return React.createElement(Selector, { api });
+        }
+    });
+});

.storybook/custom/addons/theme-switcher/src/register.js

@@ -1,4 +1,4 @@
-import { sortedProjects } from './projects';
+import { sortedProjects } from './projects.js';
 
 const ownersCache = new Map();
 

.storybook/custom/addons/theme-switcher/src/register.jsx

@@ -1,8 +1,13 @@
-import { projects } from '../../../../projects';
+import { projects, themes } from '../../../../projects.js';
 
-const sortedProjects = Object.entries(projects).map(([id, data]) => ({ id, ...data })).sort((a, b) => b.pathToPackage.length - a.pathToPackage.length);
+const sortedProjects = Object.entries(projects).map(([id, data]) => ({ 
+    id, 
+    ...data, 
+    themes: themes[id] // Add themes data to each project
+})).sort((a, b) => b.pathToPackage.length - a.pathToPackage.length);
 
 export {
     projects,
+    themes,
     sortedProjects,
 };

.storybook/custom/addons/utilities/get-owner.js

@@ -1,14 +1,18 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
 import { createRequire } from "node:module";
 import { StorybookConfig } from '@storybook/html-vite';
 import { readFileSync } from 'fs';
 import { mergeConfig } from 'vite';
 import { loadCsf } from 'storybook/internal/csf-tools';
-import { getOwner } from './custom/addons/utilities/get-owner';
+import { getOwner } from './custom/addons/utilities/get-owner.js';
 import { relative, dirname, join } from 'path';
 import remarkGfm from 'remark-gfm';
-import { storybookPackages } from '../projects';
+import { storybookPackages } from '../projects.js';
 import { resolve } from 'path';
+import { fileURLToPath } from 'url';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 const require = createRequire(import.meta.url);
 
 const storiesToInclude = () => {

.storybook/custom/addons/utilities/projects.js

@@ -1,5 +1,5 @@
 import { addons } from 'storybook/manager-api';
-import fundamentalTheme from '../packages/storybook/src/lib/fundamentals';
+import fundamentalTheme from '../packages/storybook/src/lib/fundamentals.js';
 
 addons.setConfig({
   sidebar: {