checklist/MIGRATION_GUIDE.md

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:

# 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

# 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):

@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)

# 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:

<script type="module" src="/src/main.jsx"></script>

A:

<script type="module" src="/src/main.tsx"></script>

6. Verificar que Compila

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

# 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