feat!: migration on uikit 5 (#71)

* feat!: migration on uikit 5

* fix: github workflow node.js version

* fix(AsideHeader): background color

* chore: update logo for storybook

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.github/workflows/ci.yml

@@ -18,8 +18,8 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v2
       with:
-        node-version: '14.x'
-        cache: 'npm'
+        node-version: 18
+        cache: npm
     - name: Install Packages
       run: npm ci
     - name: Lint Files
@@ -38,8 +38,8 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v2
       with:
-        node-version: '14.x'
-        cache: 'npm'
+        node-version: 18
+        cache: npm
     - name: Install Packages
       run: npm ci
     - name: Unit Tests

.github/workflows/main-preview.yml

@@ -16,7 +16,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v2
       with:
-        node-version: 14
+        node-version: 18
     - name: Install Packages
       run: npm ci
       shell: bash

.github/workflows/pr-preview-build.yml

@@ -9,5 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: gravity-ui/preview-build-action@v1
+      with:
+          node-version: 18
       env:
         TS_NODE_PROJECT: .storybook/tsconfig.json

.github/workflows/release.yml

@@ -12,3 +12,4 @@ jobs:
       with:
         github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
         npm-token: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
+        node-version: 18

.nvmrc

@@ -1 +1 @@
-14
+18

.storybook/decorators/withLang.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import type {Decorator} from '@storybook/react';
+import {Lang, configure} from '../../src';
+
+export const withLang: Decorator = (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 {Decorator} from '@storybook/react';
+import {useMobile} from '@gravity-ui/uikit';
+
+export const withMobile: Decorator = (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/main.ts

@@ -1,14 +1,25 @@
-module.exports = {
+import type {StorybookConfig} from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
     stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
     addons: [
         '@storybook/addon-links',
-        '@storybook/addon-essentials',
+        {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         '@storybook/addon-interactions',
         '@storybook/preset-scss',
         'storybook-preset-inline-svg',
+        './theme-addon/register.tsx'
     ],
-    framework: '@storybook/react',
-    features: {
-        postcss: false,
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {}
+    },
+    docs: {
+        autodocs: false,
+    },
+    core: {
+        disableTelemetry: true,
     },
 };
+
+export default config;

.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,84 @@
+import './styles.scss';
+import '@gravity-ui/uikit/styles/styles.css';
+
+import React from 'react';
+import type {Decorator, Preview} from '@storybook/react';
+import {ThemeProvider, MobileProvider, Lang, configure as uiKitConfigure} from '@gravity-ui/uikit';
+import {configure as componentsConfigure} from '@gravity-ui/components';
+import {configure} from '../src';
+import {withMobile} from './decorators/withMobile';
+import {withLang} from './decorators/withLang';
+
+configure({
+    lang: Lang.En,
+});
+uiKitConfigure({
+    lang: Lang.En,
+});
+componentsConfigure({
+    lang: Lang.En,
+});
+
+const withContextProvider: Decorator = (Story, context) => {
+    return (
+        <React.StrictMode>
+            <ThemeProvider theme={context.globals.theme}>
+                <MobileProvider>
+                    <Story {...context} />
+                </MobileProvider>
+            </ThemeProvider>
+        </React.StrictMode>
+    );
+};
+
+const preview: Preview = {
+    decorators: [withMobile, withLang, withContextProvider],
+    parameters: {
+        jsx: {showFunctions: true},
+        options: {
+            storySort: {
+                order: ['Theme', 'Components', ['Basic']],
+                method: 'alphabetical',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    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'},
+                ],
+            },
+        },
+    },
+};
+
+export default preview;

.storybook/styles.scss

@@ -0,0 +1,5 @@
+@import '~@doc-tools/transform/dist/css/yfm.css';
+
+body {
+    padding: 0;
+}

.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;">Components</div>`,
+});
+
+export const CloudThemeDark = create({
+    base: 'dark',
+});
+
+export const themes = {
+    light: CloudThemeLight,
+    dark: CloudThemeDark,
+};