storybook を v6 から v7 へアップグレードする際にやることをメモ

対応方法

`import { Story } from '@storybook/react/types-6-0'` は `depricated` となり、
`import type { Meta, StoryObj } from '@storybook/react'` を使用していく。

Step1: `Meta` 型を使う

Before

export default {
	title: 'components/Hoge',
	component: Hoge,
};

After

const meta: Meta<typeof THoge> = {
	title: 'components/Hoge',
	component: Hoge,
};
export default meta;

Step2: `StoryObj ` 型を使う

Before

const Template: Story<THoge> = (args) => <Hoge  {...args}/>;

export const Normal = Template.bind({});
Normal.args = defaultProps;

After

export const Normal: StoryObj<typeof Hoge> = {
	args: defaultProps,
	render: (args) => <Hoge  {...args}/>,
};

参照

Migration guide for Storybook 7.0

この記事が気に入ったらサポートをしてみませんか?