Designer System da Airs UI.
O Designer System da Airs UI é uma aplicação desenvolvida com as melhores práticas e fluxo de desenvolvimento performático, utilizando as mais avançadas tecnologias. O objetivo é oferecer uma solução completa para o desenvolvimento de design systems de alta qualidade.
- Typescript
- Phosphor Icons
- Stitches
- Radix
- Storybook
- tsup
O
tsup
é uma ferramenta de empacotamento e compilação de projetos TypeScript. Ele é usado para criar um único arquivo JavaScript otimizado a partir do código TypeScript, tornando-o mais adequado para ambientes de produção. Otsup
simplifica o processo de compilação e empacotamento, oferecendo uma maneira fácil de construir e distribuir aplicativos e bibliotecas TypeScript. - changeset
O
changeset
é uma ferramenta que auxilia no gerenciamento de alterações e versionamento de projetos. Ele permite que você agrupe e documente as modificações feitas no código-fonte, facilitando o rastreamento e a revisão das mudanças realizadas ao longo do tempo. Com ochangeset
, é possível gerar um arquivo de documentação das modificações, atualizar as versões das dependências e realizar o versionamento adequado do projeto. Ele é especialmente útil em projetos colaborativos e em equipes de desenvolvimento, fornecendo uma forma organizada e padronizada de lidar com as alterações no código. - Turbo Build
O
Turbo Build
é um serviço de construção e implantação de aplicativos web que visa acelerar o processo de desenvolvimento e melhorar o desempenho das aplicações. Ele utiliza técnicas de compilação antecipada e otimizações avançadas para gerar um pacote otimizado do aplicativo, pronto para ser implantado em um servidor. OTurbo Build
automatiza muitas tarefas tediosas de configuração e empacotamento, permitindo que os desenvolvedores se concentrem mais na lógica de negócios e menos nas complexidades da configuração de ambientes de produção. Ele é especialmente útil para projetos em JavaScript/TypeScript e frameworks como React, Vue e Angular, fornecendo um fluxo de trabalho simplificado e eficiente para o desenvolvimento e implantação de aplicações web.
Nessa aplicação em particular, o Turbo Build
foi usado para otimizar e acelerar o processo de construção (builder) e execução do comando npm run dev
simultaneamente para os pacotes de React, tokens e docs. Ele permite que essas tarefas sejam executadas de forma paralela, economizando tempo e melhorando a eficiência do desenvolvimento.
Além disso, o Turbo Build
também foi utilizado para aplicar o conceito de "Remote Caching" durante a execução dos workflows. Isso significa que, durante o processo de deploy, o Turbo Build
aproveita o cache remoto para agilizar a compilação e implantação, melhorando ainda mais o desempenho geral do processo.
Essas abordagens ajudam a reduzir o tempo necessário para construir e implantar a aplicação, melhorando a produtividade dos desenvolvedores e proporcionando uma experiência mais ágil no ciclo de desenvolvimento.
- Clone este repositório em sua máquina local:
$ git clone https://github.com/MauricioAires/design-system-airs
- Na pasta raiz do projeto, instale as dependências:
$ npm install
Para rodar a aplicação em modo de desenvolvimento, utilize o seguinte comando:
$ npm run dev
- Realize as modificações necessárias no código.
- Execute o comando
npm run changeset
para gerar o arquivo de documentação com as modificações. - Execute o comando
npm run version-packages
para atualizar o pacote com a versão do changeset. - Faça o push das modificações para o GitHub. Após isso, o GitHub se encarregará de atualizar automaticamente o GitHub Pages e o pacote no npm.
Esses passos garantem um fluxo de trabalho suave e automatizado, permitindo que as modificações sejam refletidas corretamente no GitHub Pages e no pacote npm.
Para que o workflow de deploy para o GitHub Pages funcione corretamente, é necessário habilitar a permissão adequada. Siga os passos abaixo:
- Acesse a página de configurações do seu repositório no GitHub:
https://github.com/USERNAME/REPOSITORY/settings
. - Clique na guia "Actions > Geral" na barra lateral esquerda.
- Na seção "Workflow permissions", verifique se a opção "Read and write permissions" (Permissões de leitura e gravação) está selecionada. Caso contrário, clique para permitir a execução dos workflows de ação.
- Certifique-se de que as permissões estão corretamente configuradas para permitir a implantação no GitHub Pages.
Após seguir esses passos e habilitar as permissões necessárias, o workflow de deploy para o GitHub Pages poderá ser executado com sucesso.
Confira o deploy do Designer System publicado no NPM: https://www.npmjs.com/package/@airs-ui/docs
Os workflows de deploy e release utilizam algumas secrets que precisam ser configuradas no GitHub. Siga os passos abaixo para acessar as configurações de secrets:
- Acesse a página de configurações do seu repositório no GitHub: https://github.com/USERNAME/REPOSITORY/settings/secrets/actions.
- Certifique-se de estar na guia "Secrets" (Segredos) no menu lateral esquerdo.
- Clique em "New repository secret" (Novo segredo do repositório) para adicionar uma nova secret.
- Preencha o nome da secret e o valor correspondente. Essas informações serão fornecidas no processo de configuração do workflow.
- Clique em "Add secret" (Adicionar segredo) para salvar a secret.
- NPM_TOKEN: NPM Token
- TURBO_TOKEN: Vercel Tokens
- TURBO_TEAM: Vercel username/teamname
Ao configurar as secrets necessárias, os workflows de deploy e release poderão ser executados corretamente, utilizando as informações protegidas e configuradas nas secrets.
Contribuições são bem-vindas! Para contribuir, basta abrir uma issue ou pull request neste repositório.
Este projeto está sob a licença MIT. Veja LICENSE para mais informações.
Feito com 💙 by Mauricio Aires