# Production Ready: Definición Oficial

Este documento define qué significa que un widget generado con Dynamic Framework sea **production ready**.

---

## Definición

Un widget es **production ready** cuando cumple **todos** los criterios verificables automáticamente, y ha pasado una revisión básica de los criterios manuales.

---

## Criterios Verificables (Automatizados)

Estos criterios son validados por el **Validator** y deben cumplirse al 100%.

### 1. Estructura y Arquitectura

| Criterio | Validación |
|----------|------------|
| Estructura de carpetas correcta | `folder-structure/*` rules |
| Archivos requeridos presentes | `required-files/*` rules |
| Naming conventions | `naming/*` rules |
| Dependencias correctas | `dependencies/*` rules |
| TypeScript configurado | `typescript/*` rules |
| Iconos en PascalCase (Lucide) | `ui-patterns/icon-format` rule |

**Score requerido:** >= 95%

---

### 2. Manejo de Estados de Datos

| Criterio | Validación |
|----------|------------|
| Loading state manejado | `data-states/loading-handled` |
| Error state manejado | `data-states/error-handled` |
| Empty state manejado | `data-states/empty-handled` |

**Componentes disponibles:**
- `LoadingState` - Skeletons contextuales
- `ErrorState` - Error con retry
- `EmptyState` - Estado vacío informativo
- `DataStateWrapper` - Wrapper que maneja los 4 estados

---

### 3. Resiliencia ante Errores

| Criterio | Validación |
|----------|------------|
| ErrorBoundary existe | `error-boundary/component-exists` |
| ErrorBoundary usado en App | `error-boundary/used-in-app` |

**Garantía:** El widget nunca muestra pantalla blanca ante errores inesperados.

---

### 4. Cobertura de Tests

| Criterio | Validación |
|----------|------------|
| Al menos 1 test file | `testing/min-test-files` |
| Hooks tienen tests | `testing/hooks-have-tests` |
| Tests organizados | `testing/tests-folder-structure` |

**Mínimo:** 1 test por hook custom en `src/hooks/`.

---

### 5. Accessibility Básica

| Criterio | Validación |
|----------|------------|
| Inputs con labels | `a11y/inputs-have-labels` |
| Botones con texto | `a11y/buttons-have-text` |
| Imágenes con alt | `a11y/images-have-alt` |

**Nota:** Estas son validaciones básicas. Accessibility completa requiere auditoría manual.

---

## Criterios de Revisión Manual (Recomendados)

Estos criterios **no son validados automáticamente** pero se recomiendan antes de deploy.

### Performance
- [ ] No hay re-renders innecesarios (React DevTools)
- [ ] Bundle size razonable (< 500KB gzipped para widget típico)
- [ ] No hay memory leaks en navegación

### UX/Visual
- [ ] Diseño consistente con brand guidelines
- [ ] Responsive en móvil (si aplica)
- [ ] Transiciones suaves en cambios de estado

### Seguridad
- [ ] No se exponen datos sensibles en console
- [ ] Inputs sanitizados si aplica
- [ ] No hay secrets hardcodeados

### Integración
- [ ] Funciona correctamente en portal Modyo
- [ ] i18n funciona en todos los idiomas requeridos
- [ ] APIs reales conectadas y funcionando

---

## Cómo Verificar

### Paso 1: Ejecutar Validator

Preferido: invocá la tool MCP `widgets-validate` (acepta `projectPath` o `projectFiles`); devuelve un `ValidationReport` con score, passing, errores y warnings.

Fallback sin MCP:

```bash
npx @modyo/widget-validator <path-al-widget>
```

La integración opcional con hooks de Claude Code (ver `modyo://docs/widgets/_meta-integration-claude-code`) puede invocar el validator automáticamente tras cada edición.

**Resultado esperado:**
```
Score: 98% (96/98 checks passed)
2 warnings (non-blocking)
```

### Paso 2: Ejecutar Tests

```bash
cd generated-widgets/[nombre-widget]
npm run test
```

**Resultado esperado:**
```
All tests passed
```

### Paso 3: Revisión Visual

1. Ejecutar widget: `npm run dev`
2. Verificar los 4 estados de datos:
   - Loading -> Muestra skeleton/spinner
   - Error -> Muestra mensaje con retry
   - Empty -> Muestra mensaje informativo
   - Success -> Muestra datos correctamente
3. Probar Error Boundary (opcional): Forzar error en código

### Paso 4: Checklist Manual

Revisar criterios manuales según contexto del proyecto.

---

## Niveles de Production Readiness

### Nivel 1: Validator Pass (Automatizado)

- Score >= 95%
- Todos los criterios de Fases 1-4
- **Listo para:** Demo, QA interno, staging

### Nivel 2: + Tests Pass

- Nivel 1 completo
- `npm run test` pasa
- Cobertura de hooks
- **Listo para:** QA externo, UAT

### Nivel 3: + Revisión Manual

- Nivel 2 completo
- Checklist manual completado
- Revisión de UX/performance
- **Listo para:** Producción

---

## Lo Que NO Garantizamos

Ser honesto sobre limitaciones:

| Aspecto | Status |
|---------|--------|
| Cobertura de tests > 80% | No requerido |
| WCAG AA completo | No verificado |
| Performance en datasets grandes | No testeado |
| Compatibilidad cross-browser | No verificado |
| Seguridad (XSS, injection) | Requiere auditoría |
| Responsive design | Requiere QA visual |

**Recomendación:** Para widgets críticos de producción, agregar QA manual para estos aspectos.

---

## Evolución del Estándar

Este estándar evolucionará. Cambios se documentan en:

1. `PROJECT_STATE.md` - Session Log
2. Las nuevas reglas de validación se agregan al validator standalone en `dynamic-context/validator/src/rules/`. El refactor a librería importable es Pendiente #14 del MCP.
3. Este documento - Actualizaciones

**Versión actual:** 1.0
**Última actualización:** 2026-01-20

---

## Ver También

- `modyo://docs/widgets/patterns-data-states`
- `modyo://docs/widgets/patterns-testing`
- `modyo://docs/widgets/reference-accessibility`
- `modyo://docs/widgets/reference-validator-rules`