chore: update storybook v8 (#1480)

gravity-ui · Apr 3, 2024 · 0152182 · 0152182
1 parent 68243be
commit 0152182
Show file tree

Hide file tree

Showing 8 changed files with 15,409 additions and 16,927 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -3,7 +3,7 @@ import type {StorybookConfig} from '@storybook/react-webpack5';
 const config: StorybookConfig = {
     framework: {
         name: '@storybook/react-webpack5',
-        options: {fastRefresh: true},
+        options: {},
     },
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
     docs: {
@@ -14,6 +14,7 @@ const config: StorybookConfig = {
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         './theme-addon/register.tsx',
         '@storybook/addon-a11y',
+        '@storybook/addon-webpack5-compiler-babel',
     ],
 };
 

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

diff --git a/.storybook/theme-addon/register.tsx b/.storybook/theme-addon/register.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import {addons, types} from '@storybook/addons';
-import {useGlobals} from '@storybook/api';
-import type {API} from '@storybook/api';
+import type {API} from '@storybook/manager-api';
+import {addons, types, useGlobals} from '@storybook/manager-api';
 
 import {getThemeType} from '../../src/components/theme/getThemeType';
 import {themes} from '../theme';

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,8 +73,8 @@
         "test:watch": "jest --watchAll",
         "clean": "gulp clean",
         "build": "gulp",
-        "start": "sb dev -p 7007",
-        "build-storybook": "sb build -c .storybook -o storybook-static",
+        "start": "storybook dev -p 7007",
+        "build-storybook": "storybook build -c .storybook -o storybook-static",
         "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
         "lint:js:fix": "npm run lint:js -- --fix",
         "lint:styles": "cross-env stylelint '{styles,src}/**/*.scss'",
@@ -122,12 +122,15 @@
         "@gravity-ui/tsconfig": "^1.0.0",
         "@playwright/experimental-ct-react": "^1.42.1",
         "@playwright/test": "^1.42.1",
-        "@storybook/addon-a11y": "^7.6.13",
-        "@storybook/addon-essentials": "^7.6.10",
-        "@storybook/cli": "^7.6.10",
+        "@storybook/addon-a11y": "^8.0.5",
+        "@storybook/addon-essentials": "^8.0.5",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+        "@storybook/cli": "^8.0.5",
+        "@storybook/manager-api": "^8.0.5",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react-webpack5": "^7.6.10",
-        "@storybook/test-runner": "^0.16.0",
+        "@storybook/preview-api": "^8.0.5",
+        "@storybook/react-webpack5": "^8.0.5",
+        "@storybook/test-runner": "^0.17.0",
         "@testing-library/jest-dom": "^6.3.0",
         "@testing-library/react": "^14.1.2",
         "@testing-library/user-event": "^14.5.2",
@@ -167,6 +170,7 @@
         "rimraf": "^5.0.5",
         "sass": "^1.70.0",
         "sass-loader": "^14.0.0",
+        "storybook": "^8.0.5",
         "stylelint": "^15.11.0",
         "stylelint-use-logical": "^2.1.0",
         "ts-jest": "^29.1.2",

diff --git a/src/components/List/__stories__/List.stories.tsx b/src/components/List/__stories__/List.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 {List, listDefaultProps} from '..';
 import type {ListProps} from '..';
@@ -48,18 +48,18 @@ export default {
             },
         },
     },
-} as ComponentMeta<ComponentType>;
+} as Meta<ComponentType>;
 
 const items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
 
-const DefaultTemplate: ComponentStory<ComponentType> = (args) => <List {...args} />;
+const DefaultTemplate: StoryFn<ComponentType> = (args) => <List {...args} />;
 export const Default = DefaultTemplate.bind({});
 Default.args = {
     items,
     itemsHeight: 150,
 };
 
