Agrotools Monorepo

Este é um monorepo contendo uma coleção de bibliotecas, componentes e utilitários para as aplicações da Agrotools. O projeto utiliza ferramentas e práticas modernas de desenvolvimento web para garantir código sustentável, testado e bem documentado.

Tecnologias

• Vue.js - Framework frontend para construção de interfaces de usuário
• TypeScript - Verificação de tipos estáticos para JavaScript
• NX - Sistema de build e gerenciamento de monorepo
• PNPM - Gerenciador de pacotes rápido e eficiente com suporte a workspaces
• Storybook - Desenvolvimento e documentação de componentes UI
• Vite - Ferramentas frontend de próxima geração
• Vitest - Framework de testes unitários alimentado pelo Vite
• SASS - Pré-processador CSS
• ESLint & Prettier - Ferramentas para qualidade e formatação de código
• Husky & Lint Staged - Git hooks para garantir qualidade de código

Estrutura do Repositório

at-components-v2-front/
├── packages/
│   ├── at-components-v1/    # Biblioteca de componentes Vue.js (versão 1)
│   ├── at-components-v2/    # Biblioteca de componentes Vue.js (versão 2 - Design System)
│   ├── at-icons/            # Biblioteca de ícones Vue.js
│   ├── at-mf-utils/         # Biblioteca de utilitários para Module Federation
│   ├── at-tailwind-config/  # Configuração compartilhada do Tailwind CSS
│   └── at-utils/            # Biblioteca de utilitários gerais
├── .prettierrc              # Configuração do Prettier
├── eslint.config.mjs        # Configuração do ESLint
├── nx.json                  # Configuração do NX
├── package.json             # Configuração de pacotes raiz
├── pnpm-workspace.yaml      # Configuração do PNPM workspaces com a definição do monorepo
├── tsconfig.base.json       # Configuração base do TypeScript
├── tsconfig.json            # Configuração do TypeScript com referências as bibliotecas
└── README.md                # Este arquivo

Começando

Pré-requisitos

• Node.js (versão 20.x ou maior)
• PNPM (versão 9.1.0 ou maior)

Instalação

# Instalar dependências
pnpm install

Desenvolvimento

Executando o Storybook

pnpm storybook

Compilando as Bibliotecas

# Compilar todos os pacotes
pnpm build

# Compilar um pacote específico
pnpm nx build at-components
pnpm nx build at-icons
pnpm nx build at-mf-utils
pnpm nx build at-utils

Executando Testes

# Executar testes para todos os projetos
pnpm test

# Executar testes para um pacote específico
pnpm nx test at-components

Linting e Formatação

# Lint em todos os projetos
pnpm lint

# Formatar código
pnpm format

Escolhendo entre v1 e v2

Use at-components-v1 quando:

• Trabalhar em projetos legados que já utilizam Bootstrap
• Precisar de compatibilidade com código existente
• O projeto já estiver usando estilos SASS customizados

Use at-components-v2 quando:

• Iniciar novos projetos
• Precisar de componentes modernos com melhor acessibilidade
• Quiser seguir o Design System V2 da Agrotools
• Precisar de componentes baseados em Tailwind CSS

Detalhes dos Pacotes

at-components-v1

Biblioteca de componentes Vue.js (versão 1) contendo componentes de UI reutilizáveis para aplicações Agrotools. Esta é a versão legada dos componentes, mantida para compatibilidade com projetos existentes.

Características:

• Componentes baseados em Bootstrap
• Suporte a estilos SASS customizados
• Componentes: Accordion, Avatar, Button, CardWithInsights, Checkbox, Chips, ColorPicker, DataTable, DatePicker, Dropdown, Faq, Filter, Icons, Illustration, Input, Legend, List, Loading, Menu, Modal, Notifications, Paginator, ProgressBar, RadioButton, Search, Select, Skeleton, Stepper, TableConfig, Tabs, Tag, Tipograph, Toggle, Tooltip, Upload

