@lateralus-ai/shipping-ui 1.4.10 → 1.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "1.4.10",
+  "version": "1.4.12",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/components/PdfViewer/ImageViewer.tsx

@@ -14,6 +14,7 @@ interface ImageViewerProps {
   canvasClassName?: string
   documentUrl?: string
   mainCanvasClassname?: string
+  initialPage?: number
   onClose: () => void
   totalPages: number
   getImageSrc: (page: number) => string | Promise<string>
@@ -24,6 +25,7 @@ export const ImageViewer = ({
   className,
   canvasClassName,
   mainCanvasClassname,
+  initialPage = 1,
   onClose,
   totalPages,
   getImageSrc,
@@ -33,7 +35,10 @@ export const ImageViewer = ({
   const [zoom, zoomActions] = useZoom()
   const [rotation, rotationActions] = useRotation()
   const [{ pan, isDragging }, panActions] = usePanning()
-  const [{ currentPage }, pageActions] = usePageManagement(totalPages)
+  const [{ currentPage }, pageActions] = usePageManagement(
+    totalPages,
+    initialPage
+  )
   const [imageSrc, setImageSrc] = useState<string>(() => {
     const initialResult = getImageSrc(currentPage)
     return typeof initialResult === "string" ? initialResult : ""

package/src/components/PdfViewer/PdfViewer.tsx

@@ -73,10 +73,10 @@ export const PdfViewer = ({
         {title}
       </ModalPanel.Header>
 
-      <div className="grid grow h-full overflow-hidden">
+      <div className="grid grow h-full overflow-hidden shadow">
         <div
           className={cn(
-            "col-start-1 row-start-1 bg-gray-200 h-full overflow-hidden select-none p-8 flex justify-center items-center",
+            "col-start-1 row-start-1 bg-gray-200 h-full overflow-hidden select-none p-8 flex justify-center items-center mt-8",
             isDragging ? "cursor-grabbing" : "cursor-grab"
           )}
           onMouseDown={panActions.handleMouseDown}
@@ -114,67 +114,19 @@ export const PdfViewer = ({
           </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]">
+        <div className="col-start-1 row-start-1 self-start flex justify-between w-full z-10 flex-wrap items-center gap-3 bg-gray-50 p-2 shadow">
+          <ButtonGroup className="divide-x-1 gap-1">
             <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]"
+              className="w-8 h-8 rounded border border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
               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]"
+              className="w-14 h-8 rounded border !border-gray-300 bg-white px-1 py-1 text-center text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
               value={currentPage}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 const page = parseInt(e.target.value)
@@ -186,19 +138,70 @@ export const PdfViewer = ({
               min="1"
               max={totalPages}
             />
-            <div className="flex items-center bg-white px-2">
+            <div className="flex items-center bg-transparent px-2">
               of {totalPages}
             </div>
             <IconButton
               variant="filled"
               color="white"
-              className="py-[26px]"
+              className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
               onClick={pageActions.nextPage}
               disabled={currentPage === totalPages}
             >
               <Icon icon="lucide:chevron-right" />
             </IconButton>
           </ButtonGroup>
+          <div className="flex gap-2 items-center">
+            <ButtonGroup className="divide-x-1 gap-1">
+              <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={zoomActions.zoomOut}
+              >
+                <Icon icon="lucide:minus" />
+              </IconButton>
+              <Tooltip content="Click to reset zoom and pan">
+                <button
+                  className="w-14 h-8 rounded border !border-gray-300 bg-white px-1 py-1 text-center text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                  onClick={() => {
+                    zoomActions.reset()
+                    panActions.reset()
+                  }}
+                >
+                  {zoom}%
+                </button>
+              </Tooltip>
+              <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={zoomActions.zoomIn}
+              >
+                <Icon icon="lucide:plus" />
+              </IconButton>
+            </ButtonGroup>
+            <div className="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
+            <ButtonGroup className="divide-x-1 gap-1">
+              {/* <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={rotationActions.rotateClockwise}
+              >
+                <Icon icon="lucide:iteration-cw" />
+              </IconButton> */}
+
+              <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={rotationActions.rotateCounterClockwise}
+              >
+                <Icon icon="lucide:iteration-ccw" />
+              </IconButton>
+            </ButtonGroup>
+          </div>
         </div>
       </div>
     </div>

package/src/components/PdfViewer/usePageManagement.ts

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

package/src/stories/PDFViewer.stories.tsx

@@ -7,6 +7,7 @@ const StoryPage = () => {
       <div className="w-[600px] h-[800px] p-8">
         <ImageViewer
           totalPages={100}
+          initialPage={10}
           mainCanvasClassname="max-h-[650px]"
           title="Image Viewer"
           getImageSrc={(page) =>