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
Los Viewports en Storybook son esenciales para entender cómo se verá tu componente en diferentes dispositivos. En la barra de herramientas, puedes seleccionar entre medidas predeterminadas como "Small Mobile," "Large Mobile" y "Tablet". Al seleccionar una, se despliega automáticamente el ancho y el alto, por ejemplo, 320 píxeles de ancho. Si necesitas medidas personalizadas para tu sistema de diseño, puedes modificarlas fácilmente.
Para agregar tus propias medidas de viewport, utiliza tu archivo Preview en el código de Storybook. Aquí se pueden definir variables que ajusten el viewport para que refleje tus necesidades específicas. Por ejemplo, puedes crear distintos "custom viewports":
const customViewports = {
smallUgly: {
name: 'Small Ugly',
styles: {
width: '360px',
height: '540px',
},
},
medium: {
name: 'Medium',
styles: {
width: '1024px',
height: '1200px',
},
},
};
Una vez establecidos, debes decirle a Storybook cómo utilizarlos. Esto se hace añadiendo las custom properties justo debajo en tu archivo Preview.
Una vez que las propiedades personalizadas estén definidas, necesitas integrarlas en Storybook. Utiliza la opción viewport en la configuración de Storybook para incluir tus nuevos valores, y puedes también definir un valor predeterminado.
export const parameters = {
viewport: {
viewports: customViewports,
defaultViewport: 'smallUgly',
},
};
Al hacer esto, verás que tus medidas personalizadas se actualizarán al instante en el Storybook, permitiéndote configurar rápidamente cómo se verá tu diseño en diferentes pantallas.
El addon de la regla en Storybook es una herramienta útil para medir el espacio de los componentes sin la necesidad de abrir el inspector manualmente. Puedes navegar entre los componentes y verificar bordes y márgenes, lo cual es especialmente práctico para componentes complejos.
La función de outline ofrece una visión visual de cómo están alineados los elementos en la interfaz de usuario. Al activar esta opción, se trazan líneas en torno a los componentes, permitiendo verificar si están correctamente organizados. Esto ayuda a mantener la interfaz visualmente coherente sin problemas de alineación.
Te invitamos a experimentar con estas funcionalidades en tus propios componentes. Las herramientas como la reglita y outline pueden facilitar la mejora visual de tu interfaz de usuario al ofrecer una forma sencilla de ver y ajustar detalles de estilo. Comparte tus hallazgos y experiencias en los comentarios, ¡nos encantaría saber cómo estas herramientas están mejorando tu flujo de trabajo de desarrollo!
Además, recuerda revisar y comunicarte con tu equipo de diseño para estar en sintonía con las medidas utilizadas en el sistema de diseño. Con estos consejos, estarás bien equipado para mejorar tus habilidades en el uso de Storybook y seguir aprendiendo de manera efectiva.
Aportes 2
Preguntas 0
Si tienes un export default debería quedarte algo así:
const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
viewport: {
viewports: customViewports,
defaultViwport: 'someDefault'
},
},
};
export default preview;
Comparto mi progreso 😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?