uikit5

.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

@@ -14,7 +14,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: '18.x'
           cache: 'npm'
       - run: npm ci
       - run: npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose
@@ -30,7 +30,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: '18.x'
           cache: 'npm'
       - name: Install Packages
         run: npm ci

.github/workflows/preview-build.yml

@@ -1,4 +1,4 @@
-name: Preview Build
+name: PR Preview Build
 
 on:
   pull_request:
@@ -10,4 +10,4 @@ jobs:
     steps:
       - uses: gravity-ui/preview-build-action@v1
         with:
-          node-version: 14
+          node-version: 18

.github/workflows/preview-deploy.yml

@@ -1,8 +1,8 @@
-name: Preview Deploy
+name: PR Preview Deploy
 
 on:
   workflow_run:
-    workflows: ['Preview Build']
+    workflows: ['PR Preview Build']
     types:
       - completed
 

.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

.nvmrc

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

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type {StorybookConfig} from '@storybook/react-webpack5';
+const config: StorybookConfig = {
+    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        {name: '@storybook/addon-essentials', options: {backgrounds: false}},
+        '@storybook/addon-interactions',
+        '@storybook/preset-scss',
+    ],
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {fastRefresh: true},
+    },
+    docs: {
+        autodocs: 'tag',
+        defaultName: 'Docs',
+    },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import type {Preview, Decorator} from '@storybook/react';
+import '@gravity-ui/uikit/styles/styles.scss';
+
+import {ThemeProvider, MobileProvider, configure as uikitConfigure} from '@gravity-ui/uikit';
+
+export const withContextProvider: Decorator = (StoryItem, context) => {
+    return (
+        <React.StrictMode>
+            <ThemeProvider theme={context.globals.theme}>
+                <MobileProvider>
+                    <StoryItem {...context} />
+                </MobileProvider>
+            </ThemeProvider>
+        </React.StrictMode>
+    );
+};
+
+export const withLang: Decorator = (StoryItem, context) => {
+    const lang = context.globals.lang;
+    uikitConfigure({lang});
+
+    return <StoryItem {...context} />;
+};
+
+const preview: Preview = {
+    decorators: [withContextProvider, withLang],
+    parameters: {
+        actions: {argTypesRegex: '^on[A-Z].*'},
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+    },
+    globalTypes: {
+        lang: {
+            name: 'Language',
+            defaultValue: 'ru',
+            toolbar: {
+                icon: 'globe',
+                items: [
+                    {value: 'ru', right: '🇷🇺', title: 'Ru'},
+                    {value: 'en', right: '🇺🇸', title: 'En'},
+                ],
+            },
+        },
+        theme: {
+            name: 'Theme',
+            defaultValue: 'light',
+            toolbar: {
+                icon: 'mirror',
+                items: [
+                    {title: 'light', value: 'light'},
+                    {title: 'dark', value: 'dark'},
+                    {title: 'light-hc', value: 'light-hc'},
+                    {title: 'dark-hc', value: 'dark-hc'},
+                ],
+            },
+        },
+    },
+};
+
+export default preview;

.storybook/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "..",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES2017"
+  }
+}

jest.config.js

@@ -7,10 +7,8 @@ module.exports = {
     preset: 'ts-jest',
     moduleDirectories: ['node_modules', 'src/lib'],
     moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
-    testEnvironment: 'jsdom',
     testMatch: ['**/*.test.js'],
     transform: {
         'src/test/.+\\.(j|t)sx?$': 'ts-jest',
     },
-    transformIgnorePatterns: ['node_modules/(?!(@yandex-cloud)/)'],
 };