readme-es.md

⚛️ Compilot CLI

Compilot CLI es una herramienta diseñada para automatizar la creación de componentes, páginas, hooks y servicios en React a partir de plantillas predefinidas. Simplifica el proceso de desarrollo generando código base (boilerplate), permitiendo a los desarrolladores centrarse en las funcionalidades en lugar de en la estructura de archivos.

✨ Funcionalidades

• 🧩 Generación de Componentes: Crea componentes de React rápidamente con soporte para TypeScript y stories para Storybook.

• 📄 Creación de Páginas: Genera páginas completas con lógica, vista y configuración de rutas.

• 🔁 Hooks Personalizados: Crea hooks reutilizables fácilmente, usando Zustand, context-api de React o estado local.

• 🔌 Servicios: Genera servicios con tipos en TypeScript, mocks y handlers para llamadas a APIs.

• 💬 Interfaz por Prompts: Guías interactivas para facilitar el proceso de creación.

• ⚙️ Configuración Personalizable: Puedes sobrescribir rutas, nombres y comportamiento por defecto mediante un archivo de configuración propio.

🎨 UI

📦 Instalación

npm i -D @egdev6/compilot-cli

🚀 Uso

npx compilot-cli

Sigue los prompts para elegir el tipo de recurso que quieres generar (componente, página, hook o servicio) e introduce los detalles necesarios.

🛠 Configuración

⚙️ Por defecto

El paquete incluye una configuración por defecto que define las rutas base y extensiones de los archivos generados:

{
	"config": {
		"language": "typescript", // ["typescript", ["javascript"]]
		"generatedFiles": true, // [true, false]
		"openFiles": true // [true, false]
	},
	"components": {
		"base": "src/components",
		"atomic": true, // [true, false]
		"naming": {
			"folder": "kebabCase" // ["kebabCase", "pascalCase", "camelCase"]
		},
		"files": {
			"types": "file", // ["file", "inline"]
			"stories": true, // [true, false]
			"test": true // [true, false]
		}
	},
	"pages": {
		"base": "src/pages",
		"routes": "src/app/Router.tsx",
		"files": {
			"types": "file", // ["file", "inline"]
			"lazy": true // [true, false]
		}
	},
	"hooks": {
		"base": "src/hooks",
		"context": {
			"file": "src/app/main.tsx",
			"mode": "tree" // ["tree", "array"]
		}
	},
	"services": {
		"base": "src/services",
		"axios": "src/config/axios",
		"types": "src/models/api",
		"mocks": {
			"enabled": true,
			"data": "src/mocks/data",
			"server": "src/mocks/server.ts"
		}
	}
}

🔧 Sobrescribir la Configuración

Puedes crear un archivo compilot.config.json en la raíz de tu proyecto para personalizar rutas, extensiones y comportamiento:

Ejemplo de configuración personalizada

{
	"config": {
		"language": "javascript",
		"generatedFiles": false,
	},
  "components": {
		"base": "src/components",
		"atomic": false,
		"naming": {
			"folder": "pascalCase"
		},
		"files": {
			"types": "inline",
			"stories": false,
			"test": false
		}
	},
}

En este ejemplo:

• Los archivos se generarán con la extensión .js. • Se desactiva la generación automática de los archivos. • Los componentes se crearán en la carpeta custom/components. • La metodología “atomic” está desactivada. • La carpeta del componente usará el formato PascalCase. • No se generarán los archivos .stories ni .test.

🔧 Ejemplos para Rutas Anidadas

• Estructura de Carpetas Anidadas: Usa rutas de carpetas como src/pages/home/user para crear rutas anidadas.
  • Comando: npx compilot-cli
  • Tipo: page
  • Nombre: user
  • Carpeta: src/pages/home/user
  • Resultado: Genera src/pages/home/user/UserPage.jsx con ruta añadida a src/app/Router.tsx.
• Múltiples Niveles Anidados: Para src/pages/admin/dashboard/settings, repite el proceso.
  • Nombre: settings
  • Carpeta: src/pages/admin/dashboard/settings
