lf-pagebuilder-vue 0.0.1 → 0.0.2

package/README.md

@@ -2,6 +2,41 @@
 
 Un componente Vue 3 de Page Builder con drag-and-drop para proyectos Lefebvre. Permite crear páginas de forma visual con un sistema de filas, columnas y componentes arrastrables.
 
+---
+
+## ⚠️ IMPORTANTE: Configuración de Entorno
+
+> **El componente `Pagebuilder` requiere la prop `isProduction` para determinar qué URLs de API utilizar (desarrollo o producción).**
+
+```vue
+<template>
+  <Pagebuilder 
+    :isProduction="isProduction" 
+    :renderApiDomain="apiUrl" 
+  />
+</template>
+
+<script setup>
+import { Pagebuilder } from 'lf-pagebuilder-vue';
+import 'lf-pagebuilder-vue/styles';
+
+// Opción 1: Usando import.meta.env.PROD (Vite detecta automáticamente)
+const isProduction = import.meta.env.PROD;
+
+// Opción 2: Usando una variable de entorno personalizada
+// const isProduction = import.meta.env.VITE_IS_PRODUCTION === 'true';
+
+const apiUrl = 'https://tu-api-render.com';
+</script>
+```
+
+| Valor de `isProduction` | URLs utilizadas |
+|-------------------------|-----------------|
+| `true` | URLs de producción (ej: `https://elderecho.com/feed`) |
+| `false` | URLs de desarrollo (ej: `https://led-dev-elderecho-dev.eu.els.local/feed`) |
+
+---
+
 ## 🚀 Características
 
 - **Drag & Drop**: Sistema intuitivo para arrastrar y organizar componentes
@@ -79,9 +114,10 @@ const renderApiUrl = import.meta.env.ASTRO_RENDER_API;
 
 ## 📐 Props del Pagebuilder
 
-| Prop | Tipo | Descripción |
-|------|------|-------------|
-| `renderApiDomain` | `string` | URL del API de renderizado para previews |
+| Prop | Tipo | Requerido | Default | Descripción |
+|------|------|-----------|---------|-------------|
+| `isProduction` | `boolean` | **Sí** | `false` | Determina si usar URLs de producción o desarrollo |
+| `renderApiDomain` | `string` | No | - | URL del API de renderizado para previews |
 
 ## 🎨 Estilos
 
@@ -159,6 +195,106 @@ npm run dev
 npm run build
 ```
 
+### 📦 Configuración de package.json para desarrollo vs producción
+
+Para evitar tener que hacer `npm run build` constantemente durante el desarrollo local, existen dos configuraciones de `package.json`:
+
+- **Desarrollo local**: Apunta directamente a los archivos fuente (`./src/`)
+- **Producción/npm**: Apunta a los archivos compilados (`./dist/`)
+
+> **Instrucciones**: Copia y pega el contenido correspondiente en tu `package.json` según lo que necesites.
+
+<details>
+<summary><strong>📁 package.dev.json para DESARROLLO LOCAL (sin build)</strong></summary>
+
+```json
+{
+  "name": "lf-pagebuilder-vue",
+  "version": "0.0.1",
+  "description": "Pagebuilder Vue component library for Lefebvre projects",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./styles": "./src/styles/pagebuilder.css"
+  },
+  "files": ["dist", "src", "README.md"]
+}
+```
+
+</details>
+
+<details>
+<summary><strong>📁 package.prod.json para PRODUCCIÓN (npm publish)</strong></summary>
+
+```json
+{
+  "name": "lf-pagebuilder-vue",
+  "version": "0.0.1",
+  "description": "Pagebuilder Vue component library for Lefebvre projects",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": ["dist", "README.md"]
+}
+```
+
+</details>
+
+> ⚠️ **IMPORTANTE**: Antes de hacer `npm publish`, asegúrate de usar la configuración de **PRODUCCIÓN** y ejecutar `npm run build`.
+
+### 🔗 Desarrollo local con `npm link` (múltiples librerías)
+
+> **IMPORTANTE**: Si necesitas usar enlaces simbólicos de **múltiples librerías** (por ejemplo, `lf-pagebuilder-vue` y `libreria-astro-lefebvre`), debes linkear **todas las librerías en un solo comando**.
+
+#### Paso 1: Crear los enlaces simbólicos en cada librería
+
+```bash
+# En el directorio de lf-pagebuilder-vue
+cd /ruta/a/lf-pagebuilder-vue
+npm link
+
+# En el directorio de libreria-astro-lefebvre (u otra librería)
+cd /ruta/a/libreria-astro-lefebvre
+npm link
+```
+
+#### Paso 2: Usar los enlaces en tu proyecto consumidor
+
+```bash
+# ✅ CORRECTO: Linkear ambas librerías en UN SOLO COMANDO
+cd /ruta/a/tu-proyecto
+npm link lf-pagebuilder-vue libreria-astro-lefebvre
+
+# ❌ INCORRECTO: Linkear por separado (el segundo sobreescribe el primero)
+npm link lf-pagebuilder-vue
+npm link libreria-astro-lefebvre  # ¡Esto rompe el link anterior!
+```
+
+#### Paso 3: Para deshacer los enlaces
+
+```bash
+cd /ruta/a/tu-proyecto
+npm unlink lf-pagebuilder-vue libreria-astro-lefebvre
+npm install
+```
+
+> **Nota**: Si experimentas problemas con los enlaces, prueba eliminar `node_modules` y el `package-lock.json` del proyecto consumidor y volver a instalar.
+
 ## 📄 Licencia
 
 MIT © Lefebvre-El-Derecho-SA