react-pdf-levelup 3.1.59 → 3.2.7

package/README.md

@@ -1,9 +1,15 @@
+<p align="center">
+  <img src="https://genarogg.github.io/media/react-pdf-levelup/logo-de-react-pdf-levelup.png" alt="react-pdf-levelup logo" width="160" />
+</p>
+
 # react-pdf-levelup
 
 Generador de PDFs dinámicos con React. Esta herramienta te permite crear plantillas PDF con componentes JSX personalizados y previsualizarlas en tiempo real dentro de una aplicación web. Ideal para etiquetas, facturas, reportes, certificados, tablas y más.
 
 # 🌐 **Playground en vivo:** 
-[https://react-pdf-levelup.netlify.app](https://react-pdf-levelup.netlify.app)
+[https://react-pdf-levelup.nimbux.cloud](https://react-pdf-levelup.nimbux.cloud)
+or
+[https://react-pdf-levelup.nimbux.cloud](https://react-pdf-levelup.nimbux.cloud)
 
 ## 📦 Instalación
 
@@ -13,7 +19,7 @@ npm install react-pdf-levelup
 
 ## 🚀 Características
 
-- 🧱 Construye PDFs con componentes de React usando `@react-pdf/renderer`
+- 🧱 Construye PDFs con componentes de React usando los componentes de `react-pdf-levelup` (LayoutPDF, texto, listas, QR, tablas, columnas, etc.)
 - 🖼 Vista previa en tiempo real de los documentos generados
 - 🎨 Editor en vivo con Monaco Editor para personalizar código JSX
 - 📦 Plantillas predefinidas listas para usar
@@ -68,43 +74,53 @@ decodeBase64Pdf(pdfBase64, 'mi-documento.pdf');
 - Abre el PDF en una nueva pestaña del navegador
 - Limpia automáticamente los recursos de memoria
 
-## 💡 Ejemplo de Uso Completo
+## 💡 Ejemplo de Uso con componentes levelup
 
 ```typescript
 import React from 'react';
-import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
-import { generatePDF, decodeBase64Pdf } from 'react-pdf-levelup';
-
-// Definir estilos para el PDF
-const styles = StyleSheet.create({
-  page: {
-    flexDirection: 'column',
-    backgroundColor: '#E4E4E4',
-    padding: 30,
-  },
-  section: {
-    margin: 10,
-    padding: 10,
-    flexGrow: 1,
-  },
-  title: {
-    fontSize: 24,
-    marginBottom: 10,
-  },
-});
+import { generatePDF, decodeBase64Pdf, LayoutPDF, H1, P, Strong, Em, HR, Container, Row, Col6, UL, LI, QR, Table, Thead, Tbody, Tr, Th, Td } from 'react-pdf-levelup';
 
-// Crear template del PDF
 const MyPDFTemplate = ({ data }) => (
-  <Document>
-    <Page size="A4" style={styles.page}>
-      <View style={styles.section}>
-        <Text style={styles.title}>{data?.title || 'Documento PDF'}</Text>
-        {data?.items?.map((item, index) => (
-          <Text key={index}>• {item}</Text>
-        ))}
-      </View>
-    </Page>
-  </Document>
+  <LayoutPDF>
+    <H1>Documento de Presentación</H1>
+    <P>
+      Bienvenido a <Strong>react-pdf-levelup</Strong>. Construye PDFs con componentes de React de forma <Em>rápida</Em> y <Em>tipada</Em>.
+    </P>
+    <HR />
+    <Container>
+      <Row>
+        <Col6>
+          <UL>
+            <LI>Plantillas listas</LI>
+            <LI>Componentes composables</LI>
+            <LI>TypeScript</LI>
+            <LI>Integración moderna</LI>
+          </UL>
+        </Col6>
+        <Col6>
+          <QR value="https://react-pdf-levelup.nimbux.cloud" size={120} />
+        </Col6>
+      </Row>
+    </Container>
+    <Table cellHeight={24}>
+      <Thead>
+        <Tr>
+          <Th width="40%">Producto</Th>
+          <Th width="20%">Cantidad</Th>
+          <Th width="20%">Precio</Th>
+          <Th width="20%">Total</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr>
+          <Td width="40%">Etiqueta Térmica 50x30</Td>
+          <Td width="20%">2</Td>
+          <Td width="20%">$5.00</Td>
+          <Td width="20%">$10.00</Td>
+        </Tr>
+      </Tbody>
+    </Table>
+  </LayoutPDF>
 );
 
 // Función para generar y descargar PDF
@@ -231,14 +247,94 @@ Esta librería utiliza internamente:
 ## 📝 Notas Importantes
 
 - La función `decodeBase64Pdf` solo funciona en contexto de navegador (requiere `document`)
-- Los templates deben ser componentes válidos de `@react-pdf/renderer`
+- Los templates deben usar los componentes de `react-pdf-levelup` y retornar JSX válido
 - El PDF se genera de forma asíncrona, asegúrate de usar `await` o `.then()`
 - Los recursos de memoria se limpian automáticamente después de la descarga
 
+## 🌐 API REST para generar PDFs
+
+- Genera PDFs vía HTTP desde cualquier lenguaje usando un template TSX en base64 y un objeto de datos.
+- Devuelve un JSON con `data.pdf` que es el PDF en base64.
+
+### Endpoints
+
+- Cloud: [https://react-pdf-levelup.nimbux.cloud/api](https://react-pdf-levelup.nimbux.cloud/api)
+- Auto‑hospedado ZIP: [https://genarogg.github.io/react-pdf-levelup/public/api.zip](https://genarogg.github.io/react-pdf-levelup/public/api.zip)
+
+```text
+https://react-pdf-levelup.nimbux.cloud/api
+```
+
+```text
+https://genarogg.github.io/react-pdf-levelup/public/api.zip
+```
+
+### Request
+
+POST con `Content-Type: application/json`:
+
+```json
+{
+  "template": "<TSX_EN_BASE64>",
+  "data": { "campo": "valor" }
+}
+```
+
+### Response
+
+```json
+{
+  "data": {
+    "pdf": "<PDF_EN_BASE64>"
+  }
+}
+```
+
+### Ejemplo rápido con Node.js (fetch)
+
+```ts
+import fs from "fs";
+import path from "path";
+
+type ApiResponse = { data?: { pdf?: string } };
+const ENDPOINT_API = "https://react-pdf-levelup.nimbux.cloud/api";
+
+const petition = async ({ template, data }: { template: string, data: any }): Promise<string> => {
+  const templatePath = path.join(process.cwd(), "src", "useExample", template);
+  const tsxCode = fs.readFileSync(templatePath, "utf-8");
+  const templateBase64 = Buffer.from(tsxCode, "utf-8").toString("base64");
+
+  const res = await fetch(ENDPOINT_API, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ template: templateBase64, data }),
+  });
+  if (!res.ok) throw new Error(`API error (${res.status}): ${await res.text()}`);
+  const json = await res.json() as ApiResponse;
+  return json?.data?.pdf ?? "";
+}
+
+const savePDF = (base64: string) => {
+  const buffer = Buffer.from(base64, "base64");
+  const outputPath = path.join(process.cwd(), "example.pdf");
+  fs.writeFileSync(outputPath, buffer);
+  console.log("PDF guardado:", outputPath);
+}
+```
+
+### Self‑hosting propio
+
+- Descarga el paquete ZIP y despliega en tu infraestructura (Node/Docker/PaaS).
+- Expón el endpoint `/api/pdf` con el mismo contrato JSON.
+- Usa el mismo cliente mostrado arriba apuntando a tu URL.
+
+Más detalles y ejemplos en la documentación:  
+[Guía API REST (fetch)](https://react-pdf-levelup-docs.nimbux.cloud/docs/guides/api-rest)
+
 ## 🤝 Contribuir
 
 Las contribuciones son bienvenidas. Por favor, abre un issue o envía un pull request.
 
 ## 📄 Licencia
 
-MIT License
+MIT License