@alveole/components 0.34.9 → 0.35.0

package/dist/scripts/sync-pdfjs-web-assets.mjs

@@ -0,0 +1,16 @@
+import { copyFileSync, mkdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+
+const packageRoot = resolve(import.meta.dirname, '../..');
+const files = [
+  ['dist/pdfjs/pdf.min.mjs', 'public/pdf.min.mjs'],
+  ['dist/pdfjs/pdf.worker.min.mjs', 'public/pdf.worker.min.mjs'],
+];
+
+for (const [source, target] of files) {
+  const absoluteSource = resolve(packageRoot, source);
+  const absoluteTarget = resolve(process.cwd(), target);
+  mkdirSync(dirname(absoluteTarget), { recursive: true });
+  copyFileSync(absoluteSource, absoluteTarget);
+  console.log(`synced ${target}`);
+}

package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from '@alveole/components';
 import type { PDFDocumentProxy } from 'pdfjs-dist';
-import 'pdfjs-dist/build/pdf.worker.entry';
+import 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
 import { DocumentViewerRotation } from './DocumentViewer';
 export type DocumentViewerPDFProps = {
     source: string;

package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,mCAAmC,CAAC;AAG3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAWF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA6J9D,CAAC"}
+{"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,4CAA4C,CAAC;AAGpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAWF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA6J9D,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerPDF.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@alveole/components';
 import * as pdfjs from 'pdfjs-dist';
-import 'pdfjs-dist/build/pdf.worker.entry';
+import 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
 import React from 'react';
 import { Platform } from 'react-native';
 import { useStyles } from './DocumentViewer.styles';

package/dist/ui/DocumentViewer/DocumentViewerPDF.native.d.ts

@@ -0,0 +1,14 @@
+import { type BoxProps } from '@alveole/components';
+import { DocumentViewerRotation } from './DocumentViewer';
+export type DocumentViewerPDFProps = {
+    source: string;
+    page: number;
+    height?: BoxProps['height'];
+    rotation: DocumentViewerRotation;
+    scale?: number;
+    onReady?: (_state: {
+        numPages: number;
+    }) => void;
+};
+export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DocumentViewerPDF.native.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewerPDF.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentViewerPDF.native.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CAsB9D,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerPDF.native.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import { useStyles } from './DocumentViewer.styles';
+export const DocumentViewerPDF = (props) => {
+    const { height = '100%' } = props;
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, style: styles.viewerPdfContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', style: [
+                styles.viewerPdfStage,
+                {
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+            ], children: _jsx(Typography, { children: "Not implemented" }) }) }));
+};

package/dist/ui/DocumentViewer/DocumentViewerPDF.web.d.ts

