Update: Added viewer docu in storybook

lexio/lib/components/Viewers/PdfViewer/PdfViewer.tsx

@@ -104,10 +104,6 @@ interface PdfViewerProps {
  *   }}
  * />
  * ```
- * 
- * @todo: 
- *  - change / unify mechanism to select page based on highlights / page number
- *  - add support for text search
  */
 const PdfViewer = ({data, highlights, page, styleOverrides = {}}: PdfViewerProps) => {
     const [numPages, setNumPages] = useState<number | null>(null);

lexio/lib/components/Viewers/index.ts

@@ -1,3 +1,4 @@
+export * from './MarkdownViewer/MarkdownViewer';
 export * from './PdfViewer/PdfViewer';
 export * from './HtmlViewer/HtmlViewer';
 export * from './ViewerToolbar';

lexio/package.json

@@ -51,6 +51,7 @@
     "@storybook/addon-interactions": "^8.6.0-alpha.0",
     "@storybook/addon-onboarding": "^8.6.0-alpha.0",
     "@storybook/blocks": "^8.6.0-alpha.0",
+    "@storybook/docs-tools": "^8.5.2",
     "@storybook/manager-api": "^8.6.0-alpha.0",
     "@storybook/react": "^8.6.0-alpha.0",
     "@storybook/react-vite": "^8.6.0-alpha.0",

lexio/src/stories/components/HTMLViewer.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import 'tailwindcss/tailwind.css';
+import {RAGProvider} from "../../../lib/components/RAGProvider";
+import {HtmlViewer} from "../../../lib/components/Viewers";
+import {extractComponentDescription} from "@storybook/docs-tools";
+
+const testContent = `
+<div style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; color: #333;">
+  <h1 style="color: #4A90E2;">Test HTML Content</h1>
+  <p>This is a <strong>test paragraph</strong> to showcase HTML rendering in the <code>HtmlViewer</code> component.</p>
+
+  <h2>Lists:</h2>
+  <ul>
+    <li>Item One</li>
+    <li>Item Two</li>
+    <li>Item Three</li>
+  </ul>
+
+  <h2>Table Example:</h2>
+  <table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">
+    <tr style="background-color: #f4f4f4;">
+      <th>Name</th>
+      <th>Age</th>
+      <th>City</th>
+    </tr>
+    <tr>
+      <td>John Doe</td>
+      <td>30</td>
+      <td>New York</td>
+    </tr>
+    <tr>
+      <td>Jane Doe</td>
+      <td>28</td>
+      <td>Los Angeles</td>
+    </tr>
+  </table>
+</div>
+`;
+
+const meta: Meta<typeof HtmlViewer> = {
+  title: 'Components/HtmlViewer',
+  component: HtmlViewer,
+  tags: ['autodocs'],
+  parameters: {
+        docs: {
+            extractComponentDescription: (component, { notes }) => {
+                // Use Storybook's default extractor
+                let description = extractComponentDescription(component, { notes });
+
+                if (description) {
+                    // Customize the description by filtering unwanted TSDoc decorators
+                    description = description
+                        .split('\n') // Split lines
+                        .filter(line =>
+                            !line.startsWith('@param') &&  // Remove @param tags
+                            !line.startsWith('@component') &&  // Remove @param tags
+                            !line.startsWith('@remarks') &&  // Remove @param tags
+                            !line.startsWith('@example') &&  // Remove @param tags
+                            !line.startsWith('@todo') &&  // Remove @param tags
+                            !line.startsWith('@returns')   // Remove @returns tags
+                        )
+                        .join('\n'); // Rejoin the lines
+                }
+
+                return description || ""; // Return modified description
+            },
+        },
+    },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px', minHeight: '600px', padding: '1rem' }}>
+        <RAGProvider>
+          <Story />
+          </RAGProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof HtmlViewer>;
+
+export const Docs: Story = {
+  args: {
+    htmlContent: testContent,
+    styleOverrides: {
+      contentPadding: '20px'
+    }
+  },
+};

lexio/src/stories/components/MarkdownViewer.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import 'tailwindcss/tailwind.css';
+import {RAGProvider} from "../../../lib/components/RAGProvider";
+import {MarkdownViewer} from "../../../lib/components/Viewers";
+import {extractComponentDescription} from "@storybook/docs-tools";
+
+const testContent = `# Test Markdown Content
+
+This is a **test paragraph** to showcase Markdown rendering in the \`MarkdownViewer\` component.
+
+## Lists:
+
+- Item One
+- Item Two
+- Item Three
+
+## Table Example:
+
+| Name      | Age | City         |
+| --------- | --- | ------------ |
+| John Doe  | 30  | New York     |
+| Jane Doe  | 28  | Los Angeles  |
+`;
+
+const meta: Meta<typeof MarkdownViewer> = {
+  title: 'Components/MarkDownViewer',
+  component: MarkdownViewer,
+  tags: ['autodocs'],
+  parameters: {
+        docs: {
+            extractComponentDescription: (component, { notes }) => {
+                // Use Storybook's default extractor
+                let description = extractComponentDescription(component, { notes });
+
+                if (description) {
+                    // Customize the description by filtering unwanted TSDoc decorators
+                    description = description
+                        .split('\n') // Split lines
+                        .filter(line =>
+                            !line.startsWith('@param') &&  // Remove @param tags
+                            !line.startsWith('@component') &&  // Remove @param tags
+                            !line.startsWith('@remarks') &&  // Remove @param tags
+                            !line.startsWith('@example') &&  // Remove @param tags
+                            !line.startsWith('@todo') &&  // Remove @param tags
+                            !line.startsWith('@returns')   // Remove @returns tags
+                        )
+                        .join('\n'); // Rejoin the lines
+                }
+
+                return description || ""; // Return modified description
+            },
+        },
+    },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px', minHeight: '600px', padding: '1rem' }}>
+        <RAGProvider>
+          <Story />
+          </RAGProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MarkdownViewer>;
+
+export const Docs: Story = {
+  args: {
+    markdownContent: testContent,
+    styleOverrides: {
+    }
+  },
+};

lexio/src/stories/components/PDFViewer.stories.tsx

@@ -0,0 +1,89 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import { extractComponentDescription } from '@storybook/docs-tools';
+import React, {useEffect, useState} from 'react';
+import {PdfViewer} from '../../../lib/components/Viewers/PdfViewer';
+import 'tailwindcss/tailwind.css';
+import {RAGProvider} from "../../../lib/components/RAGProvider";
+
+async function fetchPdfAsUint8Array(url: string): Promise<Uint8Array> {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch PDF: ${response.status} ${response.statusText}`);
+        }
+
+        const arrayBuffer = await response.arrayBuffer();
+        return new Uint8Array(arrayBuffer);
+    } catch (error) {
+        console.error("Error fetching the PDF:", error);
+        return new Uint8Array(); // Return empty array in case of error
+    }
+}
+
+// PDF Wrapper Component
+const PdfViewerWrapper = ({url}: { url: string }) => {
+    const [pdfData, setPdfData] = useState<Uint8Array | null>(null);
+
+    useEffect(() => {
+        fetchPdfAsUint8Array(url).then(setPdfData);
+    }, [url]);
+
+    if (!pdfData) {
+        return <p>Loading PDF...</p>;
+    }
+
+    return (<div className="w-full h-full">
+        <PdfViewer data={pdfData} highlights={[]} page={2} styleOverrides={{
+            contentBackground: '#f8f8f8',
+        }} />
+    </div>);
+};
+
+const pdfUrl = "https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf";
+
+const meta: Meta<typeof PdfViewer> = {
+    title: 'Components/PdfViewer',
+    component: PdfViewer,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            extractComponentDescription: (component, { notes }) => {
+                // Use Storybook's default extractor
+                let description = extractComponentDescription(component, { notes });
+
+                if (description) {
+                    // Customize the description by filtering unwanted TSDoc decorators
+                    description = description
+                        .split('\n') // Split lines
+                        .filter(line =>
+                            !line.startsWith('@param') &&  // Remove @param tags
+                            !line.startsWith('@component') &&  // Remove @param tags
+                            !line.startsWith('@remarks') &&  // Remove @param tags
+                            !line.startsWith('@example') &&  // Remove @param tags
+                            !line.startsWith('@todo') &&  // Remove @param tags
+                            !line.startsWith('@returns')   // Remove @returns tags
+                        )
+                        .join('\n'); // Rejoin the lines
+                }
+
+                return description || ""; // Return modified description
+            },
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: '600px', height: '600px', padding: '1rem'}}>
+                <RAGProvider>
+                    <Story/>
+                </RAGProvider>
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof PdfViewer>;
+
+export const Docs: Story = {
+    render: () => <PdfViewerWrapper url={pdfUrl}/>,
+};