react-pdf-levelup 1.0.4

package/src/components/PDF/templates/AllTemplate.tsx

@@ -0,0 +1,134 @@
+"use client"
+import type React from "react"
+import { LayoutPDF, P, H4, H2, BR, Center, Span, Container, Row, Col4, Img, Table, Tbody, Thead, Td, Th, Tr } from "../core"
+
+type AllTemplateProps = {}
+
+const AllTemplate: React.FC<AllTemplateProps> = () => {
+    const data = {
+        info0: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eaque repellat optio suscipit qui nobis adipisci perferendis animi dolor. Eveniet odit veritatis explicabo est possimus nisi fuga officia blanditiis expedita.",
+        info1: " Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eaque repellat optisuscipit qui nobis adipisci perferendis animi dolor. Eveniet odit veritatis explicabo est possimus nisi fuga officia blanditiis expedita.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat dolore labore iure sunt iste at qui aspernatur beatae quaerat non doloremque, nostrum, hic asperiores eius quae nulla. Ducimus, non culpa!",
+    }
+
+    const departmentData = [
+        { departamento: "Marketing", responsable: "Juan Pérez", presupuesto: "$25,000" },
+        { departamento: "Ventas", responsable: "María García", presupuesto: "$35,000" },
+        { departamento: "Desarrollo", responsable: "Carlos López", presupuesto: "$45,000" },
+    ]
+
+    const financialSummaryData = [
+        { categoria: "Ventas", ingresos: "$50,000", gastos: "$10,000", balance: "$40,000" },
+        { categoria: "Inversiones", ingresos: "$20,000", gastos: "$5,000", balance: "$15,000" },
+        { categoria: "Total", ingresos: "", gastos: "", balance: "$55,000", isBold: true, color: "#4CAF50" },
+    ]
+
+    return (
+        <LayoutPDF size="A4" orientation="portrait" padding={72} showPageNumbers={false}>
+            <Center style={{ marginBottom: "10px" }}>
+                <H4>Template Parrafos</H4>
+            </Center>
+
+            <P>{data.info0}</P>
+
+            <P style={{ textAlign: "justify", borderWidth: "1", padding: "10px" }}>{data.info1}</P>
+
+            <BR></BR>
+
+            <Center style={{ borderWidth: "1", padding: "10px" }}>
+                <P>
+                    <Span style={{ color: "#FF5733" }}>Lorem ipsum</Span>
+                    <Span style={{ color: "#FFC300" }}>dolor sit</Span>
+                    <Span style={{ color: "#33FF57" }}>amet consectetur</Span>
+                    <Span style={{ color: "#33AFFF" }}>adipisicing elit</Span>.
+                    <Span style={{ color: "#8D33FF" }}>Aliquam eaque</Span>
+                    <Span style={{ color: "#FF33A8" }}>repellat optio</Span>
+                    <Span style={{ color: "#33FFF3" }}>suscipit qui nobis</Span>
+                    <Span style={{ color: "#FF8C33" }}>adipisci perferendis</Span>
+                    <Span style={{ color: "#A833FF" }}>animi dolor</Span>.
+                    <Span style={{ color: "#33FF8C" }}>Eveniet odit</Span>
+                    <Span style={{ color: "#FF3333" }}>veritatis explicabo</Span>
+                    <Span style={{ color: "#339FFF" }}>est possimus</Span>
+                    <Span style={{ color: "#FF9933" }}>nisi fuga</Span>
+                    <Span style={{ color: "#C733FF" }}>officia blanditiis</Span>
+                    <Span style={{ color: "#33FF57" }}>expedita</Span>.
+                </P>
+            </Center>
+
+            <BR></BR>
+
+            <P style={{ backgroundColor: "#ffe38f" }}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eaque repellat optio suscipit qui nobis adipisci perferendis animi dolor. Eveniet odit veritatis explicabo est possimus nisi fuga officia blanditiis expedita.
+            </P>
+
+            <BR></BR>
+
+            <Center>
+                <Img src="https://avatars.githubusercontent.com/u/37651665?v=4" alt="Lights" style={{ width: "200", borderRadius: "300", alignSelf: 'center' }}></Img>
+            </Center>
+
+            <BR></BR>
+            <BR></BR>
+            <Container>
+                <Row>
+                    <Col4 style={{ backgroundColor: "#20c997", borderRadius: "5" }}>
+                        <P>t sdfdsfsdfdsfsddddddddddddddddd nisi fuga officia blanditiis expedita.</P>
+                    </Col4>
+
+                    <Col4 style={{ backgroundColor: "#17a2b8", borderRadius: "5" }}>
+                        <P>t possimus nisi fuga officia blanditiis expedita.</P>
+                    </Col4>
+                    <Col4 style={{ backgroundColor: "#20c997", borderRadius: "5" }}>
+                        <P>t possimus nisi fuga officia blanditiis expedita.</P>
+                    </Col4>
+                </Row>
+            </Container>
+
+            <BR></BR>
+            <BR></BR>
+
+            <H2 style={{ marginTop: 20 }}>Tabla con estilos personalizados</H2>
+            <Table style={{ borderColor: "#3366cc", borderWidth: 1 }}>
+                <Thead>
+                    <Tr>
+                        <Th style={{ backgroundColor: "#3366cc", color: "white" }}>Departamento</Th>
+                        <Th style={{ backgroundColor: "#3366cc", color: "white" }}>Responsable</Th>
+                        <Th style={{ backgroundColor: "#3366cc", color: "white" }}>Presupuesto</Th>
+                    </Tr>
+                </Thead>
+                <Tbody>
+                    {departmentData.map((row, index) => (
+                        <Tr key={index}>
+                            <Td>{row.departamento}</Td>
+                            <Td>{row.responsable}</Td>
+                            <Td>{row.presupuesto}</Td>
+                        </Tr>
+                    ))}
+                </Tbody>
+            </Table>
+
+            <H2 style={{ marginBottom: 20 }}>Resumen Financiero</H2>
+            <Table>
+                <Thead>
+                    <Tr>
+                        <Th style={{ backgroundColor: "#4CAF50", color: "white" }}>Categoría</Th>
+                        <Th style={{ backgroundColor: "#4CAF50", color: "white" }}>Ingresos</Th>
+                        <Th style={{ backgroundColor: "#4CAF50", color: "white" }}>Gastos</Th>
+                        <Th style={{ backgroundColor: "#4CAF50", color: "white" }}>Balance</Th>
+                    </Tr>
+                </Thead>
+                <Tbody>
+                    {financialSummaryData.map((row, index) => (
+                        <Tr key={index}>
+                            <Td style={row.isBold ? { fontWeight: "bold" } : {}}>{row.categoria}</Td>
+                            <Td>{row.ingresos}</Td>
+                            <Td>{row.gastos}</Td>
+                            <Td style={row.isBold ? { fontWeight: "bold", color: row.color } : { fontWeight: "bold" }}>{row.balance}</Td>
+                        </Tr>
+                    ))}
+                </Tbody>
+            </Table>
+        </LayoutPDF>
+    )
+}
+
+export default AllTemplate

