feat: up storybook to @8

Author: Lunory

.storybook/focus-addon/register.tsx

@@ -1,11 +1,13 @@
-import {addons, } from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 
 addons.register('initialFocus', () => {
     addons.getChannel().on('currentStoryWasSet', () => focusIframe());
-})
+});
 
 const focusIframe = () => {
-    const previewIframe: HTMLInputElement | null = document.querySelector('#storybook-preview-iframe');
+    const previewIframe: HTMLInputElement | null = document.querySelector(
+        '#storybook-preview-iframe',
+    );
 
     previewIframe?.focus?.();
-}
+};

.storybook/main.ts

@@ -3,6 +3,7 @@ import type {StorybookConfig} from '@storybook/react-webpack5';
 const config: StorybookConfig = {
     staticDirs: ['./assets'],
     stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+
     addons: [
         '@storybook/addon-links',
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
@@ -12,17 +13,24 @@ const config: StorybookConfig = {
         './theme-addon/register.tsx',
         './focus-addon/register.tsx',
         '@storybook/addon-a11y',
+        '@storybook/addon-webpack5-compiler-babel',
+        '@chromatic-com/storybook'
     ],
+
     framework: {
         name: '@storybook/react-webpack5',
         options: {}
     },
-    docs: {
-        autodocs: false,
-    },
+
+    docs: {},
+
     core: {
         disableTelemetry: true,
     },
+
+    typescript: {
+        reactDocgen: 'react-docgen-typescript'
+    }
 };
 
 export default config;

.storybook/manager.ts

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

.storybook/theme-addon/register.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {addons, types} from '@storybook/addons';
-import {useGlobals, type API} from '@storybook/api';
+import {addons, types} from '@storybook/manager-api';
+import {useGlobals, type API} from '@storybook/manager-api';
 import {getThemeType} from '@gravity-ui/uikit';
 import {themes} from '../theme';