devhatt / pet-dex-frontend Goto Github PK

Eu como usuário poderei selecionar o porte do meu pet.

Atente-se que os componentes da tela devem retornar o dado atualizado através de um evento de emitter para o componente pai.
O desenvolvedor deverá utilizar os componentes abaixo para criar esta tela e suas funcionalidades:

• #24
• #23
• #65

Lembre-se que esté componente não compoem a parte superior da progress bar amarela, nem todo o resto que fica a cima da seleção da imagem.

Está parte a baixo não faz parte do componente

Esses componentes serão utilizados em formulários dentro do PetDex para coletar informações específicas, onde a escolha única ou múltipla é necessária.

Os componentes devem ser implementados com acessibilidade em mente, garantindo que possam ser facilmente navegados e utilizados por leitores de tela e teclado. A lógica de estado de erro ainda precisa ser definida.

As representações visuais podem ser encontradas no layout do Figma: Layout PetDex.

Os componentes devem ser responsivos e funcionar de forma adequada em diferentes dispositivos e tamanhos de tela.

O arquivo "fonts.scss" centralizará a gestão das fontes, facilitando a manutenção e promovendo a consistência visual. Será uma referência rápida para os desenvolvedores aplicarem estilos de texto, garantindo que todos os componentes do projeto sigam o mesmo padrão de design tipográfico.

O arquivo "fonts.scss" deve ser criado dentro da estrutura de diretórios do SASS do projeto. Deve incluir variáveis para fontes primárias e secundárias, pesos, tamanhos e estilos. Utilize mixins e funções do SASS para criar estilos facilmente aplicáveis e modulares. Garanta que o arquivo esteja bem comentado, explicando a finalidade de cada seção e como os desenvolvedores devem utilizar as definições.

Certifique-se de que o arquivo "fonts.scss" esteja integrado com o restante da base de código SCSS do projeto. Forneça instruções claras sobre como outros desenvolvedores podem contribuir para o arquivo e manter a consistência e organização à medida que o projeto evolui.

• Listar raça

• Usar a biblioteca axios para fazer as requisições.
• Configurar o main route (para colocar apenas o path e evitar o domain)
• Necessario informar as operações que está sendo executadas no usecase (console.log dos dados, ignorar a regra do eslint no arquivo)
• Usar funções para a criação do serviço (não usar classes)
• O endpoint utilizado será o... (perguntar para o @k1nha )

• Axios
• Promises

Eu como usuário poderei informar alguns cuidados médicos do meu pet como se ele já é castrado, se necessita de cuidados especiais e quais são estes cuidados, e por fim as vacinas que o meu pet tomou.

Atente-se que os componentes da tela devem retornar o dado atualizado através de um evento de emitter para o componente pai.

O desenvolvedor deverá utilizar os componentes abaixo para criar esta tela e suas funcionalidades:

• #109
• #65

Tela versão mobile:

Tela versão desktop:

Lembre-se que esté componente não compoem a parte superior da progress bar amarela, nem todo o resto que fica a cima da seleção da imagem.

Está parte a baixo não faz parte do componente:

Esta página é crucial para engajar novos usuários e direcioná-los para adicionar seus pets à plataforma, sendo um ponto de partida para a interação com o site.

A página deve seguir as diretrizes do layout fornecido, com atenção especial para a acessibilidade e experiência do usuário. O botão "Cadastrar pet" pode ser inicialmente um placeholder, com a necessidade de substituição futura por um componente estilizado.

O design visual do componente pode ser visualizado no Figma: Layout PetDex.

A implementação deve ser feita utilizando as tecnologias padrão do projeto (JavaScript, SASS e HTML). Todos os componentes devem ser testados em diferentes dispositivos para garantir a responsividade e o funcionamento correto.

Eu como usuário poderei adcionar as vacinas que o meu pet tomou.

Este componente é composto por um pequeno card inicial com um botão "Adcionar vacina" o qual é responsável por abrir um drawer onde o usuário poderá selecionar o tipo de vacina, a data em que foi realizada e o veterinário que aplicou.
Após confirmado os dados o drawer fecha e o componente agora apresenta uma tabela com a lista das vacinas cadastradas.

Atente-se na implementação do componente na versão desktop e também na versão mobile.

Versão com nenhuma vacina adcionada:

Drawer de seleção dos dados:

Versão com vacina adcionada:

Esta é uma das telas do fluxo de cadastrar pet. O uso dela é, adicionar a imagem, adicionar o nome e então clicar em continuar pra seguir para a proxima etapa.

