Claude Code के साथ Storybook Practical Guide

Storybookdevelopmentको Claude Code से Efficient बनाएं

StorybookはUIcomponentを独立してdevelopment・test・ドキュメント化できるツール है।Claude Code का उपयोग करके、ストーリーのcreate सेインタラクションtest तक効率よく進められ है।

ストーリーのcreate

Buttoncomponentのストーリー

> Buttoncomponentの全バリエーションをStorybookに登録して。
> size・color・状態の組み合わせを網羅して。

// 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: 'button',
  },
};

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

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: '送信में...',
  },
};

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

インタラクションtest

user操作のtest

> formcomponentのインタラクションtestをadd करो。
> 入力→validation→送信のフローを検証。

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

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

    // form入力
    await userEvent.type(
      canvas.getByLabelText('名पहले'),
      'testuser'
    );
    await userEvent.type(
      canvas.getByLabelText('メールアドレス'),
      '[email protected]'
    );

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

    // 成功messageのconfirm
    await expect(canvas.getByText('送信が完了しました')).toBeInTheDocument();
  },
};

accessibilitycheck

Storybookの @storybook/addon-a11y をutilizationすると、各componentのaccessibility問題を自動検出でき है।Claude Codeに「a11yアドオンをsettingsして」と依頼する से हीintroduction完了 है।

ドキュメント自動generate

Storybookの autodocs featuresで、componentのProps情報やサンプルcodeを含むドキュメントを自動generateでき है।JSDocコメントをappropriateにलिखनाと、より詳細なドキュメントがgenerateされ है।

interface ButtonProps {
  /** buttonのバリエーション */
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  /** buttonのsize */
  size?: 'sm' | 'md' | 'lg';
  /** 読み込みमेंの状態 */
  loading?: boolean;
  /** クリック時のcallback */
  onClick?: () => void;
}

Chromaticintegration

ビジュアルリグレッションtestにはChromaticがconvenient है।Claude Codeに「Chromaticをintroductionして、PRごとにビジュアルtestを実行するsettingsをして」と依頼すれば、GitHub Actionsとのintegrationsettingsも含めてgenerateしてくれ है।

Summary

Claude Code का उपयोग करके、Storybookのストーリーcreate सेインタラクションtest、ドキュメントgenerate तक効率よく進められ है।デザインシステムbuildやaccessibilitysupportも合わせてreference के लिए देखें。

Storybookके details के लिएStorybookofficial documentationをदेखें。