limbo-component 2.1.1 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +205 -75
  2. package/dist/limbo.cjs.js +1 -1
  3. package/dist/limbo.cjs.map +1 -1
  4. package/dist/limbo.es.js +3 -3
  5. package/dist/limbo.es.map +1 -1
  6. package/dist/limbo.min.js +1 -1
  7. package/dist/limbo.min.js.map +1 -1
  8. package/dist/limbo.umd.js +1 -1
  9. package/dist/limbo.umd.js.map +1 -1
  10. package/dist/types/hooks/useIsAllowedAll.d.ts.map +1 -1
  11. package/package.json +5 -13
package/README.md CHANGED
@@ -7,14 +7,14 @@
7
7
 
8
8
  ## 🌟 Características
9
9
 
10
- - 🖼️ **Galería completa**: Navega y selecciona imágenes del portal o portales externos (con proxy y filtrado de duplicados)
10
+ - 🖼️ **Galería completa**: Navega y selecciona imágenes del portal o portales externos
11
11
  - 📤 **Subida de imágenes**: Con preview, validación y persistencia de estado
12
- - ✂️ **Recortador avanzado**: Basado en Cropper.js 2.0 con presets y modos independientes
13
- - 🤖 **Integración IA/Stock**: Generación y búsqueda de imágenes con tabs especializadas
14
- - 🎭 **Múltiples modos**: Embed, modal, botón trigger, solo selección, cropper-only, gallery-only, etc.
12
+ - ✂️ **Recortador avanzado**: Basado en Cropper.js 2.0 con presets y recortes obligatorios
13
+ - 🤖 **Integración IA/Stock**: Generación y búsqueda de imágenes con Atenea
14
+ - 🎭 **Múltiples modos**: embed, modal, button, gallery-only, crop-only, upload-only, ia-only
15
15
  - 🎯 **Altamente configurable**: Por portal, instancia, dataset HTML o JS
16
- - 🔐 **Seguro**: Autenticación JWT v2, CORS dinámico
17
- - 📦 **Multi-formato**: ESM, CJS, UMD (con React incluido)
16
+ - 🔐 **Seguro**: Autenticación JWT con 3 modos (session, manual, jwt)
17
+ - 📦 **Multi-formato**: ESM, CJS, UMD (con React 19 incluido)
18
18
  - 🌍 **Internacionalización**: ES/EN incluidos
19
19
  - ♿ **Accesible**: ARIA, teclado, focus trap
20
20
  - 📱 **Responsive**: Mobile-friendly con container queries
@@ -34,14 +34,44 @@ pnpm add limbo-component
34
34
  ### CDN (UMD)
35
35
 
36
36
  ```html
37
- <!-- Incluir CSS -->
38
- <link
39
- rel="stylesheet"
40
- href="https://cdn.yourcdnsite.com/limbo-component/dist/limbo.css"
41
- />
37
+ <!-- CSS -->
38
+ <link rel="stylesheet" href="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.css" />
39
+
40
+ <!-- JS (React 19 incluido) -->
41
+ <script src="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.min.js"></script>
42
+ ```
43
+
44
+ ## 🔐 Modos de Autenticación
42
45
 
43
- <!-- Incluir JS (React ya incluido) -->
44
- <script src="https://cdn.yourcdnsite.com/limbo-component/dist/limbo.min.js"></script>
46
+ El componente soporta 3 modos de autenticación:
47
+
48
+ ```javascript
49
+ // MODO 1: Session (producción con cookies)
50
+ // El token se obtiene automáticamente usando la sesión del usuario
51
+ Limbo.configure({
52
+ publicKey: "pk_tu_clave_publica",
53
+ authMode: "session",
54
+ });
55
+
56
+ // MODO 2: Manual (token proporcionado directamente)
57
+ // Útil cuando el backend ya generó el token
58
+ Limbo.configure({
59
+ publicKey: "pk_tu_clave_publica",
60
+ token: "eyJ0eXAiOiJKV1Q...",
61
+ authMode: "manual",
62
+ });
63
+
64
+ // MODO 3: JWT con tokenProvider (recomendado)
65
+ // Proporciona una función async para renovación automática
66
+ Limbo.configure({
67
+ publicKey: "pk_tu_clave_publica",
68
+ authMode: "jwt",
69
+ tokenProvider: async () => {
70
+ const response = await fetch("/api/limbo-token");
71
+ const data = await response.json();
72
+ return data.token;
73
+ },
74
+ });
45
75
  ```