Essa tela tem algumas restrições:

• Não é possivel clicar no botão de continuar caso não tenha uma imagem selecionada
• Não é possivel clicar no botão de continuar caso não tenha o nome do pet

É preciso falar com o designer pra saber qual o formato do erro de quando não tem imagem ou nome

Esse componente deve emitir o nome do pet e sua imagem quando elas forem definidas.

Atente-se que os componentes da tela devem retornar o dado atualizado através de um evento de emitter para o componente pai.

Lembre-se que esté componente não compoem a parte superior da progress bar amarela, nem todo o resto que fica a cima da seleção da imagem.

Está parte a baixo não faz parte do componente

A utilização desta extensão permite uma melhor distinção visual das strings de HTML, facilitando a leitura e edição do código. Isso é particularmente útil para desenvolvedores que trabalham com templates ou strings de HTML embutidas no código.

A recomendação da extensão deve ser documentada no README do projeto, incluindo instruções para a instalação manual. Adicionalmente, pode-se considerar a inclusão desta extensão no pacote de extensões do projeto PetDex, caso exista. O link para a extensão é: string-highlight.

Não aplicável para esta tarefa, uma vez que se refere à configuração de ambiente de desenvolvimento.

Qualquer configuração adicional necessária para a integração automática desta extensão no ambiente de desenvolvimento deve ser pesquisada e implementada, assegurando que a extensão funcione corretamente sem conflitos.

Criar a tela usando componentes já feitos na aplicação e criando novos dependendo da demanda de utilização

Quem pegar essa task vai ter que criar essa tela como um componente e se certificar de usar todos os componentes que foram feitos para compor ela.

Componentes já feitos que devem ser usados:

• #20
• #95

ATENÇÃO, A PARTE QUE DEVE SER FEITA É APENAS O QUE ESTÁ NA IMAGEM ABAIXO

Use o figma para se basear nos componentes

Eu como usuário posso clicar no botão "Adcionar amigo" e "Cadastrar pet" e serei redirecionado para a página "Petperfil".

O serviço deve:

• Dar push state e alterar a rota
• Dar pop state e alterar a rota
• Emitir evento de troca de rota

• O serviço deve receber um objeto de configuração com key: value pairs onde a key é uma rota e o value é um componente
• O serviço deve renderizar o componente da rota
• O evento de troca de rota deve emitir a rota atual e a rota anterior
• As rotas devem suportar slug parameter e query string

• É essencial que quem fazer a task fale com o @Alecell e o @diogocaronte
• History API
• Event
• Custom Event
• https://github.com/jscodelover/vanilla-routing

A definição clara e a fácil reutilização de breakpoints são essenciais para um design responsivo eficaz, especialmente quando adotando uma abordagem mobile-first. Ter mixins prontos para uso facilita a implementação de estilos responsivos em todo o projeto e ajuda a manter a consistência e a clareza no código.

Inicie pesquisando breakpoints comuns e relevantes para o projeto, considerando uma variedade de dispositivos e tamanhos de tela. No arquivo "breakpoints.scss", defina variáveis para cada breakpoint (por exemplo, $bp-small: 480px;). Em seguida, crie mixins que utilizam essas variáveis dentro de declarações @media. Por exemplo:

@mixin fromSmall {
  @media (min-width: $bp-small) {
    @content;
  }
}

Certifique-se de que o arquivo "breakpoints.scss" seja bem documentado e explique como e quando usar cada mixin. Teste os mixins para garantir que eles funcionem conforme esperado em diferentes cenários e dispositivos.

Embora esta tarefa não envolva conceitos visuais diretamente, pode ser útil incluir uma tabela ou gráfico no arquivo ou na documentação relacionada que mapeie os breakpoints escolhidos com os dispositivos ou tamanhos de tela correspondentes, proporcionando uma referência rápida para a equipe de desenvolvimento.

Forneça recomendações sobre como adicionar ou ajustar breakpoints no futuro e destaque a importância de manter a consistência na nomenclatura e no uso dos mixins. Inclua também qualquer recurso ou pesquisa que informou a escolha dos breakpoints para oferecer contexto adicional à equipe.

Facilitar o desenvolvimento, teste e documentação dos componentes de UI, proporcionando uma visão clara do comportamento e da aparência de cada componente isoladamente.

Avaliar as ferramentas existentes como Ladle e Storybook para adaptação com Vite, considerar a criação de uma configuração personalizada se necessário para suporte otimizado.