-const SortableTemplate: ComponentStory<ComponentType> = (args) => <List {...args} />;
+const SortableTemplate: StoryFn<ComponentType> = (args) => <List {...args} />;
 export const Sortable = SortableTemplate.bind({});
 Sortable.args = {
     items,
@@ -72,14 +72,14 @@ Sortable.parameters = {
     disableStrictMode: true,
 };
 
-const RenderItemTemplate: ComponentStory<ComponentType> = (args) => <List {...args} />;
+const RenderItemTemplate: StoryFn<ComponentType> = (args) => <List {...args} />;
 export const RenderItem = RenderItemTemplate.bind({});
 RenderItem.args = {
     items,
     renderItem: (item) => `🔥🔥🔥 ${item} 🔥🔥🔥`,
 };
 
-const TemplateWithState: ComponentStory<ComponentType> = (args) => <ListWithLoader {...args} />;
+const TemplateWithState: StoryFn<ComponentType> = (args) => <ListWithLoader {...args} />;
 
 export const WithLoadingMoreItems = TemplateWithState.bind({});
 WithLoadingMoreItems.args = {
@@ -90,7 +90,7 @@ WithLoadingMoreItems.args = {
     virtualized: false,
 };
 
-const ShowcaseTemplate: ComponentStory<ComponentType> = () => <ListShowcase />;
+const ShowcaseTemplate: StoryFn<ComponentType> = () => <ListShowcase />;
 export const Showcase = ShowcaseTemplate.bind({});
 Showcase.parameters = {
     // Strict mode ruins sortable list due to this react-beautiful-dnd issue

diff --git a/src/components/Pagination/__stories__/Pagination.stories.tsx b/src/components/Pagination/__stories__/Pagination.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 {Pagination} from '../../Pagination';
 import type {PaginationProps} from '../../Pagination';
@@ -23,7 +23,7 @@ export default {
     component: Pagination,
 } as Meta;
 
-const Template: Story<PaginationProps> = (args) => {
+const Template: StoryFn<PaginationProps> = (args) => {
     const state = useState(args);
     return <Pagination {...state} />;
 };
@@ -38,7 +38,7 @@ Default.args = {
     compact: false,
 };
 
-const TotalUnknownTemplate: Story<PaginationProps> = (args) => {
+const TotalUnknownTemplate: StoryFn<PaginationProps> = (args) => {
     const state = useState(args);
     return <Pagination {...state} />;
 };
@@ -52,7 +52,7 @@ TotalUnknown.args = {
     compact: false,
 };
 
-const CompactTemplate: Story<PaginationProps> = (args) => {
+const CompactTemplate: StoryFn<PaginationProps> = (args) => {
     const state = useState(args);
     return <Pagination {...state} />;
 };
@@ -66,7 +66,7 @@ Compact.args = {
     compact: true,
 };
 
-const HidePagesTemplate: Story<PaginationProps> = (args) => {
+const HidePagesTemplate: StoryFn<PaginationProps> = (args) => {
     const state1 = useState({
         ...args,
         page: 1,
@@ -98,7 +98,7 @@ const HidePagesTemplate: Story<PaginationProps> = (args) => {
 
 export const HidePages = HidePagesTemplate.bind({});
 
-const PagesSetTemplate: Story<PaginationProps> = (args) => {
+const PagesSetTemplate: StoryFn<PaginationProps> = (args) => {
     const state1 = useState({...args, page: 1, pageSize: 1, total: 1});
     const state2 = useState({...args, page: 1, pageSize: 1, total: 2});
     const state3 = useState({...args, page: 1, pageSize: 1, total: 3});

diff --git a/src/components/Tabs/__stories__/Tabs.stories.tsx b/src/components/Tabs/__stories__/Tabs.stories.tsx
@@ -1,46 +1,26 @@
 import React from 'react';
 
 import {useArgs} from '@storybook/preview-api';
-import type {ComponentMeta, StoryFn} from '@storybook/react';
+import type {Meta, StoryFn} from '@storybook/react';
 
-import {Tabs} from '../Tabs';
+import {Tabs, TabsDirection} from '../Tabs';
 import type {TabsItemProps, TabsProps} from '../Tabs';
 
 import {getTabsMock} from './getTabsMock';
 import type {StoryParams} from './types';
 
-export default {
+const meta: Meta<typeof Tabs> = {
     title: 'Components/Navigation/Tabs',
     component: Tabs,
     args: {
-        direction: 'horizontal',
+        direction: TabsDirection.Horizontal,
         activeTab: 'active',
     },
     argTypes: {
         activeTab: {
             control: {type: 'select'},
             options: getTabsMock({})?.map(({id}) => id),
         },
-        withIcon: {
-            name: 'Icons',
-            type: 'boolean',
-            default: false,
-        },
-        withCounter: {
-            name: 'Counters',
-            type: 'boolean',
-            default: false,
-        },
-        withLabel: {
-            name: 'Labels',
-            type: 'boolean',
-            default: false,
-        },
-        withOverflow: {
-            name: 'Overflow',
-            type: 'boolean',
-            default: false,
-        },
     },
     parameters: {
         a11y: {
@@ -65,7 +45,9 @@ export default {
             },
         },
     },
-} as ComponentMeta<typeof Tabs>;
+};
+
+export default meta;
 
 const Template: StoryFn<TabsProps & StoryParams> = ({
     withIcon,