@@ -0,0 +1,38 @@
+import { type BoxProps } from '@alveole/components';
+import { DocumentViewerRotation } from './DocumentViewer';
+type PDFDocumentProxyLike = {
+    destroy?: () => void | Promise<void>;
+    getPage: (page: number) => Promise<{
+        getViewport: (options: {
+            scale: number;
+            rotation: DocumentViewerRotation;
+        }) => {
+            width: number;
+            height: number;
+        };
+        render: (options: {
+            canvasContext: CanvasRenderingContext2D;
+            viewport: {
+                width: number;
+                height: number;
+            };
+            transform?: [number, number, number, number, number, number];
+        }) => {
+            promise: Promise<void>;
+            cancel?: () => void;
+        } | null;
+        cleanup?: () => void;
+    }>;
+    numPages: number;
+};
+export type DocumentViewerPDFProps = {
+    source: string;
+    page: number;
+    height?: BoxProps['height'];
+    rotation: DocumentViewerRotation;
+    scale?: number;
+    onReady?: (state: PDFDocumentProxyLike) => void;
+};
+export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DocumentViewerPDF.web.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewerPDF.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentViewerPDF.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,KAAK,oBAAoB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;QACjC,WAAW,EAAE,CAAC,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,sBAAsB,CAAA;SAAE,KAAK;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QACjH,MAAM,EAAE,CAAC,OAAO,EAAE;YAChB,aAAa,EAAE,wBAAwB,CAAC;YACxC,QAAQ,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAC;YAC5C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;SAC9D,KAAK;YAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;SAAE,GAAG,IAAI,CAAC;QAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAUF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACjD,CAAC;AAmCF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CAsK9D,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerPDF.web.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@alveole/components';
+import React from 'react';
+import { useStyles } from './DocumentViewer.styles';
+const isPdfCancellationError = (error) => {
+    if (!(error instanceof Error))
+        return false;
+    return (['RenderingCancelledException', 'AbortException', 'UnknownErrorException'].includes(error.name) ||
+        error.message.includes('Worker was terminated'));
+};
+const loadPdfJs = (() => {
+    let promise = null;
+    return () => {
+        if (typeof window === 'undefined') {
+            return Promise.reject(new Error('PDF.js is only available in the browser.'));
+        }
+        if (promise)
+            return promise;
+        const dynamicImport = new Function('url', 'return import(url);');
+        promise = dynamicImport('/pdf.min.mjs').then(module => {
+            const pdfjs = (module.default ?? module);
+            pdfjs.GlobalWorkerOptions.workerSrc = `${window.location.origin}/pdf.worker.min.mjs`;
+            return pdfjs;
+        });
+        return promise;
+    };
+})();
+export const DocumentViewerPDF = (props) => {
+    const { source, page, rotation, height = '100%', scale = 1, onReady } = props;
+    const styles = useStyles();
+    const [pdf, setPdf] = React.useState(null);
+    const [viewerSize, setViewerSize] = React.useState({ width: 0, height: 0 });
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
+    const [renderedPageSize, setRenderedPageSize] = React.useState({ width: 0, height: 0 });
+    const canvasRef = React.useRef(null);
+    const onReadyRef = React.useRef(onReady);
+    const hoveredScale = isHovered ? 2 : 1;
+    React.useEffect(() => {
+        onReadyRef.current = onReady;
+    }, [onReady]);
+    const onPdfLoadedSuccess = React.useCallback((documentPdf, active) => {
+        if (!active)
+            return void documentPdf.destroy?.();
+        setPdf(currentPdf => {
+            void currentPdf?.destroy?.();
+            return documentPdf;
+        });
+        onReadyRef.current?.(documentPdf);
+    }, []);
+    const onPdfLoadedError = React.useCallback((active) => {
+        if (!active)
+            return;
+        setPdf(null);
+    }, []);
+    const onPageLoadedSuccess = React.useCallback(async (pagePdf, active) => {
+        if (!active || !canvasRef.current)
+            return null;
+        const baseViewport = pagePdf.getViewport({ scale: 1, rotation });
+        const fittedScale = Math.min(viewerSize.width / baseViewport.width, viewerSize.height / baseViewport.height);
+        const viewport = pagePdf.getViewport({ scale: fittedScale * scale, rotation });
+        const canvas = canvasRef.current;
+        const context = canvas.getContext('2d');
+        if (context == null)
+            return null;
+        const pixelRatio = window.devicePixelRatio || 1;
+        canvas.width = Math.floor(viewport.width * pixelRatio);
+        canvas.height = Math.floor(viewport.height * pixelRatio);
+        canvas.style.width = `${viewport.width}px`;
+        canvas.style.height = `${viewport.height}px`;
+        setRenderedPageSize({ width: viewport.width, height: viewport.height });
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        return pagePdf.render({
+            canvasContext: context,
+            viewport,
+            transform: pixelRatio === 1 ? undefined : [pixelRatio, 0, 0, pixelRatio, 0, 0],
+        });
+    }, [rotation, scale, viewerSize.height, viewerSize.width]);
+    React.useEffect(() => {
+        let isActive = true;
+        let loadingTask = null;
+        loadPdfJs()
+            .then(pdfjs => {
+            if (!isActive)
+                return;
+            loadingTask = pdfjs.getDocument(source);
+            return loadingTask.promise
+                .then(nextPdf => onPdfLoadedSuccess(nextPdf, isActive))
+                .catch(error => {
+                if (!isActive || isPdfCancellationError(error))
+                    return;
+                onPdfLoadedError(true);
+            });
+        })
+            .catch(error => {
+            if (!isActive || isPdfCancellationError(error))
+                return;
+            onPdfLoadedError(true);
+        });
+        return () => {
+            isActive = false;
+            loadingTask?.destroy();
+        };
+    }, [source, onPdfLoadedError, onPdfLoadedSuccess]);
+    React.useEffect(() => {
+        if (!pdf || !canvasRef.current || viewerSize.width <= 0 || viewerSize.height <= 0)
+            return;
+        let isActive = true;
+        let renderTask = null;
+        pdf
+            .getPage(page)
+            .then(async (pdfPage) => {
+            renderTask = await onPageLoadedSuccess(pdfPage, isActive);
+            return renderTask?.promise.then(() => {
+                if (!isActive)
+                    return;
+                pdfPage.cleanup?.();
+            });
+        })
+            .catch(error => {
+            if (!isActive || isPdfCancellationError(error))
+                return;
+            onPdfLoadedError(true);
+        });
+        return () => {
+            isActive = false;
+            renderTask?.cancel?.();
+        };
+    }, [pdf, page, rotation, scale, viewerSize, onPageLoadedSuccess, onPdfLoadedError]);
+    const handleLayout = React.useCallback((event) => {
+        const nextWidth = event?.nativeEvent?.layout?.width;
+        const nextHeight = event?.nativeEvent?.layout?.height;
+        if (typeof nextWidth === 'number' && nextWidth > 0 && typeof nextHeight === 'number' && nextHeight > 0) {
+            setViewerSize({ width: nextWidth, height: nextHeight });
+        }
+    }, []);
+    const handlePointerMove = React.useCallback((event) => {
+        const rect = event.currentTarget?.getBoundingClientRect?.();
+        if (!rect)
+            return;
+        const x = ((event.clientX - rect.left) / rect.width) * 100;
+        const y = ((event.clientY - rect.top) / rect.height) * 100;
+        setTransformOrigin(`${Math.max(0, Math.min(100, x))}% ${Math.max(0, Math.min(100, y))}%`);
+    }, []);
+    React.useEffect(() => () => void pdf?.destroy?.(), [pdf]);
+    return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onLayout: handleLayout, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerPdfContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: _jsx(Box, { style: [
+                    styles.viewerPdfCanvasWrapper,
+                    {
+                        width: renderedPageSize.width,
+                        height: renderedPageSize.height,
+                        transformOrigin,
+                        transform: [{ scale: hoveredScale }],
+                    },
+                ], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) }) }) }));
+};

