Qué son los add-ons en Storybook

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:07

Qué son los add-ons en Storybook

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 14 de 21

Clase 14 / 21

Recursos

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:

onClick: cuando el usuario hace clic.
onHover o onMouseOver: cuando pasa el cursor encima.
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:

Revisa la documentación oficial del add-on que necesitas.
Ejecuta el comando de instalación correspondiente.
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.

Resumen

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

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

La toolbar superior

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?

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:

onClick: cuando el usuario hace clic.
onHover o onMouseOver: cuando pasa el cursor encima.
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?

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.

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

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

Revisa la documentación oficial del add-on que necesitas.
Ejecuta el comando de instalación correspondiente.
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.

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Qué son los add-ons en Storybook

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos