📌 CONTEXTO

Este repositorio pertenece al ecosistema AthleFi, una plataforma compuesta por múltiples aplicaciones y microservicios. Estas apps comparten estilos, colores y patrones de diseño, pero viven en repositorios independientes.

Para evitar duplicación, inconsistencias visuales y deuda técnica, se creó este proyecto:

➡️ Una librería UI centralizada para el ecosistema AthleFi. ➡️ Basada en Componentes Astro + TypeScript. ➡️ Consumida por todos los microfrontends Astro del ecosistema.

🎯 OBJETIVO DEL REPOSITORIO

Ser la fuente única de verdad visual del ecosistema AthleFi.

Unificar colores, tipografías, tamaños, layouts y componentes.

Mantener consistencia visual en todos los microfrontends Astro.

Servir como base para microfrontends modulares.

Permitir actualizaciones controladas mediante versionado semántico.

📦 TECNOLOGÍAS CLAVE

Astro Components (.astro)

TypeScript

Scoped Styles para aislamiento

Design Tokens (colors.css, typography.css)

Bundling con Vite (integrado en Astro)

🗂️ ESTRUCTURA DEL PROYECTO athlefi-ui/ └── src/ ├── tokens/ # Design Tokens globales │ ├── colors.css │ └── typography.css │ ├── components/ # Componentes Astro reutilizables │ ├── atoms/ # Átomos (Button, Input, etc.) │ ├── molecules/ # Moléculas (SearchBar, Card, etc.) │ ├── organisms/ # Organismos (Header, Footer, etc.) │ └── templates/ # Templates (Layouts) │ └── index.ts # Entry point que exporta componentes

package.json tsconfig.json

🚀 USO EN MICROFRONTENDS ASTRO

Instalar:

npm install athlefi-ui

Importar tokens en tu layout principal (una sola vez):

// src/layouts/Layout.astro import "athlefi-ui/tokens/colors.css"; import "athlefi-ui/tokens/typography.css";

Usar componentes:

import { Button } from "athlefi-ui";

Invertir ahora

🧩 FILOSOFÍA DE DISEÑO

Componentes Astro nativos para todos los microfrontends.

Atomic Design: tokens → átomos → moléculas → organismos → templates.

UI sin lógica de negocio.

Scoped Styles para evitar conflictos.

Tokens globales como fuente de verdad visual.

TypeScript para type-safety en props.

📘 GLOSARIO (para IA y desarrolladores) Término Definición AthleFi Plataforma de inversión y análisis para atletas. UI Library Conjunto de componentes Astro reutilizables. Componente Astro Archivo .astro con markup, scripts y estilos. Design Token Variable de diseño (color, espaciado, fuente). Microfrontend App Astro independiente que consume esta librería. Atomic Design Metodología de diseño (átomos → moléculas → organismos). 🛠️ DESARROLLO

Verificar tipos:

npm run typecheck

Modo desarrollo (watch):

npm run dev

Nota: Esta librería se publica como código fuente (.astro), no requiere build.

👥 CONTRIBUIR

Crear rama feature

Añadir nuevo token o componente en la carpeta correspondiente (atoms/, molecules/, etc.)

Exportarlo en src/index.ts

Verificar tipos con npm run typecheck

Abrir Pull Request

Mantener consistencia con Atomic Design

Nunca incluir lógica de negocio

📦 PUBLICAR

Hacer commit de los cambios

Actualizar versión: npm version patch | minor | major

Publicar: npm publish

Push al repositorio: git push && git push --tags