create-henri-app

🚀 CLI moderna e interativa para geração rápida de projetos frontend e backend com configurações personalizadas.

� Instalação

Uso com npx (Recomendado - sem instalação)

npx create-henri-app

Instalação Global

npm install -g create-henri-app
# ou
pnpm add -g create-henri-app
# ou
yarn global add create-henri-app

🚀 Uso Rápido

Modo Interativo

npx create-henri-app

A CLI irá guiá-lo através de perguntas interativas para configurar seu projeto.

Modo CLI com Flags

npx create-henri-app \
  --name meu-app \
  --type frontend \
  --framework nextjs-15 \
  --http-client ky \
  --linter biome \
  --libs tanstack-query,zod,react-hook-form \
  --with-shadcn \
  --shadcn-color slate \
  --install

✨ Características

• ✅ Suporte completo para Frontend (NextJS 15, ViteJS 6) e Backend (em desenvolvimento)
• ✅ Escolha entre ky, axios ou fetch nativo como cliente HTTP
• ✅ Configuração automática de Biome ou ESLint + Prettier
• ✅ Instalação e configuração de bibliotecas populares
• ✅ Integração completa com shadcn/ui
• ✅ Sistema de providers com injeção automática
• ✅ Instalação automática de dependências

🎛️ Opções Disponíveis

| Flag | Tipo | Descrição | Valores | |------|------|-----------|---------| | --name | string | Nome do projeto | qualquer string válida | | --type | string | Tipo de aplicação | frontend, backend | | --framework | string | Framework | nextjs-15, vitejs-6 | | --http-client | string | Cliente HTTP | ky, axios, fetch | | --linter | string | Linter | biome, eslint-prettier | | --libs | string | Libs adicionais (separadas por vírgula) | ver documentação | | --with-shadcn | boolean | Habilita shadcn/ui | - | | --shadcn-color | string | Cor base | neutral, slate, gray, zinc, stone | | --install | boolean | Instalar dependências | - |

📚 Bibliotecas Suportadas

• tanstack-query - TanStack Query (React Query)
• zod - Validação de schemas
• react-hook-form - Gerenciamento de formulários
• date-fns - Manipulação de datas
• cookies-next - Gerenciamento de cookies
• nuqs - State na URL
• framer-motion - Animações
• lucide-react - Ícones
• recharts - Gráficos

💡 Exemplos

Projeto NextJS Completo

npx create-henri-app \
  --name ecommerce-app \
  --type frontend \
  --framework nextjs-15 \
  --http-client ky \
  --linter biome \
  --libs tanstack-query,zod,react-hook-form \
  --with-shadcn \
  --install

Projeto Minimalista

npx create-henri-app \
  --name simple-app \
  --type frontend \
  --framework nextjs-15 \
  --http-client fetch \
  --linter biome

📁 Estrutura Gerada

meu-projeto/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── providers.tsx
│   │   └── (application)/
│   ├── components/
│   ├── lib/
│   ├── hooks/
│   ├── services/
│   └── utils/
├── public/
├── .env.example
├── package.json
└── ...

📐 Arquitetura do Sistema

Componentes Principais

