e101c7b94c
Some checks are pending
Build / Build Backend (push) Waiting to run
Build / Build Docker Image (push) Blocked by required conditions
Build / Build Mobile (TypeScript Check) (push) Waiting to run
Lint / Lint Backend (push) Waiting to run
Lint / Lint Mobile (push) Waiting to run
Test / Backend E2E Tests (push) Waiting to run
Test / Mobile Unit Tests (push) Waiting to run
- Move 5 non-standard folders to _archive/ - Archive 2 extra root files - Update _MAP.md with standardized structure Standard: SIMCO-ESTANDAR-ORCHESTRATION v1.0.0 Level: CONSUMER (L2) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
365 lines
9.2 KiB
Markdown
365 lines
9.2 KiB
Markdown
# PLAN DE DOCUMENTACIÓN - UX MOBILE: Animaciones + Modo Offline
|
|
|
|
---
|
|
id: PLAN-DOC-UX-MOBILE-001
|
|
type: Plan
|
|
status: Draft
|
|
created_date: 2026-01-12
|
|
updated_date: 2026-01-12
|
|
phase: 3-planificacion
|
|
simco_version: "4.0.0"
|
|
---
|
|
|
|
## FASE 3: PLANEACIÓN BASADA EN ANÁLISIS
|
|
|
|
### 3.1 Documentos a Actualizar
|
|
|
|
| # | Documento | Ubicación | Acción | Prioridad |
|
|
|---|-----------|-----------|--------|-----------|
|
|
| 1 | TRAZA-TAREAS-MOBILE.md | orchestration/trazas/ | Agregar tarea MII-MO-014 | Alta |
|
|
| 2 | FRONTEND_INVENTORY.yml | orchestration/inventarios/ | Agregar nuevos componentes | Alta |
|
|
| 3 | PROJECT-STATUS.md | orchestration/ | Actualizar métricas mobile | Media |
|
|
| 4 | PROXIMA-ACCION.md | orchestration/ | Marcar UX como completado | Media |
|
|
|
|
### 3.2 Detalle de Cambios por Documento
|
|
|
|
---
|
|
|
|
#### 3.2.1 TRAZA-TAREAS-MOBILE.md
|
|
|
|
**Estado Actual:**
|
|
- Tareas totales: 13
|
|
- Última tarea: MII-MO-013
|
|
|
|
**Cambio Requerido:**
|
|
Agregar nueva tarea `MII-MO-014` con formato estándar:
|
|
|
|
```markdown
|
|
### [2026-01-12] MII-MO-014
|
|
**Estado:** completado
|
|
**Agente:** Claude Opus 4.5
|
|
**Fecha Completado:** 2026-01-12
|
|
|
|
#### Descripcion
|
|
UX Mobile: Animaciones fluidas + Modo Offline
|
|
|
|
#### Archivos Creados
|
|
# Hooks
|
|
- `src/hooks/useAnimations.ts`
|
|
- `src/hooks/useNetworkStatus.ts`
|
|
|
|
# Theme
|
|
- `src/theme/ThemeContext.tsx`
|
|
|
|
# Componentes UI
|
|
- `src/components/ui/Skeleton.tsx`
|
|
- `src/components/ui/OfflineBanner.tsx`
|
|
- `src/components/ui/AnimatedList.tsx`
|
|
|
|
# Skeletons Específicos
|
|
- `src/components/skeletons/InventoryItemSkeleton.tsx`
|
|
- `src/components/skeletons/StoreCardSkeleton.tsx`
|
|
- `src/components/skeletons/CreditCardSkeleton.tsx`
|
|
- `src/components/skeletons/NotificationSkeleton.tsx`
|
|
|
|
#### Archivos Modificados
|
|
- `src/stores/stores.store.ts` - Persistencia AsyncStorage
|
|
- `src/stores/inventory.store.ts` - Persistencia AsyncStorage
|
|
- `src/stores/credits.store.ts` - Persistencia AsyncStorage
|
|
- `src/stores/notifications.store.ts` - Persistencia AsyncStorage
|
|
- `src/app/_layout.tsx` - ThemeProvider + OfflineBanner
|
|
- `src/app/(tabs)/index.tsx` - Animaciones + Skeletons
|
|
- `src/app/(tabs)/inventory.tsx` - Animaciones + Skeletons
|
|
|
|
#### Dependencias Instaladas
|
|
- @react-native-async-storage/async-storage
|
|
- @react-native-community/netinfo
|
|
|
|
#### Resultado
|
|
App con animaciones fluidas, skeleton loaders, persistencia offline y detección de red.
|
|
```
|
|
|
|
**Actualizar Resumen:**
|
|
```markdown
|
|
| Metrica | Valor |
|
|
|---------|-------|
|
|
| Tareas totales | 14 |
|
|
| Completadas | 14 |
|
|
| En progreso | 0 |
|
|
| Pendientes | 0 |
|
|
| Progreso | 100% |
|
|
```
|
|
|
|
---
|
|
|
|
#### 3.2.2 FRONTEND_INVENTORY.yml
|
|
|
|
**Cambios Requeridos:**
|
|
|
|
1. **Actualizar metadata:**
|
|
```yaml
|
|
metadata:
|
|
version: "3.0.0"
|
|
actualizado: 2026-01-12
|
|
```
|
|
|
|
2. **Actualizar resumen:**
|
|
```yaml
|
|
resumen:
|
|
screens_implementados: 20
|
|
layouts_implementados: 10
|
|
stores_implementados: 7
|
|
services_implementados: 10
|
|
hooks_implementados: 2 # NUEVO
|
|
componentes_ui: 6 # NUEVO
|
|
componentes_skeletons: 4 # NUEVO
|
|
grupos_navegacion: 8
|
|
```
|
|
|
|
3. **Agregar sección hooks:**
|
|
```yaml
|
|
# ===========================================
|
|
# HOOKS PERSONALIZADOS
|
|
# ===========================================
|
|
hooks:
|
|
- nombre: useAnimations
|
|
archivo: "src/hooks/useAnimations.ts"
|
|
descripcion: "Colección de hooks para animaciones con react-native-reanimated"
|
|
estado: implementado
|
|
exports:
|
|
- useFadeIn
|
|
- useSlideIn
|
|
- useSlideFromRight
|
|
- usePressScale
|
|
- useListItemAnimation
|
|
- useShimmer
|
|
- usePulse
|
|
- useToggleAnimation
|
|
- Animated (re-export)
|
|
|
|
- nombre: useNetworkStatus
|
|
archivo: "src/hooks/useNetworkStatus.ts"
|
|
descripcion: "Hooks para detectar estado de conexión de red"
|
|
estado: implementado
|
|
exports:
|
|
- useNetworkStatus
|
|
- useIsOnline
|
|
- useIsOffline
|
|
```
|
|
|
|
4. **Agregar sección componentes UI:**
|
|
```yaml
|
|
# ===========================================
|
|
# COMPONENTES UI
|
|
# ===========================================
|
|
componentes_ui:
|
|
- nombre: Skeleton
|
|
archivo: "src/components/ui/Skeleton.tsx"
|
|
descripcion: "Componentes skeleton base con animación shimmer"
|
|
estado: implementado
|
|
exports:
|
|
- Skeleton
|
|
- SkeletonText
|
|
- SkeletonCircle
|
|
- SkeletonImage
|
|
- SkeletonCard
|
|
- SkeletonListItem
|
|
- SkeletonStat
|
|
- SkeletonList
|
|
|
|
- nombre: OfflineBanner
|
|
archivo: "src/components/ui/OfflineBanner.tsx"
|
|
descripcion: "Banner animado para indicar modo offline"
|
|
estado: implementado
|
|
exports:
|
|
- OfflineBanner
|
|
- WithOfflineBanner
|
|
|
|
- nombre: AnimatedList
|
|
archivo: "src/components/ui/AnimatedList.tsx"
|
|
descripcion: "FlatList con animaciones de entrada staggered"
|
|
estado: implementado
|
|
exports:
|
|
- AnimatedList
|
|
- useListItemEntering
|
|
- AnimatedListItem
|
|
```
|
|
|
|
5. **Agregar sección skeletons:**
|
|
```yaml
|
|
# ===========================================
|
|
# COMPONENTES SKELETON
|
|
# ===========================================
|
|
componentes_skeletons:
|
|
- nombre: InventoryItemSkeleton
|
|
archivo: "src/components/skeletons/InventoryItemSkeleton.tsx"
|
|
descripcion: "Skeletons para lista de inventario"
|
|
estado: implementado
|
|
exports:
|
|
- InventoryItemSkeleton
|
|
- InventoryListSkeleton
|
|
- InventoryStatsSkeleton
|
|
|
|
- nombre: StoreCardSkeleton
|
|
archivo: "src/components/skeletons/StoreCardSkeleton.tsx"
|
|
descripcion: "Skeletons para tarjetas de tienda"
|
|
estado: implementado
|
|
exports:
|
|
- StoreCardSkeleton
|
|
- StoreListSkeleton
|
|
|
|
- nombre: CreditCardSkeleton
|
|
archivo: "src/components/skeletons/CreditCardSkeleton.tsx"
|
|
descripcion: "Skeletons para sección de créditos"
|
|
estado: implementado
|
|
exports:
|
|
- CreditBalanceSkeleton
|
|
- TransactionSkeleton
|
|
- TransactionListSkeleton
|
|
- CreditPackageSkeleton
|
|
- CreditPackageListSkeleton
|
|
|
|
- nombre: NotificationSkeleton
|
|
archivo: "src/components/skeletons/NotificationSkeleton.tsx"
|
|
descripcion: "Skeletons para lista de notificaciones"
|
|
estado: implementado
|
|
exports:
|
|
- NotificationItemSkeleton
|
|
- NotificationListSkeleton
|
|
- NotificationHeaderSkeleton
|
|
```
|
|
|
|
6. **Agregar sección theme:**
|
|
```yaml
|
|
# ===========================================
|
|
# SISTEMA DE TEMAS
|
|
# ===========================================
|
|
theme:
|
|
- nombre: ThemeContext
|
|
archivo: "src/theme/ThemeContext.tsx"
|
|
descripcion: "Sistema de temas con soporte light/dark mode"
|
|
estado: implementado
|
|
exports:
|
|
- ThemeColors (interface)
|
|
- Theme (interface)
|
|
- ThemeProvider
|
|
- useTheme
|
|
- useColors
|
|
```
|
|
|
|
7. **Actualizar stores con nueva información:**
|
|
```yaml
|
|
stores:
|
|
# ... stores existentes con actualización:
|
|
- nombre: useStoresStore
|
|
archivo: "stores/stores.store.ts"
|
|
descripcion: "Tiendas del usuario"
|
|
estado: implementado
|
|
persistencia: "miinventario-stores" # NUEVO
|
|
acciones: [...]
|
|
|
|
# Repetir para inventory, credits, notifications
|
|
```
|
|
|
|
8. **Actualizar dependencias:**
|
|
```yaml
|
|
dependencias:
|
|
# ... existentes + nuevas:
|
|
animaciones:
|
|
- react-native-reanimated # ya existía pero ahora usado
|
|
offline:
|
|
- "@react-native-async-storage/async-storage"
|
|
- "@react-native-community/netinfo"
|
|
```
|
|
|
|
9. **Agregar entrada al changelog:**
|
|
```yaml
|
|
changelog:
|
|
- version: "3.0.0"
|
|
fecha: 2026-01-12
|
|
cambios:
|
|
- "Agregados 2 hooks personalizados (useAnimations, useNetworkStatus)"
|
|
- "Agregado sistema de temas (ThemeContext)"
|
|
- "Agregados 6 componentes UI (Skeleton, OfflineBanner, AnimatedList, etc)"
|
|
- "Agregados 4 componentes skeleton específicos"
|
|
- "Actualizada persistencia en 4 stores con AsyncStorage"
|
|
- "Agregadas animaciones a Home e Inventory screens"
|
|
- "Agregado banner offline en layout raíz"
|
|
```
|
|
|
|
---
|
|
|
|
#### 3.2.3 PROJECT-STATUS.md
|
|
|
|
**Cambios Requeridos:**
|
|
|
|
1. Actualizar sección Mobile:
|
|
```markdown
|
|
### Mobile
|
|
| Aspecto | Valor |
|
|
|---------|-------|
|
|
| Screens | 20 |
|
|
| Hooks | 2 |
|
|
| Componentes UI | 6 |
|
|
| Skeletons | 4 |
|
|
| UX Animations | Implementado |
|
|
| Offline Mode | Implementado |
|
|
```
|
|
|
|
---
|
|
|
|
#### 3.2.4 PROXIMA-ACCION.md
|
|
|
|
**Cambios Requeridos:**
|
|
|
|
1. Marcar opción completada:
|
|
```markdown
|
|
### Opcion B: Mejoras de UX Mobile - COMPLETADO
|
|
- [x] Animaciones y transiciones
|
|
- [x] Modo offline
|
|
- [x] Persistencia local
|
|
```
|
|
|
|
---
|
|
|
|
### 3.3 Checklist de Validación
|
|
|
|
#### Pre-Ejecución:
|
|
- [ ] Verificar que todos los archivos de origen existen
|
|
- [ ] Verificar formato YAML válido para inventarios
|
|
- [ ] Verificar formato Markdown válido para trazas
|
|
|
|
#### Post-Ejecución:
|
|
- [ ] TRAZA-TAREAS-MOBILE.md tiene 14 tareas
|
|
- [ ] FRONTEND_INVENTORY.yml versión 3.0.0
|
|
- [ ] PROJECT-STATUS.md actualizado
|
|
- [ ] PROXIMA-ACCION.md actualizado
|
|
- [ ] TypeScript build sigue pasando
|
|
|
|
---
|
|
|
|
### 3.4 Orden de Ejecución
|
|
|
|
1. **FRONTEND_INVENTORY.yml** - Fuente canónica de estado
|
|
2. **TRAZA-TAREAS-MOBILE.md** - Historial de cambios
|
|
3. **PROJECT-STATUS.md** - Estado general
|
|
4. **PROXIMA-ACCION.md** - Siguiente paso
|
|
|
|
---
|
|
|
|
### 3.5 Resumen del Plan
|
|
|
|
| Fase | Documento | Acción | Líneas |
|
|
|------|-----------|--------|--------|
|
|
| 7.1 | FRONTEND_INVENTORY.yml | Actualizar | +150 |
|
|
| 7.2 | TRAZA-TAREAS-MOBILE.md | Agregar tarea | +60 |
|
|
| 7.3 | PROJECT-STATUS.md | Actualizar métricas | +10 |
|
|
| 7.4 | PROXIMA-ACCION.md | Marcar completado | +5 |
|
|
|
|
**Total estimado:** ~225 líneas de documentación
|
|
|
|
---
|
|
|
|
**Última Actualización:** 2026-01-12
|
|
**Responsable:** Claude Opus 4.5
|