From d9c20528c5974ce3b8f186a311b45818bfe66041 Mon Sep 17 00:00:00 2001
From: Demenech <joaommdemenech@gmail.com>
Date: Tue, 9 Apr 2024 16:20:01 -0300
Subject: [PATCH] feat: PdfViewer component API and docs improvements

---
 .../components/src/components/PdfViewer.tsx   |  8 +--
 .../components/stories/PdfViewer.stories.ts   | 49 +++++++++----------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/packages/components/src/components/PdfViewer.tsx b/packages/components/src/components/PdfViewer.tsx
index a4b745b4..80bbad50 100644
--- a/packages/components/src/components/PdfViewer.tsx
+++ b/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">
diff --git a/packages/components/stories/PdfViewer.stories.ts b/packages/components/stories/PdfViewer.stories.ts
index 0abaf05f..e5a812af 100644
--- a/packages/components/stories/PdfViewer.stories.ts
+++ b/packages/components/stories/PdfViewer.stories.ts
@@ -7,15 +7,17 @@ const meta: Meta = {
   component: PdfViewer,
   tags: ['autodocs'],
   argTypes: {
-    url: {
-      description: 'URL to PDF file',
+    data: {
+      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 = {
-  name: 'PdfViewer',
+export const PdfViewerStoryWithoutControlsLayout: Story = {
+  name: 'PDF Viewer without controls layout',
   args: {
-    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
-  },
-};
-
-export const PdfViewerStoryWithLayout: Story = {
-  name: 'PdfViewer with the default layout',
-  args: {
-    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
-    layout: true,
-  },
-};
-
-export const PdfViewerStoryWithHeight: Story = {
-  name: 'PdfViewer with a custom height',
-  args: {
-    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+    data: {
+      url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+    },
+    parentClassName: 'h-96',
+  },
+};
+
+export const PdfViewerStoryWithControlsLayout: Story = {
+  name: 'PdfViewer with controls layout',
+  args: {
+    data: {
+      url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+    },
+    layout: true,
     parentClassName: 'h-96',
-    layout: true,
   },
 };