v0.4.1: Plantillas multipágina para producción, suite e-commerce, app SaaS y tema claro

Creando aplicaciones y tiendas completas en Astro

Ya está disponible astro-component-kit 0.4.1, marcando la evolución de una colección de componentes individuales hacia un sistema integral de plantillas y aplicaciones para Astro.

Hasta ahora contabas con botones, tarjetas, formularios, gráficos y secciones. Con la versión 0.4.1 añadimos plantillas multipágina completas listas para producción con estado compartido, compatibilidad con enrutamiento de cliente, filtrado en tiempo real, carrito de compra persistente y flujos reales de negocio: todo con cero dependencias en tiempo de ejecución, soporte para tema claro/oscuro y plena accesibilidad WCAG AA.

---

3 Plantillas completas de producción

Cada plantilla está disponible en el nuevo Catálogo de Plantillas con previsualizaciones interactivas en vivo en español, inglés y ruso:

🛒 Tienda E-Commerce (Nova Store)

Una tienda online completa de cinco páginas:

• Páginas incluidas: Inicio, Catálogo, Ficha de Producto (PDP), Carrito y Checkout.
• Carrito persistente: Carrito reactivo (cart-store.ts) que persiste entre recargas y se sincroniza entre pestañas del navegador sin frameworks externos.
• Filtrado instantáneo: Motor de filtrado en cliente por categoría, rango de precio, color, valoración y disponibilidad de stock.
• Checkout completo: Cálculo multietapa de envío, desglose de impuestos, motor de cupones y confirmación del pedido.
• Ilustraciones incluidas: 16 ilustraciones de producto vectoriales SVG hechas a mano: no requieres fotos de stock externas.

🏺 E-Commerce Editorial (Forma Studio)

Una boutique de moda y diseño con estética editorial:

• Línea de diseño: Tipografía display con serifa, geometría limpia, tonos terracota cálidos y maquetación tipo revista.
• Páginas y secciones: Hero editorial, mosaico de colecciones, lookbook, carruseles de producto, marquesina de valores, reseñas y páginas completas de bolsa y checkout.
• Tema claro por defecto: Diseñada con una paleta luminosa y cálida con selector a modo oscuro.

🏨 App SaaS para Hostelería (The Lobby)

Un panel de control completo para hoteles y alojamientos:

• Vistas incluidas: Panel principal con KPIs, planificador de habitaciones (Room Rack), panel de llegadas y salidas en tiempo real, estado de limpieza (Housekeeping), directorio de huéspedes con perfil detallado, informes de ocupación e ingresos, ajustes y pantalla de inicio de sesión (Auth).
• Interfaz interactiva: Filtros de estado, calendarios interactivos, insignias de disponibilidad y tablas de datos ampliables.

---

2 Nuevas categorías de componentes

Hemos empaquetado los bloques fundamentales que dan vida a estas plantillas en dos nuevas rutas de exportación en npm:

🛍️ astro-component-kit/ecommerce

Más de 17 componentes dedicados para comercio electrónico:

• StoreHeader y PromoBar
• CartDrawer y CartToast
• ProductBuyBox y VariantPicker
• ProductGrid y ProductCardMinimal
• FilterSidebar y FilterBar
• OrderSummary y CheckoutForm
• StockIndicator, CountdownBanner y LiveActivityToast

---
import 'astro-component-kit/global.css';
import { ProductBuyBox, VariantPicker, CartDrawer } from 'astro-component-kit/ecommerce';
---

<ProductBuyBox
  title="Jarrón Cerámico Minimalista"
  price={64}
  rating={4.9}
  reviewsCount={128}
  inStock={true}
>
  <VariantPicker slot="variants" options={['Piedra', 'Terracota', 'Obsidiana']} />
</ProductBuyBox>

<CartDrawer />

📊 astro-component-kit/app

Componentes de alta densidad para paneles y aplicaciones web:

• DataTable — Tabla de datos ordenable y filtrable con paginación y selección de filas.
• AppSidebar y AppTopbar — Estructuras de navegación colapsables con estados activos y acciones rápidas.
• RoomRack — Cuadrícula de ocupación con línea temporal para reservas y alojamientos.
• ArrivalsBoard y HousekeepingBoard — Paneles operativos estilo kanban con acciones rápidas de cambio de estado.
• GuestProfileCard y PlanUsageCard — Tarjetas métricas de perfil e indicadores de límites de plan.
• AuthCard — Contenedor pulido para formularios de inicio de sesión y registro.

---

🌓 Soporte total para Modo Claro (Light Theme)

astro-component-kit incorpora compatibilidad oficial con tema claro en todos los componentes, gráficos y secciones de la librería.

• Tokens CSS --ink-rgb, --paper-rgb y --c-on-primary añadidos en global.css.
• Alternancia instantánea aplicando [data-theme="light"] en la raíz del documento.
• Los 41 gráficos SVG y las secciones ajustan automáticamente su contraste, bordes de cuadrícula y tooltips al tema activo.

---

🔍 Mejoras en la barra lateral y documentación

• Búsqueda instantánea: Pulsa / en cualquier página de la documentación para enfocar de inmediato la barra de búsqueda con filtrado en tiempo real.
• Secciones colapsables: Navegación más limpia y organizada gracias a grupos plegables de componentes y secciones.
• Acceso a plantillas: Enlace directo para explorar las plantillas en vivo y su código fuente.

---

Cómo actualizar a v0.4.1

npm install astro-component-kit@0.4.1

¡Descubre todas las demostraciones interactivas en la nueva galería de Plantillas!