Este boilerplate foi criado a partir do Create React App já ejetado.

Tabela de conteúdo

• Estrutura de pastas
• Scripts Disponíveis
  • npm start
  • npm test
  • npm run storybook
  • npm run build
• Executando Testes
  • Teste Estrutural
  • Teste Interativo
  • Teste Visual
• Adicionando Stylesheets
• Pré e Pós-Processamento de CSS
• Adicionando SVG
• Publicação e Atualização dos componentes
  • Publicando o Pacote
  • Atualizando o Pacote

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