• Ejemplo de Ruta Personalizada: Añade un comentario en Router.tsx como:

//-- plop hook for import --//
{/*-- plop hook for route --*/}
<Route path="/admin/*" element={<AdminLayout />}>
  {/*-- plop hook for nested route --*/}
</Route>

🧪 Cómo funciona la Metodología “Atomic”

Si está activada, los componentes se agrupan en atoms, molecules y organisms:

src/components
├── atoms
│   └── button
│       ├── Button.tsx
│       ├── Button.stories.tsx
│       └── index.ts
├── molecules
│   └── form
│       ├── Form.tsx
│       ├── Form.stories.tsx
│       └── index.ts
└── organisms
    └── header
        ├── Header.tsx
        ├── Header.stories.tsx
        └── index.ts

Si está desactivada, todos los componentes se generan en la raíz de components/ o la ruta que tengas sobreescrita en la configuración:

src/components
├── button
│   ├── Button.tsx
│   ├── Button.stories.tsx
│   └── index.ts
├── form
│   ├── Form.tsx
│   ├── Form.stories.tsx
│   └── index.ts
└── header
    ├── Header.tsx
    ├── Header.stories.tsx
    └── index.ts

🧪 Añadir Providers automáticamente (context + árbol)

Si eliges "context" al crear un hook, se puede insertar automáticamente en tu archivo de providers:

	"hooks": {
		"context": {
			"file": "src/app/main.tsx",
			"mode": "tree"
		}
	},

🧪 Añadir Imports Lazy y Rutas para las Páginas

Si quieres que el tipo page inserte automáticamente un import lazy (o regular) y su correspondiente ruta en tu archivo de rutas, debes añadir comentarios específicos en el archivo definido en config.pages.routes. Estos comentarios actúan como marcadores donde la herramienta añadirá el código necesario.

Asegúrate de que la ruta del archivo esté correctamente configurada en tu compilot-cli.config.json, por ejemplo:

	"pages": {
		"routes": "src/app/Router.tsx",
		"files": {
			"types": "file",
			"lazy": true
		}
	},

🧪 Añadir Mocks a tu Servidor

Si quieres que el tipo service inserte automáticamente un mock en tu archivo de servidor, debes: 1. Activar la opción config.services.mocks.enabled en tu archivo de configuración. 2. Añadir comentarios específicos en el archivo definido en config.services.mocks.server.

Estos comentarios actuarán como marcadores donde la herramienta insertará el código necesario.

	"services": {
		"mocks": {
			"enabled": true,
			"data": "src/mocks/data",
			"server": "src/mocks/server.ts"
		}
	}

Recomiendo configurar este paquete en tu proyecto https://github.com/reinerBa/vite-plugin-mock-simple 1. Mueve todas las llamadas dentro de mockSimple([]) a una carpeta específica. 2. Exporta esa configuración desde dicha carpeta para usarla en Vite.

import mockSimple from 'vite-plugin-mock-simple'
import { mockServer } from 'src/mocks/mockServer.ts'

export default defineConfig({
  plugins: [
    mockSimple(mockServer)
  ]
})

Además, añade esta variable en tu archivo .env.development:

VITE_ENVIROPMENT='DEV'

Comentarios Requeridos

Añade los siguientes comentarios en tu archivo de rutas (por ejemplo, src/app/Router.tsx):

//-- plop hook for import --//
{/*-- plop hook for route --*/}

Añade los siguientes comentarios en tu archivo de providers de la aplicación (por ejemplo, src/app/main.tsx):

{/*-- plop hook for providers --*/}<App/>

Añade los siguientes comentarios en tu archivo de mocks (por ejemplo, src/mocks/server.tsx):

//-- plop hook for mocks -- //

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Si tienes alguna mejora o detectas un error, no dudes en abrir un issue o enviar un pull request. Si te gusta la herramienta… 🌟 ¡una estrella siempre ayuda!

📄 Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.

📬 Contacto