Storybook

at-components-v2

Biblioteca de componentes Vue.js (versão 2) - Design System V2 da Agrotools. Nova geração de componentes construídos com tecnologias modernas e seguindo padrões de design system.

Características:

• Componentes baseados em Tailwind CSS e Reka UI
• Design system moderno e acessível
• Organização por categorias (Layout, Form, Table, Toast, etc.)
• Componentes: Accordion, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Checkbox, Combobox, Command, DataTable, DatePicker, DateRangePicker, Dialog, DropdownMenu, Filter, FilterCard, Header, Illustration, Input, Label, Layout, MultiSelect, Pagination, Popover, RadioGroup, RangeCalendar, Select, Separator, Sheet, Sidebar, Skeleton, Sonner (Toast), Stepper, Switch, Table, Tabs, Tag, TimePicker, ToastHistory, Tooltip, Upload

Organização no Storybook:

• Design System V2/Layout/ - Componentes de layout (Tabs, Sidebar, Card, Accordion, Stepper)
• Design System V2/Form/ - Componentes de formulário (TimePicker, Upload, Input, etc.)
• Design System V2/Table/ - Componentes de tabela
• Design System V2/Toast/ - Componentes de notificação
• Outros componentes diretamente em Design System V2/

at-icons

Biblioteca de ícones da Agrotools baseada em Vue.js. Storybook

at-tailwind-config

Configuração compartilhada do Tailwind CSS usada pelos componentes v2 e outras aplicações do monorepo.

at-mf-utils

Utilitários para trabalhar com Module Federation, permitindo o compartilhamento de componentes entre diferentes aplicações.

at-utils

Funções utilitárias gerais e auxiliares usadas em aplicações Agrotools.

Gerenciamento de Releases

O monorepo utiliza o sistema de releases do NX para gerenciar o versionamento e publicação dos pacotes no NPM.

Criando uma Release (Prerelease)

O script prerelease gera novas versões para os pacotes e cria changelogs baseados em commits convencionais:

# Criar uma release para todos os pacotes
pnpm prerelease

# Criar uma release com versão específica
pnpm prerelease --version=1.0.0

# Criar uma release para pacotes específicos
pnpm prerelease --projects=@agrotools1/at-components,@agrotools1/at-icons

# Primeira release de um pacote
pnpm prerelease --first-release

# Executar em modo dry-run (sem alterar arquivos)
pnpm prerelease --dry-run

# Executar com logs detalhados
pnpm prerelease --verbose

Publicando no NPM

Depois de criar a release, use o script publish para publicar os pacotes no registro NPM:

# Publicar todos os pacotes
pnpm publish

# Publicar pacotes específicos
pnpm publish --projects=at-components-v1,at-icons

# Publicar com autenticação 2FA
pnpm publish --otp=123456

# Verificar o processo sem publicar (dry-run)
pnpm publish --dry-run

Estas operações são controladas pelos scripts prerelease.ts e release.ts localizados em tools/scripts/, que utilizam as funções releaseVersion, releaseChangelog e releasePublish do NX.

Comandos NX

Este monorepo utiliza plugins NX para várias tarefas:

• @nx/js com TypeScript - Para gerenciamento de bibliotecas TypeScript
• @nx/storybook - Para documentação de componentes
• @nx/vue - Para componentes e bibliotecas Vue.js
• @nx/eslint - Para qualidade de código
• @nx/vite com Vitest - Para empacotamento e testes

Comandos NX comuns:

# Gerar uma nova biblioteca
pnpm nx g @nx/vue:lib minha-nova-lib

# Gerar um novo componente em uma biblioteca
pnpm nx g @nx/vue:component meu-componente --project=at-components-v1
pnpm nx g @nx/vue:component meu-componente --project=at-components-v2

# Visualizar o gráfico de dependências do projeto
pnpm nx graph