StorybookでReactのコンポーネントをプレビューする

はじめに

Storybookを使うことで、コンポーネント単体のプレビューができるようになります。
今回はViteのプロジェクトにStorybookを導入していきます。

コンポーネントの作成

こちらの記事で作成したボタンコンポーネントを作成します。
https://zenn.dev/collabostyle/articles/15883dcd38c9ff

Storybookの初期化

ひな形を生成します。

npx storybook init

サンプルを削除する

サンプルのコンポーネントが作成されるので、
src/storiesのフォルダーを削除します。

ストーリーファイルを作る

以下のようなストーリーファイルを作成します。

src/components/parts/buttons/Button.stories.tsx

import { action } from "@storybook/addon-actions";
import type { Meta, StoryObj } from "@storybook/react";

import Button from ".";

const meta: Meta<typeof Button> = {
  title: "Button",
  component: Button,
};

export default meta;

export const Default: StoryObj<typeof Button> = {
  args: {
    children: "Button",
    onClick: action("clicked"),
  },
};

export const Disabled: StoryObj<typeof Button> = {
  args: {
    children: "Button",
    onClick: action("clicked"),
    disabled: true,
  },
};

コマンドを実行してみる

npm run storybook

Storybookが立ち上がりました😊