feat: update to storybook 7, webpack 5, node 18 (#457)

* feat: update to storybook 7, webpack 5, node 18

.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,15 +16,13 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 18
       - name: Install Packages
         run: npm ci
         shell: bash
       - name: Build Storybook
         run: npx build-storybook
         shell: bash
-        env:
-          TS_NODE_PROJECT: .storybook/tsconfig.json
       - name: Upload to S3
         uses: gravity-ui/preview-upload-to-s3-action@v1
         with:

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

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

.github/workflows/release-1.x.x.yml

@@ -12,6 +12,6 @@ jobs:
         with:
           github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
           npm-token: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
-          node-version: 14
+          node-version: 18
           npm-dist-tag: untagged
           default-branch: version-1.x.x/fixes

.github/workflows/release-2.x.x.yml

@@ -12,6 +12,6 @@ jobs:
         with:
           github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
           npm-token: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
-          node-version: 14
+          node-version: 18
           npm-dist-tag: untagged
           default-branch: version-2.x.x

.github/workflows/release-alpha.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci
         shell: bash

.github/workflows/release-beta.yml

@@ -12,7 +12,7 @@ jobs:
         with:
           github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
           npm-token: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
-          node-version: 14
+          node-version: 18
           npm-dist-tag: beta
           prerelease: true
           default-branch: beta

.github/workflows/release.yml

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

.npmrc

@@ -1 +1,2 @@
-registry=https://registry.npmjs.org
+registry=https://registry.npmjs.org
+legacy-peer-deps=true

.nvmrc

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

.storybook/addons/theme-addon/register.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {addons, types} from '@storybook/addons';
+import {useGlobals} from '@storybook/api';
+import type {API} from '@storybook/api';
+
+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[theme]});
+    }, [theme]);
+    return null;
+}

.storybook/addons/addon-yaml/AddonYaml.css → .storybook/addons/yaml-addon/AddonYaml.css

