feat!: prepare v4 release (deps + removals)

.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 @@ import type {StorybookConfig} from '@storybook/react-webpack5';
 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'}],

.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';

gulpfile.js

@@ -2,23 +2,25 @@
 const path = require('path');
 
 const {task, src, dest, series, parallel} = require('gulp');
-const sass = require('gulp-dart-sass');
 const replace = require('gulp-replace');
+const sass = require('gulp-sass')(require('sass'));
 const ts = require('gulp-typescript');
 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',
+        module: modules ? 'esnext' : 'nodenext',
+        moduleResolution: modules ? 'bundler' : 'nodenext',
+        ...(modules ? undefined : {verbatimModuleSyntax: false}),
     });
 
     return src([
@@ -27,6 +29,9 @@ function compileTs(modules = false) {
         '!src/stories/**/*',
         '!src/**/__stories__/**/*',
         '!src/**/__tests__/**/*',
+        '!src/**/__mocks__/**/*',
+        '!src/**/*.test.{ts,tsx}',
+        '!src/**/__snapshots__/**/*',
     ])
         .pipe(replace(/(import.+)\.scss/g, '$1.css'))
         .pipe(tsProject())
@@ -50,11 +55,11 @@ task('copy-i18n', () => {
 task('styles-components', () => {
     return src(['src/components/**/*.scss', '!src/components/**/__stories__/**/*'])
         .pipe(
-            sass({
-                includePaths: ['node_modules'],
+            sass.sync({includePaths: ['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')));
 });