package/src/components/PDF/templates/BusinessCardTemplate.tsx

@@ -0,0 +1,139 @@
+"use client"
+import type React from "react"
+import { LayoutPDF } from "../core"
+import { StyleSheet, View, Text } from "@react-pdf/renderer"
+
+const styles = StyleSheet.create({
+  card: {
+    position: "relative",
+    height: "100%",
+    backgroundColor: "#ffffff",
+    borderRadius: 5,
+    overflow: "hidden",
+  },
+  colorBar: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: 20,
+    backgroundColor: "#3498db",
+  },
+  content: {
+    padding: 20,
+    paddingTop: 30,
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+  },
+  header: {
+    marginBottom: 15,
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: "#2c3e50",
+  },
+  title: {
+    fontSize: 10,
+    color: "#7f8c8d",
+    marginTop: 2,
+  },
+  company: {
+    fontSize: 12,
+    fontWeight: "bold",
+    color: "#3498db",
+    marginTop: 5,
+  },
+  contactInfo: {
+    marginTop: 10,
+  },
+  contactRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 5,
+  },
+  contactLabel: {
+    fontSize: 8,
+    color: "#7f8c8d",
+    width: 30,
+  },
+  contactText: {
+    fontSize: 8,
+    color: "#2c3e50",
+  },
+  footer: {
+    marginTop: "auto",
+    borderTopWidth: 1,
+    borderTopColor: "#ecf0f1",
+    paddingTop: 5,
+  },
+  website: {
+    fontSize: 8,
+    color: "#3498db",
+    textAlign: "center",
+  },
+  logoContainer: {
+    position: "absolute",
+    bottom: 10,
+    right: 10,
+    width: 40,
+    height: 40,
+    backgroundColor: "#ecf0f1",
+    borderRadius: 20,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  logoText: {
+    fontSize: 14,
+    fontWeight: "bold",
+    color: "#3498db",
+  },
+})
+
+const BusinessCardTemplate: React.FC = () => {
+  return (
+    <LayoutPDF width={252} height={144} padding={0}>
+      <View style={styles.card}>
+        <View style={styles.colorBar} />
+
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <Text style={styles.name}>Juan Pérez</Text>
+            <Text style={styles.title}>Desarrollador Full Stack</Text>
+            <Text style={styles.company}>TECH SOLUTIONS</Text>
+          </View>
+
+          <View style={styles.contactInfo}>
+            <View style={styles.contactRow}>
+              <Text style={styles.contactLabel}>Tel:</Text>
+              <Text style={styles.contactText}>+1 (555) 123-4567</Text>
+            </View>
+
+            <View style={styles.contactRow}>
+              <Text style={styles.contactLabel}>Email:</Text>
+              <Text style={styles.contactText}>juan.perez@techsolutions.com</Text>
+            </View>
+
+            <View style={styles.contactRow}>
+              <Text style={styles.contactLabel}>Dir:</Text>
+              <Text style={styles.contactText}>123 Calle Tecnología, Ciudad Tech</Text>
+            </View>
+          </View>
+
+          <View style={styles.footer}>
+            <Text style={styles.website}>www.techsolutions.com</Text>
+          </View>
+        </View>
+
+        <View style={styles.logoContainer}>
+          <Text style={styles.logoText}>TS</Text>
+        </View>
+      </View>
+    </LayoutPDF>
+  )
+}
+
+export default BusinessCardTemplate
+

