> ## Documentation Index
> Fetch the complete documentation index at: https://blog.mapptech.com.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Desarrollo Frontend

> Directrices para construir aplicaciones frontend (microfrontends) dentro del directorio apps/, incluyendo estructura de carpetas, uso de componentes y hooks compartidos.

## 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**.

<Info>
  **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`.
</Info>

* `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**.

```text /apps/[appName]/app/[routeName]/ theme={null}
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.
```

<Tip>
  **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.
</Tip>

***

## 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';`