From 99a449c6d35c996422c4d5fe0d364f4c9e59ce0a Mon Sep 17 00:00:00 2001 From: Marius Steger Date: Wed, 29 Jan 2025 19:49:38 +0100 Subject: [PATCH 1/4] WIP stories for viewers --- .../stories/components/PDFViewer.stories.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 lexio/src/stories/components/PDFViewer.stories.tsx diff --git a/lexio/src/stories/components/PDFViewer.stories.tsx b/lexio/src/stories/components/PDFViewer.stories.tsx new file mode 100644 index 0000000..e77867a --- /dev/null +++ b/lexio/src/stories/components/PDFViewer.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { PdfViewer } from '../../../lib/components/Viewers/PdfViewer'; +import 'tailwindcss/tailwind.css'; +import {RAGProvider} from "../../../lib/components/RAGProvider"; + +const meta: Meta = { + title: 'Components/PdfViewer', + component: PdfViewer, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ + fetch('https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf') + .then(response => response.arrayBuffer())} /> + +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Docs: Story = { +}; \ No newline at end of file From a702864e24267ff7defa2db8dd24fd4a0ae45561 Mon Sep 17 00:00:00 2001 From: Marius Steger Date: Wed, 29 Jan 2025 20:19:29 +0100 Subject: [PATCH 2/4] WIP: Have to update docs since generated autodocs look crappy --- lexio/lib/components/Viewers/index.ts | 1 + .../stories/components/HTMLViewer.stories.tsx | 64 +++++++++++++++++ .../components/MarkdownViewer.stories.tsx | 48 +++++++++++++ .../stories/components/PDFViewer.stories.tsx | 69 ++++++++++++++----- 4 files changed, 166 insertions(+), 16 deletions(-) create mode 100644 lexio/src/stories/components/HTMLViewer.stories.tsx create mode 100644 lexio/src/stories/components/MarkdownViewer.stories.tsx diff --git a/lexio/lib/components/Viewers/index.ts b/lexio/lib/components/Viewers/index.ts index 7911d2b..49eb6cd 100644 --- a/lexio/lib/components/Viewers/index.ts +++ b/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'; diff --git a/lexio/src/stories/components/HTMLViewer.stories.tsx b/lexio/src/stories/components/HTMLViewer.stories.tsx new file mode 100644 index 0000000..1304190 --- /dev/null +++ b/lexio/src/stories/components/HTMLViewer.stories.tsx @@ -0,0 +1,64 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import 'tailwindcss/tailwind.css'; +import {RAGProvider} from "../../../lib/components/RAGProvider"; +import {HtmlViewer} from "../../../lib/components/Viewers"; + +const testContent = ` +
+

Test HTML Content

+

This is a test paragraph to showcase HTML rendering in the HtmlViewer component.

+ +

Lists:

+
    +
  • Item One
    • +
  • Item Two
    • +
  • Item Three
    • +
+ +

Table Example:

