React: versione e publique o seu Design System

Publicando no npm - Apresentação

Olá, tudo bem? Eu sou o Neilton, mas pode me chamar de Nei. Estou muito feliz em estar aqui com você neste curso, onde vamos aprender muitas coisas interessantes e, finalmente, finalizar o nosso design system, isto é, a nossa biblioteca de componentes.

Audiodescrição: Neilton se descreve como um homem cis de pele negra. Ele tem olhos castanhos escuros e cabelos encaracolados igualmente escuros, além de usar óculos com armação retangular. Veste uma camisa amarela e está sentado em uma cadeira preta em frente a uma parede lisa iluminada em gradiente de rosa e azul.

Estou muito contente em compartilhar um pouco com você sobre design system, discorrer sobre esse conceito e transmitir esse conhecimento!

O que já aprendemos?

Tudo começou com apenas um Figma e um sonho. Começamos o desenvolvimento da nossa biblioteca de componentes usando a metodologia de atomic design (design atômico).

Usamos o Storybook para documentação, cuja plataforma já publicamos para documentar cada componente da nossa biblioteca. Nós organizamos em átomos e moléculas, com componentes para cada categoria. Alguns exemplos de átomos são o "Avatar", o "Box" e o "Divider".

O que vamos aprender?

Neste curso, o que vamos fazer? Estamos na página do npm, onde publicamos a nossa biblioteca de componentes. Por ela, vamos aprender a publicar essa biblioteca no npm.

Nessa página, há um comando à direita que pode ser copiado e qualquer pessoa poderá instalar e consumir os componentes que desenvolvemos no nosso design system. Faremos isso desenvolvendo uma pequena aplicação, uma tela de login que faz uso dos componentes do nosso design system.

Além disso, você aprenderá mais sobre licença de software, entenderá a diferença entre licenças permissivas e licenças de copyleft, e também terá a oportunidade de conhecer mais sobre documentação, aprendendo a escrever uma boa documentação para a sua biblioteca.

No repositório do GitHub, mostramos a documentação que vamos redigir, que precisa, geralmente, expor o que a biblioteca faz, como instalar, como configurá-la no seu projeto e muito mais. Tudo isso você vai aprender ao longo deste curso.

Pré-requisitos

Você pode estar se perguntando: o que é preciso para começar neste curso? É necessário ter um conhecimento básico de React, Next.js e Tailwind CSS, além de ter concluído os outros cursos da formação anteriores a este. Com isso, você tem o preparo necessário para seguir conosco durante o treinamento.

Gostaríamos de te convidar a participar da nossa comunidade no Discord, onde realizamos eventos toda semana onde você pode aprender um pouco mais sobre front-end, programação, mobile e muito mais.

Há várias pessoas engajadas, outras pessoas estudantes, e você pode inclusive trocar ideias com instrutores e scubas. É um ambiente em que você vai se sentir à vontade para compartilhar opiniões e ideias, e contribuir com as demais pessoas, além de ser uma excelente oportunidade para fazer networking.

Sem mais delongas, podemos começar o projeto! Vamos lá?

Publicando no npm - Preparando o Design System

Nós criamos todo o nosso design system e já conseguimos publicar a nossa documentação no Storybook. Geramos uma pasta estática com os arquivos de uma página estática, enviamos para a Vercel e publicamos essa página no Storybook com toda a documentação.

No navegador, podemos acessar a documentação do Storybook do Alfabit, com todo o design system organizado de uma maneira que cada componente foi classificado dentro de uma pasta com uma categoria de átomos ou moléculas.

Nosso desafio para este curso será publicar essa biblioteca de componentes no npm e disponibilizá-la para que outras pessoas possam utilizá-la em seus próprios projetos.

Preparando o design system

Para fazer isso, vamos ao Visual Studio Code e acessar o nosso projeto. Precisamos realizar algumas configurações no projeto, principalmente no arquivo package.json, para preparar nossa aplicação com algumas configurações extras para enviá-la ao npm.

Primeiramente, vamos abrir um novo terminal, clicando na opção "Terminal" na barra de ferramentas superior do VS Code e selecionando a opção "New Terminal". Você também pode usar o atalho "Ctrl + Shift + J" para abrir o novo terminal.

A princípio, foi aberto um terminal do PowerShell, mas vamos selecionar um CMD, que acreditamos ser melhor. Nesse novo terminal, vamos digitar o comando npm init.

npm init

