Criando safe components com Emotion e TypeScript
Emotion é uma dentre várias bibliotecas CSS-in-JS que nos permite criar componentes estilizados, onde você não desenvolve componentes baseado nas suas classes ou tags HTML e sim encapsula todo o estilo no componente.
Safe Componentes
Criar componentes com Emotion não tem muito segredo, porém quando falamos de safe components estamos falando de tentar criar componentes que nos garantam um mínimo de segurança em relação às propriedades que são passadas para ele. É aqui que o TypeScript entra em jogo. Por JavaScript ser uma linguagem fracamente tipada, ou seja, não conseguimos fazer uma checagem estática dos tipos das variáveis declaradas, isso é feito dinamicamente. TypeScript veio para adicionar mais confiabilidade incluindo tipagem mais forte e checagem estática.
Uma vez declarada uma variável com um tipo em uma linguagem fortemente tipada, ela sempre terá esse tipo até o fim de seu ciclo. Logo se tivermos operações entre tipos diferentes, teremos erros de compilação.
Tendo isso como base, podemos usar o TypeScript para tipar nossos componentes usando interfaces.
Uma interface é um contrato que o componente assina. No mundo do React, é tudo que ele recebe como propriedade.
Até aqui tudo bem, mas cadê a vantagem disso tudo? A vantagem, é que quando não seguimos o contrato (interface) que é esperado, evitamos erros em tempo de execução, pois o compilador do TypeScript é inteligente o suficiente para identificar que o contrato foi quebrado, e barrar a compilação.
Agora vamos tentar passar uma propriedade que não existe na interface ButtonProps para o nosso componente, o compilador irá reclamar dizendo que essa propriedade não existe na interface:
Temas com Emotion
Quando trabalhamos com Emotion, temos a possibilidade de adicionar temas para padronizar e modularizar o estilo dos nossos componentes. Para isso, temos a biblioteca emotion-theming.
Vamos entender como esse cara funciona e como ele pode nos ajudar de uma maneira simples e fácil.
1) ThemeProvider
ThemeProvider é um componente React que recebe um objeto que representa nosso tema ou uma função como propriedade e o repassa para toda a árvore de componentes via contexto.
Criando um tema na prática teremos o seguinte código:
Se uma função é passada para o ThemeProvider, o tema pai sempre será passado para a função como argumento, logo podemos reaproveitá-lo e adicionar novas propriedades gerando um novo tema.
2) withTheme
withTheme é um HOC que fornece o tema atual para o nosso componente como props, se o tema for atualizado, todos os filhos serão atualizados com as mudanças necessárias.
Conclusão
Emotion não é a única biblioteca que auxilia na construção de temas e estilos dos nossos componentes, o importante é entender o poder que essas bibliotecas tem e como você pode usá-las para resolver os seus problemas no dia a dia.
Juntei todos esses conceitos de temas e componentes e fiz uma aplicação para exemplificar melhor tudo isso:
