libreria-astro-lefebvre 0.0.57 → 0.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",
@@ -27,8 +27,7 @@
     "design-system"
   ],
   "peerDependencies": {
-    "astro": "^5.11.0",
-    "limbo-component": "latest"
+    "astro": "^5.11.0"
   },
   "scripts": {
     "generate:registry": "node scripts/generateRegistry.js"

package/src/limbo/LimboProvider.astro

@@ -1,87 +0,0 @@
----
-/**
- * LimboProvider.astro
- *
- * Componente Astro que provee la integración con Limbo.
- * Incluye los assets necesarios (CSS/JS) y la inicialización automática.
- *
- * Uso:
- * ```astro
- * ---
- * import LimboProvider from 'libreria-astro-lefebvre/limbo/LimboProvider.astro';
- * ---
- * <LimboProvider
- *   publicKey="pk_xxx"
- *   apiKey="sk_xxx"
- *   prod={false}
- *   sizeModal="fullscreen"
- * />
- * ```
- */
-
-import { generateLimboInitScript, getLimboAssetUrls } from './init';
-
-interface Props {
-  /** Public Key del portal de Limbo */
-  publicKey: string;
-  /** Usar API de producción */
-  prod?: boolean;
-  /** Selector CSS para detectar inputs (default: '.js-limbo') */
-  selector?: string;
-  /** Tipo de retorno por defecto */
-  defaultReturnType?: 'url' | 'assetId' | 'object' | 'json' | 'base64';
-  /** Modo UI por defecto */
-  defaultModeUI?: 'full' | 'gallery-only' | 'upload-only' | 'crop-only';
-  /** Tamaño del modal (default: 'xlarge') */
-  sizeModal?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
-  /** Texto del botón por defecto */
-  defaultButtonText?: string;
-  /** Permitir crops adicionales además de los obligatorios */
-  allowAdditionalCrops?: boolean;
-  /** Máximo número de crops permitidos */
-  maxCrops?: number;
-  /** Versión de limbo-component a usar (default: 'latest') */
-  version?: string;
-  /** Usar assets locales en vez de CDN (para desarrollo con npm link) */
-  useLocalAssets?: boolean;
-}
-
-const {
-  publicKey,
-  prod = false,
-  selector = '.js-limbo',
-  defaultReturnType = 'json',
-  defaultModeUI = 'full',
-  sizeModal = 'xlarge',
-  defaultButtonText = 'Seleccionar imagen',
-  allowAdditionalCrops = true,
-  maxCrops = 10,
-  version = 'latest',
-  useLocalAssets = !prod
-} = Astro.props;
-
-// Obtener URLs de assets
-const assets = getLimboAssetUrls({ prod: !useLocalAssets, version });
-
-// Generar script de inicialización
-const initScript = generateLimboInitScript({
-  publicKey,
-  prod,
-  selector,
-  defaultReturnType,
-  defaultModeUI,
-  sizeModal,
-  defaultButtonText,
-  allowAdditionalCrops,
-  maxCrops
-});
----
-
-<!-- Limbo CSS -->
-<link rel="stylesheet" href={assets.css} />
-
-<!-- Limbo JS -->
-<script is:inline src={assets.js}></script>
-
-<!-- Limbo Initialization -->
-<script is:inline set:html={initScript}></script>

package/src/limbo/index.ts

@@ -1,24 +0,0 @@
-/**
- * Limbo Integration Module
- *
- * Exportaciones para integrar limbo-component con la librería de page-builder.
- */
-
-// Exportar funciones de inicialización
-export {
-  generateLimboInitScript,
-  getLimboAssetUrls,
-  type LimboConfig,
-  type LimboInitOptions
-} from './init';
-
-// Exportar handler para API endpoint de token
-export {
-  createLimboTokenHandler,
-  type LimboTokenConfig,
-  type LimboTokenResponse,
-  LIMBO_ENV_VARS
-} from './tokenHandler';
-
-// El componente Astro se importa directamente:
-// import LimboProvider from 'libreria-astro-lefebvre/limbo/LimboProvider.astro';

package/src/limbo/init.ts

@@ -1,288 +0,0 @@
-/**
- * Limbo Integration Module for libreria-astro-lefebvre
- *
- * v2.0 - Actualizado para limbo-component v2.0
- *
- * Este módulo gestiona la inicialización y configuración de limbo-component
- * para ser usado en cualquier portal que consuma esta librería.
- *
- * Soporta configuración via data attributes en inputs HTML:
- * - data-mandatorycrops: JSON array de crops obligatorios
- * - data-modeui: full | gallery-only | upload-only | crop-only
- * - data-returntype: url | assetId | object | json | base64
- * - data-allowadditionalcrops: true | false
- * - data-maxcrops: number
- * - data-buttontext: texto personalizado del botón
- */
-
-export interface MandatoryCrop {
-  label: string;
-  width?: number;
-  height?: number;
-  required?: boolean;
-  preset_aspect?: string;
-}
-
-export interface LimboConfig {
-  publicKey: string;
-  prod?: boolean;
-  selector?: string;
-  defaultReturnType?: "url" | "assetId" | "object" | "json" | "base64";
-  defaultModeUI?: "full" | "gallery-only" | "upload-only" | "crop-only";
-  sizeModal?: "small" | "medium" | "large" | "xlarge" | "fullscreen";
-  defaultButtonText?: string;
-  allowAdditionalCrops?: boolean;
-  maxCrops?: number;
-  onSelect?: (data: any) => void;
-  onError?: (error: Error) => void;
-}
-
-export interface LimboInitOptions extends LimboConfig {
-  autoInit?: boolean;
-}
-
-/**
- * Genera el script de inicialización de Limbo como string
- * para ser inyectado en el HTML
- */
-export function generateLimboInitScript(config: LimboConfig): string {
-  const {
-    publicKey,
-    prod = false,
-    selector = ".js-limbo",
-    defaultReturnType = "json",
-    defaultModeUI = "full",
-    sizeModal = "xlarge",
-    defaultButtonText = "Seleccionar imagen",
-    allowAdditionalCrops = true,
-    maxCrops = 10,
-  } = config;
-
-  // URL del proxy para evitar CORS (usa endpoint local del portal)
-  // El proxy está en /api/limbo-token del portal que consume la librería
-  const tokenProxyUrl = "/api/limbo-token";
-
-  return `
-(function() {
-  // Estado del token
-  var cachedToken = null;
-  var tokenExpiry = null;
-
-  // Función para obtener token JWT (usa proxy local para evitar CORS)
-  async function getToken() {
-    // Si tenemos un token válido en caché, usarlo
-    if (cachedToken && tokenExpiry && Date.now() < tokenExpiry) {
-      return cachedToken;
-    }
-
-    try {
-      // Usamos el proxy local para evitar problemas de CORS
-      // Solo enviamos public_key - NO se requiere api_key
-      var response = await fetch('${tokenProxyUrl}', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          public_key: '${publicKey}'
-        })
-      });
-
-      if (!response.ok) {
-        var errorData = await response.json().catch(function() { return {}; });
-        throw new Error('Error obteniendo token: ' + response.status + ' - ' + (errorData.error || ''));
-      }
-
-      var data = await response.json();
-      cachedToken = data.token;
-      // Guardar expiración con 30 segundos de margen
-      tokenExpiry = Date.now() + ((data.expires_in || 3600) * 1000) - 30000;
-      console.log('[Limbo] Token JWT obtenido correctamente');
-      return cachedToken;
-    } catch (error) {
-      console.error('[Limbo] Error en tokenProvider:', error);
-      throw error;
-    }
-  }
-
-  // Estado de inicialización
-  var initRetrys = 0;
-  var maxRetrys = 20;
-
-  // Función global para re-escanear inputs (útil después de hydration de Vue/React)
-  window.LimboRescan = function(selector) {
-    var targetSelector = selector || '${selector}';
-    var inputs = document.querySelectorAll(targetSelector);
-    var processed = 0;
-    inputs.forEach(function(input) {
-      if (input.tagName === 'INPUT' && !input.dataset.limboProcessed) {
-        try {
-          Limbo.autoInputs._processInput(input);
-          input.dataset.limboProcessed = 'true';
-          processed++;
-        } catch (e) {
-          console.error('[Limbo] Error procesando input:', e);
-        }
-      }
-    });
-    return processed;
-  };
-
-  // Esperamos a que Limbo esté disponible
-  function initLimbo() {
-    if (typeof Limbo === 'undefined') {
-      initRetrys++;
-      if (initRetrys <= maxRetrys) {
-        console.warn('[Limbo] Limbo no está cargado. Reintentando... (' + initRetrys + '/' + maxRetrys + ')');
-        setTimeout(initLimbo, 100);
-      } else {
-        console.error('[Limbo] No se pudo cargar Limbo después de ' + maxRetrys + ' intentos.');
-      }
-      return;
-    }
-
-    console.log('[Limbo] Inicializando integración con Page Builder...');
-
-    // Configurar Limbo globalmente con tokenProvider como función
-    // IMPORTANTE: tokenProvider va en el nivel superior, no dentro de auth
-    Limbo.configure({
-      prod: ${prod},
-      publicKey: '${publicKey}',
-      authMode: 'jwt',
-      tokenProvider: getToken,
-      modal: {
-        size: '${sizeModal}'
-      }
-    });
-
-    // Configurar auto-inputs para detectar elementos con el selector
-    Limbo.configureAutoInputs({
-      selector: '${selector}',
-      buttonText: '${defaultButtonText}',
-      returnType: '${defaultReturnType}',
-      modeUI: '${defaultModeUI}',
-      allowAdditionalCrops: ${allowAdditionalCrops},
-      maxCrops: ${maxCrops},
-      // 🔧 Los recortes se guardan en Limbo para garantizar persistencia
-      // Los recortes del page-builder se pueden identificar por su nombre (contienen dimensiones)
-      localCropsOnly: false,
-
-      // Parsear configuración del input desde datasets
-      // Los valores del dataset tienen prioridad sobre los defaults
-      parseInputConfig: function(input) {
-        var config = {};
-
-        // Parsear mandatoryCrops si existe
-        if (input.dataset.mandatorycrops) {
-          try {
-            config.mandatoryCrops = JSON.parse(input.dataset.mandatorycrops);
-          } catch (e) {
-            console.warn('[Limbo] Error parseando mandatoryCrops:', e);
-          }
-        }
-
-        // Parsear returnType específico del input
-        if (input.dataset.returntype) {
-          config.returnType = input.dataset.returntype;
-        }
-
-        // Parsear modo UI
-        if (input.dataset.modeui) {
-          config.modeUI = input.dataset.modeui;
-        }
-
-        // Parsear allowAdditionalCrops
-        if (input.dataset.allowadditionalcrops !== undefined) {
-          config.allowAdditionalCrops = input.dataset.allowadditionalcrops === 'true';
-        }
-
-        // Parsear maxCrops
-        if (input.dataset.maxcrops) {
-          config.maxCrops = parseInt(input.dataset.maxcrops, 10);
-        }
-
-        // Parsear buttonText personalizado
-        if (input.dataset.buttontext) {
-          config.buttonText = input.dataset.buttontext;
-        }
-
-        return config;
-      }
-    });
-
-    console.log('[Limbo] Integración configurada. Buscando inputs con selector: ${selector}');
-
-    // Debug: Verificar que el observer esté activo
-    console.log('[Limbo] AutoInputs stats:', Limbo.autoInputs?.getStats?.() || 'N/A');
-
-    // Debug: Escanear manualmente después de un delay para Vue/React hydration
-    setTimeout(function() {
-      var inputs = document.querySelectorAll('${selector}');
-      inputs.forEach(function(input, idx) {
-        // Forzar procesamiento si es un input válido
-        if (input.tagName === 'INPUT' && !input.dataset.limboProcessed) {
-          try {
-            Limbo.autoInputs._processInput(input);
-            input.dataset.limboProcessed = 'true';
-          } catch (e) {
-            console.error('[Limbo] Error procesando input:', e);
-          }
-        }
-      });
-    }, 1000); // Esperar 1 segundo para Vue hydration
-
-    // Segunda pasada después de 2.5 segundos para componentes Vue más lentos
-    setTimeout(function() {
-      var inputs = document.querySelectorAll('${selector}');
-      var pendingInputs = Array.from(inputs).filter(function(input) {
-        return input.tagName === 'INPUT' && !input.dataset.limboProcessed;
-      });
-      if (pendingInputs.length > 0) {
-        pendingInputs.forEach(function(input) {
-          try {
-            Limbo.autoInputs._processInput(input);
-            input.dataset.limboProcessed = 'true';
-          } catch (e) {
-            console.error('[Limbo] Error procesando input:', e);
-          }
-        });
-      }
-    }, 2500);
-  }
-
-  // Iniciar cuando el DOM esté listo
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initLimbo);
-  } else {
-    initLimbo();
-  }
-})();
-`;
-}
-
-/**
- * Genera las URLs de los assets de Limbo (CSS y JS)
- */
-export function getLimboAssetUrls(
-  options: { prod?: boolean; version?: string } = {}
-) {
-  const { prod = false, version = "latest" } = options;
-  // En producción, usar CDN de npm o URL de producción
-  if (prod) {
-    return {
-      css: `https://unpkg.com/limbo-component@${version}/dist/limbo.css`,
-      js: `https://unpkg.com/limbo-component@${version}/dist/limbo.min.js`,
-    };
-  }
-
-  // En desarrollo, usar el build local desde public/limbo
-  return {
-    css: "/limbo/limbo.css",
-    js: "/limbo/limbo.min.js",
-  };
-}
-
-export default {
-  generateLimboInitScript,
-  getLimboAssetUrls,
-};

package/src/limbo/tokenHandler.ts

@@ -1,207 +0,0 @@
-/**
- * Limbo Token Handler
- *
- * Handler genérico para obtener tokens JWT de Limbo.
- * Framework-agnostic: funciona en Astro, Next.js, Express, etc.
- *
- * La URL de la API de Limbo se determina automáticamente según `isProduction`:
- * - Producción: https://limbo.lefebvre.es
- * - Desarrollo: https://led-dev-limbo-dev.eu.els.local
- * - Local: http://localhost:8000
- *
- * @example Astro
- * ```ts
- * // src/pages/api/limbo-token.ts
- * import { createLimboTokenHandler } from 'libreria-astro-lefebvre/limbo';
- *
- * export const POST = createLimboTokenHandler({
- *   publicKey: import.meta.env.PUBLIC_LIMBO_PUBLIC_KEY,
- *   isProduction: import.meta.env.IS_PROD === 'TRUE'
- * });
- * ```
- *
- * @example Next.js App Router
- * ```ts
- * // app/api/limbo-token/route.ts
- * import { createLimboTokenHandler } from 'libreria-astro-lefebvre/limbo';
- *
- * export const POST = createLimboTokenHandler({
- *   publicKey: process.env.PUBLIC_LIMBO_PUBLIC_KEY!,
- *   isProduction: process.env.NODE_ENV === 'production'
- * });
- * ```
- */
-
-/** URLs por defecto de la API de Limbo */
-const LIMBO_API_URLS = {
-  production: 'https://limbo.lefebvre.es',
-  development: 'https://led-dev-limbo-dev.eu.els.local',
-} as const;
-
-export interface LimboTokenConfig {
-  /** Public Key del portal de Limbo (pk_xxx) */
-  publicKey: string;
-  /** ¿Usar API de producción? (default: false = desarrollo) */
-  isProduction?: boolean;
-  /** URL base de la API de Limbo (opcional, se determina por isProduction si no se especifica) */
-  limboApiUrl?: string;
-  /** Permitir override de publicKey desde el body de la request (default: true) */
-  allowPublicKeyOverride?: boolean;
-}
-
-export interface LimboTokenResponse {
-  success: boolean;
-  token?: string;
-  expires_in?: number;
-  error?: string;
-  details?: string;
-  hint?: string;
-}
-
-/**
- * Crea un handler para obtener tokens JWT de Limbo.
- *
- * Este handler actúa como proxy para evitar problemas de CORS,
- * haciendo la petición a Limbo desde el servidor.
- *
- * @param config - Configuración con publicKey e isProduction
- * @returns Handler compatible con Astro, Next.js, y otros frameworks
- */
-export function createLimboTokenHandler(config: LimboTokenConfig) {
-  const {
-    publicKey: defaultPublicKey,
-    isProduction = false,
-    limboApiUrl: customApiUrl,
-    allowPublicKeyOverride = true,
-  } = config;
-
-  // Determinar URL de la API (custom > isProduction > desarrollo)
-  const limboApiUrl = customApiUrl || (isProduction ? LIMBO_API_URLS.production : LIMBO_API_URLS.development);
-
-  // Validar configuración al crear el handler
-  if (!defaultPublicKey) {
-    console.error('[Limbo Token Handler] PUBLIC_LIMBO_PUBLIC_KEY no está configurada');
-  }
-
-  console.log(`[Limbo Token Handler] Configurado para ${isProduction ? 'PRODUCCIÓN' : 'DESARROLLO'}: ${limboApiUrl}`);
-
-  /**
-   * Handler que procesa la petición de token
-   */
-  return async function handler({ request }: { request: Request }): Promise<Response> {
-    try {
-      // Determinar qué publicKey usar
-      let publicKey = defaultPublicKey;
-
-      // Permitir override desde el body si está habilitado
-      if (allowPublicKeyOverride) {
-        try {
-          const body = await request.json();
-          if (body.public_key) {
-            publicKey = body.public_key;
-          }
-        } catch {
-          // Si no hay body válido, usar la del entorno
-        }
-      }
-
-      // Validar que tenemos publicKey
-      if (!publicKey) {
-        return new Response(
-          JSON.stringify({
-            success: false,
-            error: 'PUBLIC_LIMBO_PUBLIC_KEY no configurada',
-          } satisfies LimboTokenResponse),
-          {
-            status: 400,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        );
-      }
-
-      // Construir URL del endpoint de token
-      const tokenUrl = `${limboApiUrl}/auth/token`;
-      console.log('[Limbo Proxy] Requesting token from:', tokenUrl);
-      console.log('[Limbo Proxy] Using public_key:', publicKey.substring(0, 10) + '...');
-
-      // Hacer petición a Limbo
-      const response = await fetch(tokenUrl, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          public_key: publicKey,
-        }),
-      });
-
-      // Manejar errores de la API
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error('[Limbo Proxy] Error response:', response.status, errorText);
-
-        return new Response(
-          JSON.stringify({
-            success: false,
-            error: `API error: ${response.status}`,
-            details: errorText,
-          } satisfies LimboTokenResponse),
-          {
-            status: response.status,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        );
-      }
-
-      // Respuesta exitosa
-      const data = await response.json();
-      console.log('[Limbo Proxy] Token obtained successfully');
-
-      return new Response(JSON.stringify(data), {
-        status: 200,
-        headers: { 'Content-Type': 'application/json' },
-      });
-    } catch (error) {
-      console.error('[Limbo Proxy] Error completo:', error);
-
-      // Mensaje descriptivo para debug
-      let errorMsg = 'Unknown error';
-      if (error instanceof Error) {
-        errorMsg = error.message;
-        if (error.cause) {
-          errorMsg += ` (cause: ${JSON.stringify(error.cause)})`;
-        }
-      }
-
-      return new Response(
-        JSON.stringify({
-          success: false,
-          error: errorMsg,
-          hint: 'Verifica que la API de Limbo sea accesible desde el servidor',
-        } satisfies LimboTokenResponse),
-        {
-          status: 500,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      );
-    }
-  };
-}
-
-/**
- * URLs por defecto de la API de Limbo (exportadas para referencia).
- */
-export { LIMBO_API_URLS };
-
-/**
- * Helper para crear configuración desde variables de entorno comunes.
- * Útil para documentación y ejemplos.
- */
-export const LIMBO_ENV_VARS = {
-  /** Variable de entorno para la Public Key (con prefijo PUBLIC_ para cliente) */
-  PUBLIC_KEY: 'PUBLIC_LIMBO_PUBLIC_KEY',
-  /** Variable de entorno para indicar si es producción */
-  IS_PROD: 'IS_PROD',
-} as const;
-
-export default createLimboTokenHandler;