Por que precisamos dar um novo init no nosso projeto, sendo que já temos um arquivo package.json? Porque vamos sobrescrever algumas configurações que não estão no projeto.

Após executar o comando, o terminal pergunta o nome do pacote, que no caso está sugerido como alfabit-design-system, mas vamos colocar como alfabit-ds.

A versão está sugerida como 0.1.0 e não vamos alterar. Conversaremos sobre isso mais adiante e você vai entender porque mantivemos essa versão.

Em entry point, temos a sugestão next.config.js; vamos apenas teclar "Enter". Faremos o mesmo para o repositório do Git e para a palavra-chave. Como author, você pode colocar o seu nome, mas o instrutor colocará Alfabit. A licença também não vamos selecionar; ajustaremos esses detalhes mais para frente.

Feito isso, será exibido o novo package.json. Vamos apenas verificar se estão corretas as informações. Após conferir, digitamos “sim” no terminal e o package.json será alterado.

Agora, precisamos adicionar no package.json uma opção de file, onde vamos indicar, por exemplo, a fonte que utilizamos na biblioteca, a pasta de componentes, algumas configurações do Tailwind e nos estilos da aplicação, o style da pasta "styles".

No arquivo package.json, vamos até o final após license na linha 48, adicionaremos uma vírgula, e na linha abaixo vamos digitar files. Será aberto um array ([]) onde podemos adicionar opções. Então, copiaremos os arquivos que precisamos indicar para o package.json, para ele ter conhecimento deles, e colaremos na linha 49 dentro do array.

package.json:

"files": [
  "styles/globals.css",
  "tailwind.config.js",
  "components/*",
  "fonts/*"
]

Em files, especificamos que o projeto precisa reconhecer o arquivo globals.css localizado na pasta "styles". A próxima indicação é a configuração do tailwind.css com o arquivo tailwind.config.js.

Posteriormente, sinalizamos a pasta em que estão os componentes, a components/, seguida por um asterisco, indicando todos os arquivos presentes dentro da pasta de "components".

Também indicamos a pasta fonts/, seguida por um asterisco, pois queremos que todos os arquivos dentro dessa pasta sejam reconhecidos pelo projeto.

Anteriormente, definimos a opção main como next.config.js. Vamos alterar essa opção e indicar um arquivo que ainda não criamos, mas que iremos criar, localizado na pasta components/, chamado index.ts.

Neste index.ts, vamos exportar todos os componentes e os tipos desses componentes que criamos, pois facilita a importação deles quando consumirmos essa biblioteca.

Vamos salvar o arquivo package.json. Agora, dentro da pasta "components", criaremos um novo arquivo chamado index.ts, onde faremos a exportação dos componentes.

Para isso, primeiro digitaremos export, em seguida abrimos e fechamos chaves. Entre elas, digitaremos default as, seguido do nome do componente Avatar. Fora das chaves, digitamos a palavra from e o caminho de onde exportamos o componente, que é ./Avatar/Avatar.

index.ts:

export { default as Avatar } from "./Avatar/Avatar";

Assim, exportamos o componente padrão como Avatar, e na linha seguinte, vamos importar também os tipos dele. Para isso, escrevemos export, abrimos e fechamos chaves novamente, e passamos type AvatarProps. Da mesma forma, ele virá de ./Avatar/Avatar.

export { type AvatarProps } from "./Avatar/Avatar";

Precisamos fazer isso para todos os componentes:

export { default as Box } from "./Box/Box";
export { type BoxProps } from "./Box/Box";
export { default as Button } from "./Button/Button";
export { type ButtonProps } from "./Button/Button";
export { default as Divider } from "./Divider/Divider";
export { type DividerProps } from "./Divider/Divider";
export { default as Dropdown } from "./Dropdown/Dropdown";
export { type DropdownProps } from "./Dropdown/Dropdown";
export { default as Input } from "./Input/Input";
export { type InputProps } from "./Input/Input";
export { default as Link } from "./Link/Link";
export { type LinkProps } from "./Link/Link";
export { default as Modal } from "./Modal/Modal";
export { type ModalProps } from "./Modal/Modal";
export { default as Notice } from "./Notice/Notice";
export { type NoticeProps } from "./Notice/Notice";
export { default as Switch } from "./Switch/Switch";
export { type SwitchProps } from "./Switch/Switch";
export { default as Typography } from "./Typography/Typography";
export { type TypographyProps } from "./Typography/Typography";
export { default as TextBlock } from "./TextBlock/TextBlock";
export { type TextBlockProps } from "./TextBlock/TextBlock";

