feat!: update to uikit@5, node@18, storybook@7; remove assets

.babelrc

@@ -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,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: '14.x'
+          node-version: '18.x'
           cache: 'npm'
       - name: Install Packages
         run: npm ci

.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: yandex-cloud/ui-preview-build-action@main
+      with:
+        node-version: 18
       env:
         TS_NODE_PROJECT: .storybook/tsconfig.json

.github/workflows/release.yml

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

.nvmrc

@@ -1 +1 @@
-14.20
+18

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type {StorybookConfig} from '@storybook/react-webpack5';
+
+const config:StorybookConfig = {
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {fastRefresh: true},
+    },
+    stories: ['../demo/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: [
+        '@storybook/preset-scss',
+        {name: '@storybook/addon-essentials', options: {backgrounds: false}},
+    ],
+    typescript: {
+        check: true,
+    },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,42 @@
+import type {Preview} from '@storybook/react';
+import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
+
+import {withThemeProvider, withLang, backgrounds} from '../demo/utils/preview';
+
+const preview: Preview = {
+    decorators: [withThemeProvider, withLang],
+    parameters: {
+        jsx: {showFunctions: true}, // To show functions in sources
+        viewport: {
+            viewports: MINIMAL_VIEWPORTS,
+        },
+    },
+    globalTypes: {
+        theme: {
+            defaultValue: 'light',
+            toolbar: {
+                title: 'Theme',
+                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: {
+            defaultValue: 'en',
+            toolbar: {
+                title: 'Language',
+                icon: 'globe',
+                items: [
+                    {value: 'en', right: '🇬🇧', title: 'En'},
+                    {value: 'ru', right: '🇷🇺', title: 'Ru'},
+                ],
+            },
+        },
+    },
+};
+
+export default preview;

README.md

@@ -13,7 +13,7 @@ npm install @doc-tools/yfm-editor
 Ensure that peer dependencies are installed in your project
 
 ```shell
-npm install react@17 react-dom@17 @doc-tools/transform@2 @gravity-ui/uikit@4 lodash@4
+npm install react@17 react-dom@17 @doc-tools/transform@3 @gravity-ui/uikit@5 @gravity-ui/components@2 lodash@4
 ```
 
 ## Usage

demo/Playground.scss

@@ -32,7 +32,7 @@
     }
 
     &__markup {
-        background-color: var(--yc-color-base-generic);
+        background-color: var(--g-color-base-generic);
     }
 
     &__editor-view {

demo/Playground.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import block from 'bem-cn-lite';
 import {useUpdate} from 'react-use';
-import {Button, RadioButton, TextInput} from '@gravity-ui/uikit';
+import {Button, RadioButton, TextArea} from '@gravity-ui/uikit';
 
 import {
     BaseNode,
@@ -183,9 +183,8 @@ const Playground = React.memo<PlaygroundProps>((props) => {
 
             <div className={b('preview')}>
                 {previewType === PreviewType.Markup && (
-                    <TextInput
+                    <TextArea
                         size="s"
-                        multiline
                         minRows={10}
                         value={yfmRaw}
                         onUpdate={(value) => {

demo/utils/preview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {Story, StoryContext} from '@storybook/react/types-6-0';
-import {configure as configureUikit, useTheme, ThemeProvider, Theme} from '@gravity-ui/uikit';
+import type {Decorator} from '@storybook/react';
+import {configure as configureUikit, ThemeProvider} from '@gravity-ui/uikit';
+import {configure as configureComponents} from '@gravity-ui/components';
 import {configure as configureYfmEditor} from '../../src';
 
 import '@gravity-ui/uikit/styles/styles.scss';
@@ -12,35 +13,19 @@ export const backgrounds = {
     values: [light, dark],
 };
 
-/* eslint-disable react-hooks/rules-of-hooks */
-export function withTheme(StoryItem: Story, context: StoryContext) {
-    const {value} = context.globals.backgrounds;
-    const themeValue = value === dark.value ? dark.name : light.name;
-
-    const [theme, setTheme] = useTheme();
-
-    React.useEffect(() => {
-        if (theme !== themeValue) {
-            setTheme((themeValue as Theme) || 'system');
-        }
-    }, [theme, themeValue, setTheme]);
-
-    return <StoryItem {...context} />;
-}
-/* eslint-enable react-hooks/rules-of-hooks */
-
-export function withThemeProvider(StoryItem: Story, context: StoryContext) {
+export const withThemeProvider: Decorator = (StoryItem, context) => {
     return (
-        <ThemeProvider>
+        <ThemeProvider theme={context.globals.theme}>
             <StoryItem {...context} />
         </ThemeProvider>
     );
-}
+};
 
-export function withLang(StoryItem: Story, context: StoryContext) {
+export const withLang: Decorator = (StoryItem, context) => {
     const lang = context.globals.lang;
     configureUikit({lang});
+    configureComponents({lang});
     configureYfmEditor({lang});
 
     return <StoryItem {...context} />;
-}
+};