trainee-css-in-js.md

Trainee - CSS-in-JS

Desafio

O desafio da semana será implementar os componentes de Checkout do MUI usados no desafio da semana passada, utilizando styled-components.

Task 1: Setup do Styled Components e Tema

Considerando o desafio da semana passada.

• Instale o pacote styled-components.
• Crie um arquivo theme.js no root da pasta /src exportando um objeto com as seguintes propriedades (cada uma dessas propriedades do tema deve ser utilizada sempre com suas respectivas propriedades CSS):
  • colors:
    • color;
    • backgroundColor.
  • space:
    • margin;
    • padding;
    • margin-left;
    • padding-left;
    • exemplo: space: [0, 4, 8, 16, 32, 64]
  • fonts:
    • font-family.
  • fontSizes:
    • font-size.
    • exemplo: fontSizes: [12, 14, 16, 20, 24, 32]
  • fontWeights:
    • font-weight.
  • radii
    • border-radius.
  • zIndices
    • z-index.
  • sizes:
    • width;
    • height;
    • min-width;
    • etc.
• Importe o ThemeProvoder do styled-components no App.js, e passe o theme.js recém criado como prop para ele.

Task 2: Prop CSS e Styled System

Vamos começar a utilizar a função css do Styled System para facilitar o desenvolvimento, mas para isso, precisamos instalar o plugin do babel para styled-components customizando o create-react-app.

• Instale os seguintes pacotes como dependência de desenvolvimento:
  • customize-cra
  • react-app-rewired
  • babel-plugin-styled-components
• Instale o pacote da função css do styled system @styled-system/css;
• Crie um arquivo .babelrc no root do projeto com o seguinte conteúdo:

  {
    "plugins": [
      "babel-plugin-styled-components"
    ]
  }

• Crie um arquivo config-overrides.js tambem no root do projeto com o seguinte conteúdo:

  const {useBabelRc, override} = require('customize-cra');
  
  // eslint-disable-next-line react-hooks/rules-of-hooks
  module.exports = override(useBabelRc());

• Altere os scripts start, build e test no package.json para utilizar react-app-rewired em vez de react-scripts.

🟢 Teste suas alterações criando um styled-component para usar com a função css em algum lugar da app. Todos os testes existentes devem continuar passando.

Task 3: Criando Componentes Base

Todos os componentes reescritos devem respeitar a mesma API de props do respectivo componente do MUI. Não necessariamente todas os props, mas pelo menos as utilizadas no componente de Checkout. Em caso de dúvidas sobre as props suportadas, consulte a documentação do componente em: https://mui.com/components.

Os componentes reescritos devem ser:

• TextField para Input;
• Typography para Text;
• Button.

Eles devem ser criados numa pasta src/components, contendo um arquivo para cada componente, com um barrel file para poder importalos facilmente em outros lugares.

Sinta-se a vontade para alterar a estilização do componente ou tentar replicas os estilos do Material UI. Lembrando que a UI sempre deve ser concisa, e utilizar os valores do tema. Isso será importante para a última tarefa.

Para quem for replicar os estilos do MUI, não é necessário fazer a label flutuante, porém, é um desafio de estilização bem legal a ser encarado.

Altere tambem todos os estilos globais presentes no arquivo index.css para o createGlobalStyle, sempre usando os valores do tema.

🏆 Bonus: Grid para Flex

Como um desafio extra, crie um componente Flex e substituia todos os usos de Grid no Checkout para usar este componente.

🟢 Escreva testes de snapshot para todos os componentes reescritos.

Task 4: Refatorando Checkout com Componentes Customizados

• Refatore o componente Checkout e todos seus sub-componentes para utilizar os componentes reescritos.
• Refatore o componente Store e todos seus sub-componentes para utilizar pelo menos os novos componentes Text e Button em qualquer lugar que houver ocorrência de texto ou botões. A partir de agora qualquer texto deve ser usado através do componente Text.
• Faça com que o background do site seja setado através de um valor vindo do tema. Podendo ser diretamente no body, ou componentes individuais.

🟢 Todos os testes existentes devem continuar passando.

Task 5: Dark Theme

• Adicone um botão no componente App, para fazer troca de tema. Ao clicar nesse botão, seu conteúdo deve ser alterado entre "Light" ou "Dark", de acordo com o tema selecionado.
• Este botão deve receber um onClick com uma função que registre o tema selecionado, os valores do tema devem ser alterados de acordo, podendo inverter os brancos para cores escuras e vice versa. Faça com que altere a cor de fundo do site, e a cor de todos os textos.
  • Evite alterar as valores dos componentes, faça com que os componentes usem apenas valores do tema, e ao alterar de light para dark, apenas o tema deve ser modificado. Então para essa tarefa será aceito alterações nos componentes apenas para refatorar o uso de variáveis.
• O tema selecionado deve ser salvo no localStorage, para quando o usuário der um refresh ou fechar e abrir o site, sempre permanecer com o último tema selecionado.
• Faça todas o gerencimento de estado da troca do tema através de um custom hook chamado useTheme, esse hook deve retornar alguma propriedade contendo o tema atual, e uma função para altera-lo.

🏆 Bonus: Multíplos Temas

Adicione mais temas ao clicar no botão, com diferentes cores além de light e dark.

🟢 Adicione testes no App para garantir que ao clicar no botão de troca de tema sua label seja alternada entre "Light" e "Dark".

CSS-in-JS

• Bibliotecas Disponíveis
  • Styled Components
  • Emotion
  • Styled JSX
• Síntaxes de Como Escrever
  • Template String
  • Objetos
  • Prop css
  • Extendendo Componentes
• Prop as
• ThemeProvider
• `createGlobalStyle
• Acessando props e theme
• Do ITCSS para Componentes React

Material de Apoio e Referências

• Comparativo de Bibliotecas
• Análise de CSS-in-JS do CSS Tricks
• Análise mais em Detalhes
• História e Comparativos
• Docs Styled Components
• Styled Components Babel Plugin
• Styled System CSS