Storybook 实战指南：Claude Code 实战指南

Storybook开发を通过 Claude Code 提高效率

StorybookはUI组件を独立して开发・测试・文档化できるツールです。借助 Claude Code，ストーリーの创建からインタラクション测试まで効率よく進められます。

ストーリーの创建

Button组件のストーリー

> Button组件の全バリエーションをStorybookに注册して。
> サイズ・颜色・状態の組み合わせを網羅して。

// 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: 'ボタン',
  },
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'ボタン',
  },
};

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: '無効',
  },
};

インタラクション测试

用户操作の测试

> 表单组件のインタラクション测试添加。
> 输入→验证→发送のフローを验证。

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

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

    // 表单输入
    await userEvent.type(
      canvas.getByLabelText('名前'),
      'テストユーザー'
    );
    await userEvent.type(
      canvas.getByLabelText('メールアドレス'),
      '[email protected]'
    );

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

    // 成功メッセージの确认
    await expect(canvas.getByText('送信が完了しました')).toBeInTheDocument();
  },
};

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

Storybookの @storybook/addon-a11y を活用すると、每个组件のアクセシビリティ問題を自動検出可以。让 Claude Code「a11yアドオンを配置して」と依頼する只需引入完成です。

文档自動生成

Storybookの autodocs 機能で、组件のProps情報や示例コードを含む文档を自動生成可以。JSDoc评论を适当地書くと、より详情な文档が生成されます。

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

Chromatic联动

ビジュアルリグレッション测试にはChromaticが便利です。让 Claude Code「Chromaticを引入して、PRごとにビジュアル测试を実行する配置をして」と依頼すれば、GitHub Actionsとの集成配置も含めて生成してくれます。

总结

借助 Claude Code，Storybookのストーリー创建からインタラクション测试、文档生成まで効率よく進められます。デザインシステム构建やアクセシビリティ支持也建议一并参考。

Storybook的详细信息请参阅Storybook官方文档。