📚

Storybook7.0のCSF3.0の書き方はこれだけ(TypeScript)

2022/12/23に公開

React

Storybook

TypeScript

tech

超ざっくり書く.

CSF3.0で書き方が変わるらしい.
TypeScriptでは,こうなる.

import type { Meta, StoryObj } from '@storybook/react';
import { Heading1 as Component } from '.';

export default {
  component: Component,
  argTypes: {},
  },
} as Meta<typeof Component>;

export const Default: StoryObj<typeof Component> = {
  args: {
    children: 'Title',
  },
};

簡潔にまとめると,

argsだけ設定すればいい感じになる
titleを指定しなくてもDirectory構成みていい感じにしてくれる

しかし,Storybookを7.0にアップデートしないとこの書き方ではおそらく型エラー.

なので,7.0にはまだしないけど,CSF3.0で書いておきたい場合はこんな感じが良さげ.

import type { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import { Heading1 as Component } from '.';

export default {
  component: Component,
  argTypes: {},
  },
} as ComponentMeta<typeof Component>;

export const Default: ComponentStoryObj<typeof Component> = {
  args: {
    children: 'Title',
  },
};

これで,移行後は型を置き換えれば終了というわけである.

おまけ

これでも動いた最短

import type { Meta, StoryObj } from '@storybook/react';
import { Heading1 as component } from '.';

export default { component } as Meta<typeof component>;

export const Default: StoryObj<typeof component> = {
  args: {
    children: 'Title',
  },
};

おまけ

Discussion