1. Types (types.ts) - Define todas as interfaces e tipos TypeScript
2. Snippet Configs (configs/*.config.ts) - Configurações de cada biblioteca
3. Action Executor (actions.ts) - Executa as ações definidas
4. Snippet Manager (snippet-manager.ts) - Gerencia snippets disponíveis
5. Project Generator (project-generator.ts) - Orquestra todo o processo

Como Adicionar Nova Biblioteca

1. Criar config em configs/nova-lib.config.ts
2. Registrar no snippet-manager.ts
3. Adicionar na lista de opções em index.ts

🤝 Contribuindo

Contribuições são bem-vindas! Visite o repositório no GitHub.

📄 Licença

MIT © Henri

🔗 Links

• Documentação Completa
• Reportar Bug
• Solicitar Feature

✨ Funcionalidades

• Interface bonita e moderna usando @clack/prompts
• Fluxo interativo de perguntas e respostas
• Suporte para frontend e backend
• Múltiplas opções de configuração
• Resumo final das escolhas

🛠️ Como usar

Executar a CLI

npm run start
# ou
npm run dev

Fluxo de Perguntas

1. Package Manager: Escolha entre pnpm, yarn ou npm
2. Tipo de Aplicação: Frontend ou Backend
3. Para Frontend:
   • Framework: NextJS 15.x ou ViteJS 6.x
   • Cliente HTTP: ky, axios ou fetch nativo
   • Linter: Biome ou ESLint + Prettier
   • Libs Adicionais: nuqs, tanstack query, date-fns (múltipla escolha)

🎯 Exemplo de Uso

Ao executar a CLI, você verá uma interface como esta:

🚀 Bem-vindo ao Gerador de Projetos!

📦 Qual package manager deseja usar?
❯ pnpm
  yarn  
  npm

🏗️ Qual tipo de aplicação você quer?
❯ Frontend
  Backend

⚡ Qual framework?
❯ NextJS 15.x
  ViteJS 6.x

🌐 Qual cliente HTTP deseja usar?
❯ ky
  axios
  none (fetch)

✨ Qual linter deseja usar?
❯ Biome
  Eslint + Prettier

📚 Libs adicionais (pode selecionar mais de uma):
◻ nuqs
◻ tanstack query
◻ date-fns

Resumo Final

Após responder todas as perguntas, a CLI exibirá um resumo organizado:

🎉 RESUMO DAS SUAS ESCOLHAS:

═══════════════════════════════════════
📦 Package Manager: pnpm
🏗️  Tipo de Aplicação: frontend
⚡ Framework: nextjs-15
🌐 Cliente HTTP: ky
✨ Linter: biome
📚 Libs Adicionais: tanstack-query, date-fns
═══════════════════════════════════════

📦 Dependências

• @clack/prompts: Interface bonita para CLI
• tsx: Executar TypeScript
• typescript: Suporte ao TypeScript
• @types/node: Tipos do Node.js

🔧 Scripts Disponíveis

• npm run start: Executa a CLI
• npm run dev: Executa a CLI (alias para start)
• npm run build: Compila o TypeScript

📝 Observações

• As perguntas específicas do frontend só aparecem quando "Frontend" é selecionado
• Suporte a seleção múltipla para libs adicionais
• Interface responsiva e intuitiva
• Geração automática de projetos baseada nas escolhas

📐 Arquitetura do Sistema

Componentes Principais

1. Types (types.ts)

Define todas as interfaces e tipos TypeScript usados no projeto.

2. Snippet Configs (configs/*.config.ts)

Cada biblioteca tem seu arquivo de configuração que define:

• Dependências necessárias
• Ações a serem executadas
• Prioridade de execução

Exemplo - Biblioteca Simples (Ky, Axios):

// Apenas copia arquivo para src/lib
{
  actions: [{
    type: 'copy-file',
    source: 'snippets/ky/index.ts',
    destination: 'src/lib/api.ts'
  }]
}

Exemplo - Biblioteca com Provider (TanStack Query, Nuqs):

{
  actions: [
    // 1. Copia arquivo de configuração
    {
      type: 'copy-file',
      source: 'snippets/react-query/index.tsx',
      destination: 'src/lib/query-client.tsx',
      priority: 1
    },
    // 2. Injeta provider no providers.tsx
    {
      type: 'inject-provider',
      providerImport: `import { QueryClientProvider } from '@/lib/query-client';`,
      providerWrapper: 'QueryClientProvider',
      priority: 2
    }
  ]
}

3. Action Executor (actions.ts)

Executa as ações definidas nos configs:

• executeCopyFile(): Copia arquivos dos snippets para o projeto
• executeInjectProvider(): Injeta providers no providers.tsx

4. Snippet Manager (snippet-manager.ts)

• Registra todos os snippets disponíveis
• Seleciona snippets baseado na configuração do usuário
• Coleta todas as dependências necessárias

5. Project Generator (project-generator.ts)

Orquestra todo o processo de geração:

1. Copiar template base
2. Processar snippets (copiar arquivos, injetar providers)
3. Atualizar package.json com dependências
4. Criar arquivos de configuração (.env.example)

🔄 Fluxo de Execução

Usuario → CLI → ProjectGenerator → SnippetManager → ActionExecutor
                      ↓
                 Templates + Snippets → Projeto Final

🎯 Tipos de Actions Disponíveis

copy-file

Copia arquivo de snippet para projeto

{
  type: 'copy-file',
  source: 'snippets/lib/index.ts',
  destination: 'src/lib/file.ts'
}

inject-provider

Adiciona provider no providers.tsx automaticamente

{
  type: 'inject-provider',
  providerImport: `import { Provider } from 'lib';`,
  providerWrapper: 'Provider'
}

📝 Como Adicionar Nova Biblioteca

1. Criar Config

// configs/nova-lib.config.ts
export const novaLibConfig: SnippetConfig = {
  name: 'nova-lib',
  dependencies: ['nova-lib'],
  actions: [/* suas ações */]
}

2. Registrar no SnippetManager

// snippet-manager.ts
this.registerSnippet('nova-lib', novaLibConfig);

3. Adicionar no Prompt

// index.ts - na lista de additionalLibs
{ value: 'nova-lib', label: 'Nova Lib' }