Uma biblioteca de componentes pode ser extremamente útil para uma empresa por vários motivos. Por exemplo, ao ter todos os componentes em um único lugar, fica mais fácil de manter o código e evitar a criação de componentes duplicados. No tutorial a seguir, você vai aprender como criar um design system da maneira mais eficiente, incluindo como publicar no Google Cloud e no NPM. Ao final do tutorial, você estará apto a criar um design system sólido e coeso para sua empresa.

Passo 1: Crie o projeto usando uma das 2 opções abaixo

O template é útil para configurar rapidamente o eslint e o prettier em um novo projeto. Ele vem pré-configurado com essas ferramentas, o que pode poupar muito tempo e esforço. Em comparação, o create do vite é uma ferramenta que permite criar um novo projeto com o vite, mas não inclui a configuração do eslint e do prettier. Portanto, se você deseja ter essas ferramentas configuradas automaticamente, o template pode ser uma opção mais conveniente. 

git clone https://github.com/arielff3/template-vite-react-ts-eslint-prettier

 npm create vite@latest design-system-vite -- --template react-ts


Passo 2: Entre no diretório criado e instale as dependências

Crie o seguinte componente dentro de src/components


src/components/index.ts: Aqui, você deve adicionar todas as exportações de tipos e components

Passo 4: Configure o projeto para o build

Você precisara configurar alguns aquivos para gerar a versão do build da nossa biblioteca de componentes.

1. Você irá precisar instalar os pacotes abaixo:

vite-plugin-dts: Um plug-in do vite que gera arquivos de declaração.

vite-plugin-linter: Vite plug-in para arquivos lint e mostrar a saída linter na saída Vite.

vite-tsconfig-paths: Adicione ao Vite a capacidade de resolver importações utilizando o mapeamento de caminho do TypeScript.

npm install vite-plugin-dts vite-plugin-linter vite-tsconfig-paths --save-dev

2. Insira o código abaixo no arquivo vite.config.ts usando seu editor:

3. Insira o código abaixo no arquivo tsconfig.json usando seu editor:

4. Insira o código abaixo no arquivo tsconfig.node.json usando seu editor: 

5. Insira as novas configurações abaixo no seu package.json:

files: serve para incluir arquivos ou diretórios relevantes no pacote npm ao publicá-lo ou instalá-lo, evitando a inclusão de arquivos desnecessários ou confidenciais.

exports: usada para indicar quais arquivos ou diretórios devem ser exportados pelo pacote npm quando ele é instalado em outro projeto. Isso é útil quando você quer expor apenas uma parte do seu pacote para ser usada por outros projetos, em vez de expor todo o pacote.

main: usada para indicar qual arquivo deve ser carregado quando o pacote é importado em outro projeto como uma dependência.

module: usada para indicar qual arquivo deve ser usado pelo gerenciador de pacotes npm quando o pacote é instalado em outro projeto como uma dependência e o projeto usa o sistema de módulos ES6.

types: usada para indicar qual arquivo de tipos do pacote deve ser usado pelo compilador TypeScript quando o pacote é instalado em outro projeto como uma dependência.

peerDependencies: usada para indicar quais pacotes devem ser instalados como dependências em outro projeto quando o pacote é instalado como uma dependência. Isso é útil quando o seu pacote depende de outro pacote para funcionar corretamente, mas não quer incluir essa dependência no seu pacote.

repository: usada para fornecer informações sobre o repositório do código fonte do pacote.

Etapa 2: Configurando Google Artifact  e Publicando pacote

Passo 2: Para criar um novo repositório no Artifact Registry, vá até o painel do Artifact Registry e selecione a opção "Criar Repositório"

Passo 3: Configure seu repositório de conforme a imagem acima e clique em criar

Para fazer o deploy da biblioteca, é preciso ter a CLI do Google Cloud (gcloud) instalada e configurada em sua máquina. Acesse este link para instalar e configurar a CLI conforme o sistema operacional em uso. Isso permitirá usar os comandos gcloud para fazer o deploy da biblioteca para o Google Cloud.

Passo 5: Faça login no CLI do gcloud
Para realizar o login, siga os passos descritos no tutorial disponível neste link. Ele lhe guiará pelo processo de autenticação e garantirá que você tenha acesso aos recursos.

Passo 6: Configure o ID do projeto onde o repo foi criado usando o comando abaixo

Passo 7: Configure um escopo para sua biblioteca

Para publicar pacotes no google artifact é necessário criar um scope. 

O scope no npm é um recurso que permite aos usuários do npm identificar de forma única os pacotes que são mantidos por sua organização ou equipe. Isso pode ser útil em várias situações, como:

