feat: improve theme switcher (#386)

.storybook/addons/theme-switcher/index.css

@@ -14,18 +14,18 @@
     font-size: 13px;
 }
 
-.click {
+body[data-theme='click'] {
     @mixin theme-click;
 }
 
-.site {
+body[data-theme='site'] {
     @mixin theme-site;
 }
 
-.corp {
+body[data-theme='corp'] {
     @mixin theme-corp;
 }
 
-.mobile {
+body[data-theme='mobile'] {
     @mixin theme-mobile;
 }

.storybook/addons/theme-switcher/index.js

@@ -1,24 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 import addons, { makeDecorator } from '@storybook/addons';
-import { ADDON_ID } from './register';
-
-import styles from './index.css';
+import { ADDON_ID, THEME_DATA_ATTR } from './register';
 
 export default makeDecorator({
     name: 'withThemeSwitcher',
     wrapper: (getStory, context) => {
-        const [theme, setTheme] = useState();
-
         const channel = addons.getChannel();
 
+        const setTheme = useCallback(theme => {
+            document.body.dataset[THEME_DATA_ATTR] = theme;
+        }, []);
+
         useEffect(() => {
             channel.on(`${ADDON_ID}/theme`, setTheme);
 
             return () => {
                 channel.removeListener(`${ADDON_ID}/theme`, setTheme);
             };
-        }, []);
+        }, [channel, setTheme]);
 
-        return <div className={styles[theme]}>{getStory(context)}</div>;
+        return getStory(context);
     },
 });

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

@@ -7,18 +7,23 @@ import { Form } from '@storybook/components';
 import './index.css';
 
 export const ADDON_ID = 'theme-switcher';
+export const THEME_DATA_ATTR = 'theme';
 
 const Addon = () => {
-    const [theme, setTheme] = useState('default');
+    const [theme, setTheme] = useState(document.body.dataset[THEME_DATA_ATTR] || 'default');
     const { themes } = useParameter(ADDON_ID, { themes: [] });
 
     const emit = useChannel({
         [STORY_RENDERED]: () => emit(`${ADDON_ID}/theme`, theme),
     });
 
     const handleChange = useCallback(event => {
-        setTheme(event.target.value);
-        emit(`${ADDON_ID}/theme`, event.target.value);
+        const newTheme = event.target.value;
+
+        setTheme(newTheme);
+        emit(`${ADDON_ID}/theme`, newTheme);
+
+        document.body.dataset[THEME_DATA_ATTR] = newTheme;
     }, []);
 
     return (
@@ -27,7 +32,11 @@ const Addon = () => {
                 <span className='label'>Theme:</span>
                 <Form.Select size={1} onChange={handleChange} className='select'>
                     {['default'].concat(themes).map(themeName => (
-                        <option value={themeName} key={themeName}>
+                        <option
+                            value={themeName}
+                            key={themeName}
+                            selected={themeName === theme}
+                        >
                             {themeName}
                         </option>
                     ))}