package/src/components/PDF/templates/CertificateTemplate.tsx

@@ -0,0 +1,31 @@
+"use client"
+import type React from "react"
+import { LayoutPDF, P, H1, H2, Center } from "../core"
+
+const CertificateTemplate: React.FC = () => {
+  return (
+    <LayoutPDF>
+      <Center>
+        <H1 style={{ color: "#4a4a4a", marginBottom: 20 }}>Certificado de Logro</H1>
+
+        <P style={{ fontSize: 14, marginBottom: 40 }}>Este certificado se otorga a</P>
+
+        <H2 style={{ color: "#2c3e50", marginBottom: 40 }}>Juan Pérez</H2>
+
+        <P style={{ fontSize: 14, marginBottom: 20 }}>por haber completado exitosamente el curso de</P>
+
+        <H2 style={{ color: "#2c3e50", marginBottom: 40 }}>Desarrollo Web Avanzado</H2>
+
+        <P style={{ fontSize: 14, marginBottom: 60 }}>con una duración de 120 horas</P>
+
+        <P style={{ fontSize: 12 }}>Fecha de emisión: {new Date().toLocaleDateString()}</P>
+
+        <P style={{ fontSize: 12, marginTop: 80 }}>_________________________</P>
+        <P style={{ fontSize: 12 }}>Firma del Director</P>
+      </Center>
+    </LayoutPDF>
+  )
+}
+
+export default CertificateTemplate
+

package/src/components/PDF/templates/HeaderFooterTemplate.tsx

