thalos-env/trailerflix-frontend

Um serviço de streaming voltado para trailers de diversos filmes. Sendo construído em React com TypeScript, Storybook, Testing-Library e Jest.

trailerflix-frontend

Configurando Ambiente

Recomendações

Criar um Perfil (Profile) no VSCode para evitar que alguma configuração do settings.json, Eslint, Prettier, EditorConfig, dê conflitos

• Arquivo > Preferências > Perfil > Criar Perfil

---

Tecnologias utilizadas

Para instalar as dependências:

npm install

• storybook
• react router dom
• testing library
• styled-components
  • jest-styled-components
• styled-icons
• plop
• eslint
• prettier
• husky
• lint staged
• editor config

---

Extensões para instalar

• ESLint
  • https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Prettier - Code formatter
  • https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• vscode-styled-components
  • https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
• EditorConfig for VS Code
  • https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

---

Gerar arquivos para componentes automaticamente

Para gerar uma pasta contendo 4 arquivos do componente automaticamente basta usar o comando abaixo colocando o nome do componente desejado.

npm run generate [NOME DO COMPONENTE]

O comando irá gerar a pasta contendo os 4 arquivos abaixo.

.
├── Component
│   └── Component.stories.tsx
│   └── Component.test.tsx
│   └── index.tsx
│   └── styles.ts

PS: o próprio plopfile.js já coloca em Pascal Case.

---

Commits Semânticos

link para consulta: https://blog.geekhunter.com.br/o-que-e-commit-e-como-usar-commits-semanticos/

tipos:

1. build: alterações que afetam o sistema de construção ou dependências externas;
2. docs: referem-se a inclusão ou alteração somente de arquivos de documentação;
3. feat: tratam adições de novas funcionalidades ou de quaisquer outras novas implantações ao código;
4. fix: essencialmente definem o tratamento de correções de bugs;
5. perf: uma alteração de código que melhora o desempenho;
6. refactor: tipo utilizado em quaisquer mudanças que sejam executados no código, porém não alterem a funcionalidade final da tarefa impactada;
7. style: alterações referentes a formatações na apresentação do código que não afetam o significado do código;
8. test: adicionando testes ausentes ou corrigindo testes existentes nos processos de testes automatizados (TDD);
9. chore: atualização de tarefas que não ocasionam alteração no código de produção, mas mudanças de ferramentas, mudanças de configuração e bibliotecas que realmente não entram em produção;
10. env: utilizado na descrição de modificações ou adições em arquivos de configuração de parâmetros em arquivos de configuração.
11. ci: alteração nos scripts ou arquivos de configuração CI.

trailerflix-frontend's Issues

feat: Home

Ajustar Input para Styled-Components

Bagde: Criar componente

Modal Trailers

Modal para mostrar os Traillers quando o usuário clicar no card do trailler ou no botão "VER AGORA"

Atualizar storybook: essentials e controls

Knobs será descontinuado na versão 7 e o essentials otimiza o uso de addons

• essentials
• controls

Cards: Criar componente

Mapear os componentes da tela inicial

A partir de 03/04:

• Carrossel Horizontal;
  • Título;
  • Carrossel de cards;
  • Setas de paginação;
  • Paginação por bullets (?)
• Footer

Criar a staging

Customização de video do youtube

Customização da api do youtube, utilizando o react-youtube

Testes: renderWithTheme

React Testing Library e o Jest Styled-Components, devem renderizar o componente com o ThemeProvider em boa parte dos testes de estilos. Por isso, precisa de um componente para "substituir" o render padrão.

• Configurar novo componente de testes: renderWithTheme.

Fix: Button OnlyIcon

O Button no modo "onlyIcon", tem 3 variações: a default toda azul (primary), toda branca (white) e a transparente com bordas (outline). Na terceira opção, o ícone diminui de tamanho levemente em relação as outras duas (em amarelo).

• Debuggar a causa
• Deixar o icone do mesmo tamanho das demais

Cadastro

Cadastro na aplicação

• Name
• E-mail
• password

feat: configurar PWA

Menu Header: Criar

Componentes para Criar:

• Avatar;
• NavItem;
• SearchInput;
• NavBar;
• Logo;
• Div com Search, Minha lista e Avatar;
• MenuHeader.

Carousel: Ajustar comportamento

O Carrosel deve ter um comportamento circular, retornando ao primeiro item quando clicar no último e vice-versa.

feat: responsividade da home

Hero: Criar componente

Criar

• H1
• Parágrafo para descrição
• Background

Incrementar o READme

• Tecnologias utilizadas
• Modo de rodar o projeto (configuração do ambiente)

Carrossel: Criar Componente

Acrescentar:

• Setas
• Título da sessão
• Carrossel em si

Componente: Button

Fix: remover onClick do args do Icon

Atualmente o stories do Icon > Default se encontra assim, pois ao usar {...args} é enviado uma função a prop de onClick fazendo o componente Icon acionar estilizações de hover e cursor pointer.

• Verificar como o args funciona
• Configurar o args para enviar apenas aquilo que foi definido

export const Default: Story<IconProps> = (args) => {
  return (
    <StoryContainer>
      <Icon icon={args.icon} color={args.color} sizeRem={args.sizeRem} />
    </StoryContainer>
  )
}
Default.args = {
  icon: 'add',
  color: 'primary',
  sizeRem: '5rem',
}

Button: adicionar testes

Adicionar testes unitários e testes de estilos ao Button (após a issue #15 )

Footer: Criar componente

Icon: Componente genérico para todos os ícones

Criar componente: Input

pesquisar sobre manitest.json

Configurar o ambiente de desenvolvimento

Configurar:

• Eslint + Prettier
• husky + lint-staged
• Storybook
• Styled-Components
• Testing-Library
• react-router-dom

Mover routes para uma pasta

Configuração Front end

Login

Login da aplicação

TMDB: Consumir API com Axios

• Configurar o axios na pasta services;
• Consumir a api TMDB.

Criar o theme do projeto

ButtonProps: cor ao icone

Quando estiver no modo de "onlyIcon" e na variação "outline", o button pode receber a cor na qual o icone vai estar. Por padrão, pode ser o ciano do theme.ts.

• Verificar o layout no Figma: Components > Button;
• Icone pode receber uma cor;
• Verificar onde fica melhor essa prop.