create-react-zr-architecture 1.0.0

package/README.md

@@ -0,0 +1,279 @@
+# 🚀 Create React Clean Architecture
+
+Generador CLI para crear proyectos React con **Clean Architecture**, TypeScript, Vite, Tailwind CSS y shadcn/ui.
+
+## ✨ Características
+
+- 🏗️ **Clean Architecture** - Separación clara de capas (Domain, Infrastructure, Presentation)
+- ⚡ **Vite** - Build tool ultra rápido
+- 🎨 **Tailwind CSS + shadcn/ui** - Componentes modernos y estilizados
+- 📦 **TypeScript** - Tipado estático
+- 🔄 **TanStack Query** - Manejo de estado del servidor
+- 🐻 **Zustand** - State management simple
+- 📝 **React Hook Form + Zod** - Formularios con validación
+- 🌐 **Axios** - Cliente HTTP
+- 🔌 **Socket.io** - WebSockets listo para usar
+- 🛣️ **React Router** - Navegación
+
+## 📦 Instalación
+
+```bash
+npx create-react-clean-arch mi-proyecto
+cd mi-proyecto
+npm run dev
+```
+
+## 📁 Estructura del Proyecto
+
+```
+mi-proyecto/
+├── src/
+│   ├── app/                    # Configuración de la aplicación
+│   │   └── App.tsx
+│   ├── domain/                 # Capa de Dominio (Lógica de Negocio)
+│   │   ├── entities/           # Entidades del dominio
+│   │   ├── repositories/       # Interfaces de repositorios
+│   │   ├── usecases/           # Casos de uso
+│   │   └── types/              # Tipos del dominio
+│   ├── infrastructure/         # Capa de Infraestructura
+│   │   ├── api/                # Cliente API
+│   │   ├── config/             # Configuraciones
+│   │   ├── data/               # Fuentes de datos
+│   │   ├── repositories/       # Implementaciones de repositorios
+│   │   └── services/           # Servicios externos
+│   ├── presentation/           # Capa de Presentación (UI)
+│   │   ├── components/         # Componentes React
+│   │   │   ├── layouts/
+│   │   │   ├── shared/
+│   │   │   ├── tables/
+│   │   │   └── ui/             # Componentes shadcn/ui
+│   │   ├── context/            # Context API
+│   │   ├── pages/              # Páginas
+│   │   ├── routes/             # Configuración de rutas
+│   │   ├── utils/              # Utilidades de UI
+│   │   └── viewmodels/         # ViewModels y hooks
+│   ├── shared/                 # Código compartido
+│   │   ├── config/             # Configuración global
+│   │   ├── constants/          # Constantes
+│   │   ├── hooks/              # Hooks compartidos
+│   │   ├── types/              # Tipos compartidos
+│   │   └── utils/              # Utilidades
+│   ├── lib/                    # Librerías y helpers
+│   ├── styles/                 # Estilos globales
+│   └── main.tsx                # Punto de entrada
+├── .env                        # Variables de entorno
+├── tailwind.config.js          # Configuración Tailwind
+├── tsconfig.json               # Configuración TypeScript
+├── vite.config.ts              # Configuración Vite
+└── package.json
+```
+
+## 🎯 Clean Architecture
+
+### Capas
+
+1. **Domain (Dominio)**
+   - Contiene la lógica de negocio pura
+   - Independiente de frameworks y librerías
+   - Define entidades, interfaces y casos de uso
+
+2. **Infrastructure (Infraestructura)**
+   - Implementaciones concretas de las interfaces del dominio
+   - Comunicación con APIs, bases de datos, servicios externos
+   - Manejo de datos y persistencia
+
+3. **Presentation (Presentación)**
+   - Componentes de UI
+   - ViewModels y hooks
+   - Manejo de estado de la UI
+
+4. **Shared (Compartido)**
+   - Código reutilizable entre capas
+   - Utilidades, constantes, tipos comunes
+
+### Flujo de Datos
+
+```
+UI (Presentation) → ViewModel → UseCase (Domain) → Repository Interface (Domain) → Repository Implementation (Infrastructure) → API
+```
+
+## 🛠️ Uso
+
+### Agregar Componentes shadcn/ui
+
+```bash
+npx shadcn-ui@latest add button
+npx shadcn-ui@latest add card
+npx shadcn-ui@latest add form
+npx shadcn-ui@latest add table
+```
+
+### Crear una Entidad
+
+```typescript
+// src/domain/entities/Product.ts
+import { BaseEntity } from '@/shared/types';
+
+export interface Product extends BaseEntity {
+  name: string;
+  price: number;
+  description: string;
+}
+```
+
+### Crear un Repositorio
+
+```typescript
+// src/domain/repositories/ProductRepository.ts
+import { Product } from '@/domain/entities/Product';
+
+export interface ProductRepository {
+  getAll(): Promise<Product[]>;
+  getById(id: string): Promise<Product>;
+  create(product: Omit<Product, 'id' | 'createdAt' | 'updatedAt'>): Promise<Product>;
+  update(id: string, product: Partial<Product>): Promise<Product>;
+  delete(id: string): Promise<void>;
+}
+```
+
+### Implementar el Repositorio
+
+```typescript
+// src/infrastructure/repositories/ProductRepositoryImpl.ts
+import { ProductRepository } from '@/domain/repositories/ProductRepository';
+import { Product } from '@/domain/entities/Product';
+import { apiClient } from '@/infrastructure/api/apiClient';
+
+export class ProductRepositoryImpl implements ProductRepository {
+  async getAll(): Promise<Product[]> {
+    return apiClient.get<Product[]>('/products');
+  }
+
+  async getById(id: string): Promise<Product> {
+    return apiClient.get<Product>(`/products/${id}`);
+  }
+
+  async create(product: Omit<Product, 'id' | 'createdAt' | 'updatedAt'>): Promise<Product> {
+    return apiClient.post<Product>('/products', product);
+  }
+
+  async update(id: string, product: Partial<Product>): Promise<Product> {
+    return apiClient.put<Product>(`/products/${id}`, product);
+  }
+
+  async delete(id: string): Promise<void> {
+    return apiClient.delete<void>(`/products/${id}`);
+  }
+}
+
+export const productRepository = new ProductRepositoryImpl();
+```
+
+### Crear un Caso de Uso
+
+```typescript
+// src/domain/usecases/products/GetAllProductsUseCase.ts
+import { ProductRepository } from '@/domain/repositories/ProductRepository';
+import { Product } from '@/domain/entities/Product';
+
+export class GetAllProductsUseCase {
+  constructor(private productRepository: ProductRepository) {}
+
+  async execute(): Promise<Product[]> {
+    return this.productRepository.getAll();
+  }
+}
+```
+
+### Usar en un Componente con TanStack Query
+
+```typescript
+// src/presentation/pages/ProductsPage.tsx
+import { useQuery } from '@tanstack/react-query';
+import { GetAllProductsUseCase } from '@/domain/usecases/products/GetAllProductsUseCase';
+import { productRepository } from '@/infrastructure/repositories/ProductRepositoryImpl';
+
+const getAllProductsUseCase = new GetAllProductsUseCase(productRepository);
+
+export const ProductsPage = () => {
+  const { data: products, isLoading, error } = useQuery({
+    queryKey: ['products'],
+    queryFn: () => getAllProductsUseCase.execute(),
+  });
+
+  if (isLoading) return <div>Cargando...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      <h1>Productos</h1>
+      {products?.map((product) => (
+        <div key={product.id}>
+          <h2>{product.name}</h2>
+          <p>{product.description}</p>
+          <p>${product.price}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+```
+
+## 🔧 Scripts Disponibles
+
+```bash
+npm run dev        # Iniciar servidor de desarrollo
+npm run build      # Construir para producción
+npm run preview    # Vista previa de la build
+npm run lint       # Ejecutar linter
+```
+
+## 🌍 Variables de Entorno
+
+```env
+VITE_API_URL=http://localhost:3000/api
+```
+
+## 📚 Librerías Incluidas
+
+| Librería | Versión | Propósito |
+|----------|---------|-----------|
+| React | ^18.3.1 | Framework UI |
+| TypeScript | ^5.6.2 | Tipado estático |
+| Vite | ^5.4.8 | Build tool |
+| Tailwind CSS | ^3.4.13 | Estilos |
+| React Router | ^6.26.2 | Navegación |
+| TanStack Query | ^5.56.2 | State management del servidor |
+| Zustand | ^4.5.5 | State management |
+| React Hook Form | ^7.53.0 | Formularios |
+| Zod | ^3.23.8 | Validación de esquemas |
+| Axios | ^1.7.7 | Cliente HTTP |
+| Socket.io Client | ^4.8.0 | WebSockets |
+| Lucide React | ^0.446.0 | Iconos |
+
+## 🤝 Contribuir
+
+Las contribuciones son bienvenidas. Por favor:
+
+1. Fork el proyecto
+2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)
+3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
+4. Push a la rama (`git push origin feature/AmazingFeature`)
+5. Abre un Pull Request
+
+## 📝 Licencia
+
+MIT © Diego Aguilera
+
+## 🔗 Enlaces
+
+- [Repositorio](https://github.com/diegoAguilera02/create-react-clean-arch)
+- [Issues](https://github.com/diegoAguilera02/create-react-clean-arch/issues)
+- [shadcn/ui](https://ui.shadcn.com/)
+- [Vite](https://vitejs.dev/)
+- [TanStack Query](https://tanstack.com/query/latest)
+
+---
+
+Creado con ❤️ usando Clean Architecture
+

package/bin/cli.js

@@ -0,0 +1,198 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+import ora from 'ora';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// ════════════════════════════════════════════════════════════
+// Argumentos
+// ════════════════════════════════════════════════════════════
+const args = process.argv.slice(2);
+const projectName = args[0];
+
+if (!projectName) {
+  console.log(chalk.red('❌ Error: Debes proporcionar un nombre para el proyecto'));
+  console.log(chalk.cyan('\nUso: npx create-react-clean-arch mi-proyecto'));
+  process.exit(1);
+}
+
+// ════════════════════════════════════════════════════════════
+// Detectar package manager
+// ════════════════════════════════════════════════════════════
+function detectPackageManager() {
+  const userAgent = process.env.npm_config_user_agent || '';
+  if (userAgent.includes('pnpm')) return 'pnpm';
+  if (userAgent.includes('yarn')) return 'yarn';
+  return 'npm';
+}
+
+const pkgManager = detectPackageManager();
+
+// ════════════════════════════════════════════════════════════
+// Funciones auxiliares
+// ════════════════════════════════════════════════════════════
+function runCommand(command, cwd = process.cwd()) {
+  try {
+    execSync(command, { cwd, stdio: 'inherit', shell: true });
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+// Manejar Ctrl+C correctamente
+process.on('SIGINT', () => {
+  console.log('\n\n👋 Proceso cancelado por el usuario');
+  process.exit(0);
+});
+
+// ════════════════════════════════════════════════════════════
+// Main
+// ════════════════════════════════════════════════════════════
+async function main() {
+  console.log(chalk.bold.cyan('\n🚀 Create React Clean Architecture\n'));
+  
+  const projectPath = path.join(process.cwd(), projectName);
+  
+  // Verificar si el directorio ya existe
+  if (fs.existsSync(projectPath)) {
+    console.log(chalk.red(`❌ Error: El directorio "${projectName}" ya existe`));
+    process.exit(1);
+  }
+
+  // ════════════════════════════════════════════════════════════
+  // 1. Crear proyecto base con Vite
+  // ════════════════════════════════════════════════════════════
+  const spinnerVite = ora('Creando proyecto base con Vite...').start();
+  
+  const createCommand = pkgManager === 'pnpm' 
+    ? `pnpm create vite@latest ${projectName} -- --template react-ts`
+    : pkgManager === 'yarn'
+    ? `yarn create vite ${projectName} --template react-ts`
+    : `npm create vite@latest ${projectName} -- --template react-ts`;
+  
+  const viteSuccess = runCommand(createCommand);
+  
+  if (!viteSuccess) {
+    spinnerVite.fail('Error al crear proyecto base');
+    process.exit(1);
+  }
+  
+  spinnerVite.succeed('Proyecto base creado');
+
+  // ════════════════════════════════════════════════════════════
+  // 2. Aplicar template Clean Architecture
+  // ════════════════════════════════════════════════════════════
+  const spinnerTemplate = ora('Aplicando template Clean Architecture...').start();
+  
+  const templatePath = path.join(__dirname, '../template');
+  
+  try {
+    // Copiar todos los archivos del template
+    fs.copySync(templatePath, projectPath, { 
+      overwrite: true,
+      filter: (src) => {
+        // No copiar node_modules si existe
+        return !src.includes('node_modules');
+      }
+    });
+    
+    // Renombrar archivos con _ prefix
+    const filesToRename = [
+      { from: '_package.json', to: 'package.json' },
+      { from: '_gitignore', to: '.gitignore' },
+      { from: '_env', to: '.env' },
+      { from: '_env.example', to: '.env.example' },
+    ];
+    
+    filesToRename.forEach(({ from, to }) => {
+      const fromPath = path.join(projectPath, from);
+      const toPath = path.join(projectPath, to);
+      
+      if (fs.existsSync(fromPath)) {
+        fs.moveSync(fromPath, toPath, { overwrite: true });
+      }
+    });
+    
+    // Reemplazar {{name}} en package.json
+    const packageJsonPath = path.join(projectPath, 'package.json');
+    let packageJson = fs.readFileSync(packageJsonPath, 'utf-8');
+    packageJson = packageJson.replace(/{{name}}/g, projectName);
+    fs.writeFileSync(packageJsonPath, packageJson);
+    
+    spinnerTemplate.succeed('Template aplicado exitosamente');
+  } catch (error) {
+    spinnerTemplate.fail('Error al aplicar template');
+    console.error(error);
+    process.exit(1);
+  }
+
+  // ════════════════════════════════════════════════════════════
+  // 3. Instalar dependencias
+  // ════════════════════════════════════════════════════════════
+  const spinnerDeps = ora(`Instalando dependencias con ${pkgManager}...`).start();
+  
+  const installCommand = pkgManager === 'pnpm' 
+    ? 'pnpm install --shamefully-hoist'
+    : pkgManager === 'yarn'
+    ? 'yarn'
+    : 'npm install';
+  
+  const installSuccess = runCommand(installCommand, projectPath);
+  
+  if (!installSuccess) {
+    spinnerDeps.fail('Error al instalar dependencias');
+    process.exit(1);
+  }
+  
+  spinnerDeps.succeed('Dependencias instaladas');
+
+  // ════════════════════════════════════════════════════════════
+  // 4. Inicializar git
+  // ════════════════════════════════════════════════════════════
+  const spinnerGit = ora('Inicializando repositorio git...').start();
+  
+  runCommand('git init', projectPath);
+  runCommand('git add -A', projectPath);
+  runCommand('git commit -m "Initial commit from create-react-clean-arch"', projectPath);
+  
+  spinnerGit.succeed('Repositorio git inicializado');
+
+  // ════════════════════════════════════════════════════════════
+  // 5. Mensaje final
+  // ════════════════════════════════════════════════════════════
+  console.log(chalk.bold.green('\n✨ ¡Proyecto creado exitosamente!\n'));
+  
+  console.log(chalk.cyan('Estructura Clean Architecture:'));
+  console.log('   ✅ domain/ (entities, repositories, usecases)');
+  console.log('   ✅ infrastructure/ (api, repositories, services)');
+  console.log('   ✅ presentation/ (components, pages, viewmodels)');
+  console.log('   ✅ shared/ (hooks, utils, types)\n');
+  
+  console.log(chalk.cyan('Librerías instaladas:'));
+  console.log('   ✅ React Router DOM');
+  console.log('   ✅ TanStack Query');
+  console.log('   ✅ Zustand');
+  console.log('   ✅ React Hook Form + Zod');
+  console.log('   ✅ Tailwind CSS + shadcn/ui');
+  console.log('   ✅ Axios + Socket.io\n');
+  
+  console.log(chalk.cyan('🎯 Próximos pasos:\n'));
+  console.log(chalk.white(`   cd ${projectName}`));
+  const devCommand = pkgManager === 'npm' ? 'npm run dev' : `${pkgManager} dev`;
+  console.log(chalk.white(`   ${devCommand}\n`));
+  console.log(chalk.yellow('💡 Agregar componentes shadcn:\n'));
+  console.log(chalk.white(`   npx shadcn-ui@latest add button`));
+  console.log(chalk.white(`   npx shadcn-ui@latest add card form table\n`));
+  
+  console.log(chalk.gray('Documentación completa en README.md'));
+  console.log(chalk.gray('Creado con Aura...'));
+}
+
+main().catch(console.error);

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "create-react-zr-architecture",
+  "version": "1.0.0",
+  "description": "Create React applications with Clean Architecture, TypeScript, Vite, Tailwind CSS, and shadcn/ui",
+  "type": "module",
+  "bin": {
+    "create-react-zr-architecture": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "scripts": {
+    "test": "node bin/cli.js test-project"
+  },
+  "keywords": [
+    "react",
+    "clean-architecture",
+    "vite",
+    "typescript",
+    "tailwindcss",
+    "shadcn-ui",
+    "template",
+    "boilerplate",
+    "starter"
+  ],
+  "author": "Diego Aguilera",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/diegoAguilera02/create-react-zr-architecture"
+  },
+  "bugs": {
+    "url": "https://github.com/diegoAguilera02/create-react-zr-architecture/issues"
+  },
+  "homepage": "https://github.com/diegoAguilera02/create-react-zr-architecture#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "fs-extra": "^11.2.0",
+    "chalk": "^5.3.0",
+    "ora": "^8.0.1"
+  }
+}

package/template/_env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000/api

package/template/_env.example

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000/api

package/template/_gitignore

@@ -0,0 +1,35 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Database
+*.db
+*.sqlite
+*.sqlite3