Cuando construyes un componente en Storybook, no basta con verlo: necesitas probar cómo reacciona y cómo se ve en distintos escenarios. Aquí entran dos add-ons clave, Actions y Backgrounds, que te permiten capturar eventos como el clic y simular fondos como una landing de Black Friday sin tocar tu producto real.

¿Qué son los Actions en Storybook y para qué sirven?

Los Actions son el add-on que escucha eventos del DOM y los muestra en el panel inferior de Storybook. Sirven para confirmar, de forma visual, que tu componente está disparando lo que debería disparar.

Para capturar un clic en un botón, primero te vas a tu componente y agregas un event listener. Algo como button.addEventListener('onclick', onclick), donde ese onclick es el que vas a recibir desde la historia.

¿Qué hace addEventListener en un componente de Storybook? Engancha tu botón a un evento del navegador (por ejemplo, click o mouseover) y ejecuta la función que le pases. Esa función es la que Storybook intercepta para mostrarla en el panel de Actions.

¿Cómo registro un onclick desde la historia?

En tu archivo de historia, dentro de argTypes, ocultas temporalmente lo que ya tenías (label, style, size) y agregas el onclick. Le pones una descripción tipo "evento de JavaScript" y una acción tipo "está cliqueado".

Al guardar y volver a Storybook, la pestaña Actions aparece vacía. Es normal: necesita capturar el evento. Le das clic al botón y ahí mismo verás el log con todo lo que conlleva ese evento [03:10].

¿Cómo detecto el mouseover además del clic?

Dentro de parameters, debajo de docs, agregas un bloque actions y dentro defines handles: ['mouseover']. Guardas, pasas el cursor por encima del botón y Storybook empieza a registrar cada vez que el mouse lo sobrevuela [04:05].

Esto es útil cuando quieres validar interacciones más sutiles, no solo clics directos.

¿Por qué necesitas el add-on de Backgrounds?

Imagina que tu producto siempre vive sobre fondo blanco. Tu botón se ve perfecto. Pero llega Black Friday y el equipo necesita una landing page con UI distinta, fondo oscuro y otra vibra. ¿Tu botón sigue funcionando visualmente ahí?

El add-on Backgrounds te deja simular esos escenarios sin salir de Storybook. Cambias el fondo del canvas y validas si los estilos actuales aguantan o si necesitas ajustar bordes, colores y contrastes.

¿Qué es el add-on Backgrounds en Storybook? Es una herramienta que cambia el color de fondo del lienzo donde se renderiza tu componente, para probarlo en distintos contextos visuales sin modificar el componente.

¿Cómo configuro varios fondos personalizados?

Dentro de parameters, dejas los bloques de docs y actions, y agregas uno nuevo llamado backgrounds. Ahí defines:

• default: el tema que quieres activo al abrir la historia, por ejemplo 'Black Friday'.
• values: un arreglo de objetos donde cada uno tiene name y value.
• Un objeto con name: 'Black Friday' y value: '#123123' (negro).
• Otro con name: 'default' y value: '#123123' (blanco).

Al guardar, Storybook renderiza tu botón sobre el fondo Black Friday [06:30]. Y aquí viene lo interesante: si tu botón tenía bordes negros, sobre fondo negro desaparecen visualmente. Justo ese tipo de hallazgo es lo que hace valioso este add-on.

¿Cómo cambio el fondo por defecto?

En la propiedad default cambias el nombre del tema. Si pones default: 'default', tu historia abre con fondo blanco. Si pones default: 'Black Friday', abre con fondo negro. Es un toggle rápido para alternar contextos según lo que estés probando.

¿Qué conceptos clave debes dominar de esta práctica?

Hay varias piezas que conviene tener claras antes de avanzar al siguiente add-on.

• addEventListener [01:15]: método de JavaScript que registra una función para que se ejecute cuando ocurre un evento específico en un elemento del DOM.
• argTypes [02:20]: bloque en la historia donde defines los controles, descripciones y acciones de cada prop del componente.
• handles [04:00]: arreglo dentro de parameters.actions que indica qué eventos del DOM debe interceptar Storybook automáticamente.
• parameters.backgrounds [05:25]: configuración que declara los fondos disponibles y cuál es el activo por defecto.
• values [05:50]: lista de fondos con su name y su value en formato hexadecimal.

Con Actions y Backgrounds, tu Storybook deja de ser una galería estática y empieza a comportarse como un laboratorio donde puedes ver, tocar y romper tus componentes antes de que lleguen a producción.

Muéstrame en los comentarios cómo te quedó tu configuración y qué backgrounds decidiste agregar para tus propios escenarios.