Le comparto mi progreso. 😃
Visión general de los sistemas de diseño en desarrollo
Lo que debes saber para crear un sistema de diseño
Conceptos y recursos importantes para trabajar con Storybook
Desarrollo de componentes
Storybook: instalación, anatomía y primeras historias
Arquitectura de componentes y nombramiento en Storybook
Design Tokens y Custom Properties
Creación del componente Button con JavaScript y CSS
Estilos del componente Button
Creación del componente Card con JavaScript y CSS
Container Queries en CSS
Componente Card con Container Queries
Historias en Storybook
Component Story Format (CSF)
Argumentos
Parámetros y decoradores
Essential Addons en Storybook
Addons más comunes y soporte
Actions y Backgrounds
Viewport, Measure y Outline
Pruebas de componentes en Storybook
Test runner
Pruebas de interacción
Pruebas de accesibilidad
Pruebas visuales con Chromatic
Próximos pasos
¿Quieres más cursos de Storybook.js?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
En el fascinante mundo del desarrollo front-end, es fundamental asegurarse de que los componentes se comporten como se espera bajo diferentes escenarios. ¿Y qué mejor manera de lograr eso que mediante el uso de Storybook y sus poderosos addons? En esta guía, desglosaremos dos de los complementos esenciales de Storybook: "actions" y "backgrounds". Estos addons no solo te permitirán simular eventos como clics en botones, sino también visualizar cómo tus componentes se ven con diferentes fondos de pantalla. ¡Vamos a descubrir cómo configurarlos!
El primer paso en la configuración de "actions" es asegurarse de que puedas monitorear cuando los usuarios interactúan con tu componente. Por ejemplo, si quieres detectar si un botón es presionado, sigue estos pasos:
Agregar el Event Listener en el Componente: En tu archivo JavaScript, usa el método addEventListener
para escuchar el evento deseado, como el clic.
button.addEventListener('click', onClick);
Definir el Evento en la Historia: En tu archivo de historia en Storybook, en la sección correspondiente, define el evento como un argumento para que puedas monitorearlo en el panel de "actions".
export const MyButtonStory = () => <Button onClick={action('clicked')} />;
Monitorear el Evento en el Storybook: Al abrir la sección de "actions" en tu Storybook, podrás verificar si el evento de clic es capturado al interactuar con el botón.
Además del clic, puedes querer capturar eventos más sutiles como el paso del mouse sobre el componente. Aquí te explicamos cómo:
Configurar el Capturador de Eventos del Mouse: Escribe en el archivo de historia para detectar eventos de movimiento como mouseOver
.
parameters: {
actions: {
handles: ['mouseover']
}
}
Verificar en Storybook: Al pasar el mouse sobre el componente, Storybook debería capturar y mostrar estos eventos en el panel de "actions".
En el diseño de interfaces, el contexto visual es crucial. Por eso, el addon "backgrounds" permite cambiar el fondo de tus componentes para simular cómo se verían en distintos escenarios, por ejemplo, durante un Black Friday.
Configurar los Backgrounds en la Historia: Define los fondos utilizando parámetros y valores específicos.
parameters: {
backgrounds: {
default: 'Black Friday',
values: [
{ name: 'Black Friday', value: '#000' },
{ name: 'Default', value: '#fff' }
],
},
}
Verificar el Cambio en Storybook: Al cambiar entre fondos en Storybook, podrás ver cómo se adaptan los estilos del componente. Ten en cuenta que colores del texto u otros elementos podrían necesitar ajustes (por ejemplo, bordes negros en fondos negros).
Simulación de Escenarios Reales: Los fondos personalizados te ayudan a ver cómo tus componentes se integran en contextos visuales variados, permitiéndote ajustar diseño y funcionalidad.
Mejor Experiencia de Usuario: Al detectar y responder a eventos como clics o movimientos del mouse, garantizas una interfaz más interactiva y funcional.
El uso efectivo de estos addons de Storybook no solo optimiza el flujo de trabajo sino que también garantiza calidad y coherencia en la experiencia del usuario. Ahora que tienes las herramientas y conocimientos necesarios, explora estos complementos y personaliza tus proyectos para destacar entre la competencia. ¡Sigue aprendiendo y configurando tus historias en Storybook para mejorar tus habilidades de desarrollo front-end!
Aportes 4
Preguntas 0
Le comparto mi progreso. 😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?