chore: update storybook (#244)

Author: ValeraS

.storybook/main.ts

@@ -1,12 +1,12 @@
-import type {StorybookConfig} from '@storybook/react-webpack5';
+import {defineMain} from '@storybook/react-webpack5/node';
 import * as sass from 'sass';
 
-const config: StorybookConfig = {
+export default defineMain({
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
     addons: [
         '@storybook/addon-docs',
         '@storybook/addon-a11y',
-        './theme-addon/register.tsx',
+        import.meta.resolve('./theme-addon/theme-preset.ts'),
         '@storybook/addon-webpack5-compiler-babel',
         {
             name: '@storybook/addon-styling-webpack',
@@ -59,6 +59,4 @@ const config: StorybookConfig = {
             ['@babel/preset-react', {runtime: 'automatic'}],
         ],
     },
-};
-
-export default config;
+});

.storybook/preview.tsx

@@ -8,7 +8,9 @@ import React from 'react';
 import {settings} from '@gravity-ui/date-utils';
 import {MobileProvider, ThemeProvider, ToasterComponent, ToasterProvider} from '@gravity-ui/uikit';
 import {toaster} from '@gravity-ui/uikit/toaster-singleton';
-import type {Decorator, Preview} from '@storybook/react-webpack5';
+import addonDocs from '@storybook/addon-docs';
+import type {Decorator} from '@storybook/react-webpack5';
+import {definePreview} from '@storybook/react-webpack5';
 import {MINIMAL_VIEWPORTS} from 'storybook/viewport';
 
 import {DocsDecorator} from '../src/demo/DocsDecorator/DocsDecorator';
@@ -36,7 +38,8 @@ const WithContextProvider: Decorator = (Story, context) => {
     );
 };
 
-const preview: Preview = {
+export default definePreview({
+    addons: [addonDocs()],
     parameters: {
         docs: {
             theme: themes.light,
@@ -45,7 +48,7 @@ const preview: Preview = {
         },
         jsx: {showFunctions: false}, // Do not show functions in sources
         viewport: {
-            viewports: MINIMAL_VIEWPORTS,
+            options: MINIMAL_VIEWPORTS,
         },
         options: {
             storySort: {
@@ -107,6 +110,4 @@ const preview: Preview = {
         direction: 'ltr',
         platform: 'desktop',
     },
-};
-
-export default preview;
+});

.storybook/theme-addon/register.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {addons, types, useGlobals} from 'storybook/manager-api';
+
+import {themes} from '../theme.js';
+
+const ADDON_ID = 'gravity-theme-addon';
+const TOOL_ID = `${ADDON_ID}tool`;
+
+addons.register(ADDON_ID, (api) => {
+    addons.add(TOOL_ID, {
+        type: types.TOOL,
+        title: 'Theme',
+        render: function Tool() {
+            const [{theme = 'light'}] = useGlobals();
+
+            React.useEffect(() => {
+                api.setOptions({theme: themes[theme.includes('dark') ? 'dark' : 'light']});
+            }, [theme]);
+
+            return null;
+        },
+    });
+});

.storybook/theme-addon/register.tsx

@@ -0,0 +1,5 @@
+import {fileURLToPath} from 'node:url';
+
+export function managerEntries(entry = []) {
+    return [...entry, fileURLToPath(import.meta.resolve('./register.js'))];
+}

.storybook/theme-addon/theme-preset.ts

@@ -1,7 +1,7 @@
 import {create} from 'storybook/theming';
 import type {ThemeVarsPartial} from 'storybook/theming';
 
-import pkg from '../package.json';
+import pkg from '../package.json' with {type: 'json'};
 
 function renderBrandTitle(theme: 'light' | 'dark') {
     const titleColor = theme === 'light' ? 'rgba(0, 0, 0, 0.85)' : 'rgba(255, 255, 255, 0.85)';