open-index/open-npm huggingface dataset:
npm package: @ignaciotobar/seisveinte
Description: The Unholster design system.
Author: Ignacio Norambuena
Latest version: 0.1.12

# seisveinte
Sistema de diseño @ Unholster

## Quick start

1.  **Instalar dependencias**

    ```
    yarn
    ```

1.  **Abrir el explorador de componentes en el puerto 6006**

    ```
    yarn storybook
    ```

1.  **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`