Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Atomico hoy ofrece un set de utilidades para mejorar la creacion de sistemas de diseño usando Storybook.
@atomico/vite
@atomico/postcss-tokens
Le invito a conocer 2 estrategias de estructuración de tu repositorio para tu proyecto como sistemas de diseño.
Puede ser confuso abordar a el desarrollo de un sistema de diseño sin saber como estructurar nuestro proyecto, la estructura de nuestro repositorio definirá en gran medida el formato de publicación de su sistema de diseño sea:
Es la forma más eficiente de asilar las herramientas que gira entorno a nuestro sistema de diseño.
Esto mantendrá limpio el workspaces, ejemplo:
Storybook puede consumir las historias fuera de su repositorio
packages
├─ components
└─ storybook packages
├─ components
│ └─ my-button
│ └─ src
│ └─ define.stories.tsx
└─ storybook Trata de un repositorio que posee un componentes versionados a nivel de sistema de diseño.
Trata de un repositorio que posee un componentes versionados a nivel de sistema de diseño esto quiere decir que cualquier cambio a nivel de componente se publicara como una nueva versión del sistema de diseño.
Mayor agilidad al crear nuevos componentes, ya que no deberemos crear un nuevo package para un nuevo componente.
Facil centralización de todo el sistema de diseño, bastara con un fichero components para definir que se exporta a nivel de sistema de diseño.
No podremos individualizar las dependencias por componente, ya que estas estarán atadas al package de todo el sistema de diseño.
import { Button } from "@ds/components/button";El seudo selector :root nos permite definir tokens que podrán ser accedidos a nivel de todo el documento incluso shadowDOM, para aprovechar esta ventaja lo ideal es mantener el siguiente patrón.
un documento theme sea CSS o JS que defina todos los tokens como custom property a nivel de :root, ejemplo:
Te invito a notar que para este caso hemos asociado el como prefijo de nombre la cadena--my-design-system, la idea de esto es minimizar conflicto y definir un namespace que identifique las css custom properties que nos pertenecen a nivel de sistema de diseño.
El seudo selector :host nos permite encapsular estilos que apuntan a la instancia de nuestro webcomponent, gracias a :host podemos facilitar el acceso a las css custom properties provenientes de :root, esto es práctico ya que facilita el mantenimiento y es automatizable, ejemplo:
:root{
--my-design-system--color-primary: red;
}:host{
--color-primary: var(--my-design-system--color-primary);
}packages
├─ components
│ ├─ src
│ │ ├─ my-button
│ │ ├─ my-input
│ │ ├─ my-card
│ │ └─ components.{ts,js,tsx,jsx}
│ └─ package.json
└─ storybook
└─ package.jsonimport { Button } from "@ds/components";Es grato saber que hoy te enfrentas al desafÃo de implementar un sistema de diseño con Atomico, espero que esta guÃa te ayude a abordar:
La siguiente guÃa está en desarrollo
Abstracción de componentes.
Composición. (Slots)
Distribución.
Documentación.
El uso de slots mejora la composición permitiéndote reflejar el contenido expuesto en el lightDOM del componente en el shadowDOM de este, ejemplo:
El selector slotted permite la manipulación del contenido expuesto como slot del lightDOM desde el shadowDOM, ejemplo:
Con Atomico puedes definir un slot por defecto para tus componentes, esto es útil si buscas mantener cierta consistencia de composición sin la necesidad de declarar el uso de slot, ejemplo:
Para definir un slot por defecto solo debes declarar en las props la prop slot, ejemplo:
Considere esto practico solo si la composición esta apalancada al contenedor, esto no evita que ud modifique la propiedad slot desde la instancia del componente
Atomico ofrece un hook dentro del package ** **que anexa el evento a una referencia, este le permitirá ocultar slots si estos no declaran contenido, ejemplo:
Mejora la experiencia de desarrollo y documentación en Storybook de los webcomponents creados con Atomico
decorator permite renderizar el JSX/HTML usando el render de Atomico, este también permite serializar el JSX y HTML declarado en su historia, ejemplo:
La serialización del JSX ocurre solo si se defineparameters.docs.source = 'jsx' por historia o global en .storybook/preview.js.
Esta funcionalidad solo es compatible con versiones >= atomico@1.70.0 gracias a la caracterÃstica de nombres automáticos según definición del componente
<my-component>
<my-component-header></my-component-header>
<my-component-footer></my-component-footer>
</my-component>import { decorador } from "@atomico/storybook";import { define } from "@atomico/storybook";
import { Button } from "./button";
export default {
title: "Component/Button"
...define(Button)
}myComponentHeader.props = {
slot: { type:String, value: "header"}
}
myComponentFooter.props = {
slot: { type:String, value: "footer"}
}import { useRef } from "atomico";
import { useSlot } from "@atomico/hooks/use-slot";
function component(){
const ref = useRef();
const childNodes = useSlot(ref);
return <host shadowDom>
<header style={{
display: childNodes.length? "block": "none"
}}>
<slot name="header" ref={ref}/>
</header>
</host>
}
Trata de un repositorio que posee un sistema de diseño versionados por componentes
Es la estrategia más habitual al momento de crear sistemas de diseño, ya que permite individualizar los cambios a nivel de componente:
Gracias a que cada componente posee su package.json se lograra:
Versionamiento: Cada package estará versionado, ejemplo @ds/button@1.0.0, esto permite que podamos agregar mejoras o corregir problemas apuntando solo a la versión del componente afectado.
Mantenimiento: Al ser un package, podemos individualizar sus dependencias y pruebas, lo que facilita el mantenimiento.
Abstracción: Trata de que cada componente aislara en su package los slots de composición(Subcomponentes que únicamente dependen del componente principal, ejemplo el tag option depende del tag select) y alguna otra utilidad especifica del componente.
Las siguientes desventajas son prácticas:
Mayor lentitud al crear nuevos componentes, ya que cada componente requerirá ser un nuevo package.
Mayor dificultad de centralización de componentes en un solo package, ya que cada cambio requerirá actualizar el package principal y adjuntar la nueva exportación.
packages
├─ components
│ ├─ my-button
│ │ └─ package.json
│ ├─ my-input
│ │ └─ package.json
│ └─ my-card
│ └─ package.json
└─ storybook
└─ package.jsonimport { Button } from "@ds/my-button";import { Button } from "@ds/components";