# 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?](https://docs.npmjs.com/cli/version)_
*   **npm publish** -> _Toma la carpeta **BUILD** ya generada y "ESTA CARPETA" es la que se publica en [NPM](https://npmjs.com)_

**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](https://github.com/Edhine)

## 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](https://github.com/Edhine) 😊