react-pdf-levelup 1.0.4

package/src/components/PDF/core/Etiquetas.tsx

@@ -0,0 +1,152 @@
+import type React from "react"
+import { Text, StyleSheet, Link } from "@react-pdf/renderer"
+
+interface TextProps {
+  children: React.ReactNode
+  style?: any
+  href?: string
+}
+
+const styles = StyleSheet.create({
+  p: {
+    fontSize: 12,
+    marginBottom: 14,
+    lineHeight: 1.5,
+  },
+  h1: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 12,
+  },
+  h2: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  h3: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  h4: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 6,
+  },
+  h5: {
+    fontSize: 14,
+    fontWeight: "bold",
+    marginBottom: 4,
+  },
+  h6: {
+    fontSize: 12,
+    fontWeight: "bold",
+    marginBottom: 0,
+  },
+  strong: {
+    fontWeight: "bold",
+  },
+  em: {
+    fontStyle: "italic",
+  },
+  u: {
+    textDecoration: "underline",
+  },
+  small: {
+    fontSize: 10,
+  },
+  blockquote: {
+    marginLeft: 20,
+    marginRight: 20,
+    fontStyle: "italic",
+    borderLeft: "4px solid #ccc",
+    paddingLeft: 10,
+  },
+  mark: {
+    backgroundColor: "yellow",
+  },
+  A: {
+    color: "#3d65fd",
+    textDecoration: "none",
+  },
+  br: {
+    width: "100%",
+    height: 1,
+    marginTop: 7,
+    marginBottom: 7,
+  },
+})
+
+const P: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.p, style]}>{children}</Text>
+}
+
+const H1: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.h1, style]}>{children}</Text>
+}
+
+const H2: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.h2, style]}>{children}</Text>
+}
+
+const H3: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.h3, style]}>{children}</Text>
+}
+
+const H4: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.h4, style]}>{children}</Text>
+}
+
+const H5: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.h5, style]}>{children}</Text>
+}
+
+const H6: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.h6, style]}>{children}</Text>
+}
+
+const Strong: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.strong, style]}>{children}</Text>
+}
+
+const Em: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.em, style]}>{children}</Text>
+}
+
+const U: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.u, style]}>{children}</Text>
+}
+
+const Small: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.small, style]}>{children}</Text>
+}
+
+const Blockquote: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.blockquote, style]}>{children}</Text>
+}
+
+const Mark: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[styles.mark, style]}>{children}</Text>
+}
+
+const A: React.FC<TextProps> = ({ children, style, href }) => {
+  return (
+    <Link src={href} style={[styles.A, style]}>
+      {children}
+    </Link>
+  )
+}
+
+// Add BR component for line breaks
+const BR: React.FC<{ style?: any }> = ({ style }) => {
+  return <Text style={[styles.br, style]}>{"\n"}</Text>
+}
+
+// Agregar la etiqueta Span después de la etiqueta Mark
+const Span: React.FC<TextProps> = ({ children, style }) => {
+  return <Text style={[style]}>{children}</Text>
+}
+
+// Exportar la etiqueta Span junto con las demás
+export { P, A, H1, H2, H3, H4, H5, H6, Strong, Em, U, Small, Blockquote, Mark, Span, BR }
+

package/src/components/PDF/core/Grid.tsx

