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
- Instalação
Na primeira utilização e sempre que necessário rode o comando abaixo:
yarn install
- Storybook
Rode o comando abaixo para rodar o storybook e visualizar os componentes.
yarn storybook
- Build
Rode o comando abaixo para buildar o app utilizando o Rollup.
yarn build
- Teste
Rode o comando abaixo para rodar os testes do Jest.
yarn test
- 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
- Adicione a biblioteca em seu projeto utilizando o comando abaixo.
yarn add @eureca/eureca-ui
- Adicione as dependências do projeto.
$ yarn add -D prop-types
$ yarn add @material-ui/core @material-ui/pickers styled-components
- 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"
/>
-
Adicione os
Providers
do Styled-Components, Material-UI e Material-UI Pickers no arquivo principal do seu projeto. -
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.
Release
O release é feito utilizando o release-it
.
- Ao rodar o comando
yarn deploy
, o released-it desencadeia eventos:yarn lint
,yarn test
. - Se ambos passarem, ele gera um
changelog
com os commits aprovados desde o último deploy. - Algumas informações sobre o deploy são solicitadas, como: próxima versão e informações de git.
- Após todos os passos, o pacote será publicado no
NPM
.