46
76
 
47
77
  ## 🚀 Uso Rápido
@@ -52,18 +82,25 @@ pnpm add limbo-component
52
82
  import Limbo from "limbo-component";
53
83
  import "limbo-component/css";
54
84
 
55
- // Configurar globalmente
85
+ // Configuración global
56
86
  Limbo.configure({
57
- apiKey: "your-api-key",
58
- prod: true,
59
- url: "https://api.site.com",
87
+ publicKey: "pk_tu_clave_publica",
88
+ authMode: "jwt",
89
+ tokenProvider: async () => {
90
+ const res = await fetch("/api/limbo-token");
91
+ return (await res.json()).token;
92
+ },
60
93
  });
61
94
 
62
95
  // Crear instancia embebida
63
96
  Limbo.create({
64
97
  container: "#limbo-container",
65
98
  mode: "embed",
66
- modeUI: "full",
99
+ modeUI: "full", // 'full' | 'gallery-only' | 'upload-only' | 'crop-only' | 'ia-only'
100
+ callbacks: {
101
+ onSelect: (data) => console.log("Seleccionado:", data),
102
+ onUpload: (data) => console.log("Subido:", data),
103
+ },
67
104
  });
68
105
  ```
69
106
 
@@ -73,116 +110,209 @@ Limbo.create({
73
110
  <!DOCTYPE html>
74
111
  <html>
75
112
  <head>
76
- <link
77
- rel="stylesheet"
78
- href="https://unpkg.com/limbo-component/dist/limbo.css"
79
- />
113
+ <link rel="stylesheet" href="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.css" />
80
114
  </head>
81
115
  <body>
82
116
  <div id="limbo-app"></div>
83
117
 
84
- <script src="https://unpkg.com/limbo-component/dist/limbo.min.js"></script>
118
+ <script src="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.umd.js"></script>
85
119
  <script>
86
120
  // Configurar
87
121
  Limbo.configure({
88
- apiKey: "your-api-key",
89
- prod: true,
122
+ publicKey: "pk_tu_clave_publica",
123
+ authMode: "session",
90
124
  });
91
125
 
92
- // Montar
126
+ // Crear instancia
93
127
  Limbo.create({
94
128
  container: "#limbo-app",
95
129
  mode: "embed",
130
+ modeUI: "full",
96
131
  });
97
132
  </script>
98
133
  </body>
99
134
  </html>
100
135
  ```
101
136
 
102
- ### AutoInputs (Integración automática y selección directa)
137
+ ### AutoInputs (Integración automática con formularios)
103
138
 