@@ -0,0 +1,101 @@
+import type React from "react"
+import { View, StyleSheet } from "@react-pdf/renderer"
+
+interface ContainerProps {
+  children: React.ReactNode
+  style?: any
+}
+
+interface RowProps {
+  children: React.ReactNode
+  style?: any
+}
+
+interface ColProps {
+  children: React.ReactNode
+  style?: any
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    paddingHorizontal: 20,
+  },
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginHorizontal: -5, // Negative margin to offset column padding
+  },
+  col: {
+    paddingHorizontal: 5,
+  },
+  col1: { width: "8.33%" },
+  col2: { width: "16.66%" },
+  col3: { width: "25%" },
+  col4: { width: "33.33%" },
+  col5: { width: "41.66%" },
+  col6: { width: "50%" },
+  col7: { width: "58.33%" },
+  col8: { width: "66.66%" },
+  col9: { width: "75%" },
+  col10: { width: "83.33%" },
+  col11: { width: "91.66%" },
+  col12: { width: "100%" },
+})
+
+export const Container: React.FC<ContainerProps> = ({ children, style }) => {
+  return <View style={[styles.container, style]}>{children}</View>
+}
+
+export const Row: React.FC<RowProps> = ({ children, style }) => {
+  return <View style={[styles.row, style]}>{children}</View>
+}
+
+export const Col1: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col1, style]}>{children}</View>
+}
+
+export const Col2: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col2, style]}>{children}</View>
+}
+
+export const Col3: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col3, style]}>{children}</View>
+}
+
+export const Col4: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col4, style]}>{children}</View>
+}
+
+export const Col5: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col5, style]}>{children}</View>
+}
+
+export const Col6: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col6, style]}>{children}</View>
+}
+
+export const Col7: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col7, style]}>{children}</View>
+}
+
+export const Col8: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col8, style]}>{children}</View>
+}
+
+export const Col9: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col9, style]}>{children}</View>
+}
+
+export const Col10: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col10, style]}>{children}</View>
+}
+
+export const Col11: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col11, style]}>{children}</View>
+}
+
+export const Col12: React.FC<ColProps> = ({ children, style }) => {
+  return <View style={[styles.col, styles.col12, style]}>{children}</View>
+}
+

package/src/components/PDF/core/Img.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Image, StyleSheet } from '@react-pdf/renderer';
+
+interface ImgProps {
+    src?: string;
+    alt?: string;
+    style?: any;
+}
+
+const styles = StyleSheet.create({
+    image: {
+        width: '100%',
+        height: 'auto',
+        marginBottom: 14,
+    }
+});
+
+const Img: React.FC<ImgProps> = ({ src, alt, style }) => {
+    return <Image src={src} style={[styles.image, style]} />;
+}
+
+export default Img;

package/src/components/PDF/core/LayoutPDF.tsx

