# libreria-astro-lefebvre

Instrucciones:

- La libreria en npm está en: https://www.npmjs.com/package/libreria-astro-lefebvre
- Para instalar:
```
npm i libreria-astro-lefebvre
```

## 🖼️ Imágenes de Limbo

La librería incluye utilidades para trabajar con imágenes de Limbo de forma sencilla.

### Opción 1: Componente LimboImage (Recomendado para maquetadores)

El componente `<LimboImage>` extrae automáticamente la URL del JSON de Limbo:

```astro
---
import LimboImage from 'libreria-astro-lefebvre/components/LimboImage.astro';

const { imagen } = Astro.props; // Puede ser URL directa o JSON de Limbo
---

<!-- Uso básico -->
<LimboImage src={imagen} alt="Descripción de la imagen" />

<!-- Con estilos -->
<LimboImage 
  src={imagen} 
  alt="Hero" 
  class="w-full h-auto rounded-lg"
/>

<!-- Preferir imagen original en lugar del crop -->
<LimboImage src={imagen} prefer="original" alt="Original" />

<!-- Con fallback si no hay imagen -->
<LimboImage src={imagen} fallback="/default.jpg" alt="Con fallback" />
```

### Opción 2: Función extractImageUrl

Para casos donde necesitas más control:

```astro
---
import { extractImageUrl } from 'libreria-astro-lefebvre/lib/functions';

const { imagen } = Astro.props;

// Extraer URL (preferir crop por defecto)
const srcUrl = extractImageUrl(imagen);

// Preferir imagen original
const originalUrl = extractImageUrl(imagen, { prefer: 'original' });
---

<img src={srcUrl} alt="Mi imagen" />
```

### Funciones disponibles

```javascript
import { 
  extractImageUrl,    // Extrae URL de JSON Limbo
  parseImageData,     // Obtiene datos completos (original + crops)
  resolveUrl,         // Convierte /files/... a URL absoluta
  isValidImageUrl,    // Verifica si URL es válida (no blob)
  LIMBO_BASE_URL      // { DEV: '...', PROD: '...' }
} from 'libreria-astro-lefebvre/lib/functions';
```

---

## Instalación y desarrollo


Hacer un link en librería local: 
``` npm link ```

Usar librería local: 
``` npm link nombre-librería ```

Dejar de usar librería local: 
```npm unlink --no-save nombre-librería```

Login en npm: 
```npm login --auth-type=legacy```

Publicar en npm: 
```npm publish --access public```

Cuenta nodejs:
dretamal
P...a

Hay que hacer npm install y reiniciar server

Correr aplicación node: 
``` npm run dev ```

Compilar: 
```npm run build```


Para importar en proyecto astro y usar componentes:

```import { Button, Button2, Button3} from 'libreria-astro-lefebvre';```

Para listar componentes en Vue:

```import { listComponents} from 'libreria-astro-lefebvre/list';```

---

## Bitácora de cambios

### 30/03/2026

#### Soporte de `items` en campos de tipo `list` en los carbins

Se ha añadido la propiedad `items` a la definición de campos en la interfaz `ComponentMetadata` ([src/interfaces/types.ts](src/interfaces/types.ts)). Esto permite al pagebuilder conocer la estructura interna de los arrays en los componentes.

**Estructura para items simples (strings):**
```ts
{
  name: 'leftItems',
  type: 'list',
  label: 'Elementos de la columna',
  items: {
    type: 'text'
  }
}
```

**Estructura para items compuestos (objetos con varios campos):**
```ts
{
  name: 'leftItems',
  type: 'list',
  label: 'Elementos de la columna',
  items: {
    type: 'object',
    fields: [
      { name: 'label', type: 'text', label: 'Texto' },
      { name: 'tipo', type: 'select', label: 'Tipo', options: ['h1', 'h2'], options_labels: ['H1', 'H2'] },
      { name: 'descripcion', type: 'textArea', label: 'Descripción' },
      { name: 'activo', type: 'boolean', label: 'Activo' }
    ]
  }
}
```

**Tipos soportados en los `fields` de un item `object`:**

| Tipo | Descripción | Propiedades adicionales |
|------|-------------|------------------------|
| `text` | Campo de texto simple | — |
| `textArea` | Área de texto multilínea | — |
| `select` | Lista desplegable | `options` (valores), `options_labels` (etiquetas) |
| `boolean` | Checkbox verdadero/falso | — |

Aplicado por primera vez en el carbin `Tabla_2025_Fuenlabrada.ts`.