Saltar al contenido principal

​
Configuración de Microfrontend (apps/)

Cada aplicación dentro del directorio /apps/ representa un contexto de negocio distinto o microfrontend, siguiendo una Arquitectura de Microfrontends.
Beneficios de Este Enfoque de Microfrontend:
  • Ciclos de desarrollo y pruebas independientes por aplicación.
  • Permite cronogramas de despliegue separados si es necesario.
  • Promueve la autonomía del equipo enfocada en dominios de negocio específicos.
  • Impone límites claros mientras maximiza la reutilización de la lógica central desde packages/core.
  • apps/radicacion: Maneja el proceso de radicación de documentos.
  • apps/asignacion: Gestiona el enrutamiento y asignaciones de casos.
Todas las apps deben importar y reutilizar lógica de packages/* donde sea aplicable (actions, hooks, config). Todos los elementos UI deben construirse utilizando componentes de la librería mappnext/ds-tw para asegurar la consistencia visual.

​
Disposición de Carpetas Frontend (Estructura Recomendada)

Dentro de cada aplicación Next.js (apps/*), las rutas que utilizan el App Router pueden beneficiarse de la siguiente estructura, promoviendo el Patrón Container/Presentational Component y la Separación de Responsabilidades. 
app/
└── [routeName]/            # ej., 'crear-expediente'
    ├── components/         # Componentes Presentacionales: Se enfocan en renderizar UI basada en props/context. Componen componentes de mappnext/ds-tw. **NO DEBEN** contener lógica compleja o obtención de datos (data fetching). (Obligatorio para piezas de UI)
    ├── containers/         # **(Opcional - Usar para complejidad/estructura)** Componentes Contenedores: Agrupan componentes relacionados, gestionan estado/lógica local para un bloque de funcionalidad, obtienen datos para el bloque. Mejora la estructura. Pueden ser Server o Client Components.
    ├── providers/          # **(Opcional - Usar para estado compartido)** React Context providers: Gestionan estado compartido entre múltiples componentes usando el **Patrón Provider**.
    └── page.tsx            # **Punto de entrada de la ruta y Orquestador Principal:** Actúa como el contenedor de nivel superior para la ruta. Maneja el layout, la obtención inicial de datos. Compone components/containers/providers.
Adapta la Estructura a la Complejidad:
  • Páginas Simples: page.tsx actúa como el contenedor principal, renderizando directamente componentes presentacionales (components/).
  • Páginas/Funcionalidades Complejas:
    • Usa containers/ para encapsular lógica y composición específica de la funcionalidad, aplicando el Patrón Container Component.
    • Usa providers/ para la gestión de estado compartido a través de un árbol de componentes (el Patrón Provider de React).
  • Siempre: Mantén components/ puramente presentacionales y usa mappnext/ds-tw para los elementos UI.

​
Librería de Componentes UI (mappnext/ds-tw)

  • Uso Obligatorio: Todos los elementos de la interfaz de usuario (botones, inputs, modales, estructuras de layout, etc.) deben ser importados y utilizados desde la librería externa mappnext/ds-tw.
  • Consistencia: Esto asegura la consistencia visual y de comportamiento en todos los microfrontends.
  • Evitar Estilos Personalizados: No escribas CSS personalizado o clases de Tailwind para elementos que tengan un componente correspondiente en la librería del sistema de diseño, a menos que sea absolutamente necesario para el posicionamiento en el layout no cubierto por los componentes/props de la librería.
  • Ruta de Importación: import { Button } from 'mappnext/ds-tw/atoms/Button'; (Ajusta la ruta según la estructura real de la librería).

​
Hooks Compartidos (packages/hooks)

  • El directorio packages/hooks contiene hooks de React reutilizables.
  • Usa estos hooks para intereses transversales (cross-cutting concerns) (ej., manejo de formularios, gestión del estado de llamadas API, debouncing) que puedan ser compartidos entre diferentes aplicaciones frontend (apps/*).
  • Antes de crear un nuevo hook dentro de una aplicación, verifica si ya existe uno adecuado en @hooks.
  • Importa usando el alias: import { useFormValidation } from '@hooks/forms';