React: desenvolvendo design tokens com styled-components

Tokenizando nosso projeto - Apresentação

Olá, estudante! Meu nome é Pedro, sou instrutor de front-end na Alura, e gostaria de te dar boas-vindas a mais um curso de React na nossa plataforma.

Audiodescrição: Pedro se descreve como um homem branco, de cabelos escuros lisos e curtos, barba escura, e olhos castanho-escuros. Ele veste roupas pretas, tem piercings no nariz e brincos nas orelhas, e está sentado em uma cadeira preta, em um ambiente iluminado em gradiente azul e rosa, com uma estante branca com enfeites à esquerda do instrutor, instrumentos musicais, e quadros à sua direita.

Certamente, você não se arrependerá de fazer este curso, pois ele contém muito conteúdo interessante. Neste vídeo, daremos uma prévia do que está por vir.

O que vamos aprender?

Temos um projeto em execução no navegador, que está construído em um monorepositório com um design system implementado. No Storybook, já temos alguns componentes implementados com suas respectivas documentações.

Além do Storybook, desenvolveremos design tokens para utilizarmos tanto no Storybook quanto nos componentes do design system. Em seguida, faremos a publicação do design system, dos design tokens e dos componentes.

Neste processo, entenderemos a diferença entre utilizar uma dependência local do workspace e uma dependência publicada, por exemplo, no npm, que utilizaremos neste curso.

O projeto está muito interessante, e trabalharemos sobre o design system Alfabit. No Figma, temos o projeto separado seguindo o princípio de design atômico (ou design molecular), dividido entre átomos, moléculas e organismos.

Durante o curso, vamos nos aprofundar nesses conceitos, implementando cores, tipografia e muito mais. Caminharemos juntos e, com certeza, será gratificante quando chegarmos ao final com o projeto completo e todas as publicações feitas.

Quais são os requisitos?

Como este curso possui um conteúdo mais avançado, disponibilizamos uma lista com recomendações de cursos e conteúdos para assistir antes de começar.

No entanto, caso queira começar diretamente por este curso, estaremos ao seu lado, passo a passo, nessa jornada de aprendizado até chegarmos ao projeto final.

Para melhor acompanhamento do curso, é importante ter conhecimentos prévios sobre React, funcionamento do TypeScript, configurações do TypeScript em um projeto React, noções de Storybook, experiência com CSS em JS, e monorepositório, seja utilizando o NX ou o Lerna.

Neste curso, utilizaremos o Turborepo. Sempre que houver um passo importante ou algo na documentação, sinalizaremos e seguiremos juntos no aprendizado.

Conclusão

Te esperamos na sequência para dar início aos nossos aprendizados!

Tokenizando nosso projeto - Entendendo os tokens

Neste vídeo, vamos discutir um pouco sobre design tokens e sobre como essa estrutura funcionará na prática em nosso monorepositório.

Entendendo os tokens

O monorepositório tem o Turbo e o pmpm Workspace cuidando de toda a camada de base, que podemos chamar de massa do bolo para o grande projeto do Alfabit.

O que são tokens?

Para começar, vamos acessar o Figma para discutir como os tokens funcionarão no projeto, que possui vários componentes que construiremos para o Alfabit.

Imagine que a equipe de design ou a pessoa responsável pelo produto queira trocar, por exemplo, o hexadecimal da cor terciária de todos os componentes da aplicação.

