@eureca/eureca-ui/README.md

UI component library of Eureca's user and admin apps

# Eureca-UI

# Aplicação

Código fonte da biblioteca de componentes compartilhados pelos projetos da Eureca.

# Utilização do Storybook e Build

## Ambiente

> Todas as instalações de bibliotecas devem ser feitas apenas com o `Yarn`.

A biblioteca necessita de alguns pacotes instalados em seu projeto `React` para seu funcionamento, esses pacotes estão configurados como peer dependencies. São eles:

- `PropTypes`

```
prop-types
```

- `Material-UI`

```
@material-ui/core
```

- `Material-UI Lab`

```
@material-ui/lab
```

- `Material-UI Pickers`

```
@material-ui/pickers
```

- `Styled Components`

```
styled-components
```

## Scripts

1. Instalação

Na primeira utilização e sempre que necessário rode o comando abaixo:

```
yarn install
```

2. Storybook

Rode o comando abaixo para rodar o storybook e visualizar os componentes.

```
yarn storybook
```

3. Build

Rode o comando abaixo para buildar o app utilizando o Rollup.

```
yarn build
```

4. Teste

Rode o comando abaixo para rodar os testes do Jest.

```
yarn test
```

5. Release

Rode o comando abaixo para rodar a interface de linha de comando para release.

```
yarn release
```

## Storybook

O `Storybook` é utilizado no app como uma plataforma de documentação e testes de componentes. Toda referência de uso, implementação e exemplo de dados de entrada dos componentes pode ser vista aqui. Pode ser iniciado em paralelo com o app.

## Rollup

Utilizado para gerar o bundle da biblioteca de componentes.

## ESLint

Utilizamos no projeto uma versão adaptada das regras de lint disponibilizadas pelo `Airbnb`. As configurações de eslint podem ser encontradas no arquivo `package.json` na chave `eslintConfig`.

# Utilização da Biblioteca

1. Adicione a biblioteca em seu projeto utilizando o comando abaixo.

```
yarn add @eureca/eureca-ui
```

2. Adicione as dependências do projeto.

```
$ yarn add -D prop-types
$ yarn add @material-ui/core @material-ui/pickers styled-components
```

3. Importar as fontes e o css utilizados no projeto. Copiar o código abaixo e adicionar no arquivo HTML do projeto que irá utilizar a biblioteca.

```
<!-- Google Web Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>

<!-- FontAwesome Fonts -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />

<!-- Carousel CSS -->
<link
  rel="stylesheet"
  type="text/css"
  charset="UTF-8"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
```

4. Adicione os `Providers` do [Styled-Components](https://styled-components.com/docs/api#themeprovider), [Material-UI](https://material-ui.com/customization/theming/#theme-provider) e [Material-UI Pickers](https://material-ui-pickers.dev/getting-started/installation) no arquivo principal do seu projeto.

5. Em seu aplicativo importe o componente ou tema que deseja usar utilizando a forma padrão do ES6.

```
import { Button } from '@eureca/eureca-ui'
```

# Pipelines e Deploy

## Pipelines e Pre-Commit

- **Husky**: Execução do Prettier ao fazer um commit
- **ESLint**: Execução do ESLint
- **Testes**: Execução dos testes com Jest
- **Vercel Now**: Deploy automático

## Deploy

O deploy do app é feito automaticamente no `Zeit Now` a cada merge aprovado na branch develop. Caso o pipeline passe normalmente o merge é aceito e a versão do `Zeit Now` é atualizada com o código mais recente.

https://eureca-ui.now.sh/

## Release

O release é feito utilizando o [`release-it`](https://github.com/release-it/release-it).

1. Ao rodar o comando `yarn deploy`, o released-it desencadeia eventos:`yarn lint`,`yarn test`.
2. Se ambos passarem, ele gera um `changelog` com os commits aprovados desde o último deploy.
3. Algumas informações sobre o deploy são solicitadas, como: próxima versão e informações de git.
4. Após todos os passos, o pacote será publicado no [`NPM`](https://www.npmjs.com/package/@eureca/eureca-ui).