chore: storybook fixes (#99)

.storybook/decorators/DocsDecorator/DocsDecorator.scss

@@ -0,0 +1,95 @@
+@use '@gravity-ui/uikit/styles/mixins';
+
+$offset-xs: 4px;
+$offset-s: 8px;
+$offset-m: 16px;
+$offset-l: 40px;
+
+$root: '.docs-decorator';
+
+#{$root}#{$root}#{$root}#{$root}#{$root} {
+    .sbdocs-p,
+    .sbdocs-li,
+    .sbdocs-a {
+        @include mixins.text-body-2;
+    }
+
+    .sbdocs-wrapper {
+        padding: 0 $offset-l;
+    }
+
+    .sbdocs-content {
+        max-width: 800px;
+    }
+
+    .sbdocs-p,
+    .sbdocs-ul,
+    .sbdocs-ol {
+        margin: $offset-xs 0;
+
+        & + .sbdocs-p,
+        & + .sbdocs-ul,
+        & + .sbdocs-ol {
+            margin-top: $offset-s;
+        }
+    }
+
+    .sbdocs-li + .sbdocs-li {
+        margin-top: $offset-xs;
+    }
+
+    .sbdocs-ul,
+    .sbdocs-ol {
+        padding-left: $offset-m;
+    }
+
+    .sbdocs-h1 {
+        @include mixins.text-display-3;
+    }
+
+    .sbdocs-h2 {
+        @include mixins.text-display-1;
+        border: 0;
+        padding: 0;
+    }
+
+    .sbdocs-h3 {
+        @include mixins.text-header-2;
+    }
+
+    .sbdocs-h1,
+    .sbdocs-h2,
+    .sbdocs-h3 {
+        margin-top: $offset-l;
+        margin-bottom: $offset-m;
+    }
+
+    .sbdocs-a {
+        text-decoration: none;
+        touch-action: manipulation;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        cursor: pointer;
+
+        color: var(--yc-color-text-link);
+
+        &:hover {
+            color: var(--yc-color-text-link-hover);
+        }
+    }
+
+    .sbdocs-p code {
+        @include mixins.text-code-inline-2;
+        line-height: 1;
+        padding: 1px 4px;
+        background: var(--yc-color-base-misc);
+        color: var(--yc-color-text-misc);
+    }
+
+    .docblock-source {
+        margin: $offset-m 0;
+    }
+
+    .docs-example {
+        margin: $offset-m 0;
+    }
+}

.storybook/decorators/DocsDecorator/DocsDecorator.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import {DocsContainer, DocsContainerProps} from '@storybook/addon-docs';
+import {ThemeProvider, MobileProvider, getThemeType} from '@gravity-ui/uikit';
+import {themes} from '../../../.storybook/theme';
+
+import './DocsDecorator.scss';
+
+export interface DocsDecoratorProps extends React.PropsWithChildren<DocsContainerProps> {}
+
+const b = block('docs-decorator');
+
+export function DocsDecorator({children, context}: DocsDecoratorProps) {
+    const storyContext = context.getStoryContext(context.storyById(context.id));
+    const theme = storyContext.globals.theme;
+    return (
+        <div className={b()}>
+            {/* @ts-ignore */}
+            <DocsContainer
+                context={{
+                    ...context,
+                    storyById: (id) => {
+                        const story = context.storyById(id);
+                        return {
+                            ...story,
+                            parameters: {
+                                ...story?.parameters,
+                                docs: {
+                                    ...story?.parameters?.docs,
+                                    theme: themes[getThemeType(theme)],
+                                },
+                            },
+                        };
+                    },
+                }}
+            >
+                <ThemeProvider theme={theme}>
+                    <MobileProvider mobile={false}>{children}</MobileProvider>
+                </ThemeProvider>
+            </DocsContainer>
+        </div>
+    );
+}

.storybook/decorators/withLang.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import type {DecoratorFn} from '@storybook/react';
+import {Lang, configure} from '@gravity-ui/uikit';
+
+export const withLang: DecoratorFn = (Story, context) => {
+    const lang = context.globals.lang;
+
+    configure({
+        lang: lang as Lang,
+    });
+
+    return <Story key={lang} {...context} />;
+};

