seisveinte

Sistema de diseño @ Unholster

Quick start

1. Instalar dependencias

   yarn

2. Abrir el explorador de componentes en el puerto 6006

   yarn storybook

3. Correr tests automáticos

   yarn test

å

Desarrollo

Introducción

La librería se compone de dos partes:

• Los componentes: son componentes react + styled-components. Puede ser disponibilizado en npm y usado por cualquier otra librería. Se encuentra en la capeta components.
• El storybook: es un visualizador de componentes. Se encuentra en la carpeta storybook y utiliza la librería de componentes. De esta forma, los componentes pueden ser subidos a npm y usados por cualquier proyecto de forma independiente.

¿Cómo agregar un nuevo componente?

Para añadir un nuevo componente, dentro de components/components crear el archivos: <Componente>.js y agregarlo a index.js donde se define el componente, y en storybook/src/stories <Componente>.stories.js donde se importa el componente definido y se crean las diferentes user stories (instancias del componente) para este.

¿Cómo desarrollar en local usándo seisvente en un proyecto? (Preliminar)

Nota: Flujo prelimiar porque la dependencia de los paquetes de storybook y los proyectos hace que no se puedan usar ambas plataformas al mismo tiempo.

• Borrar estos paquetes de dependencies en el package.json (Son los mismos que estan definidos en peerDependencies)

  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-scripts": "4.0.1",
  "styled-components": "^5.3.3"

• Reinstalar paquetes yarn install

• Crear link del paquete yarn link

• En la carpeta del proyecto en que se quiera usar seisveinte linkear el paquete

  yarn link "@ignacio.norambuena/seisveinte

• Cuando se hace un cambio en seisveinte que queremos que sea reflejado en el proyecto corremos yarn compile para actualizar la capeta dist

¿Cómo publicar paquete?

• Aumentar version del paquete en el campo version del package.json
• Compilar yarn compile
• Publicar npm publish --access=public