Lección 7: Storybook — la fuente de verdad visual
Para revisar el `Button` en su estado `ghost` con un error, entras a la app, abres un formulario, ingresas datos incorrectos, y esperas. Todo eso para ver un solo componente. Esta lección te enseña `Storybook`: un archivo de stories que renderiza cada variante de forma aislada, en una sola página —
Storybook es como la sala de exhibición de un sastre: cada variante de una prenda en su propio maniquí, en fila, así inspeccionas cada una por separado — sin vestir a una persona completa y mandarla a caminar por la tienda.
- Storybook
- Una herramienta que renderiza componentes de forma aislada fuera de la app, cada uno con sus variantes en una sola página — una fuente de verdad visual para desarrollar, revisar y documentar el sistema de diseño.
- story
- Un único estado de un componente exportado desde un archivo `*.stories.tsx` — normalmente una variante con sus args (`export const Ghost = { args: { variant: 'ghost' } }`).
- isolated development
- Construir y probar un componente aparte de la app, sin necesidad de navegar hasta él a través de pantallas, login y datos — acorta el ciclo de feedback.
- visual regression
- Un cambio visual no intencionado que se cuela por accidente (un componente que se 'rompió' visualmente). Storybook facilita detectarlo porque todas las variantes están visibles juntas.
