O desafio da semana será implementar os componentes de Checkout do MUI usados no desafio da semana passada, utilizando styled-components
.
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
dostyled-components
noApp.js
, e passe otheme.js
recém criado como prop para ele.
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
etest
no package.json para utilizarreact-app-rewired
em vez dereact-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.
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
paraInput
;Typography
paraText
;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.
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.
- 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 componentesText
eButton
em qualquer lugar que houver ocorrência de texto ou botões. A partir de agora qualquer texto deve ser usado através do componenteText
. - 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.
- 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.
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".
- 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
etheme
- Do ITCSS para Componentes React