Este boilerplate foi criado a partir do Create React App já ejetado.
Roda o modo de desenvolvimento do componente.
Abra http://localhost:3000 para ver no browser.
A página recarregará com novas mudanças. Você verá erros do ESLint no browser e warnings no console.
Executa os testes em modo watch.
Veja a seção Executando Testes para mais informações.
Executa o teste visual.
Monta o build do componente, na pasta
Obs.: Como os pacotes são exportados para o repositório NPM em modo de desenvolvimento, os arquivos são versionados ainda em
Tabela de conteúdo
- npm start - npm test - npm run storybook - npm run build - Teste Estrutural - Teste Interativo - Teste Visual- Adicionando Stylesheets
- Pré e Pós-Processamento de CSS
- Adicionando SVG
- Publicação e Atualização dos componentes
Estrutura de pastas
O diretório inicial do projeto:my-app/
README.md
.storybook/
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
stories/
App.js
Scripts Disponíveis
No diretório do projeto, você pode executar:npm start
Roda o modo de desenvolvimento do componente.
Abra http://localhost:3000 para ver no browser.A página recarregará com novas mudanças. Você verá erros do ESLint no browser e warnings no console.
npm test
Executa os testes em modo watch.
Veja a seção Executando Testes para mais informações.npm run storybook
Executa o teste visual.npm run build
Monta o build do componente, na pasta build
, para produção.
No fluxo de produção atual da GTX, este script não tem aplicação, pois o deploy para produção é feito na etapa de implementação dos produtos e não na confecção dos pacotes.Executando Testes
Os testes de rotina de nossos componentes se dividem em três fases atualmente:Teste estrutural
TODO: Exemplificar o uso do JestTeste interativo
TODO: Exemplificar o uso do JestTeste visual
Nesta etapa, usamos o pacote react storybook. A partir dele, exibimos um mapa dos diferentes estados possíveis do componente. Para adicionar novos estados ao componente atual, seja sagaz e siga o padrão estabelecido emstories/App.js
.Adicionando Stylesheets
Para adicionar stylesheets ao componente, basta importá-lo comimport './stylesheet.scss'
.
O Webpack se encarregará de injetar o css dinamicamente no modo de desenvolvimento.
Ao importarmos o componente na etapa de implementação, sua stylesheet será concatenada automaticamente no bundle da implementação.Pré e Pós-Processamento de CSS
Atualmente, utilizamos o Sass para pré-processamento do css. No pós-processamento, utilizamos o PostCSS apenas para o autoprefixer das propriedades.Obs.: Como os pacotes são exportados para o repositório NPM em modo de desenvolvimento, os arquivos são versionados ainda em
scss
. Dessa forma, na etapa de implementação, o Webpack é capaz de processar os arquivos e concatenar e minificar para o bundle. É importante lembrar que, hoje, nossa implementação suporta apenas scss
, devendo, assim, todos os nossos componentes serem exportados com scss
e NÃO css
puro.Adicionando SVG
A importação de SVG acontece da mesma forma das stylesheets. Sem muito mistério. O trabalho com imagens dentro destes componentes (que serão publicados no NPM) é um fator ainda a ser testado e estruturado.Publicação e Atualização dos componentes
Todos os nossos componentes são privados e, de forma alguma, devem ser publicados em repositórios públicos. Seus repositórios devem ser devidamente direcionados para nosso Bitbucket e seus pacotes NPM publicados em nosso repositório privadogtxagency
.O que é publicado?
Como nossos pacotes tem o objetivo de serem usados na etapa de implementação, eles não tem a necessidade de serem publicados em modo de produção, como definido no nosso fluxo de trabalho. O que é, de fato, publicado no NPM é a pastasrc
, com exceção dos arquivos index.scss
, index.js
, que são usados pelo Webpack apenas para o modo de desenvolvimento local. Os arquivos de teste também não são publicados.Publicando o Pacote
No terminal executenpm login
e insira as credenciais solicitadas.
Verifique a versão no package.json
.
Certifique-se que o nome do pacote siga o padrão @gtxagency/gtx-component-boilerplate
. O texto entre @
e /
é o escopo do repositório. Isso é importante porque todo pacote com um escopo declarado é considerado privado.Atualizando o Pacote
No terminal executenpm version 0.1.0
, substituindo o 0.1.0
pela versão correspondente.
Execute npm publish
.