@alebat-education/ecom-components

Esta es la librería de componentes propia de Alebat Education. Proporciona todos los componentes visuales principales del proyecto — navbar, cards, sliders, modales, filtros, footer, video player, y más. Es un módulo de Nuxt 4 que se auto-registra.

Instalación

Requisitos previos

Necesitas acceso al repositorio privado Alebat-Education/ecom-components en GitHub. Configura una SSH key vinculada a tu cuenta de GitHub con acceso a la organización, o un Personal Access Token (PAT) con permisos de lectura.

En package.json

{
  "dependencies": {
    "@alebat-education/ecom-components": "github:Alebat-Education/ecom-components"
  }
}

Se instala directamente desde GitHub (no está publicado en npm):

pnpm install

Si falla con “Permission denied” o “Repository not found”, tu SSH key o PAT no tiene acceso.

Registro en nuxt.config.ts

modules: [
  ['@alebat-education/ecom-components', { prefix: 'AE', includeTailwind: true }],
]

Integración con Tailwind (tailwind.config.ts)

Debes incluir los archivos de la librería para que Tailwind detecte las clases usadas dentro de sus componentes:

content: [
  './node_modules/@alebat-education/ecom-components/app/**/*.{js,vue,ts}',
  // ... otros paths del proyecto
]

Sin esto, los estilos internos de los componentes AE no se incluirán en el CSS final.

Cómo actualizar

pnpm update @alebat-education/ecom-components --latest

Esto descarga el último commit del branch principal del repo GitHub. Después de actualizar:

Verifica que la app compila (pnpm dev)
Revisa visualmente las páginas principales (home, listados, detalle)
Si hay breaking changes, el error aparecerá como props faltantes o componentes no encontrados

Cómo funciona internamente

Al registrarse como módulo de Nuxt, la librería ejecuta automáticamente:

Acción	Detalle
Auto-registra componentes	Todos los `.vue` del paquete se registran globalmente con prefijo `AE`
Inyecta CSS	Si `includeTailwind: true` → inyecta `tailwind.css` (utilities) + `variables.css` (design tokens: 15 colores RGB, 9 variantes de fuente Neulis)
Auto-importa composables	`useCardBehavior`, `useCustomSwiper`, `usePdfEngine`, `useTimerCountdown`
Registra directivas	`v-outside-click`, `v-shield` (via plugin client-side)

No necesitas importar nada manualmente.

Cómo usar un componente

Simplemente escríbelo en el template con el prefijo AE:

<template>
  <AEMainCard
    :title="course.title"
    :image="course.thumbnail"
    :tag="course.category"
    @click="navigateToCourse"
  />
</template>

No hay imports. Nuxt los resuelve automáticamente. Para conocer las props disponibles de cada componente, inspecciona el archivo fuente en node_modules/@alebat-education/ecom-components/app/components/.

Opciones de configuración

Opción	Default	Descripción
`prefix`	`'AE'`	Prefijo de los componentes en templates
`includeTailwind`	`true`	Inyecta CSS del design system (colores, fuentes Neulis)

Catálogo de componentes

Navegación y Layout global

Componente	Descripción
`AENavbar`	Barra de navegación principal (desktop). Incluye logo, links, buscador, idioma, cuenta
`AEMobileNavbar`	Navegación móvil con menú hamburguesa y drawer
`AEFooter`	Footer global con links, logo, redes sociales
`AESeparator`	Línea divisoria visual entre secciones
`AEScrollToTopArrow`	Botón flotante que aparece al hacer scroll para volver arriba
`AEWhatsappButton`	Botón flotante de contacto por WhatsApp

Cards y Grids (sistema de tarjetas)

