@lateralus-ai/shipping-ui 1.0.4 → 1.1.2

package/package.json

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

package/src/components/ModalPanel.tsx

@@ -1,12 +1,17 @@
 import { IconButton } from "@material-tailwind/react";
 import XIcon from "./icons/XIcon";
+import { PropsWithChildren } from "react";
 
 interface HeaderProps {
   onClose: () => void;
   right?: React.ReactNode;
 }
 
-const Header = ({ onClose, right, children }: HeaderProps) => {
+const Header = ({
+  onClose,
+  right,
+  children,
+}: PropsWithChildren<HeaderProps>) => {
   return (
     <div className="bg-gray-50 flex gap-2 items-center px-2 py-3 rounded-t-xl">
       <div className="grow text-subheader-em">{children}</div>

package/src/components/PdfViewer/ImageViewer.tsx

@@ -12,7 +12,7 @@ interface ImageViewerProps {
   onClose: () => void;
   totalPages: number;
   getImageSrc: (page: number) => string;
-  title: string;
+  title?: string;
 }
 
 export const ImageViewer = ({
@@ -38,10 +38,10 @@ export const ImageViewer = ({
         {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

@@ -3,17 +3,19 @@ import { IconButton } from "@material-tailwind/react";
 import { ModalPanel } from "../ModalPanel";
 import ExpandIcon from "../icons/ExpandIcon";
 import { useRefDimensions } from "./useRefDimensions";
+import { cn } from "../../utils/cn";
 
 interface PdfViewerProps {
   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);
@@ -27,22 +29,22 @@ 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="flex-1 grid">
         <div className="grid relative">
           <div
             ref={containerRef}
-            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"
           >
             <embed
               src={`${src}#view=FitH&navpanes=0&scrollbar=0`}
               type="application/pdf"
-              width={dimensions.width}
-              height={dimensions.height}
+              width="100%"
+              height="100%"
               style={{ border: "none" }}
             />
           </div>

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./HelloWorld";
 export * as InputPrompt from "./InputPrompt";
 export * as Sidebar from "./Sidebar";
+export * from "./PdfViewer/";

package/src/stories/PDFViewer.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ImageViewer, PdfViewer } from "../components/PdfViewer";
+import { ImageViewer, PdfViewer } from "../components";
 
 const StoryPage = () => {
   return (
@@ -13,11 +13,11 @@ const StoryPage = () => {
           }
         />
       </div>
-      <div className="w-[600px] h-[800px] p-8" title="Document Viewer">
-        <PdfViewer
-          totalPages={100}
-          src="https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf"
-        />
+      <div
+        className="w-[600px] h-[800px] p-8 flex flex-col"
+        title="Document Viewer"
+      >
+        <PdfViewer src="https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf" />
       </div>
     </div>
   );