Component Story Format 3 é o padrão mais recente para o Storybook, utilizando exportações baseadas em objetos em vez dos antigos `storiesOf` ou templates funcionais. Reduz a verbosidade e melhora a compatibilidade com ferramentas de teste.

Esta ferramenta suporta TypeScript?

Sim. A saída gerada inclui interfaces TypeScript padrão e definições de tipo para `Meta` e `StoryObj` para garantir a segurança de tipo no seu IDE.

Posso adicionar várias histórias de uma só vez?

Esta ferramenta gera um ficheiro base com uma história Principal. Pode duplicar manualmente o objeto de história no seu editor para criar variações como estados 'Desativado' ou 'A Carregar'.

O meu código de componente é carregado?

Não. O gerador funciona pegando nos metadados que fornece e formatando-os numa string; nenhum ficheiro é carregado e nenhuma análise de código é realizada num servidor.

Formatadores e Código

Gerador de 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

Nota do editor

Understanding · One story per component state.

Este capítulo aprofundado está disponível apenas em inglês no momento. A ferramenta de conversão acima funciona no seu idioma; o artigo explicativo longo ainda não foi traduzido.

Perguntas frequentes

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.

As pessoas também pesquisam por

Ferramentas relacionadas

More in this room.

Ver tudo em Formatadores e Código