# 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