# Storybook

> Aprende qué es Storybook y cómo esta herramienta de desarrollo te permite construir, probar y documentar componentes de UI de forma aislada, creando un lenguaje común entre diseño y desarrollo.

*Tags: ux, herramienta, sistema-de-diseño, desarrollo, lead*

---


> [!info] Definición Rápida
> Storybook es una herramienta de desarrollo de código abierto para construir, probar y documentar componentes de UI de forma aislada. Permite a los desarrolladores crear componentes en un entorno de "sandbox" fuera de la aplicación principal, lo que facilita la visualización de todos sus estados y la colaboración con los diseñadores.


## ¿Qué es Storybook?

Imagina que estás construyendo un coche con piezas de LEGO. Storybook es como un taller donde puedes construir y probar cada pieza por separado antes de ensamblar el coche. Puedes construir el motor (un componente complejo) y probarlo por sí solo, o puedes construir una simple rueda (un botón) y ver todos sus colores y tamaños disponibles, todo sin necesidad de tener el chasis del coche completo.

Para los productos digitales, Storybook es ese taller. Es un entorno aislado que permite a los desarrolladores y diseñadores centrarse en un solo componente de la interfaz a la vez, documentar todos sus estados y variantes, y probarlo de forma interactiva.

## ¿Por qué es importante para UX y los Sistemas de Diseño?

- **Es el puente entre Diseño y Desarrollo:** Storybook es el lugar donde el [[Sistema de Diseño]] cobra vida en código. Los diseñadores pueden ver los componentes reales que usarán, y los desarrolladores tienen una referencia clara de cómo debe verse y comportarse cada componente.
- **Fomenta la reutilización de componentes:** Al tener un catálogo visible de todos los componentes existentes, se evita que los desarrolladores creen componentes nuevos cuando ya existe uno que cumple la misma función.
- **Mejora la calidad y la consistencia:** Permite probar cada componente en todos sus estados (ej. un botón en su estado por defecto, hover, disabled, con un icono, etc.), lo que garantiza que sean robustos y consistentes.
- **Facilita las revisiones de diseño (Design QA):** Los diseñadores pueden revisar los componentes directamente en Storybook para asegurarse de que la implementación en código coincide perfectamente con el diseño en Figma.

## Conceptos Clave

- **Componente:** El elemento de UI que se está desarrollando (ej. un botón, una tarjeta, un modal).
- **Historia (Story):** Una representación de un solo estado de un componente. Por ejemplo, para un componente de botón, podrías tener historias como `Primary`, `Secondary`, `Disabled`, `With Icon`.
- **Addons (Complementos):** Herramientas que extienden la funcionalidad de Storybook, como `Controls` (para cambiar las propiedades de un componente en tiempo real) o `Accessibility` (para realizar pruebas de accesibilidad automáticas).

## Consejos de Mentor

- **Storybook es la "fuente única de verdad" para los componentes en código:** Si un componente existe en Storybook, esa es la versión que se debe usar. Si no está ahí, no debería existir en el producto.
- **Intégralo con Figma:** Usa los plugins de Storybook para Figma para enlazar tus diseños directamente con las historias correspondientes. Esto cierra el círculo entre diseño y desarrollo.
- **Documenta las props y los casos de uso:** No te limites a mostrar el componente. Usa Storybook para documentar qué hace cada propiedad (prop) y en qué contextos se debe usar (y no usar) el componente.

## Recursos y Herramientas

- **Recursos:**
    - **[Storybook Official Docs](https://storybook.js.org/docs/):** La documentación oficial es el mejor lugar para empezar.
    - **[Component-Driven Development](https://www.componentdriven.org/):** Un sitio que explica la metodología detrás de herramientas como Storybook.
- **Herramientas de Integración:**
    - [[Zeroheight]]: Se integra con Storybook para crear un sitio de documentación de sistema de diseño más completo.


---

Source: https://www.fernandoux.com/es/wiki/tools/storybook/