package/dist/ui/ListItem/ListItem.stories.js

@@ -36,4 +36,4 @@ export const WithAvatar = () => (_jsx(ListItem, { title: "Titre", description: "
 export const WithPreviewImage = () => (_jsx(ListItem, { title: "Titre", description: "Description", preview_url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400", onPress: () => {
         window.alert('click !');
     } }));
-export const withoutHover = (_jsxs(Box, { children: [_jsx(Typography, { children: "Sans props openPress, l'effet de Hover n'apparait pas" }), _jsx(ListItem, { title: "Titre", description: "Description" })] }));
+export const withoutHover = (_jsxs(Box, { children: [_jsx(Typography, { children: "Sans props openPress, l\u2019effet de Hover n\u2019apparait pas" }), _jsx(ListItem, { title: "Titre", description: "Description" })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "0.34.9",
+  "version": "0.35.0",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,16 +13,19 @@
       "types": "./dist/stories/index.d.ts",
       "default": "./dist/stories/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./sync-pdfjs-web-assets": "./dist/scripts/sync-pdfjs-web-assets.mjs"
   },
   "files": [
     "dist",
+    "scripts/postinstall.mjs",
     "README.md"
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && node ./scripts/prepare-pdfjs-web-assets.mjs",
     "lint": "eslint .",
+    "postinstall": "node ./scripts/postinstall.mjs",
     "typecheck": "tsc -p tsconfig.typecheck.json --noEmit"
   },
   "devDependencies": {
@@ -62,7 +65,7 @@
     "expo-linear-gradient": "*",
     "expo-constants": "*",
     "lottie-react-native": "*",
-    "pdfjs-dist": "^3.11.174",
+    "pdfjs-dist": "^4.0.0",
     "@lottiefiles/dotlottie-react": "*"
   },
   "publishConfig": {

package/scripts/postinstall.mjs

@@ -0,0 +1,26 @@
+import { copyFileSync, existsSync, mkdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+
+const packageRoot = resolve(import.meta.dirname, '..');
+const projectRoot = process.env.INIT_CWD ? resolve(process.env.INIT_CWD) : null;
+
+if (projectRoot == null || projectRoot === packageRoot) {
+  process.exit(0);
+}
+
+const files = [
+  ['dist/pdfjs/pdf.min.mjs', 'public/pdf.min.mjs'],
+  ['dist/pdfjs/pdf.worker.min.mjs', 'public/pdf.worker.min.mjs'],
+];
+
+for (const [source, target] of files) {
+  const absoluteSource = resolve(packageRoot, source);
+  if (!existsSync(absoluteSource)) {
+    continue;
+  }
+
+  const absoluteTarget = resolve(projectRoot, target);
+  mkdirSync(dirname(absoluteTarget), { recursive: true });
+  copyFileSync(absoluteSource, absoluteTarget);
+  console.log(`synced ${target}`);
+}