feat(storybook): add theme switcher to storybook (#199)

* feat: 🎸 add theme switcher to storybook

* feat: 🎸 disable theme switcher by default

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

@@ -0,0 +1,14 @@
+@import '../../../packages/themes/src/mixins/click.css';
+
+.tool {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.select {
+    background: red;
+}
+
+.click {
+    @mixin theme-click;
+}

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

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

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

@@ -0,0 +1,47 @@
+import React, { useCallback, useState } from 'react';
+import addons, { types } from '@storybook/addons';
+import { useChannel, useParameter } from '@storybook/api';
+import { STORY_RENDERED } from '@storybook/core-events';
+import { Form } from '@storybook/components';
+
+import './index.css';
+
+export const ADDON_ID = 'theme-switcher';
+export const THEMES = ['default', 'click'];
+
+const Addon = () => {
+    const [theme, setTheme] = useState('default');
+    const { enabled } = useParameter(ADDON_ID, { enabled: false });
+
+    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);
+    }, []);
+
+    return (
+        enabled && (
+            <div className='tool'>
+                <Form.Select size={1} onChange={handleChange} className='select'>
+                    {THEMES.map(themeName => (
+                        <option value={themeName} key={themeName}>
+                            Тема: {themeName}
+                        </option>
+                    ))}
+                </Form.Select>
+            </div>
+        )
+    );
+};
+
+addons.register(ADDON_ID, () => {
+    addons.add(ADDON_ID, {
+        type: types.TOOL,
+        match: ({ viewMode }) => viewMode === 'story',
+        render: () => <Addon />,
+        paramKey: ADDON_ID,
+    });
+});

.storybook/main.js

@@ -4,5 +4,6 @@ module.exports = {
         '@storybook/addon-knobs',
         '@storybook/preset-create-react-app',
         '@storybook/addon-docs',
+        './.storybook/addons/theme-switcher/register.js',
     ],
 };

.storybook/preview.js

@@ -1,4 +1,9 @@
 import { configure } from '@storybook/react';
+import { addDecorator } from '@storybook/react';
+
+import withThemeSwitcher from './addons/theme-switcher/index';
+
+addDecorator(withThemeSwitcher);
 
 configure(
     [

packages/amount-input/src/Component.stories.mdx

@@ -10,8 +10,11 @@ import { name, version } from '../package.json';
 
 <!-- prettier-ignore -->
 
-
-<Meta title='Компоненты|AmountInput' component={AmountInput} />
+<Meta
+    title='Компоненты|AmountInput'
+    component={AmountInput}
+    parameters={{ 'theme-switcher': { enabled: true } }}
+/>
 
 <Title>
     AmountInput ({name}@{version})

packages/amount/src/component.stories.mdx

@@ -6,7 +6,11 @@ import { Amount } from '.';
 import { getAllCurrencyCodes } from '@alfalab/utils';
 import { name, version } from '../package.json';
 
-<Meta title='Компоненты|Amount' component={Amount} />
+<Meta
+    title='Компоненты|Amount'
+    component={Amount}
+    parameters={{ 'theme-switcher': { enabled: true } }}
+/>
 
 <Title>
     Amount ({name}@{version})

packages/button/src/Component.stories.mdx

@@ -12,7 +12,11 @@ export const VIEWS = ['primary', 'secondary', 'outlined', 'link', 'ghost'];
 export const SIZES = ['xs', 's', 'm', 'l'];
 
 
-<Meta title='Компоненты|Button' component={Button} />
+<Meta
+    title='Компоненты|Button'
+    component={Button}
+    parameters={{ 'theme-switcher': { enabled: true } }}
+/>
 
 <Title>
     Button ({name}@{version})

packages/form-control/src/Component.stories.mdx

@@ -7,7 +7,11 @@ import { FormControl } from './Component';
 import { name, version } from '../package.json';
 
 
-<Meta title='Компоненты|FormControl' component={FormControl} />
+<Meta
+    title='Компоненты|FormControl'
+    component={FormControl}
+    parameters={{ 'theme-switcher': { enabled: true } }}
+/>
 
 <Title>
     FormControl ({name}@{version})

packages/input/src/Component.stories.mdx

@@ -7,7 +7,11 @@ import { Input } from './Component';
 import { name, version } from '../package.json';
 
 
-<Meta title='Компоненты|Input' component={Input} />
+<Meta
+    title='Компоненты|Input'
+    component={Input}
+    parameters={{ 'theme-switcher': { enabled: true } }}
+/>
 
 <Title>
     Input ({name}@{version})

packages/masked-input/src/Component.stories.mdx

@@ -15,7 +15,11 @@ export const placeholders = {
     card: '0000 0000 0000 0000',
 };
 
-<Meta title='Компоненты|MaskedInput' component={MaskedInput} />
+<Meta
+    title='Компоненты|MaskedInput'
+    component={MaskedInput}
+    parameters={{ 'theme-switcher': { enabled: true } }}
+/>
 
 <Title>
     MaskedInput ({name}@{version})

packages/pure-input/src/Component.stories.mdx

@@ -6,7 +6,11 @@ import { PureInput } from './Component';
 import { name, version } from '../package.json';
 
 
-<Meta title='Компоненты|PureInput' component={PureInput} />
+<Meta
+    title='Компоненты|PureInput'
+    component={PureInput}
+    parameters={{ 'theme-switcher': { enabled: true } }}
+/>
 
 <Title>
     PureInput ({name}@{version})

packages/select/src/Component.stories.mdx

@@ -79,7 +79,11 @@ export const renderUppercased = (options) => {
 };
 
 
-<Meta title='Компоненты|Select' component={Select} />
+<Meta
+    title='Компоненты|Select'
+    component={Select}
+    parameters={{ 'theme-switcher': { enabled: true } }}
+/>
 
 <Title>
     Select ({name}@{version})

packages/themes/src/mixins/click.css

@@ -1,11 +1,11 @@
 @import './amount/click.css';
-@import './input/click.css';
+@import './form-control/click.css';
 @import './pure-input/click.css';
 @import './button/click.css';
 
 @define-mixin theme-click {
     @mixin amount-click;
-    @mixin input-click;
+    @mixin form-control-click;
     @mixin pure-input-click;
     @mixin button-click;
 }