Storybookの諸々の書き方まとめ

index.stories.tsx

importする、Metaがいる

import { Story, Meta } from '@storybook/react/types-6-0';

descriptionでStorybookの上の方にそのコンポーネントの説明が出る
subComponent指定でこのStoryからそのコンポーネントも見れる

export default {
  title: 'atoms/List',
  component: List,
  subcomponents: { ListItem },
  decorators: [withKnobs],
  parameters: {
    docs: {
      description: {
        component: `
リストです。<br />
`,
      },
    },
  },
} as Meta;

Props渡すとControlで値をStorybook上で渡して見た目を変更して見たり出来る

export const List = (args: Props) => (
  <List {...args}>
    <ListItem>aaaa</ListItem>
  </List>
);

List.args = {}

各Storyに説明も出せる

List.parameters = {
  docs: {
    description: {
      story: `
説明
`,
    },
  },
};

---

index.tsx

これでPropsごとへの説明がStorybookに出る

export type Props = {
  /** テキストの色を変更 */
  color?: 'blue';
};