@@ -0,0 +1,61 @@
+"use client"
+import type React from "react"
+import { LayoutPDF, P, H1, H2, Span, Header, Footer } from "../core"
+
+const HeaderFooterTemplate: React.FC = () => {
+  return (
+    <LayoutPDF size="A4" orientation="portrait" padding={72}>
+      {/* Header que aparecerá en todas las páginas */}
+      <Header fixed={true} style={{ backgroundColor: "#f0f0f0", padding: 10 }}>
+        DOCUMENTO CONFIDENCIAL
+      </Header>
+
+      <H1>Documento con Header y Footer</H1>
+
+      <P>
+        Este documento muestra cómo usar las nuevas etiquetas{" "}
+        <Span style={{ fontWeight: "bold", color: "blue" }}>Span</Span>,
+        <Span style={{ fontWeight: "bold", color: "red" }}> Header </Span>y{" "}
+        <Span style={{ fontWeight: "bold", color: "green" }}>Footer</Span>.
+      </P>
+
+      <H2>Uso de Span</H2>
+      <P>
+        La etiqueta Span permite <Span style={{ color: "red" }}>aplicar estilos</Span> a partes específicas del texto{" "}
+        <Span style={{ textDecoration: "underline" }}>sin afectar</Span> al resto del contenido.
+      </P>
+
+      <H2>Uso de Header y Footer</H2>
+      <P>
+        Las etiquetas Header y Footer permiten agregar contenido en la parte superior e inferior de cada página. Si se
+        les pasa la prop "fixed", aparecerán en todas las páginas del documento.
+      </P>
+
+      <P>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl
+        aliquam nisl, eget aliquam nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam
+        nisl, eget aliquam nisl nisl eget nisl.
+      </P>
+
+      <P>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl
+        aliquam nisl, eget aliquam nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam
+        nisl, eget aliquam nisl nisl eget nisl.
+      </P>
+
+      <P>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl
+        aliquam nisl, eget aliquam nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam
+        nisl, eget aliquam nisl nisl eget nisl.
+      </P>
+
+      {/* Footer que aparecerá en todas las páginas */}
+      <Footer fixed={true} style={{ borderTop: "1px solid #ccc", paddingTop: 5 }}>
+        <Span style={{ fontSize: 8 }}>© 2025 - Todos los derechos reservados</Span>
+      </Footer>
+    </LayoutPDF>
+  )
+}
+
+export default HeaderFooterTemplate
+

package/src/components/PDF/templates/InvoiceTemplate.tsx

@@ -0,0 +1,53 @@
+"use client"
+import type React from "react"
+import { LayoutPDF, P, H1, Table, Thead, Tbody, Tr, Th, Td, H2 } from "../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 isFirst>
+            <Th>Descripción</Th>
+            <Th>Cantidad</Th>
+            <Th>Precio unitario</Th>
+            <Th>Total</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr index={0}>
+            <Td>Producto A</Td>
+            <Td>2</Td>
+            <Td>$50.00</Td>
+            <Td>$100.00</Td>
+          </Tr>
+          <Tr index={1}>
+            <Td>Producto B</Td>
+            <Td>1</Td>
+            <Td>$75.00</Td>
+            <Td>$75.00</Td>
+          </Tr>
+          <Tr index={2}>
+            <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/components/PDF/templates/ProposalTemplate.tsx