Evitar conflitos de nomes: com o scope, é possível evitar o risco de conflitar com outros pacotes que tenham o mesmo nome, mas são mantidos por outra equipe ou organização.

Facilitar a identificação: o scope ajuda a identificar rapidamente quem está mantendo um pacote específico, o que pode ser útil para quem está procurando por pacotes de uma determinada organização ou equipe.

Melhorar a segurança: com o scope, é mais fácil garantir que apenas os membros da equipe ou organização têm acesso aos pacotes mantidos por ela, o que pode aumentar a segurança do projeto.

Facilitar o gerenciamento: o scope pode facilitar o gerenciamento dos pacotes da equipe ou organização, pois permite que eles sejam encontrados e gerenciados de forma mais eficiente.

Para criar um scope no npm, basta incluir o nome do scope (que deve começar com o símbolo @) na chave "name" do seu arquivo package.json. Veja um exemplo de como fazer isso:

{   
  "name": "@myorg/design-system-vite",
  ...
}

Passo 8: Cria o arquivo .npmrc na raiz do projeto

Passo 9: Gere as configurações usando o comando abaixo e cole o retorno no arquivo .npmrc

gcloud artifacts print-settings npm --project=design-system-article --repository=design-system-article --location=us-central1 --scope=@myorg

Passo 10: Gere as credenciais de autenticação do Artifact Registry usando o comando abaixo

Por padrão, as credenciais de autenticação do Artifact Registry têm duração de uma hora, mas é possível aumentar ou diminuir esse período conforme necessário. Para alterar a duração das credenciais, basta editar a configuração do projeto no Google Cloud.

Passo 11: Gere o build do seu projeto usando o comando abaixo

Esse comando irá executar a tarefa de build definida no seu arquivo package.json e ira criar uma pasta chamada dist na raiz do seu projeto.

Passo 12: Publique sua biblioteca 🚀 rodando o comando abaixo

Espere enquanto o pacote é publicado... e voilà, ele foi publicado com sucesso!

Antes de iniciar esse fluxo, verifique se o arquivo .npmrc já foi excluído. Isso garantirá que não haja conflitos com configurações anteriores e garantirá o funcionamento correto do processo. 

Passo 1: Faço o login no npm usando o comando abaixo

Passo 2: Gere o build do seu projeto usando o comando abaixo

Passo 3: Publique sua biblioteca 🚀 rodando o comando abaixo

1. Para utilizar a biblioteca, é preciso ter o arquivo .npmrc configurado e com um token válido no projeto onde a biblioteca será instalada. Você pode adicionar o script a seguir na chave "scripts" do seu arquivo package.json:

"config:npmrc": "touch .npmrc && gcloud artifacts print-settings npm --project=PROJECT--repository=REPOSITORY --location=us-central1 --scope=SCOPE > .npmrc && npx google-artifactregistry-auth .npmrc"

Depois de executar o script acima é só instalar o seu pacote normalmente usando npm ou yarn

Lembre-se de atualizar as variáveis de acordo com o contexto do seu projeto. Certifique-se de substituir todas as variáveis pelos valores corretos antes de executar o código. Isso garantirá que ele funcione corretamente e evitará erros.

2. Para evitar erros, é importante lembrar de não utilizar o comando yarn publish para publicar o seu pacote. Em vez disso, recomendo sempre utilizar o npm publish para publicar o seu pacote de maneira segura e confiável. Dessa forma, você pode ter certeza de que o processo de publicação será realizado de maneira correta e sem problemas.

3. Para evitar problemas na publicação, lembre-se de sempre utilizar o comando npm version antes de publicar uma atualização no npm. Isso garantirá que a nova versão do seu pacote será aceita pelo npm e disponibilizada para os usuários. Veja um exemplo de como utilizar o comando npm version:

Esse comando irá incrementar o número da versão do seu pacote em um dígito (por exemplo, de 1.0.0 para 1.0.1). Lembre-se de atualizar o campo "version" no seu arquivo package.json antes de realizar a publicação.  Mais informações dobre o npm version aqui

Parabéns, você acabou de criar sua própria biblioteca de componentes e publicá-la tanto no GCP quanto no NPM! Agora, você pode utilizá-la em qualquer projeto bastando apenas realizar a instalação através do gerenciador de pacotes de sua preferência (GCP ou NPM). Com sua biblioteca publicada, outros desenvolvedores também poderão utilizá-la. Continue mantendo sua biblioteca atualizada e bem documentada para garantir a sua utilização. Parabéns pelo excelente trabalho!


Sinta-se avontade para me seguir no Github ou no Linkedin.

Design System com React, Vite e Google Artifact 🚀✨