[components][lg] - pdf viewer

packages/components/package.json

@@ -44,7 +44,10 @@
     "react-vega": "^7.6.0",
     "vega": "5.25.0",
     "vega-lite": "5.1.0",
-    "vitest": "^0.31.4"
+    "vitest": "^0.31.4",
+    "@react-pdf-viewer/core": "3.6.0",
+    "@react-pdf-viewer/default-layout": "3.6.0",
+    "pdfjs-dist": "2.15.349"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.7",

packages/components/src/components/PdfViewer.tsx

@@ -0,0 +1,32 @@
+// Core viewer
+import { Viewer, Worker, SpecialZoomLevel } from '@react-pdf-viewer/core';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+
+// 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;
+  layout: boolean;
+  parentClassName?: string;
+}
+
+export function PdfViewer({
+  url,
+  layout = false,
+  parentClassName,
+}: PdfViewerProps) {
+  const defaultLayoutPluginInstance = defaultLayoutPlugin();
+  return (
+    <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">
+      <div className={parentClassName}>
+        <Viewer
+          defaultScale={SpecialZoomLevel.PageWidth}
+          fileUrl={url}
+          plugins={layout ? [defaultLayoutPluginInstance] : []}
+        />
+      </div>
+    </Worker>
+  );
+}

packages/components/src/index.ts

@@ -1,8 +1,9 @@
-export * from "./components/Table";
+export * from './components/Table';
-export * from "./components/Catalog";
+export * from './components/Catalog';
-export * from "./components/LineChart";
+export * from './components/LineChart';
-export * from "./components/Vega";
+export * from './components/Vega';
-export * from "./components/VegaLite";
+export * from './components/VegaLite';
-export * from "./components/FlatUiTable";
+export * from './components/FlatUiTable';
 export * from './components/OpenLayers/OpenLayers';
-export * from "./components/Map";
+export * from './components/Map';
+export * from './components/PdfViewer';

packages/components/stories/PdfViewer.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PdfViewer, PdfViewerProps } from '../src/components/PdfViewer';
+
+const meta: Meta = {
+  title: 'Components/PdfViewer',
+  component: PdfViewer,
+  tags: ['autodocs'],
+  argTypes: {
+    url: {
+      description: 'URL to PDF file',
+    },
+    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',
+      defaultValue: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PdfViewerProps>;
+
+export const PdfViewerStory: Story = {
+  name: 'PdfViewer',
+  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',
+    parentClassName: 'h-96',
+    layout: true,
+  },
+};

packages/components/tailwind.config.js

@@ -1,6 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './stories/*.{js,ts,jsx,tsx}',
+  ],
   theme: {},
   plugins: [],
 };

packages/components/vite.config.ts

@@ -4,7 +4,6 @@ import { defineConfig } from 'vitest/config';
 import dts from 'vite-plugin-dts';
 import tailwindcss from 'tailwindcss';
 import { UserConfigExport } from 'vite';
-import replace from 'rollup-plugin-re';
 
 const app = async (): Promise<UserConfigExport> => {
   return defineConfig({
@@ -37,7 +36,7 @@ const app = async (): Promise<UserConfigExport> => {
           'vega',
           'react-vega',
           'ol',
-          'leaflet'
+          'leaflet',
         ],
         output: {
           manualChunks: undefined,
@@ -48,7 +47,7 @@ const app = async (): Promise<UserConfigExport> => {
             'react-vega': 'react-vega',
             'react-dom': 'ReactDOM',
             tailwindcss: 'tailwindcss',
-            leaflet: 'leaflet'
+            leaflet: 'leaflet',
           },
         },
       },