Criar Avatar- Criar código do componente
Objetivos
- Disponibilizar componentes flexíveis e reutilizáveis em diferentes tecnologias.
- Facilitar a aderência às diretrizes do Padrão Digital de Governo, mesmo que de forma parcial quando o usuário precisar customizar algo que não siga 100% o DS.
Lembretes
- Os exemplos no site do DS não são excludentes! São apenas um guia do que é possível ser feito, mas não abrangem todas as possibilidades.
- Não complique o componente. Inclua 'slots' para que o usuário insira o conteúdo desejado em vez de colocar essa responsabilidade dentro do componente.
- Sempre crie eventos nas interações do usuário com os componentes.
- Disponibilize métodos para facilitar algumas interações com os componentes.
Analises
Para criar o componente, é necessário realizar uma análise inicial para planejá-lo e dividir seu desenvolvimento em tarefas menores (issues). Depois dessa análise inicial, ao pegar uma issue para implementar, uma análise mais aprofundada da issue específica precisará ser feita. Abaixo, detalhamos essas duas etapas de análise:
Análise Inicial
O objetivo da análise é criar uma especificação do componente de forma a auxiliar o desenvolvimento.
Nessa etapa nós precisamos avaliar o seguinte:
- Tem dependências de outros componentes e/ou externas?
- Quais áreas vamos poder flexibilizar o uso?
- Áreas de conteúdo por exemplo devemos flexibilizar para o usuário incluir o conteúdo sempre que possível
- Outras áreas/funcionalidades podem ser flexibilizadas?
- Vamos criar subcomponentes para facilitar o uso igual ao DS?
- Quais os atributos padrão do HTML que vamos ou não dar suporte?
Peça ajuda dos designers e/ou outros desenvolvedores para decidir sobre o que pode ser flexibilizado e colher opiniões sobre métodos, props, etc. Não faça a análise e o desenvolvimento sem antes ter um feedback.
Tarefas
-
Fazer a análise do componente conforme descrição acima. -
Criar issues para separar as tarefas conforme a análise. -
Faça uma estimativa inicial de tempo/esforço para cada issue criada. -
Linkar todas as issues criadas entre sí e com outras issues já criadas no projeto.
Análise das Issues
O objetivo da análise é criar uma especificação do componente de forma a auxiliar o desenvolvimento.
Nessa etapa nós precisamos avaliar o seguinte:
- Análise inicial para essa issue está válida?
- Quais serão as props?
- Quais métodos vamos disponibilizar?
- Quais eventos vamos disponibilizar?
- Vamos possibilitar que alguns templates sejam sobrescritos? Como por exemplo os itens do select.
- Fazer uma estimativa de esforço atualizada
Peça ajuda dos designers e/ou outros desenvolvedores para decidir sobre o que pode ser flexibilizado e colher opiniões sobre métodos, props, etc. Não faça a análise o desenvolvimento sem antes ter um feedback.
Tarefas
-
Documentar eventos, props, slots, descrição, métodos, etc... -
Incluir tag HTML e informações pertinentes na documentação gerada automaticamente. -
Criar testes unitários. -
Criar testes E2E. -
Criar teste de acessibilidade. -
Criar documentação no Site. -
Criar exemplos no ambiente de desenvolvimento. -
Testar exemplos no StackBlitz. -
Criar documentação sobre 'Como migrar'.
Checklists
Além das tarefas, observe o checklist abaixo para garantir que as mudanças geradas atendam aos requisitos mínimos do nosso projeto.
Componentes
-
Comentários desnecessários foram removidos (nunca deixar código comentado apenas para 'não perder'). -
Testar build dos webcomponents, wrappers. -
Comportamento igual ao GovBR-DS. -
Visual igual ao GovBR-DS.
Site
-
Sem links quebrados. -
Testar build do site. -
Sem erros de ortografia. -
Página segue o padrão das demais.
Lints
-
Códigos e conteúdos passam nos lints. -
Commits seguem os padrões definidos pelo projeto e descrevem bem as mudanças que foram feitas no projeto. - Não esqueça de usar os tipos corretos, definir os escopos e preferencialmente colocar descrições breves e longas descrevendo tudo que foi feito!
- Use o escopo 'no-release' para que o commit seja ignorado do semantic-release.
Merge Requests
- Os MRs devem ser revisados por todos os integrantes do time.
- Vocês podem solicitar revisão por algum designer para tirar dúvidas.