@unholster/seisveinte v0.3.3

Seisveinte

Sistema de diseño @ Unholster

La librería tiene como caso de uso principal el desarrollo de componentes en storybook, pero permite el desarrollo fluido con un proyecto haciendo ciertos ajustes al ambiente local.

Inicio rápido

• En el proyecto que se quieran usar los componentes

yarn add @unholster/seisveinte

• Los componentes pueden ser explorados por categoría -> componentes en https://unholster.github.io/seisveinte/

• Luego llamar componentes como en este ejemplo

import { Button } from '@unholster/seisveinte';

const { FilledButton } = Button

const ExampleComponent = () => <FilledButton />

Instalación

Para trabajar solo en storybook

1. Instalar dependencias

yarn install

2. Iniciar storybook

yarn storybook

Para poder desarrollar en paralelo con storybook y un proyecto. (Opcional)

1. Linkear seisveinte al proyecto.

# En seisveinte
yarn link
# En el proyecto
yarn add "@unholster/seisveinte"
yarn link "@unholster/seisveinte"

2. Linkear react y styled-compoents del proyecto a seisveinte.

Al linkear seisveinte local al proyecto, el node_modules de seisveinte contiene su propio react y styled-components (para que storybook pueda funcionar). Por esta razón, sí sólo se linkea seisveinte al proyecto, aparecerá un error advirtiendo que hay dos react y dos styled-components instalados. Para reparar eso, los paquetes styled-components y react se deben linkear a los del proyecto.

# En el proyecto
cd node_modules/react
yarn link
cd node_modules/styled-components
yarn link
# En seisveinte
yarn link "react"
yarn link "styled-components"

3. Hacer build de seisveinte para ver los cambios en los componentes en el proyecto

# En seisveinte
yarn build

4. Iniciar el proyecto y storybook

¿Cómo agregar un nuevo componente?

Existe una jerarquía de categoría que encierra muchos componentes asociados y una historia común.

src
├── components
│   ├── category
│   │   ├── Category.stories.jsx
│   │   ├── CategoryComponent1.jsx
│   │   ├── CategoryComponent2.jsx
│   │   ├── ...
│   │   └── index.jsx
│   ├── index.ts
└── index.ts

• Al crear un componente se busca evitar el uso de librerías externas. Sin embargo, de ser justificado por su complejidad, se pueden utilizar. La jerarquía es la siguiente:
  1. Componente que usa solo styled-components.
  2. Componente que usa una librería aislada.
  3. Componente proveniente de un framework. (Antd idealmente al momento de crear esta documentación).
• Como regla general, los componentes de una categoria son aquellos que están mas relacionados, por ejemplo un navbar con sus botones.
• Los componentes deben poder se llamados por si solos, por ejemplo el botón del navbar debe poder ser utilizado en cualquier otro contexto que no sea el navbar.
• Cada historia debe mostrar todos los parámetros que recibe en sus props.
• Cada componente nuevo debe seguir esta jerarquía a menos que estemos enfrentando problemas por usarla.
• Al finalizar el desarrollo, un PR hacia main debe ser creado con los encargados de seisveinte como reviewers.
• Los components deben tener un className identificativo por default tanto para si mismos como para los componentes que son usados en su interior, de modo que puedan ser fácilmente estilizados en el proyecto que se utilicen.
• Los componentes nunca debiesen usar colores "en duro" en sus definiciones de estilo, donde se necesite usar color debiese hacer referencia a una variable que se pueda configurar en un theme de Styled Components.

¿Cómo publicar paquete?

• Al mezclar a main, la publicación del paquete se hará de forma automática.
• El requisito para que ocurra es que la versión en package.json debe ser mayor a la última subida en npm.
• Es responsabilidad que quien hace el merge realizar este cambio.

Criterio de aumento de versión

• Patch: Sí el cambio no requiere atención de los desarrolladores de los proyectos para actualizar seisveinte.
• Minor: Sí requiere atención de los desarrolladores de los proyectos para actualizar seisveinte.