react-pdf-levelup 1.0.4

package/src/components/PDF/view/ColorPicker.tsx

@@ -0,0 +1,147 @@
+"use client"
+
+import type React from "react"
+import { useState, useRef, useEffect } from "react"
+import { Palette } from "lucide-react"
+
+interface ColorPickerProps {
+  onColorSelect?: (color: string) => void
+}
+
+const ColorPicker: React.FC<ColorPickerProps> = ({ onColorSelect }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedColor, setSelectedColor] = useState("#3366cc")
+  const [recentColors, setRecentColors] = useState<string[]>(["#3366cc", "#dc3545", "#28a745", "#ffc107", "#17a2b8"])
+  const [copied, setCopied] = useState(false)
+  const colorPickerRef = useRef<HTMLDivElement>(null)
+
+  // Predefined color palette
+  const colorPalette = [
+    "#000000",
+    "#343a40",
+    "#495057",
+    "#6c757d",
+    "#adb5bd",
+    "#ced4da",
+    "#dee2e6",
+    "#e9ecef",
+    "#f8f9fa",
+    "#ffffff",
+    "#007bff",
+    "#0056b3",
+    "#6610f2",
+    "#6f42c1",
+    "#e83e8c",
+    "#dc3545",
+    "#fd7e14",
+    "#ffc107",
+    "#28a745",
+    "#20c997",
+    "#17a2b8",
+  ]
+
+  useEffect(() => {
+    // Close color picker when clicking outside
+    const handleClickOutside = (event: MouseEvent) => {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [])
+
+  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const color = e.target.value
+    setSelectedColor(color)
+    if (onColorSelect) {
+      onColorSelect(color)
+    }
+  }
+
+  const selectColor = (color: string) => {
+    setSelectedColor(color)
+    if (onColorSelect) {
+      onColorSelect(color)
+    }
+
+    // Add to recent colors if not already there
+    if (!recentColors.includes(color)) {
+      setRecentColors((prev) => [color, ...prev.slice(0, 4)])
+    }
+  }
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(selectedColor)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <div className="color-picker-container" ref={colorPickerRef}>
+      <button className="btn btn-icon tooltip" data-tooltip="Color Picker" onClick={() => setIsOpen(!isOpen)}>
+        <Palette size={20} style={{ color: selectedColor }} />
+      </button>
+
+      {isOpen && (
+        <div className="color-picker-panel">
+          <div className="color-picker-header">
+            <h3>Color Picker</h3>
+            <div className="selected-color-preview" style={{ backgroundColor: selectedColor }}></div>
+          </div>
+
+          <div className="color-input-container">
+            <input type="color" value={selectedColor} onChange={handleColorChange} className="color-input" />
+            <div className="hex-value-container">
+              <input
+                type="text"
+                value={selectedColor}
+                onChange={(e) => selectColor(e.target.value)}
+                className="hex-input"
+              />
+              <button className="copy-button" onClick={copyToClipboard}>
+                {copied ? "Copied!" : "Copy"}
+              </button>
+            </div>
+          </div>
+
+          <div className="color-section">
+            <h4>Recent Colors</h4>
+            <div className="color-grid">
+              {recentColors.map((color, index) => (
+                <div
+                  key={`recent-${index}`}
+                  className="color-swatch"
+                  style={{ backgroundColor: color }}
+                  onClick={() => selectColor(color)}
+                  title={color}
+                ></div>
+              ))}
+            </div>
+          </div>
+
+          <div className="color-section">
+            <h4>Color Palette</h4>
+            <div className="color-grid">
+              {colorPalette.map((color, index) => (
+                <div
+                  key={`palette-${index}`}
+                  className="color-swatch"
+                  style={{ backgroundColor: color }}
+                  onClick={() => selectColor(color)}
+                  title={color}
+                ></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ColorPicker
+

package/src/components/PDF/view/Header.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import Link from "next/link"
+import { Save, FileText, Settings } from "lucide-react"
+import ColorPicker from "./ColorPicker"
+import SettingsPanel, { type LayoutSettings } from "./SettingsPanel"
+
+interface HeaderProps {
+  title: string
+  showSaveModal: () => void
+  selectedTemplate?: string
+  onTemplateChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void
+  isTemplatePage?: boolean
+  currentCode?: string
+  onApplySettings?: (settings: LayoutSettings) => void
+}
+
+const Header: React.FC<HeaderProps> = ({
+  title,
+  showSaveModal,
+  selectedTemplate,
+  onTemplateChange,
+  isTemplatePage = false,
+  currentCode = "",
+  onApplySettings = () => { },
+}) => {
+  const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false)
+
+  const handleColorSelect = (color: string) => {
+    // You can implement additional functionality here if needed
+    console.log("Selected color:", color)
+  }
+
+  const handleTemplateChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value
+    const urls: { [key: string]: string } = {
+      allTemplate: '/template/allTemplate',
+      invoice: '/template/invoice',
+      report: '/template/report',
+      certificate: '/template/certificate',
+    }
+
+    if (value !== 'default' && urls[value]) {
+      window.open(urls[value], '_blank')
+    }
+
+    if (onTemplateChange) {
+      onTemplateChange(event)
+    }
+  }
+
+  return (
+    <>
+      <header className="header">
+        <div className="header-title">
+          <FileText size={24} />
+          {title}
+        </div>
+        <div className="header-tools">
+          <ColorPicker onColorSelect={handleColorSelect} />
+          <button
+            className="btn btn-icon tooltip"
+            data-tooltip="Configuración"
+            onClick={() => setIsSettingsPanelOpen(true)}
+          >
+            <Settings size={20} />
+          </button>
+
+
+          <>
+            <select value={selectedTemplate} onChange={handleTemplateChange} className="template-select">
+              <option value="default">Template por defecto</option>
+              <option value="allTemplate">AllTemplate</option>
+              <option value="invoice">Factura</option>
+              <option value="report">Reporte</option>
+              <option value="certificate">Certificado</option>
+            </select>
+          </>
+
+
+
+          <button className="btn btn-primary" onClick={showSaveModal}>
+            <Save size={20} />
+            Guardar
+          </button>
+        </div>
+      </header>
+
+      <SettingsPanel
+        isOpen={isSettingsPanelOpen}
+        onClose={() => setIsSettingsPanelOpen(false)}
+        onApplySettings={onApplySettings}
+        currentCode={currentCode}
+      />
+    </>
+  )
+}
+
+export default Header
+

package/src/components/PDF/view/HomePDF.tsx

@@ -0,0 +1,177 @@
+import type React from "react"
+import { useState, useEffect, useRef } from "react"
+import { Editor } from "@monaco-editor/react"
+import dynamic from "next/dynamic"
+import PDFContent from "../components/PDFContent"
+import Header from "./Header"
+import { Save } from "lucide-react"
+import type { LayoutSettings } from "./SettingsPanel"
+
+const PDFViewer = dynamic(() => import("@react-pdf/renderer").then((mod) => mod.PDFViewer), { ssr: false })
+
+const PlaygroundPDF: React.FC = () => {
+  const [code, setCode] = useState<string>("")
+  const [showModal, setShowModal] = useState<boolean>(false)
+  const [filename, setFilename] = useState<string>("Documento2.tsx")
+  const [selectedTemplate, setSelectedTemplate] = useState<string>("default")
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    const fetchTemplate = async () => {
+      try {
+        const response = await fetch("/api/readFile")
+        const data = await response.json()
+        setCode(data.content)
+      } catch (error) {
+        console.error("Error al leer el archivo:", error)
+      }
+    }
+
+    fetchTemplate()
+  }, [])
+
+  const saveDocument = async () => {
+    try {
+      const response = await fetch("/api/saveFile", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ filename, content: code }),
+      })
+
+      const result = await response.json()
+      console.log(result.message)
+      setShowModal(false)
+    } catch (error) {
+      console.error("Error al guardar el archivo:", error)
+    }
+  }
+
+  const handleEditorChange = (value: string | undefined) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setCode(value || "")
+    }, 1000)
+  }
+
+  const handleTemplateChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedTemplate(event.target.value)
+  }
+
+  const handleApplySettings = (settings: LayoutSettings) => {
+    const updatedCode = generateUpdatedLayoutCode(code, settings)
+    setCode(updatedCode)
+  }
+
+  const generateUpdatedLayoutCode = (originalCode: string, settings: LayoutSettings): string => {
+    try {
+      const layoutPDFRegex = /<LayoutPDF[^>]*>/
+      const layoutPDFMatch = originalCode.match(layoutPDFRegex)
+
+      if (!layoutPDFMatch) {
+        console.error("Could not find LayoutPDF component in the code")
+        return originalCode
+      }
+
+      let newProps = `size="${settings.pageSize}" orientation="${settings.orientation}"`
+
+      if (settings.backgroundColor !== "white") {
+        newProps += ` backgroundColor="${settings.backgroundColor}"`
+      }
+
+      if (settings.customPadding) {
+        newProps += ` paddingTop={${settings.paddingTop}} paddingRight={${settings.paddingRight}} paddingBottom={${settings.paddingBottom}} paddingLeft={${settings.paddingLeft}}`
+      } else {
+        newProps += ` padding={${settings.padding}}`
+      }
+
+      if (settings.fontFamily !== "Times New Roman") {
+        newProps += ` fontFamily="${settings.fontFamily}"`
+      }
+
+      if (settings.fontSize !== 12) {
+        newProps += ` fontSize={${settings.fontSize}}`
+      }
+
+      if (settings.lineHeight !== 1.5) {
+        newProps += ` lineHeight={${settings.lineHeight}}`
+      }
+
+      newProps += ` showPageNumbers={${settings.showPageNumbers}}`
+
+      const newLayoutPDFTag = `<LayoutPDF ${newProps}>`
+
+      return originalCode.replace(layoutPDFRegex, newLayoutPDFTag)
+    } catch (error) {
+      console.error("Error updating layout code:", error)
+      return originalCode
+    }
+  }
+
+  console.log("code", code)
+
+  return (
+    <>
+      <Header
+        title="PDF Editor"
+        showSaveModal={() => setShowModal(true)}
+        selectedTemplate={selectedTemplate}
+        onTemplateChange={handleTemplateChange}
+        currentCode={code}
+        onApplySettings={handleApplySettings}
+      />
+
+      <div className="container-playground">
+        <div className="container-editor fade-in">
+          <Editor
+            theme="vs-dark"
+            value={code}
+            defaultLanguage="javascript"
+            onChange={handleEditorChange}
+            options={{
+              minimap: { enabled: true },
+              fontSize: 14,
+              wordWrap: "on",
+              automaticLayout: true,
+              lineNumbers: "on",
+              scrollBeyondLastLine: false,
+              smoothScrolling: true,
+            }}
+          />
+        </div>
+        <div className="container-render fade-in">
+          {typeof window !== "undefined" && (
+            <PDFViewer width="100%" height="100%">
+              <PDFContent content={code} />
+            </PDFViewer>
+          )}
+        </div>
+      </div>
+
+      <div className={`modal ${showModal ? "show" : ""}`}>
+        <div className="modal-content">
+          <h2>Guardar Documento</h2>
+          <input
+            type="text"
+            value={filename}
+            onChange={(e) => setFilename(e.target.value)}
+            placeholder="Nombre del archivo"
+          />
+          <div>
+            <button className="btn btn-primary" onClick={saveDocument}>
+              <Save size={20} />
+              Guardar
+            </button>
+            <button className="btn btn-outline" onClick={() => setShowModal(false)}>
+              Cancelar
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default PlaygroundPDF