feat: add AdaptiveTabs component (#4)

.storybook/decorators/withLang.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import type {DecoratorFn} from '@storybook/react';
+import {Lang, configure} from '../../src';
+
+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

@@ -5,6 +5,7 @@ const config: StorybookConfig = {
     addons: [
         '@storybook/preset-scss',
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
+        './theme-addon/register.tsx',
     ],
 };
 

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -0,0 +1,83 @@
+import '@gravity-ui/uikit/styles/styles.css';
+
+import React from 'react';
+import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
+import type {DecoratorFn} from '@storybook/react';
+import {ThemeProvider, MobileProvider, Lang, configure as uiKitConfigure} from '@gravity-ui/uikit';
+import {configure} from '../src';
+import {withMobile} from './decorators/withMobile';
+import {withLang} from './decorators/withLang';
+
+configure({
+    lang: Lang.En,
+});
+uiKitConfigure({
+    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 = {
+    docs: {
+        theme: 'light',
+    },
+    jsx: {showFunctions: true},
+    viewport: {
+        viewports: MINIMAL_VIEWPORTS,
+    },
+    options: {
+        storySort: {
+            order: ['Theme', 'Components', ['Basic']],
+            method: 'alphabetical',
+        },
+    },
+};
+
+export const globalTypes = {
+    theme: {
+        name: 'Theme',
+        defaultValue: 'light',
+        toolbar: {
+            icon: 'mirror',
+            items: [
+                {value: 'light', right: '☼', title: 'Light'},
+                {value: 'dark', right: '☾', title: 'Dark'},
+                {value: 'light-hc', right: '☼', title: 'High Contrast Light (beta)'},
+                {value: 'dark-hc', right: '☾', title: 'High Contrast Dark (beta)'},
+            ],
+        },
+    },
+    lang: {
+        name: 'Language',
+        defaultValue: 'en',
+        toolbar: {
+            icon: 'globe',
+            items: [
+                {value: 'en', right: '🇬🇧', title: 'En'},
+                {value: 'ru', right: '🇷🇺', title: 'Ru'},
+            ],
+        },
+    },
+    platform: {
+        name: 'Platform',
+        defaultValue: 'desktop',
+        toolbar: {
+            items: [
+                {value: 'desktop', title: 'Desktop', icon: 'browser'},
+                {value: 'mobile', title: 'Mobile', icon: 'mobile'},
+            ],
+        },
+    },
+};

.storybook/theme-addon/register.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {addons, types} from '@storybook/addons';
+import {useGlobals, type API} from '@storybook/api';
+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}: {api: API}) {
+    const [{theme}] = useGlobals();
+    React.useEffect(() => {
+        api.setOptions({theme: themes[getThemeType(theme)]});
+    }, [theme]);
+    return null;
+}

.storybook/theme.ts

@@ -0,0 +1,41 @@
+import {create} from '@storybook/theming';
+
+export const CloudThemeLight = create({
+    base: 'light',
+
+    colorPrimary: '#027bf3',
+    colorSecondary: 'rgba(2, 123, 243, 0.6)',
+
+    // Typography
+    fontBase: '"Helvetica Neue", Arial, Helvetica, sans-serif',
+    fontCode:
+        '"SF Mono", "Menlo", "Monaco", "Consolas", "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", "Courier", monospace',
+
+    // Text colors
+    textColor: 'black',
+    textInverseColor: 'black',
+
+    // Toolbar default and active colors
+    barTextColor: 'silver',
+    barSelectedColor: '#027bf3',
+    // barBg: '#027bf3',
+
+    // Form colors
+    inputBg: 'white',
+    inputBorder: 'silver',
+    inputTextColor: 'black',
+    inputBorderRadius: 4,
+
+    brandUrl: 'https://github.com/gravity-ui/uikit',
+    brandTitle: `<div style="font-size: 18px; color: #027bf3; font-weight: 600; margin-top: -6px; margin-bottom: 2px;">Gravity UI</div>
+                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400;">Base Components</div>`,
+});
+
+export const CloudThemeDark = create({
+    base: 'dark',
+});
+
+export const themes = {
+    light: CloudThemeLight,
+    dark: CloudThemeDark,
+};