¿Te ha pasado que estás desarrollando una aplicación y te das cuenta de que tus componentes no se comunican de la manera que deberían?
Storybook, es una herramienta superchula que nos permite visualizar nuestros componentes por separado, puedes solucionar este problema de manera fácil y rápida.
En este post, te voy a enseñar cómo pasar datos desde un organismo a un átomo dentro de Storybook. Así podrás optimizar la comunicación entre tus componentes y hacer que tu código se diferencia de los demás.
Storybook es una herramienta que te permite visualizar, desarrollar y probar componentes de manera aislada.
Es una interfaz de usuario que te permite trabajar en tus componentes sin tener que navegar por toda la aplicación.
Puedes probar distintas interacciones y estados para cada componente, lo que hace que el proceso de desarrollo sea más rápido y sencillo.
En resumen, Storybook es una herramienta esencial para desarrolladores de software que buscan mejorar la calidad de sus componentes y optimizar su flujo de trabajo.
<ins>Creamos un Atom</ins>
Creamos el Esqueleto de la Card
Este código define una función llamada createCard que recibe un objeto con ciertas propiedades y retorna un elemento HTML de tipo div que representa una tarjeta.
Este código exporta una función llamada createCard que recibe un objeto con algunas propiedades.
Recuerda retornar tu elemento contenedor, que en este caso es card
**¿Qué hace este código?
Creamos el HTML**
La función createCard crea los siguientes elementos HTML:
Un div con clase “card”.
Un div con clase “avatar” que contiene una imagen.
Un div con contenido que incluye un enlace (a), un encabezado (h3) y un párrafo §.
a los elementos que deseamos le pasamos variables.
Para configurar el src de la imagen, el objetivo es que llegue img.src = ‘url’, en este caso la función createCard es quien se encarga de recibir src.
**
Pasamos clases dinámicas**
En este bloque de código, se definen las clases.
La clase dinámica “card–{tagColor}” se agrega al elemento card, donde {tagColor} es el valor de la propiedad “tagColor” que se recibe como parámetro. al inicio de la función.
<ins>**
Nuestra primera historia**</ins>
Este código define un componente de un sistema de diseño llamado “Card” que consta de dos variantes: Default y Violet. Cada variante tiene diferentes propiedades, como la imagen (src), etiqueta (tag), título (title), descripción (descripción) y color de etiqueta (tagColor) que es desde donde vamos a pasar los cambios de colores.
¿Qué hace el bloque de código que sigue a la declaración export default?
El bloque de código siguiente, que inicia con “export default”, define el título del componente Card para ser utilizado en la documentación o en la visualización del sistema de diseño.
**
¿Qué hace la función Template?**
La función Template es una función que toma un parámetro “label” y otros argumentos, y retorna la invocación de la función createCard con los argumentos proporcionados.
Creamos una página de nuestra historia
Cada export const representa una página con sus variables.
Por defecto debemos tener una de Default, y le pasamos los args (argumentos) definidos en la función Template
tagColor solo lleva el nombre que tengamos definido en al .css siguiendo la nomenclatura de bem.
recuerda que tenemos card--${tagColor} fsf entonces solo nos resta enviarle el name class, si desde el cad.js hacemos card--${tagColor} entonces nos toca enviar: tagColor: ‘–blue’
El resultado de las historias Violeta y Default (+ el css) seria:
<ins>Organismo</ins>
Ahora vamos un poco más rápido. En esencia es el mismo código.
¡Pero ahora en lugar de recibir un obj recibimos un array!
La estructura del componente es la misma, solo que ahora tenemos un poco de código espagueti, en este componente pequeño se vuelve un caos, imagina cuando cresta, al inicio puede ser más fácil de comprender como pasarle las clases a cada elemento.
**
Pasamos los datos del Array al componente**
En esta sección trabajamos con un array, como el que nos llegaría de una API.
El primer elemento está por fuera del bucle forEach, ya que esa información la usa usamos en el organismo directamente.
El forEach se encarga de iterar el array (indiferente de cuantos elemente llegen) en este caso para este organismo solo requiero mostrar 2 cards esntonces usamos la funcion .slice de ES6.
En cada iterasion creo un cardE1 y la igualo a mi atomo que es createCard({…}) pasandole los valores que me llegen de la “API”
¿Y como trabajo con un Array en una historia?
Lamento decepcionarte pero no estan complejo una vez entiendes como pasar argumentos entre componentes.
**
Creamos nueva carpeta en StoryBook para los Organismos**
Recuerda parar y volver a cargar el proyecto si cambiar el nombre del title, suele generar errores.
**
¿Cómo funciona Default.args = [ ] ?**
Para StoryBook estamos pasando un array ya quemado. Pero La idea de todo esto es que ya puede probar tus componentes como si estuvieras trabajando con una API y pasando las mismas variables para testearlo antes de tener configurada la conexión a la API.
Como ves en esta ocasión solo tenemos la opción por Default, te desafío a crear la tuya y compartirla junto con su captar de como se ve.