@@ -0,0 +1,246 @@
+"use client"
+import type React from "react"
+import { LayoutPDF } from "../core"
+import { StyleSheet, View, Text } from "@react-pdf/renderer"
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 30,
+    paddingBottom: 20,
+    borderBottomWidth: 2,
+    borderBottomColor: "#3498db",
+  },
+  headerLeft: {
+    flex: 1,
+  },
+  headerRight: {
+    flex: 1,
+    alignItems: "flex-end",
+  },
+  companyName: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "#2c3e50",
+  },
+  companyInfo: {
+    fontSize: 10,
+    color: "#7f8c8d",
+    marginTop: 5,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: "#2c3e50",
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  section: {
+    marginBottom: 20,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: "#2c3e50",
+    marginBottom: 10,
+    backgroundColor: "#ecf0f1",
+    padding: 8,
+  },
+  text: {
+    fontSize: 11,
+    color: "#2c3e50",
+    lineHeight: 1.6,
+    marginBottom: 10,
+  },
+  table: {
+    marginTop: 10,
+    marginBottom: 20,
+  },
+  tableHeader: {
+    backgroundColor: "#3498db",
+    color: "white",
+  },
+  tableCell: {
+    padding: 8,
+    fontSize: 10,
+  },
+  highlight: {
+    backgroundColor: "#e8f6ff",
+  },
+  footer: {
+    position: "absolute",
+    bottom: 30,
+    left: 0,
+    right: 0,
+    textAlign: "center",
+    fontSize: 10,
+    color: "#7f8c8d",
+    paddingTop: 10,
+    borderTopWidth: 1,
+    borderTopColor: "#bdc3c7",
+  },
+  timeline: {
+    marginTop: 10,
+    marginBottom: 20,
+  },
+  timelineItem: {
+    flexDirection: "row",
+    marginBottom: 10,
+  },
+  timelineDate: {
+    width: 100,
+    fontSize: 10,
+    fontWeight: "bold",
+    color: "#3498db",
+  },
+  timelineContent: {
+    flex: 1,
+    fontSize: 10,
+    color: "#2c3e50",
+  },
+  pricing: {
+    marginTop: 20,
+    padding: 15,
+    backgroundColor: "#f8f9fa",
+    borderRadius: 5,
+  },
+  pricingItem: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 8,
+  },
+  pricingLabel: {
+    fontSize: 11,
+    color: "#2c3e50",
+  },
+  pricingValue: {
+    fontSize: 11,
+    fontWeight: "bold",
+    color: "#2c3e50",
+  },
+  total: {
+    marginTop: 10,
+    paddingTop: 10,
+    borderTopWidth: 1,
+    borderTopColor: "#bdc3c7",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  totalLabel: {
+    fontSize: 12,
+    fontWeight: "bold",
+    color: "#2c3e50",
+  },
+  totalValue: {
+    fontSize: 12,
+    fontWeight: "bold",
+    color: "#3498db",
+  },
+})
+
+const ProposalTemplate: React.FC = () => {
+  return (
+    <LayoutPDF>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerLeft}>
+          <Text style={styles.companyName}>TechSolutions Inc.</Text>
+          <Text style={styles.companyInfo}>
+            123 Innovation Drive{"\n"}
+            Silicon Valley, CA 94025{"\n"}
+            (555) 123-4567{"\n"}
+            contact@techsolutions.com
+          </Text>
+        </View>
+        <View style={styles.headerRight}>
+          <Text style={styles.companyInfo}>
+            Proposal #: PRO-2024-001{"\n"}
+            Date: March 7, 2024{"\n"}
+            Valid until: April 7, 2024
+          </Text>
+        </View>
+      </View>
+
+      <Text style={styles.title}>Website Redesign Proposal</Text>
+
+      {/* Executive Summary */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Executive Summary</Text>
+        <Text style={styles.text}>
+          TechSolutions Inc. is pleased to present this comprehensive proposal for the redesign of your corporate
+          website. Our solution will modernize your online presence, improve user experience, and drive better business
+          results through enhanced digital engagement.
+        </Text>
+      </View>
+
+      {/* Project Scope */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Project Scope</Text>
+        <Text style={styles.text}>
+          • Complete redesign of corporate website{"\n"}• Mobile-responsive implementation{"\n"}• Integration with
+          existing CMS{"\n"}• SEO optimization{"\n"}• Performance optimization{"\n"}• Analytics implementation
+        </Text>
+      </View>
+
+      {/* Timeline */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Project Timeline</Text>
+        <View style={styles.timeline}>
+          <View style={styles.timelineItem}>
+            <Text style={styles.timelineDate}>Week 1-2</Text>
+            <Text style={styles.timelineContent}>Discovery and Planning Phase</Text>
+          </View>
+          <View style={styles.timelineItem}>
+            <Text style={styles.timelineDate}>Week 3-6</Text>
+            <Text style={styles.timelineContent}>Design and Development</Text>
+          </View>
+          <View style={styles.timelineItem}>
+            <Text style={styles.timelineDate}>Week 7-8</Text>
+            <Text style={styles.timelineContent}>Testing and Refinement</Text>
+          </View>
+          <View style={styles.timelineItem}>
+            <Text style={styles.timelineDate}>Week 9</Text>
+            <Text style={styles.timelineContent}>Launch and Training</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* Pricing */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Investment</Text>
+        <View style={styles.pricing}>
+          <View style={styles.pricingItem}>
+            <Text style={styles.pricingLabel}>Website Design and Development</Text>
+            <Text style={styles.pricingValue}>$25,000</Text>
+          </View>
+          <View style={styles.pricingItem}>
+            <Text style={styles.pricingLabel}>Content Migration</Text>
+            <Text style={styles.pricingValue}>$5,000</Text>
+          </View>
+          <View style={styles.pricingItem}>
+            <Text style={styles.pricingLabel}>SEO Optimization</Text>
+            <Text style={styles.pricingValue}>$3,500</Text>
+          </View>
+          <View style={styles.pricingItem}>
+            <Text style={styles.pricingLabel}>Training and Documentation</Text>
+            <Text style={styles.pricingValue}>$1,500</Text>
+          </View>
+          <View style={styles.total}>
+            <Text style={styles.totalLabel}>Total Investment</Text>
+            <Text style={styles.totalValue}>$35,000</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* Footer */}
+      <Text style={styles.footer}>
+        This proposal is confidential and valid for 30 days. Terms and conditions apply.
+      </Text>
+    </LayoutPDF>
+  )
+}
+
+export default ProposalTemplate
+