Cadastro de Empresas

O cadastro de empresas permite que a pessoa usuária leia, filtre, crie, atualize e delete empresas de um banco de dados.

Para criar empresas, deve-se clicar no botão "Adicionar Empresas". Para filtrar, deve-se usar o campo de "Buscar Empresas". Para atualizar ou deletar, deve-se clicar na empresa presente na lista. Todas as ações são intuitivas e têm ações de hover e foco, para auxiliar a pessoa usuária. O conteúdo do modal varia de acordo com o contexto em que é acionado.

Como rodar este projeto

• É necessário ter a versão 18 ou maior do Node
• Digite npm i no seu terminal na raiz do projeto
• Execute npm run dev e abra o localhost na porta indicada no terminal

Observações

• O design usa a fonte Roboto. A fonte Roboto Flex é melhor para performance, tendo a mesma aparência que a Roboto. Estruturei o CSS de forma que, caso a equipe de design tivesse qualquer restrição ao uso da Roboto Flex, fosse possível alterar para Roboto com apenas uma linha de código.

$ff-sec: var(--roboto);
$ff-sec: var(--roboto-flex);

• As fontes variam a partir de 1600px de largura. A técnica para mudança de fonte permite alterar as fontes em apenas um lugar e cascatear para todo o projeto.

:root {
	--fs-1: #{pxToRem(12)};
	--fs-2: #{pxToRem(13)};
	--fs-3: #{pxToRem(14)};
	--fs-4: #{pxToRem(16)};
}

@media (min-width: 100em) {
	:root {
		--fs-1: #{pxToRem(16)};
		--fs-2: #{pxToRem(20)};
		--fs-3: #{pxToRem(22)};
		--fs-4: #{pxToRem(24)};
	}
}

• O header acopanha a largura da tela de forma fluida, e as imagens também. Caso a equipe de design deseje manter a largura das imagens fixa, bastaria apagar as larguras em porcentagem.

• Implementei o placeholder do input como uma label para melhor acessibilidade Referências: https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text https://www.smashingmagazine.com/2018/06/placeholder-attribute/

• Modal é aberto com a função nativa showModal(). Para isso utilizei o hook useRef, garantindo que não haja interação com o restante da página. Além disso o modal pode ser fechado com esc e com o clique fora da caixa de diálogo Referências: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

• A página foi testada com zoom de 200%, fonte padrão de 32px https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html

• A página foi testada com navegação apenas pelo teclado, permitindo que usuários que não conseguem usar o mouse tenham acesso a todas as funcionalidades

Tarefas

• Fazer configuração do Prettier e ESLint;
• Criar Reset CSS;
• Criar estrutura de tipografia;
• Estabelecer cores
• Estabelecer containers
• Criar componente header
• Criar componente Filtro
  • Basic layout
  • Set handle change
  • Set label animation
  • Set focus and hover outline for accessibility
  • Add icon
• Criar componente Adicionar Empresa
  • Criar classe para formato do botão
  • Adicionar ícone à classe utilitária
• Criar Lista de empresas
• Criar componente modal
  • Fazer Mecanismo de abertura do modal
  • Fazer Modal fechar com esc e clicando fora dele
  • Layout do modal
  • Garantir que modal continue funcional com zoom e fonte base de 32px
  • Outline do modal seguindo padrão da página
  • Aria label no botao de fechar
  • Cursor pointer nas labels
  • Adicionar padding aos inputs
• Itens da lista trazidos automaticamente pela API
• Inclusão, Edição, e exclusão de empresas
• Ação de filtro
• Exclusão de empresa
• Edição de empresas

Melhorias futuras

• Aplicar debounce no filtro para reduzir quantidade de requisições
• Fazer requisição inicial no servidor para melhorar o tempo de carregamento inicial
• Submissão dos dados com enter mesmo sem foco no input