Chernobyl React UI

Este proyecto contiene el KIT de UI de la célula Chernobyl, este KIT emplea componentes para libreria REACT, esta librería tiene una particularidad que es configurable para cada proyecto en el cual se va a utilizar.

Comenzando 🚀

Las siguientes instrucciones te permitirán hacer uso de esta librería de forma correcta e instrucciones para hacer uso o expansión de esta.

Estructura de proyecto

    chernobyl-react-ui
    ├── jest.config.js
    ├── package-lock.json
    ├── package.json
    ├── README.md
    ├── src
    |  ├── common
    |  |  ├── colors
    |  |  |  ├── background-ctrl.tsx
    |  |  |  ├── background-for-components-ctrl.tsx
    |  |  |  ├── hover-background-ctrl.tsx
    |  |  |  └── text-ctrl.tsx
    |  |  ├── index.tsx
    |  |  └── sizes
    |  |     └── font-ctrl.tsx
    |  ├── components
    |  |  ├── Buttons
    |  |  |  └── Button
    |  |  |     ├── Button.stories.tsx
    |  |  |     ├── Button.test.tsx
    |  |  |     ├── Button.tsx
    |  |  |     ├── index.tsx
    |  |  |     └── styled
    |  |  |        └── StyledButton.tsx
    |  |  └── index.tsx
    |  ├── index.tsx
    |  ├── theme
    |  |  ├── Default
    |  |  |  └── themeDefault.tsx
    |  |  ├── index.tsx
    |  |  └── Interfaces
    |  |     ├── GenericInterface.tsx
    |  |     ├── ModeInterface.tsx
    |  |     ├── SizesInterface.tsx
    |  |     └── ThemeInterface.tsx
    |  └── utils
    |     ├── styled-components.ts
    |     └── validation.tsx
    ├── tsconfig.json
    └── tslint.json

Instalación de la libreria en Proyecto REACT 🔧

    npm install styled-components@4.4.1
    npm install chernobyl-react-ui

Advertencia: -> La libreria de chernobyl-react-ui utiliza styled-components en su versión "4.4.1" por ende el Proyecto REACT debe tener esta misma versión para su uso.

Instalación de packetes e iniciación de Storybook 🔧

    npm install
    npm run storybook

http://localhost:6006 -> Storybook disponibiliza esta ruta para acceder a la vista previa de los componentes que contiene.

Como agregar componentes nuevos 🛠️

Para agregar componentes nuevos debes seguir la misma estructura de los otros componentes.

Ejemplo: -> Button

    ./src/components <- En esta carpeta encontraras todos los componentes.

    src\components
    ├── Buttons
    |  └── Button
    |     ├── Button.stories.tsx
    |     ├── Button.test.tsx
    |     ├── Button.tsx
    |     ├── index.tsx
    |     └── styled
    |        └── StyledButton.tsx
    └── index.tsx

Generar Componentes Y Publicarlos:

    npm run compile
    npm version major | minor | patch
    npm publish

• npm run compile -> Compila todos los archivos de la libreria y GENERA la carpeta BUILD
• npm version -> Como funciona esto?
• npm publish -> Toma la carpeta BUILD ya generada y "ESTA CARPETA" es la que se publica en NPM

Actualizar el repositorio despues de agregar algun componente:

    npm run build-storybook
    git status
    git add .
    git commit -m "mensaje" <- favor describir el commit
    git push

Autor ✒️

• Sergio Andrés Orellana Roa - Edhine - Desarrollador Full Stack - Github

Pendientes 📌

• Generar componentes con CLI.
• Test de componentes.

Retroalimentación

Todo comentario y correcciones, no dudes en mencionarlas 📢, ayudas a mejorar este proyecto ❤.

---

⌨️ con ❤️ por Edhine 😊