Este boilerplate foi criado a partir do [Create React App](https://github.com/facebookincubator/create-react-app) já ejetado.

## Tabela de conteúdo

- [Estrutura de pastas](#markdown-header-estrutura-de-pastas)
- [Scripts Disponíveis](#markdown-header-scripts-disponiveis)
  - [npm start](#markdown-header-npm-start)
  - [npm test](#markdown-header-npm-test)
  - [npm run storybook](#markdown-header-npm-run-storybook)
  - [npm run build](#markdown-header-npm-run-build)
- [Executando Testes](#markdown-header-executando-testes)
  - [Teste Estrutural](#markdown-header-teste-estrutural)
  - [Teste Interativo](#markdown-header-teste-interativo)
  - [Teste Visual](#markdown-header-teste-visual)
- [Adicionando Stylesheets](#markdown-header-adicionando-stylesheets)
- [Pré e Pós-Processamento de CSS](#markdown-header-pre-e-pos-processamento-de-css)
- [Adicionando SVG](#markdown-header-adicionando-svg)
- [Publicação e Atualização dos componentes](#markdown-header-publicacao-e-atualizacao-dos-componentes)
  - [Publicando o Pacote](#markdown-header-publicando-o-pacote)
  - [Atualizando o Pacote](#markdown-header-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](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](#markdown-header-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](https://github.com/kadirahq/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](https://github.com/sass/node-sass) para pré-processamento do css.
No pós-processamento, utilizamos o [PostCSS](https://github.com/postcss/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 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](http://gtx.ag/)