react-pdf-levelup 1.0.4

package/src/components/PDF/lib/pdfParser.ts

@@ -0,0 +1,620 @@
+// lib/pdfParser.ts
+export interface ParsedNode {
+  type: string
+  content: (string | ParsedNode | any)[]
+  props?: Record<string, any>
+}
+
+export const parseJSX = (jsx: string): ParsedNode[] => {
+  // Extrae el contexto del código antes del return (variables, etc.)
+
+  const extractCodeContext = (fullCode: string) => {
+    try {
+      // Creamos un objeto para almacenar variables
+      const context: Record<string, any> = {}
+
+      // Extraemos el código antes del return
+      const beforeReturn = fullCode.split("return")[0]
+
+      // Buscamos declaraciones de variables (const|let|var)
+      const varRegex = /(const|let|var)\s+(\w+)\s*=\s*([^;]+);?/g
+      let match
+
+      while ((match = varRegex.exec(beforeReturn)) !== null) {
+        const [_, declarationType, varName, varValue] = match
+
+        try {
+          // Evaluamos el valor de la variable y lo guardamos en el contexto
+          context[varName] = new Function(`return ${varValue}`)()
+        } catch (e) {
+          console.error(`Error evaluating variable ${varName}:`, e)
+        }
+      }
+
+      return context
+    } catch (error) {
+      console.error("Error extracting code context:", error)
+      return {}
+    }
+  }
+
+  // Obtenemos el contexto a partir del código completo
+  const codeContext = extractCodeContext(jsx)
+
+  // Helper function to access nested properties and array elements
+  const getNestedProperty = (obj: any, path: string) => {
+    try {
+      // Handle array indexing like data.departmentData[0].responsable
+      const arrayIndexRegex = /(\w+)\[(\d+)\]\.(\w+)/
+      const arrayMatch = path.match(arrayIndexRegex)
+
+      if (arrayMatch) {
+        const [_, arrayName, indexStr, propName] = arrayMatch
+        const index = Number.parseInt(indexStr, 10)
+
+        // Handle nested arrays like data.departmentData
+        if (arrayName.includes(".")) {
+          const parts = arrayName.split(".")
+          let current = obj
+
+          for (const part of parts) {
+            if (current && typeof current === "object") {
+              current = current[part]
+            } else {
+              return undefined
+            }
+          }
+
+          if (Array.isArray(current) && current.length > index) {
+            return current[index][propName]
+          }
+        }
+        // Handle direct arrays like departmentData
+        else if (obj[arrayName] && Array.isArray(obj[arrayName]) && obj[arrayName].length > index) {
+          return obj[arrayName][index][propName]
+        }
+
+        return undefined
+      }
+
+      // Handle regular nested properties like data.departmentData
+      if (path.includes(".")) {
+        const parts = path.split(".")
+        let current = obj
+
+        for (const part of parts) {
+          if (current && typeof current === "object") {
+            current = current[part]
+          } else {
+            return undefined
+          }
+        }
+
+        return current
+      }
+
+      // Handle simple properties
+      return obj[path]
+    } catch (error) {
+      console.error(`Error accessing nested property: ${path}`, error)
+      return undefined
+    }
+  }
+
+  // Find all data arrays that might be used in map functions
+  const findDataArrays = () => {
+    const arrays: Record<string, any[]> = {}
+
+    // Look for arrays in the context
+    for (const [key, value] of Object.entries(codeContext)) {
+      if (Array.isArray(value)) {
+        arrays[key] = value
+      } else if (value && typeof value === "object") {
+        // Look for arrays in nested objects (like data.departmentData)
+        for (const [nestedKey, nestedValue] of Object.entries(value)) {
+          if (Array.isArray(nestedValue)) {
+            arrays[`${key}.${nestedKey}`] = nestedValue
+          }
+        }
+      }
+    }
+
+    return arrays
+  }
+
+  const dataArrays = findDataArrays()
+
+  // Process array indexing expressions like data.departmentData[0].responsable
+  const processArrayIndexing = (text: string) => {
+    try {
+      const arrayIndexRegex = /(\w+(?:\.\w+)*)\[(\d+)\]\.(\w+)/g
+
+      return text.replace(arrayIndexRegex, (match, arrayPath, indexStr, propName) => {
+        try {
+          const index = Number.parseInt(indexStr, 10)
+
+          // Get the array from the context
+          let array
+          if (arrayPath.includes(".")) {
+            // Handle nested properties like data.departmentData
+            array = getNestedProperty(codeContext, arrayPath)
+          } else {
+            array = codeContext[arrayPath]
+          }
+
+          if (Array.isArray(array) && array.length > index && array[index][propName] !== undefined) {
+            return JSON.stringify(array[index][propName])
+          }
+
+          return match
+        } catch (error) {
+          console.error(`Error processing array indexing: ${match}`, error)
+          return match
+        }
+      })
+    } catch (error) {
+      console.error("Error in processArrayIndexing:", error)
+      return text
+    }
+  }
+
+  // Función para procesar expresiones utilizando el contexto extraído
+  const processExpressions = (text: string, localContext: Record<string, any> = {}) => {
+    try {
+      // First process array indexing expressions
+      let processedText = processArrayIndexing(text)
+
+      // Special handling for row references
+      if (processedText.includes("row.")) {
+        const rowRefs = processedText.match(/row\.(\w+)/g)
+        if (rowRefs) {
+          for (const rowRef of rowRefs) {
+            const prop = rowRef.split(".")[1]
+
+            if (localContext.row && localContext.row[prop] !== undefined) {
+              const value = JSON.stringify(localContext.row[prop])
+              processedText = processedText.replace(new RegExp(rowRef, "g"), value)
+            } else {
+              // Recorremos los data arrays y concatenamos los valores de todos los elementos
+              for (const array of Object.values(dataArrays)) {
+                if (array.length > 0 && array[0][prop] !== undefined) {
+                  const values = array.map((item) => JSON.stringify(item[prop])).join(", ") // Puedes cambiar el delimitador según lo necesites
+                  processedText = processedText.replace(new RegExp(rowRef, "g"), values)
+                  break
+                }
+              }
+            }
+          }
+        }
+      }
+
+      // Busca expresiones del tipo {data.hola}, {variable}, etc.
+      return processedText.replace(/\{([^}]+)\}/g, (match, expression) => {
+        console.log(match, expression)
+        try {
+          // First check if the expression contains array indexing
+          if (expression.match(/\w+(?:\.\w+)*\[\d+\]\.\w+/)) {
+            try {
+              // Process the array indexing
+              const processedExpr = processArrayIndexing(expression)
+              // Try to evaluate the processed expression
+              return new Function(`return ${processedExpr}`)()
+            } catch (e) {
+              console.error(`Error evaluating array indexing expression: ${expression}`, e)
+            }
+          }
+
+          // Handle row references in expressions
+          if (expression.includes("row.")) {
+            const rowRefs = expression.match(/row\.(\w+)/g)
+            if (rowRefs) {
+              let processedExpr = expression
+
+              for (const rowRef of rowRefs) {
+                const prop = rowRef.split(".")[1]
+
+                // If we have a row in the local context, use it
+                if (localContext.row && localContext.row[prop] !== undefined) {
+                  processedExpr = processedExpr.replace(new RegExp(rowRef, "g"), JSON.stringify(localContext.row[prop]))
+                }
+                // Otherwise, try to find it in the data arrays
+                else {
+                  // Look through all data arrays to find a matching property
+                  for (const array of Object.values(dataArrays)) {
+                    if (array.length > 0 && array[0][prop] !== undefined) {
+                      // Use the first item's property as a fallback
+                      processedExpr = processedExpr.replace(new RegExp(rowRef, "g"), JSON.stringify(array[0][prop]))
+                      break
+                    }
+                  }
+                }
+              }
+
+              // Try to evaluate the processed expression
+              try {
+                return new Function(`return ${processedExpr}`)()
+              } catch (e) {
+                console.error(`Error evaluating processed row expression: ${processedExpr}`, e)
+                return match
+              }
+            }
+          }
+
+          // Maneja valores booleanos y numéricos directamente
+          if (expression === "true") return true
+          if (expression === "false") return false
+          if (!isNaN(Number(expression))) return Number(expression)
+
+          // Combine global context with local context
+          const combinedContext = { ...codeContext, ...localContext }
+          const keys = Object.keys(combinedContext)
+          const values = Object.values(combinedContext)
+          const evaluator = new Function(...keys, `return ${expression}`)
+
+          return evaluator(...values)
+        } catch (e) {
+          console.error(`Error evaluating expression ${expression}:`, e)
+          return match // Si falla, se retorna la expresión sin evaluar
+        }
+      })
+    } catch (error) {
+      console.error("Error processing expressions:", error)
+      return text
+    }
+  }
+
+  // Function to detect and process map expressions in JSX
+  const detectAndProcessMapExpressions = (jsxContent: string): string => {
+    // Expresión regular mejorada para capturar correctamente las expresiones map
+    // Esta versión es más robusta para manejar diferentes formatos de código
+    const mapRegex = /\{([\s\S]*?)\.map$$\(([\s\S]*?)(?:,\s*([\s\S]*?))?$$\s*=>\s*([\s\S]*?)\)\}/g
+
+    return jsxContent.replace(mapRegex, (match, arrayExpr, itemParam, indexParam, mapBody) => {
+      try {
+        // Limpiar espacios en blanco
+        const arrayName = arrayExpr.trim()
+        itemParam = itemParam.trim()
+
+        console.log("Array name:", arrayName)
+        console.log("Item param:", itemParam)
+        console.log("Map body:", mapBody)
+
+        // Obtener el array del contexto
+        let array
+        if (arrayName.includes(".")) {
+          // Manejar propiedades anidadas como data.departmentData
+          array = getNestedProperty(codeContext, arrayName)
+        } else {
+          array = codeContext[arrayName]
+        }
+
+        if (!Array.isArray(array)) {
+          console.error(`Array ${arrayName} not found in context or not an array`)
+          return match
+        }
+
+        console.log("Array data:", array)
+
+        // Procesar cada elemento del array y generar JSX
+        let result = ""
+        array.forEach((item, index) => {
+          // Crear un contexto local con el elemento actual
+          const localContext = {
+            [itemParam]: item,
+            row: item, // Agregar row como alias para el elemento actual
+            index: index,
+          }
+
+          // Clonar el cuerpo del map para esta iteración
+          let processedBody = mapBody
+
+          // Reemplazar todas las ocurrencias de itemParam con las propiedades reales del elemento
+          const itemRegex = new RegExp(`${itemParam}\\.([\\w]+)`, "g")
+          processedBody = processedBody.replace(itemRegex, (_, prop) => {
+            return JSON.stringify(item[prop])
+          })
+
+          // Reemplazar todas las ocurrencias de row con las propiedades reales del elemento
+          const rowRegex = /row\.([\w]+)/g
+          processedBody = processedBody.replace(rowRegex, (_, prop) => {
+            return JSON.stringify(item[prop])
+          })
+
+          // Reemplazar referencias al índice si es necesario
+          if (indexParam) {
+            const indexRegex = new RegExp(`${indexParam}`, "g")
+            processedBody = processedBody.replace(indexRegex, index.toString())
+          }
+
+          // Agregar una key única a cada elemento si no tiene una
+          if (!processedBody.includes("key={") && processedBody.trim().startsWith("<")) {
+            const tagEnd = processedBody.indexOf(">")
+            if (tagEnd > 0) {
+              processedBody = processedBody.substring(0, tagEnd) + ` key={${index}}` + processedBody.substring(tagEnd)
+            }
+          }
+
+          result += processedBody
+        })
+
+        return result
+      } catch (error) {
+        console.error("Error processing map expression:", error)
+        return match
+      }
+    })
+  }
+
+  // Pre-process the JSX to handle map expressions
+  const processedJSX = detectAndProcessMapExpressions(jsx)
+
+  // Función auxiliar para manejar tokens de texto o expresión
+  const handleTextToken = (token: string, parent: ParsedNode) => {
+    const trimmedToken = token.trim()
+
+    // Si el token es una expresión completa, se evalúa directamente
+    if (trimmedToken.startsWith("{") && trimmedToken.endsWith("}")) {
+      const expressionContent = trimmedToken.slice(1, -1)
+
+      // Handle array indexing expressions
+      if (expressionContent.match(/\w+(?:\.\w+)*\[\d+\]\.\w+/)) {
+        try {
+          // Process the array indexing
+          const processedExpr = processArrayIndexing(expressionContent)
+          // Try to evaluate the processed expression
+          const result = new Function(`return ${processedExpr}`)()
+          parent.content.push(result)
+          return
+        } catch (e) {
+          console.error(`Error evaluating array indexing expression: ${expressionContent}`, e)
+        }
+      }
+
+      // Handle row references in the expression
+      if (expressionContent.includes("row.")) {
+        try {
+          // Process the expression with row references
+          const processedExpr = processExpressions(`{${expressionContent}}`)
+          // If it's a string (which means it was processed), remove the quotes
+          if (typeof processedExpr === "string" && processedExpr.startsWith('"') && processedExpr.endsWith('"')) {
+            parent.content.push(processedExpr.slice(1, -1))
+          } else {
+            parent.content.push(processedExpr)
+          }
+          return
+        } catch (e) {
+          console.error(`Error processing row expression: ${expressionContent}`, e)
+        }
+      }
+
+      // Para expresiones normales (no mapeo)
+      try {
+        const keys = Object.keys(codeContext)
+        const values = Object.values(codeContext)
+        const evaluator = new Function(...keys, `return ${expressionContent}`)
+        const result = evaluator(...values)
+
+        if (Array.isArray(result)) {
+          result.forEach((item) => {
+            // Si el item es un objeto con 'type', asumimos que es un nodo
+            if (item && typeof item === "object" && "type" in item) {
+              parent.content.push(item)
+            } else {
+              // De lo contrario, lo agregamos como texto o lo dejamos como esté
+              parent.content.push(item)
+            }
+          })
+        } else {
+          parent.content.push(result)
+        }
+      } catch (e) {
+        console.error(`Error evaluating expression ${expressionContent}:`, e)
+      }
+    } else {
+      // Si es texto normal (que pueda contener expresiones inline) se procesa
+      const processedText = processExpressions(token)
+      const trimmedText = processedText.trim()
+      if (trimmedText) {
+        parent.content.push(trimmedText)
+      }
+    }
+  }
+
+  // Extraemos la parte JSX (entre <LayoutPDF> y </LayoutPDF>)
+  const jsxMatch = processedJSX.match(/<LayoutPDF[\s\S]*?>([\s\S]*?)<\/LayoutPDF>/)
+  const jsxContent = jsxMatch ? jsxMatch[1] : processedJSX
+
+  const tokens = jsxContent.match(/<[^>]+>|[^<]+/g) || []
+  const nodes: ParsedNode[] = []
+  const stack: ParsedNode[] = []
+
+  // Procesamos el componente LayoutPDF por separado para extraer sus props
+  const layoutPDFMatch = processedJSX.match(/<LayoutPDF([^>]*)>/)
+  if (layoutPDFMatch) {
+    const layoutProps: Record<string, any> = {}
+    const propsString = layoutPDFMatch[1]
+
+    // Extraemos props regulares (valores en cadena)
+    const regularProps = Array.from(propsString.matchAll(/(\w+)="([^"]*)"/g))
+    regularProps.forEach(([_, key, value]) => {
+      layoutProps[key] = value
+    })
+
+    // Extraemos props booleanas
+    const booleanProps = Array.from(propsString.matchAll(/(\w+)=\{(true|false)\}/g))
+    booleanProps.forEach(([_, key, value]) => {
+      layoutProps[key] = value === "true"
+    })
+
+    // Extraemos props numéricas
+    const numericProps = Array.from(propsString.matchAll(/(\w+)=\{(\d+(?:\.\d+)?)\}/g))
+    numericProps.forEach(([_, key, value]) => {
+      layoutProps[key] = Number(value)
+    })
+
+    // Creamos el nodo LayoutPDF
+    const layoutNode: ParsedNode = {
+      type: "LayoutPDF",
+      content: [],
+      props: layoutProps,
+    }
+
+    // Procesamos cada token dentro de LayoutPDF
+    tokens.forEach((token) => {
+      if (token.startsWith("</")) {
+        // Etiqueta de cierre
+        if (stack.length > 0) {
+          const node = stack.pop()!
+          if (stack.length === 0) {
+            layoutNode.content.push(node)
+          } else {
+            stack[stack.length - 1].content.push(node)
+          }
+        }
+      } else if (token.startsWith("<")) {
+        // Etiqueta de apertura
+        const tagMatch = token.match(/<(\w+)([^>]*)>/) || []
+        const tagName = tagMatch[1]
+        const propsString = tagMatch[2] || ""
+        const props: Record<string, any> = {}
+
+        // Extraemos atributos regulares
+        const regularProps = Array.from(propsString.matchAll(/(\w+)="([^"]*)"/g))
+        regularProps.forEach(([_, key, value]) => {
+          props[key] = processExpressions(value)
+        })
+
+        // Extraemos objetos de estilo
+        const styleMatch = propsString.match(/style=\{\{([^}]*)\}\}/)
+        if (styleMatch) {
+          try {
+            const styleString = `{${styleMatch[1]}}`
+            const styleObj = new Function(`return ${styleString}`)()
+            props.style = styleObj
+          } catch (error) {
+            console.error("Error parsing style object:", error)
+          }
+        }
+
+        // Extract key prop if it exists
+        const keyMatch = propsString.match(/key=\{([^}]*)\}/)
+        let keyValue = undefined
+        if (keyMatch) {
+          try {
+            const keyString = keyMatch[1]
+            keyValue = new Function(`return ${keyString}`)()
+            // Remove key from props as it will be handled separately
+            delete props.key
+          } catch (error) {
+            console.error("Error parsing key prop:", error)
+          }
+        }
+
+        const node: ParsedNode = {
+          type: tagName,
+          content: [],
+          props,
+        }
+
+        // Add key as a separate property if it exists
+        if (keyValue !== undefined) {
+          // Ensure props exists before setting a property on it
+          if (!node.props) {
+            node.props = {}
+          }
+          node.props.key = keyValue
+        }
+
+        stack.push(node)
+      } else {
+        // Contenido de texto o expresión
+        if (stack.length > 0) {
+          handleTextToken(token, stack[stack.length - 1])
+        } else {
+          handleTextToken(token, layoutNode)
+        }
+      }
+    })
+
+    nodes.push(layoutNode)
+    return nodes
+  }
+
+  // Si no se encontró LayoutPDF, se procesan los tokens normalmente
+  tokens.forEach((token) => {
+    if (token.startsWith("</")) {
+      // Etiqueta de cierre
+      if (stack.length > 0) {
+        const node = stack.pop()!
+        if (stack.length === 0) {
+          nodes.push(node)
+        } else {
+          stack[stack.length - 1].content.push(node)
+        }
+      }
+    } else if (token.startsWith("<")) {
+      // Etiqueta de apertura
+      const tagMatch = token.match(/<(\w+)([^>]*)>/) || []
+      const tagName = tagMatch[1]
+      const propsString = tagMatch[2] || ""
+      const props: Record<string, any> = {}
+
+      // Procesamos atributos regulares
+      const regularProps = Array.from(propsString.matchAll(/(\w+)="([^"]*)"/g))
+      regularProps.forEach(([_, key, value]) => {
+        props[key] = processExpressions(value)
+      })
+
+      // Procesamos objetos de estilo
+      const styleMatch = propsString.match(/style=\{\{([^}]*)\}\}/)
+      if (styleMatch) {
+        try {
+          const styleString = `{${styleMatch[1]}}`
+          const styleObj = new Function(`return ${styleString}`)()
+          props.style = styleObj
+        } catch (error) {
+          console.error("Error parsing style object:", error)
+        }
+      }
+
+      // Extract key prop if it exists
+      const keyMatch = propsString.match(/key=\{([^}]*)\}/)
+      let keyValue = undefined
+      if (keyMatch) {
+        try {
+          const keyString = keyMatch[1]
+          keyValue = new Function(`return ${keyString}`)()
+          // Remove key from props as it will be handled separately
+          delete props.key
+        } catch (error) {
+          console.error("Error parsing key prop:", error)
+        }
+      }
+
+      const node: ParsedNode = {
+        type: tagName,
+        content: [],
+        props,
+      }
+
+      // Add key as a separate property if it exists
+      if (keyValue !== undefined) {
+        // Ensure props exists before setting a property on it
+        if (!node.props) {
+          node.props = {}
+        }
+        node.props.key = keyValue
+      }
+
+      stack.push(node)
+    } else {
+      // Contenido de texto o expresión
+      if (stack.length > 0) {
+        handleTextToken(token, stack[stack.length - 1])
+      }
+    }
+  })
+
+  return nodes
+}
+

package/src/components/PDF/services/apiService.ts

@@ -0,0 +1,17 @@
+// services/apiService.ts
+export const fetchTemplate = async (): Promise<{ content: string }> => {
+    const response = await fetch("/api/readFile");
+    const data = await response.json();
+    return data;
+  };
+  
+  export const saveDocumentAPI = async (filename: string, content: string): Promise<any> => {
+    const response = await fetch("/api/saveFile", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ filename, content }),
+    });
+    const result = await response.json();
+    return result;
+  };
+