104
139
  ```html
105
- <!-- Configuración global -->
106
140
  <script>
107
- Limbo.configure({ apiKey: "your-api-key" });
141
+ // Configuración global
142
+ Limbo.configure({
143
+ publicKey: "pk_tu_clave_publica",
144
+ authMode: "session",
145
+ });
146
+
147
+ // Configurar AutoInputs
108
148
  Limbo.configureAutoInputs({
109
- dataset: "data-limbo-input-file",
110
- returnType: "url", // o 'object', 'base64', etc.
111
- allowDelete: false, // Ejemplo: solo selección
112
- features: ["gallery"], // Solo galería y selección
113
- modeUI: "gallery-only",
149
+ selector: ".js-limbo", // Selector CSS para inputs
150
+ return: "url", // 'url' | 'json' | 'assetId' | 'base64'
151
+ mode: "modal",
152
+ modeUI: "full",
114
153
  buttonText: "Seleccionar imagen",
154
+ showPreview: true,
115
155
  });
116
156
  </script>
117
157
 
118
- <!-- Usar en múltiples inputs, sin JS adicional -->
119
- <input
120
- type="hidden"
121
- name="avatar"
122
- data-limbo-input-file
123
- data-limbo-mode="modal"
124
- data-limbo-features="gallery"
125
- data-limbo-button-text="Seleccionar avatar"
126
- />
158
+ <!-- Inputs se transforman automáticamente -->
159
+ <input type="text" class="js-limbo" name="avatar" />
160
+
161
+ <!-- Con recortes obligatorios via data attribute -->
127
162
  <input
128
- type="hidden"
163
+ type="text"
164
+ class="js-limbo"
129
165
  name="banner"
130
- data-limbo-input-file
131
- data-limbo-mode="modal"
132
- data-limbo-features="gallery,cropper"
133
- data-limbo-button-text="Seleccionar banner"
166
+ data-mandatorycrops='[{"label":"Desktop","width":1920,"height":400},{"label":"Mobile","width":640,"height":300}]'
134
167
  />
168
+
169
+ <!-- Solo galería -->
170
+ <input type="text" class="js-limbo" name="imagen" data-modeui="gallery-only" />
171
+ ```
172
+
173
+ ## ⚙️ Configuración Completa
174
+
175
+ ### Limbo.configure() - Opciones Globales
176
+
177
+ ```javascript
178
+ Limbo.configure({
179
+ // Autenticación
180
+ publicKey: "pk_...", // Clave pública del portal (requerida)
181
+ token: null, // Token JWT (solo para authMode: 'manual')
182
+ authMode: "session", // 'session' | 'manual' | 'jwt'
183
+ tokenProvider: null, // Función async para obtener token
184
+
185
+ // URLs
186
+ prod: false, // true para producción (limbo.lefebvre.es)
187
+
188
+ // Callbacks globales
189
+ callbacks: {
190
+ onUpload: (data) => {},
191
+ onSelect: (data) => {},
192
+ onDelete: (assetId) => {},
193
+ onCropsSaved: (data) => {},
194
+ onError: (error) => {},
195
+ },
196
+ });
135
197
  ```
136
198
 
137
- ## ⚙️ Configuración avanzada y granular
199
+ ### Limbo.create() - Opciones de Instancia
138
200
 
139
201
  ```javascript
140
- // Ejemplo: solo selección, sin subida ni recorte
141
202
  Limbo.create({
142
- container: "#solo-seleccion",
143
- mode: "embed",
144
- modeUI: "gallery-only",
145
- features: ["gallery"],
203
+ // Contenedor (requerido)
204
+ container: "#limbo-gallery", // Selector CSS o elemento DOM
205
+
206
+ // Modo de renderizado
207
+ mode: "embed", // 'embed' | 'modal' | 'button'
208
+
209
+ // Modo funcional
210
+ modeUI: "full", // 'full' | 'gallery-only' | 'upload-only' | 'crop-only' | 'ia-only'
211
+
212
+ // Features habilitadas
213
+ features: ["gallery", "upload", "cropper"], // Tabs visibles
214
+
215
+ // Configuración UI
146
216
  ui: {
147
- showActions: ["select"],
148
- hideActions: ["delete", "download", "copy", "crop"],
149
- compactMode: true,
150
- showTabs: false,
217
+ showActions: ["select", "download", "copy", "delete", "crop", "variants"],
218
+ hideActions: [],
219
+ theme: "light", // 'light' | 'dark'
220
+ language: "es",
221
+ compactMode: false,
222
+ showTabs: true,
223
+ },
224
+
225
+ // Recortes obligatorios
226
+ cropperConfig: {
227
+ mandatoryCrops: [
228
+ { label: "Desktop", width: 1920, height: 400, required: true },
229
+ { label: "Mobile", width: 640, height: 300, required: true },
230
+ ],
231
+ allowCustomCrops: false,
151
232
  },
233
+
234
+ // Modal
235
+ modalSize: "fullscreen", // 'small' | 'medium' | 'large' | 'fullscreen'
236
+ buttonText: "Seleccionar imagen",
237
+
238
+ // Paginación
239
+ itemsPerPage: 20,
240
+
241
+ // Callbacks
152
242
  callbacks: {
153
- onSelect: (payload) => {
154
- // payload: { assetId, url, fileName, ... }
155
- console.log("Imagen seleccionada:", payload);
243
+ onSelect: (data) => {
244
+ // data: { assetId, url, fileName, mime, width, height, images, original }
156
245
  },
246
+ onUpload: (data) => {},
247
+ onCropsSaved: (data) => {},
248
+ onClose: () => {},
157
249
  },
158
250
  });
251
+ ```
159
252
 