.storybook/decorators/withMobile.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type {DecoratorFn} from '@storybook/react';
+import {useMobile} from '@gravity-ui/uikit';
+
+export const withMobile: DecoratorFn = (Story, context) => {
+    const mobileValue = context.globals.platform === 'mobile';
+
+    const [, setMobile] = useMobile(); // eslint-disable-line react-hooks/rules-of-hooks
+
+    React.useEffect(() => {
+        setMobile(mobileValue);
+    }, [mobileValue]);
+
+    return <Story {...context} />;
+};

.storybook/decorators/withTheme.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type {DecoratorFn} from '@storybook/react';
+import {useTheme} from '@gravity-ui/uikit';
+
+export const withTheme: DecoratorFn = (Story, context) => {
+    const themeValue = context.globals.theme;
+    const [theme, setTheme] = useTheme();
+
+    React.useEffect(() => {
+        if (theme !== themeValue) {
+            setTheme(themeValue);
+        }
+    }, [theme, themeValue, setTheme]);
+
+    return <Story {...context} />;
+};

.storybook/main.ts

@@ -0,0 +1,12 @@
+import type {StorybookConfig} from '@storybook/core-common';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.stories.@(ts|tsx)'],
+    addons: [
+        '@storybook/preset-scss',
+        {name: '@storybook/addon-essentials', options: {backgrounds: false}},
+        './theme-addon/register.tsx',
+    ],
+};
+
+module.exports = config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import {addons} from '@storybook/addons';
+import {themes} from './theme';
+
+addons.setConfig({
+    theme: themes.light,
+});

.storybook/preview.js → .storybook/preview.tsx

@@ -1,25 +1,45 @@
+import React from 'react';
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
-import {withContext} from './contextDecorator';
+import type {DecoratorFn} from '@storybook/react';
+import {themes} from './theme';
+import {withMobile} from './decorators/withMobile';
+import {withLang} from './decorators/withLang';
+import {DocsDecorator} from './decorators/DocsDecorator/DocsDecorator';
+import {ThemeProvider, MobileProvider, configure, Lang} from '@gravity-ui/uikit';
 
 import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/yagr/dist/index.css';
 
-export const decorators = [withContext];
+configure({
+    lang: Lang.En,
+});
+
+const withContextProvider: DecoratorFn = (Story, context) => {
+    return (
+        <React.StrictMode>
+            <ThemeProvider theme={context.globals.theme}>
+                <MobileProvider>
+                    <Story {...context} />
+                </MobileProvider>
+            </ThemeProvider>
+        </React.StrictMode>
+    );
+};
+
+export const decorators = [withMobile, withLang, withContextProvider];
 
 export const parameters = {
-    jsx: {showFunctions: true},
+    docs: {
+        theme: themes.light,
+        container: DocsDecorator,
+    },
+    jsx: {showFunctions: true}, // To show functions in sources
     viewport: {
         viewports: MINIMAL_VIEWPORTS,
     },
-    backgrounds: {
-        default: 'light',
-        values: [
-            {name: 'light', value: 'white'},
-            {name: 'dark', value: 'rgba(45, 44, 51, 1)'},
-        ],
-    },
     options: {
         storySort: {
-            order: ['Theme', 'Components'],
+            order: ['Theme', 'Components', ['Basic']],
             method: 'alphabetical',
         },
     },
@@ -34,6 +54,8 @@ export const globalTypes = {
             items: [
                 {value: 'light', right: '☼', title: 'Light'},
                 {value: 'dark', right: '☾', title: 'Dark'},
+                {value: 'light-hc', right: '☼', title: 'High Contrast Light'},
+                {value: 'dark-hc', right: '☾', title: 'High Contrast Dark'},
             ],
         },
     },

.storybook/theme-addon/register.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {addons, types} from '@storybook/addons';
+import {useGlobals} from '@storybook/api';
+import {FORCE_RE_RENDER} from '@storybook/core-events';
+import {getThemeType} from '@gravity-ui/uikit';
+import {themes} from '../theme';
+
+const ADDON_ID = 'yc-theme-addon';
+const TOOL_ID = `${ADDON_ID}tool`;
+
+addons.register(ADDON_ID, (api) => {
+    addons.add(TOOL_ID, {
+        type: types.TOOL,
+        title: 'Theme',
+        render: () => {
+            return <Tool api={api} />;
+        },
+    });
+});
+
+function Tool({api}) {
+    const [{theme}] = useGlobals();
+    React.useEffect(() => {
+        api.setOptions({theme: themes[getThemeType(theme)]});
+        addons.getChannel().emit(FORCE_RE_RENDER);
+    }, [theme]);
+    return null;
+}