@mandolop97/constructor-nexora 1.0.2 → 1.0.3

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 (3) hide show
  1. package/README.md +93 -62
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,73 +1,104 @@
1
- # Welcome to your Lovable project
1
+ # @mandolop97/constructor-nexora
2
2
 
3
- ## Project info
3
+ Editor visual de páginas basado en esquemas JSON para aplicaciones React.
4
4
 
5
- **URL**: https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID
5
+ ## Instalación
6
6
 
7
- ## How can I edit this code?
8
-
9
- There are several ways of editing your application.
10
-
11
- **Use Lovable**
12
-
13
- Simply visit the [Lovable Project](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and start prompting.
14
-
15
- Changes made via Lovable will be committed automatically to this repo.
16
-
17
- **Use your preferred IDE**
18
-
19
- If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
20
-
21
- The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
22
-
23
- Follow these steps:
24
-
25
- ```sh
26
- # Step 1: Clone the repository using the project's Git URL.
27
- git clone <YOUR_GIT_URL>
28
-
29
- # Step 2: Navigate to the project directory.
30
- cd <YOUR_PROJECT_NAME>
31
-
32
- # Step 3: Install the necessary dependencies.
33
- npm i
34
-
35
- # Step 4: Start the development server with auto-reloading and an instant preview.
36
- npm run dev
7
+ ```bash
8
+ npm install @mandolop97/constructor-nexora
37
9
  ```
38
10
 
39
- **Edit a file directly in GitHub**
40
-
41
- - Navigate to the desired file(s).
42
- - Click the "Edit" button (pencil icon) at the top right of the file view.
43
- - Make your changes and commit the changes.
44
-
45
- **Use GitHub Codespaces**
46
-
47
- - Navigate to the main page of your repository.
48
- - Click on the "Code" button (green button) near the top right.
49
- - Select the "Codespaces" tab.
50
- - Click on "New codespace" to launch a new Codespace environment.
51
- - Edit files directly within the Codespace and commit and push your changes once you're done.
52
-
53
- ## What technologies are used for this project?
11
+ ## Uso rápido
54
12
 
55
- This project is built with:
13
+ ```tsx
14
+ import { NexoraBuilderApp } from '@mandolop97/constructor-nexora';
15
+ import '@mandolop97/constructor-nexora/styles.css';
56
16
 
57
- - Vite
58
- - TypeScript
59
- - React
60
- - shadcn-ui
61
- - Tailwind CSS
62
-
63
- ## How can I deploy this project?
64
-
65
- Simply open [Lovable](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and click on Share -> Publish.
17
+ <NexoraBuilderApp
18
+ initialSchema={mySchema}
19
+ onSave={(schema) => saveToDatabase(schema)}
20
+ onPublish={(schema) => publishSchema(schema)}
21
+ />
22
+ ```
66
23
 
67
- ## Can I connect a custom domain to my Lovable project?
24
+ ## Integración multi-página
25
+
26
+ > **Importante:** Las páginas que aparecen en el editor son las **rutas reales de tu aplicación**. La base de datos solo almacena el contenido (schema) de cada página, **no define qué páginas existen**.
27
+
28
+ El array `pages` debe construirse a partir de las rutas reales definidas en tu template (React Router, etc.), no de registros de base de datos.
29
+
30
+ ```tsx
31
+ import {
32
+ NexoraBuilderApp,
33
+ getDefaultSchemaForSlug,
34
+ } from '@mandolop97/constructor-nexora';
35
+ import '@mandolop97/constructor-nexora/styles.css';
36
+
37
+ // 1. Define tus páginas REALES (las rutas de tu app)
38
+ const REAL_PAGES = [
39
+ { slug: '/', title: 'Inicio' },
40
+ { slug: '/products', title: 'Tienda' },
41
+ { slug: '/faq', title: 'Preguntas frecuentes' },
42
+ { slug: '/contact', title: 'Contacto' },
43
+ ];
44
+
45
+ function BuilderPage() {
46
+ const [currentSlug, setCurrentSlug] = useState('/');
47
+ const [savedSchemas, setSavedSchemas] = useState<Record<string, Schema>>({});
48
+
49
+ // 2. Para cada página real, busca su schema en BD o usa el default
50
+ const pages = REAL_PAGES.map((page) => ({
51
+ ...page,
52
+ schema: savedSchemas[page.slug] ?? getDefaultSchemaForSlug(page.slug),
53
+ status: savedSchemas[page.slug] ? 'published' as const : 'draft' as const,
54
+ }));
55
+
56
+ // 3. Pasa las páginas reales al builder
57
+ return (
58
+ <NexoraBuilderApp
59
+ pages={pages}
60
+ activePage={currentSlug}
61
+ onPageChange={setCurrentSlug}
62
+ onSave={(schema) => saveToDatabase(currentSlug, schema)}
63
+ onSaveWithSlug={(slug, schema) => saveToDatabase(slug, schema)}
64
+ onPublish={(schema) => publishSchema(currentSlug, schema)}
65
+ />
66
+ );
67
+ }
68
+ ```
68
69
 
69
- Yes, you can!
70
+ ## Props API
71
+
72
+ | Prop | Tipo | Descripción |
73
+ |------|------|-------------|
74
+ | `initialSchema` | `Schema` | Schema inicial. Tiene prioridad sobre `pages`. |
75
+ | `pages` | `PageDefinition[]` | Lista de páginas reales disponibles para editar. |
76
+ | `activePage` | `string` | Slug de la página activa (debe existir en `pages`). |
77
+ | `onPageChange` | `(slug: string) => void` | Callback al cambiar de página. |
78
+ | `onSave` | `(schema: Schema) => void` | Callback al guardar. |
79
+ | `onSaveWithSlug` | `(slug: string, schema: Schema) => void` | Callback al guardar con el slug de la página activa. |
80
+ | `onPublish` | `(schema: Schema) => void` | Callback al publicar. Si se omite, se muestra un diálogo interno. |
81
+ | `onPreview` | `(schema: Schema) => void` | Callback al previsualizar. |
82
+ | `onExport` | `(schema: Schema) => void` | Callback al exportar. |
83
+ | `domain` | `string` | Contexto de dominio para multi-tenant. |
84
+ | `className` | `string` | Clase CSS para el contenedor raíz. |
85
+
86
+ ## Exports adicionales
87
+
88
+ ```tsx
89
+ // Renderer independiente (para renderizar schemas sin el editor)
90
+ import { PageRenderer } from '@mandolop97/constructor-nexora';
91
+
92
+ // Utilidades de schema
93
+ import {
94
+ createDefaultHomeSchema,
95
+ getDefaultSchemaForSlug,
96
+ validateSchema,
97
+ createNode,
98
+ blockRegistry,
99
+ } from '@mandolop97/constructor-nexora';
100
+ ```
70
101
 
71
- To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
102
+ ## Tecnologías
72
103
 
73
- Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain)
104
+ React · TypeScript · Tailwind CSS · Vite · shadcn/ui
package/dist/index.js CHANGED
@@ -4,7 +4,7 @@ import T, { useRef as ce, useMemo as le, useLayoutEffect as pa, useEffect as de,
4
4
  import * as wn from "react-dom";
5
5
  import ha, { unstable_batchedUpdates as Hr, createPortal as Gc } from "react-dom";
6
6
  import { createClient as Yc } from "@supabase/supabase-js";
7
- const Uc = "1.0.0";
7
+ const Uc = "1.0.3";
8
8
  function qn() {
9
9
  const e = {
10
10
  root: "root",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mandolop97/constructor-nexora",
3
3
  "private": false,
4
- "version": "1.0.2",
4
+ "version": "1.0.3",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",