160
- // Ejemplo: modo cropper-only
161
- Limbo.create({
162
- container: "#cropper",
163
- mode: "modal",
164
- modeUI: "crop-only",
165
- features: ["cropper"],
166
- // ...
253
+ ## 📡 Eventos DOM
254
+
255
+ ```javascript
256
+ // Resultado listo para el input
257
+ document.addEventListener("limbo:resultReady", (e) => {
258
+ const { input, value } = e.detail;
259
+ console.log(`Input ${input.name} recibió:`, value);
260
+ });
261
+
262
+ // Imagen seleccionada
263
+ document.addEventListener("limbo:select", (e) => {
264
+ console.log("Seleccionada:", e.detail);
265
+ });
266
+
267
+ // Recortes guardados
268
+ document.addEventListener("limbo:cropsSaved", (e) => {
269
+ console.log("Recortes:", e.detail.crops);
270
+ });
271
+
272
+ // Imagen subida
273
+ document.addEventListener("limbo:upload", (e) => {
274
+ console.log("Subida:", e.detail);
275
+ });
276
+
277
+ // Error
278
+ document.addEventListener("limbo:error", (e) => {
279
+ console.error("Error:", e.detail);
167
280
  });
168
281
  ```
169
282
 
170
- ## 📡 Eventos y persistencia de estado
283
+ ## 🎨 Personalización de Tema
171
284
 
172
285
  ```javascript
173
- document.addEventListener("limbo:select", (e) => {
174
- console.log("Imagen seleccionada:", e.detail);
175
- // e.detail: { assetId, url, fileName, ... }
286
+ Limbo.setTheme({
287
+ primary: "#2563eb",
288
+ secondary: "#64748b",
289
+ background: "#ffffff",
290
+ surface: "#f8fafc",
291
+ text: "#1e293b",
292
+ border: "#e2e8f0",
293
+ borderRadius: "8px",
176
294
  });
295
+ ```
177
296
 
178
- // El componente persiste el estado de búsqueda, selección y resultados
179
- // en sessionStorage para evitar perder datos al cambiar de pestaña.
297
+ O mediante CSS:
298
+
299
+ ```css
300
+ :root {
301
+ --lb-color-primary: #2563eb;
302
+ --lb-color-secondary: #64748b;
303
+ --lb-color-background: #ffffff;
304
+ --lb-color-surface: #f8fafc;
305
+ --lb-color-text: #1e293b;
306
+ --lb-color-border: #e2e8f0;
307
+ --lb-border-radius: 8px;
308
+ }
180
309
  ```
181
310
 
182
311
  ## 📄 Licencia
183
312
 
184
- Propierary © Lefebvre El Derecho S.A.
313
+ Proprietary © Lefebvre El Derecho S.A.
185
314
 
186
315
  ## 🔗 Links
187
316
 
188
317
  - [Changelog](./CHANGELOG.md)
318
+ - [Documentación completa](https://limbo.lefebvre.es/docs)