@react-pdf-levelup/chart 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var renderer=require('@react-pdf/renderer'),jsxRuntime=require('react/jsx-runtime'),react=require('react');require('qrcode');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%"}});renderer.StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center",margin:10}});renderer.StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center"}});var R=async(s,{width:r=600,height:o=400,backgroundColor:d="transparent",devicePixelRatio:i=2}={})=>{try{let{Chart:n,registerables:a}=await import('chart.js');n.register(...a);let e=document.createElement("canvas");e.width=r*i,e.height=o*i,e.style.width=`${r}px`,e.style.height=`${o}px`;let c=e.getContext("2d");if(!c)return console.error("No se pudo obtener el contexto 2D del canvas"),"";c.scale(i,i),d&&d!=="transparent"&&(c.fillStyle=d,c.fillRect(0,0,r,o));let h={...s,options:{responsive:!1,maintainAspectRatio:!1,...s.options||{},devicePixelRatio:i,animation:!1}},f=new n(c,h);await new Promise(g=>setTimeout(g,50));let t=e.toDataURL("image/png",1);return f.destroy(),!t||t==="data:,"||!t.startsWith("data:image")?(console.error("Data URL generada es inv\xE1lida:",t),""):(console.log("Gr\xE1fico generado correctamente. Tama\xF1o:",t.length,"bytes"),t)}catch(n){return console.error("\u274C Error generando gr\xE1fico:",n),console.error("Configuraci\xF3n:",s),console.error("Stack:",n instanceof Error?n.stack:"No stack available"),""}};var y=renderer.StyleSheet.create({container:{display:"flex",alignItems:"center",justifyContent:"center"},errorText:{color:"red",fontSize:12,padding:10},loadingText:{color:"#666",fontSize:10,padding:10}}),D=({data:s,width:r=600,height:o=400,backgroundColor:d="white",devicePixelRatio:i=2,style:n})=>{let[a,e]=react.useState(""),[c,h]=react.useState(true),[f,t]=react.useState(""),g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";return react.useEffect(()=>{let u=true;return (async()=>{try{h(!0),t(""),console.log("\u{1F504} Generando gr\xE1fico con configuraci\xF3n:",s.type);let l=await R(s,{width:r,height:o,backgroundColor:d,devicePixelRatio:i});if(!u)return;if(!l||l==="data:,"){let p="No se pudo generar el gr\xE1fico. Data URL vac\xEDa.";console.error("\u274C",p),t(p),e(g);}else console.log("Gr\xE1fico generado. Tama\xF1o:",l.length,"bytes"),e(l);}catch(l){if(!u)return;let p=l instanceof Error?l.message:"Error desconocido";console.error("\u274C Error en Chart.tsx:",p),t(p),e(g);}finally{u&&h(false);}})(),()=>{u=false;}},[JSON.stringify(s),r,o,d,i]),react.useEffect(()=>{a&&a!==g&&console.log("Chart.tsx - URL actualizada:",a.substring(0,50)+"...");},[a]),f&&process.env.NODE_ENV==="development"?jsxRuntime.jsx(renderer.View,{style:[y.container,n,{width:r,height:o}],children:jsxRuntime.jsxs(renderer.Text,{style:y.errorText,children:["Error: ",f]})}):jsxRuntime.jsx(renderer.View,{style:[y.container,n],children:a&&a!==g?jsxRuntime.jsx(renderer.Image,{src:a,style:{width:r,height:o},cache:false}):jsxRuntime.jsx(renderer.View,{style:{width:r,height:o,backgroundColor:"#f0f0f0"},children:c&&jsxRuntime.jsx(renderer.Text,{style:y.loadingText,children:"Generando gr\xE1fico..."})})})},A=D;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"}});exports.ChartJS=A;//# sourceMappingURL=index.cjs.map
1
+ 'use strict';var renderer=require('@react-pdf/renderer'),jsxRuntime=require('react/jsx-runtime'),react=require('react');require('qrcode');renderer.StyleSheet.create({page:{backgroundColor:"white",padding:30,fontSize:14},footer:{position:"absolute",left:0,right:0,textAlign:"center"},backgroundImage:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1}});renderer.StyleSheet.create({image:{width:"100%",height:"auto",marginBottom:14}});renderer.StyleSheet.create({left:{alignItems:"flex-start",textAlign:"left"},right:{alignItems:"flex-end",textAlign:"right"},center:{alignItems:"center",textAlign:"center"},vertical:{justifyContent:"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",borderColor:"#000",textColor:"#000",headerBackground:"#ccc",zebraColor:"#eeeeee",grid:"grid"});renderer.StyleSheet.create({table:{width:"100%",marginBottom:20},tr:{flexDirection:"row"},th:{fontSize:10,fontWeight:"bold",paddingLeft:8,paddingRight:8,justifyContent:"center"},td:{fontSize:10,paddingLeft:8,paddingRight:8,justifyContent:"center"}});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%"}});renderer.StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center",margin:10}});renderer.StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center"}});var b=async(s,{width:r=600,height:o=400,backgroundColor:d="transparent",devicePixelRatio:i=2}={})=>{try{let{Chart:n,registerables:a}=await import('chart.js');n.register(...a);let e=document.createElement("canvas");e.width=r*i,e.height=o*i,e.style.width=`${r}px`,e.style.height=`${o}px`;let c=e.getContext("2d");if(!c)return console.error("No se pudo obtener el contexto 2D del canvas"),"";c.scale(i,i),d&&d!=="transparent"&&(c.fillStyle=d,c.fillRect(0,0,r,o));let f={...s,options:{responsive:!1,maintainAspectRatio:!1,...s.options||{},devicePixelRatio:i,animation:!1}},h=new n(c,f);await new Promise(g=>setTimeout(g,50));let t=e.toDataURL("image/png",1);return h.destroy(),!t||t==="data:,"||!t.startsWith("data:image")?(console.error("Data URL generada es inv\xE1lida:",t),""):(console.log("Gr\xE1fico generado correctamente. Tama\xF1o:",t.length,"bytes"),t)}catch(n){return console.error("\u274C Error generando gr\xE1fico:",n),console.error("Configuraci\xF3n:",s),console.error("Stack:",n instanceof Error?n.stack:"No stack available"),""}};var y=renderer.StyleSheet.create({container:{display:"flex",alignItems:"center",justifyContent:"center"},errorText:{color:"red",fontSize:12,padding:10},loadingText:{color:"#666",fontSize:10,padding:10}}),D=({data:s,width:r=600,height:o=400,backgroundColor:d="white",devicePixelRatio:i=2,style:n})=>{let[a,e]=react.useState(""),[c,f]=react.useState(true),[h,t]=react.useState(""),g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";return react.useEffect(()=>{let u=true;return (async()=>{try{f(!0),t(""),console.log("\u{1F504} Generando gr\xE1fico con configuraci\xF3n:",s.type);let l=await b(s,{width:r,height:o,backgroundColor:d,devicePixelRatio:i});if(!u)return;if(!l||l==="data:,"){let p="No se pudo generar el gr\xE1fico. Data URL vac\xEDa.";console.error("\u274C",p),t(p),e(g);}else console.log("Gr\xE1fico generado. Tama\xF1o:",l.length,"bytes"),e(l);}catch(l){if(!u)return;let p=l instanceof Error?l.message:"Error desconocido";console.error("\u274C Error en Chart.tsx:",p),t(p),e(g);}finally{u&&f(false);}})(),()=>{u=false;}},[JSON.stringify(s),r,o,d,i]),react.useEffect(()=>{a&&a!==g&&console.log("Chart.tsx - URL actualizada:",a.substring(0,50)+"...");},[a]),h&&process.env.NODE_ENV==="development"?jsxRuntime.jsx(renderer.View,{style:[y.container,n,{width:r,height:o}],children:jsxRuntime.jsxs(renderer.Text,{style:y.errorText,children:["Error: ",h]})}):jsxRuntime.jsx(renderer.View,{style:[y.container,n],children:a&&a!==g?jsxRuntime.jsx(renderer.Image,{src:a,style:{width:r,height:o},cache:false}):jsxRuntime.jsx(renderer.View,{style:{width:r,height:o,backgroundColor:"#f0f0f0"},children:c&&jsxRuntime.jsx(renderer.Text,{style:y.loadingText,children:"Generando gr\xE1fico..."})})})},A=D;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"}});exports.ChartJS=A;//# sourceMappingURL=index.cjs.map
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
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/QR.tsx","../../../frontend/src/components/core/qr/QRstyle.tsx","../../../frontend/src/components/core/charts/ChartJSGenerator.ts","../../../frontend/src/components/core/charts/ChartJS.tsx","../../../frontend/src/components/core/basic/Lista.tsx","../../../frontend/src/components/core/basic/ImgBg.tsx"],"names":["StyleSheet","createContext","generateChartAsBase64","chartConfig","width","height","backgroundColor","devicePixelRatio","Chart","registerables","canvas","ctx","config","chart","resolve","dataUrl","error","styles","ChartJS","data","style","chartDataUrl","setChartDataUrl","useState","isLoading","setIsLoading","setError","transparentPixel","useEffect","isMounted","url","errorMsg","err","jsx","View","jsxs","Text","Image","ChartJS_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 React,{ useEffect, useState } from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\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","\"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 type { ChartConfiguration } from \"chart.js\"\r\n\r\nexport interface ChartRenderOptions {\r\n width?: number\r\n height?: number\r\n backgroundColor?: string\r\n devicePixelRatio?: number\r\n}\r\n\r\nexport const generateChartAsBase64 = async (\r\n chartConfig: ChartConfiguration,\r\n {\r\n width = 600,\r\n height = 400,\r\n backgroundColor = \"transparent\",\r\n devicePixelRatio = 2, // Mayor calidad por defecto\r\n }: ChartRenderOptions = {},\r\n): Promise<string> => {\r\n try {\r\n // Importar Chart.js y sus componentes <- importante NO TOCAR\r\n const { Chart, registerables } = await import(\"chart.js\")\r\n \r\n // Registrar todos los componentes necesarios\r\n Chart.register(...registerables)\r\n \r\n // Crear canvas temporal\r\n const canvas = document.createElement(\"canvas\")\r\n canvas.width = width * devicePixelRatio\r\n canvas.height = height * devicePixelRatio\r\n canvas.style.width = `${width}px`\r\n canvas.style.height = `${height}px`\r\n \r\n const ctx = canvas.getContext(\"2d\")\r\n if (!ctx) {\r\n console.error(\"No se pudo obtener el contexto 2D del canvas\")\r\n return \"\"\r\n }\r\n \r\n // Escalar el contexto para devicePixelRatio\r\n ctx.scale(devicePixelRatio, devicePixelRatio)\r\n \r\n // Si hay backgroundColor y no es transparente, pintar el fondo\r\n if (backgroundColor && backgroundColor !== \"transparent\") {\r\n ctx.fillStyle = backgroundColor\r\n ctx.fillRect(0, 0, width, height)\r\n }\r\n \r\n // Configuración final del gráfico\r\n const config: ChartConfiguration = {\r\n ...chartConfig,\r\n options: {\r\n responsive: false,\r\n maintainAspectRatio: false,\r\n ...(chartConfig.options || {}),\r\n devicePixelRatio,\r\n animation: false, \r\n } as any,\r\n }\r\n \r\n // Crear el gráfico\r\n const chart = new Chart(ctx, config as any)\r\n \r\n // Esperar a que el gráfico se renderice completamente\r\n // Chart.js renderiza sincrónicamente, pero esperamos un tick por seguridad\r\n await new Promise(resolve => setTimeout(resolve, 50))\r\n \r\n // Convertir a data URL\r\n const dataUrl = canvas.toDataURL(\"image/png\", 1.0)\r\n \r\n // Limpiar recursos\r\n chart.destroy()\r\n \r\n // Verificar que la URL es válida\r\n if (!dataUrl || dataUrl === \"data:,\" || !dataUrl.startsWith(\"data:image\")) {\r\n console.error(\"Data URL generada es inválida:\", dataUrl)\r\n return \"\"\r\n }\r\n \r\n console.log(\"Gráfico generado correctamente. Tamaño:\", dataUrl.length, \"bytes\")\r\n \r\n return dataUrl\r\n \r\n } catch (error) {\r\n console.error(\"❌ Error generando gráfico:\", error)\r\n console.error(\"Configuración:\", chartConfig)\r\n console.error(\"Stack:\", error instanceof Error ? error.stack : \"No stack available\")\r\n return \"\"\r\n }\r\n}","import React, { useEffect, useState } from \"react\"\nimport { Image, StyleSheet, View, Text } from \"@react-pdf/renderer\"\nimport type { ChartConfiguration } from \"chart.js\"\nimport { generateChartAsBase64, type ChartRenderOptions } from \"./ChartJSGenerator\"\n\ninterface ChartJSProps extends ChartRenderOptions {\n data: ChartConfiguration\n style?: any\n}\n\nconst styles = StyleSheet.create({\n container: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n errorText: {\n color: \"red\",\n fontSize: 12,\n padding: 10,\n },\n loadingText: {\n color: \"#666\",\n fontSize: 10,\n padding: 10,\n },\n})\n\nconst ChartJS: React.FC<ChartJSProps> = ({\n data,\n width = 600,\n height = 400,\n backgroundColor = \"white\", // Cambiar a blanco por defecto para mejor visualización\n devicePixelRatio = 2, // Mayor calidad por defecto\n style,\n}) => {\n const [chartDataUrl, setChartDataUrl] = useState<string>(\"\")\n const [isLoading, setIsLoading] = useState<boolean>(true)\n const [error, setError] = useState<string>(\"\")\n\n // Pixel transparente como placeholder\n const transparentPixel =\n \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"\n\n useEffect(() => {\n let isMounted = true\n\n const render = async () => {\n try {\n setIsLoading(true)\n setError(\"\")\n \n console.log(\"🔄 Generando gráfico con configuración:\", data.type)\n \n const url = await generateChartAsBase64(data, {\n width,\n height,\n backgroundColor,\n devicePixelRatio,\n })\n \n if (!isMounted) return\n \n if (!url || url === \"data:,\") {\n const errorMsg = \"No se pudo generar el gráfico. Data URL vacía.\"\n console.error(\"❌\", errorMsg)\n setError(errorMsg)\n setChartDataUrl(transparentPixel)\n } else {\n console.log(\"Gráfico generado. Tamaño:\", url.length, \"bytes\")\n setChartDataUrl(url)\n }\n \n } catch (err) {\n if (!isMounted) return\n \n const errorMsg = err instanceof Error ? err.message : \"Error desconocido\"\n console.error(\"❌ Error en Chart.tsx:\", errorMsg)\n setError(errorMsg)\n setChartDataUrl(transparentPixel)\n } finally {\n if (isMounted) {\n setIsLoading(false)\n }\n }\n }\n\n render()\n\n return () => {\n isMounted = false\n }\n }, [JSON.stringify(data), width, height, backgroundColor, devicePixelRatio])\n\n // Para debugging\n useEffect(() => {\n if (chartDataUrl && chartDataUrl !== transparentPixel) {\n console.log(\"Chart.tsx - URL actualizada:\", chartDataUrl.substring(0, 50) + \"...\")\n }\n }, [chartDataUrl])\n\n // Si hay error, mostrar mensaje (solo en desarrollo, en producción mostrar placeholder)\n if (error && process.env.NODE_ENV === 'development') {\n return (\n <View style={[styles.container, style, { width, height }]}>\n <Text style={styles.errorText}>Error: {error}</Text>\n </View>\n )\n }\n\n return (\n <View style={[styles.container, style]}>\n {chartDataUrl && chartDataUrl !== transparentPixel ? (\n <Image \n src={chartDataUrl} \n style={{ width, height }}\n cache={false} // Evitar cache de imágenes\n />\n ) : (\n <View style={{ width, height, backgroundColor: '#f0f0f0' }}>\n {isLoading && (\n <Text style={styles.loadingText}>Generando gráfico...</Text>\n )}\n </View>\n )}\n </View>\n )\n}\n\nexport default ChartJS","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"]}
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/QR.tsx","../../../frontend/src/components/core/qr/QRstyle.tsx","../../../frontend/src/components/core/charts/ChartJSGenerator.ts","../../../frontend/src/components/core/charts/ChartJS.tsx","../../../frontend/src/components/core/basic/Lista.tsx","../../../frontend/src/components/core/basic/ImgBg.tsx"],"names":["StyleSheet","createContext","generateChartAsBase64","chartConfig","width","height","backgroundColor","devicePixelRatio","Chart","registerables","canvas","ctx","config","chart","resolve","dataUrl","error","styles","ChartJS","data","style","chartDataUrl","setChartDataUrl","useState","isLoading","setIsLoading","setError","transparentPixel","useEffect","isMounted","url","errorMsg","err","jsx","View","jsxs","Text","Image","ChartJS_default"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from \"react\"\r\nimport { Page, Document, StyleSheet, Text, View, Image } 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 backgroundImage: {\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n zIndex: -1,\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 backgroundImage?: string\r\n backgroundImageOpacity?: number\r\n padding?: number\r\n margin?: \"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 debug?: 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 backgroundImage,\r\n backgroundImageOpacity = 1,\r\n padding = 30,\r\n margin = \"normal\",\r\n style = {},\r\n pagination = true,\r\n footer,\r\n lines = footer ? 2 : 1,\r\n rule = false,\r\n debug = 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 = (margin: string, pageSize: string) => {\r\n const normalizedSize = pageSize.toUpperCase()\r\n\r\n switch (margin) {\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 safeMargin = margin\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 margin\r\n const validMargins = [\"apa\", \"normal\", \"estrecho\", \"ancho\"]\r\n if (!validMargins.includes(margin)) {\r\n console.warn(`Invalid margin type: ${margin}. Using normal as default.`)\r\n safeMargin = \"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(safeMargin, 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 debug={debug} size={safeSize as any} orientation={pdfOrientation} style={pageStyle} wrap>\r\n {backgroundImage && (\r\n <Image\r\n src={backgroundImage}\r\n style={{\r\n ...styles.backgroundImage,\r\n opacity: backgroundImageOpacity,\r\n }}\r\n fixed\r\n />\r\n )}\r\n {renderGrid()}\r\n {children}\r\n <View style={{ paddingBottom: footerHeight }}></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","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 // opcional -> centra vertical también\r\n vertical?: boolean;\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n left: {\r\n alignItems: \"flex-start\",\r\n textAlign: \"left\",\r\n },\r\n right: {\r\n alignItems: \"flex-end\",\r\n textAlign: \"right\",\r\n },\r\n center: {\r\n alignItems: \"center\",\r\n textAlign: \"center\",\r\n },\r\n\r\n vertical: {\r\n justifyContent: \"center\",\r\n },\r\n});\r\n\r\n/* ================= LEFT ================= */\r\n\r\nconst Left: React.FC<PositionProps> = ({\r\n children,\r\n style,\r\n vertical,\r\n}) => {\r\n return (\r\n <View style={[styles.left, vertical && styles.vertical, style]}>\r\n {children}\r\n </View>\r\n );\r\n};\r\n\r\n/* ================= RIGHT ================= */\r\n\r\nconst Right: React.FC<PositionProps> = ({\r\n children,\r\n style,\r\n vertical,\r\n}) => {\r\n return (\r\n <View style={[styles.right, vertical && styles.vertical, style]}>\r\n {children}\r\n </View>\r\n );\r\n};\r\n\r\n/* ================= CENTER ================= */\r\n\r\nconst Center: React.FC<PositionProps> = ({\r\n children,\r\n style,\r\n vertical,\r\n}) => {\r\n return (\r\n <View style={[styles.center, vertical && styles.vertical, style]}>\r\n {children}\r\n </View>\r\n );\r\n};\r\n\r\nexport { Left, Right, Center };","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\n/* ================= TYPES ================= */\r\n\r\ntype GridMode = \"grid\" | \"modern\";\r\n\r\ninterface TableProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n cellHeight?: number;\r\n borderColor?: string;\r\n textColor?: string;\r\n headerBackground?: string;\r\n zebraColor?: string;\r\n grid?: GridMode;\r\n}\r\n\r\ninterface TheadProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n textAlign?: \"left\" | \"center\" | \"right\";\r\n borderColor?: string;\r\n textColor?: string;\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\";\r\n}\r\n\r\n/* ================= CONTEXT ================= */\r\n\r\nconst TableContext = createContext({\r\n cellHeight: 22,\r\n textAlign: \"left\" as \"left\" | \"center\" | \"right\",\r\n borderColor: \"#000\",\r\n textColor: \"#000\",\r\n headerBackground: \"#ccc\",\r\n zebraColor: \"#eeeeee\",\r\n grid: \"grid\" as GridMode,\r\n});\r\n\r\n/* ================= STYLES ================= */\r\n\r\nconst styles = StyleSheet.create({\r\n table: {\r\n width: \"100%\",\r\n marginBottom: 20,\r\n },\r\n tr: {\r\n flexDirection: \"row\",\r\n },\r\n th: {\r\n fontSize: 10,\r\n fontWeight: \"bold\",\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n },\r\n td: {\r\n fontSize: 10,\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n },\r\n});\r\n\r\n/* ================= TABLE ================= */\r\n\r\nconst Table: React.FC<TableProps> = ({\r\n children,\r\n style,\r\n cellHeight = 22,\r\n borderColor = \"#000\",\r\n textColor = \"#000\",\r\n headerBackground = \"#ccc\",\r\n zebraColor = \"#eeeeee\",\r\n grid = \"grid\",\r\n}) => (\r\n <TableContext.Provider\r\n value={{\r\n cellHeight,\r\n textAlign: \"left\",\r\n borderColor,\r\n textColor,\r\n headerBackground,\r\n zebraColor,\r\n grid,\r\n }}\r\n >\r\n <View\r\n style={[\r\n styles.table,\r\n grid === \"grid\" && {\r\n borderWidth: 1,\r\n borderColor,\r\n },\r\n style,\r\n ]}\r\n >\r\n {children}\r\n </View>\r\n </TableContext.Provider>\r\n);\r\n\r\n/* ================= THEAD ================= */\r\n\r\nconst Thead: React.FC<TheadProps> = ({\r\n children,\r\n style,\r\n textAlign = \"left\",\r\n borderColor,\r\n textColor,\r\n}) => {\r\n const context = useContext(TableContext);\r\n\r\n return (\r\n <TableContext.Provider\r\n value={{\r\n ...context,\r\n textAlign,\r\n borderColor: borderColor ?? context.borderColor,\r\n textColor: textColor ?? context.textColor,\r\n }}\r\n >\r\n <View\r\n style={[\r\n { backgroundColor: context.headerBackground },\r\n context.grid === \"modern\" && {\r\n borderBottomWidth: 1,\r\n borderColor: context.borderColor,\r\n },\r\n style,\r\n ]}\r\n >\r\n {children}\r\n </View>\r\n </TableContext.Provider>\r\n );\r\n};\r\n\r\n/* ================= TBODY ================= */\r\n\r\nconst Tbody: React.FC<TableProps> = ({ children, borderColor, textColor }) => {\r\n const context = useContext(TableContext);\r\n\r\n const rows = React.Children.toArray(children) as React.ReactElement<any>[];\r\n const count = rows.length;\r\n\r\n return (\r\n <TableContext.Provider\r\n value={{\r\n ...context,\r\n borderColor: borderColor ?? context.borderColor,\r\n textColor: textColor ?? context.textColor,\r\n }}\r\n >\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 </TableContext.Provider>\r\n );\r\n};\r\n\r\n/* ================= TR ================= */\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 { grid, borderColor } = useContext(TableContext);\r\n\r\n const elements = React.Children.toArray(\r\n children\r\n ) as React.ReactElement<CellProps>[];\r\n\r\n const count = elements.length;\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.tr,\r\n grid === \"modern\" && {\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor,\r\n },\r\n style,\r\n ]}\r\n >\r\n {elements.map((child, idx) => {\r\n const isLast = idx === count - 1;\r\n const width = `${(100 / count).toFixed(2)}%`;\r\n\r\n return React.cloneElement(child, {\r\n width,\r\n isLast,\r\n isLastRow,\r\n isOdd,\r\n });\r\n })}\r\n </View>\r\n );\r\n};\r\n\r\n/* ================= TH ================= */\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, borderColor, textColor, grid } =\r\n useContext(TableContext);\r\n\r\n const finalTextAlign = propTextAlign || textAlign || \"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 return (\r\n <View\r\n style={[\r\n styles.th,\r\n {\r\n width: baseWidth || width,\r\n borderColor,\r\n minHeight: height ?? cellHeight,\r\n },\r\n grid === \"grid\" && {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n },\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign, color: textColor }}>\r\n {children}\r\n </Text>\r\n </View>\r\n );\r\n};\r\n\r\n/* ================= TD ================= */\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 {\r\n cellHeight,\r\n textAlign,\r\n borderColor,\r\n textColor,\r\n zebraColor,\r\n grid,\r\n } = useContext(TableContext);\r\n\r\n const finalTextAlign = propTextAlign || textAlign || \"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 return (\r\n <View\r\n style={[\r\n styles.td,\r\n {\r\n width: baseWidth,\r\n borderColor,\r\n minHeight: height ?? cellHeight,\r\n backgroundColor: isOdd ? zebraColor : undefined,\r\n },\r\n grid === \"grid\" && {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n },\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign, color: textColor }}>\r\n {children}\r\n </Text>\r\n </View>\r\n );\r\n};\r\n\r\nexport { Table, Thead, Tbody, Tr, Th, Td };","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 React,{ useEffect, useState } from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\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","\"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 type { ChartConfiguration } from \"chart.js\"\r\n\r\nexport interface ChartRenderOptions {\r\n width?: number\r\n height?: number\r\n backgroundColor?: string\r\n devicePixelRatio?: number\r\n}\r\n\r\nexport const generateChartAsBase64 = async (\r\n chartConfig: ChartConfiguration,\r\n {\r\n width = 600,\r\n height = 400,\r\n backgroundColor = \"transparent\",\r\n devicePixelRatio = 2, // Mayor calidad por defecto\r\n }: ChartRenderOptions = {},\r\n): Promise<string> => {\r\n try {\r\n // Importar Chart.js y sus componentes <- importante NO TOCAR\r\n const { Chart, registerables } = await import(\"chart.js\")\r\n \r\n // Registrar todos los componentes necesarios\r\n Chart.register(...registerables)\r\n \r\n // Crear canvas temporal\r\n const canvas = document.createElement(\"canvas\")\r\n canvas.width = width * devicePixelRatio\r\n canvas.height = height * devicePixelRatio\r\n canvas.style.width = `${width}px`\r\n canvas.style.height = `${height}px`\r\n \r\n const ctx = canvas.getContext(\"2d\")\r\n if (!ctx) {\r\n console.error(\"No se pudo obtener el contexto 2D del canvas\")\r\n return \"\"\r\n }\r\n \r\n // Escalar el contexto para devicePixelRatio\r\n ctx.scale(devicePixelRatio, devicePixelRatio)\r\n \r\n // Si hay backgroundColor y no es transparente, pintar el fondo\r\n if (backgroundColor && backgroundColor !== \"transparent\") {\r\n ctx.fillStyle = backgroundColor\r\n ctx.fillRect(0, 0, width, height)\r\n }\r\n \r\n // Configuración final del gráfico\r\n const config: ChartConfiguration = {\r\n ...chartConfig,\r\n options: {\r\n responsive: false,\r\n maintainAspectRatio: false,\r\n ...(chartConfig.options || {}),\r\n devicePixelRatio,\r\n animation: false, \r\n } as any,\r\n }\r\n \r\n // Crear el gráfico\r\n const chart = new Chart(ctx, config as any)\r\n \r\n // Esperar a que el gráfico se renderice completamente\r\n // Chart.js renderiza sincrónicamente, pero esperamos un tick por seguridad\r\n await new Promise(resolve => setTimeout(resolve, 50))\r\n \r\n // Convertir a data URL\r\n const dataUrl = canvas.toDataURL(\"image/png\", 1.0)\r\n \r\n // Limpiar recursos\r\n chart.destroy()\r\n \r\n // Verificar que la URL es válida\r\n if (!dataUrl || dataUrl === \"data:,\" || !dataUrl.startsWith(\"data:image\")) {\r\n console.error(\"Data URL generada es inválida:\", dataUrl)\r\n return \"\"\r\n }\r\n \r\n console.log(\"Gráfico generado correctamente. Tamaño:\", dataUrl.length, \"bytes\")\r\n \r\n return dataUrl\r\n \r\n } catch (error) {\r\n console.error(\"❌ Error generando gráfico:\", error)\r\n console.error(\"Configuración:\", chartConfig)\r\n console.error(\"Stack:\", error instanceof Error ? error.stack : \"No stack available\")\r\n return \"\"\r\n }\r\n}","import React, { useEffect, useState } from \"react\"\nimport { Image, StyleSheet, View, Text } from \"@react-pdf/renderer\"\nimport type { ChartConfiguration } from \"chart.js\"\nimport { generateChartAsBase64, type ChartRenderOptions } from \"./ChartJSGenerator\"\n\ninterface ChartJSProps extends ChartRenderOptions {\n data: ChartConfiguration\n style?: any\n}\n\nconst styles = StyleSheet.create({\n container: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n errorText: {\n color: \"red\",\n fontSize: 12,\n padding: 10,\n },\n loadingText: {\n color: \"#666\",\n fontSize: 10,\n padding: 10,\n },\n})\n\nconst ChartJS: React.FC<ChartJSProps> = ({\n data,\n width = 600,\n height = 400,\n backgroundColor = \"white\", // Cambiar a blanco por defecto para mejor visualización\n devicePixelRatio = 2, // Mayor calidad por defecto\n style,\n}) => {\n const [chartDataUrl, setChartDataUrl] = useState<string>(\"\")\n const [isLoading, setIsLoading] = useState<boolean>(true)\n const [error, setError] = useState<string>(\"\")\n\n // Pixel transparente como placeholder\n const transparentPixel =\n \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"\n\n useEffect(() => {\n let isMounted = true\n\n const render = async () => {\n try {\n setIsLoading(true)\n setError(\"\")\n \n console.log(\"🔄 Generando gráfico con configuración:\", data.type)\n \n const url = await generateChartAsBase64(data, {\n width,\n height,\n backgroundColor,\n devicePixelRatio,\n })\n \n if (!isMounted) return\n \n if (!url || url === \"data:,\") {\n const errorMsg = \"No se pudo generar el gráfico. Data URL vacía.\"\n console.error(\"❌\", errorMsg)\n setError(errorMsg)\n setChartDataUrl(transparentPixel)\n } else {\n console.log(\"Gráfico generado. Tamaño:\", url.length, \"bytes\")\n setChartDataUrl(url)\n }\n \n } catch (err) {\n if (!isMounted) return\n \n const errorMsg = err instanceof Error ? err.message : \"Error desconocido\"\n console.error(\"❌ Error en Chart.tsx:\", errorMsg)\n setError(errorMsg)\n setChartDataUrl(transparentPixel)\n } finally {\n if (isMounted) {\n setIsLoading(false)\n }\n }\n }\n\n render()\n\n return () => {\n isMounted = false\n }\n }, [JSON.stringify(data), width, height, backgroundColor, devicePixelRatio])\n\n // Para debugging\n useEffect(() => {\n if (chartDataUrl && chartDataUrl !== transparentPixel) {\n console.log(\"Chart.tsx - URL actualizada:\", chartDataUrl.substring(0, 50) + \"...\")\n }\n }, [chartDataUrl])\n\n // Si hay error, mostrar mensaje (solo en desarrollo, en producción mostrar placeholder)\n if (error && process.env.NODE_ENV === 'development') {\n return (\n <View style={[styles.container, style, { width, height }]}>\n <Text style={styles.errorText}>Error: {error}</Text>\n </View>\n )\n }\n\n return (\n <View style={[styles.container, style]}>\n {chartDataUrl && chartDataUrl !== transparentPixel ? (\n <Image \n src={chartDataUrl} \n style={{ width, height }}\n cache={false} // Evitar cache de imágenes\n />\n ) : (\n <View style={{ width, height, backgroundColor: '#f0f0f0' }}>\n {isLoading && (\n <Text style={styles.loadingText}>Generando gráfico...</Text>\n )}\n </View>\n )}\n </View>\n )\n}\n\nexport default ChartJS","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,2 +1,2 @@
1
- import {StyleSheet,View,Text,Image}from'@react-pdf/renderer';import {jsx,jsxs}from'react/jsx-runtime';import {createContext,useState,useEffect}from'react';import'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%"}});StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center",margin:10}});StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center"}});var R=async(s,{width:r=600,height:o=400,backgroundColor:d="transparent",devicePixelRatio:i=2}={})=>{try{let{Chart:n,registerables:a}=await import('chart.js');n.register(...a);let e=document.createElement("canvas");e.width=r*i,e.height=o*i,e.style.width=`${r}px`,e.style.height=`${o}px`;let c=e.getContext("2d");if(!c)return console.error("No se pudo obtener el contexto 2D del canvas"),"";c.scale(i,i),d&&d!=="transparent"&&(c.fillStyle=d,c.fillRect(0,0,r,o));let h={...s,options:{responsive:!1,maintainAspectRatio:!1,...s.options||{},devicePixelRatio:i,animation:!1}},f=new n(c,h);await new Promise(g=>setTimeout(g,50));let t=e.toDataURL("image/png",1);return f.destroy(),!t||t==="data:,"||!t.startsWith("data:image")?(console.error("Data URL generada es inv\xE1lida:",t),""):(console.log("Gr\xE1fico generado correctamente. Tama\xF1o:",t.length,"bytes"),t)}catch(n){return console.error("\u274C Error generando gr\xE1fico:",n),console.error("Configuraci\xF3n:",s),console.error("Stack:",n instanceof Error?n.stack:"No stack available"),""}};var y=StyleSheet.create({container:{display:"flex",alignItems:"center",justifyContent:"center"},errorText:{color:"red",fontSize:12,padding:10},loadingText:{color:"#666",fontSize:10,padding:10}}),D=({data:s,width:r=600,height:o=400,backgroundColor:d="white",devicePixelRatio:i=2,style:n})=>{let[a,e]=useState(""),[c,h]=useState(true),[f,t]=useState(""),g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";return useEffect(()=>{let u=true;return (async()=>{try{h(!0),t(""),console.log("\u{1F504} Generando gr\xE1fico con configuraci\xF3n:",s.type);let l=await R(s,{width:r,height:o,backgroundColor:d,devicePixelRatio:i});if(!u)return;if(!l||l==="data:,"){let p="No se pudo generar el gr\xE1fico. Data URL vac\xEDa.";console.error("\u274C",p),t(p),e(g);}else console.log("Gr\xE1fico generado. Tama\xF1o:",l.length,"bytes"),e(l);}catch(l){if(!u)return;let p=l instanceof Error?l.message:"Error desconocido";console.error("\u274C Error en Chart.tsx:",p),t(p),e(g);}finally{u&&h(false);}})(),()=>{u=false;}},[JSON.stringify(s),r,o,d,i]),useEffect(()=>{a&&a!==g&&console.log("Chart.tsx - URL actualizada:",a.substring(0,50)+"...");},[a]),f&&process.env.NODE_ENV==="development"?jsx(View,{style:[y.container,n,{width:r,height:o}],children:jsxs(Text,{style:y.errorText,children:["Error: ",f]})}):jsx(View,{style:[y.container,n],children:a&&a!==g?jsx(Image,{src:a,style:{width:r,height:o},cache:false}):jsx(View,{style:{width:r,height:o,backgroundColor:"#f0f0f0"},children:c&&jsx(Text,{style:y.loadingText,children:"Generando gr\xE1fico..."})})})},A=D;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"}});export{A as ChartJS};//# sourceMappingURL=index.js.map
1
+ import {StyleSheet,View,Text,Image}from'@react-pdf/renderer';import {jsx,jsxs}from'react/jsx-runtime';import {createContext,useState,useEffect}from'react';import'qrcode';StyleSheet.create({page:{backgroundColor:"white",padding:30,fontSize:14},footer:{position:"absolute",left:0,right:0,textAlign:"center"},backgroundImage:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1}});StyleSheet.create({image:{width:"100%",height:"auto",marginBottom:14}});StyleSheet.create({left:{alignItems:"flex-start",textAlign:"left"},right:{alignItems:"flex-end",textAlign:"right"},center:{alignItems:"center",textAlign:"center"},vertical:{justifyContent:"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",borderColor:"#000",textColor:"#000",headerBackground:"#ccc",zebraColor:"#eeeeee",grid:"grid"});StyleSheet.create({table:{width:"100%",marginBottom:20},tr:{flexDirection:"row"},th:{fontSize:10,fontWeight:"bold",paddingLeft:8,paddingRight:8,justifyContent:"center"},td:{fontSize:10,paddingLeft:8,paddingRight:8,justifyContent:"center"}});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%"}});StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center",margin:10}});StyleSheet.create({qrContainer:{display:"flex",alignItems:"center",justifyContent:"center"}});var b=async(s,{width:r=600,height:o=400,backgroundColor:d="transparent",devicePixelRatio:i=2}={})=>{try{let{Chart:n,registerables:a}=await import('chart.js');n.register(...a);let e=document.createElement("canvas");e.width=r*i,e.height=o*i,e.style.width=`${r}px`,e.style.height=`${o}px`;let c=e.getContext("2d");if(!c)return console.error("No se pudo obtener el contexto 2D del canvas"),"";c.scale(i,i),d&&d!=="transparent"&&(c.fillStyle=d,c.fillRect(0,0,r,o));let f={...s,options:{responsive:!1,maintainAspectRatio:!1,...s.options||{},devicePixelRatio:i,animation:!1}},h=new n(c,f);await new Promise(g=>setTimeout(g,50));let t=e.toDataURL("image/png",1);return h.destroy(),!t||t==="data:,"||!t.startsWith("data:image")?(console.error("Data URL generada es inv\xE1lida:",t),""):(console.log("Gr\xE1fico generado correctamente. Tama\xF1o:",t.length,"bytes"),t)}catch(n){return console.error("\u274C Error generando gr\xE1fico:",n),console.error("Configuraci\xF3n:",s),console.error("Stack:",n instanceof Error?n.stack:"No stack available"),""}};var y=StyleSheet.create({container:{display:"flex",alignItems:"center",justifyContent:"center"},errorText:{color:"red",fontSize:12,padding:10},loadingText:{color:"#666",fontSize:10,padding:10}}),D=({data:s,width:r=600,height:o=400,backgroundColor:d="white",devicePixelRatio:i=2,style:n})=>{let[a,e]=useState(""),[c,f]=useState(true),[h,t]=useState(""),g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";return useEffect(()=>{let u=true;return (async()=>{try{f(!0),t(""),console.log("\u{1F504} Generando gr\xE1fico con configuraci\xF3n:",s.type);let l=await b(s,{width:r,height:o,backgroundColor:d,devicePixelRatio:i});if(!u)return;if(!l||l==="data:,"){let p="No se pudo generar el gr\xE1fico. Data URL vac\xEDa.";console.error("\u274C",p),t(p),e(g);}else console.log("Gr\xE1fico generado. Tama\xF1o:",l.length,"bytes"),e(l);}catch(l){if(!u)return;let p=l instanceof Error?l.message:"Error desconocido";console.error("\u274C Error en Chart.tsx:",p),t(p),e(g);}finally{u&&f(false);}})(),()=>{u=false;}},[JSON.stringify(s),r,o,d,i]),useEffect(()=>{a&&a!==g&&console.log("Chart.tsx - URL actualizada:",a.substring(0,50)+"...");},[a]),h&&process.env.NODE_ENV==="development"?jsx(View,{style:[y.container,n,{width:r,height:o}],children:jsxs(Text,{style:y.errorText,children:["Error: ",h]})}):jsx(View,{style:[y.container,n],children:a&&a!==g?jsx(Image,{src:a,style:{width:r,height:o},cache:false}):jsx(View,{style:{width:r,height:o,backgroundColor:"#f0f0f0"},children:c&&jsx(Text,{style:y.loadingText,children:"Generando gr\xE1fico..."})})})},A=D;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"}});export{A as ChartJS};//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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/QR.tsx","../../../frontend/src/components/core/qr/QRstyle.tsx","../../../frontend/src/components/core/charts/ChartJSGenerator.ts","../../../frontend/src/components/core/charts/ChartJS.tsx","../../../frontend/src/components/core/basic/Lista.tsx","../../../frontend/src/components/core/basic/ImgBg.tsx"],"names":["StyleSheet","createContext","generateChartAsBase64","chartConfig","width","height","backgroundColor","devicePixelRatio","Chart","registerables","canvas","ctx","config","chart","resolve","dataUrl","error","styles","ChartJS","data","style","chartDataUrl","setChartDataUrl","useState","isLoading","setIsLoading","setError","transparentPixel","useEffect","isMounted","url","errorMsg","err","jsx","View","jsxs","Text","Image","ChartJS_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 React,{ useEffect, useState } from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\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","\"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 type { ChartConfiguration } from \"chart.js\"\r\n\r\nexport interface ChartRenderOptions {\r\n width?: number\r\n height?: number\r\n backgroundColor?: string\r\n devicePixelRatio?: number\r\n}\r\n\r\nexport const generateChartAsBase64 = async (\r\n chartConfig: ChartConfiguration,\r\n {\r\n width = 600,\r\n height = 400,\r\n backgroundColor = \"transparent\",\r\n devicePixelRatio = 2, // Mayor calidad por defecto\r\n }: ChartRenderOptions = {},\r\n): Promise<string> => {\r\n try {\r\n // Importar Chart.js y sus componentes <- importante NO TOCAR\r\n const { Chart, registerables } = await import(\"chart.js\")\r\n \r\n // Registrar todos los componentes necesarios\r\n Chart.register(...registerables)\r\n \r\n // Crear canvas temporal\r\n const canvas = document.createElement(\"canvas\")\r\n canvas.width = width * devicePixelRatio\r\n canvas.height = height * devicePixelRatio\r\n canvas.style.width = `${width}px`\r\n canvas.style.height = `${height}px`\r\n \r\n const ctx = canvas.getContext(\"2d\")\r\n if (!ctx) {\r\n console.error(\"No se pudo obtener el contexto 2D del canvas\")\r\n return \"\"\r\n }\r\n \r\n // Escalar el contexto para devicePixelRatio\r\n ctx.scale(devicePixelRatio, devicePixelRatio)\r\n \r\n // Si hay backgroundColor y no es transparente, pintar el fondo\r\n if (backgroundColor && backgroundColor !== \"transparent\") {\r\n ctx.fillStyle = backgroundColor\r\n ctx.fillRect(0, 0, width, height)\r\n }\r\n \r\n // Configuración final del gráfico\r\n const config: ChartConfiguration = {\r\n ...chartConfig,\r\n options: {\r\n responsive: false,\r\n maintainAspectRatio: false,\r\n ...(chartConfig.options || {}),\r\n devicePixelRatio,\r\n animation: false, \r\n } as any,\r\n }\r\n \r\n // Crear el gráfico\r\n const chart = new Chart(ctx, config as any)\r\n \r\n // Esperar a que el gráfico se renderice completamente\r\n // Chart.js renderiza sincrónicamente, pero esperamos un tick por seguridad\r\n await new Promise(resolve => setTimeout(resolve, 50))\r\n \r\n // Convertir a data URL\r\n const dataUrl = canvas.toDataURL(\"image/png\", 1.0)\r\n \r\n // Limpiar recursos\r\n chart.destroy()\r\n \r\n // Verificar que la URL es válida\r\n if (!dataUrl || dataUrl === \"data:,\" || !dataUrl.startsWith(\"data:image\")) {\r\n console.error(\"Data URL generada es inválida:\", dataUrl)\r\n return \"\"\r\n }\r\n \r\n console.log(\"Gráfico generado correctamente. Tamaño:\", dataUrl.length, \"bytes\")\r\n \r\n return dataUrl\r\n \r\n } catch (error) {\r\n console.error(\"❌ Error generando gráfico:\", error)\r\n console.error(\"Configuración:\", chartConfig)\r\n console.error(\"Stack:\", error instanceof Error ? error.stack : \"No stack available\")\r\n return \"\"\r\n }\r\n}","import React, { useEffect, useState } from \"react\"\nimport { Image, StyleSheet, View, Text } from \"@react-pdf/renderer\"\nimport type { ChartConfiguration } from \"chart.js\"\nimport { generateChartAsBase64, type ChartRenderOptions } from \"./ChartJSGenerator\"\n\ninterface ChartJSProps extends ChartRenderOptions {\n data: ChartConfiguration\n style?: any\n}\n\nconst styles = StyleSheet.create({\n container: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n errorText: {\n color: \"red\",\n fontSize: 12,\n padding: 10,\n },\n loadingText: {\n color: \"#666\",\n fontSize: 10,\n padding: 10,\n },\n})\n\nconst ChartJS: React.FC<ChartJSProps> = ({\n data,\n width = 600,\n height = 400,\n backgroundColor = \"white\", // Cambiar a blanco por defecto para mejor visualización\n devicePixelRatio = 2, // Mayor calidad por defecto\n style,\n}) => {\n const [chartDataUrl, setChartDataUrl] = useState<string>(\"\")\n const [isLoading, setIsLoading] = useState<boolean>(true)\n const [error, setError] = useState<string>(\"\")\n\n // Pixel transparente como placeholder\n const transparentPixel =\n \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"\n\n useEffect(() => {\n let isMounted = true\n\n const render = async () => {\n try {\n setIsLoading(true)\n setError(\"\")\n \n console.log(\"🔄 Generando gráfico con configuración:\", data.type)\n \n const url = await generateChartAsBase64(data, {\n width,\n height,\n backgroundColor,\n devicePixelRatio,\n })\n \n if (!isMounted) return\n \n if (!url || url === \"data:,\") {\n const errorMsg = \"No se pudo generar el gráfico. Data URL vacía.\"\n console.error(\"❌\", errorMsg)\n setError(errorMsg)\n setChartDataUrl(transparentPixel)\n } else {\n console.log(\"Gráfico generado. Tamaño:\", url.length, \"bytes\")\n setChartDataUrl(url)\n }\n \n } catch (err) {\n if (!isMounted) return\n \n const errorMsg = err instanceof Error ? err.message : \"Error desconocido\"\n console.error(\"❌ Error en Chart.tsx:\", errorMsg)\n setError(errorMsg)\n setChartDataUrl(transparentPixel)\n } finally {\n if (isMounted) {\n setIsLoading(false)\n }\n }\n }\n\n render()\n\n return () => {\n isMounted = false\n }\n }, [JSON.stringify(data), width, height, backgroundColor, devicePixelRatio])\n\n // Para debugging\n useEffect(() => {\n if (chartDataUrl && chartDataUrl !== transparentPixel) {\n console.log(\"Chart.tsx - URL actualizada:\", chartDataUrl.substring(0, 50) + \"...\")\n }\n }, [chartDataUrl])\n\n // Si hay error, mostrar mensaje (solo en desarrollo, en producción mostrar placeholder)\n if (error && process.env.NODE_ENV === 'development') {\n return (\n <View style={[styles.container, style, { width, height }]}>\n <Text style={styles.errorText}>Error: {error}</Text>\n </View>\n )\n }\n\n return (\n <View style={[styles.container, style]}>\n {chartDataUrl && chartDataUrl !== transparentPixel ? (\n <Image \n src={chartDataUrl} \n style={{ width, height }}\n cache={false} // Evitar cache de imágenes\n />\n ) : (\n <View style={{ width, height, backgroundColor: '#f0f0f0' }}>\n {isLoading && (\n <Text style={styles.loadingText}>Generando gráfico...</Text>\n )}\n </View>\n )}\n </View>\n )\n}\n\nexport default ChartJS","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"]}
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/QR.tsx","../../../frontend/src/components/core/qr/QRstyle.tsx","../../../frontend/src/components/core/charts/ChartJSGenerator.ts","../../../frontend/src/components/core/charts/ChartJS.tsx","../../../frontend/src/components/core/basic/Lista.tsx","../../../frontend/src/components/core/basic/ImgBg.tsx"],"names":["StyleSheet","createContext","generateChartAsBase64","chartConfig","width","height","backgroundColor","devicePixelRatio","Chart","registerables","canvas","ctx","config","chart","resolve","dataUrl","error","styles","ChartJS","data","style","chartDataUrl","setChartDataUrl","useState","isLoading","setIsLoading","setError","transparentPixel","useEffect","isMounted","url","errorMsg","err","jsx","View","jsxs","Text","Image","ChartJS_default"],"mappings":"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","file":"index.js","sourcesContent":["import React from \"react\"\r\nimport { Page, Document, StyleSheet, Text, View, Image } 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 backgroundImage: {\r\n position: \"absolute\",\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n zIndex: -1,\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 backgroundImage?: string\r\n backgroundImageOpacity?: number\r\n padding?: number\r\n margin?: \"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 debug?: 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 backgroundImage,\r\n backgroundImageOpacity = 1,\r\n padding = 30,\r\n margin = \"normal\",\r\n style = {},\r\n pagination = true,\r\n footer,\r\n lines = footer ? 2 : 1,\r\n rule = false,\r\n debug = 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 = (margin: string, pageSize: string) => {\r\n const normalizedSize = pageSize.toUpperCase()\r\n\r\n switch (margin) {\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 safeMargin = margin\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 margin\r\n const validMargins = [\"apa\", \"normal\", \"estrecho\", \"ancho\"]\r\n if (!validMargins.includes(margin)) {\r\n console.warn(`Invalid margin type: ${margin}. Using normal as default.`)\r\n safeMargin = \"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(safeMargin, 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 debug={debug} size={safeSize as any} orientation={pdfOrientation} style={pageStyle} wrap>\r\n {backgroundImage && (\r\n <Image\r\n src={backgroundImage}\r\n style={{\r\n ...styles.backgroundImage,\r\n opacity: backgroundImageOpacity,\r\n }}\r\n fixed\r\n />\r\n )}\r\n {renderGrid()}\r\n {children}\r\n <View style={{ paddingBottom: footerHeight }}></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","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 // opcional -> centra vertical también\r\n vertical?: boolean;\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n left: {\r\n alignItems: \"flex-start\",\r\n textAlign: \"left\",\r\n },\r\n right: {\r\n alignItems: \"flex-end\",\r\n textAlign: \"right\",\r\n },\r\n center: {\r\n alignItems: \"center\",\r\n textAlign: \"center\",\r\n },\r\n\r\n vertical: {\r\n justifyContent: \"center\",\r\n },\r\n});\r\n\r\n/* ================= LEFT ================= */\r\n\r\nconst Left: React.FC<PositionProps> = ({\r\n children,\r\n style,\r\n vertical,\r\n}) => {\r\n return (\r\n <View style={[styles.left, vertical && styles.vertical, style]}>\r\n {children}\r\n </View>\r\n );\r\n};\r\n\r\n/* ================= RIGHT ================= */\r\n\r\nconst Right: React.FC<PositionProps> = ({\r\n children,\r\n style,\r\n vertical,\r\n}) => {\r\n return (\r\n <View style={[styles.right, vertical && styles.vertical, style]}>\r\n {children}\r\n </View>\r\n );\r\n};\r\n\r\n/* ================= CENTER ================= */\r\n\r\nconst Center: React.FC<PositionProps> = ({\r\n children,\r\n style,\r\n vertical,\r\n}) => {\r\n return (\r\n <View style={[styles.center, vertical && styles.vertical, style]}>\r\n {children}\r\n </View>\r\n );\r\n};\r\n\r\nexport { Left, Right, Center };","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\n/* ================= TYPES ================= */\r\n\r\ntype GridMode = \"grid\" | \"modern\";\r\n\r\ninterface TableProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n cellHeight?: number;\r\n borderColor?: string;\r\n textColor?: string;\r\n headerBackground?: string;\r\n zebraColor?: string;\r\n grid?: GridMode;\r\n}\r\n\r\ninterface TheadProps {\r\n children: React.ReactNode;\r\n style?: any;\r\n textAlign?: \"left\" | \"center\" | \"right\";\r\n borderColor?: string;\r\n textColor?: string;\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\";\r\n}\r\n\r\n/* ================= CONTEXT ================= */\r\n\r\nconst TableContext = createContext({\r\n cellHeight: 22,\r\n textAlign: \"left\" as \"left\" | \"center\" | \"right\",\r\n borderColor: \"#000\",\r\n textColor: \"#000\",\r\n headerBackground: \"#ccc\",\r\n zebraColor: \"#eeeeee\",\r\n grid: \"grid\" as GridMode,\r\n});\r\n\r\n/* ================= STYLES ================= */\r\n\r\nconst styles = StyleSheet.create({\r\n table: {\r\n width: \"100%\",\r\n marginBottom: 20,\r\n },\r\n tr: {\r\n flexDirection: \"row\",\r\n },\r\n th: {\r\n fontSize: 10,\r\n fontWeight: \"bold\",\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n },\r\n td: {\r\n fontSize: 10,\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n justifyContent: \"center\",\r\n },\r\n});\r\n\r\n/* ================= TABLE ================= */\r\n\r\nconst Table: React.FC<TableProps> = ({\r\n children,\r\n style,\r\n cellHeight = 22,\r\n borderColor = \"#000\",\r\n textColor = \"#000\",\r\n headerBackground = \"#ccc\",\r\n zebraColor = \"#eeeeee\",\r\n grid = \"grid\",\r\n}) => (\r\n <TableContext.Provider\r\n value={{\r\n cellHeight,\r\n textAlign: \"left\",\r\n borderColor,\r\n textColor,\r\n headerBackground,\r\n zebraColor,\r\n grid,\r\n }}\r\n >\r\n <View\r\n style={[\r\n styles.table,\r\n grid === \"grid\" && {\r\n borderWidth: 1,\r\n borderColor,\r\n },\r\n style,\r\n ]}\r\n >\r\n {children}\r\n </View>\r\n </TableContext.Provider>\r\n);\r\n\r\n/* ================= THEAD ================= */\r\n\r\nconst Thead: React.FC<TheadProps> = ({\r\n children,\r\n style,\r\n textAlign = \"left\",\r\n borderColor,\r\n textColor,\r\n}) => {\r\n const context = useContext(TableContext);\r\n\r\n return (\r\n <TableContext.Provider\r\n value={{\r\n ...context,\r\n textAlign,\r\n borderColor: borderColor ?? context.borderColor,\r\n textColor: textColor ?? context.textColor,\r\n }}\r\n >\r\n <View\r\n style={[\r\n { backgroundColor: context.headerBackground },\r\n context.grid === \"modern\" && {\r\n borderBottomWidth: 1,\r\n borderColor: context.borderColor,\r\n },\r\n style,\r\n ]}\r\n >\r\n {children}\r\n </View>\r\n </TableContext.Provider>\r\n );\r\n};\r\n\r\n/* ================= TBODY ================= */\r\n\r\nconst Tbody: React.FC<TableProps> = ({ children, borderColor, textColor }) => {\r\n const context = useContext(TableContext);\r\n\r\n const rows = React.Children.toArray(children) as React.ReactElement<any>[];\r\n const count = rows.length;\r\n\r\n return (\r\n <TableContext.Provider\r\n value={{\r\n ...context,\r\n borderColor: borderColor ?? context.borderColor,\r\n textColor: textColor ?? context.textColor,\r\n }}\r\n >\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 </TableContext.Provider>\r\n );\r\n};\r\n\r\n/* ================= TR ================= */\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 { grid, borderColor } = useContext(TableContext);\r\n\r\n const elements = React.Children.toArray(\r\n children\r\n ) as React.ReactElement<CellProps>[];\r\n\r\n const count = elements.length;\r\n\r\n return (\r\n <View\r\n style={[\r\n styles.tr,\r\n grid === \"modern\" && {\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n borderColor,\r\n },\r\n style,\r\n ]}\r\n >\r\n {elements.map((child, idx) => {\r\n const isLast = idx === count - 1;\r\n const width = `${(100 / count).toFixed(2)}%`;\r\n\r\n return React.cloneElement(child, {\r\n width,\r\n isLast,\r\n isLastRow,\r\n isOdd,\r\n });\r\n })}\r\n </View>\r\n );\r\n};\r\n\r\n/* ================= TH ================= */\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, borderColor, textColor, grid } =\r\n useContext(TableContext);\r\n\r\n const finalTextAlign = propTextAlign || textAlign || \"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 return (\r\n <View\r\n style={[\r\n styles.th,\r\n {\r\n width: baseWidth || width,\r\n borderColor,\r\n minHeight: height ?? cellHeight,\r\n },\r\n grid === \"grid\" && {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n },\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign, color: textColor }}>\r\n {children}\r\n </Text>\r\n </View>\r\n );\r\n};\r\n\r\n/* ================= TD ================= */\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 {\r\n cellHeight,\r\n textAlign,\r\n borderColor,\r\n textColor,\r\n zebraColor,\r\n grid,\r\n } = useContext(TableContext);\r\n\r\n const finalTextAlign = propTextAlign || textAlign || \"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 return (\r\n <View\r\n style={[\r\n styles.td,\r\n {\r\n width: baseWidth,\r\n borderColor,\r\n minHeight: height ?? cellHeight,\r\n backgroundColor: isOdd ? zebraColor : undefined,\r\n },\r\n grid === \"grid\" && {\r\n borderRightWidth: isLast ? 0 : 1,\r\n borderBottomWidth: isLastRow ? 0 : 1,\r\n },\r\n style,\r\n ]}\r\n >\r\n <Text style={{ textAlign: finalTextAlign, color: textColor }}>\r\n {children}\r\n </Text>\r\n </View>\r\n );\r\n};\r\n\r\nexport { Table, Thead, Tbody, Tr, Th, Td };","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 React,{ useEffect, useState } from \"react\"\r\nimport { Image, StyleSheet, View } from \"@react-pdf/renderer\"\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","\"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 type { ChartConfiguration } from \"chart.js\"\r\n\r\nexport interface ChartRenderOptions {\r\n width?: number\r\n height?: number\r\n backgroundColor?: string\r\n devicePixelRatio?: number\r\n}\r\n\r\nexport const generateChartAsBase64 = async (\r\n chartConfig: ChartConfiguration,\r\n {\r\n width = 600,\r\n height = 400,\r\n backgroundColor = \"transparent\",\r\n devicePixelRatio = 2, // Mayor calidad por defecto\r\n }: ChartRenderOptions = {},\r\n): Promise<string> => {\r\n try {\r\n // Importar Chart.js y sus componentes <- importante NO TOCAR\r\n const { Chart, registerables } = await import(\"chart.js\")\r\n \r\n // Registrar todos los componentes necesarios\r\n Chart.register(...registerables)\r\n \r\n // Crear canvas temporal\r\n const canvas = document.createElement(\"canvas\")\r\n canvas.width = width * devicePixelRatio\r\n canvas.height = height * devicePixelRatio\r\n canvas.style.width = `${width}px`\r\n canvas.style.height = `${height}px`\r\n \r\n const ctx = canvas.getContext(\"2d\")\r\n if (!ctx) {\r\n console.error(\"No se pudo obtener el contexto 2D del canvas\")\r\n return \"\"\r\n }\r\n \r\n // Escalar el contexto para devicePixelRatio\r\n ctx.scale(devicePixelRatio, devicePixelRatio)\r\n \r\n // Si hay backgroundColor y no es transparente, pintar el fondo\r\n if (backgroundColor && backgroundColor !== \"transparent\") {\r\n ctx.fillStyle = backgroundColor\r\n ctx.fillRect(0, 0, width, height)\r\n }\r\n \r\n // Configuración final del gráfico\r\n const config: ChartConfiguration = {\r\n ...chartConfig,\r\n options: {\r\n responsive: false,\r\n maintainAspectRatio: false,\r\n ...(chartConfig.options || {}),\r\n devicePixelRatio,\r\n animation: false, \r\n } as any,\r\n }\r\n \r\n // Crear el gráfico\r\n const chart = new Chart(ctx, config as any)\r\n \r\n // Esperar a que el gráfico se renderice completamente\r\n // Chart.js renderiza sincrónicamente, pero esperamos un tick por seguridad\r\n await new Promise(resolve => setTimeout(resolve, 50))\r\n \r\n // Convertir a data URL\r\n const dataUrl = canvas.toDataURL(\"image/png\", 1.0)\r\n \r\n // Limpiar recursos\r\n chart.destroy()\r\n \r\n // Verificar que la URL es válida\r\n if (!dataUrl || dataUrl === \"data:,\" || !dataUrl.startsWith(\"data:image\")) {\r\n console.error(\"Data URL generada es inválida:\", dataUrl)\r\n return \"\"\r\n }\r\n \r\n console.log(\"Gráfico generado correctamente. Tamaño:\", dataUrl.length, \"bytes\")\r\n \r\n return dataUrl\r\n \r\n } catch (error) {\r\n console.error(\"❌ Error generando gráfico:\", error)\r\n console.error(\"Configuración:\", chartConfig)\r\n console.error(\"Stack:\", error instanceof Error ? error.stack : \"No stack available\")\r\n return \"\"\r\n }\r\n}","import React, { useEffect, useState } from \"react\"\nimport { Image, StyleSheet, View, Text } from \"@react-pdf/renderer\"\nimport type { ChartConfiguration } from \"chart.js\"\nimport { generateChartAsBase64, type ChartRenderOptions } from \"./ChartJSGenerator\"\n\ninterface ChartJSProps extends ChartRenderOptions {\n data: ChartConfiguration\n style?: any\n}\n\nconst styles = StyleSheet.create({\n container: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n errorText: {\n color: \"red\",\n fontSize: 12,\n padding: 10,\n },\n loadingText: {\n color: \"#666\",\n fontSize: 10,\n padding: 10,\n },\n})\n\nconst ChartJS: React.FC<ChartJSProps> = ({\n data,\n width = 600,\n height = 400,\n backgroundColor = \"white\", // Cambiar a blanco por defecto para mejor visualización\n devicePixelRatio = 2, // Mayor calidad por defecto\n style,\n}) => {\n const [chartDataUrl, setChartDataUrl] = useState<string>(\"\")\n const [isLoading, setIsLoading] = useState<boolean>(true)\n const [error, setError] = useState<string>(\"\")\n\n // Pixel transparente como placeholder\n const transparentPixel =\n \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"\n\n useEffect(() => {\n let isMounted = true\n\n const render = async () => {\n try {\n setIsLoading(true)\n setError(\"\")\n \n console.log(\"🔄 Generando gráfico con configuración:\", data.type)\n \n const url = await generateChartAsBase64(data, {\n width,\n height,\n backgroundColor,\n devicePixelRatio,\n })\n \n if (!isMounted) return\n \n if (!url || url === \"data:,\") {\n const errorMsg = \"No se pudo generar el gráfico. Data URL vacía.\"\n console.error(\"❌\", errorMsg)\n setError(errorMsg)\n setChartDataUrl(transparentPixel)\n } else {\n console.log(\"Gráfico generado. Tamaño:\", url.length, \"bytes\")\n setChartDataUrl(url)\n }\n \n } catch (err) {\n if (!isMounted) return\n \n const errorMsg = err instanceof Error ? err.message : \"Error desconocido\"\n console.error(\"❌ Error en Chart.tsx:\", errorMsg)\n setError(errorMsg)\n setChartDataUrl(transparentPixel)\n } finally {\n if (isMounted) {\n setIsLoading(false)\n }\n }\n }\n\n render()\n\n return () => {\n isMounted = false\n }\n }, [JSON.stringify(data), width, height, backgroundColor, devicePixelRatio])\n\n // Para debugging\n useEffect(() => {\n if (chartDataUrl && chartDataUrl !== transparentPixel) {\n console.log(\"Chart.tsx - URL actualizada:\", chartDataUrl.substring(0, 50) + \"...\")\n }\n }, [chartDataUrl])\n\n // Si hay error, mostrar mensaje (solo en desarrollo, en producción mostrar placeholder)\n if (error && process.env.NODE_ENV === 'development') {\n return (\n <View style={[styles.container, style, { width, height }]}>\n <Text style={styles.errorText}>Error: {error}</Text>\n </View>\n )\n }\n\n return (\n <View style={[styles.container, style]}>\n {chartDataUrl && chartDataUrl !== transparentPixel ? (\n <Image \n src={chartDataUrl} \n style={{ width, height }}\n cache={false} // Evitar cache de imágenes\n />\n ) : (\n <View style={{ width, height, backgroundColor: '#f0f0f0' }}>\n {isLoading && (\n <Text style={styles.loadingText}>Generando gráfico...</Text>\n )}\n </View>\n )}\n </View>\n )\n}\n\nexport default ChartJS","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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-pdf-levelup/chart",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "author": "",