chore: use vite + vitest

.github/workflows/ci.yml

@@ -5,15 +5,17 @@ on:
     branches: [main, next]
   pull_request:
 
+concurrency:
+  group: ci-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   verify_files:
     name: Verify Files
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
@@ -34,14 +36,13 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
           node-version-file: .nvmrc
           cache: 'npm'
       - name: Install Packages
         run: npm ci
-      - name: Unit Tests
+      - uses: ./.github/actions/setup-playwright
+      - name: Tests
         run: npm run test

.github/workflows/main-preview.yml

@@ -11,8 +11,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
       - name: Setup Node
         uses: actions/setup-node@v6
         with:

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

@@ -3,6 +3,10 @@ name: PR Preview Build
 on:
   pull_request:
 
+concurrency:
+  group: preview-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
 jobs:
   build:
     name: Build

.github/workflows/pr-title.yml

@@ -5,11 +5,10 @@ on:
     types:
       - opened
       - synchronize
-      - reopened
       - edited
 
 concurrency:
-  group: ${{github.workflow}}-${{github.ref}}
+  group: title-${{ github.event.pull_request.number }}
   cancel-in-progress: true
 
 jobs:

.github/workflows/release-beta.yml

@@ -30,12 +30,6 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - name: Install Packages
         run: npm ci
-      - name: Lint Files
-        run: npm run lint
-      - name: Typecheck
-        run: npm run typecheck
-      - name: Test
-        run: npm test
       - name: Bump version
         run: |
           echo ${{ github.event.inputs.version }}

.gitignore

@@ -10,12 +10,10 @@ dist
 storybook-static
 .cache
 
-# Playwright
-playwright-report
-playwright-report-docker
-playwright/.cache-docker
-playwright/.cache/
-test-results
+# Tests
+reports
 
 # System files
 .DS_Store
+
+.vitest-*

.storybook/main.ts

@@ -1,62 +1,18 @@
-import {defineMain} from '@storybook/react-webpack5/node';
-import * as sass from 'sass';
+import {defineMain} from '@storybook/react-vite/node';
 
 export default defineMain({
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
     addons: [
         '@storybook/addon-docs',
         '@storybook/addon-a11y',
         import.meta.resolve('./theme-addon/theme-preset.ts'),
-        '@storybook/addon-webpack5-compiler-babel',
-        {
-            name: '@storybook/addon-styling-webpack',
-            options: {
-                rules: [
-                    {
-                        test: /\.css$/,
-                        sideEffects: true,
-                        use: ['style-loader', 'css-loader'],
-                    },
-                    {
-                        test: /\.scss$/,
-                        sideEffects: true,
-                        use: [
-                            'style-loader',
-                            {
-                                loader: 'css-loader',
-                                options: {importLoaders: 1},
-                            },
-                            {
-                                loader: 'sass-loader',
-                                options: {implementation: sass},
-                            },
-                        ],
-                    },
-                ],
-            },
-        },
+        '@storybook/addon-vitest',
     ],
-    framework: '@storybook/react-webpack5',
+    framework: {name: '@storybook/react-vite', options: {strictMode: true}},
     typescript: {
-        check: false,
-        checkOptions: {},
         reactDocgen: 'react-docgen-typescript',
     },
     core: {
         disableTelemetry: true,
     },
-    babel: {
-        presets: [
-            [
-                '@babel/preset-env',
-                {
-                    targets: {
-                        chrome: 100,
-                    },
-                },
-            ],
-            '@babel/preset-typescript',
-            ['@babel/preset-react', {runtime: 'automatic'}],
-        ],
-    },
 });

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -3,38 +3,34 @@ import '@gravity-ui/uikit/styles/fonts.scss';
 // eslint-disable-next-line import/order
 import '@gravity-ui/uikit/styles/styles.css';
 
-import React from 'react';
-
 import {settings} from '@gravity-ui/date-utils';
 import {MobileProvider, ThemeProvider, ToasterComponent, ToasterProvider} from '@gravity-ui/uikit';
 import {toaster} from '@gravity-ui/uikit/toaster-singleton';
 import addonDocs from '@storybook/addon-docs';
-import type {Decorator} from '@storybook/react-webpack5';
-import {definePreview} from '@storybook/react-webpack5';
+import type {Decorator} from '@storybook/react-vite';
+import {definePreview} from '@storybook/react-vite';
 import {MINIMAL_VIEWPORTS} from 'storybook/viewport';
 
-import {DocsDecorator} from '../src/demo/DocsDecorator/DocsDecorator';
+import {DocsDecorator} from '../src/demo/DocsDecorator/DocsDecorator.js';
 
 import {themes} from './theme';
 
 settings.loadLocale('ru');
 
 const WithContextProvider: Decorator = (Story, context) => {
     return (
-        <React.StrictMode>
-            <ThemeProvider
-                theme={context.globals.theme}
-                direction={context.globals.direction}
-                lang={context.globals.lang}
-            >
-                <MobileProvider mobile={context.globals.platform === 'mobile'}>
-                    <ToasterProvider toaster={toaster}>
-                        <Story {...context} />
-                        <ToasterComponent />
-                    </ToasterProvider>
-                </MobileProvider>
-            </ThemeProvider>
-        </React.StrictMode>
+        <ThemeProvider
+            theme={context.globals.theme}
+            direction={context.globals.direction}
+            lang={context.globals.lang}
+        >
+            <MobileProvider mobile={context.globals.platform === 'mobile'}>
+                <ToasterProvider toaster={toaster}>
+                    <Story {...context} />
+                    <ToasterComponent />
+                </ToasterProvider>
+            </MobileProvider>
+        </ThemeProvider>
     );
 };
 
@@ -45,16 +41,28 @@ export default definePreview({
             theme: themes.light,
             container: DocsDecorator,
             codePanel: true,
+            source: {excludeDecorators: false},
         },
-        jsx: {showFunctions: false}, // Do not show functions in sources
+
+        // Do not show functions in sources
+        jsx: {showFunctions: false},
+
         viewport: {
             options: MINIMAL_VIEWPORTS,
         },
+
         options: {
             storySort: {
                 method: 'alphabetical',
             },
         },
+
+        a11y: {
+            // 'todo' - show a11y violations in the test UI only
+            // 'error' - fail CI on a11y violations
+            // 'off' - skip a11y checks entirely
+            test: 'todo',
+        },
     },
     decorators: [WithContextProvider],
     globalTypes: {

.storybook/vitest.setup.ts

@@ -0,0 +1,10 @@
+import {beforeAll, expect} from 'vitest';
+import type {ExpectStatic} from 'vitest';
+
+declare global {
+    var vitestExpect: ExpectStatic | undefined;
+}
+
+beforeAll(() => {
+    globalThis.vitestExpect = expect;
+});

commitlint.config.js

@@ -2,4 +2,4 @@
 const config = {
     extends: ['@commitlint/config-conventional'],
 };
-module.exports = config;
+export default config;