@lateralus-ai/shipping-ui 1.1.1 → 1.2.0

package/dist/material-theme.d.ts

@@ -413,4 +413,30 @@ export declare const materialTheme: {
             };
         };
     };
+    tabsHeader: {
+        defaultProps: {
+            className: string;
+        };
+    };
+    tab: {
+        defaultProps: {
+            className: string;
+        };
+        styles: {
+            base: {
+                indicator: {
+                    bg: string;
+                    borderRadius: string;
+                    boxShadow: string;
+                };
+            };
+        };
+    };
+    tabPanel: {
+        styles: {
+            base: {
+                p: string;
+            };
+        };
+    };
 };

package/dist/stories/SearchModal.d.ts

@@ -0,0 +1 @@
+export declare const SearchModals: () => import("react/jsx-runtime").JSX.Element;

package/dist/style.css

@@ -0,0 +1 @@
+:root{--react-pdf-annotation-layer: 1;--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color: Highlight;--input-focus-outline: 1px solid Canvas;--input-unfocused-border-color: transparent;--input-disabled-border-color: transparent;--input-hover-border-color: black;--link-outline: none}@media screen and (forced-colors: active){:root{--input-focus-border-color: CanvasText;--input-unfocused-border-color: ActiveText;--input-disabled-border-color: GrayText;--input-hover-border-color: Highlight;--link-outline: 1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert(100%);backdrop-filter:invert(100%)}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0;z-index:3}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer canvas{position:absolute;width:100%;height:100%}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;margin:0;transform-origin:0 0}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--total-scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{background:none;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{background:none;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;height:50%;left:30%;top:20%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.annotationLayer .popupTriggerArea{height:100%;width:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{position:absolute;font-size:calc(9px * var(--total-scale-factor));width:100%;min-width:calc(180px * var(--total-scale-factor));pointer-events:none}.annotationLayer .popup{position:absolute;max-width:calc(180px * var(--total-scale-factor));background-color:#ff9;box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) #888;border-radius:calc(2px * var(--total-scale-factor));padding:calc(6px * var(--total-scale-factor));margin-left:calc(5px * var(--total-scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popup>*{font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{display:inline-block;margin-left:calc(5px * var(--total-scale-factor))}.annotationLayer .popupContent{border-top:1px solid rgba(51,51,51,1);margin-top:calc(2px * var(--total-scale-factor));padding-top:calc(2px * var(--total-scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}:root{--react-pdf-text-layer: 1;--highlight-bg-color: rgba(180, 0, 170, 1);--highlight-selected-bg-color: rgba(0, 100, 0, 1)}@media screen and (forced-colors: active){:root{--highlight-bg-color: Highlight;--highlight-selected-bg-color: ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translate(-100%)}.textLayer{position:absolute;text-align:initial;top:0;right:0;bottom:0;left:0;overflow:hidden;line-height:1;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2}.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;margin:0;transform-origin:0 0}.textLayer span.markedContent{top:0;height:0}.textLayer .highlight{margin:-1px;padding:1px;background-color:var(--highlight-bg-color);border-radius:4px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::-moz-selection{background:transparent}.textLayer br::selection{background:transparent}.textLayer .endOfContent{display:block;position:absolute;top:100%;right:0;bottom:0;left:0;z-index:-1;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{position:absolute;top:0;left:0;width:0;height:0;display:none}.tabs-container{width:100%;min-width:400px}.tabs-header{display:flex;border-bottom:2px solid #e5e7eb;margin-bottom:16px}.tab-button{padding:12px 24px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#6b7280;position:relative;transition:color .2s}.tab-button:hover{color:#374151}.tab-button.active{color:#3b82f6}.tab-button.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background-color:#3b82f6}.tab-content{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

package/dist/tailwind-theme.d.ts

@@ -71,6 +71,18 @@ export declare const theme: {
         "accordion-up": string;
     };
     colors: {
+        brand: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
         gray: {
             50: string;
             100: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -82,6 +82,7 @@
   "dependencies": {
     "@iconify/react": "^6.0.2",
     "@react-hooks-library/core": "^0.6.2",
+    "react-hotkeys-hook": "^5.1.0",
     "react-pdf": "^10.1.0",
     "react-router": "^7.9.3"
   }

package/src/components/ModalPanel.tsx

@@ -31,6 +31,19 @@ const Header = ({
   );
 };
 
+interface BodyProps {
+  className?: string;
+}
+
+const Body = ({ children, className = "" }: PropsWithChildren<BodyProps>) => {
+  return (
+    <div className={`w-full overflow-auto ${className}`}>
+      {children}
+    </div>
+  );
+};
+
 export const ModalPanel = {
   Header,
+  Body,
 };

package/src/components/PdfViewer/ImageViewer.tsx

@@ -7,41 +7,46 @@ import { useZoom } from "./useZoom";
 import { useRotation } from "./useRotation";
 import { usePanning } from "./usePanning";
 import { usePageManagement } from "./usePageManagement";
+import { cn } from "../../utils/cn";
 
 interface ImageViewerProps {
   onClose: () => void;
   totalPages: number;
   getImageSrc: (page: number) => string;
-  title: string;
+  title?: string;
 }
 
 export const ImageViewer = ({
+  className,
   onClose,
   totalPages,
   getImageSrc,
+  documentUrl,
   title = "PDF Viewer",
 }: ImageViewerProps) => {
   const [zoom, zoomActions] = useZoom();
   const [rotation, rotationActions] = useRotation();
   const [{ pan, isDragging }, panActions] = usePanning();
-  const [currentPage, pageActions] = usePageManagement(totalPages);
+  const [{ currentPage }, pageActions] = usePageManagement(totalPages);
 
   const rightButtons = (
     <IconButton variant="text" color="gray">
-      <ExpandIcon className="size-4" />
+      <a href={documentUrl} target="_blank" rel="noopener noreferrer">
+        <ExpandIcon className="size-4" />
+      </a>
     </IconButton>
   );
 
   return (
-    <div className="shadow rounded-t-lg">
+    <div className={cn("shadow rounded-t-lg flex flex-col h-full", className)}>
       <ModalPanel.Header onClose={onClose} right={rightButtons}>
         {title}
       </ModalPanel.Header>
 
-      <div className="grid">
+      <div className="flex-1 grid">
         <div className="grid relative">
           <div
-            className="overflow-hidden col-start-1 row-start-1 bg-gray-200 h-[600px] relative"
+            className="overflow-hidden col-start-1 row-start-1 bg-gray-200 h-full relative"
             onMouseMove={panActions.handleMouseMove}
             onMouseUp={panActions.handleMouseUp}
             onMouseLeave={panActions.handleMouseUp}

package/src/components/PdfViewer/PdfViewer.tsx

@@ -1,22 +1,36 @@
-import { useRef } from "react";
-import { IconButton } from "@material-tailwind/react";
+import { IconButton, ButtonGroup, Tooltip } from "@material-tailwind/react";
+import { Document, Page, pdfjs } from "react-pdf";
 import { ModalPanel } from "../ModalPanel";
 import ExpandIcon from "../icons/ExpandIcon";
-import { useRefDimensions } from "./useRefDimensions";
+import { Icon } from "@iconify/react";
+import { cn } from "../../utils/cn";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
+import { useState, ChangeEvent, useMemo } from "react";
+import { useZoom } from "./useZoom";
+import { useRotation } from "./useRotation";
+import { usePageManagement } from "./usePageManagement";
+import { usePanning } from "./usePanning";
 
-interface PdfViewerProps {
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
+interface PdfViewerProps extends React.HTMLProps<HTMLDivElement> {
   onClose: () => void;
   src: string;
-  title: string;
+  title?: string;
 }
 
 export const PdfViewer = ({
   onClose,
   src,
   title = "PDF Viewer",
+  className,
 }: PdfViewerProps) => {
-  const containerRef = useRef(null);
-  const dimensions = useRefDimensions(containerRef);
+  const [zoom, zoomActions] = useZoom();
+  const [rotation, rotationActions] = useRotation();
+  const [{ currentPage, totalPages }, pageActions] = usePageManagement();
+  const [{ pan, isDragging }, panActions] = usePanning();
+
 
   const rightButtons = (
     <IconButton variant="text" color="gray">
@@ -27,26 +41,135 @@ export const PdfViewer = ({
   );
 
   return (
-    <div className="shadow rounded-t-lg">
+    <div className={cn("shadow rounded-t-lg flex flex-col h-full", className)}>
       <ModalPanel.Header onClose={onClose} right={rightButtons}>
         {title}
       </ModalPanel.Header>
 
-      <div className="grid">
-        <div className="grid relative">
+      <div className="grid grow h-full overflow-hidden">
+        <div
+          className={cn(
+            "col-start-1 row-start-1 bg-gray-200 h-full overflow-hidden select-none p-8",
+            isDragging ? "cursor-grabbing" : "cursor-grab"
+          )}
+          onMouseDown={panActions.handleMouseDown}
+          onMouseMove={panActions.handleMouseMove}
+          onMouseUp={panActions.handleMouseUp}
+          onMouseLeave={panActions.handleMouseUp}
+          style={{
+            userSelect: 'none',
+          }}
+        >
           <div
-            ref={containerRef}
-            className="overflow-hidden col-start-1 row-start-1 bg-gray-200 h-[600px] relative"
+            style={{
+              transform: `translate(${pan.x}px, ${pan.y}px)`,
+              transition: isDragging ? 'none' : 'transform 0.1s',
+              pointerEvents: 'none',
+            }}
           >
-            <embed
-              src={`${src}#view=FitH&navpanes=0&scrollbar=0`}
-              type="application/pdf"
-              width={dimensions.width}
-              height={dimensions.height}
-              style={{ border: "none" }}
-            />
+            <Document
+              file={src}
+              onLoadSuccess={({ numPages }) => {
+                pageActions.setTotalPages(numPages);
+              }}
+              scale={zoom / 100}
+              rotate={rotation}
+            >
+              <Page
+                pageNumber={currentPage}
+                renderTextLayer={true}
+                renderAnnotationLayer={true}
+              />
+            </Document>
           </div>
         </div>
+
+        <div className="col-start-1 row-start-1 self-end p-4 flex gap-2 justify-between w-full z-10">
+          <ButtonGroup className="divide-x-0 h-[52px]">
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={zoomActions.zoomOut}
+            >
+              <Icon icon="lucide:minus" />
+            </IconButton>
+            <Tooltip content="Click to reset zoom and pan">
+              <button
+                className="!bg-white text-center cursor-pointer w-[60px]"
+                onClick={() => {
+                  zoomActions.reset();
+                  panActions.reset();
+                }}
+              >
+                {zoom}%
+              </button>
+            </Tooltip>
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={zoomActions.zoomIn}
+            >
+              <Icon icon="lucide:plus" />
+            </IconButton>
+          </ButtonGroup>
+          <ButtonGroup className="divide-x-0 h-[52px]">
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={rotationActions.rotateClockwise}
+            >
+              <Icon icon="lucide:iteration-cw" />
+            </IconButton>
+
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={rotationActions.rotateCounterClockwise}
+            >
+              <Icon icon="lucide:iteration-ccw" />
+            </IconButton>
+          </ButtonGroup>
+          <ButtonGroup className="divide-x-0 ">
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={pageActions.prevPage}
+              disabled={currentPage === 1}
+            >
+              <Icon icon="lucide:chevron-left" />
+            </IconButton>
+            <input
+              className="bg-white pl-4 flex items-center w-[50px] text-center focus:outline-none w-[60px]"
+              value={currentPage}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                const page = parseInt(e.target.value);
+                if (!isNaN(page)) {
+                  pageActions.goToPage(page);
+                }
+              }}
+              type="number"
+              min="1"
+              max={totalPages}
+            />
+            <div className="flex items-center bg-white px-2">
+              of {totalPages}
+            </div>
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={pageActions.nextPage}
+              disabled={currentPage === totalPages}
+            >
+              <Icon icon="lucide:chevron-right" />
+            </IconButton>
+          </ButtonGroup>
+        </div>
       </div>
     </div>
   );

package/src/components/PdfViewer/usePageManagement.ts

@@ -1,14 +1,29 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 
-export const usePageManagement = (totalPages: number = 1) => {
+export const usePageManagement = (initialTotalPages: number = 0) => {
   const [currentPage, setCurrentPage] = useState<number>(1);
+  const [totalPages, setTotalPages] = useState<number>(initialTotalPages);
 
   const actions = {
-    nextPage: () => setCurrentPage((prev) => Math.min(prev + 1, totalPages)),
-    prevPage: () => setCurrentPage((prev) => Math.max(prev - 1, 1)),
-    goToPage: (page: number) =>
-      setCurrentPage(Math.max(1, Math.min(page, totalPages))),
+    nextPage: useCallback(() => {
+      setCurrentPage((prev) => {
+        return prev < totalPages ? prev + 1 : prev;
+      });
+    }, [totalPages]),
+    prevPage: useCallback(() => {
+      setCurrentPage((prev) => Math.max(prev - 1, 1));
+    }, []),
+    goToPage: useCallback(
+      (page: number) => {
+        setCurrentPage(() => Math.max(1, Math.min(page, totalPages)));
+      },
+      [totalPages],
+    ),
+    setTotalPages: useCallback((pages: number) => {
+      setTotalPages(pages);
+      setCurrentPage((prev) => Math.min(prev, pages));
+    }, []),
   };
 
-  return [currentPage, actions] as const;
+  return [{ currentPage, totalPages }, actions] as const;
 };