React: desenvolvendo uma biblioteca de componentes

Preparando o terreno - Apresentação

Olá, seja muito bem-vindo e bem-vinda a essa primeira aula deste curso, sobre como criar uma biblioteca de componentes utilizando React. E eu vou aproveitar esse ensejo para dar um disclaimer.

Se você ainda não conhece o React, ou se você ainda não sabe como utilizar TypeScript no React, pausa um pouco, dá uma olhada na formação que temos na Alura, que é justamente uma formação de React com TypeScript, você vai ter vários cursos legais lá, alguns cursos meus, alguns cursos do Luís, alguns cursos do Fábio, e você vai ter a bagagem necessária, a base necessária para você tirar 100% de proveito desse curso, que é o primeiro curso de uma nova formação, utilizando React com TypeScript.

Eu estou te dizendo isso, porque alguns conceitos mais básicos vão passar batido, porque eu estou assumindo que você que está me acompanhando já sabe React, e já sabe criar componentes com React. Então, o nosso foco vai ser criar essa biblioteca de componentes. Então, vamos para o nosso cenário de por que nós precisamos criar uma biblioteca de componentes customizada.

Vamos trabalhar durante toda a formação no projeto AluraBooks, que consiste em um e-commerce de livros, vendendo os livros da Casa do Código. Então, ela é uma aplicação rica, um layout bonito, tem uma identidade visual já pronta, então não teríamos nada nem parecido para utilizarmos. O nosso layout é muito específico.

E para conseguirmos ter o embasamento necessário, vamos criar uma biblioteca de componentes, que vai prover esses componentes para nós, e quando estivermos trabalhando na aplicação, todos os componentes visuais já vão estar prontos, fora da caixa, não vamos nos preocupar sobre como implementar um input, como vai ser a borda, ou layout.

Vamos nos preocupar em utilizar esses componentes, e manter uma aplicação com uma boa arquitetura. Então, para termos essa biblioteca de componentes pronta, vamos desenvolvê-la do zero. Então, eu separei alguns componentes, alguns vamos desenvolver juntos, outros você vai desenvolver sozinho nos desafios. Então, tem um Figma separado, fica tranquilo que ele vai ficar disponível para você na atividade “Preparando o Ambiente”, então você vai ter o Figma do projeto inteiro, e você vai ter o Figma de alguns componentes que vamos trabalhar durante esse curso.

Além disso, também vamos precisar utilizar uma ferramenta chamada Storybook, que é justamente uma ferramenta que vai nos ajudar a criar essa coleção de componentes, e deixá-la bem documentada, para qualquer pessoa que venha a utilizar, saiba como funciona, como é a documentação, como é a interface de uso, com determinados componentes.

Preparando o terreno - O primeiro componente

Agora você já deve estar no mesmo passo que eu, que é o comando que terminou de rodar e instalar todas as dependências. Isso vai nos dar a base para começarmos a desenvolver os nossos componentes. Então, vamos colocar a mão na massa.

Eu vou entrar na pasta cd alurabooks-ds, “alurabooks” é o nome do projeto, “ds” é de “design system”, vou abrir o VSCode nessa pasta, então eu vou rodar o comando code ., para ele abrir o VSCode com a pasta disponível, e vou rodar o yarn storybook, para ele subir a aplicação com o Storybook já configurado, e com o componente que ele traz de exemplo por padrão.

Isso vai ficar rodando na porta 6006 da minha máquina do localhost. Vou abrir uma nova aba, vou acessar a 6006, e repara que tem uma estrutura de pastas, tem um “welcome”, tem um default, e tem um componente que diz “the snozzberries tastelike snozzberries”, e tem uma pasta de documentação, isso é tudo do Storybook, e já está tudo pronto, fora da caixa, é só usarmos.

Então, vamos para o código, dentro da pasta “SRC”, vou criar uma pasta chamada “componentes”, dentro dessa pasta, eu vou criar um novo arquivo, só que dentro de uma outra pasta chamada “AbBotao”, e nela eu vou criar um “index.tsx”.

Eu vou usar essa prefixo “AB”, de Alura Books, antes de todos os componentes, para evitar conflitos. Então, quando usamos algum prefixo, ou algum sufixo, evitamos possibilidade de conflito de nome. Imagina que alguém está usando a nossa biblioteca, e já tem um componente de botão, e vai ter o botão por padrão, vai ter o botão do Alura Books, e começa a colidir, então vamos fazer uma programação um pouco mais defensiva, e vamos trabalhar com prefixo nos nossos componentes, vamos começar todos eles por “AB”.

