@comercti Components CLI

Antes de instalar ou usar a CLI, siga o passo a passo de configuração do ambiente descrito em docs/PROJECT_CONSUMER_CONFIGURATION.md.

Esse guia explica como preparar Tailwind, PrimeVue e dependências essenciais para garantir que os componentes funcionem corretamente no seu projeto Vue 3.

Uma CLI para adicionar componentes Vue 3 customizados à um projeto Vue 3, copiando arquivos prontos para src/components/comerc-ui.

Instalação

Use diretamente com npx:

npx comerc-ui add Dialog

Como funciona

• Os componentes ficam na pasta src/components/ deste repositório.
• O comando add copia o componente desejado para src/components/comerc-ui no seu projeto.

Exemplo de uso

No seu projeto Vue 3:

npx comerc-ui add Dialog

O componente será copiado para src/components/comerc-ui/Dialog.vue.

Scripts Disponíveis

Desenvolvimento

npm run dev          # Inicia o playground para testar componentes
npm run build        # Build do projeto
npm run preview      # Preview do build

Qualidade de Código

npm run format       # Formatar código com Prettier
npm run lint         # Executar ESLint e corrigir problemas
npm run type-check   # Verificar tipos TypeScript

Componentes Volt

npm run volt-clone <ComponentName>   # Clona componente do Volt para customização

Versionamento e Publicação

npm run release          # Criar nova versão (automático)
npm run release:patch    # Versão patch (1.0.0 → 1.0.1)
npm run release:minor    # Versão minor (1.0.0 → 1.1.0)
npm run release:major    # Versão major (1.0.0 → 2.0.0)
npm run publish:release  # Publicar no npm

Fluxo de desenvolvimento para novos componentes

1. Criando componentes volt-based (Recomendado)

Para componentes baseados no Volt/PrimeVue, use o comando integrado que automatiza todo o processo:

npm run volt-clone <ComponentName>

Exemplos:

npm run volt-clone AutoComplete
npm run volt-clone Timeline
npm run volt-clone Button
npm run volt-clone DatePicker

O que o comando faz automaticamente:

1. 🔄 Instala o componente: Executa npx volt-vue add <ComponentName>
2. 📁 Detecta dependências: Analisa imports relativos automaticamente
3. 📋 Copia tudo: Move o componente + dependências para src/components/volt-based/
4. 📄 Inclui utilitários: Copia utils.ts se necessário
5. 📊 Mostra resumo: Lista tudo que foi copiado com feedback visual

Vantagens:

• ✅ Processo automatizado e sem erros
• ✅ Detecta dependências automaticamente
• ✅ Feedback visual completo
• ✅ Componentes prontos para customização

2. Processo manual (alternativa)

• Rode o comando abaixo para gerar o componente base:

  npx volt-vue add NomeDoComponente

• O componente será criado em src/volt.
• Copie o componente gerado para src/components/volt-based.
• Edite o componente em src/components/volt-based conforme necessário para adequar ao padrão do projeto.

3. Componentes customizados (sem dependência Volt/PrimeVue)

• Crie o componente diretamente em src/components.

4. Teste do componente

• Importe o componente a ser testado em src/playground/ComponentSandbox.vue.
• Rode o playground para testar:

  npm run dev

• Verifique o funcionamento e faça ajustes se necessário.

5. Demonstração

• Após testar, crie uma demonstração do componente (incluindo variantes) em src/playground/demos.

6. Subir para o repositório e publicar no npm

• Faça o commit das alterações e suba para o repositório remoto:

  git add .
  git commit -m "feat: novo componente"
  git push

• Versionamento e Publicação: Para informações detalhadas sobre como versionar e publicar componentes, consulte o Guia de Versionamento.

Observações

• Os componentes são copiados como arquivos-fonte, prontos para edição e customização.