Mejora la experiencia de desarrollo y documentación en Storybook de los webcomponents creados con Atomico
import { decorador } from "@atomico/storybook";import { define } from "@atomico/storybook";
import { Button } from "./button";
export default {
title: "Component/Button"
...define(Button)
}
Atomico hoy ofrece un set de utilidades para mejorar la creacion de sistemas de diseño usando Storybook.
packages
├─ components
│ ├─ src
│ │ ├─ my-button
│ │ ├─ my-input
│ │ ├─ my-card
│ │ └─ components.{ts,js,tsx,jsx}
│ └─ package.json
└─ storybook
└─ package.jsonimport { Button } from "@ds/components/button";import { Button } from "@ds/components";Le invito a conocer 2 estrategias de estructuración de tu repositorio para tu proyecto como sistemas de diseño.
packages
├─ components
└─ storybook packages
├─ components
│ └─ my-button
│ └─ src
│ └─ define.stories.tsx
└─ storybook <my-component>
<my-component-header></my-component-header>
<my-component-footer></my-component-footer>
</my-component>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>
}:root{
--my-design-system--color-primary: red;
}:host{
--color-primary: var(--my-design-system--color-primary);
}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";
