Kitina UI Lab - Laboratorio de Componentes

Este repositorio sirve como entorno de desarrollo y laboratorio para el ecosistema @kitina/ui. Aquí se diseñan, prueban y estabilizan los componentes antes de ser integrados en el núcleo del sistema.

🏗 Arquitectura: Lab to Core

El flujo de trabajo está diseñado para permitir una iteración rápida sin afectar la estabilidad del núcleo:

1. Desarrollo Local: Los componentes se crean en src/components/ dentro de este laboratorio.
2. Exportación: Todos los componentes estables se registran en src/index.ts.
3. Sincronización: Mediante el comando deno task deploy, los archivos se sincronizan con la librería core @kitina/ui en el monorepo superior, filtrando archivos de configuración local y páginas de prueba.

⚙️ Configuración Centralizada (YAML)

La implementación se basa en un modelo Data-Driven. Los componentes están desacoplados de los datos específicos de cada cliente, abstrayendo la lógica visual de la información de negocio.

Flujo de Implementación en el Cliente

Cuando se usa @kitina/ui en un proyecto nuevo, el cliente debe:

1. Instalar la librería @kitina/ui.
2. Crear su propio src/config.yml: Este archivo es el cerebro del sitio y debe ser personalizado según la marca.
3. Consumir los componentes: Los componentes importados de @kitina/ui leerán automáticamente esta configuración.

📋 Plantilla de Configuración (src/config.yml)

A continuación, se presenta la estructura mínima requerida para que los componentes funcionen correctamente:

# Información Básica
metadata:
  title: "Nombre del Sitio"
  description: "Descripción SEO"
  locationText: "Ciudad, País"
  url: "https://ejemplo.com"

# Identidad Visual
branding:
  logo: "logo.png"       # Debe existir en src/assets/images/
  devLogo: "dev-logo.svg" 

# Sistema de Temas
palettes:
  ocean:
    primary: "#0C4A6E"
    accent: "#06B6D4"
    fog: "#F0F9FF"
activePalette: "ocean"

# Contacto
contact:
  captainName: "Nombre de Contacto"
  phone: "569XXXXXXXX"
  instagramLink: "https://instagram.com/..."
  googleMapsLink: "https://maps.google.com/..."

# Funcionalidades
features:
  weather:
    enabled: true
    lat: -39.871
    lng: -71.889
    windyLink: "..."

# Contenido de Secciones
content:
  services:
    - id: "servicio-1"
      title: "Título"
      shortDescription: "Resumen"
      images: ["foto1.jpg"] # En src/assets/images/
      buttonText: "Reservar Ahora"
      whatsappIntro: "Hola, me interesa..."

🚀 Comandos del Laboratorio

• deno task dev: Inicia el servidor de desarrollo Astro en el laboratorio.
• deno task build: Genera la versión estática para pruebas de producción.
• deno task deploy: [CRÍTICO] Sincroniza los cambios estabilizados del laboratorio hacia el Core del ecosistema.

📂 Organización de Archivos

• src/components/: Código fuente de los componentes Astro.
• src/site.config.ts: Lógica de resolución de imágenes y procesamiento del YAML.
• src/index.ts: Punto de entrada de los exports para la librería.
• scripts/deploy-to-core.ts: Script de automatización de despliegue al Core.

Desarrollado para el ecosistema Kitina por LW.