@@ -0,0 +1,186 @@
+import type React from "react"
+import { Page, Document, StyleSheet, Font, Text } from "@react-pdf/renderer"
+
+Font.register({
+  family: "Times New Roman",
+  fonts: [
+    { src: "/fonts/TimesNewerRoman-Regular.otf", fontWeight: 400, fontStyle: "normal" }, 
+    { src: "/fonts/TimesNewerRoman-Bold.otf", fontWeight: 700, fontStyle: "normal" }, 
+    { src: "/fonts/TimesNewerRoman-Italic.otf", fontWeight: 400, fontStyle: "italic" }, 
+    { src: "/fonts/TimesNewerRoman-BoldItalic.otf", fontWeight: 700, fontStyle: "italic" }, // Bold Italic
+  ],
+})
+
+// Definir dimensiones de papel en puntos (1 mm ≈ 2.83 puntos)
+const PAPER_SIZES = {
+  A0: [2384, 3370], // 841 × 1189 mm
+  A1: [1684, 2384], // 594 × 841 mm
+  A2: [1191, 1684], // 420 × 594 mm
+  A3: [842, 1191], // 297 × 420 mm
+  A4: [595, 842], // 210 × 297 mm
+  A5: [420, 595], // 148 × 210 mm
+  A6: [298, 420], // 105 × 148 mm
+  A7: [210, 298], // 74 × 105 mm
+  A8: [147, 210], // 52 × 74 mm
+  A9: [105, 147], // 37 × 52 mm
+  A10: [74, 105], // 26 × 37 mm
+}
+
+const styles = StyleSheet.create({
+  page: {
+    backgroundColor: "white",
+    padding: 72,
+    paddingBottom: 72 + 14,
+    fontFamily: "Times New Roman",
+    fontSize: 12,
+    lineHeight: 1.5,
+    position: "relative",
+ 
+  },
+  pageNumber: {
+    position: "absolute",
+    fontSize: 10,
+    top: 792 - 14,
+    left: 0,
+    right: 0,
+    textAlign: "center",
+    color: "grey",
+  },
+})
+
+interface LayoutPDFProps {
+  children: React.ReactNode
+  size?: string // 'A4', 'A5', 'LETTER', etc.
+  orientation?: "portrait" | "landscape"
+  backgroundColor?: string
+  showPageNumbers?: boolean
+  padding?: number | string
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  style?: any
+  width?: number // Custom width in points
+  height?: number // Custom height in points
+  fontFamily?: string
+  fontSize?: number
+  lineHeight?: number
+}
+
+// Update the LayoutPDF component to properly handle all props
+const LayoutPDF: React.FC<LayoutPDFProps> = ({
+  children,
+  size = "A4",
+  orientation = "portrait",
+  backgroundColor = "white",
+  showPageNumbers = true,
+  padding = 72,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+  style = {},
+  width,
+  height,
+  fontFamily = "Helvetica",
+  fontSize = 12,
+  lineHeight = 1.5,
+}) => {
+  // Create page style with all the props
+  const pageStyle = {
+    ...styles.page,
+    backgroundColor,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    ...style,
+  }
+
+  // Handle padding
+  if (
+    paddingTop !== undefined ||
+    paddingRight !== undefined ||
+    paddingBottom !== undefined ||
+    paddingLeft !== undefined
+  ) {
+    // Individual padding values
+    if (paddingTop !== undefined) pageStyle.paddingTop = paddingTop
+    if (paddingRight !== undefined) pageStyle.paddingRight = paddingRight
+    if (paddingBottom !== undefined) pageStyle.paddingBottom = paddingBottom
+    if (paddingLeft !== undefined) pageStyle.paddingLeft = paddingLeft
+  } else {
+    // Uniform padding
+    pageStyle.padding = padding
+    if (showPageNumbers) {
+      pageStyle.paddingBottom = Number(padding) + 14
+    }
+  }
+
+  // Determine the props to pass to the Page component
+  let pageProps: any = {}
+
+  // Check if we need to use custom paper size dimensions
+  const customSize = PAPER_SIZES[size.toUpperCase() as keyof typeof PAPER_SIZES]
+
+  if (customSize) {
+    // Use custom dimensions for the paper size
+    const [pageWidth, pageHeight] = customSize
+
+    if (orientation === "landscape") {
+      pageProps = {
+        style: pageStyle,
+        size: [pageHeight, pageWidth],
+      }
+    } else {
+      pageProps = {
+        style: pageStyle,
+        size: [pageWidth, pageHeight],
+      }
+    }
+
+    console.log(`Using custom size for ${size}: ${JSON.stringify(pageProps.size)}`)
+  } else if (width && height) {
+    // If explicit width and height are provided
+    pageProps = {
+      style: pageStyle,
+      size: [width, height],
+    }
+  } else {
+    // Use standard size and orientation
+    pageProps = {
+      size,
+      orientation,
+      style: pageStyle,
+    }
+  }
+
+  // Adjust page number position based on page size
+  let pageNumberStyle = { ...styles.pageNumber }
+
+  if (customSize) {
+    const [pageWidth, pageHeight] = customSize
+    const actualHeight = orientation === "landscape" ? pageWidth : pageHeight
+    pageNumberStyle = {
+      ...pageNumberStyle,
+      top: actualHeight - 80,
+    }
+  }
+
+  return (
+    <Document>
+      <Page {...pageProps}>
+        {children}
+        {(
+          <Text
+            style={pageNumberStyle}
+            render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`}
+            fixed
+          />
+        )}
+      </Page>
+    </Document>
+  )
+}
+
+export default LayoutPDF
+

package/src/components/PDF/core/Listas.tsx

@@ -0,0 +1,10 @@
+    
+interface ListaProps {
+    
+}
+ 
+const Lista: React.FC<ListaProps> = () => {
+    return ( <></> );
+}
+ 
+export default Lista;

package/src/components/PDF/core/MakePDF.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import dynamic from 'next/dynamic';
+import { BlobProvider } from "@react-pdf/renderer";
+// import { BtnNormalBasic} from "@btn";
+
+interface MakePDFProps {
+    namePDF?: string;
+    document: React.ReactElement;
+    children?: React.ReactNode;
+}
+
+const MakePDF: React.FC<MakePDFProps> = ({ namePDF = "documento.pdf", document, children = "Descargar PDF" }) => {
+    // Verifica si estamos en un entorno de navegador
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return (
+        <BlobProvider document={document}>
+            {({ blob, url, loading, error }) => {
+                // Si el PDF aún se está generando, muestra un texto de carga
+                if (loading) {
+                    return "Cargando documento...";
+                }
+
+                // Si hay un error, muéstralo
+                if (error) {
+                    return `Error: ${error.message}`;
+                }
+
+                // Crea una URL para el blob
+                let pdfURL = "";
+                if (blob !== null) {
+                    pdfURL = URL.createObjectURL(blob);
+                }
+
+                // Cuando el PDF esté listo, muestra un enlace para descargarlo
+                return (
+                    <div className="containerDownload">
+                        <a href={pdfURL} download={namePDF}>
+                            {children}
+                        </a>
+                    </div>
+                );
+            }}
+        </BlobProvider>
+    );
+};
+
+export default dynamic(() => Promise.resolve(MakePDF), { ssr: false });

package/src/components/PDF/core/PageElements.tsx

@@ -0,0 +1,50 @@
+import type React from "react"
+import { Text, View, StyleSheet } from "@react-pdf/renderer"
+
+interface PageElementProps {
+  children: React.ReactNode
+  style?: any
+  fixed?: boolean
+}
+
+const styles = StyleSheet.create({
+  header: {
+    position: "absolute",
+    top: 20,
+    left: 0,
+    right: 0,
+    textAlign: "center",
+    fontSize: 10,
+    color: "#666",
+    paddingHorizontal: 40,
+  },
+  footer: {
+    position: "absolute",
+    bottom: 20,
+    left: 0,
+    right: 0,
+    textAlign: "center",
+    fontSize: 10,
+    color: "#666",
+    paddingHorizontal: 40,
+  },
+})
+
+const Header: React.FC<PageElementProps> = ({ children, style, fixed = false }) => {
+  return (
+    <View style={[styles.header, style]} fixed={fixed}>
+      {typeof children === "string" ? <Text>{children}</Text> : children}
+    </View>
+  )
+}
+
+const Footer: React.FC<PageElementProps> = ({ children, style, fixed = false }) => {
+  return (
+    <View style={[styles.footer, style]} fixed={fixed}>
+      {typeof children === "string" ? <Text>{children}</Text> : children}
+    </View>
+  )
+}
+
+export { Header, Footer }
+

package/src/components/PDF/core/Position.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, StyleSheet } from '@react-pdf/renderer';
+
+interface PositionProps {
+    children: React.ReactNode;
+    style?: any;
+}
+
+const styles = StyleSheet.create({
+    left: {
+        textAlign: 'left',
+    },
+    right: {
+        textAlign: 'right',
+    },
+    center: {
+        textAlign: 'center',
+    }
+});
+
+const Left: React.FC<PositionProps> = ({ children, style }) => {
+    return <View style={[styles.left, style]}>{children}</View>;
+};
+
+const Right: React.FC<PositionProps> = ({ children, style }) => {
+    return <View style={[styles.right, style]}>{children}</View>;
+};
+
+const Center: React.FC<PositionProps> = ({ children, style }) => {
+    return <View style={[styles.center, style]}>{children}</View>;
+};
+
+export { Left, Right, Center };