Pular para o conteúdo principal

Guia de Contribuição

Obrigado pelo interesse em contribuir para o Animalia DS!

Código de conduta#

Primeiramente, pedimos para que leiam com atenção nosso Código de Conduta para se inteirarem sobre nossas regras.

Fluxo#

Este guia tem por objetivo definir as regras para criação de Issues relacionadas à melhorias ou defeitos na biblioteca, assim como orientar no interesse em colaborar com o Animalia DS, definindo premissas para criação de novas Branchs, Pull Requests e Commits no projeto Animalia.

Criando uma issue no GitHub#

  • Antes de tudo, se você possui alguma questão relacionada ao uso do design system, bem como dúvidas relacionadas a componentes, por favor pergunte nos nossos canais de comunicação.

  • A lista de issues do repositório Animalia DS é de uso exclusivo para informe de bugs e requisições de melhorias. Issues que não se enquadrarem nisso serão fechadas imediatamente.

  • Se você tem uma nova feature para nos sugerir ou então deseja reportar um bug, por favor avalie se nas Pull Requests do Animalia DS não tem nenhuma submissão anterior que resolva o problema, eliminando assim a eventual hipótese de duplicidade.

  • É requerido que você descreva de maneira clara os passos necessários para reproduzir a issue reportada. Entenda que, apesar de sermos sempre solícitos e darmos o pronto-apoio em nossos canais, reproduzir erros sem evidências diretas tomam um grande tempo da equipe.

  • As issues que não tiverem uma descrição detalhada e um passo-a-passo para reprodução terão menor prioridade. Se em caso de solicitação do core team por maiores evidências, o autor da issue terá 30 dias para resposta. Se neste período não houver qualquer resposta, então a issue será fechada.

Criando reprodução de código para nova issue#

  • Crie uma nova aplicação em TypeScript incluindo o componente e o comportamento reportado para nossa análise.

  • Adicione o mínimo de código necessário para reprodução do bug, facilitando assim a verificação da situação.

  • Publique a aplicação no GitHub e inclua o link ao criar a issue.

  • Certifique-se de incluir os passos para reprodução da issue. Estes passos devem ser claros e simples de seguir.

Colaborando com o Animalia DS#

Mais uma vez agradecemos por dedicar seu tempo para contribuir com o Animalia DS! Antes de submeter uma pull request, pedimos pra que você crie uma issue reportando uma eventual sugestão de melhoria, nova funcionalidade ou correção de bug e nos deixe ciente de que deseja criar uma pull request para isso. Caso se trate de uma issue já existente, por favor comente na issue. Isso nos ajuda a acompanhar as pull requests e também evitar duplicidades.

Setup Inicial#

Este projeto usa o gerenciador de pacotes NPM e a ferramenta Lerna para instalar e gerenciar suas dependências. Para começar, siga as instruções abaixo:

  1. Certifique-se de ter o Node.js e o NPM instalados em sua máquina. Você pode instalá-los a partir do site oficial: nodejs.org

  2. Clone o nosso repositório em sua máquina por meio do link: https://github.com/animaliads/animalia-web-components

saiba mais em como clonar um repositório do Github.

  1. Uma vez clonado o projeto, abra um terminal na raiz do projeto e execute o comando:
npm install

Este comando instalará todas as dependências do projeto listadas no arquivo package.json.

  1. Em seguida, instale a ferramenta Lerna globalmente usando o comando:
npm install -g lerna
  1. Agora, execute o seguinte comando para inicializar o ambiente de desenvolvimento e instalar as dependências em todos os pacotes do projeto:
lerna bootstrap
  1. Após a instalação das dependências, execute o seguinte comando para compilar o código:
lerna run buid

Este comando compilará o código em todos os pacotes do projeto.

  1. Por fim, execute o seguinte comando para iniciar o Storybook:
npm run storybook

Este comando iniciará o Storybook em seu navegador para visualizar e testar os componentes do projeto.

Com esses passos, você terá instalado todas as dependências e configurado o ambiente de desenvolvimento para trabalhar no projeto.

Estrutura do Repositório#

Aqui está uma visão geral da estrutura do repositório:

├── assets/
│ └── ...
├── components/
│ ├── src/
│ │ ├── components/
│ │ │ ├── accordion/
│ │ │ │ ├── ...
│ │ │ ├── button/
│ │ │ │ ├── ...
│ │ │ └── ...
│ ├── dist/
│ │ ├── accordion/
│ │ │ ├── ...
│ │ ├── button/
│ │ │ ├── ...
│ │ └── ...
│ ├── README.md
│ └── ...
├── docs/
│ ├── README.md
│ └── ...
├── scripts/
│ ├── build.js
│ ├── publish.js
│ └── ...
├── tests/
│ ├── components/
│ │ ├── accordion/
│ │ │ ├── ...
│ │ ├── button/
│ │ │ ├── ...
│ │ └── ...
│ ├── utils/
│ │ ├── ...
│ ├── jest.config.js
│ └── ...
├── .babelrc.js
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── package.json
├── README.md
├── tsconfig.json
└── webpack.config.js

Descrição da Estrutura#

Pasta/ArquivoDescrição
assets/Contém arquivos de imagem e outros ativos utilizados pelos componentes.
components/Contém todo o código fonte para cada componente do projeto, organizado por tipo de componente (ex. accordion, button, card, etc.).
components/src/Contém o código fonte dos componentes em si.
components/dist/Contém as versões compiladas dos componentes, prontas para uso em um projeto.
components/README.mdContém informações sobre como utilizar os componentes.
docs/Contém a documentação do projeto.
docs/README.mdContém informações gerais sobre o projeto, incluindo uma introdução, instruções de instalação e uso, etc.
scripts/Contém scripts para construir e publicar o projeto.
tests/Contém os testes automatizados do projeto.
tests/components/Contém os testes unitários para cada componente.
tests/utils/Contém funções utilitárias compartilhadas pelos testes.
tests/jest.config.jsContém as configurações para o framework de testes Jest.
.babelrc.jsArquivo de configuração do Babel.
.eslintrc.jsArquivo de configuração do ESLint.
.gitignoreArquivo de configuração do Git para ignorar certos arquivos/diretórios.
LICENSEArquivo de licença do projeto.
package.jsonArquivo de metadados do projeto, incluindo as dependências, scripts de build, etc.
README.mdArquivo principal com informações gerais sobre o projeto.
tsconfig.jsonArquivo de configuração do TypeScript.
webpack.config.jsArquivo de configuração do Webpack.

Link úteis#