Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Esta guía conocerás lo esencial para comenzar a desarrollar webcomponents con Atomico
Una microlibrería inspirada en React Hooks, diseñada y optimizada para la creación de webcomponentes.
// Importaciones
import { c, css } from "atomico";
// Creando nuestro webcomponents: Definiendo el customElement
export const MyComponent = c(
// Definiendo el renderizado del componente
({ message }) => {
return <host shadowDom>{message}</host>;
},
{
// Definiendo propiedades(props) y atributos
props: {
message: String,
},
// Definiendo estilo css encapsulado
styles: css`
:host {
font-size: 30px;
}
`,
}
);
// Registro del custom tag del Web Component
customElements.define("my-component", c(component));import { c, css } from "atomico";// Definiendo el renderizado del componente
({ message }) => {
return <host shadowDom>{message}</host>;
}// Defining Component Properties(props) and Attributes
props: {
message: String,
},styles: css`
:host {
font-size: 30px;
}
`,// Web Component Registration and Definition
customElements.define("my-component", MyComponent);Atomico hoy ofrece un set de utilidades para mejorar la creacion de sistemas de diseño usando Storybook.
import { c } from "atomico"; // 2.5kB
const MyComponent = c(
({name})=><host shadowDom>Hello, {name}</host>,
{
props: { name: String }
}
);
customElements.define("my-component", c(component));import { c } from "atomico"; // 2.5kB
const MyComponent = c(
({name})=><host shadowDom>Hello, {name}</host>,
{
props: { name: String }
}
);
customElements.define("my-component", c(component));Le invito a conocer 2 estrategias de estructuración de tu repositorio para tu proyecto como sistemas de diseño.
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";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";packages
├─ components
└─ storybook packages
├─ components
│ └─ my-button
│ └─ src
│ └─ define.stories.tsx
└─ storybook :root{
--my-design-system--color-primary: red;
}:host{
--color-primary: var(--my-design-system--color-primary);
}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)
}<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>
}
