CSF3とは何ですか？

Component Story Format 3は、Storybookの最新標準で、古い`storiesOf`や関数テンプレートではなく、オブジェクトベースのエクスポートを使用します。これにより、ボイラープレートが削減され、テストツールとの互換性が向上します。

このツールはTypeScriptをサポートしていますか？

はい。生成された出力には、IDE内での型安全性を確保するために、`Meta`および`StoryObj`の標準TypeScriptインターフェースと型定義が含まれています。

複数のストーリーを一度に追加できますか？

このツールは、Primaryストーリーを含む基本ファイルを生成します。エディタでストーリーオブジェクトを手動で複製して、「Disabled」や「Loading」状態などのバリエーションを作成できます。

私のコンポーネントコードはアップロードされますか？

いいえ。ジェネレーターは、提供されたメタデータを受け取り、それを文字列にフォーマットすることで機能します。ファイルはアップロードされず、サーバー上でコード分析も行われません。

フォーマッター＆コード

Storybook ストーリージェネレーター

CSF3 .stories.tsx file from a component name and props.

Runs in your browser

ComponentDefault args (key: value, one per line)Variants (comma-separated)

Button.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  component: Button,
  title: "Components/Button",
  args: {
  variant: 'primary',
  size: 'md',
  children: 'Click me',
  },
  argTypes: {
    variant: { control: "select", options: ["primary", "secondary", "ghost"] },
  },
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Default: Story = {};

export const Primary: Story = {
  args: { variant: "primary" },
};
export const Secondary: Story = {
  args: { variant: "secondary" },
};
export const Ghost: Story = {
  args: { variant: "ghost" },
};

lines: 31chars: 653size: 653 B

live

編集者注

Understanding · One story per component state.

この詳細な解説章は現在、英語版のみで提供されています。上の変換ツールはあなたの言語で動作しますが、長文の解説記事はまだ翻訳されていません。

よくある質問

Quick answers.

›What is CSF3?

Component Story Format 3 is the latest standard for Storybook, using object-based exports rather than the older `storiesOf` or functional templates. It reduces boilerplate and improves compatibility with testing tools.

›Does this tool support TypeScript?

Yes. The generated output includes standard TypeScript interfaces and type definitions for `Meta` and `StoryObj` to ensure type safety within your IDE.

›Can I add multiple stories at once?

This tool generates a base file with a Primary story. You can manually duplicate the story object in your editor to create variations like 'Disabled' or 'Loading' states.

›Is my component code uploaded?

No. The generator works by taking the metadata you provide and formatting it into a string; no files are uploaded and no code analysis is performed on a server.

他の人はこちらも検索しています

More in this room.

すべて表示フォーマッター＆コード