Conclusão

Já fizemos todas as configurações necessárias no projeto e estamos exportando todos os componentes de index.tsx, que está na pasta "components".

Fizemos também as configurações no package.json, onde indicamos o index.tsx, além de apontar para a pasta de estilos, o tailwind.config.js, a pasta de componentes e a pasta de fontes.

Precisamos de tudo isso para a publicação do nosso projeto.

Para publicar o projeto, precisamos criar uma conta no npm. Faremos isso no próximo vídeo. Te vejo lá!

Publicando no npm - Criando conta e publicando no npm

Agora que preparamos a aplicação para publicá-la no npm, é necessário criar uma conta na plataforma para ter a possibilidade de publicar os pacotes.

Criando uma conta no npm

No navegador, vamos abrir uma nova aba e acessar o site do npm. Caso ainda não tenha uma conta, clique em "Sign Up" no canto superior direito da página.

Será necessário preencher os campos com o seu nome de usuário e e-mail. Recomendamos que você utilize um e-mail principal, preferencialmente o mesmo do GitHub. Isso é vantajoso, pois ao publicar o seu pacote, ele será vinculado à sua conta principal do GitHub e terá a referência para essa conta.

Após preencher essas informações, crie uma senha forte e marque a caixa de seleção para aceitar os termos. Passaremos por um breve processo de verificação e, após concluído, teremos uma conta no npm.

Caso já possua uma conta, é preciso clicar em "Sign In", preencher as informações de login e senha, e clicar novamente em "Sign In".

Haverá uma confirmação com verificação em duas etapas, uma medida de segurança para garantir que realmente é você. Um token de verificação será enviado por e-mail. Com esse token, é possível realizar login no npm.

Publicando uma biblioteca

Agora vamos ao processo de publicar a nossa biblioteca. Existem duas maneiras de fazer isso: a principal é diretamente pelo terminal da plataforma onde codamos o projeto. O processo também pode ser realizado por terminal separado, mas faremos pelo Visual Studio Code.

Basta abrir um novo terminal com o atalho "Ctrl + J", limpar a tela com o comando cls, e a partir desse terminal, publicar a nossa biblioteca com o comando npm publish.

Porém, não faremos isso agora, pois ainda é preciso realizar mais uma configuração. É necessário fazer algumas alterações no arquivo package.json, principalmente na opção private da linha de código 4.

package.json:

"private": true

A opção private está definida como true, ou seja, torna o repositório privado. Para publicar o projeto como público, precisamos alterar esse valor para false. Assim, o projeto não será mais privado.

Outro indicativo importante é a versão. Podemos observar que ela está em 0.1.0. Essa é considerada a versão de desenvolvimento. O ideal é manter nessa versão enquanto estivermos em desenvolvimento.

Após realizar essas alterações, é necessário salvar o arquivo package.json.

De volta ao terminal, não precisamos fazer login novamente no npm, mas caso você queira saber o processo, basta digitar o comando npm login e serão abertas no navegador as opções para o mesmo processo que realizamos anteriormente.

Com o login feito, vamos publicar a biblioteca com o comando npm publish.

npm publish

Com isso, o npm vai empacotar o projeto e, em pouco tempo, receberemos a informação de que foi publicado. Será indicada a versão que foi publicada e o endereço no npm.

Publishing to https://registry.npmjs.org/ with tag latest and default access + alfabit-ds@0.1.0

Já estamos conectados ao npm no navegador, então vamos recarregar a página, clicar no ícone de perfil no canto superior direito e selecionar "Packages".

Na seção "Packages", temos duas bibliotecas: uma versão anterior chamada ds-alfabit-v1, e a recentemente publicada alfabit-ds. Selecionaremos o link de alfabit-ds para carregar a página desta biblioteca que acabamos de publicar.

Conclusão

Perfeito! A biblioteca que acabamos de publicar aparece com um "Readme" contendo informações de instalação, a versão, a licença, a quantidade de arquivos, e por fim, o comando para instalar e utilizar essa biblioteca nas nossas aplicações.

npm i alfabit-ds

É exatamente isto que faremos a seguir no próximo vídeo. Até lá!

Sobre o curso React: versione e publique o seu Design System

O curso React: versione e publique o seu Design System possui 81 minutos de vídeos, em um total de 42 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:

• Publicando no npm
• Consumindo o Design System
• Fazendo mudanças no Design System
• Versionamento Semântico
• Licença e documentação