chore: update dependencies, fix build

.storybook/main.ts

@@ -1,14 +1,42 @@
 import type {StorybookConfig} from '@storybook/react-webpack5';
+import * as sass from 'sass';
 
 const config: StorybookConfig = {
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
     addons: [
-        '@storybook/preset-scss',
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         '@storybook/addon-a11y',
         './theme-addon/register.tsx',
         '@storybook/addon-webpack5-compiler-babel',
         '@storybook/addon-storysource',
+        '@storybook/addon-styling-webpack',
+        {
+            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},
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
     ],
     framework: '@storybook/react-webpack5',
     typescript: {

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/order
-import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/uikit/styles/styles.css';
 
 import React from 'react';
 

gulpfile.mjs

@@ -0,0 +1,90 @@
+import path from 'node:path';
+
+import {addVirtualFile, createTypescriptProject} from '@gravity-ui/gulp-utils';
+import {dest, parallel, series, src, task} from 'gulp';
+import gulpSass from 'gulp-sass';
+import sourcemaps from 'gulp-sourcemaps';
+import * as rimraf from 'rimraf';
+import * as sass from 'sass';
+
+const BUILD_DIR = path.resolve('dist');
+const sassLoader = gulpSass(sass);
+
+task('clean', (done) => {
+    rimraf.sync(BUILD_DIR);
+    done();
+});
+
+async function compileTs(modules = false) {
+    const tsProject = await createTypescriptProject({
+        compilerOptions: {
+            declaration: true,
+            ...(modules ? undefined : {verbatimModuleSyntax: false}),
+            module: modules ? 'esnext' : 'NodeNext',
+            moduleResolution: modules ? 'bundler' : 'NodeNext',
+        },
+    });
+
+    const transformers = [
+        tsProject.customTransformers.transformScssImports,
+        tsProject.customTransformers.transformLocalModules,
+    ];
+
+    return new Promise((resolve) => {
+        src([
+            'src/**/*.{ts,tsx}',
+            '!src/demo/**/*',
+            '!src/**/__stories__/**/*',
+            '!src/**/__tests__/**/*',
+            '!src/**/*.test.{ts,tsx}',
+        ])
+            .pipe(sourcemaps.init())
+            .pipe(
+                tsProject({
+                    customTransformers: {
+                        before: transformers,
+                        afterDeclarations: transformers,
+                    },
+                }),
+            )
+            .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '../../src'}))
+            .pipe(
+                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', () => {
+    return compileTs(true);
+});
+
+task('compile-to-cjs', () => {
+    return compileTs();
+});
+
+task('copy-i18n', () => {
+    return src(['src/**/i18n/*.json'])
+        .pipe(dest(path.resolve(BUILD_DIR, 'esm')))
+        .pipe(dest(path.resolve(BUILD_DIR, 'cjs')));
+});
+
+task('styles', () => {
+    return src(['src/**/*.scss', '!src/demo/**/*', '!src/**/__stories__/**/*'])
+        .pipe(sourcemaps.init())
+        .pipe(sassLoader({loadPaths: ['./node_modules/']}).on('error', sassLoader.logError))
+        .pipe(sourcemaps.write('.'))
+        .pipe(dest(path.resolve(BUILD_DIR, 'esm')))
+        .pipe(dest(path.resolve(BUILD_DIR, 'cjs')));
+});
+
+task(
+    'build',
+    series(['clean', parallel(['compile-to-esm', 'compile-to-cjs']), 'copy-i18n', 'styles']),
+);
+
+task('default', series(['build']));

jest.config.ts → jest.config.js

@@ -1,6 +1,5 @@
-import type {Config} from 'jest';
-
-const config: Config = {
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+const config = {
     verbose: true,
     moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
     rootDir: '.',