Storybook es una de las herramientas más utilizadas para documentar y visualizar componentes de interfaz de usuario en proyectos modernos. Se integra en proyectos de las librerías de UI más populares, como React, Vue, Angular, Svelte, Web Components, y más, y permite trabajar con cada componente de forma aislada y probar sus diferentes variantes sin necesidad de levantar toda la aplicación. En este taller introductorio de 45 minutos vamos a instalar Storybook en un proyecto React, crear nuestros primeros componentes con historias simples y usar controles básicos para modificar sus props en tiempo real. La experiencia con Storybook es muy valorada en empresas porque facilita la colaboración entre desarrollo y diseño, acelera la iteración de componentes y facilita la construcción de librerías de UI. Además, se integra fácilmente en cualquier flujo de trabajo.
Temario:
- Qué es Storybook y por qué usarlo — la herramienta estándar para documentar y probar componentes UI.
- Instalación y configuración inicial en un proyecto React + Vite.
- Estructura de un proyecto Storybook (.storybook/, stories de ejemplo).
- Creación de un componente simple (Button) y su primera story.
- Uso de args y controls para modificar props en tiempo real.
- Eventos con Actions — registrar interacciones como onClick.
- Estados y variantes — mostrar componentes en distintas condiciones.
- Componente más complejo (TodoItem) con interacción básica.
- Addons esenciales — Docs, Controls, Actions, Viewport.
- Decorators y contexto — aplicar un ThemeProvider o layout global.
- Build y publicación básica de Storybook para compartir con el equipo.
- Próximos pasos — testing visual, Chromatic, design systems.
