feat: PdfViewer component API and docs improvements

packages/components/src/components/PdfViewer.tsx

@@ -1,22 +1,24 @@
 // Core viewer
 import { Viewer, Worker, SpecialZoomLevel } from '@react-pdf-viewer/core';
 import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+import { Data } from '../types/properties';
 
 // Import styles
 import '@react-pdf-viewer/core/lib/styles/index.css';
 import '@react-pdf-viewer/default-layout/lib/styles/index.css';
 
 export interface PdfViewerProps {
-  url: string;
+  data: Required<Pick<Data, 'url'>>;
   layout: boolean;
   parentClassName?: string;
 }
 
 export function PdfViewer({
-  url,
+  data,
   layout = false,
-  parentClassName,
+  parentClassName = 'h-screen',
 }: PdfViewerProps) {
+  const url = data.url;
   const defaultLayoutPluginInstance = defaultLayoutPlugin();
   return (
     <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">

packages/components/stories/PdfViewer.stories.ts

@@ -7,15 +7,17 @@ const meta: Meta = {
   component: PdfViewer,
   tags: ['autodocs'],
   argTypes: {
-    url: {
+    data: {
-      description: 'URL to PDF file',
+      description:
+        'Object with a `url` property pointing to the PDF file to be displayed, e.g.: `{ url: "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK" }`.',
     },
     parentClassName: {
-      description: 'Classname for the parent div of the pdf viewer',
-    },
-    layour: {
       description:
-        'Set to true if you want to have a layout with zoom level, page count, printing button etc',
+        'HTML classes to be applied to the container of the PDF viewer. [Tailwind](https://tailwindcss.com/) classes, such as `h-96` to define the height of the component, can be used on this field.',
+    },
+    layout: {
+      description:
+        'Set to `true` if you want to display a layout with zoom level, page count, printing button and other controls.',
       defaultValue: false,
     },
   },
@@ -25,26 +27,23 @@ export default meta;
 
 type Story = StoryObj<PdfViewerProps>;
 
-export const PdfViewerStory: Story = {
+export const PdfViewerStoryWithoutControlsLayout: Story = {
-  name: 'PdfViewer',
+  name: 'PDF Viewer without controls layout',
   args: {
-    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+    data: {
-  },
+      url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
-};
+    },
-
+    parentClassName: 'h-96',
-export const PdfViewerStoryWithLayout: Story = {
+  },
-  name: 'PdfViewer with the default layout',
+};
-  args: {
+
-    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+export const PdfViewerStoryWithControlsLayout: Story = {
-    layout: true,
+  name: 'PdfViewer with controls layout',
-  },
+  args: {
-};
+    data: {
-
+      url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
-export const PdfViewerStoryWithHeight: Story = {
+    },
-  name: 'PdfViewer with a custom height',
+    layout: true,
-  args: {
-    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
     parentClassName: 'h-96',
-    layout: true,
   },
 };