chore: upgrade storybook to 10.1.10 (#905)

Author: makhnatkin

.storybook/addons/generateDocs.ts

@@ -1,5 +1,10 @@
 import * as fs from 'fs/promises';
 import * as path from 'path';
+import {fileURLToPath} from 'url';
+import {dirname} from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const inputDir = path.join(__dirname, '../../docs');
 const outputDir = path.join(__dirname, '../../demo/docs');
@@ -19,7 +24,7 @@ const getContent = (title: string, updatedContent: string): string => `
 This file is auto-generated. Any changes made to this file will be overwritten
 */}
 
-import { Meta, Markdown } from '@storybook/blocks';
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
 
 <Meta title="Docs / ${title}" />
 
@@ -95,7 +100,7 @@ const generateDocs = async (): Promise<void> => {
  */
 export default {
     name: 'generate-docs',
-    async managerEntries(entries: string[] = []): Promise<string[]> {
+    async previewAnnotations(entries: string[] = []): Promise<string[]> {
         try {
             await generateDocs();
         } catch (error) {

.storybook/main.ts

@@ -1,8 +1,15 @@
-import {resolve} from 'node:path';
+import {resolve, dirname} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {createRequire} from 'node:module';
 import webpack from 'webpack';
 import type {StorybookConfig} from '@storybook/react-webpack5';
-import pkg from '../package.json';
-import tsConfig from '../tsconfig.json';
+
+const require = createRequire(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const pkg = require('../package.json');
+const tsConfig = require('../tsconfig.json');
 
 const config: StorybookConfig = {
     framework: {
@@ -11,9 +18,8 @@ const config: StorybookConfig = {
     },
     stories: ['../demo/**/*.mdx', '../demo/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: [
-        './addons/generateDocs',
+        './addons/generateDocs.ts',
         '@storybook/preset-scss',
-        {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         '@storybook/addon-webpack5-compiler-babel',
         '@storybook/addon-docs',
     ],
@@ -26,16 +32,29 @@ const config: StorybookConfig = {
             new webpack.DefinePlugin({
                 __VERSION__: `'${pkg.version}-storybook'`,
             }),
+            new webpack.ProvidePlugin({
+                process: 'process/browser',
+            }),
         );
 
         config.resolve ||= {};
         config.resolve.alias ||= {};
+        config.resolve.fallback ||= {};
+
+        // Node.js polyfills for browser
+        config.resolve.fallback = {
+            ...config.resolve.fallback,
+            fs: false,
+            path: require.resolve('path-browserify'),
+            url: require.resolve('url/'),
+            process: require.resolve('process/browser'),
+        };
 
         const baseUrl = resolve(__dirname, '..', tsConfig.compilerOptions.baseUrl);
         const paths = tsConfig.compilerOptions.paths;
 
         for (const alias in paths) {
-            config.resolve.alias[alias] = resolve(baseUrl, paths[alias][0])
+            config.resolve.alias[alias] = resolve(baseUrl, paths[alias][0]);
         }
 
         config.resolve.alias['demo/*'] = resolve(__dirname, '..', 'demo/*');

.storybook/manager.ts

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

.storybook/preview.ts

@@ -1,5 +1,5 @@
-import type {Preview} from '@storybook/react';
-import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
+import type {Preview} from '@storybook/react-webpack5';
+import {MINIMAL_VIEWPORTS} from 'storybook/viewport';
 import {withThemeProvider} from '../demo/hocs/withThemeProvider';
 import {withLang} from '../demo/hocs/withLang';
 import {withToaster} from '../demo/hocs/withToaster';
@@ -9,7 +9,7 @@ const preview: Preview = {
     parameters: {
         jsx: {showFunctions: true}, // To show functions in sources
         viewport: {
-            viewports: MINIMAL_VIEWPORTS,
+            options: MINIMAL_VIEWPORTS,
         },
         options: {
             storySort: {

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import {create} from '@storybook/theming';
+import {create} from 'storybook/theming';
 
 export const ThemeLight = create({
     base: 'light',