Component Story Format 3 es el último estándar para Storybook, que utiliza exportaciones basadas en objetos en lugar de las plantillas antiguas de `storiesOf` o funcionales. Reduce el código repetitivo y mejora la compatibilidad con las herramientas de prueba.

¿Esta herramienta es compatible con TypeScript?

Sí. La salida generada incluye interfaces TypeScript estándar y definiciones de tipo para `Meta` y `StoryObj` para garantizar la seguridad de tipos dentro de tu IDE.

¿Puedo agregar varias historias a la vez?

Esta herramienta genera un archivo base con una historia principal. Puedes duplicar manualmente el objeto de la historia en tu editor para crear variaciones como estados 'Disabled' o 'Loading'.

¿Se sube el código de mi componente?

No. El generador funciona tomando los metadatos que proporcionas y formateándolos en una cadena; no se cargan archivos y no se realiza ningún análisis de código en un servidor.

Formateadores y código

Generador de Stories para 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 del editor

Understanding · One story per component state.

Este capítulo en profundidad está disponible solo en inglés por el momento. La herramienta de conversión de arriba funciona en tu idioma; el artículo explicativo extenso aún no se ha traducido.

Preguntas frecuentes

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.

La gente también busca

Herramientas relacionadas

More in this room.

Ver todo en Formateadores y código