npm - react-pdf-levelup - Versions diffs - 1.0.4 - Mend

react-pdf-levelup 1.0.4

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 (70) hide show

package/README.md +40 -0
package/fn/aggAlias.js +21 -0
package/fn/moveComponents.js +129 -0
package/fn/postinstall.js +66 -0
package/fn/upVersion.js +12 -0
package/fn/updateTsconfig.js +10 -0
package/next.config.mjs +6 -0
package/package.json +39 -0
package/public/bg-login.jpg +0 -0
package/public/codigo_guardado.js +1 -0
package/public/css/style.css +751 -0
package/public/dboard/logo.png +0 -0
package/public/favicon.ico +0 -0
package/public/fonts/TimesNewerRoman-Bold.otf +0 -0
package/public/fonts/TimesNewerRoman-BoldItalic.otf +0 -0
package/public/fonts/TimesNewerRoman-Italic.otf +0 -0
package/public/fonts/TimesNewerRoman-Regular.otf +0 -0
package/public/header-pdf.jpg +0 -0
package/public/home/bgHome.jpg +0 -0
package/public/home/bgHome2.jpg +0 -0
package/public/home/download.jpg +0 -0
package/public/home/undraw_elements_re_25t9.svg +1 -0
package/public/home/undraw_project_completed_re_jr7u.svg +1 -0
package/public/home/undraw_shared_goals_re_jvqd.svg +1 -0
package/public/home/undraw_spread_love_re_v3cl.svg +1 -0
package/public/home/undraw_target_re_fi8j.svg +1 -0
package/public/home/undraw_visionary_technology_re_jfp7.svg +1 -0
package/public/logo.png +0 -0
package/public/marca/logo.svg +1 -0
package/src/components/PDF/components/DocumentoTemplate.tsx +140 -0
package/src/components/PDF/components/PDFContent.tsx +192 -0
package/src/components/PDF/core/Etiquetas.tsx +152 -0
package/src/components/PDF/core/Grid.tsx +101 -0
package/src/components/PDF/core/Img.tsx +22 -0
package/src/components/PDF/core/LayoutPDF.tsx +186 -0
package/src/components/PDF/core/Listas.tsx +10 -0
package/src/components/PDF/core/MakePDF.tsx +50 -0
package/src/components/PDF/core/PageElements.tsx +50 -0
package/src/components/PDF/core/Position.tsx +33 -0
package/src/components/PDF/core/Tablet.tsx +121 -0
package/src/components/PDF/core/index.tsx +56 -0
package/src/components/PDF/lib/pdfParser.ts +620 -0
package/src/components/PDF/services/apiService.ts +17 -0
package/src/components/PDF/templates/AllTemplate.tsx +134 -0
package/src/components/PDF/templates/BusinessCardTemplate.tsx +139 -0
package/src/components/PDF/templates/CertificateTemplate.tsx +31 -0
package/src/components/PDF/templates/HeaderFooterTemplate.tsx +61 -0
package/src/components/PDF/templates/InvoiceTemplate.tsx +53 -0
package/src/components/PDF/templates/ProposalTemplate.tsx +246 -0
package/src/components/PDF/templates/ReportTemplate.tsx +57 -0
package/src/components/PDF/templates/ResumeTemplate.tsx +170 -0
package/src/components/PDF/templates/TablasTemplate.tsx +307 -0
package/src/components/PDF/templates/index.ts +9 -0
package/src/components/PDF/view/ColorPicker.tsx +147 -0
package/src/components/PDF/view/Header.tsx +102 -0
package/src/components/PDF/view/HomePDF.tsx +177 -0
package/src/components/PDF/view/SettingsPanel.tsx +703 -0
package/src/pages/AllTemplate.tsx +53 -0
package/src/pages/Documento2.tsx +45 -0
package/src/pages/_app.tsx +6 -0
package/src/pages/_document.tsx +13 -0
package/src/pages/api/generatePDF.ts +74 -0
package/src/pages/api/hello.ts +13 -0
package/src/pages/api/readFile.ts +18 -0
package/src/pages/api/readTemplateFile.ts +26 -0
package/src/pages/api/save.ts +22 -0
package/src/pages/api/saveFile.ts +20 -0
package/src/pages/index.tsx +13 -0
package/src/pages/template/[template].tsx +250 -0
package/tsconfig.json +63 -0

package/src/pages/AllTemplate.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+"use client"
+import type React from "react"
+import { LayoutPDF, P, H1, Table, Thead, Tbody, Tr, Th, Td, H2 } from "../components/PDF/core"
+const InvoiceTemplate: React.FC = () => {
+  return (
+    <LayoutPDF>
+      <H1>Factura</H1>
+      <P>Factura No: INV-001</P>
+      <P>Fecha: {new Date().toLocaleDateString()}</P>
+      <H2>Detalles del cliente</H2>
+      <P>Nombre: John Doe</P>
+      <P>Dirección: 123 Calle Principal, Ciudad</P>
+      <Table>
+        <Thead>
+          <Tr>
+            <Th>Descripción</Th>
+            <Th>Cantidad</Th>
+            <Th>Precio unitario</Th>
+            <Th>Total</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td>Producto A</Td>
+            <Td>2</Td>
+            <Td>$50.00</Td>
+            <Td>$100.00</Td>
+          </Tr>
+          <Tr>
+            <Td>Producto B</Td>
+            <Td>1</Td>
+            <Td>$75.00</Td>
+            <Td>$75.00</Td>
+          </Tr>
+          <Tr>
+            <Td style={{ fontWeight: "bold" }}>Total</Td>
+            <Td></Td>
+            <Td></Td>
+            <Td style={{ fontWeight: "bold" }}>$175.00</Td>
+          </Tr>
+        </Tbody>
+      </Table>
+      <P style={{ marginTop: 20 }}>Gracias por su compra.</P>
+    </LayoutPDF>
+  )
+}
+export default InvoiceTemplate

package/src/pages/Documento2.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+"use client"
+import type React from "react"
+import { LayoutPDF, P, H1, H2, BR } from "../core"
+type DocumentoTemplateProps = {}
+const DocumentoTemplate: React.FC<DocumentoTemplateProps> = () => {
+  return (
+    <LayoutPDF size="A4" orientation="portrait">
+      <H1>Ejemplo de documento con saltos de línea</H1>
+      <P>
+        Este es un ejemplo de documento con saltos de línea.
+        <BR />
+        Este texto aparece después de un salto de línea.
+      </P>
+      <P>
+        Puedes usar múltiples saltos de línea:
+        <BR />
+        <BR />
+        Como puedes ver, hay doble espacio aquí.
+      </P>
+      <H2>Tamaños de papel disponibles:</H2>
+      <P>
+        • A0 - 841 × 1189 mm (muy grande)
+        <BR />• A1 - 594 × 841 mm
+        <BR />• A2 - 420 × 594 mm
+        <BR />• A3 - 297 × 420 mm
+        <BR />• A4 - 210 × 297 mm (tamaño estándar)
+        <BR />• A5 - 148 × 210 mm
+        <BR />• A6 - 105 × 148 mm
+        <BR />• A7 - 74 × 105 mm
+        <BR />• A8 - 52 × 74 mm
+        <BR />• A9 - 37 × 52 mm
+        <BR />• A10 - 26 × 37 mm (muy pequeño)
+      </P>
+      <P>Puedes cambiar el tamaño del papel en la configuración del documento.</P>
+      <P>Prueba a seleccionar diferentes tamaños para ver cómo cambia el documento.</P>
+    </LayoutPDF>
+  )
+}
+export default DocumentoTemplate

package/src/pages/_app.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+import type { AppProps } from "next/app";
+import "../../public/css/style.css"
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}

package/src/pages/_document.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/src/pages/api/generatePDF.ts ADDED Viewed

