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, Material-UI e Material-UI Pickers 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.

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.