Component Story Format 3, Storybook için en son standarttır ve eski `storiesOf` veya işlevsel şablonlar yerine nesne tabanlı dışa aktarımları kullanır. Bu, boilerplate'i azaltır ve test araçlarıyla uyumluluğu artırır.

Bu araç TypeScript'i destekliyor mu?

Evet. Oluşturulan çıktı, IDE'nizdeki tip güvenliğini sağlamak için `Meta` ve `StoryObj` için standart TypeScript arayüzleri ve tip tanımlamaları içerir.

Aynı anda birden fazla hikaye ekleyebilir miyim?

Bu araç, bir Primary hikaye içeren temel bir dosya oluşturur. 'Disabled' veya 'Loading' durumları gibi varyasyonlar oluşturmak için hikaye nesnesini düzenleyicinizde manuel olarak çoğaltabilirsiniz.

Bileşen kodum yükleniyor mu?

Hayır. Oluşturucu, sağladığınız meta verileri alarak bunu bir diziye formatlayarak çalışır; hiçbir dosya yüklenmez ve sunucuda hiçbir kod analizi yapılmaz.

Biçimlendiriciler ve Kod

Storybook Hikaye Oluşturucu

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

Editörün notu

Understanding · One story per component state.

Bu ayrıntılı bölüm şu anda yalnızca İngilizce olarak sunulmaktadır. Yukarıdaki dönüştürme aracı sizin dilinizde çalışır; uzun açıklayıcı yazı henüz çevrilmemiştir.

Sıkça sorulan sorular

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.

İnsanlar ayrıca şunları arar

İlgili araçlar

More in this room.

Tümünü gör Biçimlendiriciler ve Kod