Storybook Practical Guide dengan Claude Code

Storybookpengembangan dengan Claude Code: efisiensi

Storybook UIkomponen 独立 pengembangan・test・dokumen化 きるtools.Claude Code 使えば、ストーリー pembuatan dari インタラクションtestま 効率よく進められ.

pembuatan ストーリー

Buttonkomponenのストーリー

> Buttonkomponen 全バリエーション Storybook registrasiして。
> サイズ・カラー・状態 組み合わせ 網羅して。

// src/components/Button/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'outline', 'ghost'],
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
    },
    disabled: { control: 'boolean' },
    loading: { control: 'boolean' },
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'tombol',
  },
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'tombol',
  },
};

export const AllSizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <Button size="sm">小</Button>
      <Button size="md">中</Button>
      <Button size="lg">大</Button>
    </div>
  ),
};

export const Loading: Story = {
  args: {
    loading: true,
    children: 'pengiriman中...',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    children: '無効',
  },
};

インタラクションtest

penggunaoperasiのtest

> formkomponen インタラクションtest tambahkan.
> input→validasi→pengiriman フロー verifikasi。

import { within, userEvent, expect } from '@storybook/test';

export const FormSubmission: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    // forminput
    await userEvent.type(
      canvas.getByLabelText('名前'),
      'testpengguna'
    );
    await userEvent.type(
      canvas.getByLabelText('メールアドレス'),
      '[email protected]'
    );

    // pengiriman
    await userEvent.click(canvas.getByRole('button', { name: 'pengiriman' }));

    // berhasilpesan konfirmasi
    await expect(canvas.getByText('pengiriman selesaiしま')).toBeInTheDocument();
  },
};

アクセシビリティチェック

Storybook @storybook/addon-a11y pemanfaatan dan 、各komponen アクセシビリティmasalah 自動検出 bisa dilakukan.Claude Code 「a11yアドオン pengaturan 」 dan 依頼 だけ penerapanselesai.

dokumen自動generate

Storybook autodocs 機能 、komponen Props情報やsampelコード 含むdokumen 自動generate bisa dilakukan.JSDocコメント tepat 書く dan 、より詳細なdokumen generateされ.

interface ButtonProps {
  /** ボタンのバリエーション */
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  /** ボタンのサイズ */
  size?: 'sm' | 'md' | 'lg';
  /** 読み込み中の状態 */
  loading?: boolean;
  /** クリック時のコールバック */
  onClick?: () => void;
}

Chromaticintegrasi

ビジュアルリグレッションtest Chromatic praktis.Claude Code 「Chromatic penerapan 、PRご dan ビジュアルtest 実行 pengaturan 」 dan 依頼すれば、GitHub Actions dan integrasipengaturan juga 含めてgenerate くれ.

Summary

Dengan Claude Code, Storybook ストーリーpembuatan dari インタラクションtest、dokumengenerateま 効率よく進められ.デザインsistempembangunanやアクセシビリティdukungan juga 合わせて参考 .

Untuk Storybookの詳細, lihat Storybook公式ドキュメント.