Introducción

El paquete @lynx/ui contiene la biblioteca compartida de componentes de interfaz de usuario (UI) y las definiciones de temas visuales para Lynx. Proporciona un sistema de diseño robusto, accesible y consistente que se utiliza en todas las aplicaciones frontend (como apps/next y apps/astro) dentro del monorepo.

El objetivo de este paquete es centralizar la lógica visual, el estilo (CSS/SCSS) y los elementos de interfaz reutilizables para garantizar una experiencia de usuario unificada y acelerar el desarrollo del frontend.

[!TIP] Principios Agnósticos del Framework y Bulma Aunque esta biblioteca exporta componentes de React de forma predeterminada, los estilos visuales, las variables de CSS y los tokens principales están diseñados sobre Bulma con el prefijo --lynx-* para poder ser consumidos por cualquier renderizador web, asegurando un aspecto coherente en todas partes.

Tecnologías de Interfaz

Para trabajar eficazmente con este paquete, familiarízate con las tecnologías núcleo en las que se basa:

• React: La biblioteca principal utilizada para construir componentes interactivos.
• Bulma: La tecnología de estilos subyacente para construir los tokens de diseño.
• Storybook: La herramienta utilizada para el desarrollo de componentes, pruebas y documentación de la UI de forma aislada.
• Lucide Icons: El conjunto de iconos utilizado como bloques de construcción visuales.

Relación con el Ecosistema

Este paquete interactúa directamente con otras aplicaciones y configuraciones del monorepo:

• @lynx/core: Utilizado para tipos compartidos o configuraciones base.
• Aplicaciones (apps/next, apps/astro): Consumen componentes de @lynx/ui en lugar de etiquetas HTML puras para mantener la consistencia estética y funcional.
• Storybook: Visualiza y documenta de forma interactiva cada variante de componente en aislamiento.