@react-pdf-levelup/qr 1.1.6 → 1.1.7
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.
- package/README.md +8 -38
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,23 +1,25 @@
|
|
|
1
1
|
# `@react-pdf-levelup/qr`
|
|
2
2
|
|
|
3
|
-
Paquete de componentes y utilidades para generar códigos QR estilizados dentro de plantillas
|
|
3
|
+
Paquete de componentes y utilidades para generar códigos QR estilizados dentro de plantillas de @react-pdf-levelup/core e incluso funciona con @react-pdf/renderer puro
|
|
4
|
+
|
|
5
|
+
### NOTA: esta libreria es un complemento de @react-pdf-levelup/core
|
|
6
|
+
|
|
7
|
+
### NOTA: este complemento solo funciona en el back
|
|
4
8
|
|
|
5
9
|
<p align="center">
|
|
6
10
|
<img src="https://genarogg.github.io/media/react-pdf-levelup/logo-de-react-pdf-levelup.png" alt="react-pdf-levelup logo" width="160" />
|
|
7
11
|
</p>
|
|
8
12
|
|
|
9
|
-
## NOTA IMPORTANTE ESTA LIBRERIA ES UN COMPLEMENTO DE @react-pdf-levelup/core
|
|
10
|
-
|
|
11
13
|
## Instalación
|
|
12
14
|
|
|
13
15
|
```bash
|
|
14
|
-
npm install @react-pdf-levelup/qr
|
|
16
|
+
npm install @react-pdf-levelup/core @react-pdf-levelup/qr
|
|
15
17
|
```
|
|
16
18
|
|
|
17
19
|
## Componentes principales
|
|
18
20
|
|
|
19
|
-
- `QR`:
|
|
20
|
-
- `
|
|
21
|
+
- `QR`: Componente basico para insertar un código QR en una plantilla PDF.
|
|
22
|
+
- `QRstyle`: Componente avanzado para generar estilos personalizados de QR (colores, forma de puntos, máscaras, etc.).
|
|
21
23
|
|
|
22
24
|
## Uso en plantillas PDF (ejemplo mínimo)
|
|
23
25
|
|
|
@@ -62,35 +64,3 @@ const style = QRStyle({
|
|
|
62
64
|
// <QR value="https://example.com" size={140} style={style} />
|
|
63
65
|
```
|
|
64
66
|
|
|
65
|
-
## Ejemplo avanzado (preview + export)
|
|
66
|
-
|
|
67
|
-
Frontend (vista previa y generación):
|
|
68
|
-
|
|
69
|
-
```tsx
|
|
70
|
-
import React from "react";
|
|
71
|
-
import { QRGenerator, QRstyleGenerator } from "@react-pdf-levelup/qr";
|
|
72
|
-
|
|
73
|
-
function Preview() {
|
|
74
|
-
const qrValue = "https://react-pdf-levelup.nimbux.cloud";
|
|
75
|
-
const previewStyle = QRstyleGenerator({
|
|
76
|
-
dotColor: "#222",
|
|
77
|
-
eyeColor: "#ff6b6b",
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
return (
|
|
81
|
-
<div>
|
|
82
|
-
<h3>Previsualización QR</h3>
|
|
83
|
-
<QRGenerator value={qrValue} size={180} style={previewStyle} />
|
|
84
|
-
</div>
|
|
85
|
-
);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
export default Preview;
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
## Notes
|
|
92
|
-
|
|
93
|
-
- Asegúrate de compilar el paquete (`dist/`) antes de publicar.
|
|
94
|
-
- `QRStyle`/`QRGenerator` APIs pueden variar según la versión; revisa los archivos fuente `frontend/src/components/core/qr` si necesitas adaptar propiedades concretas.
|
|
95
|
-
|
|
96
|
-
Si quieres, puedo actualizar README con la API exacta detectada en `frontend/src/components/core/qr` y añadir ejemplos concretos basados en las props reales.
|
package/dist/index.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
'use strict';var renderer=require('@react-pdf/renderer'),jsxRuntime=require('react/jsx-runtime'),react=require('react'),
|
|
1
|
+
'use strict';var renderer=require('@react-pdf/renderer'),jsxRuntime=require('react/jsx-runtime'),react=require('react'),B=require('qrcode');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var B__default=/*#__PURE__*/_interopDefault(B);renderer.StyleSheet.create({page:{backgroundColor:"white",padding:30,fontSize:14},footer:{position:"absolute",left:0,right:0,textAlign:"center"}});renderer.StyleSheet.create({image:{width:"100%",height:"auto",marginBottom:14}});renderer.StyleSheet.create({left:{textAlign:"left"},right:{textAlign:"right"},center:{textAlign:"center"}});renderer.StyleSheet.create({p:{fontSize:12,marginBottom:5,lineHeight:1.2},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:6,marginBottom:6},header:{position:"absolute",top:20,left:0,right:0,textAlign:"center",fontSize:10,paddingHorizontal:40},hr:{width:"100%",borderTop:"1px solid #000",marginTop:6,marginBottom:6}});react.createContext({cellHeight:22,textAlign:"left"});renderer.StyleSheet.create({table:{width:"100%",borderWidth:1,borderColor:"#000",marginBottom:20},thead:{backgroundColor:"#ccc"},tr:{flexDirection:"row"},textBold:{fontSize:10,fontWeight:"bold",paddingLeft:8,paddingRight:8,justifyContent:"center"},text:{fontSize:10,paddingLeft:8,paddingRight:8,justifyContent:"center"},zebraOdd:{backgroundColor:"#eeeeee"}});renderer.StyleSheet.create({container:{width:"100%"},row:{flexDirection:"row",flexWrap:"wrap"},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%"}});var u=async({value:e,size:r=150,colorDark:g="#000000",colorLight:l="#ffffff",margin:s=0,errorCorrectionLevel:d="M"})=>{try{let t={errorCorrectionLevel:d,type:"image/png",quality:.92,margin:s,color:{dark:g,light:l},width:r};return B__default.default.toDataURL(e,t)}catch(t){return console.error("Error generando QR:",t),""}},y=async(e,r,g,l)=>new Promise(async s=>{if(!e||!r){s(e);return}try{let d=typeof window<"u"&&typeof window.document<"u",t,c,a;if(d)t=document.createElement("canvas"),c=t.getContext("2d"),a=window.Image;else try{let{createCanvas:n,Image:i}=await import('canvas');t=n(100,100),c=t.getContext("2d"),a=i;}catch(n){console.error("Canvas not available in Node environment for addLogoToQR",n),s(e);return}if(!c){s(e);return}let o=new a;d&&(o.crossOrigin="anonymous"),o.onload=()=>{t.width=o.width,t.height=o.height,c.drawImage(o,0,0,t.width,t.height);let n=new a;d&&(n.crossOrigin="anonymous"),n.onload=()=>{let i=(t.width-g)/2,p=(t.height-l)/2;c.fillStyle="#FFFFFF",c.fillRect(i-5,p-5,g+10,l+10),c.drawImage(n,i,p,g,l);let h=t.toDataURL("image/png");s(h);},n.onerror=i=>{console.error("Error cargando el logo:",i),s(e);},n.src=r;},o.onerror=n=>{console.error("Error cargando el QR:",n),s("");},o.src=e;}catch(d){console.error("Error procesando el QR con logo:",d),s(e);}});var M=renderer.StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center",margin:10}}),H={0:"L",1:"M",2:"Q",3:"H"},z=({value:e,size:r=150,style:g,colorDark:l="#000000",colorLight:s="#ffffff",margin:d=0,logo:t="",logoWidth:c=30,logoHeight:a=30,errorCorrectionLevel:o=t?"H":"M"})=>{let[n,i]=react.useState("");react.useEffect(()=>{(async()=>{try{let m=await u({value:e,size:r,colorDark:l,colorLight:s,margin:d,errorCorrectionLevel:typeof o=="number"?H[o]||"M":o});if(t&&c&&a){let f=await y(m,t,c,a);i(f);}else i(m);}catch(m){console.error("Error generando QR:",m);let f=`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(e)}&size=${r}x${r}&color=${encodeURIComponent(l.replace("#",""))}&bgcolor=${encodeURIComponent(s.replace("#",""))}`;i(f);}})();},[e,r,l,s,d,t,c,a,o]);let p=`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(e)}&size=${r}x${r}`;return jsxRuntime.jsx(renderer.View,{style:[M.qrContainer,g],children:jsxRuntime.jsx(renderer.Image,{src:n||p,style:{width:r,height:r}})})},R=z;var C=async e=>{try{let r=typeof window<"u"&&typeof window.document<"u",g,l={};if(r)try{let o=await import('qr-code-styling');g=o.default||o;}catch(o){throw console.error("Failed to load qr-code-styling in browser",o),o}else {let o="jsdom",n="canvas",i="qr-code-styling/lib/qr-code-styling.common.js";try{let[p,h,m]=await Promise.all([import(o),import(n),import(i)]),{JSDOM:f}=p,P=h.default||h,{QRCodeStyling:T}=m;g=T,l={jsdom:f,nodeCanvas:P};}catch(p){throw console.error("Failed to load Node dependencies for QR generation",p),p}}let s=typeof e.width=="number"&&isFinite(e.width)?Math.round(e.width):300,d=typeof e.height=="number"&&isFinite(e.height)?Math.round(e.height):300,t={width:s,height:d,data:e.value,image:e.image,dotsOptions:e.dotsOptions,backgroundOptions:{color:e.backgroundOptions?.color||"#ffffff",...e.backgroundOptions},imageOptions:{crossOrigin:"anonymous",margin:typeof e.imageOptions?.margin=="number"&&isFinite(e.imageOptions.margin)?e.imageOptions.margin:0,saveAsBlob:!0,imageSize:typeof e.imageOptions?.imageSize=="number"&&isFinite(e.imageOptions.imageSize)?Math.max(0,Math.min(1,e.imageOptions.imageSize)):.4},cornersSquareOptions:e.cornersSquareOptions,cornersDotOptions:e.cornersDotOptions},a=await new g({type:"png",...l,...t}).getRawData("png");if(!a)throw new Error("Failed to generate raw data from qr-code-styling");if(r){if(a instanceof Blob)return new Promise((o,n)=>{let i=new FileReader;i.onloadend=()=>{typeof i.result=="string"?o(i.result):n(new Error("Failed to convert blob to base64"));},i.onerror=n,i.readAsDataURL(a);});console.warn("Unexpected rawData type in browser:",a);}if(typeof Buffer<"u"&&Buffer.isBuffer(a))return `data:image/png;base64,${a.toString("base64")}`;throw new Error(`Unexpected raw data type: ${typeof a}`)}catch(r){return console.error("Error generating QR V2, falling back to V1:",r),u({value:e.value,size:e.width,colorDark:e.fallbackColorDark||e.dotsOptions?.color,colorLight:e.fallbackColorLight||e.backgroundOptions?.color,margin:e.fallbackMargin||0,errorCorrectionLevel:e.fallbackErrorCorrectionLevel||"M"})}};var $=renderer.StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center"}}),W=({value:e,size:r=300,style:g,image:l,dotsOptions:s,backgroundOptions:d,imageOptions:t,cornersSquareOptions:c,cornersDotOptions:a,colorDark:o,colorLight:n,margin:i,errorCorrectionLevel:p})=>jsxRuntime.jsx(renderer.View,{style:[$.qrContainer,g],children:jsxRuntime.jsx(renderer.Image,{style:{width:r,height:r},src:C({value:e,width:r,height:r,image:l,dotsOptions:s||(o?{color:o}:void 0),backgroundOptions:d||(n?{color:n}:void 0),imageOptions:{...t,margin:t?.margin!==void 0?t.margin:i},cornersSquareOptions:c,cornersDotOptions:a,fallbackColorDark:o,fallbackColorLight:n,fallbackMargin:i,fallbackErrorCorrectionLevel:p})})}),x=W;renderer.StyleSheet.create({ul:{marginBottom:10,paddingLeft:15},ol:{marginBottom:10,paddingLeft:15},li:{marginBottom:5,flexDirection:"row"},bulletPoint:{width:15,marginRight:5,fontSize:12},itemContent:{flex:1}});renderer.StyleSheet.create({container:{position:"relative",width:"100%",height:"100%"},background:{position:"absolute",top:0,left:0,right:0,bottom:0},content:{position:"relative"}});
|
|
2
2
|
exports.QR=R;exports.QRstyle=x;//# sourceMappingURL=index.cjs.map
|
|
3
3
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../frontend/src/components/core/basic/Layout.tsx","../../../frontend/src/components/core/basic/Img.tsx","../../../frontend/src/components/core/basic/Position.tsx","../../../frontend/src/components/core/basic/Etiquetas.tsx","../../../frontend/src/components/core/basic/Tablet.tsx","../../../frontend/src/components/core/basic/Grid.tsx","../../../frontend/src/components/core/qr/QRGenerator.ts","../../../frontend/src/components/core/qr/QR.tsx","../../../frontend/src/components/core/qr/QRstyleGenerator.ts","../../../frontend/src/components/core/qr/QRstyle.tsx","../../../frontend/src/components/core/basic/Lista.tsx","../../../frontend/src/components/core/basic/ImgBg.tsx"],"names":["StyleSheet","createContext","generateQRAsBase64","value","size","colorDark","colorLight","margin","errorCorrectionLevel","options","QRCode","error","addLogoToQR","qrDataUrl","logoUrl","logoWidth","logoHeight","resolve","isBrowser","canvas","ctx","ImageConstructor","createCanvas","Image","e","qrImage","logoImage","x","y","finalQrDataUrl","err","styles","errorLevelMap","QR","style","logo","setQrDataUrl","useState","useEffect","baseQrDataUrl","qrWithLogo","fallbackUrl","jsx","View","QR_default","generateQRV2AsBase64","QRCodeStylingConstructor","extraOptions","mod","jsdomName","canvasName","qrCommonName","jsdomMod","canvasMod","qrCommonMod","JSDOM","nodeCanvas","QRCodeStyling","width","height","qrOptions","rawData","reject","reader","QRV2","image","dotsOptions","backgroundOptions","imageOptions","cornersSquareOptions","cornersDotOptions","QRstyle_default"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from \"react\"\r\nimport { Page, Document, StyleSheet, Text, View } from \"@react-pdf/renderer\"\r\n\r\nconst styles = StyleSheet.create({\r\n page: {\r\n backgroundColor: \"white\",\r\n padding: 30,\r\n fontFamily: \"Helvetica\",\r\n fontSize: 14,\r\n },\r\n footer: {\r\n position: \"absolute\",\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n }\r\n})\r\n\r\ninterface LayoutProps {\r\n children: React.ReactNode\r\n size?: string\r\n orientation?: \"vertical\" | \"horizontal\" | \"h\" | \"v\" | \"portrait\" | \"landscape\"\r\n backgroundColor?: string\r\n padding?: number\r\n margen?: \"apa\" | \"normal\" | \"estrecho\" | \"ancho\"\r\n style?: any\r\n pagination?: boolean\r\n footer?: React.ReactNode\r\n lines?: number\r\n rule?: boolean\r\n}\r\n\r\nconst Layout: React.FC<LayoutProps> = ({\r\n children,\r\n size = \"A4\",\r\n orientation = \"vertical\",\r\n backgroundColor = \"white\",\r\n padding = 30,\r\n margen = \"normal\",\r\n style = {},\r\n pagination = true,\r\n footer,\r\n lines = footer ? 2 : 1,\r\n rule = false,\r\n}) => {\r\n // Calculate footer height based on number of lines\r\n // Each line is approximately 20 points (considering font size and line height)\r\n const LINE_HEIGHT = 20\r\n const FOOTER_PADDING = 10\r\n const footerHeight = (lines * LINE_HEIGHT) + FOOTER_PADDING\r\n\r\n // Función para obtener márgenes según las normas APA y otros estándares\r\n const getMargins = (margen: string, pageSize: string) => {\r\n const normalizedSize = pageSize.toUpperCase()\r\n\r\n switch (margen) {\r\n case \"apa\":\r\n // Normas APA: 1 pulgada en todos los lados (72 puntos)\r\n if (normalizedSize === \"LETTER\" || normalizedSize === \"LEGAL\") {\r\n return {\r\n paddingTop: 72,\r\n paddingRight: 72,\r\n paddingBottom: 72,\r\n paddingLeft: 72\r\n }\r\n }\r\n // Para otros tamaños, usar equivalente proporcional\r\n return {\r\n paddingTop: 72,\r\n paddingRight: 72,\r\n paddingBottom: 72,\r\n paddingLeft: 72\r\n }\r\n\r\n case \"estrecho\":\r\n return {\r\n paddingTop: 36,\r\n paddingRight: 36,\r\n paddingBottom: 36,\r\n paddingLeft: 36\r\n }\r\n\r\n case \"ancho\":\r\n return {\r\n paddingTop: 108,\r\n paddingRight: 108,\r\n paddingBottom: 108,\r\n paddingLeft: 108\r\n }\r\n\r\n case \"normal\":\r\n default:\r\n return {\r\n paddingTop: padding,\r\n paddingRight: padding,\r\n paddingBottom: padding,\r\n paddingLeft: padding\r\n }\r\n }\r\n }\r\n\r\n // Validar y sanitizar props\r\n let safeSize = size\r\n let safeOrientation = orientation\r\n let safeBackgroundColor = backgroundColor\r\n\r\n let safeMargen = margen\r\n\r\n try {\r\n // Validar size\r\n const validSizes = [\"A0\", \"A1\", \"A2\", \"A3\", \"A4\", \"A5\", \"A6\", \"A7\", \"A8\", \"A9\", \"LETTER\", \"LEGAL\", \"TABLOID\"]\r\n if (typeof size === \"string\" && !validSizes.includes(size.toUpperCase())) {\r\n console.warn(`Invalid page size: ${size}. Using A4 as default.`)\r\n safeSize = \"A4\"\r\n }\r\n\r\n // Validar orientation\r\n const validOrientations = [\"vertical\", \"horizontal\", \"portrait\", \"landscape\", \"h\", \"v\"]\r\n const normalizedOrientation = typeof orientation === \"string\" ? orientation.toLowerCase() : \"vertical\"\r\n if (!validOrientations.includes(normalizedOrientation)) {\r\n console.warn(`Invalid orientation: ${orientation}. Using vertical as default.`)\r\n safeOrientation = \"vertical\"\r\n } else {\r\n // Mantener el valor original si es válido, respetando alias\r\n safeOrientation = orientation\r\n }\r\n\r\n // Validar backgroundColor\r\n if (typeof backgroundColor !== \"string\") {\r\n console.warn(`Invalid background color: ${backgroundColor}. Using white as default.`)\r\n safeBackgroundColor = \"white\"\r\n }\r\n\r\n // Validar margen\r\n const validMargins = [\"apa\", \"normal\", \"estrecho\", \"ancho\"]\r\n if (!validMargins.includes(margen)) {\r\n console.warn(`Invalid margin type: ${margen}. Using normal as default.`)\r\n safeMargen = \"normal\"\r\n }\r\n\r\n // Validar lines\r\n if (typeof lines !== \"number\" || lines < 1) {\r\n console.warn(`Invalid lines value: ${lines}. Using 1 as default.`)\r\n\r\n }\r\n } catch (e) {\r\n console.warn(\"Error processing props in Layout:\", e)\r\n }\r\n\r\n // Transform orientation from \"vertical\"/\"horizontal\" to \"portrait\"/\"landscape\"\r\n const transformOrientation = (orientation: \"vertical\" | \"horizontal\" | \"h\" | \"v\" | \"portrait\" | \"landscape\"): \"portrait\" | \"landscape\" => {\r\n switch (orientation) {\r\n case \"vertical\":\r\n case \"portrait\":\r\n case \"v\":\r\n return \"portrait\"\r\n case \"horizontal\":\r\n case \"landscape\":\r\n case \"h\":\r\n return \"landscape\"\r\n default:\r\n console.warn(`Unrecognized orientation: ${orientation}. Using portrait as default.`)\r\n return \"portrait\"\r\n }\r\n }\r\n\r\n // Function to calculate footer position based on size and orientation\r\n const getFooterPosition = (pageSize: string, orientation: \"portrait\" | \"landscape\", footerHeight: number) => {\r\n // Dimensions in millimeters according to ISO 216 standard\r\n const pageDimensions: Record<string, { width: number; height: number }> = {\r\n A0: { width: 841, height: 1189 },\r\n A1: { width: 594, height: 841 },\r\n A2: { width: 420, height: 594 },\r\n A3: { width: 297, height: 420 },\r\n A4: { width: 210, height: 297 },\r\n A5: { width: 148, height: 210 },\r\n A6: { width: 105, height: 148 },\r\n A7: { width: 74, height: 105 },\r\n A8: { width: 52, height: 74 },\r\n A9: { width: 37, height: 52 },\r\n LETTER: { width: 216, height: 279 },\r\n LEGAL: { width: 216, height: 356 },\r\n TABLOID: { width: 279, height: 432 },\r\n }\r\n\r\n // Convert mm to points (1mm = 2.834645669 points)\r\n const mmToPoints = 2.834645669\r\n\r\n const dimensions = pageDimensions[pageSize.toUpperCase()]\r\n if (!dimensions) {\r\n // A4 default in points\r\n return orientation === \"landscape\" ? 595 - footerHeight - 10 : 842 - footerHeight - 10\r\n }\r\n\r\n const heightInPoints = dimensions.height * mmToPoints\r\n const widthInPoints = dimensions.width * mmToPoints\r\n\r\n // Subtract footer height and additional margin\r\n return orientation === \"landscape\"\r\n ? widthInPoints - footerHeight - 10\r\n : heightInPoints - footerHeight - 10\r\n }\r\n\r\n const pdfOrientation = transformOrientation(safeOrientation)\r\n\r\n // Obtener márgenes según el tipo seleccionado\r\n const margins = getMargins(safeMargen, safeSize)\r\n\r\n // Calculate footer position based on calculated footer height\r\n const footerTop = getFooterPosition(safeSize, pdfOrientation, footerHeight)\r\n\r\n // Function to render grid (ruler)\r\n const renderGrid = () => {\r\n if (!rule) return null\r\n\r\n // 1 cm = 28.3465 points\r\n const cmToPoints = 28.3465\r\n\r\n // Get page dimensions in points\r\n const pageDimensions: Record<string, { width: number; height: number }> = {\r\n A0: { width: 841 * 2.834645669, height: 1189 * 2.834645669 },\r\n A1: { width: 594 * 2.834645669, height: 841 * 2.834645669 },\r\n A2: { width: 420 * 2.834645669, height: 594 * 2.834645669 },\r\n A3: { width: 297 * 2.834645669, height: 420 * 2.834645669 },\r\n A4: { width: 210 * 2.834645669, height: 297 * 2.834645669 },\r\n A5: { width: 148 * 2.834645669, height: 210 * 2.834645669 },\r\n A6: { width: 105 * 2.834645669, height: 148 * 2.834645669 },\r\n A7: { width: 74 * 2.834645669, height: 105 * 2.834645669 },\r\n A8: { width: 52 * 2.834645669, height: 74 * 2.834645669 },\r\n A9: { width: 37 * 2.834645669, height: 52 * 2.834645669 },\r\n LETTER: { width: 216 * 2.834645669, height: 279 * 2.834645669 },\r\n LEGAL: { width: 216 * 2.834645669, height: 356 * 2.834645669 },\r\n TABLOID: { width: 279 * 2.834645669, height: 432 * 2.834645669 },\r\n }\r\n\r\n const dimensions = pageDimensions[safeSize.toUpperCase()] || pageDimensions.A4\r\n const pageWidth = pdfOrientation === \"landscape\" ? dimensions.height : dimensions.width\r\n const pageHeight = pdfOrientation === \"landscape\" ? dimensions.width : dimensions.height\r\n\r\n const horizontalLines = []\r\n const verticalLines = []\r\n\r\n // Generate horizontal lines (every cm)\r\n for (let i = 0; i <= Math.ceil(pageHeight / cmToPoints); i++) {\r\n horizontalLines.push(\r\n <View\r\n key={`h-${i}`}\r\n style={{\r\n position: \"absolute\",\r\n top: i * cmToPoints,\r\n left: 0,\r\n right: 0,\r\n height: i % 5 === 0 ? 1 : 0.5,\r\n backgroundColor: i % 5 === 0 ? \"rgba(255, 0, 0, 0.8)\" : \"rgba(100, 100, 100, 0.5)\",\r\n }}\r\n />\r\n )\r\n }\r\n\r\n // Generate vertical lines (every cm)\r\n for (let i = 0; i <= Math.ceil(pageWidth / cmToPoints); i++) {\r\n verticalLines.push(\r\n <View\r\n key={`v-${i}`}\r\n style={{\r\n position: \"absolute\",\r\n left: i * cmToPoints,\r\n top: 0,\r\n bottom: 0,\r\n width: i % 5 === 0 ? 1 : 0.5,\r\n backgroundColor: i % 5 === 0 ? \"rgba(255, 0, 0, 0.8)\" : \"rgba(100, 100, 100, 0.5)\",\r\n }}\r\n />\r\n )\r\n }\r\n\r\n return (\r\n <View style={{ position: \"absolute\", top: 0, left: 0, right: 0, bottom: 0 }} fixed>\r\n {horizontalLines}\r\n {verticalLines}\r\n </View>\r\n )\r\n }\r\n\r\n const pageStyle = {\r\n ...styles.page,\r\n backgroundColor: safeBackgroundColor,\r\n paddingTop: (style?.paddingTop ?? style?.padding ?? margins.paddingTop),\r\n paddingRight: (style?.paddingRight ?? style?.padding ?? margins.paddingRight),\r\n paddingLeft: (style?.paddingLeft ?? style?.padding ?? margins.paddingLeft),\r\n paddingBottom: (style?.paddingBottom ?? style?.padding ?? margins.paddingBottom) + footerHeight,\r\n ...( (() => { const { padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest } = style || {}; return rest })() ),\r\n }\r\n\r\n const footerStyle = {\r\n ...styles.footer,\r\n top: footerTop,\r\n height: footerHeight,\r\n display: \"flex\" as const,\r\n flexDirection: \"column\" as const,\r\n justifyContent: \"center\" as const,\r\n alignItems: \"center\" as const,\r\n fontSize: 10,\r\n color: \"grey\"\r\n }\r\n\r\n return (\r\n <Document>\r\n <Page size={safeSize as any} orientation={pdfOrientation} style={pageStyle} wrap>\r\n {renderGrid()}\r\n <View style={{ paddingBottom: footerHeight }}>\r\n {children}\r\n </View>\r\n\r\n <View style={footerStyle} fixed>\r\n {footer && (footer)}\r\n {pagination && (\r\n <Text style={{ fontSize: footerStyle.fontSize }} render={({ pageNumber, totalPages }) => (\r\n `${pageNumber} / ${totalPages}`\r\n )} />\r\n )}\r\n </View>\r\n\r\n </Page>\r\n </Document>\r\n )\r\n}\r\n\r\nexport default Layout\r\n","import React from \"react\"\r\nimport { Image, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ImgProps {\r\n src?: string\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n image: {\r\n width: \"100%\",\r\n height: \"auto\",\r\n marginBottom: 14,\r\n },\r\n})\r\n\r\nconst Img: React.FC<ImgProps> = ({ src, style }) => {\r\n return <Image src={src} style={[styles.image, style]} />\r\n}\r\n\r\nexport default Img\r\n\r\n","import React from \"react\"\r\nimport { View, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface PositionProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n left: {\r\n textAlign: \"left\",\r\n },\r\n right: {\r\n textAlign: \"right\",\r\n },\r\n center: {\r\n textAlign: \"center\",\r\n },\r\n})\r\n\r\nconst Left: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.left, style]}>{children}</View>\r\n}\r\n\r\nconst Right: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.right, style]}>{children}</View>\r\n}\r\n\r\nconst Center: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.center, style]}>{children}</View>\r\n}\r\n\r\nexport { Left, Right, Center }\r\n\r\n","import React from \"react\"\r\nimport { Text, StyleSheet, Link, View } from \"@react-pdf/renderer\"\r\n\r\ninterface TextProps {\r\n children: React.ReactNode\r\n style?: any\r\n href?: string\r\n}\r\n\r\ninterface DivProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface HeaderProps {\r\n children: React.ReactNode\r\n style?: any\r\n fixed?: boolean\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n p: {\r\n fontSize: 12,\r\n marginBottom: 5,\r\n lineHeight: 1.2,\r\n },\r\n h1: {\r\n fontSize: 24,\r\n fontWeight: \"bold\",\r\n marginBottom: 12,\r\n },\r\n h2: {\r\n fontSize: 20,\r\n fontWeight: \"bold\",\r\n marginBottom: 10,\r\n },\r\n h3: {\r\n fontSize: 18,\r\n fontWeight: \"bold\",\r\n marginBottom: 8,\r\n },\r\n h4: {\r\n fontSize: 16,\r\n fontWeight: \"bold\",\r\n marginBottom: 6,\r\n },\r\n h5: {\r\n fontSize: 14,\r\n fontWeight: \"bold\",\r\n marginBottom: 4,\r\n },\r\n h6: {\r\n fontSize: 12,\r\n fontWeight: \"bold\",\r\n marginBottom: 0,\r\n },\r\n strong: {\r\n fontWeight: \"bold\",\r\n },\r\n em: {\r\n fontStyle: \"italic\",\r\n },\r\n u: {\r\n textDecoration: \"underline\",\r\n },\r\n small: {\r\n fontSize: 10,\r\n },\r\n blockquote: {\r\n marginLeft: 20,\r\n marginRight: 20,\r\n fontStyle: \"italic\",\r\n borderLeft: \"4px solid #ccc\",\r\n paddingLeft: 10,\r\n },\r\n mark: {\r\n backgroundColor: \"yellow\",\r\n },\r\n A: {\r\n color: \"#3d65fd\",\r\n textDecoration: \"none\",\r\n },\r\n br: {\r\n width: \"100%\",\r\n height: 1,\r\n marginTop: 7,\r\n marginBottom: 7,\r\n },\r\n header: {\r\n position: \"absolute\",\r\n top: 20,\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n fontSize: 10,\r\n color: \"#666\",\r\n paddingHorizontal: 40,\r\n },\r\n hr: {\r\n width: \"100%\",\r\n borderTop: \"1px solid #000\",\r\n marginTop: 8,\r\n marginBottom: 8,\r\n },\r\n})\r\n\r\nconst P: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.p, style]}>{children}</Text>\r\n}\r\n\r\nconst H1: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h1, style]}>{children}</Text>\r\n}\r\n\r\nconst H2: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h2, style]}>{children}</Text>\r\n}\r\n\r\nconst H3: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h3, style]}>{children}</Text>\r\n}\r\n\r\nconst H4: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h4, style]}>{children}</Text>\r\n}\r\n\r\nconst H5: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h5, style]}>{children}</Text>\r\n}\r\n\r\nconst H6: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h6, style]}>{children}</Text>\r\n}\r\n\r\nconst Strong: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.strong, style]}>{children}</Text>\r\n}\r\n\r\nconst Em: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.em, style]}>{children}</Text>\r\n}\r\n\r\nconst U: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.u, style]}>{children}</Text>\r\n}\r\n\r\nconst Small: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.small, style]}>{children}</Text>\r\n}\r\n\r\nconst Blockquote: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.blockquote, style]}>{children}</Text>\r\n}\r\n\r\nconst Mark: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.mark, style]}>{children}</Text>\r\n}\r\n\r\nconst A: React.FC<TextProps> = ({ children, style, href }) => {\r\n return (\r\n <Link src={href} style={[styles.A, style]}>\r\n {children}\r\n </Link>\r\n )\r\n}\r\n\r\nconst BR: React.FC<{ style?: any }> = ({ style }) => {\r\n return <Text style={[styles.br, style]}>{\"\\n\"}</Text>\r\n}\r\n\r\nconst HR: React.FC<{ style?: any }> = ({ style }) => {\r\n return <View style={[styles.hr, style]} />\r\n}\r\n\r\nconst Span: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[style]}>{children}</Text>\r\n}\r\n\r\nconst Header: React.FC<HeaderProps> = ({ children, style, fixed = false }) => {\r\n return (\r\n <View style={[styles.header, style]} fixed={fixed}>\r\n {typeof children === \"string\" ? <Text>{children}</Text> : children}\r\n </View>\r\n )\r\n}\r\n\r\nconst Div: React.FC<DivProps> = ({ children, style }) => {\r\n return <View style={style}>{children}</View>\r\n}\r\n\r\nexport { P, A, H1, H2, H3, H4, H5, H6, Strong, Em, U, Small, Blockquote, Mark, Span, BR, HR, Header, Div }","import React, { createContext, useContext } from \"react\";\r\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\r\n\r\ninterface TableProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n cellHeight?: number;\r\n}\r\n\r\ninterface TheadProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}\r\n\r\ninterface CellProps {\r\n children?: React.ReactNode;\r\n style?: any;\r\n width?: string | number;\r\n height?: string | number;\r\n colSpan?: number;\r\n isLast?: boolean;\r\n isLastRow?: boolean;\r\n isOdd?: boolean;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}\r\n\r\n// Context para pasar cellHeight y textAlign a los componentes hijos\r\nconst TableContext = createContext<{\r\n cellHeight: number;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}>({\r\n cellHeight: 22,\r\n textAlign: \"left\",\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n table: {\r\n width: \"100%\",\r\n borderWidth: 1,\r\n borderColor: \"#000\",\r\n marginBottom: 20,\r\n },\r\n thead: {\r\n backgroundColor: \"#ccc\",\r\n },\r\n tr: {\r\n flexDirection: \"row\",\r\n },\r\n textBold: {\r\n fontSize: 10,\r\n fontWeight: \"bold\",\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n\r\n },\r\n text: {\r\n fontSize: 10,\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n\r\n },\r\n zebraOdd: {\r\n backgroundColor: \"#eeeeee\",\r\n },\r\n});\r\n\r\nconst Table: React.FC<TableProps> = ({ children, style, cellHeight = 22 }) => (\r\n <TableContext.Provider value={{ cellHeight, textAlign: \"left\" }}>\r\n <View style={[styles.table, style]}>{children}</View>\r\n </TableContext.Provider>\r\n);\r\n\r\nconst Thead: React.FC<TheadProps> = ({\r\n children,\r\n style,\r\n textAlign = \"left\",\r\n}) => {\r\n const { cellHeight } = useContext(TableContext);\r\n\r\n return (\r\n <TableContext.Provider value={{ cellHeight, textAlign }}>\r\n <View style={[styles.thead, style]}>{children}</View>\r\n </TableContext.Provider>\r\n );\r\n};\r\n\r\nconst Tbody: React.FC<TableProps> = ({ children }) => {\r\n const rows = React.Children.toArray(children) as React.ReactElement<any>[];\r\n const count = rows.length;\r\n return (\r\n <>\r\n {rows.map((row, idx) =>\r\n React.cloneElement(row, {\r\n isLastRow: idx === count - 1,\r\n isOdd: idx % 2 === 1,\r\n })\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nconst Tr: React.FC<TableProps & { isLastRow?: boolean; isOdd?: boolean }> = ({\r\n children,\r\n style,\r\n isLastRow = false,\r\n isOdd = false,\r\n}) => {\r\n const elements = React.Children.toArray(\r\n children\r\n ) as React.ReactElement<CellProps>[];\r\n const count = elements.length;\r\n return (\r\n <View style={[styles.tr, style]}>\r\n {elements.map((child, idx) => {\r\n const isLast = idx === count - 1;\r\n const width = `${(100 / count).toFixed(2)}%`;\r\n return React.cloneElement(child, { width, isLast, isLastRow, isOdd });\r\n })}\r\n </View>\r\n );\r\n};\r\n\r\nconst Th: React.FC<CellProps> = ({\r\n children,\r\n style,\r\n width,\r\n height,\r\n colSpan,\r\n isLast = false,\r\n isLastRow = false,\r\n textAlign: propTextAlign,\r\n}) => {\r\n const { cellHeight, textAlign: contextTextAlign } = useContext(TableContext);\r\n\r\n // Usar textAlign del prop si está definido, sino el del contexto\r\n const finalTextAlign = propTextAlign || contextTextAlign || \"left\";\r\n\r\n const baseWidth =\r\n typeof width === \"string\" && colSpan\r\n ? `${(parseFloat(width) * colSpan).toFixed(2)}%`\r\n : width;\r\n\r\n const cellHeightValue = height !== undefined ? height : cellHeight;\r\n\r\n const borders = {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor: \"#000\",\r\n minHeight: cellHeightValue,\r\n };\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.textBold,\r\n {\r\n width: baseWidth,\r\n },\r\n borders,\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign }}>{children}</Text>\r\n </View>\r\n );\r\n};\r\n\r\nconst Td: React.FC<CellProps> = ({\r\n children,\r\n style,\r\n width,\r\n height,\r\n colSpan,\r\n isLast = false,\r\n isLastRow = false,\r\n isOdd = false,\r\n textAlign: propTextAlign,\r\n}) => {\r\n const { cellHeight, textAlign: contextTextAlign } = useContext(TableContext);\r\n\r\n // Usar textAlign del prop si está definido, sino el del contexto, sino 'left'\r\n const finalTextAlign = propTextAlign || contextTextAlign || \"left\";\r\n\r\n const baseWidth =\r\n typeof width === \"string\" && colSpan\r\n ? `${(parseFloat(width) * colSpan).toFixed(2)}%`\r\n : width;\r\n\r\n const cellHeightValue = height !== undefined ? height : cellHeight;\r\n\r\n const borders = {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor: \"#000\",\r\n minHeight: cellHeightValue,\r\n };\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.text,\r\n isOdd && styles.zebraOdd,\r\n {\r\n width: baseWidth,\r\n },\r\n borders,\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign }}>{children}</Text>\r\n </View>\r\n );\r\n};\r\n\r\nexport { Table, Thead, Tbody, Tr, Th, Td };\r\n","import React from \"react\"\r\nimport { View, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ContainerProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface RowProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface ColProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n width: \"100%\",\r\n paddingHorizontal: 20,\r\n },\r\n row: {\r\n flexDirection: \"row\",\r\n flexWrap: \"wrap\",\r\n marginHorizontal: -5,\r\n },\r\n col: {\r\n paddingHorizontal: 5,\r\n },\r\n col1: { width: \"8.33%\" },\r\n col2: { width: \"16.66%\" },\r\n col3: { width: \"25%\" },\r\n col4: { width: \"33.33%\" },\r\n col5: { width: \"41.66%\" },\r\n col6: { width: \"50%\" },\r\n col7: { width: \"58.33%\" },\r\n col8: { width: \"66.66%\" },\r\n col9: { width: \"75%\" },\r\n col10: { width: \"83.33%\" },\r\n col11: { width: \"91.66%\" },\r\n col12: { width: \"100%\" },\r\n})\r\n\r\nexport const Container: React.FC<ContainerProps> = ({ children, style }) => {\r\n return <View style={[styles.container, style]}>{children}</View>\r\n}\r\n\r\nexport const Row: React.FC<RowProps> = ({ children, style }) => {\r\n return <View style={[styles.row, style]}>{children}</View>\r\n}\r\n\r\nexport const Col1: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col1, style]}>{children}</View>\r\n}\r\n\r\nexport const Col2: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col2, style]}>{children}</View>\r\n}\r\n\r\nexport const Col3: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col3, style]}>{children}</View>\r\n}\r\n\r\nexport const Col4: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col4, style]}>{children}</View>\r\n}\r\n\r\nexport const Col5: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col5, style]}>{children}</View>\r\n}\r\n\r\nexport const Col6: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col6, style]}>{children}</View>\r\n}\r\n\r\nexport const Col7: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col7, style]}>{children}</View>\r\n}\r\n\r\nexport const Col8: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col8, style]}>{children}</View>\r\n}\r\n\r\nexport const Col9: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col9, style]}>{children}</View>\r\n}\r\n\r\nexport const Col10: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col10, style]}>{children}</View>\r\n}\r\n\r\nexport const Col11: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col11, style]}>{children}</View>\r\n}\r\n\r\nexport const Col12: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col12, style]}>{children}</View>\r\n}\r\n\r\n","import QRCode from \"qrcode\"\r\n\r\ninterface QROptions {\r\n value: string\r\n size?: number\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n logoImage?: string\r\n logoWidth?: number\r\n logoHeight?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nexport const generateQRAsBase64 = async ({\r\n value,\r\n size = 150,\r\n colorDark = \"#000000\",\r\n colorLight = \"#ffffff\",\r\n margin = 0,\r\n errorCorrectionLevel = \"M\",\r\n}: QROptions): Promise<string> => {\r\n try {\r\n // Configuración para QRCode\r\n const options = {\r\n errorCorrectionLevel: errorCorrectionLevel,\r\n type: \"image/png\" as const,\r\n quality: 0.92,\r\n margin: margin,\r\n color: {\r\n dark: colorDark,\r\n light: colorLight,\r\n },\r\n width: size,\r\n }\r\n\r\n // Generar el código QR como base64\r\n const qrDataUrl = QRCode.toDataURL(value, options)\r\n return qrDataUrl\r\n } catch (error) {\r\n console.error(\"Error generando QR:\", error)\r\n return \"\"\r\n }\r\n}\r\n\r\n// Función para añadir un logo al QR generado\r\nexport const addLogoToQR = async (\r\n qrDataUrl: string,\r\n logoUrl: string,\r\n logoWidth: number,\r\n logoHeight: number,\r\n): Promise<string> => {\r\n return new Promise(async (resolve) => {\r\n if (!qrDataUrl || !logoUrl) {\r\n resolve(qrDataUrl)\r\n return\r\n }\r\n\r\n try {\r\n const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\r\n let canvas: any;\r\n let ctx: any;\r\n let ImageConstructor: any;\r\n\r\n if (isBrowser) {\r\n canvas = document.createElement(\"canvas\")\r\n ctx = canvas.getContext(\"2d\")\r\n ImageConstructor = window.Image;\r\n } else {\r\n // Node environment\r\n try {\r\n // Use dynamic imports to avoid bundling canvas in browser build if possible\r\n // although typically 'canvas' is excluded from browser bundles or shimmed.\r\n const { createCanvas, Image } = await import('canvas');\r\n canvas = createCanvas(100, 100); // Initial size, will be resized\r\n ctx = canvas.getContext(\"2d\");\r\n ImageConstructor = Image;\r\n } catch (e) {\r\n console.error(\"Canvas not available in Node environment for addLogoToQR\", e);\r\n resolve(qrDataUrl);\r\n return;\r\n }\r\n }\r\n\r\n if (!ctx) {\r\n resolve(qrDataUrl)\r\n return\r\n }\r\n\r\n // Cargar la imagen del QR\r\n const qrImage = new ImageConstructor()\r\n // crossOrigin is only needed in browser usually, but node-canvas might support/ignore it\r\n if (isBrowser) qrImage.crossOrigin = \"anonymous\"\r\n \r\n qrImage.onload = () => {\r\n // Establecer el tamaño del canvas\r\n canvas.width = qrImage.width\r\n canvas.height = qrImage.height\r\n\r\n // Dibujar el QR en el canvas\r\n ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height)\r\n\r\n // Cargar el logo\r\n const logoImage = new ImageConstructor()\r\n if (isBrowser) logoImage.crossOrigin = \"anonymous\"\r\n \r\n logoImage.onload = () => {\r\n // Calcular la posición central para el logo\r\n const x = (canvas.width - logoWidth) / 2\r\n const y = (canvas.height - logoHeight) / 2\r\n\r\n // Dibujar un fondo blanco para el logo (opcional)\r\n ctx.fillStyle = \"#FFFFFF\"\r\n ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10)\r\n\r\n // Dibujar el logo\r\n ctx.drawImage(logoImage, x, y, logoWidth, logoHeight)\r\n\r\n // Convertir el canvas a base64\r\n const finalQrDataUrl = canvas.toDataURL(\"image/png\")\r\n resolve(finalQrDataUrl)\r\n }\r\n\r\n logoImage.onerror = (err: any) => {\r\n console.error(\"Error cargando el logo:\", err)\r\n resolve(qrDataUrl) // Devolver el QR sin logo en caso de error\r\n }\r\n\r\n logoImage.src = logoUrl\r\n }\r\n\r\n qrImage.onerror = (err: any) => {\r\n console.error(\"Error cargando el QR:\", err)\r\n resolve(\"\")\r\n }\r\n\r\n qrImage.src = qrDataUrl\r\n } catch (error) {\r\n console.error(\"Error procesando el QR con logo:\", error)\r\n resolve(qrDataUrl) // Devolver el QR sin logo en caso de error\r\n }\r\n })\r\n}\r\n","\"use client\"\r\n\r\nimport React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\nimport { useEffect, useState } from \"react\"\r\nimport { generateQRAsBase64, addLogoToQR } from \"./QRGenerator\"\r\n\r\n// Define the props for the QR component\r\ninterface QRProps {\r\n value: string\r\n size?: number\r\n style?: any\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n logo?: string\r\n logoWidth?: number\r\n logoHeight?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n qrContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n margin: 10,\r\n },\r\n})\r\n\r\n// Mapa para convertir niveles de corrección numéricos a letras\r\nconst errorLevelMap: Record<number, \"L\" | \"M\" | \"Q\" | \"H\"> = {\r\n 0: \"L\",\r\n 1: \"M\",\r\n 2: \"Q\",\r\n 3: \"H\",\r\n}\r\n\r\n// Este componente funciona con React PDF\r\nconst QR: React.FC<QRProps> = ({\r\n value,\r\n size = 150,\r\n style,\r\n colorDark = \"#000000\",\r\n colorLight = \"#ffffff\",\r\n margin = 0,\r\n logo = \"\",\r\n logoWidth = 30,\r\n logoHeight = 30,\r\n errorCorrectionLevel = logo ? \"H\" : \"M\",\r\n}) => {\r\n const [qrDataUrl, setQrDataUrl] = useState<string>(\"\")\r\n\r\n // Generar el código QR cuando el componente se monta o cuando cambian las props\r\n useEffect(() => {\r\n const generateQR = async () => {\r\n try {\r\n // Primero generamos el QR básico\r\n const baseQrDataUrl = await generateQRAsBase64({\r\n value,\r\n size,\r\n colorDark,\r\n colorLight,\r\n margin,\r\n errorCorrectionLevel:\r\n typeof errorCorrectionLevel === \"number\"\r\n ? errorLevelMap[errorCorrectionLevel] || \"M\"\r\n : errorCorrectionLevel,\r\n })\r\n\r\n // Si hay un logo, lo añadimos al QR\r\n if (logo && logoWidth && logoHeight) {\r\n const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight)\r\n setQrDataUrl(qrWithLogo)\r\n } else {\r\n setQrDataUrl(baseQrDataUrl)\r\n }\r\n } catch (error) {\r\n console.error(\"Error generando QR:\", error)\r\n // En caso de error, generamos un QR básico usando una API externa\r\n const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(\r\n value,\r\n )}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace(\"#\", \"\"))}&bgcolor=${encodeURIComponent(\r\n colorLight.replace(\"#\", \"\"),\r\n )}`\r\n setQrDataUrl(fallbackUrl)\r\n }\r\n }\r\n\r\n generateQR()\r\n }, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel])\r\n\r\n // Mostrar un QR de respaldo mientras se genera el QR personalizado\r\n const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(\r\n value,\r\n )}&size=${size}x${size}`\r\n\r\n return (\r\n <View style={[styles.qrContainer, style]}>\r\n <Image src={qrDataUrl || fallbackUrl} style={{ width: size, height: size }} />\r\n </View>\r\n )\r\n}\r\n\r\nexport default QR\r\n\r\n","import { generateQRAsBase64 } from \"./QRGenerator\"\r\n\r\nexport interface QRV2Options {\r\n value: string\r\n width?: number\r\n height?: number\r\n image?: string\r\n dotsOptions?: {\r\n color?: string\r\n type?: \"rounded\" | \"dots\" | \"classy\" | \"classy-rounded\" | \"square\" | \"extra-rounded\"\r\n }\r\n backgroundOptions?: {\r\n color?: string\r\n }\r\n imageOptions?: {\r\n crossOrigin?: string\r\n margin?: number\r\n imageSize?: number // 0-1 (e.g., 0.4)\r\n }\r\n cornersSquareOptions?: {\r\n type?: \"dot\" | \"square\" | \"extra-rounded\"\r\n color?: string\r\n }\r\n cornersDotOptions?: {\r\n type?: \"dot\" | \"square\"\r\n color?: string\r\n }\r\n // Fallback options\r\n fallbackColorDark?: string\r\n fallbackColorLight?: string\r\n fallbackMargin?: number\r\n fallbackErrorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nexport const generateQRV2AsBase64 = async (options: QRV2Options): Promise<string> => {\r\n try {\r\n const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\r\n \r\n let QRCodeStylingConstructor: any;\r\n let extraOptions = {};\r\n\r\n if (isBrowser) {\r\n // Dynamic import for browser\r\n try {\r\n const mod = await import('qr-code-styling');\r\n QRCodeStylingConstructor = mod.default || mod;\r\n } catch (e) {\r\n console.error(\"Failed to load qr-code-styling in browser\", e);\r\n throw e;\r\n }\r\n } else {\r\n // Node environment\r\n // We use variable names to prevent bundlers (like Vite) from analyzing/bundling these dependencies\r\n // when building for the browser.\r\n const jsdomName = \"jsdom\";\r\n const canvasName = \"canvas\";\r\n const qrCommonName = \"qr-code-styling/lib/qr-code-styling.common.js\";\r\n \r\n try {\r\n const [jsdomMod, canvasMod, qrCommonMod] = await Promise.all([\r\n import(/* @vite-ignore */ jsdomName),\r\n import(/* @vite-ignore */ canvasName),\r\n import(/* @vite-ignore */ qrCommonName)\r\n ]);\r\n\r\n const { JSDOM } = jsdomMod;\r\n // canvas might be default export or named export depending on version/bundling\r\n const nodeCanvas = canvasMod.default || canvasMod;\r\n const { QRCodeStyling } = qrCommonMod;\r\n\r\n QRCodeStylingConstructor = QRCodeStyling;\r\n extraOptions = {\r\n jsdom: JSDOM,\r\n nodeCanvas: nodeCanvas\r\n };\r\n } catch (e) {\r\n console.error(\"Failed to load Node dependencies for QR generation\", e);\r\n throw e;\r\n }\r\n }\r\n\r\n const width = typeof options.width === \"number\" && isFinite(options.width) ? Math.round(options.width) : 300;\r\n const height = typeof options.height === \"number\" && isFinite(options.height) ? Math.round(options.height) : 300;\r\n \r\n\r\n const qrOptions = {\r\n width,\r\n height,\r\n data: options.value,\r\n image: options.image,\r\n dotsOptions: options.dotsOptions,\r\n backgroundOptions: {\r\n // Default to white background if not specified to prevent transparency issues\r\n // The \"blue stripe\" or weird artifacts can happen if the background is transparent or handled incorrectly\r\n color: options.backgroundOptions?.color || \"#ffffff\",\r\n ...options.backgroundOptions\r\n },\r\n imageOptions: {\r\n crossOrigin: \"anonymous\",\r\n margin: typeof options.imageOptions?.margin === \"number\" && isFinite(options.imageOptions.margin) ? options.imageOptions.margin : 0,\r\n saveAsBlob: true,\r\n imageSize: typeof options.imageOptions?.imageSize === \"number\" && isFinite(options.imageOptions.imageSize)\r\n ? Math.max(0, Math.min(1, options.imageOptions.imageSize))\r\n : 0.4,\r\n },\r\n cornersSquareOptions: options.cornersSquareOptions,\r\n cornersDotOptions: options.cornersDotOptions,\r\n }\r\n\r\n // @ts-ignore\r\n const qrCodeImage = new QRCodeStylingConstructor({\r\n type: \"png\", // Force PNG type\r\n ...extraOptions,\r\n ...qrOptions,\r\n })\r\n\r\n const rawData = await qrCodeImage.getRawData(\"png\")\r\n \r\n if (!rawData) throw new Error(\"Failed to generate raw data from qr-code-styling\")\r\n\r\n // Handle Blob (Browser) vs Buffer (Node)\r\n if (isBrowser) {\r\n if (rawData instanceof Blob) {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => {\r\n if (typeof reader.result === 'string') {\r\n resolve(reader.result);\r\n } else {\r\n reject(new Error(\"Failed to convert blob to base64\"));\r\n }\r\n };\r\n reader.onerror = reject;\r\n reader.readAsDataURL(rawData);\r\n });\r\n } else {\r\n // Sometimes in browser it might return something else if configured differently?\r\n // But usually Blob.\r\n console.warn(\"Unexpected rawData type in browser:\", rawData);\r\n }\r\n } \r\n \r\n // Node environment usually returns Buffer\r\n if (typeof Buffer !== 'undefined' && Buffer.isBuffer(rawData)) {\r\n return `data:image/png;base64,${rawData.toString(\"base64\")}`;\r\n }\r\n \r\n // Fallback if type is unexpected\r\n // Try to handle if it's a blob-like object in Node (unlikely but possible with polyfills)\r\n throw new Error(`Unexpected raw data type: ${typeof rawData}`);\r\n\r\n } catch (error) {\r\n console.error(\"Error generating QR V2, falling back to V1:\", error)\r\n \r\n // Fallback to existing implementation\r\n return generateQRAsBase64({\r\n value: options.value,\r\n size: options.width,\r\n colorDark: options.fallbackColorDark || options.dotsOptions?.color,\r\n colorLight: options.fallbackColorLight || options.backgroundOptions?.color,\r\n margin: options.fallbackMargin || 0,\r\n errorCorrectionLevel: options.fallbackErrorCorrectionLevel || \"M\",\r\n })\r\n }\r\n}\r\n","\"use client\"\r\n\r\nimport React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\nimport { generateQRV2AsBase64, type QRV2Options } from \"./QRstyleGenerator\"\r\n\r\n// Define props\r\nexport interface QRV2Props {\r\n value: string\r\n size?: number\r\n style?: any\r\n image?: string\r\n dotsOptions?: QRV2Options[\"dotsOptions\"]\r\n backgroundOptions?: QRV2Options[\"backgroundOptions\"]\r\n imageOptions?: QRV2Options[\"imageOptions\"]\r\n cornersSquareOptions?: QRV2Options[\"cornersSquareOptions\"]\r\n cornersDotOptions?: QRV2Options[\"cornersDotOptions\"]\r\n // Fallback/Compatibility props\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n qrContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n})\r\n\r\nconst QRV2: React.FC<QRV2Props> = ({\r\n value,\r\n size = 300,\r\n style,\r\n image,\r\n dotsOptions,\r\n backgroundOptions,\r\n imageOptions,\r\n cornersSquareOptions,\r\n cornersDotOptions,\r\n colorDark,\r\n colorLight,\r\n margin,\r\n errorCorrectionLevel,\r\n}) => {\r\n return (\r\n <View style={[styles.qrContainer, style]}>\r\n {/* We pass a function that returns the promise/result or use the state if available. \r\n Actually, we can pass the promise directly to src! */}\r\n <Image \r\n style={{ width: size, height: size }} \r\n src={generateQRV2AsBase64({\r\n value,\r\n width: size,\r\n height: size,\r\n image,\r\n dotsOptions: dotsOptions || (colorDark ? { color: colorDark } : undefined),\r\n backgroundOptions: backgroundOptions || (colorLight ? { color: colorLight } : undefined),\r\n imageOptions: {\r\n ...imageOptions,\r\n margin: imageOptions?.margin !== undefined ? imageOptions.margin : margin\r\n },\r\n cornersSquareOptions,\r\n cornersDotOptions,\r\n fallbackColorDark: colorDark,\r\n fallbackColorLight: colorLight,\r\n fallbackMargin: margin,\r\n fallbackErrorCorrectionLevel: errorCorrectionLevel,\r\n })} \r\n />\r\n </View>\r\n )\r\n}\r\n\r\nexport default QRV2\r\n","import React from \"react\"\r\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ListProps {\r\n children: React.ReactNode\r\n style?: any\r\n start?: number // Para listas ordenadas, desde qué número empezar\r\n type?: \"disc\" | \"circle\" | \"square\" | \"decimal\" | \"lower-alpha\" | \"upper-alpha\" | \"lower-roman\" | \"upper-roman\"\r\n}\r\n\r\ninterface ListItemProps {\r\n children: React.ReactNode\r\n style?: any\r\n value?: number | string // Valor específico para este elemento de lista\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n ul: {\r\n marginBottom: 10,\r\n paddingLeft: 15,\r\n },\r\n ol: {\r\n marginBottom: 10,\r\n paddingLeft: 15,\r\n },\r\n li: {\r\n marginBottom: 5,\r\n flexDirection: \"row\",\r\n },\r\n bulletPoint: {\r\n width: 15,\r\n marginRight: 5,\r\n fontSize: 12,\r\n },\r\n itemContent: {\r\n flex: 1,\r\n },\r\n})\r\n\r\n// Función para generar marcadores de lista desordenada\r\nconst getBulletPoint = (type = \"disc\") => {\r\n switch (type) {\r\n case \"circle\":\r\n return \"○\"\r\n case \"square\":\r\n return \"■\"\r\n case \"disc\":\r\n default:\r\n return \"•\"\r\n }\r\n}\r\n\r\n// Función para generar marcadores de lista ordenada\r\nconst getOrderedMarker = (index: number, type = \"decimal\", start = 1) => {\r\n const actualIndex = start + index - 1\r\n\r\n switch (type) {\r\n case \"lower-alpha\":\r\n return String.fromCharCode(97 + (actualIndex % 26)) + \".\"\r\n case \"upper-alpha\":\r\n return String.fromCharCode(65 + (actualIndex % 26)) + \".\"\r\n case \"lower-roman\":\r\n return toRoman(actualIndex).toLowerCase() + \".\"\r\n case \"upper-roman\":\r\n return toRoman(actualIndex) + \".\"\r\n case \"decimal\":\r\n default:\r\n return actualIndex + \".\"\r\n }\r\n}\r\n\r\n// Función para convertir números a numerales romanos\r\nconst toRoman = (num: number): string => {\r\n if (num <= 0 || num > 3999) return String(num)\r\n\r\n const romanNumerals = [\r\n [\"\", \"I\", \"II\", \"III\", \"IV\", \"V\", \"VI\", \"VII\", \"VIII\", \"IX\"],\r\n [\"\", \"X\", \"XX\", \"XXX\", \"XL\", \"L\", \"LX\", \"LXX\", \"LXXX\", \"XC\"],\r\n [\"\", \"C\", \"CC\", \"CCC\", \"CD\", \"D\", \"DC\", \"DCC\", \"DCCC\", \"CM\"],\r\n [\"\", \"M\", \"MM\", \"MMM\"],\r\n ]\r\n\r\n return (\r\n romanNumerals[3][Math.floor(num / 1000)] +\r\n romanNumerals[2][Math.floor((num % 1000) / 100)] +\r\n romanNumerals[1][Math.floor((num % 100) / 10)] +\r\n romanNumerals[0][num % 10]\r\n )\r\n}\r\n\r\n// Componente de lista desordenada (UL)\r\nexport const UL: React.FC<ListProps> = ({ children, style, type = \"disc\" }) => {\r\n // Clonar los hijos para añadir el tipo de marcador\r\n const childrenWithBullets = React.Children.map(children, (child, index) => {\r\n if (React.isValidElement(child)) {\r\n return React.cloneElement(child as React.ReactElement<any>, {\r\n bulletType: type,\r\n isOrdered: false,\r\n index: index + 1,\r\n })\r\n }\r\n return child\r\n })\r\n\r\n return <View style={[styles.ul, style]}>{childrenWithBullets}</View>\r\n}\r\n\r\n// Componente de lista ordenada (OL)\r\nexport const OL: React.FC<ListProps> = ({ children, style, type = \"decimal\", start = 1 }) => {\r\n // Clonar los hijos para añadir el tipo de marcador y el índice\r\n const childrenWithNumbers = React.Children.map(children, (child, index) => {\r\n if (React.isValidElement(child)) {\r\n return React.cloneElement(child as React.ReactElement<any>, {\r\n bulletType: type,\r\n isOrdered: true,\r\n index: index + 1,\r\n start,\r\n })\r\n }\r\n return child\r\n })\r\n\r\n return <View style={[styles.ol, style]}>{childrenWithNumbers}</View>\r\n}\r\n\r\n// Componente de elemento de lista (LI)\r\nexport const LI: React.FC<\r\n ListItemProps & {\r\n bulletType?: string\r\n isOrdered?: boolean\r\n index?: number\r\n start?: number\r\n }\r\n> = ({ children, style, bulletType = \"disc\", isOrdered = false, index = 1, start = 1, value }) => {\r\n // Determinar el marcador a mostrar\r\n let marker\r\n if (isOrdered) {\r\n // Si se proporciona un valor específico, usarlo en lugar del índice\r\n const actualIndex = value !== undefined ? Number(value) : index\r\n marker = getOrderedMarker(actualIndex, bulletType, start)\r\n } else {\r\n marker = getBulletPoint(bulletType)\r\n }\r\n\r\n return (\r\n <View style={[styles.li, style]}>\r\n <Text style={styles.bulletPoint}>{marker}</Text>\r\n <View style={styles.itemContent}>{typeof children === \"string\" ? <Text>{children}</Text> : children}</View>\r\n </View>\r\n )\r\n}\r\n\r\n","import React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\n\r\ninterface ImgBgProps {\r\n src: string\r\n width?: number | string\r\n height?: number | string\r\n opacity?: number\r\n children?: React.ReactNode\r\n style?: any\r\n fixed?: boolean\r\n objectFit?: \"cover\" | \"contain\" | \"fill\" | \"none\" | \"scale-down\"\r\n objectPosition?: string // ej: \"center\", \"top\", \"left top\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n position: \"relative\",\r\n width: \"100%\",\r\n height: \"100%\",\r\n },\r\n background: {\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n },\r\n content: {\r\n position: \"relative\",\r\n },\r\n})\r\n\r\nconst ImgBg: React.FC<ImgBgProps> = ({\r\n src,\r\n width = \"100%\",\r\n height = \"100%\",\r\n opacity = 0.2,\r\n children,\r\n style,\r\n fixed = false,\r\n objectFit = \"cover\",\r\n objectPosition = \"center\",\r\n}) => {\r\n return (\r\n <View style={[styles.container, style]}>\r\n <Image\r\n src={src}\r\n style={[\r\n styles.background,\r\n { width, height, opacity, objectFit, objectPosition },\r\n ]}\r\n fixed={fixed}\r\n />\r\n <View style={styles.content}>{children}</View>\r\n </View>\r\n )\r\n}\r\n\r\nexport default ImgBg\r\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../frontend/src/components/core/basic/layout/Layout.tsx","../../../frontend/src/components/core/basic/Img.tsx","../../../frontend/src/components/core/basic/Position.tsx","../../../frontend/src/components/core/basic/Etiquetas.tsx","../../../frontend/src/components/core/basic/Tablet.tsx","../../../frontend/src/components/core/basic/Grid.tsx","../../../frontend/src/components/core/qr/QRGenerator.ts","../../../frontend/src/components/core/qr/QR.tsx","../../../frontend/src/components/core/qr/QRstyleGenerator.ts","../../../frontend/src/components/core/qr/QRstyle.tsx","../../../frontend/src/components/core/basic/Lista.tsx","../../../frontend/src/components/core/basic/ImgBg.tsx"],"names":["StyleSheet","createContext","generateQRAsBase64","value","size","colorDark","colorLight","margin","errorCorrectionLevel","options","QRCode","error","addLogoToQR","qrDataUrl","logoUrl","logoWidth","logoHeight","resolve","isBrowser","canvas","ctx","ImageConstructor","createCanvas","Image","e","qrImage","logoImage","x","y","finalQrDataUrl","err","styles","errorLevelMap","QR","style","logo","setQrDataUrl","useState","useEffect","baseQrDataUrl","qrWithLogo","fallbackUrl","jsx","View","QR_default","generateQRV2AsBase64","QRCodeStylingConstructor","extraOptions","mod","jsdomName","canvasName","qrCommonName","jsdomMod","canvasMod","qrCommonMod","JSDOM","nodeCanvas","QRCodeStyling","width","height","qrOptions","rawData","reject","reader","QRV2","image","dotsOptions","backgroundOptions","imageOptions","cornersSquareOptions","cornersDotOptions","QRstyle_default"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from \"react\"\r\nimport { Page, Document, StyleSheet, Text, View } from \"@react-pdf/renderer\"\r\n\r\nconst styles = StyleSheet.create({\r\n page: {\r\n backgroundColor: \"white\",\r\n padding: 30,\r\n\r\n fontSize: 14,\r\n },\r\n footer: {\r\n position: \"absolute\",\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n }\r\n})\r\n\r\ninterface LayoutProps {\r\n children: React.ReactNode\r\n size?: \"A0\" | \"A1\" | \"A2\" | \"A3\" | \"A4\" | \"A5\" | \"A6\" | \"A7\" | \"A8\" | \"A9\" | \"LETTER\" | \"LEGAL\" | \"TABLOID\"\r\n orientation?: \"vertical\" | \"horizontal\" | \"h\" | \"v\" | \"portrait\" | \"landscape\"\r\n backgroundColor?: string\r\n padding?: number\r\n margen?: \"apa\" | \"normal\" | \"estrecho\" | \"ancho\"\r\n style?: any\r\n pagination?: boolean\r\n footer?: React.ReactNode\r\n lines?: number\r\n rule?: boolean\r\n}\r\n\r\nconst Layout: React.FC<LayoutProps> = ({\r\n children,\r\n size = \"A4\",\r\n orientation = \"vertical\",\r\n backgroundColor = \"white\",\r\n padding = 30,\r\n margen = \"normal\",\r\n style = {},\r\n pagination = true,\r\n footer,\r\n lines = footer ? 2 : 1,\r\n rule = false,\r\n}) => {\r\n // Calculate footer height based on number of lines\r\n // Each line is approximately 20 points (considering font size and line height)\r\n const LINE_HEIGHT = 20\r\n const FOOTER_PADDING = 10\r\n const footerHeight = (lines * LINE_HEIGHT) + FOOTER_PADDING\r\n\r\n // Función para obtener márgenes según las normas APA y otros estándares\r\n const getMargins = (margen: string, pageSize: string) => {\r\n const normalizedSize = pageSize.toUpperCase()\r\n\r\n switch (margen) {\r\n case \"apa\":\r\n // Normas APA: 1 pulgada en todos los lados (72 puntos)\r\n if (normalizedSize === \"LETTER\" || normalizedSize === \"LEGAL\") {\r\n return {\r\n paddingTop: 72,\r\n paddingRight: 72,\r\n paddingBottom: 72,\r\n paddingLeft: 72\r\n }\r\n }\r\n // Para otros tamaños, usar equivalente proporcional\r\n return {\r\n paddingTop: 72,\r\n paddingRight: 72,\r\n paddingBottom: 72,\r\n paddingLeft: 72\r\n }\r\n\r\n case \"estrecho\":\r\n return {\r\n paddingTop: 36,\r\n paddingRight: 36,\r\n paddingBottom: 36,\r\n paddingLeft: 36\r\n }\r\n\r\n case \"ancho\":\r\n return {\r\n paddingTop: 108,\r\n paddingRight: 108,\r\n paddingBottom: 108,\r\n paddingLeft: 108\r\n }\r\n\r\n case \"normal\":\r\n default:\r\n return {\r\n paddingTop: padding,\r\n paddingRight: padding,\r\n paddingBottom: padding,\r\n paddingLeft: padding\r\n }\r\n }\r\n }\r\n\r\n // Validar y sanitizar props\r\n let safeSize = size\r\n let safeOrientation = orientation\r\n let safeBackgroundColor = backgroundColor\r\n\r\n let safeMargen = margen\r\n\r\n try {\r\n // Validar size\r\n const validSizes = [\"A0\", \"A1\", \"A2\", \"A3\", \"A4\", \"A5\", \"A6\", \"A7\", \"A8\", \"A9\", \"LETTER\", \"LEGAL\", \"TABLOID\"]\r\n if (typeof size === \"string\" && !validSizes.includes(size.toUpperCase())) {\r\n console.warn(`Invalid page size: ${size}. Using A4 as default.`)\r\n safeSize = \"A4\"\r\n }\r\n\r\n // Validar orientation\r\n const validOrientations = [\"vertical\", \"horizontal\", \"portrait\", \"landscape\", \"h\", \"v\"]\r\n const normalizedOrientation = typeof orientation === \"string\" ? orientation.toLowerCase() : \"vertical\"\r\n if (!validOrientations.includes(normalizedOrientation)) {\r\n console.warn(`Invalid orientation: ${orientation}. Using vertical as default.`)\r\n safeOrientation = \"vertical\"\r\n } else {\r\n // Mantener el valor original si es válido, respetando alias\r\n safeOrientation = orientation\r\n }\r\n\r\n // Validar backgroundColor\r\n if (typeof backgroundColor !== \"string\") {\r\n console.warn(`Invalid background color: ${backgroundColor}. Using white as default.`)\r\n safeBackgroundColor = \"white\"\r\n }\r\n\r\n // Validar margen\r\n const validMargins = [\"apa\", \"normal\", \"estrecho\", \"ancho\"]\r\n if (!validMargins.includes(margen)) {\r\n console.warn(`Invalid margin type: ${margen}. Using normal as default.`)\r\n safeMargen = \"normal\"\r\n }\r\n\r\n // Validar lines\r\n if (typeof lines !== \"number\" || lines < 1) {\r\n console.warn(`Invalid lines value: ${lines}. Using 1 as default.`)\r\n\r\n }\r\n } catch (e) {\r\n console.warn(\"Error processing props in Layout:\", e)\r\n }\r\n\r\n // Transform orientation from \"vertical\"/\"horizontal\" to \"portrait\"/\"landscape\"\r\n const transformOrientation = (orientation: \"vertical\" | \"horizontal\" | \"h\" | \"v\" | \"portrait\" | \"landscape\"): \"portrait\" | \"landscape\" => {\r\n switch (orientation) {\r\n case \"vertical\":\r\n case \"portrait\":\r\n case \"v\":\r\n return \"portrait\"\r\n case \"horizontal\":\r\n case \"landscape\":\r\n case \"h\":\r\n return \"landscape\"\r\n default:\r\n console.warn(`Unrecognized orientation: ${orientation}. Using portrait as default.`)\r\n return \"portrait\"\r\n }\r\n }\r\n\r\n // Function to calculate footer position based on size and orientation\r\n const getFooterPosition = (pageSize: string, orientation: \"portrait\" | \"landscape\", footerHeight: number) => {\r\n // Dimensions in millimeters according to ISO 216 standard\r\n const pageDimensions: Record<string, { width: number; height: number }> = {\r\n A0: { width: 841, height: 1189 },\r\n A1: { width: 594, height: 841 },\r\n A2: { width: 420, height: 594 },\r\n A3: { width: 297, height: 420 },\r\n A4: { width: 210, height: 297 },\r\n A5: { width: 148, height: 210 },\r\n A6: { width: 105, height: 148 },\r\n A7: { width: 74, height: 105 },\r\n A8: { width: 52, height: 74 },\r\n A9: { width: 37, height: 52 },\r\n LETTER: { width: 216, height: 279 },\r\n LEGAL: { width: 216, height: 356 },\r\n TABLOID: { width: 279, height: 432 },\r\n }\r\n\r\n // Convert mm to points (1mm = 2.834645669 points)\r\n const mmToPoints = 2.834645669\r\n\r\n const dimensions = pageDimensions[pageSize.toUpperCase()]\r\n if (!dimensions) {\r\n // A4 default in points\r\n return orientation === \"landscape\" ? 595 - footerHeight - 10 : 842 - footerHeight - 10\r\n }\r\n\r\n const heightInPoints = dimensions.height * mmToPoints\r\n const widthInPoints = dimensions.width * mmToPoints\r\n\r\n // Subtract footer height and additional margin\r\n return orientation === \"landscape\"\r\n ? widthInPoints - footerHeight - 10\r\n : heightInPoints - footerHeight - 10\r\n }\r\n\r\n const pdfOrientation = transformOrientation(safeOrientation)\r\n\r\n // Obtener márgenes según el tipo seleccionado\r\n const margins = getMargins(safeMargen, safeSize)\r\n\r\n // Calculate footer position based on calculated footer height\r\n const footerTop = getFooterPosition(safeSize, pdfOrientation, footerHeight)\r\n\r\n // Function to render grid (ruler)\r\n const renderGrid = () => {\r\n if (!rule) return null\r\n\r\n // 1 cm = 28.3465 points\r\n const cmToPoints = 28.3465\r\n\r\n // Get page dimensions in points\r\n const pageDimensions: Record<string, { width: number; height: number }> = {\r\n A0: { width: 841 * 2.834645669, height: 1189 * 2.834645669 },\r\n A1: { width: 594 * 2.834645669, height: 841 * 2.834645669 },\r\n A2: { width: 420 * 2.834645669, height: 594 * 2.834645669 },\r\n A3: { width: 297 * 2.834645669, height: 420 * 2.834645669 },\r\n A4: { width: 210 * 2.834645669, height: 297 * 2.834645669 },\r\n A5: { width: 148 * 2.834645669, height: 210 * 2.834645669 },\r\n A6: { width: 105 * 2.834645669, height: 148 * 2.834645669 },\r\n A7: { width: 74 * 2.834645669, height: 105 * 2.834645669 },\r\n A8: { width: 52 * 2.834645669, height: 74 * 2.834645669 },\r\n A9: { width: 37 * 2.834645669, height: 52 * 2.834645669 },\r\n LETTER: { width: 216 * 2.834645669, height: 279 * 2.834645669 },\r\n LEGAL: { width: 216 * 2.834645669, height: 356 * 2.834645669 },\r\n TABLOID: { width: 279 * 2.834645669, height: 432 * 2.834645669 },\r\n }\r\n\r\n const dimensions = pageDimensions[safeSize.toUpperCase()] || pageDimensions.A4\r\n const pageWidth = pdfOrientation === \"landscape\" ? dimensions.height : dimensions.width\r\n const pageHeight = pdfOrientation === \"landscape\" ? dimensions.width : dimensions.height\r\n\r\n const horizontalLines = []\r\n const verticalLines = []\r\n\r\n // Generate horizontal lines (every cm)\r\n for (let i = 0; i <= Math.ceil(pageHeight / cmToPoints); i++) {\r\n horizontalLines.push(\r\n <View\r\n key={`h-${i}`}\r\n style={{\r\n position: \"absolute\",\r\n top: i * cmToPoints,\r\n left: 0,\r\n right: 0,\r\n height: i % 5 === 0 ? 1 : 0.5,\r\n backgroundColor: i % 5 === 0 ? \"rgba(255, 0, 0, 0.8)\" : \"rgba(100, 100, 100, 0.5)\",\r\n }}\r\n />\r\n )\r\n }\r\n\r\n // Generate vertical lines (every cm)\r\n for (let i = 0; i <= Math.ceil(pageWidth / cmToPoints); i++) {\r\n verticalLines.push(\r\n <View\r\n key={`v-${i}`}\r\n style={{\r\n position: \"absolute\",\r\n left: i * cmToPoints,\r\n top: 0,\r\n bottom: 0,\r\n width: i % 5 === 0 ? 1 : 0.5,\r\n backgroundColor: i % 5 === 0 ? \"rgba(255, 0, 0, 0.8)\" : \"rgba(100, 100, 100, 0.5)\",\r\n }}\r\n />\r\n )\r\n }\r\n\r\n return (\r\n <View style={{ position: \"absolute\", top: 0, left: 0, right: 0, bottom: 0 }} fixed>\r\n {horizontalLines}\r\n {verticalLines}\r\n </View>\r\n )\r\n }\r\n\r\n const pageStyle = {\r\n ...styles.page,\r\n backgroundColor: safeBackgroundColor,\r\n paddingTop: (style?.paddingTop ?? style?.padding ?? margins.paddingTop),\r\n paddingRight: (style?.paddingRight ?? style?.padding ?? margins.paddingRight),\r\n paddingLeft: (style?.paddingLeft ?? style?.padding ?? margins.paddingLeft),\r\n paddingBottom: (style?.paddingBottom ?? style?.padding ?? margins.paddingBottom) + footerHeight,\r\n ...((() => { const { padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest } = style || {}; return rest })()),\r\n }\r\n\r\n const footerStyle = {\r\n ...styles.footer,\r\n top: footerTop,\r\n height: footerHeight,\r\n display: \"flex\" as const,\r\n flexDirection: \"column\" as const,\r\n justifyContent: \"center\" as const,\r\n alignItems: \"center\" as const,\r\n fontSize: 10,\r\n color: \"grey\"\r\n }\r\n\r\n return (\r\n <Document>\r\n <Page size={safeSize as any} orientation={pdfOrientation} style={pageStyle} wrap>\r\n {renderGrid()}\r\n <View style={{ paddingBottom: footerHeight }}>\r\n {children}\r\n </View>\r\n\r\n <View style={footerStyle} fixed>\r\n {footer && (footer)}\r\n {pagination && (\r\n <Text style={{ fontSize: footerStyle.fontSize }} render={({ pageNumber, totalPages }) => (\r\n `${pageNumber} / ${totalPages}`\r\n )} />\r\n )}\r\n </View>\r\n\r\n </Page>\r\n </Document>\r\n )\r\n}\r\n\r\nexport default Layout\r\n","import React from \"react\"\r\nimport { Image, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ImgProps {\r\n src?: string\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n image: {\r\n width: \"100%\",\r\n height: \"auto\",\r\n marginBottom: 14,\r\n },\r\n})\r\n\r\nconst Img: React.FC<ImgProps> = ({ src, style }) => {\r\n return <Image src={src} style={[styles.image, style]} />\r\n}\r\n\r\nexport default Img","import React from \"react\"\r\nimport { View, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface PositionProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n left: {\r\n textAlign: \"left\",\r\n },\r\n right: {\r\n textAlign: \"right\",\r\n },\r\n center: {\r\n textAlign: \"center\",\r\n },\r\n})\r\n\r\nconst Left: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.left, style]}>{children}</View>\r\n}\r\n\r\nconst Right: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.right, style]}>{children}</View>\r\n}\r\n\r\nconst Center: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.center, style]}>{children}</View>\r\n}\r\n\r\nexport { Left, Right, Center }\r\n\r\n","import React from \"react\"\r\nimport { Text, StyleSheet, Link, View } from \"@react-pdf/renderer\"\r\n\r\ninterface TextProps {\r\n children: React.ReactNode\r\n style?: any\r\n href?: string\r\n}\r\n\r\ninterface DivProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface HeaderProps {\r\n children: React.ReactNode\r\n style?: any\r\n fixed?: boolean\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n p: {\r\n fontSize: 12,\r\n marginBottom: 5,\r\n lineHeight: 1.2,\r\n },\r\n h1: {\r\n fontSize: 24,\r\n fontWeight: \"bold\",\r\n marginBottom: 12,\r\n },\r\n h2: {\r\n fontSize: 20,\r\n fontWeight: \"bold\",\r\n marginBottom: 10,\r\n },\r\n h3: {\r\n fontSize: 18,\r\n fontWeight: \"bold\",\r\n marginBottom: 8,\r\n },\r\n h4: {\r\n fontSize: 16,\r\n fontWeight: \"bold\",\r\n marginBottom: 6,\r\n },\r\n h5: {\r\n fontSize: 14,\r\n fontWeight: \"bold\",\r\n marginBottom: 4,\r\n },\r\n h6: {\r\n fontSize: 12,\r\n fontWeight: \"bold\",\r\n marginBottom: 0,\r\n },\r\n strong: {\r\n fontWeight: \"bold\",\r\n },\r\n em: {\r\n fontStyle: \"italic\",\r\n },\r\n u: {\r\n textDecoration: \"underline\",\r\n },\r\n small: {\r\n fontSize: 10,\r\n },\r\n blockquote: {\r\n marginLeft: 20,\r\n marginRight: 20,\r\n fontStyle: \"italic\",\r\n borderLeft: \"4px solid #ccc\",\r\n paddingLeft: 10,\r\n },\r\n mark: {\r\n backgroundColor: \"yellow\",\r\n },\r\n A: {\r\n color: \"#3d65fd\",\r\n textDecoration: \"none\",\r\n },\r\n br: {\r\n width: \"100%\",\r\n height: 1,\r\n marginTop: 6,\r\n marginBottom: 6,\r\n },\r\n header: {\r\n position: \"absolute\",\r\n top: 20,\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n fontSize: 10,\r\n paddingHorizontal: 40,\r\n },\r\n hr: {\r\n width: \"100%\",\r\n borderTop: \"1px solid #000\",\r\n marginTop: 6,\r\n marginBottom: 6,\r\n },\r\n})\r\n\r\nconst P: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.p, style]}>{children}</Text>\r\n}\r\n\r\nconst H1: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h1, style]}>{children}</Text>\r\n}\r\n\r\nconst H2: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h2, style]}>{children}</Text>\r\n}\r\n\r\nconst H3: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h3, style]}>{children}</Text>\r\n}\r\n\r\nconst H4: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h4, style]}>{children}</Text>\r\n}\r\n\r\nconst H5: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h5, style]}>{children}</Text>\r\n}\r\n\r\nconst H6: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h6, style]}>{children}</Text>\r\n}\r\n\r\nconst Strong: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.strong, style]}>{children}</Text>\r\n}\r\n\r\nconst Em: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.em, style]}>{children}</Text>\r\n}\r\n\r\nconst U: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.u, style]}>{children}</Text>\r\n}\r\n\r\nconst Small: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.small, style]}>{children}</Text>\r\n}\r\n\r\nconst Blockquote: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.blockquote, style]}>{children}</Text>\r\n}\r\n\r\nconst Mark: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.mark, style]}>{children}</Text>\r\n}\r\n\r\nconst A: React.FC<TextProps> = ({ children, style, href }) => {\r\n return (\r\n <Link src={href} style={[styles.A, style]}>\r\n {children}\r\n </Link>\r\n )\r\n}\r\n\r\nconst BR: React.FC<{ style?: any }> = ({ style }) => {\r\n return <Text style={[styles.br, style]}>{\"\\n\"}</Text>\r\n}\r\n\r\nconst HR: React.FC<{ style?: any }> = ({ style }) => {\r\n return <View style={[styles.hr, style]} />\r\n}\r\n\r\nconst Span: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[style]}>{children}</Text>\r\n}\r\n\r\nconst Div: React.FC<DivProps> = ({ children, style }) => {\r\n return <View style={style}>{children}</View>\r\n}\r\n\r\nexport { P, A, H1, H2, H3, H4, H5, H6, Strong, Em, U, Small, Blockquote, Mark, Span, BR, HR, Div }","import React, { createContext, useContext } from \"react\";\r\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\r\n\r\ninterface TableProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n cellHeight?: number;\r\n}\r\n\r\ninterface TheadProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}\r\n\r\ninterface CellProps {\r\n children?: React.ReactNode;\r\n style?: any;\r\n width?: string | number;\r\n height?: string | number;\r\n colSpan?: number;\r\n isLast?: boolean;\r\n isLastRow?: boolean;\r\n isOdd?: boolean;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}\r\n\r\n// Context para pasar cellHeight y textAlign a los componentes hijos\r\nconst TableContext = createContext<{\r\n cellHeight: number;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}>({\r\n cellHeight: 22,\r\n textAlign: \"left\",\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n table: {\r\n width: \"100%\",\r\n borderWidth: 1,\r\n borderColor: \"#000\",\r\n marginBottom: 20,\r\n },\r\n thead: {\r\n backgroundColor: \"#ccc\",\r\n },\r\n tr: {\r\n flexDirection: \"row\",\r\n },\r\n textBold: {\r\n fontSize: 10,\r\n fontWeight: \"bold\",\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n\r\n },\r\n text: {\r\n fontSize: 10,\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n\r\n },\r\n zebraOdd: {\r\n backgroundColor: \"#eeeeee\",\r\n },\r\n});\r\n\r\nconst Table: React.FC<TableProps> = ({ children, style, cellHeight = 22 }) => (\r\n <TableContext.Provider value={{ cellHeight, textAlign: \"left\" }}>\r\n <View style={[styles.table, style]}>{children}</View>\r\n </TableContext.Provider>\r\n);\r\n\r\nconst Thead: React.FC<TheadProps> = ({\r\n children,\r\n style,\r\n textAlign = \"left\",\r\n}) => {\r\n const { cellHeight } = useContext(TableContext);\r\n\r\n return (\r\n <TableContext.Provider value={{ cellHeight, textAlign }}>\r\n <View style={[styles.thead, style]}>{children}</View>\r\n </TableContext.Provider>\r\n );\r\n};\r\n\r\nconst Tbody: React.FC<TableProps> = ({ children }) => {\r\n const rows = React.Children.toArray(children) as React.ReactElement<any>[];\r\n const count = rows.length;\r\n return (\r\n <>\r\n {rows.map((row, idx) =>\r\n React.cloneElement(row, {\r\n isLastRow: idx === count - 1,\r\n isOdd: idx % 2 === 1,\r\n })\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nconst Tr: React.FC<TableProps & { isLastRow?: boolean; isOdd?: boolean }> = ({\r\n children,\r\n style,\r\n isLastRow = false,\r\n isOdd = false,\r\n}) => {\r\n const elements = React.Children.toArray(\r\n children\r\n ) as React.ReactElement<CellProps>[];\r\n const count = elements.length;\r\n return (\r\n <View style={[styles.tr, style]}>\r\n {elements.map((child, idx) => {\r\n const isLast = idx === count - 1;\r\n const width = `${(100 / count).toFixed(2)}%`;\r\n return React.cloneElement(child, { width, isLast, isLastRow, isOdd });\r\n })}\r\n </View>\r\n );\r\n};\r\n\r\nconst Th: React.FC<CellProps> = ({\r\n children,\r\n style,\r\n width,\r\n height,\r\n colSpan,\r\n isLast = false,\r\n isLastRow = false,\r\n textAlign: propTextAlign,\r\n}) => {\r\n const { cellHeight, textAlign: contextTextAlign } = useContext(TableContext);\r\n\r\n // Usar textAlign del prop si está definido, sino el del contexto\r\n const finalTextAlign = propTextAlign || contextTextAlign || \"left\";\r\n\r\n const baseWidth =\r\n typeof width === \"string\" && colSpan\r\n ? `${(parseFloat(width) * colSpan).toFixed(2)}%`\r\n : width;\r\n\r\n const cellHeightValue = height !== undefined ? height : cellHeight;\r\n\r\n const borders = {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor: \"#000\",\r\n minHeight: cellHeightValue,\r\n };\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.textBold,\r\n {\r\n width: baseWidth,\r\n },\r\n borders,\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign }}>{children}</Text>\r\n </View>\r\n );\r\n};\r\n\r\nconst Td: React.FC<CellProps> = ({\r\n children,\r\n style,\r\n width,\r\n height,\r\n colSpan,\r\n isLast = false,\r\n isLastRow = false,\r\n isOdd = false,\r\n textAlign: propTextAlign,\r\n}) => {\r\n const { cellHeight, textAlign: contextTextAlign } = useContext(TableContext);\r\n\r\n // Usar textAlign del prop si está definido, sino el del contexto, sino 'left'\r\n const finalTextAlign = propTextAlign || contextTextAlign || \"left\";\r\n\r\n const baseWidth =\r\n typeof width === \"string\" && colSpan\r\n ? `${(parseFloat(width) * colSpan).toFixed(2)}%`\r\n : width;\r\n\r\n const cellHeightValue = height !== undefined ? height : cellHeight;\r\n\r\n const borders = {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor: \"#000\",\r\n minHeight: cellHeightValue,\r\n };\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.text,\r\n isOdd && styles.zebraOdd,\r\n {\r\n width: baseWidth,\r\n },\r\n borders,\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign }}>{children}</Text>\r\n </View>\r\n );\r\n};\r\n\r\nexport { Table, Thead, Tbody, Tr, Th, Td };\r\n","import React from \"react\"\r\nimport { View, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ContainerProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface RowProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface ColProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n width: \"100%\",\r\n },\r\n row: {\r\n flexDirection: \"row\",\r\n flexWrap: \"wrap\",\r\n },\r\n\r\n col1: { width: \"8.33%\" },\r\n col2: { width: \"16.66%\" },\r\n col3: { width: \"25%\" },\r\n col4: { width: \"33.33%\" },\r\n col5: { width: \"41.66%\" },\r\n col6: { width: \"50%\" },\r\n col7: { width: \"58.33%\" },\r\n col8: { width: \"66.66%\" },\r\n col9: { width: \"75%\" },\r\n col10: { width: \"83.33%\" },\r\n col11: { width: \"91.66%\" },\r\n col12: { width: \"100%\" },\r\n})\r\n\r\nexport const Container: React.FC<ContainerProps> = ({ children, style }) => {\r\n return <View style={[styles.container, style]}>{children}</View>\r\n}\r\n\r\nexport const Row: React.FC<RowProps> = ({ children, style }) => {\r\n return <View style={[styles.row, style]}>{children}</View>\r\n}\r\n\r\nexport const Col1: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col1, style]}>{children}</View>\r\n}\r\n\r\nexport const Col2: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col2, style]}>{children}</View>\r\n}\r\n\r\nexport const Col3: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col3, style]}>{children}</View>\r\n}\r\n\r\nexport const Col4: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col4, style]}>{children}</View>\r\n}\r\n\r\nexport const Col5: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col5, style]}>{children}</View>\r\n}\r\n\r\nexport const Col6: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col6, style]}>{children}</View>\r\n}\r\n\r\nexport const Col7: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col7, style]}>{children}</View>\r\n}\r\n\r\nexport const Col8: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col8, style]}>{children}</View>\r\n}\r\n\r\nexport const Col9: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col9, style]}>{children}</View>\r\n}\r\n\r\nexport const Col10: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col10, style]}>{children}</View>\r\n}\r\n\r\nexport const Col11: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col11, style]}>{children}</View>\r\n}\r\n\r\nexport const Col12: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col12, style]}>{children}</View>\r\n}\r\n\r\n","import QRCode from \"qrcode\"\r\n\r\ninterface QROptions {\r\n value: string\r\n size?: number\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n logoImage?: string\r\n logoWidth?: number\r\n logoHeight?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nexport const generateQRAsBase64 = async ({\r\n value,\r\n size = 150,\r\n colorDark = \"#000000\",\r\n colorLight = \"#ffffff\",\r\n margin = 0,\r\n errorCorrectionLevel = \"M\",\r\n}: QROptions): Promise<string> => {\r\n try {\r\n // Configuración para QRCode\r\n const options = {\r\n errorCorrectionLevel: errorCorrectionLevel,\r\n type: \"image/png\" as const,\r\n quality: 0.92,\r\n margin: margin,\r\n color: {\r\n dark: colorDark,\r\n light: colorLight,\r\n },\r\n width: size,\r\n }\r\n\r\n // Generar el código QR como base64\r\n const qrDataUrl = QRCode.toDataURL(value, options)\r\n return qrDataUrl\r\n } catch (error) {\r\n console.error(\"Error generando QR:\", error)\r\n return \"\"\r\n }\r\n}\r\n\r\n// Función para añadir un logo al QR generado\r\nexport const addLogoToQR = async (\r\n qrDataUrl: string,\r\n logoUrl: string,\r\n logoWidth: number,\r\n logoHeight: number,\r\n): Promise<string> => {\r\n return new Promise(async (resolve) => {\r\n if (!qrDataUrl || !logoUrl) {\r\n resolve(qrDataUrl)\r\n return\r\n }\r\n\r\n try {\r\n const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\r\n let canvas: any;\r\n let ctx: any;\r\n let ImageConstructor: any;\r\n\r\n if (isBrowser) {\r\n canvas = document.createElement(\"canvas\")\r\n ctx = canvas.getContext(\"2d\")\r\n ImageConstructor = window.Image;\r\n } else {\r\n // Node environment\r\n try {\r\n // Use dynamic imports to avoid bundling canvas in browser build if possible\r\n // although typically 'canvas' is excluded from browser bundles or shimmed.\r\n const { createCanvas, Image } = await import('canvas');\r\n canvas = createCanvas(100, 100); // Initial size, will be resized\r\n ctx = canvas.getContext(\"2d\");\r\n ImageConstructor = Image;\r\n } catch (e) {\r\n console.error(\"Canvas not available in Node environment for addLogoToQR\", e);\r\n resolve(qrDataUrl);\r\n return;\r\n }\r\n }\r\n\r\n if (!ctx) {\r\n resolve(qrDataUrl)\r\n return\r\n }\r\n\r\n // Cargar la imagen del QR\r\n const qrImage = new ImageConstructor()\r\n // crossOrigin is only needed in browser usually, but node-canvas might support/ignore it\r\n if (isBrowser) qrImage.crossOrigin = \"anonymous\"\r\n \r\n qrImage.onload = () => {\r\n // Establecer el tamaño del canvas\r\n canvas.width = qrImage.width\r\n canvas.height = qrImage.height\r\n\r\n // Dibujar el QR en el canvas\r\n ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height)\r\n\r\n // Cargar el logo\r\n const logoImage = new ImageConstructor()\r\n if (isBrowser) logoImage.crossOrigin = \"anonymous\"\r\n \r\n logoImage.onload = () => {\r\n // Calcular la posición central para el logo\r\n const x = (canvas.width - logoWidth) / 2\r\n const y = (canvas.height - logoHeight) / 2\r\n\r\n // Dibujar un fondo blanco para el logo (opcional)\r\n ctx.fillStyle = \"#FFFFFF\"\r\n ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10)\r\n\r\n // Dibujar el logo\r\n ctx.drawImage(logoImage, x, y, logoWidth, logoHeight)\r\n\r\n // Convertir el canvas a base64\r\n const finalQrDataUrl = canvas.toDataURL(\"image/png\")\r\n resolve(finalQrDataUrl)\r\n }\r\n\r\n logoImage.onerror = (err: any) => {\r\n console.error(\"Error cargando el logo:\", err)\r\n resolve(qrDataUrl) // Devolver el QR sin logo en caso de error\r\n }\r\n\r\n logoImage.src = logoUrl\r\n }\r\n\r\n qrImage.onerror = (err: any) => {\r\n console.error(\"Error cargando el QR:\", err)\r\n resolve(\"\")\r\n }\r\n\r\n qrImage.src = qrDataUrl\r\n } catch (error) {\r\n console.error(\"Error procesando el QR con logo:\", error)\r\n resolve(qrDataUrl) // Devolver el QR sin logo en caso de error\r\n }\r\n })\r\n}\r\n","\"use client\"\r\n\r\nimport React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\nimport { useEffect, useState } from \"react\"\r\nimport { generateQRAsBase64, addLogoToQR } from \"./QRGenerator\"\r\n\r\n// Define the props for the QR component\r\ninterface QRProps {\r\n value: string\r\n size?: number\r\n style?: any\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n logo?: string\r\n logoWidth?: number\r\n logoHeight?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n qrContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n margin: 10,\r\n },\r\n})\r\n\r\n// Mapa para convertir niveles de corrección numéricos a letras\r\nconst errorLevelMap: Record<number, \"L\" | \"M\" | \"Q\" | \"H\"> = {\r\n 0: \"L\",\r\n 1: \"M\",\r\n 2: \"Q\",\r\n 3: \"H\",\r\n}\r\n\r\n// Este componente funciona con React PDF\r\nconst QR: React.FC<QRProps> = ({\r\n value,\r\n size = 150,\r\n style,\r\n colorDark = \"#000000\",\r\n colorLight = \"#ffffff\",\r\n margin = 0,\r\n logo = \"\",\r\n logoWidth = 30,\r\n logoHeight = 30,\r\n errorCorrectionLevel = logo ? \"H\" : \"M\",\r\n}) => {\r\n const [qrDataUrl, setQrDataUrl] = useState<string>(\"\")\r\n\r\n // Generar el código QR cuando el componente se monta o cuando cambian las props\r\n useEffect(() => {\r\n const generateQR = async () => {\r\n try {\r\n // Primero generamos el QR básico\r\n const baseQrDataUrl = await generateQRAsBase64({\r\n value,\r\n size,\r\n colorDark,\r\n colorLight,\r\n margin,\r\n errorCorrectionLevel:\r\n typeof errorCorrectionLevel === \"number\"\r\n ? errorLevelMap[errorCorrectionLevel] || \"M\"\r\n : errorCorrectionLevel,\r\n })\r\n\r\n // Si hay un logo, lo añadimos al QR\r\n if (logo && logoWidth && logoHeight) {\r\n const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight)\r\n setQrDataUrl(qrWithLogo)\r\n } else {\r\n setQrDataUrl(baseQrDataUrl)\r\n }\r\n } catch (error) {\r\n console.error(\"Error generando QR:\", error)\r\n // En caso de error, generamos un QR básico usando una API externa\r\n const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(\r\n value,\r\n )}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace(\"#\", \"\"))}&bgcolor=${encodeURIComponent(\r\n colorLight.replace(\"#\", \"\"),\r\n )}`\r\n setQrDataUrl(fallbackUrl)\r\n }\r\n }\r\n\r\n generateQR()\r\n }, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel])\r\n\r\n // Mostrar un QR de respaldo mientras se genera el QR personalizado\r\n const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(\r\n value,\r\n )}&size=${size}x${size}`\r\n\r\n return (\r\n <View style={[styles.qrContainer, style]}>\r\n <Image src={qrDataUrl || fallbackUrl} style={{ width: size, height: size }} />\r\n </View>\r\n )\r\n}\r\n\r\nexport default QR\r\n\r\n","import { generateQRAsBase64 } from \"./QRGenerator\"\r\n\r\nexport interface QRV2Options {\r\n value: string\r\n width?: number\r\n height?: number\r\n image?: string\r\n dotsOptions?: {\r\n color?: string\r\n type?: \"rounded\" | \"dots\" | \"classy\" | \"classy-rounded\" | \"square\" | \"extra-rounded\"\r\n }\r\n backgroundOptions?: {\r\n color?: string\r\n }\r\n imageOptions?: {\r\n crossOrigin?: string\r\n margin?: number\r\n imageSize?: number // 0-1 (e.g., 0.4)\r\n }\r\n cornersSquareOptions?: {\r\n type?: \"dot\" | \"square\" | \"extra-rounded\"\r\n color?: string\r\n }\r\n cornersDotOptions?: {\r\n type?: \"dot\" | \"square\"\r\n color?: string\r\n }\r\n // Fallback options\r\n fallbackColorDark?: string\r\n fallbackColorLight?: string\r\n fallbackMargin?: number\r\n fallbackErrorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nexport const generateQRV2AsBase64 = async (options: QRV2Options): Promise<string> => {\r\n try {\r\n const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\r\n \r\n let QRCodeStylingConstructor: any;\r\n let extraOptions = {};\r\n\r\n if (isBrowser) {\r\n // Dynamic import for browser\r\n try {\r\n const mod = await import('qr-code-styling');\r\n QRCodeStylingConstructor = mod.default || mod;\r\n } catch (e) {\r\n console.error(\"Failed to load qr-code-styling in browser\", e);\r\n throw e;\r\n }\r\n } else {\r\n // Node environment\r\n // We use variable names to prevent bundlers (like Vite) from analyzing/bundling these dependencies\r\n // when building for the browser.\r\n const jsdomName = \"jsdom\";\r\n const canvasName = \"canvas\";\r\n const qrCommonName = \"qr-code-styling/lib/qr-code-styling.common.js\";\r\n \r\n try {\r\n const [jsdomMod, canvasMod, qrCommonMod] = await Promise.all([\r\n import(/* @vite-ignore */ jsdomName),\r\n import(/* @vite-ignore */ canvasName),\r\n import(/* @vite-ignore */ qrCommonName)\r\n ]);\r\n\r\n const { JSDOM } = jsdomMod;\r\n // canvas might be default export or named export depending on version/bundling\r\n const nodeCanvas = canvasMod.default || canvasMod;\r\n const { QRCodeStyling } = qrCommonMod;\r\n\r\n QRCodeStylingConstructor = QRCodeStyling;\r\n extraOptions = {\r\n jsdom: JSDOM,\r\n nodeCanvas: nodeCanvas\r\n };\r\n } catch (e) {\r\n console.error(\"Failed to load Node dependencies for QR generation\", e);\r\n throw e;\r\n }\r\n }\r\n\r\n const width = typeof options.width === \"number\" && isFinite(options.width) ? Math.round(options.width) : 300;\r\n const height = typeof options.height === \"number\" && isFinite(options.height) ? Math.round(options.height) : 300;\r\n \r\n\r\n const qrOptions = {\r\n width,\r\n height,\r\n data: options.value,\r\n image: options.image,\r\n dotsOptions: options.dotsOptions,\r\n backgroundOptions: {\r\n // Default to white background if not specified to prevent transparency issues\r\n // The \"blue stripe\" or weird artifacts can happen if the background is transparent or handled incorrectly\r\n color: options.backgroundOptions?.color || \"#ffffff\",\r\n ...options.backgroundOptions\r\n },\r\n imageOptions: {\r\n crossOrigin: \"anonymous\",\r\n margin: typeof options.imageOptions?.margin === \"number\" && isFinite(options.imageOptions.margin) ? options.imageOptions.margin : 0,\r\n saveAsBlob: true,\r\n imageSize: typeof options.imageOptions?.imageSize === \"number\" && isFinite(options.imageOptions.imageSize)\r\n ? Math.max(0, Math.min(1, options.imageOptions.imageSize))\r\n : 0.4,\r\n },\r\n cornersSquareOptions: options.cornersSquareOptions,\r\n cornersDotOptions: options.cornersDotOptions,\r\n }\r\n\r\n // @ts-ignore\r\n const qrCodeImage = new QRCodeStylingConstructor({\r\n type: \"png\", // Force PNG type\r\n ...extraOptions,\r\n ...qrOptions,\r\n })\r\n\r\n const rawData = await qrCodeImage.getRawData(\"png\")\r\n \r\n if (!rawData) throw new Error(\"Failed to generate raw data from qr-code-styling\")\r\n\r\n // Handle Blob (Browser) vs Buffer (Node)\r\n if (isBrowser) {\r\n if (rawData instanceof Blob) {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => {\r\n if (typeof reader.result === 'string') {\r\n resolve(reader.result);\r\n } else {\r\n reject(new Error(\"Failed to convert blob to base64\"));\r\n }\r\n };\r\n reader.onerror = reject;\r\n reader.readAsDataURL(rawData);\r\n });\r\n } else {\r\n // Sometimes in browser it might return something else if configured differently?\r\n // But usually Blob.\r\n console.warn(\"Unexpected rawData type in browser:\", rawData);\r\n }\r\n } \r\n \r\n // Node environment usually returns Buffer\r\n if (typeof Buffer !== 'undefined' && Buffer.isBuffer(rawData)) {\r\n return `data:image/png;base64,${rawData.toString(\"base64\")}`;\r\n }\r\n \r\n // Fallback if type is unexpected\r\n // Try to handle if it's a blob-like object in Node (unlikely but possible with polyfills)\r\n throw new Error(`Unexpected raw data type: ${typeof rawData}`);\r\n\r\n } catch (error) {\r\n console.error(\"Error generating QR V2, falling back to V1:\", error)\r\n \r\n // Fallback to existing implementation\r\n return generateQRAsBase64({\r\n value: options.value,\r\n size: options.width,\r\n colorDark: options.fallbackColorDark || options.dotsOptions?.color,\r\n colorLight: options.fallbackColorLight || options.backgroundOptions?.color,\r\n margin: options.fallbackMargin || 0,\r\n errorCorrectionLevel: options.fallbackErrorCorrectionLevel || \"M\",\r\n })\r\n }\r\n}\r\n","\"use client\"\r\n\r\nimport React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\nimport { generateQRV2AsBase64, type QRV2Options } from \"./QRstyleGenerator\"\r\n\r\n// Define props\r\nexport interface QRV2Props {\r\n value: string\r\n size?: number\r\n style?: any\r\n image?: string\r\n dotsOptions?: QRV2Options[\"dotsOptions\"]\r\n backgroundOptions?: QRV2Options[\"backgroundOptions\"]\r\n imageOptions?: QRV2Options[\"imageOptions\"]\r\n cornersSquareOptions?: QRV2Options[\"cornersSquareOptions\"]\r\n cornersDotOptions?: QRV2Options[\"cornersDotOptions\"]\r\n // Fallback/Compatibility props\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n qrContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n})\r\n\r\nconst QRV2: React.FC<QRV2Props> = ({\r\n value,\r\n size = 300,\r\n style,\r\n image,\r\n dotsOptions,\r\n backgroundOptions,\r\n imageOptions,\r\n cornersSquareOptions,\r\n cornersDotOptions,\r\n colorDark,\r\n colorLight,\r\n margin,\r\n errorCorrectionLevel,\r\n}) => {\r\n return (\r\n <View style={[styles.qrContainer, style]}>\r\n {/* We pass a function that returns the promise/result or use the state if available. \r\n Actually, we can pass the promise directly to src! */}\r\n <Image \r\n style={{ width: size, height: size }} \r\n src={generateQRV2AsBase64({\r\n value,\r\n width: size,\r\n height: size,\r\n image,\r\n dotsOptions: dotsOptions || (colorDark ? { color: colorDark } : undefined),\r\n backgroundOptions: backgroundOptions || (colorLight ? { color: colorLight } : undefined),\r\n imageOptions: {\r\n ...imageOptions,\r\n margin: imageOptions?.margin !== undefined ? imageOptions.margin : margin\r\n },\r\n cornersSquareOptions,\r\n cornersDotOptions,\r\n fallbackColorDark: colorDark,\r\n fallbackColorLight: colorLight,\r\n fallbackMargin: margin,\r\n fallbackErrorCorrectionLevel: errorCorrectionLevel,\r\n })} \r\n />\r\n </View>\r\n )\r\n}\r\n\r\nexport default QRV2\r\n","import React from \"react\"\r\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ListProps {\r\n children: React.ReactNode\r\n style?: any\r\n start?: number // Para listas ordenadas, desde qué número empezar\r\n type?: \"disc\" | \"circle\" | \"square\" | \"decimal\" | \"lower-alpha\" | \"upper-alpha\" | \"lower-roman\" | \"upper-roman\"\r\n}\r\n\r\ninterface ListItemProps {\r\n children: React.ReactNode\r\n style?: any\r\n value?: number | string // Valor específico para este elemento de lista\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n ul: {\r\n marginBottom: 10,\r\n paddingLeft: 15,\r\n },\r\n ol: {\r\n marginBottom: 10,\r\n paddingLeft: 15,\r\n },\r\n li: {\r\n marginBottom: 5,\r\n flexDirection: \"row\",\r\n },\r\n bulletPoint: {\r\n width: 15,\r\n marginRight: 5,\r\n fontSize: 12,\r\n },\r\n itemContent: {\r\n flex: 1,\r\n },\r\n})\r\n\r\n// Función para generar marcadores de lista desordenada\r\nconst getBulletPoint = (type = \"disc\") => {\r\n switch (type) {\r\n case \"circle\":\r\n return \"○\"\r\n case \"square\":\r\n return \"■\"\r\n case \"disc\":\r\n default:\r\n return \"•\"\r\n }\r\n}\r\n\r\n// Función para generar marcadores de lista ordenada\r\nconst getOrderedMarker = (index: number, type = \"decimal\", start = 1) => {\r\n const actualIndex = start + index - 1\r\n\r\n switch (type) {\r\n case \"lower-alpha\":\r\n return String.fromCharCode(97 + (actualIndex % 26)) + \".\"\r\n case \"upper-alpha\":\r\n return String.fromCharCode(65 + (actualIndex % 26)) + \".\"\r\n case \"lower-roman\":\r\n return toRoman(actualIndex).toLowerCase() + \".\"\r\n case \"upper-roman\":\r\n return toRoman(actualIndex) + \".\"\r\n case \"decimal\":\r\n default:\r\n return actualIndex + \".\"\r\n }\r\n}\r\n\r\n// Función para convertir números a numerales romanos\r\nconst toRoman = (num: number): string => {\r\n if (num <= 0 || num > 3999) return String(num)\r\n\r\n const romanNumerals = [\r\n [\"\", \"I\", \"II\", \"III\", \"IV\", \"V\", \"VI\", \"VII\", \"VIII\", \"IX\"],\r\n [\"\", \"X\", \"XX\", \"XXX\", \"XL\", \"L\", \"LX\", \"LXX\", \"LXXX\", \"XC\"],\r\n [\"\", \"C\", \"CC\", \"CCC\", \"CD\", \"D\", \"DC\", \"DCC\", \"DCCC\", \"CM\"],\r\n [\"\", \"M\", \"MM\", \"MMM\"],\r\n ]\r\n\r\n return (\r\n romanNumerals[3][Math.floor(num / 1000)] +\r\n romanNumerals[2][Math.floor((num % 1000) / 100)] +\r\n romanNumerals[1][Math.floor((num % 100) / 10)] +\r\n romanNumerals[0][num % 10]\r\n )\r\n}\r\n\r\n// Componente de lista desordenada (UL)\r\nexport const UL: React.FC<ListProps> = ({ children, style, type = \"disc\" }) => {\r\n // Clonar los hijos para añadir el tipo de marcador\r\n const childrenWithBullets = React.Children.map(children, (child, index) => {\r\n if (React.isValidElement(child)) {\r\n return React.cloneElement(child as React.ReactElement<any>, {\r\n bulletType: type,\r\n isOrdered: false,\r\n index: index + 1,\r\n })\r\n }\r\n return child\r\n })\r\n\r\n return <View style={[styles.ul, style]}>{childrenWithBullets}</View>\r\n}\r\n\r\n// Componente de lista ordenada (OL)\r\nexport const OL: React.FC<ListProps> = ({ children, style, type = \"decimal\", start = 1 }) => {\r\n // Clonar los hijos para añadir el tipo de marcador y el índice\r\n const childrenWithNumbers = React.Children.map(children, (child, index) => {\r\n if (React.isValidElement(child)) {\r\n return React.cloneElement(child as React.ReactElement<any>, {\r\n bulletType: type,\r\n isOrdered: true,\r\n index: index + 1,\r\n start,\r\n })\r\n }\r\n return child\r\n })\r\n\r\n return <View style={[styles.ol, style]}>{childrenWithNumbers}</View>\r\n}\r\n\r\n// Componente de elemento de lista (LI)\r\nexport const LI: React.FC<\r\n ListItemProps & {\r\n bulletType?: string\r\n isOrdered?: boolean\r\n index?: number\r\n start?: number\r\n }\r\n> = ({ children, style, bulletType = \"disc\", isOrdered = false, index = 1, start = 1, value }) => {\r\n // Determinar el marcador a mostrar\r\n let marker\r\n if (isOrdered) {\r\n // Si se proporciona un valor específico, usarlo en lugar del índice\r\n const actualIndex = value !== undefined ? Number(value) : index\r\n marker = getOrderedMarker(actualIndex, bulletType, start)\r\n } else {\r\n marker = getBulletPoint(bulletType)\r\n }\r\n\r\n return (\r\n <View style={[styles.li, style]}>\r\n <Text style={styles.bulletPoint}>{marker}</Text>\r\n <View style={styles.itemContent}>{typeof children === \"string\" ? <Text>{children}</Text> : children}</View>\r\n </View>\r\n )\r\n}\r\n\r\n","import React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\n\r\ninterface ImgBgProps {\r\n src: string\r\n width?: number | string\r\n height?: number | string\r\n opacity?: number\r\n children?: React.ReactNode\r\n style?: any\r\n fixed?: boolean\r\n objectFit?: \"cover\" | \"contain\" | \"fill\" | \"none\" | \"scale-down\"\r\n objectPosition?: \"center\" | \"top\" | \"left\" | \"right\" | \"bottom\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n position: \"relative\",\r\n width: \"100%\",\r\n height: \"100%\",\r\n },\r\n background: {\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n },\r\n content: {\r\n position: \"relative\",\r\n },\r\n})\r\n\r\nconst ImgBg: React.FC<ImgBgProps> = ({\r\n src,\r\n width = \"100%\",\r\n height = \"100%\",\r\n opacity = 0.2,\r\n children,\r\n style,\r\n fixed = false,\r\n objectFit = \"cover\",\r\n objectPosition = \"center\",\r\n}) => {\r\n return (\r\n <View style={[styles.container, style]}>\r\n <Image\r\n src={src}\r\n style={[\r\n styles.background,\r\n { width, height, opacity, objectFit, objectPosition },\r\n ]}\r\n fixed={fixed}\r\n />\r\n <View style={styles.content}>{children}</View>\r\n </View>\r\n )\r\n}\r\n\r\nexport default ImgBg\r\n"]}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {StyleSheet,View,Image}from'@react-pdf/renderer';import {jsx}from'react/jsx-runtime';import {createContext,useState,useEffect}from'react';import
|
|
1
|
+
import {StyleSheet,View,Image}from'@react-pdf/renderer';import {jsx}from'react/jsx-runtime';import {createContext,useState,useEffect}from'react';import B from'qrcode';StyleSheet.create({page:{backgroundColor:"white",padding:30,fontSize:14},footer:{position:"absolute",left:0,right:0,textAlign:"center"}});StyleSheet.create({image:{width:"100%",height:"auto",marginBottom:14}});StyleSheet.create({left:{textAlign:"left"},right:{textAlign:"right"},center:{textAlign:"center"}});StyleSheet.create({p:{fontSize:12,marginBottom:5,lineHeight:1.2},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:6,marginBottom:6},header:{position:"absolute",top:20,left:0,right:0,textAlign:"center",fontSize:10,paddingHorizontal:40},hr:{width:"100%",borderTop:"1px solid #000",marginTop:6,marginBottom:6}});createContext({cellHeight:22,textAlign:"left"});StyleSheet.create({table:{width:"100%",borderWidth:1,borderColor:"#000",marginBottom:20},thead:{backgroundColor:"#ccc"},tr:{flexDirection:"row"},textBold:{fontSize:10,fontWeight:"bold",paddingLeft:8,paddingRight:8,justifyContent:"center"},text:{fontSize:10,paddingLeft:8,paddingRight:8,justifyContent:"center"},zebraOdd:{backgroundColor:"#eeeeee"}});StyleSheet.create({container:{width:"100%"},row:{flexDirection:"row",flexWrap:"wrap"},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%"}});var u=async({value:e,size:r=150,colorDark:g="#000000",colorLight:l="#ffffff",margin:s=0,errorCorrectionLevel:d="M"})=>{try{let t={errorCorrectionLevel:d,type:"image/png",quality:.92,margin:s,color:{dark:g,light:l},width:r};return B.toDataURL(e,t)}catch(t){return console.error("Error generando QR:",t),""}},y=async(e,r,g,l)=>new Promise(async s=>{if(!e||!r){s(e);return}try{let d=typeof window<"u"&&typeof window.document<"u",t,c,a;if(d)t=document.createElement("canvas"),c=t.getContext("2d"),a=window.Image;else try{let{createCanvas:n,Image:i}=await import('canvas');t=n(100,100),c=t.getContext("2d"),a=i;}catch(n){console.error("Canvas not available in Node environment for addLogoToQR",n),s(e);return}if(!c){s(e);return}let o=new a;d&&(o.crossOrigin="anonymous"),o.onload=()=>{t.width=o.width,t.height=o.height,c.drawImage(o,0,0,t.width,t.height);let n=new a;d&&(n.crossOrigin="anonymous"),n.onload=()=>{let i=(t.width-g)/2,p=(t.height-l)/2;c.fillStyle="#FFFFFF",c.fillRect(i-5,p-5,g+10,l+10),c.drawImage(n,i,p,g,l);let h=t.toDataURL("image/png");s(h);},n.onerror=i=>{console.error("Error cargando el logo:",i),s(e);},n.src=r;},o.onerror=n=>{console.error("Error cargando el QR:",n),s("");},o.src=e;}catch(d){console.error("Error procesando el QR con logo:",d),s(e);}});var M=StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center",margin:10}}),H={0:"L",1:"M",2:"Q",3:"H"},z=({value:e,size:r=150,style:g,colorDark:l="#000000",colorLight:s="#ffffff",margin:d=0,logo:t="",logoWidth:c=30,logoHeight:a=30,errorCorrectionLevel:o=t?"H":"M"})=>{let[n,i]=useState("");useEffect(()=>{(async()=>{try{let m=await u({value:e,size:r,colorDark:l,colorLight:s,margin:d,errorCorrectionLevel:typeof o=="number"?H[o]||"M":o});if(t&&c&&a){let f=await y(m,t,c,a);i(f);}else i(m);}catch(m){console.error("Error generando QR:",m);let f=`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(e)}&size=${r}x${r}&color=${encodeURIComponent(l.replace("#",""))}&bgcolor=${encodeURIComponent(s.replace("#",""))}`;i(f);}})();},[e,r,l,s,d,t,c,a,o]);let p=`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(e)}&size=${r}x${r}`;return jsx(View,{style:[M.qrContainer,g],children:jsx(Image,{src:n||p,style:{width:r,height:r}})})},R=z;var C=async e=>{try{let r=typeof window<"u"&&typeof window.document<"u",g,l={};if(r)try{let o=await import('qr-code-styling');g=o.default||o;}catch(o){throw console.error("Failed to load qr-code-styling in browser",o),o}else {let o="jsdom",n="canvas",i="qr-code-styling/lib/qr-code-styling.common.js";try{let[p,h,m]=await Promise.all([import(o),import(n),import(i)]),{JSDOM:f}=p,P=h.default||h,{QRCodeStyling:T}=m;g=T,l={jsdom:f,nodeCanvas:P};}catch(p){throw console.error("Failed to load Node dependencies for QR generation",p),p}}let s=typeof e.width=="number"&&isFinite(e.width)?Math.round(e.width):300,d=typeof e.height=="number"&&isFinite(e.height)?Math.round(e.height):300,t={width:s,height:d,data:e.value,image:e.image,dotsOptions:e.dotsOptions,backgroundOptions:{color:e.backgroundOptions?.color||"#ffffff",...e.backgroundOptions},imageOptions:{crossOrigin:"anonymous",margin:typeof e.imageOptions?.margin=="number"&&isFinite(e.imageOptions.margin)?e.imageOptions.margin:0,saveAsBlob:!0,imageSize:typeof e.imageOptions?.imageSize=="number"&&isFinite(e.imageOptions.imageSize)?Math.max(0,Math.min(1,e.imageOptions.imageSize)):.4},cornersSquareOptions:e.cornersSquareOptions,cornersDotOptions:e.cornersDotOptions},a=await new g({type:"png",...l,...t}).getRawData("png");if(!a)throw new Error("Failed to generate raw data from qr-code-styling");if(r){if(a instanceof Blob)return new Promise((o,n)=>{let i=new FileReader;i.onloadend=()=>{typeof i.result=="string"?o(i.result):n(new Error("Failed to convert blob to base64"));},i.onerror=n,i.readAsDataURL(a);});console.warn("Unexpected rawData type in browser:",a);}if(typeof Buffer<"u"&&Buffer.isBuffer(a))return `data:image/png;base64,${a.toString("base64")}`;throw new Error(`Unexpected raw data type: ${typeof a}`)}catch(r){return console.error("Error generating QR V2, falling back to V1:",r),u({value:e.value,size:e.width,colorDark:e.fallbackColorDark||e.dotsOptions?.color,colorLight:e.fallbackColorLight||e.backgroundOptions?.color,margin:e.fallbackMargin||0,errorCorrectionLevel:e.fallbackErrorCorrectionLevel||"M"})}};var $=StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center"}}),W=({value:e,size:r=300,style:g,image:l,dotsOptions:s,backgroundOptions:d,imageOptions:t,cornersSquareOptions:c,cornersDotOptions:a,colorDark:o,colorLight:n,margin:i,errorCorrectionLevel:p})=>jsx(View,{style:[$.qrContainer,g],children:jsx(Image,{style:{width:r,height:r},src:C({value:e,width:r,height:r,image:l,dotsOptions:s||(o?{color:o}:void 0),backgroundOptions:d||(n?{color:n}:void 0),imageOptions:{...t,margin:t?.margin!==void 0?t.margin:i},cornersSquareOptions:c,cornersDotOptions:a,fallbackColorDark:o,fallbackColorLight:n,fallbackMargin:i,fallbackErrorCorrectionLevel:p})})}),x=W;StyleSheet.create({ul:{marginBottom:10,paddingLeft:15},ol:{marginBottom:10,paddingLeft:15},li:{marginBottom:5,flexDirection:"row"},bulletPoint:{width:15,marginRight:5,fontSize:12},itemContent:{flex:1}});StyleSheet.create({container:{position:"relative",width:"100%",height:"100%"},background:{position:"absolute",top:0,left:0,right:0,bottom:0},content:{position:"relative"}});
|
|
2
2
|
export{R as QR,x as QRstyle};//# sourceMappingURL=index.js.map
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../frontend/src/components/core/basic/Layout.tsx","../../../frontend/src/components/core/basic/Img.tsx","../../../frontend/src/components/core/basic/Position.tsx","../../../frontend/src/components/core/basic/Etiquetas.tsx","../../../frontend/src/components/core/basic/Tablet.tsx","../../../frontend/src/components/core/basic/Grid.tsx","../../../frontend/src/components/core/qr/QRGenerator.ts","../../../frontend/src/components/core/qr/QR.tsx","../../../frontend/src/components/core/qr/QRstyleGenerator.ts","../../../frontend/src/components/core/qr/QRstyle.tsx","../../../frontend/src/components/core/basic/Lista.tsx","../../../frontend/src/components/core/basic/ImgBg.tsx"],"names":["StyleSheet","createContext","generateQRAsBase64","value","size","colorDark","colorLight","margin","errorCorrectionLevel","options","QRCode","error","addLogoToQR","qrDataUrl","logoUrl","logoWidth","logoHeight","resolve","isBrowser","canvas","ctx","ImageConstructor","createCanvas","Image","e","qrImage","logoImage","x","y","finalQrDataUrl","err","styles","errorLevelMap","QR","style","logo","setQrDataUrl","useState","useEffect","baseQrDataUrl","qrWithLogo","fallbackUrl","jsx","View","QR_default","generateQRV2AsBase64","QRCodeStylingConstructor","extraOptions","mod","jsdomName","canvasName","qrCommonName","jsdomMod","canvasMod","qrCommonMod","JSDOM","nodeCanvas","QRCodeStyling","width","height","qrOptions","rawData","reject","reader","QRV2","image","dotsOptions","backgroundOptions","imageOptions","cornersSquareOptions","cornersDotOptions","QRstyle_default"],"mappings":"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","file":"index.js","sourcesContent":["import React from \"react\"\r\nimport { Page, Document, StyleSheet, Text, View } from \"@react-pdf/renderer\"\r\n\r\nconst styles = StyleSheet.create({\r\n page: {\r\n backgroundColor: \"white\",\r\n padding: 30,\r\n fontFamily: \"Helvetica\",\r\n fontSize: 14,\r\n },\r\n footer: {\r\n position: \"absolute\",\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n }\r\n})\r\n\r\ninterface LayoutProps {\r\n children: React.ReactNode\r\n size?: string\r\n orientation?: \"vertical\" | \"horizontal\" | \"h\" | \"v\" | \"portrait\" | \"landscape\"\r\n backgroundColor?: string\r\n padding?: number\r\n margen?: \"apa\" | \"normal\" | \"estrecho\" | \"ancho\"\r\n style?: any\r\n pagination?: boolean\r\n footer?: React.ReactNode\r\n lines?: number\r\n rule?: boolean\r\n}\r\n\r\nconst Layout: React.FC<LayoutProps> = ({\r\n children,\r\n size = \"A4\",\r\n orientation = \"vertical\",\r\n backgroundColor = \"white\",\r\n padding = 30,\r\n margen = \"normal\",\r\n style = {},\r\n pagination = true,\r\n footer,\r\n lines = footer ? 2 : 1,\r\n rule = false,\r\n}) => {\r\n // Calculate footer height based on number of lines\r\n // Each line is approximately 20 points (considering font size and line height)\r\n const LINE_HEIGHT = 20\r\n const FOOTER_PADDING = 10\r\n const footerHeight = (lines * LINE_HEIGHT) + FOOTER_PADDING\r\n\r\n // Función para obtener márgenes según las normas APA y otros estándares\r\n const getMargins = (margen: string, pageSize: string) => {\r\n const normalizedSize = pageSize.toUpperCase()\r\n\r\n switch (margen) {\r\n case \"apa\":\r\n // Normas APA: 1 pulgada en todos los lados (72 puntos)\r\n if (normalizedSize === \"LETTER\" || normalizedSize === \"LEGAL\") {\r\n return {\r\n paddingTop: 72,\r\n paddingRight: 72,\r\n paddingBottom: 72,\r\n paddingLeft: 72\r\n }\r\n }\r\n // Para otros tamaños, usar equivalente proporcional\r\n return {\r\n paddingTop: 72,\r\n paddingRight: 72,\r\n paddingBottom: 72,\r\n paddingLeft: 72\r\n }\r\n\r\n case \"estrecho\":\r\n return {\r\n paddingTop: 36,\r\n paddingRight: 36,\r\n paddingBottom: 36,\r\n paddingLeft: 36\r\n }\r\n\r\n case \"ancho\":\r\n return {\r\n paddingTop: 108,\r\n paddingRight: 108,\r\n paddingBottom: 108,\r\n paddingLeft: 108\r\n }\r\n\r\n case \"normal\":\r\n default:\r\n return {\r\n paddingTop: padding,\r\n paddingRight: padding,\r\n paddingBottom: padding,\r\n paddingLeft: padding\r\n }\r\n }\r\n }\r\n\r\n // Validar y sanitizar props\r\n let safeSize = size\r\n let safeOrientation = orientation\r\n let safeBackgroundColor = backgroundColor\r\n\r\n let safeMargen = margen\r\n\r\n try {\r\n // Validar size\r\n const validSizes = [\"A0\", \"A1\", \"A2\", \"A3\", \"A4\", \"A5\", \"A6\", \"A7\", \"A8\", \"A9\", \"LETTER\", \"LEGAL\", \"TABLOID\"]\r\n if (typeof size === \"string\" && !validSizes.includes(size.toUpperCase())) {\r\n console.warn(`Invalid page size: ${size}. Using A4 as default.`)\r\n safeSize = \"A4\"\r\n }\r\n\r\n // Validar orientation\r\n const validOrientations = [\"vertical\", \"horizontal\", \"portrait\", \"landscape\", \"h\", \"v\"]\r\n const normalizedOrientation = typeof orientation === \"string\" ? orientation.toLowerCase() : \"vertical\"\r\n if (!validOrientations.includes(normalizedOrientation)) {\r\n console.warn(`Invalid orientation: ${orientation}. Using vertical as default.`)\r\n safeOrientation = \"vertical\"\r\n } else {\r\n // Mantener el valor original si es válido, respetando alias\r\n safeOrientation = orientation\r\n }\r\n\r\n // Validar backgroundColor\r\n if (typeof backgroundColor !== \"string\") {\r\n console.warn(`Invalid background color: ${backgroundColor}. Using white as default.`)\r\n safeBackgroundColor = \"white\"\r\n }\r\n\r\n // Validar margen\r\n const validMargins = [\"apa\", \"normal\", \"estrecho\", \"ancho\"]\r\n if (!validMargins.includes(margen)) {\r\n console.warn(`Invalid margin type: ${margen}. Using normal as default.`)\r\n safeMargen = \"normal\"\r\n }\r\n\r\n // Validar lines\r\n if (typeof lines !== \"number\" || lines < 1) {\r\n console.warn(`Invalid lines value: ${lines}. Using 1 as default.`)\r\n\r\n }\r\n } catch (e) {\r\n console.warn(\"Error processing props in Layout:\", e)\r\n }\r\n\r\n // Transform orientation from \"vertical\"/\"horizontal\" to \"portrait\"/\"landscape\"\r\n const transformOrientation = (orientation: \"vertical\" | \"horizontal\" | \"h\" | \"v\" | \"portrait\" | \"landscape\"): \"portrait\" | \"landscape\" => {\r\n switch (orientation) {\r\n case \"vertical\":\r\n case \"portrait\":\r\n case \"v\":\r\n return \"portrait\"\r\n case \"horizontal\":\r\n case \"landscape\":\r\n case \"h\":\r\n return \"landscape\"\r\n default:\r\n console.warn(`Unrecognized orientation: ${orientation}. Using portrait as default.`)\r\n return \"portrait\"\r\n }\r\n }\r\n\r\n // Function to calculate footer position based on size and orientation\r\n const getFooterPosition = (pageSize: string, orientation: \"portrait\" | \"landscape\", footerHeight: number) => {\r\n // Dimensions in millimeters according to ISO 216 standard\r\n const pageDimensions: Record<string, { width: number; height: number }> = {\r\n A0: { width: 841, height: 1189 },\r\n A1: { width: 594, height: 841 },\r\n A2: { width: 420, height: 594 },\r\n A3: { width: 297, height: 420 },\r\n A4: { width: 210, height: 297 },\r\n A5: { width: 148, height: 210 },\r\n A6: { width: 105, height: 148 },\r\n A7: { width: 74, height: 105 },\r\n A8: { width: 52, height: 74 },\r\n A9: { width: 37, height: 52 },\r\n LETTER: { width: 216, height: 279 },\r\n LEGAL: { width: 216, height: 356 },\r\n TABLOID: { width: 279, height: 432 },\r\n }\r\n\r\n // Convert mm to points (1mm = 2.834645669 points)\r\n const mmToPoints = 2.834645669\r\n\r\n const dimensions = pageDimensions[pageSize.toUpperCase()]\r\n if (!dimensions) {\r\n // A4 default in points\r\n return orientation === \"landscape\" ? 595 - footerHeight - 10 : 842 - footerHeight - 10\r\n }\r\n\r\n const heightInPoints = dimensions.height * mmToPoints\r\n const widthInPoints = dimensions.width * mmToPoints\r\n\r\n // Subtract footer height and additional margin\r\n return orientation === \"landscape\"\r\n ? widthInPoints - footerHeight - 10\r\n : heightInPoints - footerHeight - 10\r\n }\r\n\r\n const pdfOrientation = transformOrientation(safeOrientation)\r\n\r\n // Obtener márgenes según el tipo seleccionado\r\n const margins = getMargins(safeMargen, safeSize)\r\n\r\n // Calculate footer position based on calculated footer height\r\n const footerTop = getFooterPosition(safeSize, pdfOrientation, footerHeight)\r\n\r\n // Function to render grid (ruler)\r\n const renderGrid = () => {\r\n if (!rule) return null\r\n\r\n // 1 cm = 28.3465 points\r\n const cmToPoints = 28.3465\r\n\r\n // Get page dimensions in points\r\n const pageDimensions: Record<string, { width: number; height: number }> = {\r\n A0: { width: 841 * 2.834645669, height: 1189 * 2.834645669 },\r\n A1: { width: 594 * 2.834645669, height: 841 * 2.834645669 },\r\n A2: { width: 420 * 2.834645669, height: 594 * 2.834645669 },\r\n A3: { width: 297 * 2.834645669, height: 420 * 2.834645669 },\r\n A4: { width: 210 * 2.834645669, height: 297 * 2.834645669 },\r\n A5: { width: 148 * 2.834645669, height: 210 * 2.834645669 },\r\n A6: { width: 105 * 2.834645669, height: 148 * 2.834645669 },\r\n A7: { width: 74 * 2.834645669, height: 105 * 2.834645669 },\r\n A8: { width: 52 * 2.834645669, height: 74 * 2.834645669 },\r\n A9: { width: 37 * 2.834645669, height: 52 * 2.834645669 },\r\n LETTER: { width: 216 * 2.834645669, height: 279 * 2.834645669 },\r\n LEGAL: { width: 216 * 2.834645669, height: 356 * 2.834645669 },\r\n TABLOID: { width: 279 * 2.834645669, height: 432 * 2.834645669 },\r\n }\r\n\r\n const dimensions = pageDimensions[safeSize.toUpperCase()] || pageDimensions.A4\r\n const pageWidth = pdfOrientation === \"landscape\" ? dimensions.height : dimensions.width\r\n const pageHeight = pdfOrientation === \"landscape\" ? dimensions.width : dimensions.height\r\n\r\n const horizontalLines = []\r\n const verticalLines = []\r\n\r\n // Generate horizontal lines (every cm)\r\n for (let i = 0; i <= Math.ceil(pageHeight / cmToPoints); i++) {\r\n horizontalLines.push(\r\n <View\r\n key={`h-${i}`}\r\n style={{\r\n position: \"absolute\",\r\n top: i * cmToPoints,\r\n left: 0,\r\n right: 0,\r\n height: i % 5 === 0 ? 1 : 0.5,\r\n backgroundColor: i % 5 === 0 ? \"rgba(255, 0, 0, 0.8)\" : \"rgba(100, 100, 100, 0.5)\",\r\n }}\r\n />\r\n )\r\n }\r\n\r\n // Generate vertical lines (every cm)\r\n for (let i = 0; i <= Math.ceil(pageWidth / cmToPoints); i++) {\r\n verticalLines.push(\r\n <View\r\n key={`v-${i}`}\r\n style={{\r\n position: \"absolute\",\r\n left: i * cmToPoints,\r\n top: 0,\r\n bottom: 0,\r\n width: i % 5 === 0 ? 1 : 0.5,\r\n backgroundColor: i % 5 === 0 ? \"rgba(255, 0, 0, 0.8)\" : \"rgba(100, 100, 100, 0.5)\",\r\n }}\r\n />\r\n )\r\n }\r\n\r\n return (\r\n <View style={{ position: \"absolute\", top: 0, left: 0, right: 0, bottom: 0 }} fixed>\r\n {horizontalLines}\r\n {verticalLines}\r\n </View>\r\n )\r\n }\r\n\r\n const pageStyle = {\r\n ...styles.page,\r\n backgroundColor: safeBackgroundColor,\r\n paddingTop: (style?.paddingTop ?? style?.padding ?? margins.paddingTop),\r\n paddingRight: (style?.paddingRight ?? style?.padding ?? margins.paddingRight),\r\n paddingLeft: (style?.paddingLeft ?? style?.padding ?? margins.paddingLeft),\r\n paddingBottom: (style?.paddingBottom ?? style?.padding ?? margins.paddingBottom) + footerHeight,\r\n ...( (() => { const { padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest } = style || {}; return rest })() ),\r\n }\r\n\r\n const footerStyle = {\r\n ...styles.footer,\r\n top: footerTop,\r\n height: footerHeight,\r\n display: \"flex\" as const,\r\n flexDirection: \"column\" as const,\r\n justifyContent: \"center\" as const,\r\n alignItems: \"center\" as const,\r\n fontSize: 10,\r\n color: \"grey\"\r\n }\r\n\r\n return (\r\n <Document>\r\n <Page size={safeSize as any} orientation={pdfOrientation} style={pageStyle} wrap>\r\n {renderGrid()}\r\n <View style={{ paddingBottom: footerHeight }}>\r\n {children}\r\n </View>\r\n\r\n <View style={footerStyle} fixed>\r\n {footer && (footer)}\r\n {pagination && (\r\n <Text style={{ fontSize: footerStyle.fontSize }} render={({ pageNumber, totalPages }) => (\r\n `${pageNumber} / ${totalPages}`\r\n )} />\r\n )}\r\n </View>\r\n\r\n </Page>\r\n </Document>\r\n )\r\n}\r\n\r\nexport default Layout\r\n","import React from \"react\"\r\nimport { Image, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ImgProps {\r\n src?: string\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n image: {\r\n width: \"100%\",\r\n height: \"auto\",\r\n marginBottom: 14,\r\n },\r\n})\r\n\r\nconst Img: React.FC<ImgProps> = ({ src, style }) => {\r\n return <Image src={src} style={[styles.image, style]} />\r\n}\r\n\r\nexport default Img\r\n\r\n","import React from \"react\"\r\nimport { View, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface PositionProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n left: {\r\n textAlign: \"left\",\r\n },\r\n right: {\r\n textAlign: \"right\",\r\n },\r\n center: {\r\n textAlign: \"center\",\r\n },\r\n})\r\n\r\nconst Left: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.left, style]}>{children}</View>\r\n}\r\n\r\nconst Right: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.right, style]}>{children}</View>\r\n}\r\n\r\nconst Center: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.center, style]}>{children}</View>\r\n}\r\n\r\nexport { Left, Right, Center }\r\n\r\n","import React from \"react\"\r\nimport { Text, StyleSheet, Link, View } from \"@react-pdf/renderer\"\r\n\r\ninterface TextProps {\r\n children: React.ReactNode\r\n style?: any\r\n href?: string\r\n}\r\n\r\ninterface DivProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface HeaderProps {\r\n children: React.ReactNode\r\n style?: any\r\n fixed?: boolean\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n p: {\r\n fontSize: 12,\r\n marginBottom: 5,\r\n lineHeight: 1.2,\r\n },\r\n h1: {\r\n fontSize: 24,\r\n fontWeight: \"bold\",\r\n marginBottom: 12,\r\n },\r\n h2: {\r\n fontSize: 20,\r\n fontWeight: \"bold\",\r\n marginBottom: 10,\r\n },\r\n h3: {\r\n fontSize: 18,\r\n fontWeight: \"bold\",\r\n marginBottom: 8,\r\n },\r\n h4: {\r\n fontSize: 16,\r\n fontWeight: \"bold\",\r\n marginBottom: 6,\r\n },\r\n h5: {\r\n fontSize: 14,\r\n fontWeight: \"bold\",\r\n marginBottom: 4,\r\n },\r\n h6: {\r\n fontSize: 12,\r\n fontWeight: \"bold\",\r\n marginBottom: 0,\r\n },\r\n strong: {\r\n fontWeight: \"bold\",\r\n },\r\n em: {\r\n fontStyle: \"italic\",\r\n },\r\n u: {\r\n textDecoration: \"underline\",\r\n },\r\n small: {\r\n fontSize: 10,\r\n },\r\n blockquote: {\r\n marginLeft: 20,\r\n marginRight: 20,\r\n fontStyle: \"italic\",\r\n borderLeft: \"4px solid #ccc\",\r\n paddingLeft: 10,\r\n },\r\n mark: {\r\n backgroundColor: \"yellow\",\r\n },\r\n A: {\r\n color: \"#3d65fd\",\r\n textDecoration: \"none\",\r\n },\r\n br: {\r\n width: \"100%\",\r\n height: 1,\r\n marginTop: 7,\r\n marginBottom: 7,\r\n },\r\n header: {\r\n position: \"absolute\",\r\n top: 20,\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n fontSize: 10,\r\n color: \"#666\",\r\n paddingHorizontal: 40,\r\n },\r\n hr: {\r\n width: \"100%\",\r\n borderTop: \"1px solid #000\",\r\n marginTop: 8,\r\n marginBottom: 8,\r\n },\r\n})\r\n\r\nconst P: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.p, style]}>{children}</Text>\r\n}\r\n\r\nconst H1: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h1, style]}>{children}</Text>\r\n}\r\n\r\nconst H2: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h2, style]}>{children}</Text>\r\n}\r\n\r\nconst H3: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h3, style]}>{children}</Text>\r\n}\r\n\r\nconst H4: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h4, style]}>{children}</Text>\r\n}\r\n\r\nconst H5: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h5, style]}>{children}</Text>\r\n}\r\n\r\nconst H6: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h6, style]}>{children}</Text>\r\n}\r\n\r\nconst Strong: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.strong, style]}>{children}</Text>\r\n}\r\n\r\nconst Em: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.em, style]}>{children}</Text>\r\n}\r\n\r\nconst U: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.u, style]}>{children}</Text>\r\n}\r\n\r\nconst Small: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.small, style]}>{children}</Text>\r\n}\r\n\r\nconst Blockquote: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.blockquote, style]}>{children}</Text>\r\n}\r\n\r\nconst Mark: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.mark, style]}>{children}</Text>\r\n}\r\n\r\nconst A: React.FC<TextProps> = ({ children, style, href }) => {\r\n return (\r\n <Link src={href} style={[styles.A, style]}>\r\n {children}\r\n </Link>\r\n )\r\n}\r\n\r\nconst BR: React.FC<{ style?: any }> = ({ style }) => {\r\n return <Text style={[styles.br, style]}>{\"\\n\"}</Text>\r\n}\r\n\r\nconst HR: React.FC<{ style?: any }> = ({ style }) => {\r\n return <View style={[styles.hr, style]} />\r\n}\r\n\r\nconst Span: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[style]}>{children}</Text>\r\n}\r\n\r\nconst Header: React.FC<HeaderProps> = ({ children, style, fixed = false }) => {\r\n return (\r\n <View style={[styles.header, style]} fixed={fixed}>\r\n {typeof children === \"string\" ? <Text>{children}</Text> : children}\r\n </View>\r\n )\r\n}\r\n\r\nconst Div: React.FC<DivProps> = ({ children, style }) => {\r\n return <View style={style}>{children}</View>\r\n}\r\n\r\nexport { P, A, H1, H2, H3, H4, H5, H6, Strong, Em, U, Small, Blockquote, Mark, Span, BR, HR, Header, Div }","import React, { createContext, useContext } from \"react\";\r\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\r\n\r\ninterface TableProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n cellHeight?: number;\r\n}\r\n\r\ninterface TheadProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}\r\n\r\ninterface CellProps {\r\n children?: React.ReactNode;\r\n style?: any;\r\n width?: string | number;\r\n height?: string | number;\r\n colSpan?: number;\r\n isLast?: boolean;\r\n isLastRow?: boolean;\r\n isOdd?: boolean;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}\r\n\r\n// Context para pasar cellHeight y textAlign a los componentes hijos\r\nconst TableContext = createContext<{\r\n cellHeight: number;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}>({\r\n cellHeight: 22,\r\n textAlign: \"left\",\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n table: {\r\n width: \"100%\",\r\n borderWidth: 1,\r\n borderColor: \"#000\",\r\n marginBottom: 20,\r\n },\r\n thead: {\r\n backgroundColor: \"#ccc\",\r\n },\r\n tr: {\r\n flexDirection: \"row\",\r\n },\r\n textBold: {\r\n fontSize: 10,\r\n fontWeight: \"bold\",\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n\r\n },\r\n text: {\r\n fontSize: 10,\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n\r\n },\r\n zebraOdd: {\r\n backgroundColor: \"#eeeeee\",\r\n },\r\n});\r\n\r\nconst Table: React.FC<TableProps> = ({ children, style, cellHeight = 22 }) => (\r\n <TableContext.Provider value={{ cellHeight, textAlign: \"left\" }}>\r\n <View style={[styles.table, style]}>{children}</View>\r\n </TableContext.Provider>\r\n);\r\n\r\nconst Thead: React.FC<TheadProps> = ({\r\n children,\r\n style,\r\n textAlign = \"left\",\r\n}) => {\r\n const { cellHeight } = useContext(TableContext);\r\n\r\n return (\r\n <TableContext.Provider value={{ cellHeight, textAlign }}>\r\n <View style={[styles.thead, style]}>{children}</View>\r\n </TableContext.Provider>\r\n );\r\n};\r\n\r\nconst Tbody: React.FC<TableProps> = ({ children }) => {\r\n const rows = React.Children.toArray(children) as React.ReactElement<any>[];\r\n const count = rows.length;\r\n return (\r\n <>\r\n {rows.map((row, idx) =>\r\n React.cloneElement(row, {\r\n isLastRow: idx === count - 1,\r\n isOdd: idx % 2 === 1,\r\n })\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nconst Tr: React.FC<TableProps & { isLastRow?: boolean; isOdd?: boolean }> = ({\r\n children,\r\n style,\r\n isLastRow = false,\r\n isOdd = false,\r\n}) => {\r\n const elements = React.Children.toArray(\r\n children\r\n ) as React.ReactElement<CellProps>[];\r\n const count = elements.length;\r\n return (\r\n <View style={[styles.tr, style]}>\r\n {elements.map((child, idx) => {\r\n const isLast = idx === count - 1;\r\n const width = `${(100 / count).toFixed(2)}%`;\r\n return React.cloneElement(child, { width, isLast, isLastRow, isOdd });\r\n })}\r\n </View>\r\n );\r\n};\r\n\r\nconst Th: React.FC<CellProps> = ({\r\n children,\r\n style,\r\n width,\r\n height,\r\n colSpan,\r\n isLast = false,\r\n isLastRow = false,\r\n textAlign: propTextAlign,\r\n}) => {\r\n const { cellHeight, textAlign: contextTextAlign } = useContext(TableContext);\r\n\r\n // Usar textAlign del prop si está definido, sino el del contexto\r\n const finalTextAlign = propTextAlign || contextTextAlign || \"left\";\r\n\r\n const baseWidth =\r\n typeof width === \"string\" && colSpan\r\n ? `${(parseFloat(width) * colSpan).toFixed(2)}%`\r\n : width;\r\n\r\n const cellHeightValue = height !== undefined ? height : cellHeight;\r\n\r\n const borders = {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor: \"#000\",\r\n minHeight: cellHeightValue,\r\n };\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.textBold,\r\n {\r\n width: baseWidth,\r\n },\r\n borders,\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign }}>{children}</Text>\r\n </View>\r\n );\r\n};\r\n\r\nconst Td: React.FC<CellProps> = ({\r\n children,\r\n style,\r\n width,\r\n height,\r\n colSpan,\r\n isLast = false,\r\n isLastRow = false,\r\n isOdd = false,\r\n textAlign: propTextAlign,\r\n}) => {\r\n const { cellHeight, textAlign: contextTextAlign } = useContext(TableContext);\r\n\r\n // Usar textAlign del prop si está definido, sino el del contexto, sino 'left'\r\n const finalTextAlign = propTextAlign || contextTextAlign || \"left\";\r\n\r\n const baseWidth =\r\n typeof width === \"string\" && colSpan\r\n ? `${(parseFloat(width) * colSpan).toFixed(2)}%`\r\n : width;\r\n\r\n const cellHeightValue = height !== undefined ? height : cellHeight;\r\n\r\n const borders = {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor: \"#000\",\r\n minHeight: cellHeightValue,\r\n };\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.text,\r\n isOdd && styles.zebraOdd,\r\n {\r\n width: baseWidth,\r\n },\r\n borders,\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign }}>{children}</Text>\r\n </View>\r\n );\r\n};\r\n\r\nexport { Table, Thead, Tbody, Tr, Th, Td };\r\n","import React from \"react\"\r\nimport { View, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ContainerProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface RowProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface ColProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n width: \"100%\",\r\n paddingHorizontal: 20,\r\n },\r\n row: {\r\n flexDirection: \"row\",\r\n flexWrap: \"wrap\",\r\n marginHorizontal: -5,\r\n },\r\n col: {\r\n paddingHorizontal: 5,\r\n },\r\n col1: { width: \"8.33%\" },\r\n col2: { width: \"16.66%\" },\r\n col3: { width: \"25%\" },\r\n col4: { width: \"33.33%\" },\r\n col5: { width: \"41.66%\" },\r\n col6: { width: \"50%\" },\r\n col7: { width: \"58.33%\" },\r\n col8: { width: \"66.66%\" },\r\n col9: { width: \"75%\" },\r\n col10: { width: \"83.33%\" },\r\n col11: { width: \"91.66%\" },\r\n col12: { width: \"100%\" },\r\n})\r\n\r\nexport const Container: React.FC<ContainerProps> = ({ children, style }) => {\r\n return <View style={[styles.container, style]}>{children}</View>\r\n}\r\n\r\nexport const Row: React.FC<RowProps> = ({ children, style }) => {\r\n return <View style={[styles.row, style]}>{children}</View>\r\n}\r\n\r\nexport const Col1: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col1, style]}>{children}</View>\r\n}\r\n\r\nexport const Col2: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col2, style]}>{children}</View>\r\n}\r\n\r\nexport const Col3: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col3, style]}>{children}</View>\r\n}\r\n\r\nexport const Col4: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col4, style]}>{children}</View>\r\n}\r\n\r\nexport const Col5: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col5, style]}>{children}</View>\r\n}\r\n\r\nexport const Col6: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col6, style]}>{children}</View>\r\n}\r\n\r\nexport const Col7: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col7, style]}>{children}</View>\r\n}\r\n\r\nexport const Col8: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col8, style]}>{children}</View>\r\n}\r\n\r\nexport const Col9: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col9, style]}>{children}</View>\r\n}\r\n\r\nexport const Col10: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col10, style]}>{children}</View>\r\n}\r\n\r\nexport const Col11: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col11, style]}>{children}</View>\r\n}\r\n\r\nexport const Col12: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col, styles.col12, style]}>{children}</View>\r\n}\r\n\r\n","import QRCode from \"qrcode\"\r\n\r\ninterface QROptions {\r\n value: string\r\n size?: number\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n logoImage?: string\r\n logoWidth?: number\r\n logoHeight?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nexport const generateQRAsBase64 = async ({\r\n value,\r\n size = 150,\r\n colorDark = \"#000000\",\r\n colorLight = \"#ffffff\",\r\n margin = 0,\r\n errorCorrectionLevel = \"M\",\r\n}: QROptions): Promise<string> => {\r\n try {\r\n // Configuración para QRCode\r\n const options = {\r\n errorCorrectionLevel: errorCorrectionLevel,\r\n type: \"image/png\" as const,\r\n quality: 0.92,\r\n margin: margin,\r\n color: {\r\n dark: colorDark,\r\n light: colorLight,\r\n },\r\n width: size,\r\n }\r\n\r\n // Generar el código QR como base64\r\n const qrDataUrl = QRCode.toDataURL(value, options)\r\n return qrDataUrl\r\n } catch (error) {\r\n console.error(\"Error generando QR:\", error)\r\n return \"\"\r\n }\r\n}\r\n\r\n// Función para añadir un logo al QR generado\r\nexport const addLogoToQR = async (\r\n qrDataUrl: string,\r\n logoUrl: string,\r\n logoWidth: number,\r\n logoHeight: number,\r\n): Promise<string> => {\r\n return new Promise(async (resolve) => {\r\n if (!qrDataUrl || !logoUrl) {\r\n resolve(qrDataUrl)\r\n return\r\n }\r\n\r\n try {\r\n const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\r\n let canvas: any;\r\n let ctx: any;\r\n let ImageConstructor: any;\r\n\r\n if (isBrowser) {\r\n canvas = document.createElement(\"canvas\")\r\n ctx = canvas.getContext(\"2d\")\r\n ImageConstructor = window.Image;\r\n } else {\r\n // Node environment\r\n try {\r\n // Use dynamic imports to avoid bundling canvas in browser build if possible\r\n // although typically 'canvas' is excluded from browser bundles or shimmed.\r\n const { createCanvas, Image } = await import('canvas');\r\n canvas = createCanvas(100, 100); // Initial size, will be resized\r\n ctx = canvas.getContext(\"2d\");\r\n ImageConstructor = Image;\r\n } catch (e) {\r\n console.error(\"Canvas not available in Node environment for addLogoToQR\", e);\r\n resolve(qrDataUrl);\r\n return;\r\n }\r\n }\r\n\r\n if (!ctx) {\r\n resolve(qrDataUrl)\r\n return\r\n }\r\n\r\n // Cargar la imagen del QR\r\n const qrImage = new ImageConstructor()\r\n // crossOrigin is only needed in browser usually, but node-canvas might support/ignore it\r\n if (isBrowser) qrImage.crossOrigin = \"anonymous\"\r\n \r\n qrImage.onload = () => {\r\n // Establecer el tamaño del canvas\r\n canvas.width = qrImage.width\r\n canvas.height = qrImage.height\r\n\r\n // Dibujar el QR en el canvas\r\n ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height)\r\n\r\n // Cargar el logo\r\n const logoImage = new ImageConstructor()\r\n if (isBrowser) logoImage.crossOrigin = \"anonymous\"\r\n \r\n logoImage.onload = () => {\r\n // Calcular la posición central para el logo\r\n const x = (canvas.width - logoWidth) / 2\r\n const y = (canvas.height - logoHeight) / 2\r\n\r\n // Dibujar un fondo blanco para el logo (opcional)\r\n ctx.fillStyle = \"#FFFFFF\"\r\n ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10)\r\n\r\n // Dibujar el logo\r\n ctx.drawImage(logoImage, x, y, logoWidth, logoHeight)\r\n\r\n // Convertir el canvas a base64\r\n const finalQrDataUrl = canvas.toDataURL(\"image/png\")\r\n resolve(finalQrDataUrl)\r\n }\r\n\r\n logoImage.onerror = (err: any) => {\r\n console.error(\"Error cargando el logo:\", err)\r\n resolve(qrDataUrl) // Devolver el QR sin logo en caso de error\r\n }\r\n\r\n logoImage.src = logoUrl\r\n }\r\n\r\n qrImage.onerror = (err: any) => {\r\n console.error(\"Error cargando el QR:\", err)\r\n resolve(\"\")\r\n }\r\n\r\n qrImage.src = qrDataUrl\r\n } catch (error) {\r\n console.error(\"Error procesando el QR con logo:\", error)\r\n resolve(qrDataUrl) // Devolver el QR sin logo en caso de error\r\n }\r\n })\r\n}\r\n","\"use client\"\r\n\r\nimport React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\nimport { useEffect, useState } from \"react\"\r\nimport { generateQRAsBase64, addLogoToQR } from \"./QRGenerator\"\r\n\r\n// Define the props for the QR component\r\ninterface QRProps {\r\n value: string\r\n size?: number\r\n style?: any\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n logo?: string\r\n logoWidth?: number\r\n logoHeight?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n qrContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n margin: 10,\r\n },\r\n})\r\n\r\n// Mapa para convertir niveles de corrección numéricos a letras\r\nconst errorLevelMap: Record<number, \"L\" | \"M\" | \"Q\" | \"H\"> = {\r\n 0: \"L\",\r\n 1: \"M\",\r\n 2: \"Q\",\r\n 3: \"H\",\r\n}\r\n\r\n// Este componente funciona con React PDF\r\nconst QR: React.FC<QRProps> = ({\r\n value,\r\n size = 150,\r\n style,\r\n colorDark = \"#000000\",\r\n colorLight = \"#ffffff\",\r\n margin = 0,\r\n logo = \"\",\r\n logoWidth = 30,\r\n logoHeight = 30,\r\n errorCorrectionLevel = logo ? \"H\" : \"M\",\r\n}) => {\r\n const [qrDataUrl, setQrDataUrl] = useState<string>(\"\")\r\n\r\n // Generar el código QR cuando el componente se monta o cuando cambian las props\r\n useEffect(() => {\r\n const generateQR = async () => {\r\n try {\r\n // Primero generamos el QR básico\r\n const baseQrDataUrl = await generateQRAsBase64({\r\n value,\r\n size,\r\n colorDark,\r\n colorLight,\r\n margin,\r\n errorCorrectionLevel:\r\n typeof errorCorrectionLevel === \"number\"\r\n ? errorLevelMap[errorCorrectionLevel] || \"M\"\r\n : errorCorrectionLevel,\r\n })\r\n\r\n // Si hay un logo, lo añadimos al QR\r\n if (logo && logoWidth && logoHeight) {\r\n const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight)\r\n setQrDataUrl(qrWithLogo)\r\n } else {\r\n setQrDataUrl(baseQrDataUrl)\r\n }\r\n } catch (error) {\r\n console.error(\"Error generando QR:\", error)\r\n // En caso de error, generamos un QR básico usando una API externa\r\n const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(\r\n value,\r\n )}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace(\"#\", \"\"))}&bgcolor=${encodeURIComponent(\r\n colorLight.replace(\"#\", \"\"),\r\n )}`\r\n setQrDataUrl(fallbackUrl)\r\n }\r\n }\r\n\r\n generateQR()\r\n }, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel])\r\n\r\n // Mostrar un QR de respaldo mientras se genera el QR personalizado\r\n const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(\r\n value,\r\n )}&size=${size}x${size}`\r\n\r\n return (\r\n <View style={[styles.qrContainer, style]}>\r\n <Image src={qrDataUrl || fallbackUrl} style={{ width: size, height: size }} />\r\n </View>\r\n )\r\n}\r\n\r\nexport default QR\r\n\r\n","import { generateQRAsBase64 } from \"./QRGenerator\"\r\n\r\nexport interface QRV2Options {\r\n value: string\r\n width?: number\r\n height?: number\r\n image?: string\r\n dotsOptions?: {\r\n color?: string\r\n type?: \"rounded\" | \"dots\" | \"classy\" | \"classy-rounded\" | \"square\" | \"extra-rounded\"\r\n }\r\n backgroundOptions?: {\r\n color?: string\r\n }\r\n imageOptions?: {\r\n crossOrigin?: string\r\n margin?: number\r\n imageSize?: number // 0-1 (e.g., 0.4)\r\n }\r\n cornersSquareOptions?: {\r\n type?: \"dot\" | \"square\" | \"extra-rounded\"\r\n color?: string\r\n }\r\n cornersDotOptions?: {\r\n type?: \"dot\" | \"square\"\r\n color?: string\r\n }\r\n // Fallback options\r\n fallbackColorDark?: string\r\n fallbackColorLight?: string\r\n fallbackMargin?: number\r\n fallbackErrorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nexport const generateQRV2AsBase64 = async (options: QRV2Options): Promise<string> => {\r\n try {\r\n const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\r\n \r\n let QRCodeStylingConstructor: any;\r\n let extraOptions = {};\r\n\r\n if (isBrowser) {\r\n // Dynamic import for browser\r\n try {\r\n const mod = await import('qr-code-styling');\r\n QRCodeStylingConstructor = mod.default || mod;\r\n } catch (e) {\r\n console.error(\"Failed to load qr-code-styling in browser\", e);\r\n throw e;\r\n }\r\n } else {\r\n // Node environment\r\n // We use variable names to prevent bundlers (like Vite) from analyzing/bundling these dependencies\r\n // when building for the browser.\r\n const jsdomName = \"jsdom\";\r\n const canvasName = \"canvas\";\r\n const qrCommonName = \"qr-code-styling/lib/qr-code-styling.common.js\";\r\n \r\n try {\r\n const [jsdomMod, canvasMod, qrCommonMod] = await Promise.all([\r\n import(/* @vite-ignore */ jsdomName),\r\n import(/* @vite-ignore */ canvasName),\r\n import(/* @vite-ignore */ qrCommonName)\r\n ]);\r\n\r\n const { JSDOM } = jsdomMod;\r\n // canvas might be default export or named export depending on version/bundling\r\n const nodeCanvas = canvasMod.default || canvasMod;\r\n const { QRCodeStyling } = qrCommonMod;\r\n\r\n QRCodeStylingConstructor = QRCodeStyling;\r\n extraOptions = {\r\n jsdom: JSDOM,\r\n nodeCanvas: nodeCanvas\r\n };\r\n } catch (e) {\r\n console.error(\"Failed to load Node dependencies for QR generation\", e);\r\n throw e;\r\n }\r\n }\r\n\r\n const width = typeof options.width === \"number\" && isFinite(options.width) ? Math.round(options.width) : 300;\r\n const height = typeof options.height === \"number\" && isFinite(options.height) ? Math.round(options.height) : 300;\r\n \r\n\r\n const qrOptions = {\r\n width,\r\n height,\r\n data: options.value,\r\n image: options.image,\r\n dotsOptions: options.dotsOptions,\r\n backgroundOptions: {\r\n // Default to white background if not specified to prevent transparency issues\r\n // The \"blue stripe\" or weird artifacts can happen if the background is transparent or handled incorrectly\r\n color: options.backgroundOptions?.color || \"#ffffff\",\r\n ...options.backgroundOptions\r\n },\r\n imageOptions: {\r\n crossOrigin: \"anonymous\",\r\n margin: typeof options.imageOptions?.margin === \"number\" && isFinite(options.imageOptions.margin) ? options.imageOptions.margin : 0,\r\n saveAsBlob: true,\r\n imageSize: typeof options.imageOptions?.imageSize === \"number\" && isFinite(options.imageOptions.imageSize)\r\n ? Math.max(0, Math.min(1, options.imageOptions.imageSize))\r\n : 0.4,\r\n },\r\n cornersSquareOptions: options.cornersSquareOptions,\r\n cornersDotOptions: options.cornersDotOptions,\r\n }\r\n\r\n // @ts-ignore\r\n const qrCodeImage = new QRCodeStylingConstructor({\r\n type: \"png\", // Force PNG type\r\n ...extraOptions,\r\n ...qrOptions,\r\n })\r\n\r\n const rawData = await qrCodeImage.getRawData(\"png\")\r\n \r\n if (!rawData) throw new Error(\"Failed to generate raw data from qr-code-styling\")\r\n\r\n // Handle Blob (Browser) vs Buffer (Node)\r\n if (isBrowser) {\r\n if (rawData instanceof Blob) {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => {\r\n if (typeof reader.result === 'string') {\r\n resolve(reader.result);\r\n } else {\r\n reject(new Error(\"Failed to convert blob to base64\"));\r\n }\r\n };\r\n reader.onerror = reject;\r\n reader.readAsDataURL(rawData);\r\n });\r\n } else {\r\n // Sometimes in browser it might return something else if configured differently?\r\n // But usually Blob.\r\n console.warn(\"Unexpected rawData type in browser:\", rawData);\r\n }\r\n } \r\n \r\n // Node environment usually returns Buffer\r\n if (typeof Buffer !== 'undefined' && Buffer.isBuffer(rawData)) {\r\n return `data:image/png;base64,${rawData.toString(\"base64\")}`;\r\n }\r\n \r\n // Fallback if type is unexpected\r\n // Try to handle if it's a blob-like object in Node (unlikely but possible with polyfills)\r\n throw new Error(`Unexpected raw data type: ${typeof rawData}`);\r\n\r\n } catch (error) {\r\n console.error(\"Error generating QR V2, falling back to V1:\", error)\r\n \r\n // Fallback to existing implementation\r\n return generateQRAsBase64({\r\n value: options.value,\r\n size: options.width,\r\n colorDark: options.fallbackColorDark || options.dotsOptions?.color,\r\n colorLight: options.fallbackColorLight || options.backgroundOptions?.color,\r\n margin: options.fallbackMargin || 0,\r\n errorCorrectionLevel: options.fallbackErrorCorrectionLevel || \"M\",\r\n })\r\n }\r\n}\r\n","\"use client\"\r\n\r\nimport React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\nimport { generateQRV2AsBase64, type QRV2Options } from \"./QRstyleGenerator\"\r\n\r\n// Define props\r\nexport interface QRV2Props {\r\n value: string\r\n size?: number\r\n style?: any\r\n image?: string\r\n dotsOptions?: QRV2Options[\"dotsOptions\"]\r\n backgroundOptions?: QRV2Options[\"backgroundOptions\"]\r\n imageOptions?: QRV2Options[\"imageOptions\"]\r\n cornersSquareOptions?: QRV2Options[\"cornersSquareOptions\"]\r\n cornersDotOptions?: QRV2Options[\"cornersDotOptions\"]\r\n // Fallback/Compatibility props\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n qrContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n})\r\n\r\nconst QRV2: React.FC<QRV2Props> = ({\r\n value,\r\n size = 300,\r\n style,\r\n image,\r\n dotsOptions,\r\n backgroundOptions,\r\n imageOptions,\r\n cornersSquareOptions,\r\n cornersDotOptions,\r\n colorDark,\r\n colorLight,\r\n margin,\r\n errorCorrectionLevel,\r\n}) => {\r\n return (\r\n <View style={[styles.qrContainer, style]}>\r\n {/* We pass a function that returns the promise/result or use the state if available. \r\n Actually, we can pass the promise directly to src! */}\r\n <Image \r\n style={{ width: size, height: size }} \r\n src={generateQRV2AsBase64({\r\n value,\r\n width: size,\r\n height: size,\r\n image,\r\n dotsOptions: dotsOptions || (colorDark ? { color: colorDark } : undefined),\r\n backgroundOptions: backgroundOptions || (colorLight ? { color: colorLight } : undefined),\r\n imageOptions: {\r\n ...imageOptions,\r\n margin: imageOptions?.margin !== undefined ? imageOptions.margin : margin\r\n },\r\n cornersSquareOptions,\r\n cornersDotOptions,\r\n fallbackColorDark: colorDark,\r\n fallbackColorLight: colorLight,\r\n fallbackMargin: margin,\r\n fallbackErrorCorrectionLevel: errorCorrectionLevel,\r\n })} \r\n />\r\n </View>\r\n )\r\n}\r\n\r\nexport default QRV2\r\n","import React from \"react\"\r\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ListProps {\r\n children: React.ReactNode\r\n style?: any\r\n start?: number // Para listas ordenadas, desde qué número empezar\r\n type?: \"disc\" | \"circle\" | \"square\" | \"decimal\" | \"lower-alpha\" | \"upper-alpha\" | \"lower-roman\" | \"upper-roman\"\r\n}\r\n\r\ninterface ListItemProps {\r\n children: React.ReactNode\r\n style?: any\r\n value?: number | string // Valor específico para este elemento de lista\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n ul: {\r\n marginBottom: 10,\r\n paddingLeft: 15,\r\n },\r\n ol: {\r\n marginBottom: 10,\r\n paddingLeft: 15,\r\n },\r\n li: {\r\n marginBottom: 5,\r\n flexDirection: \"row\",\r\n },\r\n bulletPoint: {\r\n width: 15,\r\n marginRight: 5,\r\n fontSize: 12,\r\n },\r\n itemContent: {\r\n flex: 1,\r\n },\r\n})\r\n\r\n// Función para generar marcadores de lista desordenada\r\nconst getBulletPoint = (type = \"disc\") => {\r\n switch (type) {\r\n case \"circle\":\r\n return \"○\"\r\n case \"square\":\r\n return \"■\"\r\n case \"disc\":\r\n default:\r\n return \"•\"\r\n }\r\n}\r\n\r\n// Función para generar marcadores de lista ordenada\r\nconst getOrderedMarker = (index: number, type = \"decimal\", start = 1) => {\r\n const actualIndex = start + index - 1\r\n\r\n switch (type) {\r\n case \"lower-alpha\":\r\n return String.fromCharCode(97 + (actualIndex % 26)) + \".\"\r\n case \"upper-alpha\":\r\n return String.fromCharCode(65 + (actualIndex % 26)) + \".\"\r\n case \"lower-roman\":\r\n return toRoman(actualIndex).toLowerCase() + \".\"\r\n case \"upper-roman\":\r\n return toRoman(actualIndex) + \".\"\r\n case \"decimal\":\r\n default:\r\n return actualIndex + \".\"\r\n }\r\n}\r\n\r\n// Función para convertir números a numerales romanos\r\nconst toRoman = (num: number): string => {\r\n if (num <= 0 || num > 3999) return String(num)\r\n\r\n const romanNumerals = [\r\n [\"\", \"I\", \"II\", \"III\", \"IV\", \"V\", \"VI\", \"VII\", \"VIII\", \"IX\"],\r\n [\"\", \"X\", \"XX\", \"XXX\", \"XL\", \"L\", \"LX\", \"LXX\", \"LXXX\", \"XC\"],\r\n [\"\", \"C\", \"CC\", \"CCC\", \"CD\", \"D\", \"DC\", \"DCC\", \"DCCC\", \"CM\"],\r\n [\"\", \"M\", \"MM\", \"MMM\"],\r\n ]\r\n\r\n return (\r\n romanNumerals[3][Math.floor(num / 1000)] +\r\n romanNumerals[2][Math.floor((num % 1000) / 100)] +\r\n romanNumerals[1][Math.floor((num % 100) / 10)] +\r\n romanNumerals[0][num % 10]\r\n )\r\n}\r\n\r\n// Componente de lista desordenada (UL)\r\nexport const UL: React.FC<ListProps> = ({ children, style, type = \"disc\" }) => {\r\n // Clonar los hijos para añadir el tipo de marcador\r\n const childrenWithBullets = React.Children.map(children, (child, index) => {\r\n if (React.isValidElement(child)) {\r\n return React.cloneElement(child as React.ReactElement<any>, {\r\n bulletType: type,\r\n isOrdered: false,\r\n index: index + 1,\r\n })\r\n }\r\n return child\r\n })\r\n\r\n return <View style={[styles.ul, style]}>{childrenWithBullets}</View>\r\n}\r\n\r\n// Componente de lista ordenada (OL)\r\nexport const OL: React.FC<ListProps> = ({ children, style, type = \"decimal\", start = 1 }) => {\r\n // Clonar los hijos para añadir el tipo de marcador y el índice\r\n const childrenWithNumbers = React.Children.map(children, (child, index) => {\r\n if (React.isValidElement(child)) {\r\n return React.cloneElement(child as React.ReactElement<any>, {\r\n bulletType: type,\r\n isOrdered: true,\r\n index: index + 1,\r\n start,\r\n })\r\n }\r\n return child\r\n })\r\n\r\n return <View style={[styles.ol, style]}>{childrenWithNumbers}</View>\r\n}\r\n\r\n// Componente de elemento de lista (LI)\r\nexport const LI: React.FC<\r\n ListItemProps & {\r\n bulletType?: string\r\n isOrdered?: boolean\r\n index?: number\r\n start?: number\r\n }\r\n> = ({ children, style, bulletType = \"disc\", isOrdered = false, index = 1, start = 1, value }) => {\r\n // Determinar el marcador a mostrar\r\n let marker\r\n if (isOrdered) {\r\n // Si se proporciona un valor específico, usarlo en lugar del índice\r\n const actualIndex = value !== undefined ? Number(value) : index\r\n marker = getOrderedMarker(actualIndex, bulletType, start)\r\n } else {\r\n marker = getBulletPoint(bulletType)\r\n }\r\n\r\n return (\r\n <View style={[styles.li, style]}>\r\n <Text style={styles.bulletPoint}>{marker}</Text>\r\n <View style={styles.itemContent}>{typeof children === \"string\" ? <Text>{children}</Text> : children}</View>\r\n </View>\r\n )\r\n}\r\n\r\n","import React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\n\r\ninterface ImgBgProps {\r\n src: string\r\n width?: number | string\r\n height?: number | string\r\n opacity?: number\r\n children?: React.ReactNode\r\n style?: any\r\n fixed?: boolean\r\n objectFit?: \"cover\" | \"contain\" | \"fill\" | \"none\" | \"scale-down\"\r\n objectPosition?: string // ej: \"center\", \"top\", \"left top\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n position: \"relative\",\r\n width: \"100%\",\r\n height: \"100%\",\r\n },\r\n background: {\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n },\r\n content: {\r\n position: \"relative\",\r\n },\r\n})\r\n\r\nconst ImgBg: React.FC<ImgBgProps> = ({\r\n src,\r\n width = \"100%\",\r\n height = \"100%\",\r\n opacity = 0.2,\r\n children,\r\n style,\r\n fixed = false,\r\n objectFit = \"cover\",\r\n objectPosition = \"center\",\r\n}) => {\r\n return (\r\n <View style={[styles.container, style]}>\r\n <Image\r\n src={src}\r\n style={[\r\n styles.background,\r\n { width, height, opacity, objectFit, objectPosition },\r\n ]}\r\n fixed={fixed}\r\n />\r\n <View style={styles.content}>{children}</View>\r\n </View>\r\n )\r\n}\r\n\r\nexport default ImgBg\r\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../frontend/src/components/core/basic/layout/Layout.tsx","../../../frontend/src/components/core/basic/Img.tsx","../../../frontend/src/components/core/basic/Position.tsx","../../../frontend/src/components/core/basic/Etiquetas.tsx","../../../frontend/src/components/core/basic/Tablet.tsx","../../../frontend/src/components/core/basic/Grid.tsx","../../../frontend/src/components/core/qr/QRGenerator.ts","../../../frontend/src/components/core/qr/QR.tsx","../../../frontend/src/components/core/qr/QRstyleGenerator.ts","../../../frontend/src/components/core/qr/QRstyle.tsx","../../../frontend/src/components/core/basic/Lista.tsx","../../../frontend/src/components/core/basic/ImgBg.tsx"],"names":["StyleSheet","createContext","generateQRAsBase64","value","size","colorDark","colorLight","margin","errorCorrectionLevel","options","QRCode","error","addLogoToQR","qrDataUrl","logoUrl","logoWidth","logoHeight","resolve","isBrowser","canvas","ctx","ImageConstructor","createCanvas","Image","e","qrImage","logoImage","x","y","finalQrDataUrl","err","styles","errorLevelMap","QR","style","logo","setQrDataUrl","useState","useEffect","baseQrDataUrl","qrWithLogo","fallbackUrl","jsx","View","QR_default","generateQRV2AsBase64","QRCodeStylingConstructor","extraOptions","mod","jsdomName","canvasName","qrCommonName","jsdomMod","canvasMod","qrCommonMod","JSDOM","nodeCanvas","QRCodeStyling","width","height","qrOptions","rawData","reject","reader","QRV2","image","dotsOptions","backgroundOptions","imageOptions","cornersSquareOptions","cornersDotOptions","QRstyle_default"],"mappings":"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","file":"index.js","sourcesContent":["import React from \"react\"\r\nimport { Page, Document, StyleSheet, Text, View } from \"@react-pdf/renderer\"\r\n\r\nconst styles = StyleSheet.create({\r\n page: {\r\n backgroundColor: \"white\",\r\n padding: 30,\r\n\r\n fontSize: 14,\r\n },\r\n footer: {\r\n position: \"absolute\",\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n }\r\n})\r\n\r\ninterface LayoutProps {\r\n children: React.ReactNode\r\n size?: \"A0\" | \"A1\" | \"A2\" | \"A3\" | \"A4\" | \"A5\" | \"A6\" | \"A7\" | \"A8\" | \"A9\" | \"LETTER\" | \"LEGAL\" | \"TABLOID\"\r\n orientation?: \"vertical\" | \"horizontal\" | \"h\" | \"v\" | \"portrait\" | \"landscape\"\r\n backgroundColor?: string\r\n padding?: number\r\n margen?: \"apa\" | \"normal\" | \"estrecho\" | \"ancho\"\r\n style?: any\r\n pagination?: boolean\r\n footer?: React.ReactNode\r\n lines?: number\r\n rule?: boolean\r\n}\r\n\r\nconst Layout: React.FC<LayoutProps> = ({\r\n children,\r\n size = \"A4\",\r\n orientation = \"vertical\",\r\n backgroundColor = \"white\",\r\n padding = 30,\r\n margen = \"normal\",\r\n style = {},\r\n pagination = true,\r\n footer,\r\n lines = footer ? 2 : 1,\r\n rule = false,\r\n}) => {\r\n // Calculate footer height based on number of lines\r\n // Each line is approximately 20 points (considering font size and line height)\r\n const LINE_HEIGHT = 20\r\n const FOOTER_PADDING = 10\r\n const footerHeight = (lines * LINE_HEIGHT) + FOOTER_PADDING\r\n\r\n // Función para obtener márgenes según las normas APA y otros estándares\r\n const getMargins = (margen: string, pageSize: string) => {\r\n const normalizedSize = pageSize.toUpperCase()\r\n\r\n switch (margen) {\r\n case \"apa\":\r\n // Normas APA: 1 pulgada en todos los lados (72 puntos)\r\n if (normalizedSize === \"LETTER\" || normalizedSize === \"LEGAL\") {\r\n return {\r\n paddingTop: 72,\r\n paddingRight: 72,\r\n paddingBottom: 72,\r\n paddingLeft: 72\r\n }\r\n }\r\n // Para otros tamaños, usar equivalente proporcional\r\n return {\r\n paddingTop: 72,\r\n paddingRight: 72,\r\n paddingBottom: 72,\r\n paddingLeft: 72\r\n }\r\n\r\n case \"estrecho\":\r\n return {\r\n paddingTop: 36,\r\n paddingRight: 36,\r\n paddingBottom: 36,\r\n paddingLeft: 36\r\n }\r\n\r\n case \"ancho\":\r\n return {\r\n paddingTop: 108,\r\n paddingRight: 108,\r\n paddingBottom: 108,\r\n paddingLeft: 108\r\n }\r\n\r\n case \"normal\":\r\n default:\r\n return {\r\n paddingTop: padding,\r\n paddingRight: padding,\r\n paddingBottom: padding,\r\n paddingLeft: padding\r\n }\r\n }\r\n }\r\n\r\n // Validar y sanitizar props\r\n let safeSize = size\r\n let safeOrientation = orientation\r\n let safeBackgroundColor = backgroundColor\r\n\r\n let safeMargen = margen\r\n\r\n try {\r\n // Validar size\r\n const validSizes = [\"A0\", \"A1\", \"A2\", \"A3\", \"A4\", \"A5\", \"A6\", \"A7\", \"A8\", \"A9\", \"LETTER\", \"LEGAL\", \"TABLOID\"]\r\n if (typeof size === \"string\" && !validSizes.includes(size.toUpperCase())) {\r\n console.warn(`Invalid page size: ${size}. Using A4 as default.`)\r\n safeSize = \"A4\"\r\n }\r\n\r\n // Validar orientation\r\n const validOrientations = [\"vertical\", \"horizontal\", \"portrait\", \"landscape\", \"h\", \"v\"]\r\n const normalizedOrientation = typeof orientation === \"string\" ? orientation.toLowerCase() : \"vertical\"\r\n if (!validOrientations.includes(normalizedOrientation)) {\r\n console.warn(`Invalid orientation: ${orientation}. Using vertical as default.`)\r\n safeOrientation = \"vertical\"\r\n } else {\r\n // Mantener el valor original si es válido, respetando alias\r\n safeOrientation = orientation\r\n }\r\n\r\n // Validar backgroundColor\r\n if (typeof backgroundColor !== \"string\") {\r\n console.warn(`Invalid background color: ${backgroundColor}. Using white as default.`)\r\n safeBackgroundColor = \"white\"\r\n }\r\n\r\n // Validar margen\r\n const validMargins = [\"apa\", \"normal\", \"estrecho\", \"ancho\"]\r\n if (!validMargins.includes(margen)) {\r\n console.warn(`Invalid margin type: ${margen}. Using normal as default.`)\r\n safeMargen = \"normal\"\r\n }\r\n\r\n // Validar lines\r\n if (typeof lines !== \"number\" || lines < 1) {\r\n console.warn(`Invalid lines value: ${lines}. Using 1 as default.`)\r\n\r\n }\r\n } catch (e) {\r\n console.warn(\"Error processing props in Layout:\", e)\r\n }\r\n\r\n // Transform orientation from \"vertical\"/\"horizontal\" to \"portrait\"/\"landscape\"\r\n const transformOrientation = (orientation: \"vertical\" | \"horizontal\" | \"h\" | \"v\" | \"portrait\" | \"landscape\"): \"portrait\" | \"landscape\" => {\r\n switch (orientation) {\r\n case \"vertical\":\r\n case \"portrait\":\r\n case \"v\":\r\n return \"portrait\"\r\n case \"horizontal\":\r\n case \"landscape\":\r\n case \"h\":\r\n return \"landscape\"\r\n default:\r\n console.warn(`Unrecognized orientation: ${orientation}. Using portrait as default.`)\r\n return \"portrait\"\r\n }\r\n }\r\n\r\n // Function to calculate footer position based on size and orientation\r\n const getFooterPosition = (pageSize: string, orientation: \"portrait\" | \"landscape\", footerHeight: number) => {\r\n // Dimensions in millimeters according to ISO 216 standard\r\n const pageDimensions: Record<string, { width: number; height: number }> = {\r\n A0: { width: 841, height: 1189 },\r\n A1: { width: 594, height: 841 },\r\n A2: { width: 420, height: 594 },\r\n A3: { width: 297, height: 420 },\r\n A4: { width: 210, height: 297 },\r\n A5: { width: 148, height: 210 },\r\n A6: { width: 105, height: 148 },\r\n A7: { width: 74, height: 105 },\r\n A8: { width: 52, height: 74 },\r\n A9: { width: 37, height: 52 },\r\n LETTER: { width: 216, height: 279 },\r\n LEGAL: { width: 216, height: 356 },\r\n TABLOID: { width: 279, height: 432 },\r\n }\r\n\r\n // Convert mm to points (1mm = 2.834645669 points)\r\n const mmToPoints = 2.834645669\r\n\r\n const dimensions = pageDimensions[pageSize.toUpperCase()]\r\n if (!dimensions) {\r\n // A4 default in points\r\n return orientation === \"landscape\" ? 595 - footerHeight - 10 : 842 - footerHeight - 10\r\n }\r\n\r\n const heightInPoints = dimensions.height * mmToPoints\r\n const widthInPoints = dimensions.width * mmToPoints\r\n\r\n // Subtract footer height and additional margin\r\n return orientation === \"landscape\"\r\n ? widthInPoints - footerHeight - 10\r\n : heightInPoints - footerHeight - 10\r\n }\r\n\r\n const pdfOrientation = transformOrientation(safeOrientation)\r\n\r\n // Obtener márgenes según el tipo seleccionado\r\n const margins = getMargins(safeMargen, safeSize)\r\n\r\n // Calculate footer position based on calculated footer height\r\n const footerTop = getFooterPosition(safeSize, pdfOrientation, footerHeight)\r\n\r\n // Function to render grid (ruler)\r\n const renderGrid = () => {\r\n if (!rule) return null\r\n\r\n // 1 cm = 28.3465 points\r\n const cmToPoints = 28.3465\r\n\r\n // Get page dimensions in points\r\n const pageDimensions: Record<string, { width: number; height: number }> = {\r\n A0: { width: 841 * 2.834645669, height: 1189 * 2.834645669 },\r\n A1: { width: 594 * 2.834645669, height: 841 * 2.834645669 },\r\n A2: { width: 420 * 2.834645669, height: 594 * 2.834645669 },\r\n A3: { width: 297 * 2.834645669, height: 420 * 2.834645669 },\r\n A4: { width: 210 * 2.834645669, height: 297 * 2.834645669 },\r\n A5: { width: 148 * 2.834645669, height: 210 * 2.834645669 },\r\n A6: { width: 105 * 2.834645669, height: 148 * 2.834645669 },\r\n A7: { width: 74 * 2.834645669, height: 105 * 2.834645669 },\r\n A8: { width: 52 * 2.834645669, height: 74 * 2.834645669 },\r\n A9: { width: 37 * 2.834645669, height: 52 * 2.834645669 },\r\n LETTER: { width: 216 * 2.834645669, height: 279 * 2.834645669 },\r\n LEGAL: { width: 216 * 2.834645669, height: 356 * 2.834645669 },\r\n TABLOID: { width: 279 * 2.834645669, height: 432 * 2.834645669 },\r\n }\r\n\r\n const dimensions = pageDimensions[safeSize.toUpperCase()] || pageDimensions.A4\r\n const pageWidth = pdfOrientation === \"landscape\" ? dimensions.height : dimensions.width\r\n const pageHeight = pdfOrientation === \"landscape\" ? dimensions.width : dimensions.height\r\n\r\n const horizontalLines = []\r\n const verticalLines = []\r\n\r\n // Generate horizontal lines (every cm)\r\n for (let i = 0; i <= Math.ceil(pageHeight / cmToPoints); i++) {\r\n horizontalLines.push(\r\n <View\r\n key={`h-${i}`}\r\n style={{\r\n position: \"absolute\",\r\n top: i * cmToPoints,\r\n left: 0,\r\n right: 0,\r\n height: i % 5 === 0 ? 1 : 0.5,\r\n backgroundColor: i % 5 === 0 ? \"rgba(255, 0, 0, 0.8)\" : \"rgba(100, 100, 100, 0.5)\",\r\n }}\r\n />\r\n )\r\n }\r\n\r\n // Generate vertical lines (every cm)\r\n for (let i = 0; i <= Math.ceil(pageWidth / cmToPoints); i++) {\r\n verticalLines.push(\r\n <View\r\n key={`v-${i}`}\r\n style={{\r\n position: \"absolute\",\r\n left: i * cmToPoints,\r\n top: 0,\r\n bottom: 0,\r\n width: i % 5 === 0 ? 1 : 0.5,\r\n backgroundColor: i % 5 === 0 ? \"rgba(255, 0, 0, 0.8)\" : \"rgba(100, 100, 100, 0.5)\",\r\n }}\r\n />\r\n )\r\n }\r\n\r\n return (\r\n <View style={{ position: \"absolute\", top: 0, left: 0, right: 0, bottom: 0 }} fixed>\r\n {horizontalLines}\r\n {verticalLines}\r\n </View>\r\n )\r\n }\r\n\r\n const pageStyle = {\r\n ...styles.page,\r\n backgroundColor: safeBackgroundColor,\r\n paddingTop: (style?.paddingTop ?? style?.padding ?? margins.paddingTop),\r\n paddingRight: (style?.paddingRight ?? style?.padding ?? margins.paddingRight),\r\n paddingLeft: (style?.paddingLeft ?? style?.padding ?? margins.paddingLeft),\r\n paddingBottom: (style?.paddingBottom ?? style?.padding ?? margins.paddingBottom) + footerHeight,\r\n ...((() => { const { padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest } = style || {}; return rest })()),\r\n }\r\n\r\n const footerStyle = {\r\n ...styles.footer,\r\n top: footerTop,\r\n height: footerHeight,\r\n display: \"flex\" as const,\r\n flexDirection: \"column\" as const,\r\n justifyContent: \"center\" as const,\r\n alignItems: \"center\" as const,\r\n fontSize: 10,\r\n color: \"grey\"\r\n }\r\n\r\n return (\r\n <Document>\r\n <Page size={safeSize as any} orientation={pdfOrientation} style={pageStyle} wrap>\r\n {renderGrid()}\r\n <View style={{ paddingBottom: footerHeight }}>\r\n {children}\r\n </View>\r\n\r\n <View style={footerStyle} fixed>\r\n {footer && (footer)}\r\n {pagination && (\r\n <Text style={{ fontSize: footerStyle.fontSize }} render={({ pageNumber, totalPages }) => (\r\n `${pageNumber} / ${totalPages}`\r\n )} />\r\n )}\r\n </View>\r\n\r\n </Page>\r\n </Document>\r\n )\r\n}\r\n\r\nexport default Layout\r\n","import React from \"react\"\r\nimport { Image, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ImgProps {\r\n src?: string\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n image: {\r\n width: \"100%\",\r\n height: \"auto\",\r\n marginBottom: 14,\r\n },\r\n})\r\n\r\nconst Img: React.FC<ImgProps> = ({ src, style }) => {\r\n return <Image src={src} style={[styles.image, style]} />\r\n}\r\n\r\nexport default Img","import React from \"react\"\r\nimport { View, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface PositionProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n left: {\r\n textAlign: \"left\",\r\n },\r\n right: {\r\n textAlign: \"right\",\r\n },\r\n center: {\r\n textAlign: \"center\",\r\n },\r\n})\r\n\r\nconst Left: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.left, style]}>{children}</View>\r\n}\r\n\r\nconst Right: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.right, style]}>{children}</View>\r\n}\r\n\r\nconst Center: React.FC<PositionProps> = ({ children, style }) => {\r\n return <View style={[styles.center, style]}>{children}</View>\r\n}\r\n\r\nexport { Left, Right, Center }\r\n\r\n","import React from \"react\"\r\nimport { Text, StyleSheet, Link, View } from \"@react-pdf/renderer\"\r\n\r\ninterface TextProps {\r\n children: React.ReactNode\r\n style?: any\r\n href?: string\r\n}\r\n\r\ninterface DivProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface HeaderProps {\r\n children: React.ReactNode\r\n style?: any\r\n fixed?: boolean\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n p: {\r\n fontSize: 12,\r\n marginBottom: 5,\r\n lineHeight: 1.2,\r\n },\r\n h1: {\r\n fontSize: 24,\r\n fontWeight: \"bold\",\r\n marginBottom: 12,\r\n },\r\n h2: {\r\n fontSize: 20,\r\n fontWeight: \"bold\",\r\n marginBottom: 10,\r\n },\r\n h3: {\r\n fontSize: 18,\r\n fontWeight: \"bold\",\r\n marginBottom: 8,\r\n },\r\n h4: {\r\n fontSize: 16,\r\n fontWeight: \"bold\",\r\n marginBottom: 6,\r\n },\r\n h5: {\r\n fontSize: 14,\r\n fontWeight: \"bold\",\r\n marginBottom: 4,\r\n },\r\n h6: {\r\n fontSize: 12,\r\n fontWeight: \"bold\",\r\n marginBottom: 0,\r\n },\r\n strong: {\r\n fontWeight: \"bold\",\r\n },\r\n em: {\r\n fontStyle: \"italic\",\r\n },\r\n u: {\r\n textDecoration: \"underline\",\r\n },\r\n small: {\r\n fontSize: 10,\r\n },\r\n blockquote: {\r\n marginLeft: 20,\r\n marginRight: 20,\r\n fontStyle: \"italic\",\r\n borderLeft: \"4px solid #ccc\",\r\n paddingLeft: 10,\r\n },\r\n mark: {\r\n backgroundColor: \"yellow\",\r\n },\r\n A: {\r\n color: \"#3d65fd\",\r\n textDecoration: \"none\",\r\n },\r\n br: {\r\n width: \"100%\",\r\n height: 1,\r\n marginTop: 6,\r\n marginBottom: 6,\r\n },\r\n header: {\r\n position: \"absolute\",\r\n top: 20,\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n fontSize: 10,\r\n paddingHorizontal: 40,\r\n },\r\n hr: {\r\n width: \"100%\",\r\n borderTop: \"1px solid #000\",\r\n marginTop: 6,\r\n marginBottom: 6,\r\n },\r\n})\r\n\r\nconst P: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.p, style]}>{children}</Text>\r\n}\r\n\r\nconst H1: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h1, style]}>{children}</Text>\r\n}\r\n\r\nconst H2: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h2, style]}>{children}</Text>\r\n}\r\n\r\nconst H3: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h3, style]}>{children}</Text>\r\n}\r\n\r\nconst H4: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h4, style]}>{children}</Text>\r\n}\r\n\r\nconst H5: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h5, style]}>{children}</Text>\r\n}\r\n\r\nconst H6: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.h6, style]}>{children}</Text>\r\n}\r\n\r\nconst Strong: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.strong, style]}>{children}</Text>\r\n}\r\n\r\nconst Em: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.em, style]}>{children}</Text>\r\n}\r\n\r\nconst U: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.u, style]}>{children}</Text>\r\n}\r\n\r\nconst Small: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.small, style]}>{children}</Text>\r\n}\r\n\r\nconst Blockquote: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.blockquote, style]}>{children}</Text>\r\n}\r\n\r\nconst Mark: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[styles.mark, style]}>{children}</Text>\r\n}\r\n\r\nconst A: React.FC<TextProps> = ({ children, style, href }) => {\r\n return (\r\n <Link src={href} style={[styles.A, style]}>\r\n {children}\r\n </Link>\r\n )\r\n}\r\n\r\nconst BR: React.FC<{ style?: any }> = ({ style }) => {\r\n return <Text style={[styles.br, style]}>{\"\\n\"}</Text>\r\n}\r\n\r\nconst HR: React.FC<{ style?: any }> = ({ style }) => {\r\n return <View style={[styles.hr, style]} />\r\n}\r\n\r\nconst Span: React.FC<TextProps> = ({ children, style }) => {\r\n return <Text style={[style]}>{children}</Text>\r\n}\r\n\r\nconst Div: React.FC<DivProps> = ({ children, style }) => {\r\n return <View style={style}>{children}</View>\r\n}\r\n\r\nexport { P, A, H1, H2, H3, H4, H5, H6, Strong, Em, U, Small, Blockquote, Mark, Span, BR, HR, Div }","import React, { createContext, useContext } from \"react\";\r\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\r\n\r\ninterface TableProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n cellHeight?: number;\r\n}\r\n\r\ninterface TheadProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}\r\n\r\ninterface CellProps {\r\n children?: React.ReactNode;\r\n style?: any;\r\n width?: string | number;\r\n height?: string | number;\r\n colSpan?: number;\r\n isLast?: boolean;\r\n isLastRow?: boolean;\r\n isOdd?: boolean;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}\r\n\r\n// Context para pasar cellHeight y textAlign a los componentes hijos\r\nconst TableContext = createContext<{\r\n cellHeight: number;\r\n textAlign?: \"left\" | \"center\" | \"right\" | any;\r\n}>({\r\n cellHeight: 22,\r\n textAlign: \"left\",\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n table: {\r\n width: \"100%\",\r\n borderWidth: 1,\r\n borderColor: \"#000\",\r\n marginBottom: 20,\r\n },\r\n thead: {\r\n backgroundColor: \"#ccc\",\r\n },\r\n tr: {\r\n flexDirection: \"row\",\r\n },\r\n textBold: {\r\n fontSize: 10,\r\n fontWeight: \"bold\",\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n\r\n },\r\n text: {\r\n fontSize: 10,\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n\r\n },\r\n zebraOdd: {\r\n backgroundColor: \"#eeeeee\",\r\n },\r\n});\r\n\r\nconst Table: React.FC<TableProps> = ({ children, style, cellHeight = 22 }) => (\r\n <TableContext.Provider value={{ cellHeight, textAlign: \"left\" }}>\r\n <View style={[styles.table, style]}>{children}</View>\r\n </TableContext.Provider>\r\n);\r\n\r\nconst Thead: React.FC<TheadProps> = ({\r\n children,\r\n style,\r\n textAlign = \"left\",\r\n}) => {\r\n const { cellHeight } = useContext(TableContext);\r\n\r\n return (\r\n <TableContext.Provider value={{ cellHeight, textAlign }}>\r\n <View style={[styles.thead, style]}>{children}</View>\r\n </TableContext.Provider>\r\n );\r\n};\r\n\r\nconst Tbody: React.FC<TableProps> = ({ children }) => {\r\n const rows = React.Children.toArray(children) as React.ReactElement<any>[];\r\n const count = rows.length;\r\n return (\r\n <>\r\n {rows.map((row, idx) =>\r\n React.cloneElement(row, {\r\n isLastRow: idx === count - 1,\r\n isOdd: idx % 2 === 1,\r\n })\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nconst Tr: React.FC<TableProps & { isLastRow?: boolean; isOdd?: boolean }> = ({\r\n children,\r\n style,\r\n isLastRow = false,\r\n isOdd = false,\r\n}) => {\r\n const elements = React.Children.toArray(\r\n children\r\n ) as React.ReactElement<CellProps>[];\r\n const count = elements.length;\r\n return (\r\n <View style={[styles.tr, style]}>\r\n {elements.map((child, idx) => {\r\n const isLast = idx === count - 1;\r\n const width = `${(100 / count).toFixed(2)}%`;\r\n return React.cloneElement(child, { width, isLast, isLastRow, isOdd });\r\n })}\r\n </View>\r\n );\r\n};\r\n\r\nconst Th: React.FC<CellProps> = ({\r\n children,\r\n style,\r\n width,\r\n height,\r\n colSpan,\r\n isLast = false,\r\n isLastRow = false,\r\n textAlign: propTextAlign,\r\n}) => {\r\n const { cellHeight, textAlign: contextTextAlign } = useContext(TableContext);\r\n\r\n // Usar textAlign del prop si está definido, sino el del contexto\r\n const finalTextAlign = propTextAlign || contextTextAlign || \"left\";\r\n\r\n const baseWidth =\r\n typeof width === \"string\" && colSpan\r\n ? `${(parseFloat(width) * colSpan).toFixed(2)}%`\r\n : width;\r\n\r\n const cellHeightValue = height !== undefined ? height : cellHeight;\r\n\r\n const borders = {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor: \"#000\",\r\n minHeight: cellHeightValue,\r\n };\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.textBold,\r\n {\r\n width: baseWidth,\r\n },\r\n borders,\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign }}>{children}</Text>\r\n </View>\r\n );\r\n};\r\n\r\nconst Td: React.FC<CellProps> = ({\r\n children,\r\n style,\r\n width,\r\n height,\r\n colSpan,\r\n isLast = false,\r\n isLastRow = false,\r\n isOdd = false,\r\n textAlign: propTextAlign,\r\n}) => {\r\n const { cellHeight, textAlign: contextTextAlign } = useContext(TableContext);\r\n\r\n // Usar textAlign del prop si está definido, sino el del contexto, sino 'left'\r\n const finalTextAlign = propTextAlign || contextTextAlign || \"left\";\r\n\r\n const baseWidth =\r\n typeof width === \"string\" && colSpan\r\n ? `${(parseFloat(width) * colSpan).toFixed(2)}%`\r\n : width;\r\n\r\n const cellHeightValue = height !== undefined ? height : cellHeight;\r\n\r\n const borders = {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor: \"#000\",\r\n minHeight: cellHeightValue,\r\n };\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.text,\r\n isOdd && styles.zebraOdd,\r\n {\r\n width: baseWidth,\r\n },\r\n borders,\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign }}>{children}</Text>\r\n </View>\r\n );\r\n};\r\n\r\nexport { Table, Thead, Tbody, Tr, Th, Td };\r\n","import React from \"react\"\r\nimport { View, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ContainerProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface RowProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\ninterface ColProps {\r\n children: React.ReactNode\r\n style?: any\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n width: \"100%\",\r\n },\r\n row: {\r\n flexDirection: \"row\",\r\n flexWrap: \"wrap\",\r\n },\r\n\r\n col1: { width: \"8.33%\" },\r\n col2: { width: \"16.66%\" },\r\n col3: { width: \"25%\" },\r\n col4: { width: \"33.33%\" },\r\n col5: { width: \"41.66%\" },\r\n col6: { width: \"50%\" },\r\n col7: { width: \"58.33%\" },\r\n col8: { width: \"66.66%\" },\r\n col9: { width: \"75%\" },\r\n col10: { width: \"83.33%\" },\r\n col11: { width: \"91.66%\" },\r\n col12: { width: \"100%\" },\r\n})\r\n\r\nexport const Container: React.FC<ContainerProps> = ({ children, style }) => {\r\n return <View style={[styles.container, style]}>{children}</View>\r\n}\r\n\r\nexport const Row: React.FC<RowProps> = ({ children, style }) => {\r\n return <View style={[styles.row, style]}>{children}</View>\r\n}\r\n\r\nexport const Col1: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col1, style]}>{children}</View>\r\n}\r\n\r\nexport const Col2: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col2, style]}>{children}</View>\r\n}\r\n\r\nexport const Col3: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col3, style]}>{children}</View>\r\n}\r\n\r\nexport const Col4: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col4, style]}>{children}</View>\r\n}\r\n\r\nexport const Col5: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col5, style]}>{children}</View>\r\n}\r\n\r\nexport const Col6: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col6, style]}>{children}</View>\r\n}\r\n\r\nexport const Col7: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col7, style]}>{children}</View>\r\n}\r\n\r\nexport const Col8: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col8, style]}>{children}</View>\r\n}\r\n\r\nexport const Col9: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col9, style]}>{children}</View>\r\n}\r\n\r\nexport const Col10: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col10, style]}>{children}</View>\r\n}\r\n\r\nexport const Col11: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col11, style]}>{children}</View>\r\n}\r\n\r\nexport const Col12: React.FC<ColProps> = ({ children, style }) => {\r\n return <View style={[styles.col12, style]}>{children}</View>\r\n}\r\n\r\n","import QRCode from \"qrcode\"\r\n\r\ninterface QROptions {\r\n value: string\r\n size?: number\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n logoImage?: string\r\n logoWidth?: number\r\n logoHeight?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nexport const generateQRAsBase64 = async ({\r\n value,\r\n size = 150,\r\n colorDark = \"#000000\",\r\n colorLight = \"#ffffff\",\r\n margin = 0,\r\n errorCorrectionLevel = \"M\",\r\n}: QROptions): Promise<string> => {\r\n try {\r\n // Configuración para QRCode\r\n const options = {\r\n errorCorrectionLevel: errorCorrectionLevel,\r\n type: \"image/png\" as const,\r\n quality: 0.92,\r\n margin: margin,\r\n color: {\r\n dark: colorDark,\r\n light: colorLight,\r\n },\r\n width: size,\r\n }\r\n\r\n // Generar el código QR como base64\r\n const qrDataUrl = QRCode.toDataURL(value, options)\r\n return qrDataUrl\r\n } catch (error) {\r\n console.error(\"Error generando QR:\", error)\r\n return \"\"\r\n }\r\n}\r\n\r\n// Función para añadir un logo al QR generado\r\nexport const addLogoToQR = async (\r\n qrDataUrl: string,\r\n logoUrl: string,\r\n logoWidth: number,\r\n logoHeight: number,\r\n): Promise<string> => {\r\n return new Promise(async (resolve) => {\r\n if (!qrDataUrl || !logoUrl) {\r\n resolve(qrDataUrl)\r\n return\r\n }\r\n\r\n try {\r\n const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\r\n let canvas: any;\r\n let ctx: any;\r\n let ImageConstructor: any;\r\n\r\n if (isBrowser) {\r\n canvas = document.createElement(\"canvas\")\r\n ctx = canvas.getContext(\"2d\")\r\n ImageConstructor = window.Image;\r\n } else {\r\n // Node environment\r\n try {\r\n // Use dynamic imports to avoid bundling canvas in browser build if possible\r\n // although typically 'canvas' is excluded from browser bundles or shimmed.\r\n const { createCanvas, Image } = await import('canvas');\r\n canvas = createCanvas(100, 100); // Initial size, will be resized\r\n ctx = canvas.getContext(\"2d\");\r\n ImageConstructor = Image;\r\n } catch (e) {\r\n console.error(\"Canvas not available in Node environment for addLogoToQR\", e);\r\n resolve(qrDataUrl);\r\n return;\r\n }\r\n }\r\n\r\n if (!ctx) {\r\n resolve(qrDataUrl)\r\n return\r\n }\r\n\r\n // Cargar la imagen del QR\r\n const qrImage = new ImageConstructor()\r\n // crossOrigin is only needed in browser usually, but node-canvas might support/ignore it\r\n if (isBrowser) qrImage.crossOrigin = \"anonymous\"\r\n \r\n qrImage.onload = () => {\r\n // Establecer el tamaño del canvas\r\n canvas.width = qrImage.width\r\n canvas.height = qrImage.height\r\n\r\n // Dibujar el QR en el canvas\r\n ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height)\r\n\r\n // Cargar el logo\r\n const logoImage = new ImageConstructor()\r\n if (isBrowser) logoImage.crossOrigin = \"anonymous\"\r\n \r\n logoImage.onload = () => {\r\n // Calcular la posición central para el logo\r\n const x = (canvas.width - logoWidth) / 2\r\n const y = (canvas.height - logoHeight) / 2\r\n\r\n // Dibujar un fondo blanco para el logo (opcional)\r\n ctx.fillStyle = \"#FFFFFF\"\r\n ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10)\r\n\r\n // Dibujar el logo\r\n ctx.drawImage(logoImage, x, y, logoWidth, logoHeight)\r\n\r\n // Convertir el canvas a base64\r\n const finalQrDataUrl = canvas.toDataURL(\"image/png\")\r\n resolve(finalQrDataUrl)\r\n }\r\n\r\n logoImage.onerror = (err: any) => {\r\n console.error(\"Error cargando el logo:\", err)\r\n resolve(qrDataUrl) // Devolver el QR sin logo en caso de error\r\n }\r\n\r\n logoImage.src = logoUrl\r\n }\r\n\r\n qrImage.onerror = (err: any) => {\r\n console.error(\"Error cargando el QR:\", err)\r\n resolve(\"\")\r\n }\r\n\r\n qrImage.src = qrDataUrl\r\n } catch (error) {\r\n console.error(\"Error procesando el QR con logo:\", error)\r\n resolve(qrDataUrl) // Devolver el QR sin logo en caso de error\r\n }\r\n })\r\n}\r\n","\"use client\"\r\n\r\nimport React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\nimport { useEffect, useState } from \"react\"\r\nimport { generateQRAsBase64, addLogoToQR } from \"./QRGenerator\"\r\n\r\n// Define the props for the QR component\r\ninterface QRProps {\r\n value: string\r\n size?: number\r\n style?: any\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n logo?: string\r\n logoWidth?: number\r\n logoHeight?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n qrContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n margin: 10,\r\n },\r\n})\r\n\r\n// Mapa para convertir niveles de corrección numéricos a letras\r\nconst errorLevelMap: Record<number, \"L\" | \"M\" | \"Q\" | \"H\"> = {\r\n 0: \"L\",\r\n 1: \"M\",\r\n 2: \"Q\",\r\n 3: \"H\",\r\n}\r\n\r\n// Este componente funciona con React PDF\r\nconst QR: React.FC<QRProps> = ({\r\n value,\r\n size = 150,\r\n style,\r\n colorDark = \"#000000\",\r\n colorLight = \"#ffffff\",\r\n margin = 0,\r\n logo = \"\",\r\n logoWidth = 30,\r\n logoHeight = 30,\r\n errorCorrectionLevel = logo ? \"H\" : \"M\",\r\n}) => {\r\n const [qrDataUrl, setQrDataUrl] = useState<string>(\"\")\r\n\r\n // Generar el código QR cuando el componente se monta o cuando cambian las props\r\n useEffect(() => {\r\n const generateQR = async () => {\r\n try {\r\n // Primero generamos el QR básico\r\n const baseQrDataUrl = await generateQRAsBase64({\r\n value,\r\n size,\r\n colorDark,\r\n colorLight,\r\n margin,\r\n errorCorrectionLevel:\r\n typeof errorCorrectionLevel === \"number\"\r\n ? errorLevelMap[errorCorrectionLevel] || \"M\"\r\n : errorCorrectionLevel,\r\n })\r\n\r\n // Si hay un logo, lo añadimos al QR\r\n if (logo && logoWidth && logoHeight) {\r\n const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight)\r\n setQrDataUrl(qrWithLogo)\r\n } else {\r\n setQrDataUrl(baseQrDataUrl)\r\n }\r\n } catch (error) {\r\n console.error(\"Error generando QR:\", error)\r\n // En caso de error, generamos un QR básico usando una API externa\r\n const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(\r\n value,\r\n )}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace(\"#\", \"\"))}&bgcolor=${encodeURIComponent(\r\n colorLight.replace(\"#\", \"\"),\r\n )}`\r\n setQrDataUrl(fallbackUrl)\r\n }\r\n }\r\n\r\n generateQR()\r\n }, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel])\r\n\r\n // Mostrar un QR de respaldo mientras se genera el QR personalizado\r\n const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(\r\n value,\r\n )}&size=${size}x${size}`\r\n\r\n return (\r\n <View style={[styles.qrContainer, style]}>\r\n <Image src={qrDataUrl || fallbackUrl} style={{ width: size, height: size }} />\r\n </View>\r\n )\r\n}\r\n\r\nexport default QR\r\n\r\n","import { generateQRAsBase64 } from \"./QRGenerator\"\r\n\r\nexport interface QRV2Options {\r\n value: string\r\n width?: number\r\n height?: number\r\n image?: string\r\n dotsOptions?: {\r\n color?: string\r\n type?: \"rounded\" | \"dots\" | \"classy\" | \"classy-rounded\" | \"square\" | \"extra-rounded\"\r\n }\r\n backgroundOptions?: {\r\n color?: string\r\n }\r\n imageOptions?: {\r\n crossOrigin?: string\r\n margin?: number\r\n imageSize?: number // 0-1 (e.g., 0.4)\r\n }\r\n cornersSquareOptions?: {\r\n type?: \"dot\" | \"square\" | \"extra-rounded\"\r\n color?: string\r\n }\r\n cornersDotOptions?: {\r\n type?: \"dot\" | \"square\"\r\n color?: string\r\n }\r\n // Fallback options\r\n fallbackColorDark?: string\r\n fallbackColorLight?: string\r\n fallbackMargin?: number\r\n fallbackErrorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nexport const generateQRV2AsBase64 = async (options: QRV2Options): Promise<string> => {\r\n try {\r\n const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\r\n \r\n let QRCodeStylingConstructor: any;\r\n let extraOptions = {};\r\n\r\n if (isBrowser) {\r\n // Dynamic import for browser\r\n try {\r\n const mod = await import('qr-code-styling');\r\n QRCodeStylingConstructor = mod.default || mod;\r\n } catch (e) {\r\n console.error(\"Failed to load qr-code-styling in browser\", e);\r\n throw e;\r\n }\r\n } else {\r\n // Node environment\r\n // We use variable names to prevent bundlers (like Vite) from analyzing/bundling these dependencies\r\n // when building for the browser.\r\n const jsdomName = \"jsdom\";\r\n const canvasName = \"canvas\";\r\n const qrCommonName = \"qr-code-styling/lib/qr-code-styling.common.js\";\r\n \r\n try {\r\n const [jsdomMod, canvasMod, qrCommonMod] = await Promise.all([\r\n import(/* @vite-ignore */ jsdomName),\r\n import(/* @vite-ignore */ canvasName),\r\n import(/* @vite-ignore */ qrCommonName)\r\n ]);\r\n\r\n const { JSDOM } = jsdomMod;\r\n // canvas might be default export or named export depending on version/bundling\r\n const nodeCanvas = canvasMod.default || canvasMod;\r\n const { QRCodeStyling } = qrCommonMod;\r\n\r\n QRCodeStylingConstructor = QRCodeStyling;\r\n extraOptions = {\r\n jsdom: JSDOM,\r\n nodeCanvas: nodeCanvas\r\n };\r\n } catch (e) {\r\n console.error(\"Failed to load Node dependencies for QR generation\", e);\r\n throw e;\r\n }\r\n }\r\n\r\n const width = typeof options.width === \"number\" && isFinite(options.width) ? Math.round(options.width) : 300;\r\n const height = typeof options.height === \"number\" && isFinite(options.height) ? Math.round(options.height) : 300;\r\n \r\n\r\n const qrOptions = {\r\n width,\r\n height,\r\n data: options.value,\r\n image: options.image,\r\n dotsOptions: options.dotsOptions,\r\n backgroundOptions: {\r\n // Default to white background if not specified to prevent transparency issues\r\n // The \"blue stripe\" or weird artifacts can happen if the background is transparent or handled incorrectly\r\n color: options.backgroundOptions?.color || \"#ffffff\",\r\n ...options.backgroundOptions\r\n },\r\n imageOptions: {\r\n crossOrigin: \"anonymous\",\r\n margin: typeof options.imageOptions?.margin === \"number\" && isFinite(options.imageOptions.margin) ? options.imageOptions.margin : 0,\r\n saveAsBlob: true,\r\n imageSize: typeof options.imageOptions?.imageSize === \"number\" && isFinite(options.imageOptions.imageSize)\r\n ? Math.max(0, Math.min(1, options.imageOptions.imageSize))\r\n : 0.4,\r\n },\r\n cornersSquareOptions: options.cornersSquareOptions,\r\n cornersDotOptions: options.cornersDotOptions,\r\n }\r\n\r\n // @ts-ignore\r\n const qrCodeImage = new QRCodeStylingConstructor({\r\n type: \"png\", // Force PNG type\r\n ...extraOptions,\r\n ...qrOptions,\r\n })\r\n\r\n const rawData = await qrCodeImage.getRawData(\"png\")\r\n \r\n if (!rawData) throw new Error(\"Failed to generate raw data from qr-code-styling\")\r\n\r\n // Handle Blob (Browser) vs Buffer (Node)\r\n if (isBrowser) {\r\n if (rawData instanceof Blob) {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => {\r\n if (typeof reader.result === 'string') {\r\n resolve(reader.result);\r\n } else {\r\n reject(new Error(\"Failed to convert blob to base64\"));\r\n }\r\n };\r\n reader.onerror = reject;\r\n reader.readAsDataURL(rawData);\r\n });\r\n } else {\r\n // Sometimes in browser it might return something else if configured differently?\r\n // But usually Blob.\r\n console.warn(\"Unexpected rawData type in browser:\", rawData);\r\n }\r\n } \r\n \r\n // Node environment usually returns Buffer\r\n if (typeof Buffer !== 'undefined' && Buffer.isBuffer(rawData)) {\r\n return `data:image/png;base64,${rawData.toString(\"base64\")}`;\r\n }\r\n \r\n // Fallback if type is unexpected\r\n // Try to handle if it's a blob-like object in Node (unlikely but possible with polyfills)\r\n throw new Error(`Unexpected raw data type: ${typeof rawData}`);\r\n\r\n } catch (error) {\r\n console.error(\"Error generating QR V2, falling back to V1:\", error)\r\n \r\n // Fallback to existing implementation\r\n return generateQRAsBase64({\r\n value: options.value,\r\n size: options.width,\r\n colorDark: options.fallbackColorDark || options.dotsOptions?.color,\r\n colorLight: options.fallbackColorLight || options.backgroundOptions?.color,\r\n margin: options.fallbackMargin || 0,\r\n errorCorrectionLevel: options.fallbackErrorCorrectionLevel || \"M\",\r\n })\r\n }\r\n}\r\n","\"use client\"\r\n\r\nimport React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\nimport { generateQRV2AsBase64, type QRV2Options } from \"./QRstyleGenerator\"\r\n\r\n// Define props\r\nexport interface QRV2Props {\r\n value: string\r\n size?: number\r\n style?: any\r\n image?: string\r\n dotsOptions?: QRV2Options[\"dotsOptions\"]\r\n backgroundOptions?: QRV2Options[\"backgroundOptions\"]\r\n imageOptions?: QRV2Options[\"imageOptions\"]\r\n cornersSquareOptions?: QRV2Options[\"cornersSquareOptions\"]\r\n cornersDotOptions?: QRV2Options[\"cornersDotOptions\"]\r\n // Fallback/Compatibility props\r\n colorDark?: string\r\n colorLight?: string\r\n margin?: number\r\n errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n qrContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n})\r\n\r\nconst QRV2: React.FC<QRV2Props> = ({\r\n value,\r\n size = 300,\r\n style,\r\n image,\r\n dotsOptions,\r\n backgroundOptions,\r\n imageOptions,\r\n cornersSquareOptions,\r\n cornersDotOptions,\r\n colorDark,\r\n colorLight,\r\n margin,\r\n errorCorrectionLevel,\r\n}) => {\r\n return (\r\n <View style={[styles.qrContainer, style]}>\r\n {/* We pass a function that returns the promise/result or use the state if available. \r\n Actually, we can pass the promise directly to src! */}\r\n <Image \r\n style={{ width: size, height: size }} \r\n src={generateQRV2AsBase64({\r\n value,\r\n width: size,\r\n height: size,\r\n image,\r\n dotsOptions: dotsOptions || (colorDark ? { color: colorDark } : undefined),\r\n backgroundOptions: backgroundOptions || (colorLight ? { color: colorLight } : undefined),\r\n imageOptions: {\r\n ...imageOptions,\r\n margin: imageOptions?.margin !== undefined ? imageOptions.margin : margin\r\n },\r\n cornersSquareOptions,\r\n cornersDotOptions,\r\n fallbackColorDark: colorDark,\r\n fallbackColorLight: colorLight,\r\n fallbackMargin: margin,\r\n fallbackErrorCorrectionLevel: errorCorrectionLevel,\r\n })} \r\n />\r\n </View>\r\n )\r\n}\r\n\r\nexport default QRV2\r\n","import React from \"react\"\r\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\"\r\n\r\ninterface ListProps {\r\n children: React.ReactNode\r\n style?: any\r\n start?: number // Para listas ordenadas, desde qué número empezar\r\n type?: \"disc\" | \"circle\" | \"square\" | \"decimal\" | \"lower-alpha\" | \"upper-alpha\" | \"lower-roman\" | \"upper-roman\"\r\n}\r\n\r\ninterface ListItemProps {\r\n children: React.ReactNode\r\n style?: any\r\n value?: number | string // Valor específico para este elemento de lista\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n ul: {\r\n marginBottom: 10,\r\n paddingLeft: 15,\r\n },\r\n ol: {\r\n marginBottom: 10,\r\n paddingLeft: 15,\r\n },\r\n li: {\r\n marginBottom: 5,\r\n flexDirection: \"row\",\r\n },\r\n bulletPoint: {\r\n width: 15,\r\n marginRight: 5,\r\n fontSize: 12,\r\n },\r\n itemContent: {\r\n flex: 1,\r\n },\r\n})\r\n\r\n// Función para generar marcadores de lista desordenada\r\nconst getBulletPoint = (type = \"disc\") => {\r\n switch (type) {\r\n case \"circle\":\r\n return \"○\"\r\n case \"square\":\r\n return \"■\"\r\n case \"disc\":\r\n default:\r\n return \"•\"\r\n }\r\n}\r\n\r\n// Función para generar marcadores de lista ordenada\r\nconst getOrderedMarker = (index: number, type = \"decimal\", start = 1) => {\r\n const actualIndex = start + index - 1\r\n\r\n switch (type) {\r\n case \"lower-alpha\":\r\n return String.fromCharCode(97 + (actualIndex % 26)) + \".\"\r\n case \"upper-alpha\":\r\n return String.fromCharCode(65 + (actualIndex % 26)) + \".\"\r\n case \"lower-roman\":\r\n return toRoman(actualIndex).toLowerCase() + \".\"\r\n case \"upper-roman\":\r\n return toRoman(actualIndex) + \".\"\r\n case \"decimal\":\r\n default:\r\n return actualIndex + \".\"\r\n }\r\n}\r\n\r\n// Función para convertir números a numerales romanos\r\nconst toRoman = (num: number): string => {\r\n if (num <= 0 || num > 3999) return String(num)\r\n\r\n const romanNumerals = [\r\n [\"\", \"I\", \"II\", \"III\", \"IV\", \"V\", \"VI\", \"VII\", \"VIII\", \"IX\"],\r\n [\"\", \"X\", \"XX\", \"XXX\", \"XL\", \"L\", \"LX\", \"LXX\", \"LXXX\", \"XC\"],\r\n [\"\", \"C\", \"CC\", \"CCC\", \"CD\", \"D\", \"DC\", \"DCC\", \"DCCC\", \"CM\"],\r\n [\"\", \"M\", \"MM\", \"MMM\"],\r\n ]\r\n\r\n return (\r\n romanNumerals[3][Math.floor(num / 1000)] +\r\n romanNumerals[2][Math.floor((num % 1000) / 100)] +\r\n romanNumerals[1][Math.floor((num % 100) / 10)] +\r\n romanNumerals[0][num % 10]\r\n )\r\n}\r\n\r\n// Componente de lista desordenada (UL)\r\nexport const UL: React.FC<ListProps> = ({ children, style, type = \"disc\" }) => {\r\n // Clonar los hijos para añadir el tipo de marcador\r\n const childrenWithBullets = React.Children.map(children, (child, index) => {\r\n if (React.isValidElement(child)) {\r\n return React.cloneElement(child as React.ReactElement<any>, {\r\n bulletType: type,\r\n isOrdered: false,\r\n index: index + 1,\r\n })\r\n }\r\n return child\r\n })\r\n\r\n return <View style={[styles.ul, style]}>{childrenWithBullets}</View>\r\n}\r\n\r\n// Componente de lista ordenada (OL)\r\nexport const OL: React.FC<ListProps> = ({ children, style, type = \"decimal\", start = 1 }) => {\r\n // Clonar los hijos para añadir el tipo de marcador y el índice\r\n const childrenWithNumbers = React.Children.map(children, (child, index) => {\r\n if (React.isValidElement(child)) {\r\n return React.cloneElement(child as React.ReactElement<any>, {\r\n bulletType: type,\r\n isOrdered: true,\r\n index: index + 1,\r\n start,\r\n })\r\n }\r\n return child\r\n })\r\n\r\n return <View style={[styles.ol, style]}>{childrenWithNumbers}</View>\r\n}\r\n\r\n// Componente de elemento de lista (LI)\r\nexport const LI: React.FC<\r\n ListItemProps & {\r\n bulletType?: string\r\n isOrdered?: boolean\r\n index?: number\r\n start?: number\r\n }\r\n> = ({ children, style, bulletType = \"disc\", isOrdered = false, index = 1, start = 1, value }) => {\r\n // Determinar el marcador a mostrar\r\n let marker\r\n if (isOrdered) {\r\n // Si se proporciona un valor específico, usarlo en lugar del índice\r\n const actualIndex = value !== undefined ? Number(value) : index\r\n marker = getOrderedMarker(actualIndex, bulletType, start)\r\n } else {\r\n marker = getBulletPoint(bulletType)\r\n }\r\n\r\n return (\r\n <View style={[styles.li, style]}>\r\n <Text style={styles.bulletPoint}>{marker}</Text>\r\n <View style={styles.itemContent}>{typeof children === \"string\" ? <Text>{children}</Text> : children}</View>\r\n </View>\r\n )\r\n}\r\n\r\n","import React from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\r\n\r\ninterface ImgBgProps {\r\n src: string\r\n width?: number | string\r\n height?: number | string\r\n opacity?: number\r\n children?: React.ReactNode\r\n style?: any\r\n fixed?: boolean\r\n objectFit?: \"cover\" | \"contain\" | \"fill\" | \"none\" | \"scale-down\"\r\n objectPosition?: \"center\" | \"top\" | \"left\" | \"right\" | \"bottom\"\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n position: \"relative\",\r\n width: \"100%\",\r\n height: \"100%\",\r\n },\r\n background: {\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n },\r\n content: {\r\n position: \"relative\",\r\n },\r\n})\r\n\r\nconst ImgBg: React.FC<ImgBgProps> = ({\r\n src,\r\n width = \"100%\",\r\n height = \"100%\",\r\n opacity = 0.2,\r\n children,\r\n style,\r\n fixed = false,\r\n objectFit = \"cover\",\r\n objectPosition = \"center\",\r\n}) => {\r\n return (\r\n <View style={[styles.container, style]}>\r\n <Image\r\n src={src}\r\n style={[\r\n styles.background,\r\n { width, height, opacity, objectFit, objectPosition },\r\n ]}\r\n fixed={fixed}\r\n />\r\n <View style={styles.content}>{children}</View>\r\n </View>\r\n )\r\n}\r\n\r\nexport default ImgBg\r\n"]}
|