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.

Estrutura

O repositório possui cinco projetos:

$ 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.

Primeiros passos

Ao clonar o projeto, rode os seguintes comandos:

  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

Preview do Site

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

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

Erro para renderizar algum ícone no site

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

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

Distribuições

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