chore: update storybook up to v8 (#180)

.storybook/main.ts

@@ -5,13 +5,16 @@ const {join} = require('path');
 const config: StorybookConfig = {
     framework: {
         name: '@storybook/react-webpack5',
-        options: {fastRefresh: true},
+        options: {},
     },
+
     stories: ['../src/**/*.stories.@(ts|tsx)'],
+
     addons: [
         '@storybook/preset-scss',
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         './theme-addon/register.tsx',
+        '@storybook/addon-webpack5-compiler-babel',
     ],
 
     webpackFinal: (storybookBaseConfig) => {

.storybook/manager.ts

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

.storybook/theme-addon/register.tsx

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

package.json

@@ -33,8 +33,8 @@
     "typecheck": "tsc --noEmit",
     "clean": "gulp clean",
     "build": "gulp",
-    "start": "sb dev",
-    "build-storybook": "sb build -c .storybook -o storybook-static",
+    "start": "storybook dev",
+    "build-storybook": "storybook build -c .storybook -o storybook-static",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
@@ -58,18 +58,17 @@
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^6.3.0",
-    "@storybook/addon-actions": "^7.6.12",
-    "@storybook/addon-docs": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-viewport": "7.6.12",
-    "@storybook/addons": "^7.6.12",
-    "@storybook/api": "^7.6.12",
-    "@storybook/cli": "^7.6.12",
-    "@storybook/client-api": "^7.6.12",
+    "@storybook/addon-actions": "^8.0.6",
+    "@storybook/addon-docs": "^8.0.6",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-viewport": "^8.0.6",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/cli": "^8.0.6",
+    "@storybook/manager-api": "^8.0.6",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-webpack5": "^7.6.12",
-    "@storybook/theming": "^7.6.12",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-webpack5": "^8.0.6",
+    "@storybook/theming": "^8.0.6",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.1",
     "@testing-library/react": "^14.2.0",
@@ -97,6 +96,7 @@
     "rimraf": "^5.0.5",
     "sass": "^1.70.0",
     "sass-loader": "^14.1.0",
+    "storybook": "^8.0.6",
     "stylelint": "^15.11.0",
     "stylelint-use-logical": "^2.1.0",
     "ts-jest": "^29.1.2",

src/components/ActionsPanel/__stories__/ActionsPanel.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 
 import {ActionsPanel, ActionsPanelProps} from '../../ActionsPanel';
 
@@ -11,7 +11,7 @@ export default {
     component: ActionsPanel,
 } as Meta;
 
-const WithIconsTemplate: Story<ActionsPanelProps> = (args) => {
+const WithIconsTemplate: StoryFn<ActionsPanelProps> = (args) => {
     return (
         <ActionsPanel
             {...args}
@@ -22,7 +22,7 @@ const WithIconsTemplate: Story<ActionsPanelProps> = (args) => {
 };
 export const WithIcons = WithIconsTemplate.bind({});
 
-const WithNoteTemplate: Story<ActionsPanelProps> = (args) => {
+const WithNoteTemplate: StoryFn<ActionsPanelProps> = (args) => {
     return (
         <ActionsPanel
             {...args}
@@ -34,12 +34,12 @@ const WithNoteTemplate: Story<ActionsPanelProps> = (args) => {
 };
 export const WithNote = WithNoteTemplate.bind({});
 
-const GroupsTemplate: Story<ActionsPanelProps> = (args) => {
+const GroupsTemplate: StoryFn<ActionsPanelProps> = (args) => {
     return <ActionsPanel {...args} actions={actionsGroups} />;
 };
 export const Groups = GroupsTemplate.bind({});
 
-const SubmenuTemplate: Story<ActionsPanelProps> = (args) => {
+const SubmenuTemplate: StoryFn<ActionsPanelProps> = (args) => {
     return <ActionsPanel {...args} actions={actionsSubmenu} />;
 };
 export const Submenu = SubmenuTemplate.bind({});

src/components/AdaptiveTabs/__stories__/AdaptiveTabs.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 
 import {AdaptiveTabs, AdaptiveTabsProps} from '../AdaptiveTabs';
 
@@ -17,7 +17,7 @@ export default {
         },
     },
 } as Meta;
-const Template: Story<{size: 'm' | 'l' | 'xl'} & AdaptiveTabs<{}>> = (args) => {
+const Template: StoryFn<{size: 'm' | 'l' | 'xl'} & AdaptiveTabs<{}>> = (args) => {
     const [activeTab, setActiveTab] = React.useState('active');
     const items: AdaptiveTabsProps<{}>['items'] = React.useMemo(
         () => [
@@ -59,7 +59,7 @@ const Template: Story<{size: 'm' | 'l' | 'xl'} & AdaptiveTabs<{}>> = (args) => {
 };
 export const Default = Template.bind({});
 
-const WrapTemplate: Story<AdaptiveTabsProps<{}>> = (args) => {
+const WrapTemplate: StoryFn<AdaptiveTabsProps<{}>> = (args) => {
     const [activeTab, setActiveTab] = React.useState('active');
     const items: AdaptiveTabsProps<{}>['items'] = React.useMemo(
         () => [
@@ -109,7 +109,7 @@ const WrapTemplate: Story<AdaptiveTabsProps<{}>> = (args) => {
 };
 export const Wrap = WrapTemplate.bind({});
 
-const CustomTabTemplate: Story<AdaptiveTabsProps<{}>> = (args) => {
+const CustomTabTemplate: StoryFn<AdaptiveTabsProps<{}>> = (args) => {
     const [activeTab, setActiveTab] = React.useState('active');
     return (
         <div style={{resize: 'horizontal', overflow: 'auto'}}>

src/components/InfiniteScroll/__stories__/InfiniteScroll.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {Meta, Story} from '@storybook/react';
+import type {Meta, StoryFn} from '@storybook/react';
 
 import {InfiniteScroll} from '../InfiniteScroll';
 
@@ -11,5 +11,5 @@ export default {
     component: InfiniteScroll,
 } as Meta;
 
-export const Playground: Story = () => <InfiniteScrollShowcase />;
+export const Playground: StoryFn = () => <InfiniteScrollShowcase />;
 Playground.storyName = 'InfiniteScroll';

src/components/ItemSelector/__stories__/ItemSelector.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {useArgs} from '@storybook/client-api';
-import {Meta, Story} from '@storybook/react';
+import {useArgs} from '@storybook/manager-api';
+import {Meta, StoryFn} from '@storybook/react';
 
 import {ItemSelector, ItemSelectorProps} from '../ItemSelector';
 
@@ -56,7 +56,7 @@ export default {
     },
 } as Meta;
 
-const DefaultTemplate: Story<ItemSelectorProps<{name: string; type: string}>> = (args) => {
+const DefaultTemplate: StoryFn<ItemSelectorProps<{name: string; type: string}>> = (args) => {
     const [, setStoryArgs] = useArgs();
     return (
         <ItemSelector

src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {GraduationCap} from '@gravity-ui/icons';
 import {Button} from '@gravity-ui/uikit';
 import {actions} from '@storybook/addon-actions';
-import type {Meta, Story} from '@storybook/react';
+import type {Meta, StoryFn} from '@storybook/react';
 
 import type {OnboardingMenuProps} from '../OnboardingMenu';
 import {OnboardingMenu} from '../OnboardingMenu';
@@ -16,7 +16,7 @@ export default {
 const actionsButtonHandlers = () => actions('onClick').onClick('Click on the button');
 const actionsButtonComplete = () => actions('onClick').onClick('Click on the end button');
 
-const DefaultTemplate: Story<OnboardingMenuProps> = (args) => {
+const DefaultTemplate: StoryFn<OnboardingMenuProps> = (args) => {
     const [expanded, setExpanded] = React.useState(false);
 
     const actionsOnboardingMenuHandlers = (expanded: boolean) => {

src/components/PlaceholderContainer/__stories__/PlaceholderContainer.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 
 import {PlaceholderContainer} from '../PlaceholderContainer';
 
@@ -11,5 +11,5 @@ export default {
     component: PlaceholderContainer,
 } as Meta;
 
-const ShowcaseTemplate: Story = () => <PlaceholderContainerShowcase />;
+const ShowcaseTemplate: StoryFn = () => <PlaceholderContainerShowcase />;
 export const Showcase = ShowcaseTemplate.bind({});

src/components/SharePopover/__stories__/SharePopover.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {ComponentMeta, ComponentStory} from '@storybook/react';
+import type {Meta, StoryFn} from '@storybook/react';
 
 import {SharePopover, sharePopoverDefaultProps} from '../SharePopover';
 
@@ -18,12 +18,12 @@ export default {
         },
     },
     args: {...sharePopoverDefaultProps},
-} as ComponentMeta<typeof SharePopover>;
+} as Meta<typeof SharePopover>;
 
-const DefaultTemplate: ComponentStory<typeof SharePopover> = (args) => <SharePopover {...args} />;
+const DefaultTemplate: StoryFn<typeof SharePopover> = (args) => <SharePopover {...args} />;
 export const Default = DefaultTemplate.bind({});
 
-const ShowcaseTemplate: ComponentStory<typeof SharePopover & typeof SharePopoverDemo> = () => (
+const ShowcaseTemplate: StoryFn<typeof SharePopover & typeof SharePopoverDemo> = () => (
     <SharePopoverDemo />
 );
 export const Showcase = ShowcaseTemplate.bind({});

src/components/StoreBadge/__stories__/StoreBadge.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Platform} from '@gravity-ui/uikit';
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 
 import {StoreBadge, StoreBadgeProps} from '../StoreBadge';
 
@@ -13,11 +13,11 @@ export default {
     },
 } as Meta;
 
-const Template: Story<StoreBadgeProps> = (args) => <StoreBadge {...args} />;
+const Template: StoryFn<StoreBadgeProps> = (args) => <StoreBadge {...args} />;
 
 export const Default = Template.bind({});
 
-const WithHrefTemplate: Story<StoreBadgeProps> = (args) => (
+const WithHrefTemplate: StoryFn<StoreBadgeProps> = (args) => (
     <StoreBadge {...args} href="https://github.com/gravity-ui/uikit" />
 );