Componente	Descripción
`AEMainCard`	Card principal de producto/contenido — thumbnail, título, tag, CTA
`AEMainCardMobile`	Variante compacta de card para móvil (horizontal)
`AEMainCardGrid`	Grid responsive que distribuye `AEMainCard` en columnas según breakpoint
`AEMainCardSlider`	Carrusel horizontal de cards con navegación por flechas
`AEViewCard`	Card de vista previa — más visual, menos texto, para destacados
`AEChannelLogoCard`	Card con logo de canal/marca partner

Sliders y Carruseles

Componente	Descripción
`AEHomeGradientSlider`	Slider hero de la home con fondo gradiente de marca
`AEChannelsGradientSlider`	Slider de canales con gradiente personalizable
`AEChannelLogosSlider`	Slider horizontal de logos de canales partner
`AEBasicPagesSlider`	Slider genérico para secciones de contenido
`AEProtagonistSlider`	Slider de tarjetas de expertos/instructores

Producto y Detalle

Componente	Descripción
`AEActionAside`	Panel lateral con botones de acción (comprar, suscribirse)
`AEInformationAside`	Panel lateral informativo (descripción, specs)
`AEProductTabs`	Tabs de información del producto (descripción, contenido, instructor)
`AEProtagonistCard`	Card de perfil de instructor con foto, nombre, bio
`AEProtagonistGrid`	Grid de cards de expertos

Filtros y Búsqueda

Componente	Descripción
`AEContentFilters`	Barra de filtros con categorías, especialidades, ordenamiento
`AESearchBar`	Input de búsqueda con icono y debounce integrado

Media y Reproducción

Componente	Descripción
`AEVimeoPlayer`	Reproductor de video que soporta Vimeo embeds y HLS streaming
`AEPdfReader`	Lector de PDF embebido con controles de página y zoom

Feedback y Modales

Componente	Descripción
`AETheModal`	Modal genérico — recibe contenido via slot, maneja overlay y cierre
`AETheAlert`	Toast de notificación — success/error, auto-cierre, posición fija
`AESkeletonLoader`	Placeholder animado de carga (shimmer effect)
`AECountdownLive`	Cuenta regresiva para eventos en vivo con formato dd:hh:mm:ss
`AEFaq`	Acordeón de preguntas frecuentes con animación de apertura

Suscripción y Conversión

Componente	Descripción
`AESubscriptionPopupContent`	Popup de upsell de suscripción (aparece tras login si aplica)
`AEChoosePlanImages`	Selector visual de planes de suscripción con imágenes
`AEMainButton`	Botón CTA principal con variantes (primary, secondary, outline)

Composables que trae la librería

Se auto-importan y puedes usarlos directamente:

Composable	Propósito
`useCardBehavior()`	Maneja estados de interacción de cards (hover, pressed, focus)
`useCustomSwiper()`	Retorna configuración pre-armada para sliders AE compatibles con Swiper
`usePdfEngine()`	Inicializa y controla renderizado de PDFs con pdfjs-dist
`useTimerCountdown()`	Cuenta regresiva reactiva con limpieza automática del interval

Directivas

Directiva	Uso	Ejemplo
`v-outside-click`	Ejecuta callback al hacer click fuera del elemento	Cerrar dropdown/popover
`v-shield`	Protege contenido (previene copiar, click derecho, inspeccionar)	Contenido de suscripción

Tipos exportados

Puedes importar tipos de la librería para tipar datos:

import type { CarouselType } from '@alebat-education/ecom-components'

Troubleshooting

Problema	Solución
”Component AEXxx not found”	`pnpm install`, verifica que está en `modules` de nuxt.config
Estilos rotos / colores mal	Verifica `includeTailwind: true` y que el path está en `tailwind.config.ts` content
Error al instalar	Verifica SSH key o PAT con acceso a la org Alebat-Education
Componente se ve pero sin estilos	Las CSS variables de la vertical deben estar inyectadas (plugin initApp lo hace)

Componentes excluidos del auto-registro: PdfReader y PdfPageController no se auto-registran por su peso. Impórtalos explícitamente si los necesitas.