Não aplicável.

É crucial que a solução escolhida seja compatível com nossa stack atual e possa ser integrada sem problemas significativos de desempenho ou compatibilidade.

Ter um arquivo "colors.scss" centralizado ajuda a manter a consistência das cores em todo o projeto, facilita atualizações e alterações no esquema de cores e torna o processo de desenvolvimento mais eficiente. Os desenvolvedores podem referenciar rapidamente as variáveis de cor ao estilizar componentes, garantindo que todos os elementos sigam o guia de estilo definido.

O arquivo "colors.scss" deve ser criado dentro da estrutura de diretórios SCSS do projeto. Declare variáveis para cada cor principal usada no layout, nomeando-as de forma intuitiva e padronizada (por exemplo, $color-primary, $color-secondary, etc.). Inclua comentários explicativos para descrever cada cor e onde ela deve ser aplicada. Garanta que o arquivo seja importado corretamente nos arquivos SCSS principais para que as variáveis de cor estejam acessíveis em todo o projeto.

Inclua uma amostra visual do paleta de cores no arquivo ou na documentação relacionada para fornecer uma referência rápida das cores definidas. Isso pode ser uma simples grade de cores com nomes de variáveis correspondentes ou capturas de tela do layout com anotações sobre quais cores correspondem a quais variáveis.

Forneça orientações sobre como adicionar ou modificar cores no futuro, mantendo a organização e a padronização do arquivo. Inclua também qualquer convenção de nomenclatura ou prática recomendada que os desenvolvedores devem seguir ao trabalhar com o arquivo "colors.scss".

Este componente facilitará o processo de adição de novos pets pelos usuários, melhorando a interatividade e a experiência geral do usuário na plataforma PetDex.

O componente deve ser implementado utilizando HTML, SASS e JavaScript. Deve-se prestar atenção especial à acessibilidade, garantindo que o componente seja facilmente navegável e acessível. A animação de hover deve ser sutil e não comprometer a usabilidade.

O design do componente pode ser encontrado no layout do Figma: Layout PetDex.

A URL de redirecionamento para a página de adição de pet ainda não está disponível e deverá ser solicitada. A implementação da animação de hover e as mudanças de cor também devem ser detalhadas pelo designer.

[Explain the use for this feature and how it might benefits the project.]

[Provide any details or suggestions on how this feature could be implemented.]

[Include any visual representations or concepts if those are available and applicable.]

[Provide any additional information, such as context that might be relevant to the implementation of this specific feature.]

Atentar-se a:

• Título, que será setado por prop
• Botão de fechar no topo da página
• Botão de confirmar no canto inferior do componente, que emitirá ao ser clicado

Desktop visual:

Mobile visual:

Link do figma: https://www.figma.com/file/ZQ5mPH1j2snuiVpkp68EI5/PetDex?type=design&node-id=107-5&mode=design&t=A3aR7erq6Yau3YNW-0

run pnpm test

Esse componente será usado em várias camadas do site uma vez que existem muitos sliders em vários lugares. É util para slidarmos entre conteúdos como um banner, scroll de filmes em coisas como Netflix e etc.

O slider deve ser implementado com a funcionalidade de touch para dispositivos móveis e opções de controle programático. Deve também permitir a personalização dos slides adjacentes e do slide atual de maneira fácil e acessível.

