Arquitectura Lógica

El paquete @lynx/ui expone componentes, ganchos (hooks), utilidades y activos visuales de forma modular para garantizar la reutilización y el aislamiento de responsabilidades.

Arquitectura de Flujo de UI

El siguiente esquema ilustra cómo se estructuran y consumen las diferentes partes de @lynx/ui:

graph TD
    A[@lynx/ui] --> B(Componentes React)
    A --> C(Hooks y Utilidades)
    A --> D(Tema Visual / CSS)
    B --> E[Documentación de Storybook]
    D --> F[Consumido por Astro/Next.js]
    B --> F

Estructura de Directorios

La organización interna separa la lógica, la vista y la documentación de los componentes:

• src/: Directorio principal de código fuente.
  • components/: La biblioteca de componentes React reutilizables (dividida en componentes estándar de React en react/ y específicos de Next.js en next/).
  • hooks/: Hooks personalizados compartidos.
  • visual/: Estilos CSS, SCSS, variables de tema y configuraciones de diseño base.
  • utils/: Funciones auxiliares compartidas.
• dist/: Salida compilada lista para producción lista para ser importada por otras aplicaciones.

Directrices de Estilado y Bulma

[!IMPORTANT] Prefijo de Variables de Bulma El monorepo de Lynx configura Bulma utilizando el prefijo --lynx- (definido en src/visual/theme.ts). Debes utilizar siempre variables que comiencen con --lynx-* (por ejemplo, --lynx-box-radius, --lynx-radius-large), y evitar en lo absoluto el prefijo genérico de Bulma (--bulma-*).