@@ -0,0 +1,74 @@
+import type { NextApiRequest, NextApiResponse } from "next"
+import { renderToStream } from "@react-pdf/renderer"
+import * as templates from "../../components/PDF/templates"
+// Import createElement from react-pdf
+import { createElement } from "react"
+export const config = {
+  api: {
+    responseLimit: false,
+  },
+}
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "GET") {
+    return res.status(405).json({ error: "Method not allowed" })
+  }
+  try {
+    // Get template name and optional data from query parameters
+    const { template, data } = req.query
+    if (!template || typeof template !== "string") {
+      return res.status(400).json({ error: "Template name is required" })
+    }
+    // Convert template name to PascalCase for component name
+    const componentName =
+      template
+        .split("-")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join("") + "Template"
+    // Get the template component
+    const Template = templates[componentName as keyof typeof templates]
+    if (!Template) {
+      return res.status(404).json({ error: "Template not found" })
+    }
+    // Parse the data if provided
+    let templateData = {}
+    if (data) {
+      try {
+        templateData = typeof data === "string" ? JSON.parse(data) : data
+      } catch (error) {
+        return res.status(400).json({ error: "Invalid data format" })
+      }
+    }
+    // Create the PDF document
+    const MyDocument = createElement(Template, templateData);
+    // Set response headers for PDF
+    res.setHeader("Content-Type", "application/pdf")
+    res.setHeader("Content-Disposition", `attachment; filename="${template}.pdf"`)
+    // Create a readable stream from the PDF
+    const stream = await renderToStream(MyDocument)
+    // Pipe the stream to the response
+    stream.pipe(res)
+    // Handle stream errors
+    stream.on("error", (error) => {
+      console.error("Error streaming PDF:", error)
+      res.status(500).json({ error: "Error generating PDF" })
+    })
+  } catch (error) {
+    console.error("Error generating PDF:", error)
+    res.status(500).json({ error: "Error generating PDF" })
+  }
+}

package/src/pages/api/hello.ts ADDED Viewed

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+type Data = {
+  name: string;
+};
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
+  res.status(200).json({ name: "John Doe" });
+}

package/src/pages/api/readFile.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+import path from 'path';
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method === 'GET') {
+        const filePath = path.join(process.cwd(), 'src', 'components', 'PDF', "components", 'DocumentoTemplate.tsx');
+        fs.readFile(filePath, 'utf8', (err, data) => {
+            if (err) {
+                res.status(500).json({ error: 'Error al leer el archivo' });
+                return;
+            }
+            res.status(200).json({ content: data });
+        });
+    } else {
+        res.status(405).json({ error: 'Método no permitido' });
+    }
+}

package/src/pages/api/readTemplateFile.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from "next"
+import fs from "fs"
+import path from "path"
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") {
+    const { template } = req.query
+    if (!template || typeof template !== "string") {
+      return res.status(400).json({ error: "Nombre de plantilla no válido" })
+    }
+    const filePath = path.join(process.cwd(), "src", "components", "PDF", "templates", `${template}.tsx`)
+    fs.readFile(filePath, "utf8", (err, data) => {
+      if (err) {
+        res.status(500).json({ error: `Error al leer el archivo: ${err.message}` })
+        return
+      }
+      res.status(200).json({ content: data })
+    })
+  } else {
+    res.status(405).json({ error: "Método no permitido" })
+  }
+}

package/src/pages/api/save.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+import path from 'path';
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === 'POST') {
+    const { filename, content } = req.body;
+    const filePath = path.join(process.cwd(), "src", 'pdf', filename);
+    fs.writeFile(filePath, content, (err) => {
+      if (err) {
+        console.error('Error al guardar el archivo:', err);
+        return res.status(500).json({ message: 'Error al guardar el archivo' });
+      }
+      res.status(200).json({ message: 'Archivo guardado exitosamente' });
+    });
+  } else {
+    res.setHeader('Allow', ['POST']);
+    res.status(405).end(`Método ${req.method} no permitido`);
+  }
+}

package/src/pages/api/saveFile.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+import path from 'path';
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === 'POST') {
+    const { filename, content } = req.body;
+    const filePath = path.join(process.cwd(), 'src', 'pages', filename);
+    fs.writeFile(filePath, content, 'utf8', (err) => {
+      if (err) {
+        res.status(500).json({ error: 'Error al guardar el archivo' });
+        return;
+      }
+      res.status(200).json({ message: 'Archivo guardado exitosamente' });
+    });
+  } else {
+    res.status(405).json({ error: 'Método no permitido' });
+  }
+}

package/src/pages/index.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+'use client'
+import React from 'react'
+import PlaygroundPDF from '../components/PDF/view/HomePDF'
+interface HomeProps {
+}
+const Home: React.FC<HomeProps> = () => {
+  return (<PlaygroundPDF />);
+}
+export default Home;

package/src/pages/template/[template].tsx ADDED Viewed

