npm package: @franciscocaterino/vite-project-generator
Description: Generador de proyectos base con Vite para desarrollo rápido
Author: Francisco Caterino
Latest version: 1.0.0

# 🚀 Vite Project Generator

Un generador de proyectos completo para crear aplicaciones modernas con Vite de forma rápida y eficiente.

## 📋 Tabla de Contenidos

- [Características](#-características)
- [Instalación](#-instalación)
- [Uso Básico](#-uso-básico)
- [Uso Avanzado](#-uso-avanzado)
- [Plantillas Disponibles](#-plantillas-disponibles)
- [Configuraciones Disponibles](#-configuraciones-disponibles)
- [Estructura del Proyecto Generado](#-estructura-del-proyecto-generado)
- [Scripts Disponibles](#-scripts-disponibles)
- [Ejemplos de Uso](#-ejemplos-de-uso)
- [Desarrollo](#-desarrollo)
- [Contribuir](#-contribuir)

## ✨ Características

- 🎯 **Múltiples plantillas**: React, Vue, Vanilla JS/TS, Svelte, Preact
- ⚡ **Configuración automática**: ESLint, Prettier, Husky, Testing
- 🎨 **Frameworks CSS**: Tailwind, Bootstrap, Material-UI, Styled Components
- 🧪 **Testing integrado**: Vitest con Testing Library
- 📚 **Storybook**: Documentación de componentes opcional
- 🐳 **Docker**: Configuración completa de contenedores
- 📱 **PWA**: Soporte para Progressive Web Apps
- 🔧 **CLI interactivo**: Configuración paso a paso
- 📦 **Gestión inteligente de dependencias**

## 📦 Instalación

### Instalación Global (Recomendada)

```bash
npm install -g vite-project-generator
```

### Uso con npx (Sin instalación)

```bash
npx vite-project-generator mi-proyecto
```

## 🚀 Uso Básico

### Comando Simple

```bash
new-project mi-proyecto
```

Este comando iniciará el asistente interactivo que te guiará através de todas las opciones de configuración.

### Con Parámetros

```bash
# Crear proyecto React con TypeScript
new-project mi-app-react --template react-ts

# Crear proyecto Vue con JavaScript
new-project mi-app-vue --template vue

# Forzar sobrescritura de directorio existente
new-project mi-proyecto --force
```

## 🎯 Uso Avanzado

### Modo Interactivo Completo

Al ejecutar el comando sin parámetros, se iniciará el modo interactivo:

```bash
new-project
```

El asistente te preguntará:

1. **Nombre del proyecto**
2. **Tipo de plantilla** (React, Vue, Vanilla, etc.)
3. **Configuraciones adicionales**:
   - Enrutamiento
   - Gestión de estado
   - Testing
   - Storybook
   - PWA
   - Docker
   - Framework CSS
   - Linting y formateo
   - Git hooks

### Línea de Comandos

```bash
# Ayuda
new-project --help

# Versión
new-project --version

# Listar plantillas disponibles
new-project --list-templates
```

## 📄 Plantillas Disponibles

| Plantilla | Descripción | Tecnologías |
|-----------|-------------|-------------|
| `react` | React + JavaScript | React 18, JSX |
| `react-ts` | React + TypeScript | React 18, TypeScript, JSX |
| `vue` | Vue 3 + JavaScript | Vue 3, Composition API |
| `vue-ts` | Vue 3 + TypeScript | Vue 3, TypeScript, Composition API |
| `vanilla` | JavaScript Vanilla | ES6+, Módulos |
| `vanilla-ts` | TypeScript Vanilla | TypeScript, ES6+ |
| `svelte` | Svelte | Svelte 4, SvelteKit |
| `preact` | Preact | Preact, JSX |

## ⚙️ Configuraciones Disponibles

### 🚦 Enrutamiento
- **React**: React Router DOM
- **Vue**: Vue Router
- **Vanilla**: History API personalizada

### 🗄️ Gestión de Estado
- **React**: Zustand (ligero y moderno)
- **Vue**: Pinia (oficialmente recomendado)

### 🧪 Testing
- **Framework**: Vitest (compatible con Vite)
- **Utilidades**: Testing Library
- **Cobertura**: Incluida por defecto

### 📚 Storybook
- Configuración automática según plantilla
- Addons esenciales incluidos
- Documentación de componentes

### 🎨 Frameworks CSS

#### Tailwind CSS
```bash
# Configuración automática incluye:
# - tailwind.config.js
# - postcss.config.js
# - Clases base en index.css
```

#### Bootstrap
```bash
# Incluye Bootstrap 5 con:
# - Grid system
# - Componentes
# - Utilidades
```

#### Material-UI
- **React**: Material-UI v5 con Emotion
- **Vue**: Vuetify 3

#### Styled Components
- Solo para proyectos React
- CSS-in-JS completo

### 🐳 Docker
```dockerfile
# Configuración multi-stage incluye:
# - Dockerfile optimizado
# - docker-compose.yml
# - nginx.conf para producción
```

### 📱 PWA
```javascript
// Configuración automática con:
// - Service Worker
// - Manifest.json
// - Iconos adaptativos
// - Offline support
```

## 📁 Estructura del Proyecto Generado

```
mi-proyecto/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   ├── images/
│   │   └── icons/
│   ├── components/
│   │   └── README.md
│   ├── hooks/              # Solo React
│   ├── utils/
│   │   └── index.js
│   ├── styles/
│   │   └── index.css
│   ├── App.jsx
│   └── main.jsx
├── tests/                  # Si testing habilitado
│   └── setup.js
├── .storybook/            # Si Storybook habilitado
│   ├── main.js
│   └── preview.js
├── .env.example
├── .gitignore
├── .eslintrc.json         # Si linting habilitado
├── .prettierrc            # Si linting habilitado
├── Dockerfile             # Si Docker habilitado
├── docker-compose.yml     # Si Docker habilitado
├── tailwind.config.js     # Si Tailwind habilitado
├── vite.config.js
├── package.json
└── README.md
```

## 🛠️ Scripts Disponibles

### Scripts Base (Todos los proyectos)
```json
{
  "dev": "vite",
  "build": "vite build",
  "build:prod": "vite build --mode production",
  "preview": "vite preview",
  "clean": "rm -rf dist"
}
```

### Scripts de Testing (Si habilitado)
```json
{
  "test": "vitest",
  "test:ui": "vitest --ui",
  "test:coverage": "vitest --coverage"
}
```

### Scripts de Linting (Si habilitado)
```json
{
  "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
  "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
  "format": "prettier --write src/**/*.{js,jsx,ts,tsx,json,css,md}"
}
```

### Scripts de Storybook (Si habilitado)
```json
{
  "storybook": "storybook dev -p 6006",
  "build-storybook": "storybook build"
}
```

### Scripts de Docker (Si habilitado)
```json
{
  "docker:build": "docker build -t mi-proyecto .",
  "docker:run": "docker run -p 80:80 mi-proyecto"
}
```

## 💡 Ejemplos de Uso

### Ejemplo 1: Proyecto React Completo

```bash
new-project mi-ecommerce --template react-ts
```

**Configuración recomendada:**
- ✅ Enrutamiento (React Router)
- ✅ Gestión de estado (Zustand)
- ✅ Testing (Vitest + Testing Library)
- ✅ Tailwind CSS
- ✅ ESLint + Prettier
- ✅ Git hooks (Husky)

### Ejemplo 2: Proyecto Vue SPA

```bash
new-project mi-dashboard --template vue-ts
```

**Configuración recomendada:**
- ✅ Enrutamiento (Vue Router)
- ✅ Gestión de estado (Pinia)
- ✅ Testing (Vitest + Vue Testing Library)
- ✅ Material-UI (Vuetify)
- ✅ PWA
- ✅ Docker

### Ejemplo 3: Biblioteca de Componentes

```bash
new-project mi-ui-library --template react-ts
```

**Configuración recomendada:**
- ❌ Enrutamiento
- ❌ Gestión de estado
- ✅ Testing
- ✅ Storybook
- ✅ Styled Components
- ✅ Linting completo

### Ejemplo 4: Prototipo Rápido

```bash
new-project mi-prototipo --template vanilla
```

**Configuración minimalista:**
- ❌ Enrutamiento
- ❌ Gestión de estado
- ❌ Testing
- ✅ Tailwind CSS
- ❌ Docker

## 🔧 Desarrollo

### Clonar el Repositorio

```bash
git clone https://github.com/tuusuario/vite-project-generator.git
cd vite-project-generator
```

### Instalar Dependencias

```bash
npm install
```

### Vincular Globalmente para Desarrollo

```bash
npm link
```

### Probar Localmente

```bash
new-project test-project
```

### Estructura del Código

```
vite-project-generator/
├── bin/
│   └── cli.js              # Punto de entrada del CLI
├── lib/
│   ├── templates.js        # Configuración de plantillas
│   ├── interactive.js      # Interfaz interactiva
│   ├── dependencies.js     # Gestión de dependencias
│   └── enhancer.js         # Mejoras del proyecto
├── tests/
│   └── cli.test.js
├── package.json
└── README.md
```

## 📈 Roadmap

### v1.1.0
- [ ] Soporte para Solid.js
- [ ] Plantillas de micro-frontends
- [ ] Integración con Vercel/Netlify
- [ ] Configuración automática de CI/CD

### v1.2.0
- [ ] Soporte para Astro
- [ ] Plantillas de aplicaciones móviles (Capacitor)
- [ ] Integración con Supabase/Firebase
- [ ] Generador de componentes

### v2.0.0
- [ ] GUI web para configuración
- [ ] Marketplace de plantillas personalizadas
- [ ] Plantillas empresariales
- [ ] Soporte para monorepos

## 🤝 Contribuir

### Reportar Bugs

1. Verifica que el bug no haya sido reportado antes
2. Crea un issue con:
   - Descripción detallada
   - Pasos para reproducir
   - Versión del generador
   - Sistema operativo

### Solicitar Features

1. Busca si la característica ya fue solicitada
2. Crea un issue explicando:
   - El problema que resuelve
   - Casos de uso
   - Propuesta de implementación

### Contribuir Código

1. Fork el proyecto
2. Crea una rama para tu feature:
   ```bash
   git checkout -b feature/nueva-caracteristica
   ```
3. Commit tus cambios:
   ```bash
   git commit -m 'feat: agregar nueva característica'
   ```
4. Push a la rama:
   ```bash
   git push origin feature/nueva-caracteristica
   ```
5. Abre un Pull Request

### Guías de Contribución

- Usa [Conventional Commits](https://www.conventionalcommits.org/)
- Agrega tests para nuevas características
- Actualiza la documentación
- Sigue el estilo de código existente

## 📜 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo [LICENSE](LICENSE) para más detalles.

## 👥 Autores

- **Tu Nombre** - *Trabajo inicial* - [TuUsuario](https://github.com/tuusuario)

## 🙏 Agradecimientos

- [Vite](https://vitejs.dev/) por la herramienta base
- [Inquirer.js](https://github.com/SBoudrias/Inquirer.js/) por la interfaz interactiva
- [Chalk](https://github.com/chalk/chalk) por los colores en terminal
- La comunidad de desarrolladores que inspira este proyecto

## 📞 Soporte

- **Issues**: [GitHub Issues](https://github.com/tuusuario/vite-project-generator/issues)
- **Discusiones**: [GitHub Discussions](https://github.com/tuusuario/vite-project-generator/discussions)
- **Email**: tu-email@ejemplo.com

---

**¡Hecho con ❤️ para la comunidad de desarrolladores!**