readme actualizado para la Rama

MIGRATION_GUIDE.md

@@ -0,0 +1,207 @@
+# Guía de Migración a TypeScript + shadcn/ui
+
+## ✅ Sprint 0 Completado - Setup Inicial
+
+Se han creado los siguientes archivos de configuración:
+
+### Archivos TypeScript
+- ✅ `frontend/tsconfig.json` - Configuración principal de TypeScript
+- ✅ `frontend/tsconfig.node.json` - Configuración para archivos de Node (vite.config)
+- ✅ `frontend/vite.config.ts` - Vite config migrado a TypeScript
+- ✅ `frontend/tailwind.config.ts` - Tailwind config migrado a TypeScript
+- ✅ `frontend/src/vite-env.d.ts` - Types para variables de entorno
+
+### shadcn/ui
+- ✅ `frontend/components.json` - Configuración de shadcn/ui
+- ✅ `frontend/src/lib/utils.ts` - Helper cn() para clases de Tailwind
+
+## 📋 Siguientes Pasos
+
+### 1. Instalar Dependencias
+
+Ejecuta en PowerShell desde `c:\Users\ADM\Downloads\checklist-mvp\frontend`:
+
+```powershell
+# Instalar TypeScript y tipos
+npm install -D typescript @types/react @types/react-dom @types/node
+npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
+
+# Instalar shadcn/ui y dependencias
+npm install @radix-ui/react-avatar @radix-ui/react-dialog @radix-ui/react-dropdown-menu
+npm install @radix-ui/react-label @radix-ui/react-select @radix-ui/react-separator
+npm install @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-toast
+npm install class-variance-authority tailwind-merge tailwindcss-animate vaul
+
+# Verificar que ya tienes instalados (según package.json actual)
+# - clsx (ya instalado)
+# - lucide-react (ya instalado)
+# - react 18.2.0 (ya instalado)
+# - tailwindcss (ya instalado)
+```
+
+### 2. Instalar Componentes shadcn/ui
+
+```powershell
+# Ejecutar desde frontend/
+npx shadcn-ui@latest add button
+npx shadcn-ui@latest add card
+npx shadcn-ui@latest add badge
+npx shadcn-ui@latest add input
+npx shadcn-ui@latest add select
+npx shadcn-ui@latest add dialog
+npx shadcn-ui@latest add table
+npx shadcn-ui@latest add tabs
+npx shadcn-ui@latest add toast
+npx shadcn-ui@latest add separator
+npx shadcn-ui@latest add dropdown-menu
+```
+
+Esto creará automáticamente los componentes en `frontend/src/components/ui/`
+
+### 3. Actualizar CSS (index.css)
+
+Agregar al **inicio** de `frontend/src/index.css` (antes del código existente):
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+### 4. Renombrar Archivos (IMPORTANTE)
+
+```powershell
+# Renombrar main.jsx a main.tsx
+Rename-Item frontend/src/main.jsx frontend/src/main.tsx
+
+# Eliminar archivos .js antiguos (ya tenemos .ts)
+Remove-Item frontend/vite.config.js
+Remove-Item frontend/tailwind.config.js
+```
+
+### 5. Actualizar index.html
+
+Cambiar la línea del script en `frontend/index.html`:
+
+**De:**
+```html
+<script type="module" src="/src/main.jsx"></script>
+```
+
+**A:**
+```html
+<script type="module" src="/src/main.tsx"></script>
+```
+
+### 6. Verificar que Compila
+
+```powershell
+cd frontend
+npm run dev
+```
+
+Si todo está bien, deberías ver:
+```
+VITE v5.0.11  ready in XXX ms
+
+➜  Local:   http://localhost:5173/
+➜  Network: use --host to expose
+```
+
+### 7. Crear Rama Git
+
+```powershell
+# Desde la raíz del proyecto
+git checkout -b feature/typescript-shadcn-migration
+git add frontend/tsconfig.json frontend/tsconfig.node.json
+git add frontend/vite.config.ts frontend/tailwind.config.ts
+git add frontend/components.json frontend/src/vite-env.d.ts
+git add frontend/src/lib/utils.ts MIGRATION_GUIDE.md
+git commit -m "feat(frontend): configure TypeScript + shadcn/ui setup
+
+- Add tsconfig.json with strict mode
+- Configure path aliases (@/*)
+- Add shadcn/ui configuration
+- Create lib/utils.ts helper
+- Add TypeScript environment types
+
+Backend version: sin cambios
+Frontend version: 1.4.0 -> 1.5.0-beta"
+git push -u origin feature/typescript-shadcn-migration
+```
+
+## 🎯 Estado Actual
+
+- ✅ Configuración TypeScript creada
+- ✅ Configuración shadcn/ui creada
+- ⏳ Pendiente: Instalar dependencias npm
+- ⏳ Pendiente: Renombrar archivos
+- ⏳ Pendiente: Instalar componentes shadcn
+- ⏳ Pendiente: Actualizar index.css
+- ⏳ Pendiente: Verificar compilación
+
+## 📝 Notas
+
+- El sistema actual (App.jsx) seguirá funcionando mientras no se renombre a .tsx
+- Los archivos TypeScript coexisten con JavaScript hasta migración completa
+- shadcn/ui se puede usar inmediatamente después de instalar componentes
+- No hay cambios en el backend por ahora
+
+## 🚀 Siguiente Sprint
+
+Una vez completados estos pasos, continuaremos con:
+- Sprint 1: Crear types para el módulo de Checklists
+- Sprint 2: Backend del módulo de Recambios
+- Sprint 3: Frontend del módulo de Recambios con TypeScript + shadcn