@dmsi/wedgekit-react 0.0.79 → 0.0.81

package/dist/components/PDFViewer.js

@@ -0,0 +1,68 @@
+"use client";
+import {
+  Modal
+} from "../chunk-2DCVAATK.js";
+import "../chunk-4RJKB7LC.js";
+import "../chunk-QUPHLL7D.js";
+import "../chunk-FWPJ73IK.js";
+import "../chunk-TVDFTRGL.js";
+import "../chunk-4JLU7TAC.js";
+import "../chunk-J6LETUNM.js";
+import "../chunk-SWA5WVQO.js";
+import "../chunk-4T7F5BZZ.js";
+import {
+  Button
+} from "../chunk-MZJS2ZAU.js";
+import "../chunk-IGQVA7SC.js";
+import "../chunk-RDLEIAQU.js";
+import "../chunk-ORMEWXMH.js";
+
+// src/components/PDFViewer.tsx
+import { usePdf } from "@mikecousins/react-pdf";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PDFViewer(props) {
+  const { base64, isOpen, onClose, datab64 } = props;
+  const [page, setPage] = useState(1);
+  const canvasRef = useRef(null);
+  const { pdfDocument } = usePdf({
+    file: datab64 ? datab64 : `data:application/pdf;base64,${base64}`,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    page,
+    canvasRef,
+    scale: 1
+  });
+  if (!base64 && !datab64) return null;
+  return /* @__PURE__ */ jsx(Modal, { open: isOpen, onClose, hideCloseIcon: true, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
+    pdfDocument ? /* @__PURE__ */ jsx("canvas", { ref: canvasRef }) : /* @__PURE__ */ jsx("div", { children: "Loading PDF..." }),
+    Boolean(pdfDocument && pdfDocument.numPages) && /* @__PURE__ */ jsxs("ul", { className: "flex flex-row justify-between items-center", children: [
+      /* @__PURE__ */ jsx("li", { className: "previous", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: page === 1,
+          onClick: () => setPage(page - 1),
+          variant: "navigation",
+          children: "Previous"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("li", { className: "text-label-desktop text-text-on-action-primary-normal", children: [
+        "Page ",
+        page,
+        " of ",
+        pdfDocument.numPages
+      ] }),
+      /* @__PURE__ */ jsx("li", { className: "next", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: page === pdfDocument.numPages,
+          onClick: () => setPage(page + 1),
+          variant: "navigation",
+          children: "Next"
+        }
+      ) })
+    ] })
+  ] }) });
+}
+export {
+  PDFViewer
+};

package/dist/index.css

@@ -1034,6 +1034,13 @@
   .gap-mobile-layout-group-gap {
     gap: var(--spacing-mobile-layout-group-gap);
   }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1931,6 +1938,9 @@
   .text-heading-3-mobile {
     font-size: var(--text-heading-3-mobile);
   }
+  .text-label-desktop {
+    font-size: var(--text-label-desktop);
+  }
   .text-label-mobile {
     font-size: var(--text-label-mobile);
   }
@@ -4645,6 +4655,7 @@ body {
 @property --tw-rotate-z { syntax: "*"; inherits: false; }
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
+@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@@ -4714,6 +4725,7 @@ body {
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-divide-x-reverse: 0;
       --tw-border-style: solid;

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.79",
+  "version": "0.0.81",
   "type": "module",
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "eslint . --max-warnings 0",
-    "fmt": "prettier --write src/**/*.{ts,tsx,css,json}"
+    "fmt": "prettier --write src/**/*.{ts,tsx,css,json}",
+    "copy:pdf-worker": "shx mkdir -p ../frontend/public/scripts/ && shx cp ../../node_modules/pdfjs-dist/build/pdf.worker.min.mjs ../frontend/public/scripts/pdf.worker.min.mjs",
+    "predev": "npm run copy:pdf-worker",
+    "postbuild": "npm run copy:pdf-worker"
   },
   "files": [
     "dist",
@@ -40,9 +43,11 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@headlessui/react": "^2.2.4",
     "@js-temporal/polyfill": "^0.5.1",
+    "@mikecousins/react-pdf": "^8.0.1",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
     "clsx": "^2.1.1",
+    "pdfjs-dist": "^5.3.93",
     "react-use": "^17.6.0"
   },
   "peerDependencies": {
@@ -60,6 +65,7 @@
     "prettier": "^3.6.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "shx": "^0.4.0",
     "tailwindcss": "^4.1.11",
     "tsup": "^8.5.0",
     "typescript": "5.8.3"

package/src/components/PDFViewer.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { usePdf } from "@mikecousins/react-pdf";
+import { useRef, useState } from "react";
+import { Modal } from "./Modal";
+import { Button } from "./Button";
+
+type PDFViewerProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  base64: string;
+  datab64?: string;
+};
+
+export function PDFViewer(props: PDFViewerProps) {
+  const { base64, isOpen, onClose, datab64 } = props;
+  const [page, setPage] = useState(1);
+
+  const canvasRef = useRef(null);
+
+  const { pdfDocument } = usePdf({
+    file: datab64 ? datab64 : `data:application/pdf;base64,${base64}`,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    page,
+    canvasRef,
+    scale: 1,
+  });
+
+  if (!base64 && !datab64) return null;
+
+  return (
+    <Modal open={isOpen} onClose={onClose} hideCloseIcon>
+      <div className="flex flex-col space-y-4">
+        {pdfDocument ? <canvas ref={canvasRef} /> : <div>Loading PDF...</div>}
+        {Boolean(pdfDocument && pdfDocument.numPages) && (
+          <ul className="flex flex-row justify-between items-center">
+            <li className="previous">
+              <Button
+                disabled={page === 1}
+                onClick={() => setPage(page - 1)}
+                variant="navigation"
+              >
+                Previous
+              </Button>
+            </li>
+            <li className="text-label-desktop text-text-on-action-primary-normal">
+              Page {page} of {pdfDocument!.numPages}
+            </li>
+            <li className="next">
+              <Button
+                disabled={page === pdfDocument!.numPages}
+                onClick={() => setPage(page + 1)}
+                variant="navigation"
+              >
+                Next
+              </Button>
+            </li>
+          </ul>
+        )}
+      </div>
+    </Modal>
+  );
+}