Seria muito trabalhoso se precisássemos acessar manualmente todos os locais onde a cor terciária (#747474) estiver implementada e trocar por #D7D7D7, por exemplo.

Podemos reduzir esse esforço por meio de tokens, conhecidos como design tokens por seguirem um padrão de design para todo o projeto, que neste caso, é o design system de componentes do Alfabit. Para isso, precisamos de um projeto externo onde exportaremos as cores.

Os tokens são formas de identificar cores, fontes, ou qualquer configuração desejada, de modo muito mais fácil do que lembrar, por exemplo, que #747474 é a cor terciária atual.

Criando o arquivo package.json

Para solucionar isso, acessaremos a estrutura do alfabit-monorepo no editor de texto. Na pasta "packages", clicaremos com o botão direito e adicionaremos uma nova pasta chamada "alfabit-tokens". Essa é uma forma fácil de identificar o contexto e o que estamos implementando nele.

Em "alfabit-tokens", criaremos um arquivo chamado package.json, onde vamos abrir um objeto ({}) para adicionar informações e dependências importantes para o projeto funcionar.

package.json:

{

}

Definindo as configurações iniciais

A primeira informação será o nome (name) que usaremos para publicar o pacote no npm. No caso do instrutor, o nome de usuário no npm é cicatrizdev, então colocamos @cicatrizdev seguido do nome do pacote, que é alfabit-tokens.

A versão (version), por enquanto, será 0.1.0. O private adicionado automaticamente pelo editor de texto pode ser removido, pois não precisamos dele.

Na sequência, adicionaremos o main, sinalizando que o arquivo principal do pacote estará em dist/index.js. Por outro lado, o arquivo de tipagens (types) será indicado como dist/index.d.ts.

Além disso, precisamos indicar a pasta de módulo (module), que será dist/index.mjs; essa é a forma de exportar o módulo JavaScript a partir do dist, quando o build é realizado. Assim, teremos o main, o types, e o module do ECMAScript exportado após a finalização do build.

Os files não precisam ser colocados, pois foi um autocomplete do editor.

{
  "name": "@cicatrizdev/alfabit-tokens",
  "version": "0.1.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "module": "dist/index.mjs"
}

Definindo os scripts

Além do módulo, colocaremos os scripts (scripts) que serão usados para executar o projeto. O primeiro script será o de build, necessário para criar as dependências e fazer com que o build seja exportável para uso, seja no npm ou em qualquer outro pacote desejado.

Para fazer o build, usaremos um pacote diferente: o tsup. Nesse caso, pegaremos o conteúdo de src/index.ts, então adicionamos isso após tsup. Feito isso, precisaremos formatar o pacote (--format) no ECMAScript, utilizando o comando esm,cjs e passando a tag --dts ao final.

O comando de tsup fará o build indicando index.ts na pasta "src", que ainda não existe, formatando em esm,cjs com a tag de referência --dts do TypeScript.

Além disso, em scripts, teremos o comando de dev, que será o mesmo de build, mas adicionando a tag --watch no final, de modo que seja possível visualizar isso em tempo real.

{
  "name": "@cicatrizdev/alfabit-tokens",
  "version": "0.1.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "module": "dist/index.mjs",
  "scripts": {
    "build": "tsup src/index.ts --format esm,cjs --dts",
    "dev": "tsup src/index.ts --format esm,cjs --dts --watch"
  }
}

Dessa forma, temos os scripts necessários por enquanto.

Definindo as dependências

Em relação às dependências, adicionamos como devDependencies:

• O tsup na versão 8.1.0;
• E o typescript na versão 5.5.3, para manter a mesma versão em todos os pacotes.

{
  "name": "@cicatrizdev/alfabit-tokens",
  "version": "0.1.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "module": "dist/index.mjs",
  "scripts": {
    "build": "tsup src/index.ts --format esm,cjs --dts",
    "dev": "tsup src/index.ts --format esm,cjs --dts --watch"
  },
  "devDependencies": {
    "tsup": "^8.1.0",
    "typescript": "^5.5.3"
  }
}

Definindo a licença e o acesso público

Para finalizar, definiremos a licença (license) como MIT, e o publishConfig como acesso público ("access": "public"), para podermos publicar o pacote no npm e ter acesso público, ou seja, utilizá-lo em projetos sem necessidade de configurar um npmrc e algum token mais avançado.

{
  "name": "@cicatrizdev/alfabit-tokens",
  "version": "0.1.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "module": "dist/index.mjs",
  "scripts": {
    "build": "tsup src/index.ts --format esm,cjs --dts",
    "dev": "tsup src/index.ts --format esm,cjs --dts --watch"
  },
  "devDependencies": {
    "tsup": "^8.1.0",
    "typescript": "^5.5.3"
  },
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  }
}

Criando o arquivo index.ts

Por fim, na pasta "packages > alfabit-tokens", criaremos um novo arquivo chamado index.ts dentro da subpasta "src". Dessa forma, nos adiantamos para o próximo passo.

Conclusão

Na sequência, daremos continuidade à configuração do pacote de alfabit-tokens e inicializaremos o arquivo index.ts com algumas informações dos tokens que serão necessários!

Tokenizando nosso projeto - Configurando os tokens do design system

Antes de configurar o index.ts e criar os primeiros tokens de cores referentes ao design system, vamos realizar a configuração do tsconfig.json para rodar o projeto com TypeScript.

Configurando os tokens do design system

Configurando o tsconfig.json

Para começar, copiaremos o conteúdo do arquivo tsconfig.json do componente "alfabit-input".

