@kopexa/pdf-viewer 1.0.0

package/dist/pdf-viewer-lazy.mjs

@@ -0,0 +1,8 @@
+"use client";
+import {
+  PDFViewerLazy
+} from "./chunk-P4M32GKY.mjs";
+import "./chunk-UJB5LFCW.mjs";
+export {
+  PDFViewerLazy
+};

package/dist/pdf-viewer.d.mts

@@ -0,0 +1,71 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+export { pdfjs } from 'react-pdf';
+
+/** Loaded PDF document info passed to the onDocumentLoad callback. */
+type LoadedPDFDocument = {
+    numPages: number;
+};
+
+/**
+ * Configures the PDF.js worker. Call this once before rendering `PDFViewer`.
+ *
+ * @example
+ * ```ts
+ * import { configurePDFWorker } from "@kopexa/pdf-viewer";
+ *
+ * // Option 1: CDN (simplest, no bundler config needed)
+ * configurePDFWorker();
+ *
+ * // Option 2: Local worker via import.meta.url (recommended for production)
+ * configurePDFWorker(
+ *   new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString()
+ * );
+ *
+ * // Option 3: Custom URL (e.g. self-hosted worker)
+ * configurePDFWorker("https://cdn.example.com/pdf.worker.min.mjs");
+ * ```
+ */
+declare function configurePDFWorker(workerSrc?: string): void;
+type OnPDFViewerPageClick = (event: {
+    pageNumber: number;
+    numPages: number;
+    originalEvent: React.MouseEvent<HTMLDivElement, MouseEvent>;
+    pageHeight: number;
+    pageWidth: number;
+    pageX: number;
+    pageY: number;
+}) => void | Promise<void>;
+/** Supported PDF source types. */
+type PDFSource = {
+    type: "url";
+    url: string;
+} | {
+    type: "data";
+    data: Uint8Array;
+} | {
+    type: "base64";
+    data: string;
+};
+type PDFViewerProps = {
+    className?: string;
+    /** The PDF source to render. */
+    source: PDFSource;
+    /** Called when the document has been loaded. */
+    onDocumentLoad?: (doc: LoadedPDFDocument) => void;
+    /** Called when a page is clicked with position information. */
+    onPageClick?: OnPDFViewerPageClick;
+    /** Optional custom page renderer component. */
+    customPageRenderer?: React.FunctionComponent;
+    /** Optional PDF.js options (e.g. cMapUrl). */
+    options?: Record<string, unknown>;
+    /** Content shown while the PDF loads. */
+    loadingContent?: React.ReactNode;
+    /** Content shown when loading fails. */
+    errorContent?: React.ReactNode;
+    /** Label for the page indicator. Receives `{page, total}`. */
+    pageLabel?: (page: number, total: number) => React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onPageClick">;
+declare const PDFViewer: ({ className, source, onDocumentLoad, onPageClick, customPageRenderer, options, loadingContent, errorContent, pageLabel: pageLabelProp, ...props }: PDFViewerProps) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element;
+
+export { type LoadedPDFDocument, type OnPDFViewerPageClick, type PDFSource, PDFViewer, type PDFViewerProps, configurePDFWorker };

package/dist/pdf-viewer.d.ts

@@ -0,0 +1,71 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+export { pdfjs } from 'react-pdf';
+
+/** Loaded PDF document info passed to the onDocumentLoad callback. */
+type LoadedPDFDocument = {
+    numPages: number;
+};
+
+/**
+ * Configures the PDF.js worker. Call this once before rendering `PDFViewer`.
+ *
+ * @example
+ * ```ts
+ * import { configurePDFWorker } from "@kopexa/pdf-viewer";
+ *
+ * // Option 1: CDN (simplest, no bundler config needed)
+ * configurePDFWorker();
+ *
+ * // Option 2: Local worker via import.meta.url (recommended for production)
+ * configurePDFWorker(
+ *   new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString()
+ * );
+ *
+ * // Option 3: Custom URL (e.g. self-hosted worker)
+ * configurePDFWorker("https://cdn.example.com/pdf.worker.min.mjs");
+ * ```
+ */
+declare function configurePDFWorker(workerSrc?: string): void;
+type OnPDFViewerPageClick = (event: {
+    pageNumber: number;
+    numPages: number;
+    originalEvent: React.MouseEvent<HTMLDivElement, MouseEvent>;
+    pageHeight: number;
+    pageWidth: number;
+    pageX: number;
+    pageY: number;
+}) => void | Promise<void>;
+/** Supported PDF source types. */
+type PDFSource = {
+    type: "url";
+    url: string;
+} | {
+    type: "data";
+    data: Uint8Array;
+} | {
+    type: "base64";
+    data: string;
+};
+type PDFViewerProps = {
+    className?: string;
+    /** The PDF source to render. */
+    source: PDFSource;
+    /** Called when the document has been loaded. */
+    onDocumentLoad?: (doc: LoadedPDFDocument) => void;
+    /** Called when a page is clicked with position information. */
+    onPageClick?: OnPDFViewerPageClick;
+    /** Optional custom page renderer component. */
+    customPageRenderer?: React.FunctionComponent;
+    /** Optional PDF.js options (e.g. cMapUrl). */
+    options?: Record<string, unknown>;
+    /** Content shown while the PDF loads. */
+    loadingContent?: React.ReactNode;
+    /** Content shown when loading fails. */
+    errorContent?: React.ReactNode;
+    /** Label for the page indicator. Receives `{page, total}`. */
+    pageLabel?: (page: number, total: number) => React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onPageClick">;
+declare const PDFViewer: ({ className, source, onDocumentLoad, onPageClick, customPageRenderer, options, loadingContent, errorContent, pageLabel: pageLabelProp, ...props }: PDFViewerProps) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element;
+
+export { type LoadedPDFDocument, type OnPDFViewerPageClick, type PDFSource, PDFViewer, type PDFViewerProps, configurePDFWorker };

package/dist/pdf-viewer.js

@@ -0,0 +1,217 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pdf-viewer.tsx
+var pdf_viewer_exports = {};
+__export(pdf_viewer_exports, {
+  PDFViewer: () => PDFViewer,
+  configurePDFWorker: () => configurePDFWorker,
+  pdfjs: () => import_react_pdf.pdfjs
+});
+module.exports = __toCommonJS(pdf_viewer_exports);
+var import_i18n2 = require("@kopexa/i18n");
+var import_motion_utils = require("@kopexa/motion-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react = require("motion/react");
+var import_react2 = require("react");
+var import_react_pdf = require("react-pdf");
+var import_AnnotationLayer = require("react-pdf/dist/Page/AnnotationLayer.css");
+var import_TextLayer = require("react-pdf/dist/Page/TextLayer.css");
+
+// src/messages.ts
+var import_i18n = require("@kopexa/i18n");
+var messages = (0, import_i18n.defineMessages)({
+  loading: {
+    id: "pdf_viewer.loading",
+    defaultMessage: "Loading document\u2026",
+    description: "Shown while the PDF document is loading"
+  },
+  error_title: {
+    id: "pdf_viewer.error_title",
+    defaultMessage: "Something went wrong while loading the document.",
+    description: "Primary error message when PDF fails to load"
+  },
+  error_hint: {
+    id: "pdf_viewer.error_hint",
+    defaultMessage: "Please try again.",
+    description: "Secondary error message hinting the user to retry"
+  },
+  page_label: {
+    id: "pdf_viewer.page_label",
+    defaultMessage: "Page {page} of {total}",
+    description: "Page indicator below each page of the PDF"
+  }
+});
+
+// src/pdf-viewer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function configurePDFWorker(workerSrc) {
+  if (typeof window === "undefined") return;
+  import_react_pdf.pdfjs.GlobalWorkerOptions.workerSrc = workerSrc != null ? workerSrc : `https://unpkg.com/pdfjs-dist@${import_react_pdf.pdfjs.version}/build/pdf.worker.min.mjs`;
+}
+var PAGE_SELECTOR = "[data-page-number]";
+var FADE_TRANSITION = {
+  duration: 0.4,
+  ease: import_motion_utils.TRANSITION_EASINGS.ease
+};
+var PDFViewer = ({
+  className,
+  source,
+  onDocumentLoad,
+  onPageClick,
+  customPageRenderer,
+  options,
+  loadingContent,
+  errorContent,
+  pageLabel: pageLabelProp,
+  ...props
+}) => {
+  var _a;
+  const intl = (0, import_i18n2.useSafeIntl)();
+  const $el = (0, import_react2.useRef)(null);
+  const [width, setWidth] = (0, import_react2.useState)(0);
+  const [numPages, setNumPages] = (0, import_react2.useState)(0);
+  const [pdfError, setPdfError] = (0, import_react2.useState)(false);
+  const sourceUrl = source.type === "url" ? source.url : null;
+  const sourceData = source.type === "data" ? source.data : null;
+  const sourceBase64 = source.type === "base64" ? source.data : null;
+  const fileRef = (0, import_react2.useRef)(null);
+  const prevKeyRef = (0, import_react2.useRef)(null);
+  const currentKey = (_a = sourceUrl != null ? sourceUrl : sourceData) != null ? _a : sourceBase64;
+  if (currentKey !== prevKeyRef.current) {
+    prevKeyRef.current = currentKey;
+    if (sourceUrl) {
+      fileRef.current = sourceUrl;
+    } else if (sourceData) {
+      fileRef.current = { data: sourceData };
+    } else if (sourceBase64) {
+      fileRef.current = { data: base64ToUint8Array(sourceBase64) };
+    } else {
+      fileRef.current = null;
+    }
+  }
+  const file = fileRef.current;
+  const onDocumentLoaded = (doc) => {
+    setNumPages(doc.numPages);
+    onDocumentLoad == null ? void 0 : onDocumentLoad(doc);
+  };
+  const onDocumentPageClick = (event, pageNumber) => {
+    const target = event.target instanceof HTMLElement ? event.target : null;
+    if (!target) return;
+    const $page = target.closest(PAGE_SELECTOR);
+    if (!$page) return;
+    const { height, width: width2, top, left } = $page.getBoundingClientRect();
+    onPageClick == null ? void 0 : onPageClick({
+      pageNumber,
+      numPages,
+      originalEvent: event,
+      pageHeight: height,
+      pageWidth: width2,
+      pageX: event.clientX - left,
+      pageY: event.clientY - top
+    });
+  };
+  (0, import_react2.useEffect)(() => {
+    if (!$el.current) return;
+    const $current = $el.current;
+    const updateWidth = () => {
+      setWidth($current.getBoundingClientRect().width);
+    };
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+  const loader = loadingContent != null ? loadingContent : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-[80vh] max-h-[60rem] flex-col items-center justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-12 w-12 animate-spin rounded-full border-4 border-muted border-t-primary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-4 text-muted-foreground", children: intl.formatMessage(messages.loading) })
+  ] });
+  const error = errorContent != null ? errorContent : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-[80vh] max-h-[60rem] flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center text-muted-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: intl.formatMessage(messages.error_title) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-sm", children: intl.formatMessage(messages.error_hint) })
+  ] }) });
+  if (!file) return error;
+  const isLoaded = numPages > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.LazyMotion, { features: import_react.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: $el, className: (0, import_shared_utils.cn)("overflow-hidden", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_pdf.Document,
+    {
+      file,
+      className: (0, import_shared_utils.cn)("w-full overflow-hidden rounded", {
+        "h-[80vh] max-h-[60rem]": !isLoaded
+      }),
+      onLoadSuccess: onDocumentLoaded,
+      onSourceError: () => setPdfError(true),
+      externalLinkTarget: "_blank",
+      loading: pdfError ? error : loader,
+      error,
+      options,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { mode: "wait", children: !isLoaded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react.m.div,
+        {
+          initial: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: FADE_TRANSITION,
+          children: pdfError ? error : loader
+        },
+        "loader"
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react.m.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: FADE_TRANSITION,
+          children: Array.from({ length: numPages }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "last:-mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden rounded border border-border will-change-transform", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react_pdf.Page,
+              {
+                pageNumber: i + 1,
+                width,
+                renderAnnotationLayer: true,
+                renderTextLayer: true,
+                loading: () => "",
+                renderMode: customPageRenderer ? "custom" : "canvas",
+                customRenderer: customPageRenderer,
+                onClick: (e) => onDocumentPageClick(e, i + 1)
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "my-2 text-center text-[11px] text-muted-foreground/80", children: pageLabelProp ? pageLabelProp(i + 1, numPages) : intl.formatMessage(messages.page_label, {
+              page: i + 1,
+              total: numPages
+            }) })
+          ] }, `page-${i + 1}`))
+        },
+        "pages"
+      ) })
+    }
+  ) }) });
+};
+function base64ToUint8Array(base64String) {
+  const binaryString = atob(base64String);
+  const bytes = new Uint8Array(binaryString.length);
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PDFViewer,
+  configurePDFWorker,
+  pdfjs
+});

