Component Story Format 3 è l'ultimo standard per Storybook, che utilizza esportazioni basate su oggetti piuttosto che i più vecchi `storiesOf` o i template funzionali. Riduce il boilerplate e migliora la compatibilità con gli strumenti di test.

Questo strumento supporta TypeScript?

Sì. L'output generato include interfacce TypeScript standard e definizioni di tipo per `Meta` e `StoryObj` per garantire la sicurezza del tipo all'interno del tuo IDE.

Posso aggiungere più storie contemporaneamente?

Questo strumento genera un file base con una storia Primaria. Puoi duplicare manualmente l'oggetto storia nel tuo editor per creare variazioni come stati 'Disabilitato' o 'Caricamento'.

Il mio codice componente viene caricato?

No. Il generatore funziona prendendo i metadati che fornisci e formattandoli in una stringa; nessun file viene caricato e nessuna analisi del codice viene eseguita su un server.

Formattatori e Codice

Generatore di Storybook Story

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

Nota dell'editore

Understanding · One story per component state.

Questo capitolo approfondito è attualmente disponibile solo in inglese. Lo strumento di conversione qui sopra funziona nella tua lingua; il lungo articolo esplicativo non è stato ancora tradotto.

Domande frequenti

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.

Le persone cercano anche

Strumenti correlati

More in this room.

Vedi tutto in Formattatori e Codice