refactor: improve accessibility, maintainability, scalability and UI/UX

[sluucke]

Descrição

Olá, boa tarde.
Neste PR estou enviando algumas refatorações e melhorias na UX e acessibilidade no frontend do sistema.
O objetivo inicial é trocar todos os modais do sistema adicionando mais acessibilidade, por exemplo, fechar ao clicar no overlay ou ao pressionar a tecla "ESC", além disso, reestruturações no código para que obtenha uma melhor performace e que fique mais manutenível e escalável a longo prazo. Ressalto aqui pequenas mudanças na interface, alterei alguns icones da parte que já foi refatorada, agora em vez de imagens, para manter a qualidade utilizo o react-icons que conta com diversos ícones de fabricantes diferentes, partirculamente utilizei os ícones Feather (react-icons/fi).

Alterações

• Refatorar área de seleção de disciplinas
• Alterar ícones da interface (em progresso)
• Refatorar área de geração da grade
• Refatorar área de grades (visualização de grades geradas anteriormentes)
• Refatorar requisições da API (expected to use react-query)
• Refatorar formulários e validações (expected to use react-hook-form)

Ilustrações das alterações:

Conjunto de imagens no Imgur com comentários

Tipo de alteração

• Bug fix (alteração que corrige um problema)
• New feature (alteração que adiciona funcionalidade)
• Breaking change (correção ou funcionalidade que altera o comportamento de outras partes do sistema de maneira significativa)
• Documentation update (alteração na documentação)

Como isso foi testado?

• Testes e2e manuais
• Testes automatizados (que já haviam anteriormente)

Checklist

• Meu código segue as diretrizes de contribuição deste projeto
• Realizei uma revisão pessoal do meu código
• Comentei meu código, especialmente em áreas de difícil compreensão
• Fiz alterações correspondentes na documentação
• Minhas alterações não geram novos warnings ou erros
• Adicionei testes que comprovam que minha correção é eficaz ou que minha funcionalidade está funcionando corretamente
• Todos os testes unitários novos e existentes passam localmente com minhas alterações

[vercel]

@sluucke is attempting to deploy a commit to the Sua Grade UnB Team on Vercel.

A member of the Team first needs to authorize it.

[mateusvrs]

Boa noite @sluucke.
Agradeço muito a contribuição, me aparentam ser de extrema qualidade. Nisso, peço desculpas pela demora, mas ainda ao final dessa semana volto com um retorno indicando possíveis melhorias ou apenas aprovando o PR.

[sluucke]

Boa noite @sluucke. Agradeço muito a contribuição, me aparentam ser de extrema qualidade. Nisso, peço desculpas pela demora, mas ainda ao final dessa semana volto com um retorno indicando possíveis melhorias ou apenas aprovando o PR.

Beleza Mateus, fique despreocupado quanto a demora ainda tenho que finalizar os meus ajustes também. Assim como você acredito que também finalizo boa parte até o final dessa semana, agradeço pela resposta, até breve.

[sluucke]

Boa noite senhores, finalizei o objetivo inicial do PR com esse ultimo commit 63d5d4e que contém alterações significativas na página de visualização da grade e a correção de alguns bugs que haviam ficados para trás em outros commits. Informo também que se for permitido, pretendo mover os itens

Refatorar requisições da API (expected to use react-query)
Refatorar formulários e validações (expected to use react-hook-form)

para outro PR devido a grande quantidade de mudanças breaking change, além disso também é possível dividir em tarefas caso participar do desenvolvimento direto dessas alterações. Também atualizei as imagens das alterações no Imgur.

Att.
David W. L. Ferreira
@mateusvrs @artrsousa1

[mateusvrs]

Boa tarde @sluucke, fiz uma revisão do seu PR e sugeri algumas modificações simples para manter a qualidade do código que estão relacionadas a alguns imports inutilizados no início de alguns arquivos, assim como a implementação de uma melhor acessibilidade nos icones adicionados por meio de atributos alt ou aria-label. Além disso, verifiquei algumas inconsistências no layout da aplicação que foram destacadas nos seus respectivos arquivos. Por fim tenho mais 2 observações gerais sobre melhorias no layout.

1. No modo de visualização da grade horária no ambiente mobile o botão de fechar a visualização está fora do canto esquerdo no qual seria o ideal, dando um aspecto não muito agradável para a situação, Aqui está:

