DS Repositories Icons

O projeto foi criado para flexibilizar e agilizar o processo de criação de SVGs em componentes React.

O projeto está em uma estrutura de _mono repositório_ (_monorepo_), ou seja, dentro desse repositório temos mais de um projeto.
Essa abordagem facilita a concentração de projetos relacionados, facilitando a manutenção.

$3

O repositório possui cinco projetos:

``js

$ tree -L 1 packages/

packages
├── preview
├── react-icons
├── teste
├── ts-test
└── webpack4-test

`

* preview: Esse é um projeto em react, que renderiza os ícones do gerados pelo projeto react-icons gerando um site estático. Seu principal propósito é servir de documentação para o consumo dos ícones.
react-icons: Esse projeto é responsável por converter os arquivos .svg em componentes React. É dele que geramos o pacote no NPM vindi-ds-icons e disponibilizamos para serem utilizados.
* teste: É um projeto simples, criado para testar a importação e exibição dos ícones da biblioteca publicada.
* ts-teste: Projeto que testar os ícones (em WIP)
webpack4-test: Projeto que testar a conversão dos arquivos .svg em componentes React.

$3

Ao clonar o projeto, rode os seguintes comandos:

`js
yarn / Instalando todas as dependências do projeto /
cd packages/react-icons
yarn build / Criando os componentes React a partir dos svgs /
`

> Em caso error de dependências, rode novamente o comando yarn na pasta do projeto com erro

$3

Ao instalar as dependências e criar os componentes, rode os comandos abaixo para rodar o site:

`js
cd ../preview
yarn start / Rodas a aplicação no endereço http://localhost:3000 /
`

$3

Ao acessar o site, após buildar e não aparecer o ícone, devemos remover o .next para que os novos ícones possam ser visualizados

`js
cd ../preview
rm -rf .next
yarn start / Rodas a aplicação no endereço http://localhost:3000 com os novos ícones/
`

$3

Esse projeto distribuímos dois artefactos:

- pacote NPM: vindi-ds-icons
- site: http://vindi-icons-staging.s3-website-us-east-1.amazonaws.com/

#### Deploy manual do pacote NPM

Para executar o processo manual de distribuição do pacote npm, siga as instruções:

1. Acesse a pasta do projeto react-icons

`
cd packages/react-icons
`

2. Atualize a versão do pacote

`
yarn version
`

3. Build o projeto

`
yarn build
`

4. Faça login na conta NPM do time de DS (solicite as credenciais com o time pelo slack)

`
npm login
`

5. Publique o projeto

`
npm publish
`

Pronto, uma nova versão do pacote foi publicada.

Link de acesso: https://www.npmjs.com/package/vindi-ds-icons

#### Deploy manual do site

Para executar o processo manual de distribuição do site, siga as instruções:

1. Configuração da AWS CLI

Para realizar o deploy é necessário configurar o AWS CLI, para isso vai ser necessário criar chaves de acesso ou utilizar as já existentes.

Configure as credenciais das contas AWS no arquivo ~/.aws/credentials seguindo o modelo abaixo:

`
[vindi-dev]
aws_access_key_id =
aws_secret_access_key =
region = us-east-1
`

2. Atualize o site com a versão mais nova do pacote vindi-ds-icons no package.json
3. Rode o projeto para validar o pacote
4. Gere o site estático

`
yarn build
`
5. Com a pasta out gerada com sucesso, execute o comando

`
yarn deploy
`

Pronto, uma nova versão do side deve ter sido publicada.

Link de acesso: http://vindi-icons-staging.s3-website-us-east-1.amazonaws.com/

Em caso de falha, contacte o time de DS pelo slack

Processo de adição de um novo ícone

Para adicionar um novo ícone, siga os passos:

1. Acesse a pasta de ícones do projeto react-icons ou acesse o link
2. Escolha em qual pasta se enquadra o novo ícone.

> Caso seja necessário criar um nova pasta
> clique em Add file e na opção Create new file
> na barra de criar o nome do arquivo, digite o nome da pasta e termine com nome_da_pasta/.keep
> e clique em Commit new file
3. Ao entrar na pasta escolhida, clique em Add file e selecione Upload files
4. Selecione os arquivos e clique em Commit change` para salvar