Los add-ons en Storybook son extensiones que amplían la funcionalidad de tus componentes y te permiten simular escenarios reales como clics, hovers, cambios de viewport o fondos personalizados. Si trabajas con design systems o componentes reutilizables, dominar estos add-ons te dará control total sobre cómo pruebas y documentas tu UI.

¿Qué son los add-ons esenciales en Storybook?

Los add-ons esenciales son un conjunto de herramientas que vienen instaladas por defecto en Storybook y cubren las necesidades más comunes al desarrollar componentes. Te ayudan a documentar, interactuar y visualizar tu UI bajo distintas condiciones.

Entre los más relevantes están:

• Controls: permiten manipular las props del componente desde el panel.
• Actions: capturan eventos de JavaScript como clics o hovers.
• Viewport: simula distintos tamaños de pantalla (mobile, tablet, desktop).
• Backgrounds: cambia el color de fondo del canvas para probar contraste.
• Measure: muestra dimensiones, paddings y márgenes del componente.

¿Para qué sirven los add-ons en Storybook? Sirven para extender la funcionalidad base de Storybook y simular comportamientos reales del componente, como cambios de viewport, eventos del usuario o variaciones de fondo, sin tocar el código de tu app.

¿Dónde se ubican los add-ons dentro de la interfaz?

Los add-ons no viven en un solo lugar. Storybook los distribuye en tres zonas principales para que cada uno cumpla su función sin estorbar.

El panel inferior

Es donde encuentras los controls y las actions. Aquí puedes cambiar las props del componente en tiempo real y también ver qué eventos se disparan cuando interactúas con él. Por ejemplo, si haces clic en un botón, el panel de actions registra ese evento.

La toolbar superior

Esta barra concentra herramientas como el viewport, los backgrounds y la regla de medidas. Si quieres ver tu botón en mobile, cambias el viewport desde aquí. Si necesitas saber cuánto padding tiene, activas el icono de medidas y listo.

Las tabs Canvas y Docs

La tab Canvas muestra el componente renderizado. La tab Docs despliega la documentación en Markdown que configuraste en clases anteriores, con los parámetros que vienen por defecto.

¿Cómo funcionan los controllers y las actions?

Los controllers o controls son los que ya manipulaste antes con tipos como radio button y text. Pero hay más opciones disponibles, como selectores de color para esquemas cromáticos o sliders para valores numéricos.

Las actions, por su parte, están atadas al concepto de eventos. Un evento es cualquier acción que el usuario ejecuta sobre el componente y que JavaScript puede capturar.

Los eventos más comunes que registran las actions son:

1. onClick: cuando el usuario hace clic.
2. onHover o onMouseOver: cuando pasa el cursor encima.
3. onChange: cuando modifica el valor de un input.

¿Qué diferencia hay entre controls y actions? Los controls modifican las props del componente desde el panel. Las actions registran los eventos que el usuario dispara al interactuar con el componente, como clics o hovers.

¿Por qué importan viewport, backgrounds y measure?

Estos tres add-ons resuelven preguntas que aparecen todo el tiempo en el desarrollo frontend. ¿Cómo se ve mi componente en mobile? ¿Funciona sobre un fondo rosa o verde? ¿Cuánto espacio hay entre dos elementos?

El viewport te deja cambiar entre desktop, tablet y mobile sin redimensionar la ventana del navegador. Es útil cuando quieres validar responsive sin abrir el inspector.

Los backgrounds te permiten probar el componente sobre distintos colores de fondo. Si tu botón blanco se pierde sobre fondo claro, lo detectas aquí antes de mandarlo a producción.

El add-on de medidas reemplaza la necesidad de abrir el inspector del navegador cada vez que quieres saber un padding o un margen. Con un clic ves dimensiones, espaciados superiores, inferiores y entre componentes.

¿Cómo se instala un add-on nuevo en Storybook?

Los add-ons esenciales ya vienen incluidos por defecto en el archivo de configuración de add-ons. Ahí también aparecen las secciones de links e interactions, que verás más adelante en el curso.

Para agregar uno que no venga por defecto, sigue estos pasos:

1. Revisa la documentación oficial del add-on que necesitas.
2. Ejecuta el comando de instalación correspondiente.
3. Registra el add-on en el archivo de configuración para que Storybook lo reconozca.

Una vez registrado, el nuevo add-on aparecerá en el panel, la toolbar o donde corresponda según su tipo.

Cuéntame en los comentarios qué add-on te interesa más explorar y si ya revisaste la tab de Docs con tu propia documentación en Markdown.