feat!: v4 changes

.babelrc

@@ -10,7 +10,12 @@
       }
     ],
     "@babel/preset-typescript",
-    "@babel/preset-react"
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
   "plugins": []
-}
+}

.eslintrc

@@ -2,25 +2,27 @@
     "extends": [
         "@gravity-ui/eslint-config",
         "@gravity-ui/eslint-config/client",
-        "@gravity-ui/eslint-config/import-order",
         "@gravity-ui/eslint-config/prettier",
-        "@gravity-ui/eslint-config/a11y"
+        "@gravity-ui/eslint-config/import-order",
+        "@gravity-ui/eslint-config/a11y",
+        "plugin:react/jsx-runtime"
     ],
     "root": true,
     "rules": {
         "react/jsx-fragments": ["error", "element"],
         "no-restricted-syntax": [
             "error",
             {
-                "selector": "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier, ImportSpecifier)",
-                "message": "Please use import React from 'react' instead."
+                "selector": "ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportSpecifier)",
+                "message": "Please use `import * as React from 'react'` instead."
             },
             {
                 "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']",
                 "message": "Don't use React.FC"
             }
         ],
-        "jsx-a11y/no-autofocus": 0
+        "jsx-a11y/no-autofocus": 0,
+        "import/no-extraneous-dependencies": 0
     },
     "overrides": [
         {

.github/workflows/ci.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
       - name: Install Packages
         run: npm ci
@@ -38,7 +38,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
       - name: Install Packages
         run: npm ci
@@ -54,7 +54,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           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: 18
+          node-version: 20
       - name: Install Packages
         run: npm ci
         shell: bash

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

@@ -10,4 +10,4 @@ jobs:
     steps:
       - uses: gravity-ui/preview-build-action@v1
         with:
-          node-version: 18
+          node-version: 20

.github/workflows/release-beta.yml

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

.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: 18
+          node-version: 20

.nvmrc

@@ -1 +1 @@
-18
+20

.storybook/decorators/withLang.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {settings} from '@gravity-ui/date-utils';
 import {configure} from '@gravity-ui/uikit';

.storybook/decorators/withMobile.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {MobileProvider} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 

.storybook/decorators/withStrictMode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import type {Decorator} from '@storybook/react';
 

.storybook/decorators/withTheme.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ThemeProvider} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 

.storybook/main.ts

@@ -3,23 +3,29 @@
 const {join} = require('path');
 
 const config: StorybookConfig = {
-    framework: {
-        name: '@storybook/react-webpack5',
-        options: {},
-    },
-
+    framework: '@storybook/react-webpack5',
     stories: ['../src/**/*.stories.@(ts|tsx)'],
 
     addons: [
-        '@storybook/preset-scss',
+        {
+            name: '@storybook/addon-styling-webpack',
+            options: {
+                rules: [
+                    {
+                        test: /\.s?css$/i,
+                        use: ['style-loader', 'css-loader', 'sass-loader'],
+                    },
+                ],
+            },
+        },
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         './theme-addon/register.tsx',
-        '@storybook/addon-webpack5-compiler-babel',
         '@storybook/addon-a11y',
+        '@storybook/addon-webpack5-compiler-babel',
     ],
 
     webpackFinal: (storybookBaseConfig) => {
-        storybookBaseConfig?.module?.rules.push({
+        storybookBaseConfig?.module?.rules?.push({
             test: /\.md$/,
             include: [join(__dirname, '../src')],
             use: [{loader: 'markdown-loader'}],
@@ -27,7 +33,7 @@
 
         // to turn fileName in context.parameters into path form number in production bundle
         if (storybookBaseConfig?.optimization) {
             storybookBaseConfig.optimization.moduleIds = 'named';
         }
 
         return storybookBaseConfig;

.storybook/preview.tsx

@@ -10,14 +10,10 @@ import {withLang} from './decorators/withLang';
 import {withMobile} from './decorators/withMobile';
 import {withStrictMode} from './decorators/withStrictMode';
 import {withTheme} from './decorators/withTheme';
-import {Docs} from './docs';
 
 const preview: Preview = {
     decorators: [withLang, withMobile, withTheme, withStrictMode],
     parameters: {
-        docs: {
-            page: Docs,
-        },
         jsx: {showFunctions: true},
         viewport: {
             viewports: MINIMAL_VIEWPORTS,

.storybook/theme-addon/register.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {getThemeType} from '@gravity-ui/uikit';
 import {type API, addons, types, useGlobals} from '@storybook/manager-api';
@@ -22,6 +22,6 @@
     const [{theme}] = useGlobals();
     React.useEffect(() => {
         api.setOptions({theme: themes[getThemeType(theme)]});
     }, [theme]);
     return null;
 }

gulpfile.js

@@ -1,36 +1,64 @@
 /* eslint-env node */
 const path = require('path');
 
+const utils = require('@gravity-ui/gulp-utils');
 const {task, src, dest, series, parallel} = require('gulp');
-const sass = require('gulp-dart-sass');
-const replace = require('gulp-replace');
-const ts = require('gulp-typescript');
+const sass = require('gulp-sass')(require('sass'));
+const sourcemaps = require('gulp-sourcemaps');
 const {rimrafSync} = require('rimraf');
 
 const BUILD_DIR = path.resolve('build');
 
 task('clean', (done) => {
     rimrafSync(BUILD_DIR);
-    rimrafSync('styles/**/*.css');
+    rimrafSync('styles/**/*.css', {glob: true});
     done();
 });
 
-function compileTs(modules = false) {
-    const tsProject = ts.createProject('tsconfig.json', {
-        declaration: true,
-        module: modules ? 'esnext' : 'commonjs',
+async function compileTs(modules = false) {
+    const tsProject = await utils.createTypescriptProject({
+        compilerOptions: {
+            declaration: true,
+            module: modules ? 'esnext' : 'nodenext',
+            moduleResolution: modules ? 'bundler' : 'nodenext',
+            ...(modules ? undefined : {verbatimModuleSyntax: false}),
+        },
     });
 
-    return src([
-        'src/**/*.{ts,tsx}',
-        '!src/demo/**/*',
-        '!src/stories/**/*',
-        '!src/**/__stories__/**/*',
-        '!src/**/__tests__/**/*',
-    ])
-        .pipe(replace(/(import.+)\.scss/g, '$1.css'))
-        .pipe(tsProject())
-        .pipe(dest(path.resolve(BUILD_DIR, modules ? 'esm' : 'cjs')));
+    const transformers = [
+        tsProject.customTransformers.transformScssImports,
+        tsProject.customTransformers.transformLocalModules,
+    ];
+    return new Promise((resolve) => {
+        src([
+            'src/**/*.{ts,tsx}',
+            '!src/demo/**/*',
+            '!src/stories/**/*',
+            '!src/**/__stories__/**/*',
+            '!src/**/__tests__/**/*',
+            '!src/**/__mocks__/**/*',
+            '!src/**/*.test.{ts,tsx}',
+            '!src/**/__snapshots__/**/*',
+        ])
+            .pipe(sourcemaps.init())
+            .pipe(
+                tsProject({
+                    customTransformers: {
+                        before: transformers,
+                        afterDeclarations: transformers,
+                    },
+                }),
+            )
+            .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '../../src'}))
+            .pipe(
+                utils.addVirtualFile({
+                    fileName: 'package.json',
+                    text: JSON.stringify({type: modules ? 'module' : 'commonjs'}),
+                }),
+            )
+            .pipe(dest(path.resolve(BUILD_DIR, modules ? 'esm' : 'cjs')))
+            .on('end', resolve);
+    });
 }
 
 task('compile-to-esm', () => {
@@ -50,11 +78,11 @@ task('copy-i18n', () => {
 task('styles-components', () => {
     return src(['src/components/**/*.scss', '!src/components/**/__stories__/**/*'])
         .pipe(
-            sass({
-                includePaths: ['node_modules'],
+            sass.sync({loadPaths: ['node_modules']}).on('error', function (error) {
+                sass.logError.call(this, error);
+                process.exit(1);
             }),
         )
-        .pipe(sass().on('error', sass.logError))
         .pipe(dest(path.resolve(BUILD_DIR, 'esm', 'components')))
         .pipe(dest(path.resolve(BUILD_DIR, 'cjs', 'components')));
 });

jest.config.js

@@ -5,7 +5,6 @@ module.exports = {
     transform: {
         '\\.[jt]sx?$': ['ts-jest', {tsconfig: './tsconfig.test.json'}],
     },
-    transformIgnorePatterns: ['node_modules/(?!(@gravity-ui|tinygesture))'],
     coverageDirectory: './coverage',
     collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/__stories__/**/*', '!**/*/*.stories.{ts,tsx}'],
     testEnvironment: 'jsdom',