Tresdoce-ui

Tresdoce-ui es la implementación React del Design System de Tresdoce. Se aplicó la metodología Atomic Design para el diseño de los componentes y se generaron los siguientes paquetes:

• @tresdoce-ui/brand: contiene las fuentes e imágenes.
• @tresdoce-ui/core: contiene los componentes más atómicos.

Tecnologías

Los componentes que contiene este repositorio se desarrollan con las siguientes librerías:

• Babel: v7
• React: v16.8
• Styled-components: v5
• TypeScript: v4
• Storybook: v6
• Build: Pika Pack

¿Cómo instalo Tresdoce-ui en mi proyecto?

Se debe crear un archivo .npmrc dentro del proyecto para utilizar el Nexus Corporativo:

.npmrc

registry=http://143.198.236.101:8081/repository/npm-group/
_auth=<token>

Luego instalar las siguientes librerías:

npm i --save @tresdoce-ui/brand @tresdoce-ui/core

¿Cómo desarrollo nuevos componentes?

Ingresá a ./packages/core y corres el script

npm run generate ComponentName

Setup de Proyecto

Para poder comenzar a desarrollar necesitas tener instalado el paquete lerna como una dependencia global:

npm i -g lerna

Luego de eso, se debe correr el siguiente comando:

npm i

Esto va a permitir que se instalen las dependencias del proyecto root y de todas las librerías que están dentro de la carpeta packages.

Iniciar Storybook

Para desarrollar localmente se utiliza Storybook. Para el entorno de desarrollo local, se debe ejecutar:

npm run storybook

Comandos Adicionales

El proyecto cuenta a nivel global con los siguientes comandos disponibles para ejecutar:

// Permite remover los datos generados por el build
npm run clean

// Permite generar un build por cada package dentro de packages
npm run build

// Permite instalar todas las dependencias por cada package dentro de packages
npm run install

// Permite publicar todos los packages buildeados a NPM
npm run publish

// Permite hacer un build de storybook para exportarlo como un HTML hosteable
npm run create:storybook