+ + + + + + + + + + + + + + + + +
NameAgeCity
John Doe30New York
Jane Doe28Los Angeles
+
+`; + +const meta: Meta = { + title: 'Components/HtmlViewer', + component: HtmlViewer, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ + + +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Docs: Story = { + args: { + htmlContent: testContent, + styleOverrides: { + contentPadding: '20px' + } + }, +}; diff --git a/lexio/src/stories/components/MarkdownViewer.stories.tsx b/lexio/src/stories/components/MarkdownViewer.stories.tsx new file mode 100644 index 0000000..edfc06f --- /dev/null +++ b/lexio/src/stories/components/MarkdownViewer.stories.tsx @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import 'tailwindcss/tailwind.css'; +import {RAGProvider} from "../../../lib/components/RAGProvider"; +import {MarkdownViewer} from "../../../lib/components/Viewers"; + +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 = { + title: 'Components/MarkDownViewer', + component: MarkdownViewer, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ + + +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Docs: Story = { + args: { + markdownContent: testContent, + styleOverrides: { + } + }, +}; diff --git a/lexio/src/stories/components/PDFViewer.stories.tsx b/lexio/src/stories/components/PDFViewer.stories.tsx index e77867a..70c27ec 100644 --- a/lexio/src/stories/components/PDFViewer.stories.tsx +++ b/lexio/src/stories/components/PDFViewer.stories.tsx @@ -1,26 +1,63 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { PdfViewer } from '../../../lib/components/Viewers/PdfViewer'; +import type {Meta, StoryObj} from '@storybook/react'; +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 { + 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(null); + + useEffect(() => { + fetchPdfAsUint8Array(url).then(setPdfData); + }, [url]); + + if (!pdfData) { + return

Loading PDF...

; + } + + return (
+ +
); +}; + +const pdfUrl = "https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf"; + const meta: Meta = { - title: 'Components/PdfViewer', - component: PdfViewer, - tags: ['autodocs'], - decorators: [ - (Story) => ( -
- - fetch('https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf') - .then(response => response.arrayBuffer())} /> - -
- ), - ], + title: 'Components/PdfViewer', + component: PdfViewer, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ + + +
+ ), + ], }; export default meta; type Story = StoryObj; export const Docs: Story = { -}; \ No newline at end of file + render: () => , +}; From 4c7c54f759a796be824607b9fa3d2fb24293fc32 Mon Sep 17 00:00:00 2001 From: Marius Steger Date: Wed, 29 Jan 2025 20:51:35 +0100 Subject: [PATCH 3/4] added docu for viewer components --- .../Viewers/PdfViewer/PdfViewer.tsx | 4 --- lexio/package.json | 1 + .../stories/components/HTMLViewer.stories.tsx | 26 +++++++++++++++++++ .../components/MarkdownViewer.stories.tsx | 26 +++++++++++++++++++ .../stories/components/PDFViewer.stories.tsx | 26 +++++++++++++++++++ 5 files changed, 79 insertions(+), 4 deletions(-) diff --git a/lexio/lib/components/Viewers/PdfViewer/PdfViewer.tsx b/lexio/lib/components/Viewers/PdfViewer/PdfViewer.tsx index 93758c2..e9a341e 100644 --- a/lexio/lib/components/Viewers/PdfViewer/PdfViewer.tsx +++ b/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(null); diff --git a/lexio/package.json b/lexio/package.json index dd807f7..b20642e 100644 --- a/lexio/package.json +++ b/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", diff --git a/lexio/src/stories/components/HTMLViewer.stories.tsx b/lexio/src/stories/components/HTMLViewer.stories.tsx index 1304190..45e8a7d 100644 --- a/lexio/src/stories/components/HTMLViewer.stories.tsx +++ b/lexio/src/stories/components/HTMLViewer.stories.tsx @@ -2,6 +2,7 @@ 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 = `
@@ -40,6 +41,31 @@ const meta: Meta = { 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) => (
diff --git a/lexio/src/stories/components/MarkdownViewer.stories.tsx b/lexio/src/stories/components/MarkdownViewer.stories.tsx index edfc06f..253e261 100644 --- a/lexio/src/stories/components/MarkdownViewer.stories.tsx +++ b/lexio/src/stories/components/MarkdownViewer.stories.tsx @@ -2,6 +2,7 @@ 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 @@ -25,6 +26,31 @@ const meta: Meta = { 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) => (
diff --git a/lexio/src/stories/components/PDFViewer.stories.tsx b/lexio/src/stories/components/PDFViewer.stories.tsx index 70c27ec..1d329da 100644 --- a/lexio/src/stories/components/PDFViewer.stories.tsx +++ b/lexio/src/stories/components/PDFViewer.stories.tsx @@ -1,4 +1,5 @@ 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'; @@ -44,6 +45,31 @@ const meta: Meta = { 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) => (
From 5fada59dd49d390bd824897319f5e182edbf381f Mon Sep 17 00:00:00 2001 From: Marius Steger Date: Wed, 29 Jan 2025 22:10:18 +0100 Subject: [PATCH 4/4] added package-lock.json --- lexio/package-lock.json | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/lexio/package-lock.json b/lexio/package-lock.json index 0f6be97..f46970e 100644 --- a/lexio/package-lock.json +++ b/lexio/package-lock.json @@ -31,6 +31,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", @@ -2598,6 +2599,20 @@ "storybook": "^8.6.0-alpha.0" } }, + "node_modules/@storybook/docs-tools": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-8.5.2.tgz", + "integrity": "sha512-y1QGs/CXiAWhRxxZeEEcCdeehW737s4pwLpnBoOCvRJwVT8yCSdxj4hg+Sje1yT3Vacx/SCWHOoDH+pIUWLE1w==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" + } + }, "node_modules/@storybook/global": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",