Então, é um componente React, sem novidade, vou fazer um import do React em si, e vou fazer um export de uma constante, vou chamar de “AbBotao”, essa constante vai receber uma arrow function, e eu vou retornar um botão do HTML, com o texto “Clique aqui”, então export const AbBotao = () => {, embaixo return (<button>, Clique aqui, </button>. Isso que vou fazer, um componente React simples.

E agora, no “index.tsx”, além de exportar o que ele já está exportando, que é aquele componente de exemplo, vamos ignorar isso por enquanto, vamos fazer o export de todas as coisas que estiverem dentro do ./componentes/AbBotao, export * from ./componentes/AbBotao. E agora, vamos criar a nossa história do Storybook, porque através da história, que o Storybook vai saber renderizar e preparar esse botão para a parte da documentação, vamos documentar o nosso componente.

Então, dentro de “stories”, vou criar um novo arquivo, vou chamá-lo de “AbBotao.stories.tsx”. E como vamos estruturar, vamos exportar essa história? A primeira coisa que eu vou fazer é o import do React, a segunda coisa que eu vou fazer é um export default { de um objeto, e esse objeto é um } as ComponentMeta, vamos fazer o import na mão. Então import { } from ‘@storybook/react’.

E eu quero import { ComponentMeta } from ‘@storybook/react. Esse ComponentMeta recebe um tipo, } as ComponentMeta<typeof AbBotao>. Ele não fez o import, vamos fazer import { AbBotao } from ‘../src’. Fiz o import do botão, fiz o import do ComponenteMeta, agora tem poucas coisas que precisamos fazer. Primeiro é definir um title, e eu vou pedir para ele organizar dentro da pasta de componentes um espaço para o AbBotao, title: ‘Componentes/AbBotao’, e vou dizer que component: AbBotao.

E estamos falando de Storybook, estamos escrevendo uma história de acordo com o que o Storybook pede, então, vou criar uma constante const Template: ComponentStory<typeof AbBotao> => () => <AbBotao />. Então, o template é um ComponentStory do AbBotao, que recebe uma arrow function, que retorna o AbBotao renderizado. Então, temos um template base para o nosso botão.

E vamos fazer mais um export const Primario = Template.bind({}), e a princípio, não vai ter argumento nenhum, vamos recapitular isso que fizemos. Fizemos os devidos imports, deixamos exportando por padrão um ComponentMeta de AbBotao, criamos um template que é um ComponentStory do AbBotao, retornando o botão renderizado de fato. Esse é o template base. E agora, para exportarmos o componente, eu chamei de primário, eu poderia chamar de qualquer nome. E vou passar o template.bind, ou seja, o template que acabamos de gerar, mas sem sobrescrever nada.

Salvei, e agora eu vou no navegador. Vou recarregar a página, agora eu tenho um component, e tenho o AbBotao, e repara que o primário respeita o nome da minha constante, que se eu mudar para “Secundário”, por exemplo, ele vai fazer o reload, vou recarregar a página, e ele mostra “secundário”. Então, ele respeita o nome da minha constante. Vou voltar para o primário, ele está dizendo que não tem mais stories que fazem match com esse componente, porque renomeamos, mas ele mostra o “primário”.

E ele já dá alguma coisa, ele está dizendo que não tem controles configurados, mas ele dá uma documentação, inclusive se eu clicar em “Show code”, ele vai me dizer o que eu tenho que fazer para ter esse componente renderizado.

Então, agora que já temos uma base pronta e já temos o componente onde precisamos, temos que evoluir, e fazer com que ele fique parecido com o que temos no Figma de componentes. Na parte de botão, temos um principal e um secundário, e é esse comportamento que temos que ter. O hover no primário vai para um tom mais escuro, e o secundário, que é outlined, ele só tem a borda de fora, mudamos também a cor da borda e a cor da fonte. Então, vamos aprender como vamos trabalhar e como vamos adicionar estilos aos nossos componentes, mas isso é só no próximo vídeo.

Preparando o terreno - Estilos com Styled

Hora de adicionar estilo. Vamos pegar o botão principal e deixá-lo bonito igual ao do Figma. E para fazer isso, existem várias formas diferentes, mas a que vamos utilizar no decorrer deste curso é uma biblioteca chamada Styled Components. Então, tem o site deles, “style-components.com”, você vai acessar essa mesma página que eu, vou para a página de documentação, e vou primeiro na página de instalação, que está dizendo que para você instalar, você roda o yarn add styled-component. Vou fazer um “Ctrl + C” nesse comando, e vou no terminal, vou abrir uma aba diferente, e vou pedir para ele fazer yarn add styled-components no meu projeto.

Enquanto ele está instalando, tem um detalhe a mais, que precisamos tomar cuidado, porque usamos TypeScript. Então, na página inicial de documentação, tem uma parte chamada “API Reference”, e tem “TypeScript”, e ele está falando para adicionarmos os types do Styled Components, é @types/styled-components, então, vamos a isso.

No terminal eu vou fazer um yarn add -D @types/styled-components, que é justamente o que vamos precisar em tempo de desenvolvimento, por isso eu coloquei o -D. Vou deixá-lo carregar, instalou tudo que eu precisava, está fazendo o build. O projeto ainda está rodando, só vou parar e rodar de novo para ter certeza que nada quebrou, está fazendo o build, está andando. Vamos na nossa história, vou carregar, e ele mostra o componente, o código, e está tudo funcionando como deveria.

Então, agora vamos para a parte de estilo. Basicamente, temos até um exemplo na própria documentação, vamos fazer um styled. o nome da div, vai passar a crase, e vai colocar o nosso CSS dentro. Então, o que temos que fazer é que o botão padrão do HTML fique com a cara do nosso componente do design system, da nossa biblioteca.

Então, no Figma eu já vou pegar a cor do fundo, e vou começar a estilizar. Então, dentro de “SRC > componentes > AbBotao > index.tsx”, e eu vou criar uma const botaoEstilizado = styled.button, e ao invés de usar o button do HTML, eu vou usar o botão estilizado. E podemos escrever CSS à vontade, então, vou colocar um background para ele, background: #EB9B00;, vou pegar o padding também, o Figma não vai me dar o número exato, mas ele vai me dizer que o topo é 16, a lateral ele está me dando 24, mas está deixando um espaçamento entre a última letra do texto, então vou trabalhar com 16 para cima e para baixo, e 32 para a esquerda e para a direita.

Então, ele vai me dar um padding: 16px; 32;. E pelo que ele está me mostrando, a borda é da mesma cor, então, eu vou colocar border: #EB9B00, vamos ver qual é o tamanho da borda, pelo que eu estou vendo, ele não vai nos dar o número exato, não conseguimos pegar exatamente o tamanho da borda, mas eu vou no “olhômetro”, me parece ser de dois pixels, então border: 2px solid EB9B00. Vou salvar isso, e vamos ver como ele vai começar a aparecer.

Temos que dizer que a cor da fonte é branca, color: #FFF. Vou salvar, vamos no nosso Storybook, e já está mais parecido com o que precisamos. Agora vamos para o tamanho da fonte no componente de login, ele está nos dizendo que o tamanho da fonte é de 20 pixels. Então, font-size: 20px;. Já está mais parecido ainda, agora vamos fazer um cursor: pointer:, para ficar com a seta do mouse em cima.

Repara que eu salvo, e ele já faz o rebuild, então, o Storybook tem um hot reload parecido com o que temos no React. Então, já está lá, o que temos que fazer agora, é esse estado de Hover, o hover tem uma cor um pouco diferente. Vamos utilizar esse hover que ficou faltando, esse mais escuro. Então, eu vou fazer o “Ctrl + C” da cor que ele está me mostrando no Figma, vou no VSCode, e para fazer a parte de hover, é um CSS normal, &:hover {, background: #EB9B00, e vamos mudar também a cor da borda, para ficar com a mesma cor, border: 2px solid #EB9B00.

Vou salvar isso, vamos para o navegador, e ver se isso funciona. No nosso Storybook já está funcionando, já tem o hover, então, já temos um componente estilizado, usando Styled Component. E vou abrir mais um parêntese, vamos usar Styled Component no decorrer do curso, mas não vou entrar em detalhes a fundo em como ele funciona, mas se você tiver essa curiosidade, e ainda não conhecer essa biblioteca, eu vou deixar uma atividade linkando para um curso na Alura, em que o foco dele é você aprender as várias dicas e truques relacionado ao Styled Component, para você se aprofundar um pouco mais, para você dar um mergulho mais fundo.

Mas nesse caso, vamos utilizá-lo mesmo. Então, a grosso modo, para estilizar o componente fazemos o import dele, dizemos qual é a tag HTML que queremos utilizar, isso é uma função que recebe como argumento o CSS direto. Então, é assim que ele funciona a grosso modo, se você quiser um mergulho um pouco mais profundo no Styled Component, vou deixar para você um link para um curso focado nessa biblioteca.

Então, agora que já temos o primeiro componente configurado, estilizado, pronto para entrar em produção, vamos testá-lo localmente, e conseguimos testar antes de pensar em publicar o nosso pacote. Então, para testarmos esse componente de forma local, vamos ter um macete, o projeto já está pronto para isso, e vamos fazer isso na próxima aula.

Sobre o curso React: desenvolvendo uma biblioteca de componentes

O curso React: desenvolvendo uma biblioteca de componentes possui 135 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Preparando o terreno
• Do VSCode para o mundo
• Testando a biblioteca
• Evoluindo a biblioteca
• Automatizando tarefas