CSF3이란 무엇인가요?

Component Story Format 3은 Storybook의 최신 표준으로, 이전의 `storiesOf` 또는 함수형 템플릿 대신 객체 기반 내보내기를 사용합니다. 이는 불필요한 코드를 줄이고 테스트 도구와의 호환성을 향상시킵니다.

이 도구는 TypeScript를 지원하나요?

네. 생성된 출력에는 IDE 내에서 타입 안전성을 보장하기 위해 `Meta` 및 `StoryObj`에 대한 표준 TypeScript 인터페이스 및 타입 정의가 포함됩니다.

여러 스토리를 한 번에 추가할 수 있나요?

이 도구는 기본 스토리가 포함된 기본 파일을 생성합니다. 편집기에서 스토리 객체를 수동으로 복제하여 '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.

모두 보기 포매터 및 코드