Este componente deve fazer uso da funcionalidade de swipping (#29) que expõe os eventos de swipping, deve aceitar que o seu slide atual seja controlado, ou seja, o slide atual pode ser setado manualmente pelo usuário do componente, também deve expor uma função de next() e prev() onde a pessoa pode, através do componente, ir para o anterior e proximo slide.

O componente em sua instanciação irá receber um array de componentes, cada componente sendo um elemento do slider, no caso, um slide diferente.

Embora não haja uma representação visual do componente de slider em ação, o layout atual pode ser visualizado no Figma: Layout PetDex.

Exemplos:
https://portfolio-git-master-felipeness.vercel.app/testimonials

Deve-se assegurar que o componente seja responsivo e acessível, seguindo as diretrizes de ARIA para componentes de slider.

Este campo de imagem será usado na criação ou edição do perfil de um pet, permitindo que os usuários personalizem o perfil adicionando uma foto.

O campo deve ser implementado com um feedback visual claro para o usuário, tanto para o estado de espera do upload quanto para quando uma imagem é selecionada. A animação de pulsação deve ser suave e não intrusiva.

As representações visuais podem ser encontradas no layout do Figma: Layout PetDex.

O componente deve ser responsivo e acessível, com suporte a leitores de tela e interações via teclado.

A finalidade desta tarefa é de tornar possível a utilização dos breakpoints nas lógicas do projeto.

Os breakpoints definidos estão disponíveis na pasta styles/breakpoints.scss, dentro do projeto.
As informações completas dos breakpoints podem ser visualizadas no pull request da task de criação de breakpoints, neste link.

Em caso de dúvidas, procure o @Alecell ou pergunte durante as dailys.

Criar a tela usando componentes já feitos na aplicação e criando o que for necessário

Quem pegar essa task vai ter que criar essa tela como um componente e se certificar de usar todos os componentes que foram feitos para compor ela.

Quando o valor for inserido no campo de texto ele deve atualizar o valor do range e se mudar o checkbox radius ele deve mudar lá tmb

Componentes já feitos que devem ser usados:

• #24
• #26

ATENÇÃO, A PARTE QUE DEVE SER FEITA É APENAS O QUE ESTÁ NA IMAGEM ABAIXO

Use o figma para se basear nos componentes

O componente será usado em vários formulários da plataforma, permitindo uma experiência de usuário consistente e acessível em todo o projeto.

O input de texto deve ser implementado em HTML, com estilos em SASS e comportamento interativo via JavaScript. O desenvolvedor deve atender aos requisitos de acessibilidade, como etiquetas apropriadas e feedback visual para os estados de erro e foco.

A especificação visual para o componente pode ser encontrada no Figma: Layout PetDex.

As variações de estilo e os estados do componente devem ser claros e distintos para os usuários, seguindo as diretrizes de UI/UX fornecidas.

Basta usar o 'pnpm dev' e tentar abrir a home no navegador.

A barra de progresso será usada para indicar o carregamento ou a conclusão de tarefas, melhorando a experiência do usuário ao fornecer feedback visual imediato.

O componente deve ser desenvolvido utilizando HTML, SASS e JavaScript, assegurando que seja possível sobrescrever estilos por meio de classes SCSS. A transição do progresso deve ser suave e bem animada para melhorar a usabilidade.

Confira o layout no Figma para visualizar o componente: Layout PetDex.

A implementação deve ser consistente com a identidade visual do PetDex e seguir as melhores práticas de acessibilidade web.

O PetCard será utilizado para melhorar a experiência do usuário ao selecionar pets, fornecendo um feedback visual claro de qual pet está selecionado no momento.

O componente deve ser criado usando HTML, SASS e JavaScript, seguindo as diretrizes de design fornecidas no Figma. Deve ser responsivo e acessível, permitindo a navegação tanto por cliques quanto por teclado.

As referências visuais para o componente estão disponíveis no layout do Figma: Layout PetDex.

É importante notificar o designer que a página de layout no Figma está com problemas de scroll, necessitando ajustes para visualização completa do design.

Favicons são elementos críticos na identificação visual de um site nas abas do navegador e na tela inicial de dispositivos móveis. Eles ajudam os usuários a localizar rapidamente o site desejado entre várias abas abertas e a reconhecer o atalho do site em seus dispositivos. Um conjunto completo e bem implementado de favicons melhora a experiência do usuário e reforça a identidade visual do site.

Selecionar uma imagem representativa para ser o ícone do site e usar um gerador de favicon online para criar os vários tamanhos e formatos necessários. Atualize o HTML da página inicial com as tags <link> apropriadas no cabeçalho para apontar para os arquivos de favicon. Assegure-se também de que o arquivo manifest.json está atualizado para refletir os ícones e caminhos corretos, garantindo assim a compatibilidade e funcionalidade em dispositivos móveis e desktops. Teste a implementação em vários navegadores e dispositivos para garantir que os ícones apareçam conforme esperado.

Se possível, inclua exemplos visuais dos favicons em diferentes contextos, como na barra de endereços do navegador, na lista de abas abertas, e como ícones de aplicativos em uma tela de dispositivo móvel. Isso pode ajudar a visualizar como os favicons devem aparecer em diferentes plataformas.

Forneça orientações sobre como escolher a imagem correta para o favicon, recursos para gerar os ícones e instruções detalhadas sobre como testar sua implementação. Inclua qualquer outra informação que possa ser útil para quem está realizando a tarefa, como dicas de melhores práticas ou links para documentação relevante.

O slider será utilizado em diversas partes do PetDex para permitir uma navegação intuitiva e direta entre conteúdos relacionados, como seleção de categorias de pets, galerias de imagens, entre outros.

O slider deve ser implementado com a funcionalidade de touch para dispositivos móveis e opções de controle programático. Deve também permitir a personalização dos slides adjacentes e do slide atual de maneira fácil e acessível.

Embora não haja uma representação visual do componente de slider em ação, o layout atual pode ser visualizado no Figma: Layout PetDex.

Deve-se assegurar que o componente seja responsivo e acessível, seguindo as diretrizes de ARIA para componentes de slider.

Quando uma pessoa comenta Eu quero!!! é executado uma action que da assign a pessoa que comentou e responde com os links de guidelines.

Deve-se criar o componente de calendário e integrar com alguma biblioteca de data do Js

Algumas bibliotecas que podemos usar:

• DayJS
• DateFNS

A escolha ficará por conta de quem pegar a task e ESPECIFICAR O PORQUE ESCOLHEU X LIB

Será necessário fazer uso de componentes já criados:

• #94
• #28

[Provide any additional information, such as context that might be relevant to the implementation of this specific feature.]

[Explain the use for this feature and how it might benefits the project.]

[Provide any details or suggestions on how this feature could be implemented.]

[Include any visual representations or concepts if those are available and applicable.]

[Provide any additional information, such as context that might be relevant to the implementation of this specific feature.]

O componente de toggle é como um checkbox. Seguir as diretrizes do layout e do material design. https://m3.material.io/components/switch/overview

Eu como dev, preciso de um componente que me habilite um evento de ativação e desativação de funcionalidades. Esse componente deve ser visual.

O componente deve emitir os eventos de ativo e desativado para serem escutados externamente ao componente.

Icones não devem ser suportados.

A "bolinha" deve animar de um lado para o outro e não apenas mudar bruscamente como um "teleporte".

O componente será utilizado no cadastro inicial do Pet para permitir uma navegação intuitiva, fazendo assim uma seleção sim e adequada do Pet

O componente deve ser implementado com a funcionalidade de touch para dispositivos móveis e opções de controle programático.

Embora não haja uma representação visual do componente em ação, o layout atual pode ser visualizado no Figma: Layout PetDex.

Deve-se assegurar que o componente seja responsivo e acessível, seguindo as diretrizes de ARIA para componentes de select.

O uso deste menu lateral aprimora a navegação do usuário, facilitando o acesso às diferentes seções da aplicação de maneira intuitiva e confortável em dispositivos móveis e desktops.

O menu deve ser implementado utilizando tecnologias web padrão, como HTML, SASS e JavaScript, garantindo a compatibilidade entre diferentes navegadores e dispositivos. Deve-se atentar para a usabilidade e acessibilidade, assegurando que o menu seja facilmente navegável por teclado e leitores de tela.

Referência visual do componente pode ser encontrada no layout do Figma: Layout PetDex.

O desenvolvimento deste componente deve seguir as diretrizes de código existentes, respeitando os padrões de projeto e garantindo a manutenção do código DRY. A implementação deve ser testada em diferentes dispositivos para garantir a responsividade e funcionamento adequado do efeito drawer.

Esta funcionalidade é útil para usuários que estão registrando por Pets de raças específicas, facilitando a busca e tornando a experiência do usuário mais eficiente e agradável. Por exemplo, um usuário que deseja registrar um Labrador Retriever poderá facilmente filtrar a lista de Pets disponíveis para incluir apenas aqueles que se encaixam na sua preferência de raça, simplificando posteriormente o processo de busca.

A implementação deverá envolver a criação de um componente de UI para o botão de filtro que, ao ser clicado, exibe um dropdown contendo as opções de raças de Pets. Este dropdown deve ser dinâmico, carregando as opções disponíveis a partir de uma fonte de dados. Será necessário trabalhar em conjunto com o backend para garantir que as raças de Pets possam ser devidamente filtradas com base na seleção do usuário.

Figma do projeto: https://www.figma.com/file/ZQ5mPH1j2snuiVpkp68EI5/PetDex?type=design&node-id=1010%3A1889&mode=dev&t=GRgL4KmmdlOZjaxR-1

Exemplo do dropdown:

Botão Filtro:

Botão pos Filtro:

É importante que a pessoa encarregada desta task entre em contato com a equipe para discutir as opções de filtro e garantir que todas as opções relevantes sejam incluídas. Além disso, a integração com funcionalidades de filtro existentes em outras telas do projeto deve ser cuidadosamente planejada para manter a consistência e usabilidade em toda a aplicação.