package/dist/pdf-viewer.mjs

@@ -0,0 +1,12 @@
+"use client";
+import {
+  PDFViewer,
+  configurePDFWorker,
+  pdfjs
+} from "./chunk-EIAXW4SI.mjs";
+import "./chunk-UJB5LFCW.mjs";
+export {
+  PDFViewer,
+  configurePDFWorker,
+  pdfjs
+};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@kopexa/pdf-viewer",
+  "version": "1.0.0",
+  "description": "A PDF viewer component powered by react-pdf",
+  "keywords": [
+    "pdf-viewer"
+  ],
+  "author": "Kopexa <hello@kopexa.com>",
+  "homepage": "https://kopexa.com",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kopexa-grc/sight.git",
+    "directory": "packages/components/pdf-viewer"
+  },
+  "bugs": {
+    "url": "https://github.com/kopexa-grc/sight/issues"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0-rc.0",
+    "react-dom": ">=19.0.0-rc.0",
+    "react-pdf": ">=9.0.0",
+    "motion": ">=12.23.6"
+  },
+  "dependencies": {
+    "@kopexa/use-hydrated": "1.0.0",
+    "@kopexa/i18n": "17.9.0",
+    "@kopexa/motion-utils": "17.0.58",
+    "@kopexa/shared-utils": "17.0.58",
+    "@kopexa/react-utils": "17.1.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}