Cuando desarrollas componentes en Storybook, no basta con ver cómo lucen: necesitas comprobar que responden correctamente a las interacciones del usuario y que se adaptan a distintos contextos visuales. Dos add-ons esenciales permiten cubrir exactamente eso: actions para capturar eventos y backgrounds para simular fondos diferentes.
¿Cómo capturar eventos con actions en Storybook?
El add-on de actions permite verificar que un componente emite los eventos esperados. El flujo parte desde el código del componente y termina reflejándose en el panel de Storybook.
¿Cómo escuchar el evento de clic en el componente?
Dentro del archivo JavaScript del botón, se agrega un event listener que captura el clic [01:00]:
javascript
button.addEventListener('click', onClick);
addEventListener registra la escucha del evento click.onClick es la función que se recibe como argumento desde la Story.- Al hacer clic, esa función se ejecuta y Storybook muestra los detalles del evento en el panel de Actions.
Después, en el archivo de la Story, se declara onClick dentro de los argTypes con una descripción y la propiedad action [02:07]:
javascript
argTypes: {
onClick: {
description: 'evento',
action: 'cliqueado'
}
}
Al ir al panel de Actions en Storybook y dar clic sobre el botón, aparece toda la información del evento capturado [02:35].
¿Cómo detectar el evento de mouse over?
Para agregar la detección de otros eventos como pasar el mouse por encima, se configura dentro de los parameters del archivo de historias, debajo de docs [02:52]:
javascript
parameters: {
actions: {
handles: ['mouseOver']
}
}
- handles recibe un arreglo con los nombres de los eventos que se desean capturar.
- Al pasar el cursor sobre el componente, Storybook registra y muestra cada ocurrencia del evento
mouseOver en el panel [03:18].
¿Por qué cambiar el background de un componente en Storybook?
Imagina que tu producto normalmente tiene un fondo blanco, pero llega una campaña especial como Black Friday y necesitas una landing page con fondo oscuro. ¿Cómo se comportan tus componentes en ese escenario? El add-on de backgrounds resuelve precisamente esa pregunta [03:30].
¿Cómo configurar backgrounds personalizados?
Dentro de parameters, junto a docs y actions, se añade la propiedad backgrounds [04:05]:
javascript
parameters: {
backgrounds: {
default: 'Black Friday',
values: [
{ name: 'Black Friday', value: '#000000' },
{ name: 'default', value: '#ffffff' }
]
}
}
- default indica qué fondo se carga inicialmente.
- values es un arreglo de objetos donde cada uno define un
name y un value con el código de color hexadecimal.
- Puedes agregar tantos fondos como necesites para cubrir distintos escenarios de tu producto.
Al abrir Storybook con el fondo Black Friday configurado como predeterminado, el botón se muestra sobre un fondo negro [05:05]. Esto revela un problema real: si los bordes del botón también son negros, se vuelven invisibles. Detectar este tipo de inconsistencias visuales es exactamente el valor que aporta este add-on.
Para volver al fondo claro, basta con cambiar el valor de default a 'default' y guardar [05:30].
¿Qué aprendimos sobre estos add-ons esenciales?
Estos dos complementos trabajan en conjunto para dar una visión más completa del comportamiento de los componentes:
- Actions confirma que los eventos como
click y mouseOver se disparan correctamente.
- Backgrounds permite simular contextos visuales distintos y detectar problemas de contraste o visibilidad.
- Ambos se configuran dentro de
parameters y argTypes en el archivo de la Story.
Comparte en los comentarios cómo configuraste tus backgrounds y qué escenarios visuales decidiste probar con tus componentes.