@@ -0,0 +1,250 @@
+"use client"
+import { useRouter } from "next/router"
+import dynamic from "next/dynamic"
+import { useState, useEffect } from "react"
+import { Editor } from "@monaco-editor/react"
+import { Save } from "lucide-react"
+import PDFContent from "../../components/PDF/components/PDFContent"
+import Header from "../../components/PDF/view/Header"
+import type { LayoutSettings } from "../../components/PDF/view/SettingsPanel"
+const PDFViewer = dynamic(() => import("@react-pdf/renderer").then((mod) => mod.PDFViewer), { ssr: false })
+const TemplatePage = () => {
+  const router = useRouter()
+  const { template } = router.query
+  const [code, setCode] = useState<string>("")
+  const [showModal, setShowModal] = useState<boolean>(false)
+  const [filename, setFilename] = useState<string>("")
+  useEffect(() => {
+    const fetchTemplateCode = async () => {
+      if (!template) return
+      try {
+        let templatePath = ""
+        switch (template) {
+          case "allTemplate":
+            templatePath = "/api/readTemplateFile?template=AllTemplate"
+            setFilename("AllTemplate.tsx")
+            break
+          case "invoice":
+            templatePath = "/api/readTemplateFile?template=InvoiceTemplate"
+            setFilename("InvoiceTemplate.tsx")
+            break
+          case "report":
+            templatePath = "/api/readTemplateFile?template=ReportTemplate"
+            setFilename("ReportTemplate.tsx")
+            break
+          case "certificate":
+            templatePath = "/api/readTemplateFile?template=CertificateTemplate"
+            setFilename("CertificateTemplate.tsx")
+            break
+          default:
+            templatePath = "/api/readFile"
+            setFilename("DocumentoTemplate.tsx")
+            break
+        }
+        const response = await fetch(templatePath)
+        const data = await response.json()
+        setCode(data.content)
+      } catch (error) {
+        console.error("Error al leer el archivo:", error)
+      }
+    }
+    fetchTemplateCode()
+  }, [template])
+  const saveDocument = async () => {
+    try {
+      const response = await fetch("/api/saveFile", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ filename, content: code }),
+      })
+      const result = await response.json()
+      console.log(result.message)
+      setShowModal(false)
+    } catch (error) {
+      console.error("Error al guardar el archivo:", error)
+    }
+  }
+  const handleEditorChange = (value: string | undefined) => {
+    setCode(value || "")
+  }
+  const getTemplateTitle = () => {
+    switch (template) {
+      case "allTemplate":
+        return "All Template"
+      case "invoice":
+        return "Plantilla de Factura"
+      case "report":
+        return "Plantilla de Reporte"
+      case "certificate":
+        return "Plantilla de Certificado"
+      default:
+        return "Plantilla por Defecto"
+    }
+  }
+  const handleApplySettings = (settings: LayoutSettings) => {
+    // Generar el nuevo código con las configuraciones aplicadas
+    const updatedCode = generateUpdatedLayoutCode(code, settings)
+    setCode(updatedCode)
+  }
+  // Función para generar el código actualizado con las nuevas configuraciones
+  const generateUpdatedLayoutCode = (originalCode: string, settings: LayoutSettings): string => {
+    // Buscar la sección de estilos
+    const styleStartIndex = originalCode.indexOf("const styles = StyleSheet.create({")
+    const styleEndIndex = originalCode.indexOf("})") + 2
+    if (styleStartIndex === -1 || styleEndIndex === -1) {
+      console.error("No se pudo encontrar la sección de estilos en el código")
+      return originalCode
+    }
+    // Generar nuevos estilos
+    let newStyles = `const styles = StyleSheet.create({\n  page: {\n`
+    // Agregar propiedades de estilo
+    newStyles += `    backgroundColor: "${settings.backgroundColor}",\n`
+    // Agregar padding
+    if (settings.customPadding) {
+      newStyles += `    paddingTop: ${settings.paddingTop},\n`
+      newStyles += `    paddingRight: ${settings.paddingRight},\n`
+      newStyles += `    paddingBottom: ${settings.paddingBottom},\n`
+      newStyles += `    paddingLeft: ${settings.paddingLeft},\n`
+    } else {
+      newStyles += `    padding: ${settings.padding},\n`
+      if (settings.showPageNumbers) {
+        newStyles += `    paddingBottom: ${settings.padding + 14},\n`
+      }
+    }
+    newStyles += `    fontFamily: "${settings.fontFamily}",\n`
+    newStyles += `    fontSize: ${settings.fontSize},\n`
+    newStyles += `    lineHeight: ${settings.lineHeight},\n`
+    newStyles += `    position: "relative",\n`
+    newStyles += `  },\n\n`
+    // Agregar estilos para números de página si están habilitados
+    if (settings.showPageNumbers) {
+      newStyles += `  pageNumber: {\n`
+      newStyles += `    position: "absolute",\n`
+      newStyles += `    fontSize: 14,\n`
+      newStyles += `    top: 792 - 14,\n`
+      newStyles += `    left: 0,\n`
+      newStyles += `    right: 0,\n`
+      newStyles += `    textAlign: "center",\n`
+      newStyles += `    color: "grey",\n`
+      newStyles += `  },\n`
+    }
+    newStyles += `})`
+    // Reemplazar la sección de estilos en el código original
+    let updatedCode = originalCode.substring(0, styleStartIndex) + newStyles + originalCode.substring(styleEndIndex)
+    // Actualizar la etiqueta Page con el tamaño y orientación
+    const pageTagRegex = /<Page[^>]*>/
+    const pageTagMatch = updatedCode.match(pageTagRegex)
+    if (pageTagMatch) {
+      const originalPageTag = pageTagMatch[0]
+      const newPageTag = `<Page size="${settings.pageSize}" orientation="${settings.orientation}" style={styles.page}>`
+      updatedCode = updatedCode.replace(originalPageTag, newPageTag)
+    }
+    // Manejar la numeración de páginas
+    const pageNumberRegex = /<Text\s+style={styles\.pageNumber}[^>]*>[\s\S]*?<\/Text>/
+    const pageNumberMatch = updatedCode.match(pageNumberRegex)
+    if (settings.showPageNumbers && !pageNumberMatch) {
+      // Agregar numeración de páginas si no existe
+      const closingPageTag = "</Page>"
+      const pageNumberText = `\n        <Text
+          style={styles.pageNumber}
+          render={({ pageNumber, totalPages }) => \`\${pageNumber} / \${totalPages}\`}
+          fixed
+        />`
+      updatedCode = updatedCode.replace(closingPageTag, `${pageNumberText}\n      ${closingPageTag}`)
+    } else if (!settings.showPageNumbers && pageNumberMatch) {
+      // Eliminar numeración de páginas si existe pero no se desea
+      updatedCode = updatedCode.replace(pageNumberMatch[0], "")
+    }
+    return updatedCode
+  }
+  return (
+    <>
+      <Header
+        title={getTemplateTitle()}
+        showSaveModal={() => setShowModal(true)}
+        isTemplatePage={true}
+        currentCode={code}
+        onApplySettings={handleApplySettings}
+      />
+      <div className="container-playground">
+        <div className="container-editor fade-in">
+          <Editor
+            theme="vs-dark"
+            value={code}
+            defaultLanguage="javascript"
+            onChange={handleEditorChange}
+            options={{
+              minimap: { enabled: true },
+              fontSize: 14,
+              wordWrap: "on",
+              automaticLayout: true,
+              lineNumbers: "on",
+              scrollBeyondLastLine: false,
+              smoothScrolling: true,
+            }}
+          />
+        </div>
+        <div className="container-render fade-in">
+          {typeof window !== "undefined" && (
+            <PDFViewer>
+              <PDFContent content={code} />
+            </PDFViewer>
+          )}
+        </div>
+      </div>
+      <div className={`modal ${showModal ? "show" : ""}`}>
+        <div className="modal-content">
+          <h2>Guardar Documento</h2>
+          <input
+            type="text"
+            value={filename}
+            onChange={(e) => setFilename(e.target.value)}
+            placeholder="Nombre del archivo"
+          />
+          <div>
+            <button className="btn btn-primary" onClick={saveDocument}>
+              <Save size={20} />
+              Guardar
+            </button>
+            <button className="btn btn-outline" onClick={() => setShowModal(false)}>
+              Cancelar
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+export default TemplatePage

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,63 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "incremental": true,
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@fn/*": [
+        "./src/functions/*"
+      ],
+      "@env": [
+        "./env.ts"
+      ],
+      "@public/*": [
+        "./public/*"
+      ],
+      "@nano": [
+        "./src/components/nano/index.tsx"
+      ],
+      "@hook/*": [
+        "./src/hook/*"
+      ]
+    },
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationDir": "./dist/types",
+    "target": "ES2017",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "**/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/components/swiper/estructura/lib/swiper-gl.min.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}