Este boilerplate foi criado a partir do Create React App já ejetado.
Tabela de conteúdo
- Estrutura de pastas
- Scripts Disponíveis
- Executando Testes
- 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 Jest
Teste interativo
TODO: Exemplificar o uso do Jest
Teste 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 em stories/App.js.
Adicionando Stylesheets
Para adicionar stylesheets ao componente, basta importá-lo com import './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 scsse 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 privado gtxagency.
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 pasta src, 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 execute npm 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 execute npm version 0.1.0, substituindo o 0.1.0 pela versão correspondente.
Execute npm publish.
######GTX e-Commerce Agency