@codeplex-sac/documentos 0.1.1

package/README.md

@@ -0,0 +1,46 @@
+# @codeplex-sac/documentos
+
+Componentes para la **visualización de documentos** en aplicaciones React. Construido sobre [PDFSlick](https://pdfslick.dev) + [PDF.js](https://mozilla.github.io/pdf.js/), con API declarativa en español y controles estilizados con **Material UI**.
+
+## Instalación
+
+```bash
+bun add @codeplex-sac/documentos @pdfslick/core @pdfslick/react @mui/material @emotion/react @emotion/styled
+```
+
+> [!IMPORTANT]
+> Importa los estilos del visor una sola vez y envuelve la app con `CodeplexProveedorTema` de `@codeplex-sac/tema`.
+>
+> ```tsx
+> import '@pdfslick/react/dist/pdf_viewer.css';
+> ```
+
+---
+
+## Componentes
+
+### CodeplexVisorPdf
+
+Visor de PDF interactivo con barra de controles (navegación, zoom, rotación y descarga).
+
+```tsx
+import { CodeplexVisorPdf } from '@codeplex-sac/documentos';
+import '@pdfslick/react/dist/pdf_viewer.css';
+
+export const Ejemplo = () => (
+  <CodeplexVisorPdf archivo="/documentos/factura.pdf" ajuste="ancho" alto={600} />
+);
+```
+
+**Props:**
+
+| Propiedad | Tipo | Por defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `archivo` | `string \| URL \| ArrayBuffer` | — | Ruta, URL o contenido binario del PDF. |
+| `paginaUnica` | `boolean` | `false` | Una página a la vez en lugar de scroll continuo. |
+| `ajuste` | `'pagina' \| 'ancho' \| 'auto' \| number` | `'pagina'` | Ajuste de zoom inicial. |
+| `alto` | `number \| string` | `560` | Altura del visor. |
+| `controles` | `boolean` | `true` | Muestra la barra de controles. |
+| `miniaturas` | `boolean` | `false` | Muestra la barra lateral de miniaturas de páginas. |
+
+Documentación detallada en [`readmes/documentos/visor-pdf.md`](../../readmes/documentos/visor-pdf.md).

package/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/visor-pdf/visor-pdf';

package/index.js

@@ -0,0 +1,136 @@
+import { jsxs as d, jsx as e, Fragment as M } from "react/jsx-runtime";
+import { useState as _ } from "react";
+import { useTheme as $, Box as r, Tooltip as t, IconButton as o, Divider as x, Typography as g } from "@mui/material";
+import { ViewSidebar as E, NavigateBefore as O, NavigateNext as T, ZoomOut as V, ZoomIn as B, RotateRight as F, Print as L, Download as W } from "@mui/icons-material";
+import { usePDFSlick as H } from "@pdfslick/react";
+const U = {
+  pagina: "page-fit",
+  ancho: "page-width",
+  auto: "auto"
+};
+function Z(a) {
+  return typeof a == "number" ? String(a) : U[a];
+}
+const J = {
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  borderRadius: 2,
+  overflow: "hidden",
+  border: (a) => `1px solid ${a.palette.divider}`,
+  bgcolor: "background.paper"
+}, j = {
+  display: "flex",
+  alignItems: "center",
+  gap: 0.5,
+  px: 1.5,
+  py: 0.75,
+  borderBottom: (a) => `1px solid ${a.palette.divider}`,
+  bgcolor: (a) => a.palette.mode === "dark" ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)"
+}, q = {
+  width: 180,
+  flexShrink: 0,
+  position: "relative",
+  borderRight: (a) => `1px solid ${a.palette.divider}`,
+  bgcolor: (a) => a.palette.mode === "dark" ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.015)",
+  "& .pdfSlick__thumbs": { p: 1.5 }
+}, ee = ({
+  archivo: a,
+  paginaUnica: S = !1,
+  ajuste: k = "pagina",
+  alto: R = 560,
+  controles: P = !0,
+  miniaturas: m = !1
+}) => {
+  const { viewerRef: v, thumbsRef: y, usePDFSlickStore: n, PDFSlickViewer: z, PDFSlickThumbnails: C } = H(
+    a,
+    {
+      singlePageViewer: S,
+      scaleValue: Z(k),
+      thumbnailWidth: 160
+    }
+  ), l = n((i) => i.pdfSlick), s = n((i) => i.pageNumber), c = n((i) => i.numPages), b = n((i) => i.scale), w = n((i) => i.pagesRotation), [f, A] = _(m), p = $().palette.mode;
+  return /* @__PURE__ */ d(r, { sx: { ...J, height: R, colorScheme: p }, children: [
+    P && /* @__PURE__ */ d(r, { sx: j, children: [
+      m && /* @__PURE__ */ d(M, { children: [
+        /* @__PURE__ */ e(t, { title: "Miniaturas", children: /* @__PURE__ */ e(
+          o,
+          {
+            size: "small",
+            "aria-label": "Mostrar u ocultar miniaturas",
+            color: f ? "primary" : "default",
+            onClick: () => A((i) => !i),
+            children: /* @__PURE__ */ e(E, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ e(x, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5 } })
+      ] }),
+      /* @__PURE__ */ e(t, { title: "Página anterior", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+        o,
+        {
+          size: "small",
+          "aria-label": "Página anterior",
+          disabled: !l || s <= 1,
+          onClick: () => l?.gotoPage(Math.max(1, s - 1)),
+          children: /* @__PURE__ */ e(O, { fontSize: "small" })
+        }
+      ) }) }),
+      /* @__PURE__ */ e(g, { variant: "body2", sx: { minWidth: 78, textAlign: "center", userSelect: "none" }, children: c ? `${s} / ${c}` : "—" }),
+      /* @__PURE__ */ e(t, { title: "Página siguiente", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+        o,
+        {
+          size: "small",
+          "aria-label": "Página siguiente",
+          disabled: !l || s >= c,
+          onClick: () => l?.gotoPage(Math.min(c, s + 1)),
+          children: /* @__PURE__ */ e(T, { fontSize: "small" })
+        }
+      ) }) }),
+      /* @__PURE__ */ e(r, { sx: { flex: 1 } }),
+      /* @__PURE__ */ e(t, { title: "Reducir", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(o, { size: "small", "aria-label": "Reducir zoom", disabled: !l, onClick: () => l?.decreaseScale(), children: /* @__PURE__ */ e(V, { fontSize: "small" }) }) }) }),
+      /* @__PURE__ */ e(g, { variant: "body2", sx: { minWidth: 48, textAlign: "center", userSelect: "none", color: "text.secondary" }, children: b ? `${Math.round(b * 100)}%` : "—" }),
+      /* @__PURE__ */ e(t, { title: "Ampliar", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(o, { size: "small", "aria-label": "Ampliar zoom", disabled: !l, onClick: () => l?.increaseScale(), children: /* @__PURE__ */ e(B, { fontSize: "small" }) }) }) }),
+      /* @__PURE__ */ e(x, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5 } }),
+      /* @__PURE__ */ e(t, { title: "Rotar", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(o, { size: "small", "aria-label": "Rotar páginas", disabled: !l, onClick: () => l?.setRotation((w + 90) % 360), children: /* @__PURE__ */ e(F, { fontSize: "small" }) }) }) }),
+      /* @__PURE__ */ e(t, { title: "Imprimir", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(o, { size: "small", "aria-label": "Imprimir documento", disabled: !l, onClick: () => l?.triggerPrinting(), children: /* @__PURE__ */ e(L, { fontSize: "small" }) }) }) }),
+      /* @__PURE__ */ e(t, { title: "Descargar", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(o, { size: "small", "aria-label": "Descargar documento", disabled: !l, onClick: () => l?.downloadOrSave(), children: /* @__PURE__ */ e(W, { fontSize: "small" }) }) }) })
+    ] }),
+    /* @__PURE__ */ d(r, { sx: { display: "flex", flex: 1, minHeight: 0 }, children: [
+      m && f && /* @__PURE__ */ e(r, { sx: q, children: /* @__PURE__ */ e(C, { thumbsRef: y, usePDFSlickStore: n, className: "pdfSlick__thumbs", children: ({ pageNumber: i, src: u, width: I, height: N, loaded: D }) => /* @__PURE__ */ d(
+        r,
+        {
+          onClick: () => l?.gotoPage(i),
+          sx: {
+            cursor: "pointer",
+            borderRadius: 1,
+            p: 0.5,
+            border: (h) => `2px solid ${i === s ? h.palette.primary.main : "transparent"}`,
+            transition: "border-color 120ms ease",
+            "&:hover": { borderColor: (h) => h.palette.primary.light }
+          },
+          children: [
+            D && u ? /* @__PURE__ */ e("img", { src: u, width: I, height: N, alt: `Página ${i}`, style: { width: "100%", height: "auto", display: "block", borderRadius: 4 } }) : /* @__PURE__ */ e(r, { sx: { width: "100%", aspectRatio: "0.77", bgcolor: "action.hover", borderRadius: 1 } }),
+            /* @__PURE__ */ e(g, { variant: "caption", sx: { display: "block", textAlign: "center", mt: 0.5, color: i === s ? "primary.main" : "text.secondary" }, children: i })
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          className: "pdfSlick",
+          sx: {
+            position: "relative",
+            flex: 1,
+            minHeight: 0,
+            bgcolor: p === "dark" ? "#2a2a2e" : "#f3f4f6",
+            "& .pdfSlickContainer": { bgcolor: p === "dark" ? "#2a2a2e" : "#f3f4f6" }
+          },
+          children: /* @__PURE__ */ e(z, { viewerRef: v, usePDFSlickStore: n })
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ee as CodeplexVisorPdf
+};

package/lib/visor-pdf/visor-pdf.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type CodeplexAjustePdf = 'pagina' | 'ancho' | 'auto' | number;
+export interface CodeplexVisorPdfProps {
+    /** Ruta, URL o contenido binario del documento PDF. */
+    archivo: string | URL | ArrayBuffer;
+    /** Muestra una sola página a la vez en lugar de desplazamiento continuo. */
+    paginaUnica?: boolean;
+    /** Ajuste de zoom inicial del documento. */
+    ajuste?: CodeplexAjustePdf;
+    /** Altura del visor. */
+    alto?: number | string;
+    /** Muestra la barra de controles (navegación, zoom, descarga, rotación). */
+    controles?: boolean;
+    /** Muestra la barra lateral de miniaturas de páginas. */
+    miniaturas?: boolean;
+}
+export declare const CodeplexVisorPdf: React.FC<CodeplexVisorPdfProps>;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@codeplex-sac/documentos",
+  "version": "0.1.1",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@mui/material": "^7.3.6",
+    "@mui/icons-material": "^7.3.6",
+    "@mui/system": "^7.3.7",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@pdfslick/core": "^4.0.0",
+    "@pdfslick/react": "^4.0.0"
+  }
+}