limbo-component 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,124 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2025-10-13
+
+### Added
+
+- 🎉 **Primera versión estable** lista para producción
+- ✨ Arquitectura SOLID con sistema de instancias múltiples
+- 🔐 Autenticación JWT v2 con auto-renovación
+- 📦 Build multi-formato: ESM, CJS, UMD
+- 🎨 Tailwind 4 con prefix `lb-` para evitar colisiones
+- 🖼️ Sistema completo de gestión de imágenes:
+  - Galería de imágenes del portal
+  - Subida de imágenes con preview
+  - Recortador avanzado (Cropper.js 2.0)
+  - Integración con IA, Stock y servicios externos
+- 🎭 Múltiples modos UI:
+  - `embed`: Componente embebido en contenedor
+  - `modal`: Apertura en overlay modal
+  - `button`: Botón trigger que abre modal
+- 🎯 Modos funcionales configurables:
+  - `full`: Todas las funcionalidades
+  - `gallery-only`: Solo galería
+  - `upload-only`: Solo subida
+  - `crop-only`: Solo recortador
+  - `ia-only`: Solo IA
+- 🤖 Sistema AutoInputs:
+  - Detección automática de inputs con `data-limbo-input-file`
+  - Configuración vía datasets
+  - Múltiples formatos de retorno (url, base64, assetId, object, json)
+- 🎨 Sistema de presets:
+  - Aspect ratios configurables
+  - Tamaños predefinidos
+  - Presets obligatorios
+  - Bloqueo de recorte manual
+- 🌍 Sistema i18n completo (ES/EN)
+- 🎨 Sistema de theming extensible
+- 📡 Sistema de eventos robusto:
+  - Eventos DOM personalizados
+  - Callbacks programáticos
+  - Event Manager centralizado
+- ♿ Accesibilidad:
+  - Focus trap en modales
+  - ARIA labels
+  - Navegación por teclado
+  - Soporte ESC para cerrar modales
+- 📱 Responsive y mobile-friendly
+- 🔍 Container queries para adaptación automática
+- 🎯 APIs completas:
+  - `Limbo.configure()` - Configuración global
+  - `Limbo.create()` - Crear instancias
+  - `Limbo.mount()` / `unmount()` - Gestión de montaje
+  - `Limbo.open()` / `close()` - Control de modales
+  - `Limbo.configureAutoInputs()` - Configurar inputs automáticos
+
+### Changed
+
+- 🔄 Migración completa de API v1 a v2
+- 🔄 Refactorización SOLID de toda la arquitectura
+- ⚡ Optimización de bundle sizes
+- 🔒 Mejoras de seguridad con JWT
+
+### Security
+
+- 🔐 Implementación de autenticación JWT segura
+- 🔒 Eliminación de API keys en cliente
+- 🛡️ Validación de CORS por portal
+
+## [0.5.0] - 2025-10-10
+
+### Added
+
+- 🚧 Versión beta con migración API v2
+- 📦 Sistema de build básico
+- 🎨 Integración inicial de Tailwind 4
+
+### Changed
+
+- 🔄 Adaptadores de respuesta v2
+- 🔄 Migración de hooks a APIs v2
+
+## [0.4.0] - 2025-10-05
+
+### Added
+
+- ⚡ Sistema de managers (Config, Event, Modal, AutoInputs)
+- 🎯 Soporte para múltiples instancias
+
+## [0.3.0] - 2025-09-28
+
+### Added
+
+- 🖼️ Componente Gallery básico
+- 📤 Sistema de subida de imágenes
+- ✂️ Integración de Cropper.js
+
+## [0.2.0] - 2025-09-20
+
+### Added
+
+- ⚛️ Configuración inicial React 19
+- 📦 Setup Vite 7
+- 🎨 Configuración Tailwind 4
+
+## [0.1.0] - 2025-09-15
+
+### Added
+
+- 🎉 Proyecto inicial
+- 📋 Estructura base del componente
+
+---
+
+[1.0.0]: https://github.com/Lefebvre-El-Derecho-SA/component-image-manager-bundle/releases/tag/v1.0.0
+[0.5.0]: https://github.com/Lefebvre-El-Derecho-SA/component-image-manager-bundle/releases/tag/v0.5.0
+[0.4.0]: https://github.com/Lefebvre-El-Derecho-SA/component-image-manager-bundle/releases/tag/v0.4.0
+[0.3.0]: https://github.com/Lefebvre-El-Derecho-SA/component-image-manager-bundle/releases/tag/v0.3.0
+[0.2.0]: https://github.com/Lefebvre-El-Derecho-SA/component-image-manager-bundle/releases/tag/v0.2.0
+[0.1.0]: https://github.com/Lefebvre-El-Derecho-SA/component-image-manager-bundle/releases/tag/v0.1.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2025 Lefebvre El Derecho, S.A.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,153 @@
+# @limbojs/component-limbo
+
+> Componente React altamente configurable para gestión de imágenes en portales web. Incluye galería, subida, recortador, y servicios de IA/Stock.
+
+[![npm version](https://img.shields.io/npm/v/@limbojs/component-limbo.svg)](https://www.npmjs.com/package/@limbojs/component-limbo)
+[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
+
+## 🌟 Características
+
+- 🖼️ **Galería completa** - Navega y selecciona imágenes del portal
+- 📤 **Subida de imágenes** - Con preview y validación
+- ✂️ **Recortador avanzado** - Basado en Cropper.js 2.0 con presets
+- 🤖 **Integración IA/Stock** - Generación y búsqueda de imágenes
+- 🎭 **Múltiples modos** - Embed, modal o botón trigger
+- 🎯 **Altamente configurable** - Por portal y por instancia
+- 🔐 **Seguro** - Autenticación JWT v2
+- 📦 **Multi-formato** - ESM, CJS, UMD (con React incluido)
+- 🌍 **Internacionalización** - ES/EN incluidos
+- ♿ **Accesible** - ARIA, teclado, focus trap
+- 📱 **Responsive** - Mobile-friendly con container queries
+
+## 📦 Instalación
+
+### NPM / Yarn / PNPM
+
+```bash
+npm install @limbojs/component-limbo
+# o
+yarn add @limbojs/component-limbo
+# o
+pnpm add @limbojs/component-limbo
+```
+
+### CDN (UMD)
+
+```html
+<!-- Incluir CSS -->
+<link rel="stylesheet" href="https://unpkg.com/@limbojs/component-limbo/dist/limbo.css">
+
+<!-- Incluir JS (React ya incluido) -->
+<script src="https://unpkg.com/@limbojs/component-limbo/dist/limbo.min.js"></script>
+```
+
+## 🚀 Uso Rápido
+
+### Modo Embed (ESM)
+
+```javascript
+import Limbo from '@limbojs/component-limbo';
+import '@limbojs/component-limbo/css';
+
+// Configurar globalmente
+Limbo.configure({
+  apiKey: 'your-api-key',
+  prod: true,
+  url: 'https://api.limbo.com'
+});
+
+// Crear instancia embebida
+Limbo.create({
+  container: '#limbo-container',
+  mode: 'embed',
+  modeUI: 'full'
+});
+```
+
+### Modo UMD (HTML puro)
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/@limbojs/component-limbo/dist/limbo.css">
+</head>
+<body>
+  <div id="limbo-app"></div>
+  
+  <script src="https://unpkg.com/@limbojs/component-limbo/dist/limbo.min.js"></script>
+  <script>
+    // Configurar
+    Limbo.configure({
+      apiKey: 'your-api-key',
+      prod: true
+    });
+    
+    // Montar
+    Limbo.create({
+      container: '#limbo-app',
+      mode: 'embed'
+    });
+  </script>
+</body>
+</html>
+```
+
+### AutoInputs (Integración automática)
+
+```html
+<!-- Configurar una vez -->
+<script>
+  Limbo.configure({ apiKey: 'your-api-key' });
+  Limbo.configureAutoInputs({
+    dataset: 'data-limbo-input-file',
+    returnType: 'url'
+  });
+</script>
+
+<!-- Usar en múltiples inputs -->
+<input 
+  type="hidden" 
+  name="avatar" 
+  data-limbo-input-file
+  data-limbo-mode="modal"
+  data-limbo-features="gallery,upload"
+/>
+```
+
+## ⚙️ Configuración
+
+```javascript
+Limbo.create({
+  container: '#app',
+  mode: 'embed',           // 'embed' | 'modal' | 'button'
+  modeUI: 'full',          // 'full' | 'gallery-only' | 'upload-only' | 'crop-only'
+  
+  // Callbacks
+  callbacks: {
+    onSelect: (payload) => console.log('Selected:', payload),
+    onUpload: (payload) => console.log('Uploaded:', payload),
+    onError: (error) => console.error('Error:', error)
+  }
+});
+```
+
+## 📡 Eventos
+
+```javascript
+document.addEventListener('limbo:select', (e) => {
+  console.log('Image selected:', e.detail);
+  // e.detail contiene: assetId, variants, master, fileBlob, etc.
+});
+```
+
+## 📄 Licencia
+
+ISC © LefebvreWEB
+
+## 🔗 Links
+
+- [Documentación completa](https://docs.limbo.dev)
+- [API Backend](https://github.com/Lefebvre-El-Derecho-SA/api-limbo)
+- [Reportar issues](https://github.com/Lefebvre-El-Derecho-SA/component-image-manager-bundle/issues)
+- [Changelog](./CHANGELOG.md)

package/dist/index.d.ts

@@ -0,0 +1,239 @@
+// Type definitions for @limbojs/component-limbo
+// Project: Limbo Image Manager Component
+// Definitions by: LefebvreWEB <https://github.com/Lefebvre-El-Derecho-SA>
+
+export interface LimboConfig {
+  /** API key for authentication */
+  apiKey: string;
+  /** Production mode flag */
+  prod?: boolean;
+  /** Base URL for API endpoints */
+  url?: string;
+}
+
+export interface LimboInstanceConfig extends LimboConfig {
+  /** DOM selector or element for mounting */
+  container: string | HTMLElement;
+  /** UI mode */
+  mode?: 'embed' | 'modal' | 'button';
+  /** Functional mode */
+  modeUI?: 'full' | 'gallery-only' | 'upload-only' | 'crop-only' | 'ia-only';
+  /** Available features */
+  features?: Array<'gallery' | 'upload' | 'cropper' | 'ia'>;
+  /** Image presets configuration */
+  presets?: {
+    /** Aspect ratio presets */
+    aspects?: Array<{
+      name: string;
+      ratio: string;
+      label?: string;
+    }>;
+    /** Size presets */
+    sizes?: Array<{
+      name: string;
+      width: number;
+      height?: number;
+      fit?: 'cover' | 'contain' | 'fill';
+      label?: string;
+    }>;
+    /** Required preset names */
+    required?: string[];
+    /** Lock user crop */
+    lockUserCrop?: boolean;
+    /** Allow arbitrary crops */
+    allowArbitrary?: boolean;
+    /** Default aspect preset */
+    defaultAspect?: string;
+    /** Default size preset */
+    defaultSize?: string;
+  };
+  /** Internationalization configuration */
+  i18n?: {
+    /** Locale code */
+    locale?: 'es' | 'en' | 'auto';
+    /** Custom messages */
+    messages?: Record<string, Record<string, string>>;
+    /** Auto-detect browser language */
+    autoDetect?: boolean;
+  };
+  /** Theme configuration */
+  theme?: {
+    /** Color palette */
+    colors?: Record<string, string>;
+    /** Spacing values */
+    spacing?: Record<string, string>;
+    /** Typography settings */
+    typography?: {
+      fontFamily?: string;
+      fontSize?: Record<string, string>;
+      fontWeight?: Record<string, string>;
+    };
+    /** Border radius values */
+    borderRadius?: Record<string, string>;
+    /** Shadow definitions */
+    shadows?: Record<string, string>;
+    /** Custom CSS properties */
+    customProperties?: Record<string, string>;
+  };
+  /** UI configuration */
+  ui?: LimboUIConfig;
+  /** Event callbacks */
+  callbacks?: LimboCallbacks;
+}
+
+export interface LimboUIConfig {
+  /** Actions to show */
+  showActions?: Array<'select' | 'download' | 'copy' | 'delete' | 'crop'>;
+  /** Actions to hide */
+  hideActions?: Array<'select' | 'download' | 'copy' | 'delete' | 'crop'>;
+  /** UI theme */
+  theme?: 'light' | 'dark';
+  /** Interface language */
+  language?: 'es' | 'en';
+  /** Compact mode flag */
+  compactMode?: boolean;
+  /** Show tabs flag */
+  showTabs?: boolean;
+}
+
+export interface LimboCallbacks {
+  /** Called when component is ready */
+  onReady?: (data: { instance: LimboInstance; config: LimboInstanceConfig; timestamp: number }) => void;
+  /** Called when image is selected */
+  onSelect?: (data: ImageData) => void;
+  /** Called when image is uploaded */
+  onUpload?: (data: ImageData) => void;
+  /** Called when error occurs */
+  onError?: (error: { message: string; code: string; timestamp: number }) => void;
+  /** Called when modal is opened */
+  onOpen?: (data: { instance: LimboInstance; mode: string; timestamp: number }) => void;
+  /** Called when modal/component is closed */
+  onClose?: () => void;
+}
+
+export interface ImageData {
+  /** Unique asset identifier */
+  assetId?: string;
+  /** Available image variants */
+  variants?: Array<{
+    variantId: string;
+    name: string;
+    urlSigned: string;
+    width: number;
+    height: number;
+    mime: string;
+  }>;
+  /** Master image data */
+  master?: {
+    urlSigned: string;
+    width: number;
+    height: number;
+    mime: string;
+  };
+  /** Image URL (legacy) */
+  url?: string;
+  /** Base64 data URL */
+  base64?: string;
+  /** Original file name */
+  fileName?: string;
+  /** MIME type */
+  mime?: string;
+  /** Image width */
+  width?: number;
+  /** Image height */
+  height?: number;
+  /** File blob if available */
+  blob?: Blob;
+  fileBlob?: File | Blob;
+  /** Additional metadata */
+  metadata?: {
+    uploadedBy?: string;
+    uploadedAt?: string | number;
+    size?: number;
+    [key: string]: any;
+  };
+  /** Instance information (for events) */
+  instance?: LimboInstance;
+  /** Event type (for events) */
+  eventType?: string;
+  /** Timestamp (for events) */
+  timestamp?: number;
+  /** Instance ID (for events) */
+  instanceId?: string;
+  /** Mode (for events) */
+  mode?: string;
+  /** Features (for events) */
+  features?: string[];
+}
+
+export interface AutoInputConfig {
+  /** Dataset attribute name */
+  dataset?: string;
+  /** Return data format */
+  return?: 'url' | 'base64' | 'assetId' | 'object' | 'json';
+  /** UI mode for auto-inputs */
+  modeUI?: 'full' | 'gallery-only' | 'upload-only' | 'crop-only' | 'ia-only';
+  /** Modal size */
+  modalSize?: 'small' | 'medium' | 'large';
+}
+
+export interface LimboInstance {
+  /** Instance ID */
+  id: string;
+  /** Instance configuration */
+  config: Partial<LimboInstanceConfig>;
+  /** Instance event manager */
+  eventManager: object;
+  /** Instance modal manager */
+  modalManager: object;
+  /** Mount the component */
+  mount(): LimboInstance;
+  /** Unmount the component */
+  unmount(): LimboInstance;
+  /** Open modal (for modal/button modes) */
+  open(): LimboInstance;
+  /** Close modal (for modal/button modes) */
+  close(): LimboInstance;
+  /** Update instance configuration */
+  updateConfig(config: Partial<LimboInstanceConfig>): LimboInstance;
+  /** Destroy the instance */
+  destroy(): void;
+  /** Check if mounted */
+  isMounted(): boolean;
+  /** Get current mode */
+  getMode(): 'embed' | 'modal' | 'button';
+  /** Get container element */
+  getContainer(): HTMLElement | null;
+  /** Get current configuration */
+  getConfig(): LimboInstanceConfig;
+}
+
+export interface LimboCore {
+  /** Configure global settings */
+  configure(config: LimboConfig): LimboCore;
+  /** Create new instance */
+  create(config: LimboInstanceConfig): LimboInstance;
+  /** Configure auto-inputs */
+  configureAutoInputs(config: AutoInputConfig): LimboCore;
+  /** Set theme configuration */
+  setTheme(theme: any): LimboCore;
+  /** Get current theme */
+  getTheme(): any;
+  /** Get instance by ID */
+  getInstance(id: string): LimboInstance | null;
+  /** Get all instances */
+  getAllInstances(): LimboInstance[];
+  /** Destroy all instances */
+  destroyAll(): LimboCore;
+}
+
+declare const Limbo: LimboCore;
+
+export default Limbo;
+
+// UMD global declarations
+declare global {
+  interface Window {
+    Limbo: LimboCore;
+  }
+}