🧰 Storybook · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Storybook

Herramienta de Desarrollo ⭐ 79k stars
Entorno para desarrollar componentes de UI en aislamiento (React, Vue, Angular…).

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npx storybook@latest init

// Button.stories.js
export default { title: 'Button' };
export const Primaria = () => <button>Hola</button>;

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Story con controles (args)

Un botón con argumentos editables en el panel de Storybook.

// Boton.stories.js
export default { title: 'Botón', argTypes: { etiqueta: { control: 'text' } } };

export const Primario = (args) => <button>{args.etiqueta}</button>;
Primario.args = { etiqueta: 'Haz clic' };
🔁 Cómo funciona: `args` expone props editables en la UI; cada export es una variante aislada.

2. Estados de un componente

Muestra el mismo botón en varios estados (normal, carga, error).

// Boton.stories.js
export default { title: 'Botón/Estados' };

export const Normal = () => <button>Guardar</button>;
export const Cargando = () => <button disabled>Guardando…</button>;
export const Error = () => <button style={{ color: 'red' }}>Reintentar</button>;
🔁 Cómo funciona: Cada `export` documenta visualmente un estado sin tocar la app.

5 · Referencia

CategoríaHerramienta de Desarrollo
Stars (GitHub)⭐ 79k
Sitio oficialhttps://storybook.js.org/
GitHubhttps://github.com/storybookjs/storybook
Instalaciónnpx storybook@latest init
RelacionadasReact Styleguidist · Docz
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.