feat(infra): update storybook up to 10

Author: shuga2704

package-lock.json

@@ -97,11 +97,15 @@
     "@cypress/react": "5.12.0",
     "@cypress/webpack-dev-server": "2.4.1",
     "@cypress/webpack-preprocessor": "5.9.1",
+    "@linaria/vite": "5.0.4",
     "@salutejs/eslint-config": "1.2.0",
     "@salutejs/eslint-config-base": "0.4.0",
     "@salutejs/perftool": "0.29.0",
     "@salutejs/prettier-config": "0.3.0",
     "@simonsmith/cypress-image-snapshot": "10.0.2",
+    "@storybook/addon-docs": "10.1.0",
+    "@storybook/react": "10.1.0",
+    "@storybook/react-vite": "10.1.0",
     "@swc/cli": "0.7.7",
     "@swc/core": "1.12.1",
     "@swc/plugin-emotion": "10.0.0",
@@ -114,6 +118,7 @@
     "@types/react-native": "0.69.6",
     "@typescript-eslint/eslint-plugin": "5.48.2",
     "@typescript-eslint/parser": "5.48.2",
+    "@vitejs/plugin-react": "3.1.0",
     "auto": "11.1.1",
     "axe-core": "4.3.4",
     "babel-eslint": "10.1.0",
@@ -143,6 +148,7 @@
     "eslint-plugin-prettier": "3.1.3",
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "3.0.0",
+    "eslint-plugin-storybook": "10.1.0",
     "fast-glob": "3.2.12",
     "file-loader": "6.2.0",
     "fs-extra": "10.0.0",
@@ -160,6 +166,7 @@
     "required-path": "1.0.1",
     "semver": "7.3.7",
     "simple-scaffold": "2.2.0",
+    "storybook": "10.1.0",
     "style-loader": "4.0.0",
     "stylelint": "13.3.3",
     "stylelint-config-recommended": "3.0.0",
@@ -171,6 +178,7 @@
     "ts-loader": "9.2.3",
     "typescript": "5.6.3",
     "url-loader": "4.1.1",
+    "vite": "5.4.21",
     "webpack": "5.76.0",
     "webpack-dev-server": "3.11.2"
   },

package.json

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="About" />
 
@@ -25,7 +25,7 @@ import { Meta } from "@storybook/addon-docs";
 ```bash
 $ npm install --save react react-dom
 $ npm install --save styled-components
-$ npm install --save @salutejs/plasma-asdk @salutejs/plasma-typo 
+$ npm install --save @salutejs/plasma-asdk @salutejs/plasma-typo
 ```
 
 ## Настройка
@@ -67,7 +67,7 @@ import { tokens } from '@salutejs/plasma-asdk/tokens';
 export const App = () => {
     return (
         <Button>Hello, Plasma!</Button>
-    
+
         <p style={{color: tokens.textAccentAthena}}>
             Token usage example
         </p>

packages/plasma-asdk/README.mdx

@@ -1,11 +1,11 @@
 import { mergeConfig } from 'vite';
 import type { StorybookConfig } from '@storybook/react-vite';
-import * as path from 'node:path';
+import path from 'path';
 
 const config: StorybookConfig = {
     staticDirs: ['public'],
     stories: ['../src/**/*.stories.tsx', '../README.mdx'],
-    addons: ['@storybook/addon-essentials'],
+    addons: ['@storybook/addon-docs'],
     framework: {
         name: '@storybook/react-vite',
         options: {},
@@ -14,7 +14,6 @@ const config: StorybookConfig = {
         disableTelemetry: true,
     },
     docs: {
-        autodocs: false,
         defaultName: 'Docs',
     },
     typescript: {
@@ -33,6 +32,20 @@ const config: StorybookConfig = {
             build: {
                 sourcemap: false,
             },
+            plugins: [
+                /* Plugin that fixes a bug in Storybook@10 - https://github.com/storybookjs/storybook/issues/21716 */
+                {
+                    name: 'fix-mdx-react-shim',
+                    enforce: 'pre',
+                    resolveId(source) {
+                        if (source.startsWith('file://') && source.includes('mdx-react-shim.js')) {
+                            // Convert file:///... path to normal filesystem path for Vite
+                            return new URL(source).pathname;
+                        }
+                        return null;
+                    },
+                },
+            ],
         });
     },
 };

packages/plasma-b2c/.storybook/main.ts

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

packages/plasma-b2c/.storybook/manager.js

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 import { withTheme, DEFAULT_MODE, ON_DARK_MODE, ON_LIGHT_MODE } from './decoratorThemes';
 import { withToast } from './decoratorToast';
 import { withReactStrictMode, reactStrictModePreviewOption } from '@salutejs/plasma-sb-utils';
@@ -13,38 +13,40 @@ const preview: Preview = {
     globalTypes: {
         theme: {
             description: 'Global theme for components',
-            defaultValue: 'dark',
             toolbar: {
                 title: 'Theme',
                 items: ['light', 'dark'],
             },
         },
         typoVersion: {
             description: 'Global typography version for components',
-            defaultValue: 'standard',
             toolbar: {
                 title: 'Typography version',
                 items: ['standard', 'old'],
             },
         },
         breakWord: {
             description: 'Break word for typography',
-            defaultValue: 'yes',
             toolbar: {
                 title: 'Break word',
                 items: ['yes', 'no'],
             },
         },
         viewContainer: {
             description: 'ViewContainer mode for components',
-            defaultValue: DEFAULT_MODE,
             toolbar: {
                 title: 'ViewContainer',
                 items: [DEFAULT_MODE, ON_DARK_MODE, ON_LIGHT_MODE],
             },
         },
         ...reactStrictModePreviewOption,
     },
+    initialGlobals: {
+        theme: 'dark',
+        typoVersion: 'standard',
+        breakWord: 'yes',
+        viewContainer: DEFAULT_MODE,
+    },
     parameters: {
         options: {
             storySort: {
@@ -56,7 +58,7 @@ const preview: Preview = {
             source: { type: 'code' },
         },
         viewport: {
-            viewports: {
+            options: {
                 '375': {
                     name: '375x812',
                     styles: {

packages/plasma-b2c/.storybook/preview.ts

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