mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
AAE-43707 Add storybook stories for pdf viewer family
Adds Storybook coverage for pdf-viewer, pdf-viewer-thumb and pdf-viewer-thumbnails. The thumbnail stories use lightweight mocks that emulate the pdf.js PDFViewer page descriptor surface so the panels can be rendered in isolation.
This commit is contained in:
Wojciech Duda
+119
@@ -0,0 +1,119 @@
|
|||||||
|
/*!
|
||||||
|
* @license
|
||||||
|
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { applicationConfig, Meta, StoryObj, moduleMetadata } from '@storybook/angular';
|
||||||
|
import { PdfThumbComponent } from './pdf-viewer-thumb.component';
|
||||||
|
import { provideStoryCore } from '../../../stories/core-story.providers';
|
||||||
|
|
||||||
|
const buildMockPage = (id: number, color: string) => ({
|
||||||
|
id,
|
||||||
|
getWidth: () => 91,
|
||||||
|
getHeight: () => 114,
|
||||||
|
getPage: () =>
|
||||||
|
Promise.resolve({
|
||||||
|
getViewport: ({ scale }: { scale: number }) => ({ width: 91 * scale, height: 114 * scale }),
|
||||||
|
render: ({ canvasContext, viewport }: { canvasContext: CanvasRenderingContext2D; viewport: { width: number; height: number } }) => {
|
||||||
|
canvasContext.fillStyle = color;
|
||||||
|
canvasContext.fillRect(0, 0, viewport.width, viewport.height);
|
||||||
|
canvasContext.fillStyle = '#333';
|
||||||
|
canvasContext.font = '14px sans-serif';
|
||||||
|
canvasContext.fillText(`Page ${id}`, 16, 24);
|
||||||
|
return { promise: Promise.resolve() };
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const EMPTY_PAGE = {
|
||||||
|
id: 0,
|
||||||
|
getWidth: () => 91,
|
||||||
|
getHeight: () => 114,
|
||||||
|
getPage: () => new Promise(() => undefined)
|
||||||
|
};
|
||||||
|
|
||||||
|
type PdfThumbStoryArgs = PdfThumbComponent & {
|
||||||
|
selected?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const meta: Meta<PdfThumbStoryArgs> = {
|
||||||
|
component: PdfThumbComponent,
|
||||||
|
title: 'Core/Viewer/PDF Viewer Thumb',
|
||||||
|
decorators: [
|
||||||
|
moduleMetadata({
|
||||||
|
imports: [PdfThumbComponent]
|
||||||
|
}),
|
||||||
|
applicationConfig({
|
||||||
|
providers: [...provideStoryCore()]
|
||||||
|
})
|
||||||
|
],
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component: `Single thumbnail tile rendered for a page in the PDF Viewer thumbnails panel. Renders a small canvas preview from the supplied \`page\` descriptor.`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
page: {
|
||||||
|
control: false,
|
||||||
|
description: 'Page descriptor providing `getPage()`, `getWidth()` and `getHeight()` used to render the thumbnail.',
|
||||||
|
table: { type: { summary: 'PdfThumbnailPage' } }
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
control: 'boolean',
|
||||||
|
description: 'Visual flag toggled by the parent thumbnails list when the page is the active one.',
|
||||||
|
table: { category: 'Storybook Helpers' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<PdfThumbStoryArgs>;
|
||||||
|
|
||||||
|
export const Empty: Story = {
|
||||||
|
args: {
|
||||||
|
page: EMPTY_PAGE,
|
||||||
|
selected: false
|
||||||
|
},
|
||||||
|
render: (args) => ({
|
||||||
|
props: args,
|
||||||
|
template: `<adf-pdf-thumb [page]="page" style="display:inline-block; padding:8px;" />`
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Populated: Story = {
|
||||||
|
args: {
|
||||||
|
page: buildMockPage(1, '#e3f2fd'),
|
||||||
|
selected: false
|
||||||
|
},
|
||||||
|
render: (args) => ({
|
||||||
|
props: args,
|
||||||
|
template: `<adf-pdf-thumb [page]="page" style="display:inline-block; padding:8px;" />`
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Selected: Story = {
|
||||||
|
args: {
|
||||||
|
page: buildMockPage(2, '#bbdefb'),
|
||||||
|
selected: true
|
||||||
|
},
|
||||||
|
render: (args) => ({
|
||||||
|
props: args,
|
||||||
|
template: `<div [style.outline]="selected ? '2px solid #1976d2' : 'none'" style="display:inline-block; padding:8px;">
|
||||||
|
<adf-pdf-thumb [page]="page" />
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
};
|
||||||
+127
@@ -0,0 +1,127 @@
|
|||||||
|
/*!
|
||||||
|
* @license
|
||||||
|
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { applicationConfig, Meta, StoryObj, moduleMetadata } from '@storybook/angular';
|
||||||
|
import { PdfThumbListComponent } from './pdf-viewer-thumbnails.component';
|
||||||
|
import { provideStoryCore } from '../../../stories/core-story.providers';
|
||||||
|
|
||||||
|
const buildPdfViewerMock = (totalPages: number) => {
|
||||||
|
const pageHandlers: Array<(event: { pageNumber: number }) => void> = [];
|
||||||
|
|
||||||
|
const buildMockPage = (id: number) => ({
|
||||||
|
id,
|
||||||
|
width: 91,
|
||||||
|
height: 114
|
||||||
|
});
|
||||||
|
|
||||||
|
const buildPageProxy = (id: number) => ({
|
||||||
|
getViewport: ({ scale }: { scale: number }) => ({ width: 91 * scale, height: 114 * scale }),
|
||||||
|
render: ({ canvasContext, viewport }: { canvasContext: CanvasRenderingContext2D; viewport: { width: number; height: number } }) => {
|
||||||
|
canvasContext.fillStyle = id % 2 ? '#e3f2fd' : '#f3e5f5';
|
||||||
|
canvasContext.fillRect(0, 0, viewport.width, viewport.height);
|
||||||
|
canvasContext.fillStyle = '#333';
|
||||||
|
canvasContext.font = '12px sans-serif';
|
||||||
|
canvasContext.fillText(`Page ${id}`, 12, 20);
|
||||||
|
return { promise: Promise.resolve() };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
currentPageNumber: 1,
|
||||||
|
pagesCount: totalPages,
|
||||||
|
_pages: Array.from({ length: totalPages }, (_, i) => buildMockPage(i + 1)),
|
||||||
|
pdfDocument: {
|
||||||
|
getPage: (id: number) => Promise.resolve(buildPageProxy(id))
|
||||||
|
},
|
||||||
|
eventBus: {
|
||||||
|
on: (event: string, handler: (e: { pageNumber: number }) => void) => {
|
||||||
|
if (event === 'pagechanging') {
|
||||||
|
pageHandlers.push(handler);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
off: () => undefined
|
||||||
|
}
|
||||||
|
} as any;
|
||||||
|
};
|
||||||
|
|
||||||
|
type PdfThumbnailsStoryArgs = PdfThumbListComponent & {
|
||||||
|
pageCount?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const meta: Meta<PdfThumbnailsStoryArgs> = {
|
||||||
|
component: PdfThumbListComponent,
|
||||||
|
title: 'Core/Viewer/PDF Viewer Thumbnails',
|
||||||
|
decorators: [
|
||||||
|
moduleMetadata({
|
||||||
|
imports: [PdfThumbListComponent]
|
||||||
|
}),
|
||||||
|
applicationConfig({
|
||||||
|
providers: [...provideStoryCore()]
|
||||||
|
})
|
||||||
|
],
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component: `Side panel listing thumbnails for every page of the PDF currently rendered by the \`adf-pdf-viewer\`. Stories use a lightweight mock of the underlying \`PDFViewer\`.`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
pdfViewer: {
|
||||||
|
control: false,
|
||||||
|
description: 'Reference to the underlying pdf.js `PDFViewer` instance. Required input.',
|
||||||
|
table: { type: { summary: 'PDFViewer' } }
|
||||||
|
},
|
||||||
|
pageCount: {
|
||||||
|
control: { type: 'number', min: 0, max: 50 },
|
||||||
|
description: 'Number of pages used to build the mock `PDFViewer`.',
|
||||||
|
table: { category: 'Storybook Helpers' }
|
||||||
|
},
|
||||||
|
close: {
|
||||||
|
action: 'close',
|
||||||
|
description: 'Emitted when the user requests to close the thumbnails panel (e.g. via Escape).',
|
||||||
|
table: { type: { summary: 'EventEmitter <void>' }, category: 'Actions' }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
pageCount: 5
|
||||||
|
},
|
||||||
|
render: (args) => ({
|
||||||
|
props: {
|
||||||
|
...args,
|
||||||
|
pdfViewer: buildPdfViewerMock(args.pageCount ?? 0)
|
||||||
|
},
|
||||||
|
template: `<div style="height:480px; width:140px; border:1px solid #ddd; overflow:hidden;">
|
||||||
|
<adf-pdf-thumbnails [pdfViewer]="pdfViewer" (close)="close($event)" style="display:block; height:100%;" />
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<PdfThumbnailsStoryArgs>;
|
||||||
|
|
||||||
|
export const Empty: Story = {
|
||||||
|
args: { pageCount: 0 }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Populated: Story = {
|
||||||
|
args: { pageCount: 8 }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Selected: Story = {
|
||||||
|
args: { pageCount: 4 }
|
||||||
|
};
|
||||||
@@ -0,0 +1,142 @@
|
|||||||
|
/*!
|
||||||
|
* @license
|
||||||
|
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { applicationConfig, Meta, StoryObj, moduleMetadata } from '@storybook/angular';
|
||||||
|
import { PdfViewerComponent } from './pdf-viewer.component';
|
||||||
|
import { provideStoryCore } from '../../../stories/core-story.providers';
|
||||||
|
|
||||||
|
const SAMPLE_PDF_URL = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
|
||||||
|
|
||||||
|
const meta: Meta<PdfViewerComponent> = {
|
||||||
|
component: PdfViewerComponent,
|
||||||
|
title: 'Core/Viewer/PDF Viewer',
|
||||||
|
decorators: [
|
||||||
|
moduleMetadata({
|
||||||
|
imports: [PdfViewerComponent]
|
||||||
|
}),
|
||||||
|
applicationConfig({
|
||||||
|
providers: [...provideStoryCore()]
|
||||||
|
})
|
||||||
|
],
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component: `Renders PDF documents using \`pdfjs-dist\`. Stories require the pdf.js worker assets to be served by Storybook; see the Viewer documentation for details.`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
urlFile: {
|
||||||
|
control: 'text',
|
||||||
|
description: 'External URL of the PDF file to load.',
|
||||||
|
table: { type: { summary: 'string' } }
|
||||||
|
},
|
||||||
|
blobFile: {
|
||||||
|
control: false,
|
||||||
|
description: 'In-memory Blob containing the PDF binary content.',
|
||||||
|
table: { type: { summary: 'Blob' } }
|
||||||
|
},
|
||||||
|
fileName: {
|
||||||
|
control: 'text',
|
||||||
|
description: 'Optional file name displayed by the toolbar.',
|
||||||
|
table: { type: { summary: 'string' } }
|
||||||
|
},
|
||||||
|
showToolbar: {
|
||||||
|
control: 'boolean',
|
||||||
|
description: 'Whether to show the PDF viewer toolbar (page navigation, zoom, ...).',
|
||||||
|
table: { type: { summary: 'boolean' }, defaultValue: { summary: 'true' } }
|
||||||
|
},
|
||||||
|
allowThumbnails: {
|
||||||
|
control: 'boolean',
|
||||||
|
description: 'Whether the thumbnails side panel can be opened.',
|
||||||
|
table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
|
||||||
|
},
|
||||||
|
cacheType: {
|
||||||
|
control: 'text',
|
||||||
|
description: 'Optional `Cache-Control` header value used when loading via URL.',
|
||||||
|
table: { type: { summary: 'string' } }
|
||||||
|
},
|
||||||
|
rendered: {
|
||||||
|
action: 'rendered',
|
||||||
|
description: 'Emitted after a page is rendered.',
|
||||||
|
table: { type: { summary: 'EventEmitter <void>' }, category: 'Actions' }
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
action: 'error',
|
||||||
|
description: 'Emitted when the PDF fails to load.',
|
||||||
|
table: { type: { summary: 'EventEmitter <void>' }, category: 'Actions' }
|
||||||
|
},
|
||||||
|
close: {
|
||||||
|
action: 'close',
|
||||||
|
description: 'Emitted when the password dialog is dismissed without supplying a password.',
|
||||||
|
table: { type: { summary: 'EventEmitter <void>' }, category: 'Actions' }
|
||||||
|
},
|
||||||
|
pagesLoaded: {
|
||||||
|
action: 'pagesLoaded',
|
||||||
|
description: 'Emitted when all pages of the document finish loading.',
|
||||||
|
table: { type: { summary: 'EventEmitter <void>' }, category: 'Actions' }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
urlFile: SAMPLE_PDF_URL,
|
||||||
|
fileName: 'sample.pdf',
|
||||||
|
showToolbar: true,
|
||||||
|
allowThumbnails: false
|
||||||
|
},
|
||||||
|
render: (args) => ({
|
||||||
|
props: args,
|
||||||
|
template: `<div style="height:600px; border:1px solid #ddd;">
|
||||||
|
<adf-pdf-viewer
|
||||||
|
[urlFile]="urlFile"
|
||||||
|
[fileName]="fileName"
|
||||||
|
[showToolbar]="showToolbar"
|
||||||
|
[allowThumbnails]="allowThumbnails"
|
||||||
|
[cacheType]="cacheType"
|
||||||
|
(rendered)="rendered($event)"
|
||||||
|
(error)="error($event)"
|
||||||
|
(close)="close($event)"
|
||||||
|
(pagesLoaded)="pagesLoaded($event)" />
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<PdfViewerComponent>;
|
||||||
|
|
||||||
|
export const WithSamplePdf: Story = {
|
||||||
|
args: {
|
||||||
|
urlFile: SAMPLE_PDF_URL,
|
||||||
|
showToolbar: true,
|
||||||
|
allowThumbnails: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WithThumbnailsEnabled: Story = {
|
||||||
|
args: {
|
||||||
|
urlFile: SAMPLE_PDF_URL,
|
||||||
|
showToolbar: true,
|
||||||
|
allowThumbnails: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ToolbarHidden: Story = {
|
||||||
|
args: {
|
||||||
|
urlFile: SAMPLE_PDF_URL,
|
||||||
|
showToolbar: false,
|
||||||
|
allowThumbnails: false
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user