Frontend Academy · Lección

Storybook: stories, controles y documentación

Escriba stories para cada estado de un componente, use Controls para ajustar props de forma interactiva y genere páginas de Docs a partir de JSDoc y argTypes.

Storybook: stories, controles y documentación es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Qué es Storybook

Storybook es un taller para componentes de UI, aislado de su aplicación. Escriba «stories», es decir, ejemplos de uso de cada componente en distintos estados, y consúltelos en un servidor de desarrollo. Es indispensable para los sistemas de diseño.

Por qué usar Storybook

1) Desarrolle componentes de forma aislada sin configurar el contexto de una aplicación. 2) Revise visualmente todos los estados (carga, error y vacío). 3) Los diseñadores y responsables de producto pueden consultar el catálogo. 4) Genera documentación. 5) Automatiza las pruebas de regresión visual.

Instalar Storybook

Use el inicializador oficial: detecta su framework y configura todo.

npx storybook@latest init

# Adds:
#  .storybook/        config
#  src/stories/       example stories
#  scripts: 'storybook' and 'build-storybook'

npm run storybook   # opens http://localhost:6006

Escribir una story (CSF 3.0)

Component Story Format 3: la exportación predeterminada = metadatos; las exportaciones con nombre = stories.

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs']
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' }
};

export const Disabled: Story = {
  args: { label: 'Save', variant: 'primary', disabled: true }
};

Varias stories por componente

Escriba una story por cada estado importante: predeterminado, hover, carga, error, vacío y con contenido. Los revisores pueden recorrerlas y ver todas las variaciones de un vistazo.

export const Loading: Story = { args: { state: 'loading' } };
export const Error: Story    = { args: { state: 'error', message: 'Network failed' } };
export const Empty: Story    = { args: { items: [] } };
export const Populated: Story = { args: { items: mockItems } };

Controles (tabla de args)

El complemento Controls de Storybook convierte el objeto args en controles de formulario interactivos. Modifique los valores de las props en tiempo real desde la interfaz para probar casos límite.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    onClick: { action: 'clicked' }
  }
};

Complemento Actions

Use action() para registrar las llamadas a los controladores de eventos en el panel Actions. Es ideal para probar callbacks sin configurar un estado real.

argTypes: {
  onClick: { action: 'clicked' },
  onChange: { action: 'changed' }
}

Autodocs: documentación generada automáticamente

Añada tags: ['autodocs'] a los metadatos; Storybook genera una página Docs con la tabla de props del componente, sus descripciones y ejemplos ejecutables.

MDX para documentación enriquecida

Escriba la documentación de los componentes en MDX: Markdown más JSX incrustado. Combine texto explicativo con ejemplos interactivos de los componentes.

{/* Button.mdx */}
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

The primary action element.

## Variants
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Secondary} />

Decorators: envolver stories con contexto

Envuelva las stories en providers (Theme, Router, Redux) mediante decorators.

export const decorators = [
  (Story) => (
    <ThemeProvider theme={lightTheme}>
      <Story />
    </ThemeProvider>
  )
];

Pruebas de regresión visual

Chromatic (del equipo de Storybook) toma una captura de cada story en cada commit y la compara con la línea base. Detecta automáticamente las regresiones visuales.

Desplegar Storybook

npm run build-storybook genera un sitio estático en storybook-static/. Despliéguelo en Netlify, Vercel o GitHub Pages: así los no desarrolladores disponen de un catálogo de componentes que pueden consultar.

Comprobación rápida

¿Qué hace añadir tags: ['autodocs'] a los metadatos de un componente en Storybook?

Repaso: Storybook

Taller aislado para componentes de UI. CSF 3.0: la exportación predeterminada = meta; las exportaciones con nombre = stories. argTypes para Controls. action() para registrar callbacks. tags: ['autodocs'] para generar documentación automáticamente. MDX para combinar texto enriquecido y JSX. Los decorators inyectan providers. Chromatic para la regresión visual. build-storybook para el alojamiento estático.

Preguntas frecuentes

¿La lección «Storybook: stories, controles y documentación» es gratis?

Sí — el texto completo de «Storybook: stories, controles y documentación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Storybook: stories, controles y documentación»?

Escriba stories para cada estado de un componente, use Controls para ajustar props de forma interactiva y genere páginas de Docs a partir de JSDoc y argTypes. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Storybook: stories, controles y documentación»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Storybook: stories, controles y documentación
Tokens de diseño con Style Dictionary
Versionado y publicación en npm
Consumo de un sistema de diseño

← Volver a Frontend Academy