@@ -1,8 +1,8 @@
-.addon-yaml {
+.yaml-addon {
     padding: 11px;
 }
 
-.addon-yaml pre {
+.yaml-addon pre {
     margin: 10px 0 0;
     padding: 0;
 }

.storybook/addons/addon-yaml/register.js → .storybook/addons/yaml-addon/register.js

@@ -25,7 +25,7 @@ const YamlPanel = () => {
     );
 
     return (
-        <div className="addon-yaml">
+        <div className="yaml-addon">
             <ClipboardButton text={content} />
             <pre>{content}</pre>
         </div>

.storybook/decorators/docs/DocsDecorator.scss

@@ -0,0 +1,19 @@
+$root: '.docs-decorator';
+
+#{$root}#{$root}#{$root}#{$root}#{$root} {
+    .sbdocs-wrapper {
+        padding: 20px;
+
+        h1 {
+            margin-bottom: 32px;
+        }
+    }
+
+    .sbdocs-content {
+        max-width: 1680px;
+    }
+
+    .innerZoomElementWrapper {
+        overflow: hidden;
+    }
+}

.storybook/decorators/docs/index.tsx

@@ -0,0 +1,29 @@
+import {DocsContainer} from '@storybook/addon-docs';
+import type {DocsContainerProps} from '@storybook/addon-docs';
+import block from 'bem-cn-lite';
+import React from 'react';
+
+import {themes} from '../../theme';
+import {MobileContext} from '../../../src/context/mobileContext';
+import {ThemeProvider} from '../../../src/context/theme/ThemeProvider';
+
+import './DocsDecorator.scss';
+
+export interface DocsDecoratorProps extends React.PropsWithChildren<DocsContainerProps> {}
+
+const b = block('docs-decorator');
+
+export function DocsDecorator({children, context}: DocsDecoratorProps) {
+    // @ts-expect-error
+    const theme = context.store.globals.globals.theme;
+
+    return (
+        <div className={b()}>
+            <DocsContainer context={context} theme={themes[theme as 'dark' | 'light']}>
+                <ThemeProvider theme={theme}>
+                    <MobileContext.Provider value={false}>{children}</MobileContext.Provider>
+                </ThemeProvider>
+            </DocsContainer>
+        </div>
+    );
+}

.storybook/decorators/withLang.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import type {DecoratorFn} from '@storybook/react';
+import type {Decorator} from '@storybook/react';
 import {Lang, configure} from '../../src/utils/configure';
 
-export const withLang: DecoratorFn = (Story, context) => {
+export const withLang: Decorator = (Story, context) => {
     const lang = context.globals.lang;
 
     configure({

.storybook/decorators/withMobile.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {Story as StoryType, StoryContext} from '@storybook/react/types-6-0';
+import {StoryFn, StoryContext} from '@storybook/react';
 import {useMobile} from '@gravity-ui/uikit';
 
-export function withMobile(Story: StoryType, context: StoryContext) {
+export function withMobile(Story: StoryFn, context: StoryContext) {
     const mobileValue = context.globals.platform === 'mobile';
 
     const [mobile, setMobile] = useMobile(); // eslint-disable-line react-hooks/rules-of-hooks

.storybook/decorators/withTheme.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {Story as StoryType, StoryContext} from '@storybook/react/types-6-0';
+import {StoryFn, StoryContext} from '@storybook/react';
 import {useTheme} from '../../src/context/theme';
 
-export function withTheme(Story: StoryType, context: StoryContext) {
+export function withTheme(Story: StoryFn, context: StoryContext) {
     const themeValue = context.globals.theme;
     const [theme, setTheme] = useTheme(); // eslint-disable-line react-hooks/rules-of-hooks
 

.storybook/main.ts

@@ -1,54 +1,45 @@
-const {join, resolve} = require('path');
-const WebpackShellPlugin = require('webpack-shell-plugin');
+import {resolve} from 'path';
+import WebpackShellPluginNext from 'webpack-shell-plugin-next';
 
 const customAlias = {
     widget: resolve(__dirname, '../widget'),
 };
-
 const config = {
-    stories: ['../src/**/*.stories.@(ts|tsx)'],
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {},
+    },
+    docs: {
+        autodocs: true,
+    },
+    stories: ['./stories/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
     addons: [
         '@storybook/preset-scss',
-        {name: '@storybook/addon-essentials', options: {backgrounds: false}},
-        '@storybook/addon-knobs',
-        './addons/addon-yaml/preset',
-    ],
-    typescript: {
-        check: true,
-        checkOptions: {},
-        reactDocgen: 'react-docgen-typescript',
-        reactDocgenTypescriptOptions: {
-            setDisplayName: false,
-            shouldExtractLiteralValuesFromEnum: true,
-            compilerOptions: {
-                allowSyntheticDefaultImports: true,
-                esModuleInterop: true,
+        {
+            name: '@storybook/addon-essentials',
+            options: {
+                backgrounds: false,
             },
         },
-    },
+        '@storybook/addon-knobs',
+        './addons/yaml-addon/preset',
+        './addons/theme-addon/register.tsx',
+    ],
     webpackFinal: (storybookBaseConfig: any) => {
-        storybookBaseConfig.module.rules.push({
-            test: /\.md$/,
-            include: [join(__dirname, '..')],
-            use: [{loader: 'markdown-loader'}],
-        });
-
-        // to turn fileName in context.parameters into path form number in production bundle
-        storybookBaseConfig.optimization.moduleIds = 'named';
-
         storybookBaseConfig.plugins.push(
-            new WebpackShellPlugin({
-                onBuildStart: ['npm run build:widget'],
+            new WebpackShellPluginNext({
+                onBuildStart: {
+                    scripts: ['npm run build:widget'],
+                    blocking: true,
+                },
             }),
         );
-
         storybookBaseConfig.resolve.alias = {
             ...(storybookBaseConfig.resolve?.alias || {}),
             ...customAlias,
         };
-
         return storybookBaseConfig;
     },
 };
 
-module.exports = config;
+export default config;

.storybook/manager.ts

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