Além disso, na versão original da aplicação havia uma margem entre a borda real do aparelho e o Modal da grade horária apresentada, da seguinte maneria:

Acredito que mante-la, mesmo que menor deixe um aspecto um pouca mais agradável sem uma sensação de falta de espaço.

2. No navegador Mozilla Firefox Snap for Ubuntu canonical-002 - 1.0 Versão 129.0.1 (64-bit). A página de pop-up utilizada para escolher a grade apresenta um comportamento estranho assim que clicamos na seleção de Ano/Período, visto que a mesma é fixada no mouse e não para de ser animada até o momento em que clicamos novamente sobre o pop-up, mesmo que já tenhamos escolhido o Ano/Período. Observe o vídeo:

Screencast.from.14-08-2024.15.25.39.webm

[codeclimate]

The PR diff size of 5432 lines exceeds the maximum allowed for the inline comments feature.

[codeclimate]

The PR diff size of 5432 lines exceeds the maximum allowed for the inline comments feature.

[codeclimate]

The PR diff size of 5432 lines exceeds the maximum allowed for the inline comments feature.

[sluucke]

Boa tarde @sluucke, fiz uma revisão do seu PR e sugeri algumas modificações simples para manter a qualidade do código que estão relacionadas a alguns imports inutilizados no início de alguns arquivos, assim como a implementação de uma melhor acessibilidade nos icones adicionados por meio de atributos alt ou aria-label. Além disso, verifiquei algumas inconsistências no layout da aplicação que foram destacadas nos seus respectivos arquivos. Por fim tenho mais 2 observações gerais sobre melhorias no layout.

1. No modo de visualização da grade horária no ambiente mobile o botão de fechar a visualização está fora do canto esquerdo no qual seria o ideal, dando um aspecto não muito agradável para a situação, Aqui está:

Além disso, na versão original da aplicação havia uma margem entre a borda real do aparelho e o Modal da grade horária apresentada, da seguinte maneria:

Acredito que mante-la, mesmo que menor deixe um aspecto um pouca mais agradável sem uma sensação de falta de espaço.

2. No navegador Mozilla Firefox Snap for Ubuntu canonical-002 - 1.0 Versão 129.0.1 (64-bit). A página de pop-up utilizada para escolher a grade apresenta um comportamento estranho assim que clicamos na seleção de Ano/Período, visto que a mesma é fixada no mouse e não para de ser animada até o momento em que clicamos novamente sobre o pop-up, mesmo que já tenhamos escolhido o Ano/Período. Observe o vídeo:

Screencast.from.14-08-2024.15.25.39.webm

Olá Mateus agradeço pelas revisões, acabo de enviar alguns commits com as devidas correções solicitadas, peço que analise novamente por favor. Destaco aqui algumas alterações: adicionei o a11y como configuração do eslint para facilitar o desenvolvimento dos principios e padrões de acessibilidade determinados pelo a11y project. O bug do actionsheet com o firefox e outros navegadores foi corrigido, além disso refatorei o componente de select que eu havia mencionado, deletei as importações inutilizadas que foram destacados bem como os arquivos.

[codeclimate]

The PR diff size of 5432 lines exceeds the maximum allowed for the inline comments feature.

[codeclimate]

The PR diff size of 5432 lines exceeds the maximum allowed for the inline comments feature.

[codeclimate]

The PR diff size of 5431 lines exceeds the maximum allowed for the inline comments feature.

[codeclimate]

The PR diff size of 5431 lines exceeds the maximum allowed for the inline comments feature.

[codeclimate]

The PR diff size of 5429 lines exceeds the maximum allowed for the inline comments feature.

[codeclimate]

The PR diff size of 5429 lines exceeds the maximum allowed for the inline comments feature.

[mateusvrs]

Boa tarde @sluucke, peço desculpas pela demora novamente!
Mas estou verificando as modificações logo mais dou o retorno, mas dessa vez me parece ótimo, apenas uma única possível modificação que ainda estou validando.

[codeclimate]

The PR diff size of 5430 lines exceeds the maximum allowed for the inline comments feature.

[codeclimate]

Code Climate has analyzed commit bf6e342 and detected 0 issues on this pull request.

View more on Code Climate.