Component Story Format 3 adalah standar terbaru untuk Storybook, menggunakan "export" berbasis objek daripada `storiesOf` atau "template" fungsional yang lebih lama. Ini mengurangi "boilerplate" dan meningkatkan kompatibilitas dengan alat pengujian.

Apakah alat ini mendukung TypeScript?

Ya. "Output" yang dihasilkan mencakup "interface" TypeScript standar dan definisi tipe untuk `Meta` dan `StoryObj` untuk memastikan keamanan tipe di dalam IDE Anda.

Bisakah saya menambahkan beberapa "story" sekaligus?

Alat ini menghasilkan file dasar dengan "story" Primer. Anda dapat secara manual menduplikasi objek "story" di editor Anda untuk membuat variasi seperti status 'Disabled' atau 'Loading'.

Apakah kode komponen saya diunggah?

Tidak. "Generator" bekerja dengan mengambil metadata yang Anda berikan dan memformatnya menjadi sebuah "string"; tidak ada file yang diunggah dan tidak ada analisis kode yang dilakukan di "server".

Formatter & Kode

Generator Story 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

Catatan editor

Understanding · One story per component state.

Bab mendalam ini saat ini hanya tersedia dalam bahasa Inggris. Alat konversi di atas berfungsi dalam bahasa Anda; artikel penjelasan panjangnya belum diterjemahkan.

Pertanyaan yang sering diajukan

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.

Orang juga mencari

Fitur terkait

More in this room.

Lihat semua di Formatter & Kode