tsconfig.json (packages > alfabit-input):

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "jsx": "react",
    "declaration": true,
    "importHelpers": true,
    "declarationDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Em "alfabit-tokens", criaremos um novo arquivo também chamado tsconfig.json, onde colaremos o conteúdo copiado. No entanto, vamos alterar o target para es2015, uma versão mais antiga do TypeScript, de modo que ele possa compilar nos pacotes das dependências adicionadas ao arquivo package.json. Dessa forma, o projeto rodará com TypeScript normalmente.

tsconfig.json (packages > alfabit-tokens):

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "jsx": "react",
    "declaration": true,
    "importHelpers": true,
    "declarationDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Criando o arquivo colors.ts

Agora, na pasta "src > alfabit-tokens", criaremos um arquivo chamado colors.ts.

Os tokens funcionarão da seguinte forma:

• Teremos tokens de background;
• Tokens de escala de cinza;
• Tokens em azul primário;
• Tokens em tom de violeta;
• Entre outros.

Precisamos passar todas essas orientações do Figma, localizadas na pasta "Atomos" do protótipo. Discutiremos futuramente o porquê de nomenclaturas como átomos, moléculas, e assim em diante. A ideia é criar tokens a partir de cada uma das cores, como #181818, #5C5C5C, entre outras.

Criando os tokens de background

Para começar, vamos criar os tokens de background. No arquivo colors.ts, digitaremos o seguinte:

colors.ts:

export const colors = {
  bgLight: '#FFFFFF',
  bgDark: '#F8F8F8',
};

Quando quisermos utilizar essas cores em algum componente ou local específico, basta importar as cores e digitar o comando colors.bgLight, por exemplo. Dessa forma, o resultado da utilização desse objeto retornará o token #FFFFFF, que corresponde ao branco padrão.

Com isso, se precisarmos alterar o projeto e trabalhar com tokens diferentes, basta mudar, por exemplo, o valor de bgDark para um cinza mais escuro. Após alterar a cor de bgDark, exportamos, fazemos o build novamente, e todos os locais que utilizam os tokens terão a cor bgDark atualizada.

Isso reduz significativamente o trabalho de reescrever código ao atualizar os tokens.

Esse é um princípio importante do design system e da utilização de design tokens, que precisaremos aplicar para escrever histórias mais complexas no Storybook.

Construindo o arquivo index.ts

Após salvar colors.ts, vamos acessar o arquivo index.ts em "alfabit-tokens > src" e adicionar:

index.ts (packages > alfabit-tokens > src):

export * from './colors';

Dessa forma, exportamos todos os tokens do arquivo colors.ts.

Observação: quando adicionarmos outros tokens, podemos mudar a forma como salvamos as cores. Por exemplo: poderíamos ter um objeto chamado background com as propriedades bgLight, bgDark, entre outras. No entanto, como temos poucas variações de cores até o momento, seguiremos dessa maneira.

Fazendo o build do projeto

Uma vez salvo o arquivo index.ts, vamos abrir o terminal para fazer o build e verificar se tudo funciona corretamente. Para isso, executaremos o comando turbo run build, utilizando o Turborepo para compilar todas as instalações no ecossistema do monorepositório.

turbo run build

Se houver algum problema nessa etapa, podemos executar o comando pnpm i para instalar as dependências do projeto. Após a instalação, executamos turbo run build novamente.

pnpm i

Com as dependências instaladas, o build do projeto é executado, gerando a pasta "dist".

Nessa pasta, no contexto de "alfabit-tokens", temos o arquivo index.d.ts, que contém a declaração do TypeScript; o index.js, com o código do projeto seguindo a anotação antiga do JavaScript; e o index.mjs, que exportamos anteriormente no arquivo package.json.

index.d.ts:

declare const colors: {
    bigLight: string;
    bigDark: string;
};

export { colors };

index.mjs:

// src/colors.ts
var colors = {
  bgLight = "#FFFFFF",
  bgDark = "#F8F8F8"
};
export {
  colors
};

Conclusão

Finalizado o build do projeto, podemos usá-lo nos componentes, no Storybook, bem como fazer a publicação. Na sequência, aprenderemos sobre a publicação do pacote de cores e sua utilização em outros projetos. Te aguardamos na próxima aula para publicar tokens e utilizá-los!

Sobre o curso React: desenvolvendo design tokens com styled-components

O curso React: desenvolvendo design tokens com styled-components possui 114 minutos de vídeos, em um total de 41 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:

• Tokenizando nosso projeto
• Publicando nosso pacote de tokens
• Criando histórias no storybook
• Criando histórias avançadas
• Adicionando tokens compostos