@trackunit/react-compound-components 0.0.198 → 0.0.201

package/README.md

@@ -5,7 +5,7 @@ This could include components like Dialogs, Toasts, Modals, and more...
 
 This library is exposed publicly for use in the the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).
 
-To browse all avaliable components visit our [Public Storybook](https://apps.iris.trackunit.com/storybook/).
+To browse all available components visit our [Public Storybook](https://apps.iris.trackunit.com/storybook/).
 
 For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
 

package/index.cjs.js

@@ -6,6 +6,10 @@ var reactCoreHooks = require('@trackunit/react-core-hooks');
 var React = require('react');
 var reactComponents = require('@trackunit/react-components');
 var reactModal = require('@trackunit/react-modal');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var ImageGallery = require('react-image-gallery');
+var tailwindMerge = require('tailwind-merge');
+var reactFormComponents = require('@trackunit/react-form-components');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -126,6 +130,129 @@ const ConfirmationDialogContextProvider = ({ children }) => {
     return (jsxRuntime.jsxs(reactCoreHooks.ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsxRuntime.jsx(ConfirmationDialogModal, { ...confirmationDialogModalProps }) : null] }));
 };
 
+const IMAGE_ENDPOINT = "https://images.iris.trackunit.com";
+/**
+ * Generates an url for the original sized image from the image id
+ */
+const createOriginalUrl = (id) => `${IMAGE_ENDPOINT}/${btoa(JSON.stringify({
+    key: id,
+}))}`;
+const createResizedUrl = (id, width, height) => {
+    const request = {
+        key: id,
+        edits: {
+            resize: {
+                width,
+                height,
+                fit: "contain",
+                background: "transparent",
+            },
+        },
+    };
+    return `${IMAGE_ENDPOINT}/${btoa(JSON.stringify(request))}`;
+};
+/**
+ * Generates an url for the thumbnail size image
+ */
+const createThumbnailUrl = (id) => createResizedUrl(id, 100, 100);
+/**
+ * Generates srcSet HTML attribute to avoid loading the full size image on small screens
+ */
+const createSrcSet = (id) => `${createResizedUrl(id, 480)} 480w, ${createResizedUrl(id, 800)} 800w`;
+
+const ACCEPT_FOR_IMAGES = "image/jpeg, image/png, image/bmp, image/webp, image/gif";
+const cvaGallery = cssClassVarianceUtilities.cvaMerge([
+    // These make the gallery grow to the height of the parent container,
+    //  which avoids jumping of the thumbnail row when going through images
+    //  with different ratios
+    "grow",
+    "[&_.image-gallery-content]:h-[100%]",
+    "[&_.image-gallery-content]:flex",
+    "[&_.image-gallery-content]:flex-col",
+    "[&_.image-gallery-slide-wrapper]:grow",
+    "[&_.image-gallery-slide-wrapper]:flex",
+    "[&_.image-gallery-slide-wrapper]:flex-col",
+    "[&_.image-gallery-slide-wrapper]:justify-center",
+    "[&_.image-gallery-slide]:flex",
+    // This centers thumbnails and makes the clickable area independent of image size
+    "[&_.image-gallery-thumbnail]:h-[100px]",
+]);
+/**
+ * Show and manage images
+ *
+ * Will show thumbnail selection on desktop.
+ *
+ * Reduces bandwidth usage by lazy loading thumbnails and loading smaller versions of images depending on screen size.
+ */
+const ImageCollection = (props) => {
+    var _a;
+    const { imageIds, actions, emptyPlaceholderText, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
+    const [openImageId, setOpenImageId] = React.useState(imageIds[0]);
+    const [isDeleting, setIsDeleting] = React.useState(false);
+    const { width } = reactComponents.useResize();
+    const fileInputRef = React.useRef(null);
+    const imageGalleryRef = React.useRef(null);
+    const uploadButton = React.useMemo(() => (actions === null || actions === void 0 ? void 0 : actions.upload) ? (jsxRuntime.jsx("div", { className: "flex justify-end", children: jsxRuntime.jsx(reactComponents.Button, { loading: uploading, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: actions.upload.label }) })) : null, [actions === null || actions === void 0 ? void 0 : actions.upload, uploading]);
+    const items = React.useMemo(() => imageIds.map(imageId => ({
+        id: imageId,
+        original: createOriginalUrl(imageId),
+        thumbnail: createThumbnailUrl(imageId),
+        srcSet: createSrcSet(imageId),
+    })), [imageIds]);
+    React.useEffect(() => {
+        if ((!openImageId || !imageIds.includes(openImageId)) && imageIds.length > 0) {
+            setOpenImageId(imageIds[0]);
+        }
+    }, [imageIds, openImageId]);
+    const onRemove = React.useCallback(async () => {
+        var _a;
+        if (!(((_a = actions === null || actions === void 0 ? void 0 : actions.remove) === null || _a === void 0 ? void 0 : _a.onRemove) && openImageId)) {
+            return;
+        }
+        try {
+            let nextIndex;
+            const indexToDelete = imageIds.indexOf(openImageId);
+            const deletingLastImage = indexToDelete === imageIds.length - 1;
+            if (imageIds.length === 1) {
+                nextIndex = undefined;
+            }
+            else if (deletingLastImage) {
+                nextIndex = indexToDelete - 1;
+            }
+            else {
+                // we set the index after the deletion, so the index will be the same
+                nextIndex = indexToDelete;
+            }
+            setIsDeleting(true);
+            await actions.remove.onRemove(openImageId);
+            if (nextIndex !== undefined) {
+                imageGalleryRef.current && nextIndex && imageGalleryRef.current.slideToIndex(nextIndex);
+            }
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    }, [actions === null || actions === void 0 ? void 0 : actions.remove, imageIds, openImageId]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [imageIds.length > 0 ? (jsxRuntime.jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", children: [jsxRuntime.jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); }, 
+                        // Library typing is wrong, this is fired when a gallery image is clicked (library typing says div)
+                        onClick: (e) => window.open(e.target.src, "_blank"), ref: imageGalleryRef, renderItem: ({ original, srcSet, 
+                        // Typing of the library is not flexible enough to add id, which is only used for the unit tests
+                        // @ts-ignore
+                        id, }) => (jsxRuntime.jsx("img", { alt: "full", className: tailwindMerge.twMerge(additionalItemClassName, "w-[100%]", "object-contain"), "data-testid": `image-${id}`, loading: "lazy", sizes: "(max-width: 480px) 480px, 800px", src: original, srcSet: srcSet })), renderThumbInner: ({ thumbnail, 
+                        // Typing of the library is not flexible enough to add id, which is only used for the unit tests
+                        // @ts-ignore
+                        id, }) => jsxRuntime.jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: width > 768, 
+                        // reduce sliding around during deletion
+                        slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsxRuntime.jsx(reactComponents.Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : (jsxRuntime.jsx(reactComponents.EmptyState, { action: ((_a = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _a === void 0 ? void 0 : _a.onUpload) ? (uploading ? (jsxRuntime.jsx(reactComponents.Spinner, {})) : (jsxRuntime.jsx(reactFormComponents.DropZone, { accept: ACCEPT_FOR_IMAGES, filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel }))) : null, description: emptyPlaceholderText })), jsxRuntime.jsx("input", { 
+                // Users can still select other files on mobile devices
+                accept: ACCEPT_FOR_IMAGES, hidden: true, multiple: true, onChange: async (e) => {
+                    if (!(e.target.files && (actions === null || actions === void 0 ? void 0 : actions.upload))) {
+                        return;
+                    }
+                    await actions.upload.onUpload(e.target.files);
+                }, ref: fileInputRef, type: "file" })] }));
+};
+
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -136,3 +263,8 @@ const ConfirmationDialogContextProvider = ({ children }) => {
 setupLibraryTranslations();
 
 exports.ConfirmationDialogContextProvider = ConfirmationDialogContextProvider;
+exports.IMAGE_ENDPOINT = IMAGE_ENDPOINT;
+exports.ImageCollection = ImageCollection;
+exports.createOriginalUrl = createOriginalUrl;
+exports.createSrcSet = createSrcSet;
+exports.createThumbnailUrl = createThumbnailUrl;

package/index.esm.js

@@ -1,10 +1,14 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { ConfirmationDialogProvider } from '@trackunit/react-core-hooks';
 import * as React from 'react';
-import { useState } from 'react';
-import { Card, CardHeader, CardBody, CardFooter, Button } from '@trackunit/react-components';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { Card, CardHeader, CardBody, CardFooter, Button, useResize, Icon, EmptyState, Spinner } from '@trackunit/react-components';
 import { Modal } from '@trackunit/react-modal';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import ImageGallery from 'react-image-gallery';
+import { twMerge } from 'tailwind-merge';
+import { DropZone } from '@trackunit/react-form-components';
 
 var defaultTranslations = {
 	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this course of action?",
@@ -106,6 +110,129 @@ const ConfirmationDialogContextProvider = ({ children }) => {
     return (jsxs(ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsx(ConfirmationDialogModal, { ...confirmationDialogModalProps }) : null] }));
 };
 
+const IMAGE_ENDPOINT = "https://images.iris.trackunit.com";
+/**
+ * Generates an url for the original sized image from the image id
+ */
+const createOriginalUrl = (id) => `${IMAGE_ENDPOINT}/${btoa(JSON.stringify({
+    key: id,
+}))}`;
+const createResizedUrl = (id, width, height) => {
+    const request = {
+        key: id,
+        edits: {
+            resize: {
+                width,
+                height,
+                fit: "contain",
+                background: "transparent",
+            },
+        },
+    };
+    return `${IMAGE_ENDPOINT}/${btoa(JSON.stringify(request))}`;
+};
+/**
+ * Generates an url for the thumbnail size image
+ */
+const createThumbnailUrl = (id) => createResizedUrl(id, 100, 100);
+/**
+ * Generates srcSet HTML attribute to avoid loading the full size image on small screens
+ */
+const createSrcSet = (id) => `${createResizedUrl(id, 480)} 480w, ${createResizedUrl(id, 800)} 800w`;
+
+const ACCEPT_FOR_IMAGES = "image/jpeg, image/png, image/bmp, image/webp, image/gif";
+const cvaGallery = cvaMerge([
+    // These make the gallery grow to the height of the parent container,
+    //  which avoids jumping of the thumbnail row when going through images
+    //  with different ratios
+    "grow",
+    "[&_.image-gallery-content]:h-[100%]",
+    "[&_.image-gallery-content]:flex",
+    "[&_.image-gallery-content]:flex-col",
+    "[&_.image-gallery-slide-wrapper]:grow",
+    "[&_.image-gallery-slide-wrapper]:flex",
+    "[&_.image-gallery-slide-wrapper]:flex-col",
+    "[&_.image-gallery-slide-wrapper]:justify-center",
+    "[&_.image-gallery-slide]:flex",
+    // This centers thumbnails and makes the clickable area independent of image size
+    "[&_.image-gallery-thumbnail]:h-[100px]",
+]);
+/**
+ * Show and manage images
+ *
+ * Will show thumbnail selection on desktop.
+ *
+ * Reduces bandwidth usage by lazy loading thumbnails and loading smaller versions of images depending on screen size.
+ */
+const ImageCollection = (props) => {
+    var _a;
+    const { imageIds, actions, emptyPlaceholderText, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
+    const [openImageId, setOpenImageId] = useState(imageIds[0]);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const { width } = useResize();
+    const fileInputRef = useRef(null);
+    const imageGalleryRef = useRef(null);
+    const uploadButton = useMemo(() => (actions === null || actions === void 0 ? void 0 : actions.upload) ? (jsx("div", { className: "flex justify-end", children: jsx(Button, { loading: uploading, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: actions.upload.label }) })) : null, [actions === null || actions === void 0 ? void 0 : actions.upload, uploading]);
+    const items = useMemo(() => imageIds.map(imageId => ({
+        id: imageId,
+        original: createOriginalUrl(imageId),
+        thumbnail: createThumbnailUrl(imageId),
+        srcSet: createSrcSet(imageId),
+    })), [imageIds]);
+    useEffect(() => {
+        if ((!openImageId || !imageIds.includes(openImageId)) && imageIds.length > 0) {
+            setOpenImageId(imageIds[0]);
+        }
+    }, [imageIds, openImageId]);
+    const onRemove = useCallback(async () => {
+        var _a;
+        if (!(((_a = actions === null || actions === void 0 ? void 0 : actions.remove) === null || _a === void 0 ? void 0 : _a.onRemove) && openImageId)) {
+            return;
+        }
+        try {
+            let nextIndex;
+            const indexToDelete = imageIds.indexOf(openImageId);
+            const deletingLastImage = indexToDelete === imageIds.length - 1;
+            if (imageIds.length === 1) {
+                nextIndex = undefined;
+            }
+            else if (deletingLastImage) {
+                nextIndex = indexToDelete - 1;
+            }
+            else {
+                // we set the index after the deletion, so the index will be the same
+                nextIndex = indexToDelete;
+            }
+            setIsDeleting(true);
+            await actions.remove.onRemove(openImageId);
+            if (nextIndex !== undefined) {
+                imageGalleryRef.current && nextIndex && imageGalleryRef.current.slideToIndex(nextIndex);
+            }
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    }, [actions === null || actions === void 0 ? void 0 : actions.remove, imageIds, openImageId]);
+    return (jsxs(Fragment, { children: [imageIds.length > 0 ? (jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", children: [jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); }, 
+                        // Library typing is wrong, this is fired when a gallery image is clicked (library typing says div)
+                        onClick: (e) => window.open(e.target.src, "_blank"), ref: imageGalleryRef, renderItem: ({ original, srcSet, 
+                        // Typing of the library is not flexible enough to add id, which is only used for the unit tests
+                        // @ts-ignore
+                        id, }) => (jsx("img", { alt: "full", className: twMerge(additionalItemClassName, "w-[100%]", "object-contain"), "data-testid": `image-${id}`, loading: "lazy", sizes: "(max-width: 480px) 480px, 800px", src: original, srcSet: srcSet })), renderThumbInner: ({ thumbnail, 
+                        // Typing of the library is not flexible enough to add id, which is only used for the unit tests
+                        // @ts-ignore
+                        id, }) => jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: width > 768, 
+                        // reduce sliding around during deletion
+                        slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsx(Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsx(Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : (jsx(EmptyState, { action: ((_a = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _a === void 0 ? void 0 : _a.onUpload) ? (uploading ? (jsx(Spinner, {})) : (jsx(DropZone, { accept: ACCEPT_FOR_IMAGES, filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel }))) : null, description: emptyPlaceholderText })), jsx("input", { 
+                // Users can still select other files on mobile devices
+                accept: ACCEPT_FOR_IMAGES, hidden: true, multiple: true, onChange: async (e) => {
+                    if (!(e.target.files && (actions === null || actions === void 0 ? void 0 : actions.upload))) {
+                        return;
+                    }
+                    await actions.upload.onUpload(e.target.files);
+                }, ref: fileInputRef, type: "file" })] }));
+};
+
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -115,4 +242,4 @@ const ConfirmationDialogContextProvider = ({ children }) => {
  */
 setupLibraryTranslations();
 
-export { ConfirmationDialogContextProvider };
+export { ConfirmationDialogContextProvider, IMAGE_ENDPOINT, ImageCollection, createOriginalUrl, createSrcSet, createThumbnailUrl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-compound-components",
-  "version": "0.0.198",
+  "version": "0.0.201",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -9,7 +9,11 @@
     "react": "18.3.1",
     "@trackunit/react-components": "*",
     "@trackunit/i18n-library-translation": "*",
-    "@trackunit/react-modal": "*"
+    "@trackunit/react-modal": "*",
+    "@trackunit/css-class-variance-utilities": "*",
+    "@trackunit/react-form-components": "*",
+    "tailwind-merge": "^2.0.0",
+    "react-image-gallery": "1.3.0"
   },
   "engines": {
     "node": ">=20.x",

package/src/ImageCollection/ImageCollection.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps } from "react";
+import ImageGallery from "react-image-gallery";
+type Props = Omit<ComponentProps<typeof ImageGallery>, "items"> & {
+    imageIds: string[];
+    actions?: {
+        upload?: {
+            label: string;
+            onUpload: (pictures: FileList) => Promise<void>;
+        };
+        remove?: {
+            label: string;
+            onRemove?: (id: string) => Promise<void>;
+        };
+    };
+    emptyPlaceholderText: string;
+    emptyPlaceholderActionLabel?: string;
+    additionalItemClassName?: string;
+    uploading?: boolean;
+};
+/**
+ * Show and manage images
+ *
+ * Will show thumbnail selection on desktop.
+ *
+ * Reduces bandwidth usage by lazy loading thumbnails and loading smaller versions of images depending on screen size.
+ */
+export declare const ImageCollection: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/ImageCollection/ImageCollection.stories.d.ts

@@ -0,0 +1,154 @@
+import { Meta } from "@storybook/react";
+import { ComponentProps } from "react";
+import { ImageCollection } from "./ImageCollection";
+declare const meta: Meta<typeof ImageCollection>;
+export default meta;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: {
+    name: string;
+    render: (props: ComponentProps<typeof ImageCollection>) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        items: {
+            id: string;
+            original: string;
+            thumbnail: string;
+        }[];
+        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        flickThreshold?: number | undefined;
+        showNav?: boolean | undefined;
+        autoPlay?: boolean | undefined;
+        lazyLoad?: boolean | undefined;
+        infinite?: boolean | undefined;
+        showIndex?: boolean | undefined;
+        showBullets?: boolean | undefined;
+        showThumbnails?: boolean | undefined;
+        showPlayButton?: boolean | undefined;
+        showFullscreenButton?: boolean | undefined;
+        disableThumbnailScroll?: boolean | undefined;
+        disableKeyDown?: boolean | undefined;
+        disableSwipe?: boolean | undefined;
+        useBrowserFullscreen?: boolean | undefined;
+        preventDefaultTouchmoveEvent?: boolean | undefined;
+        onErrorImageURL?: string | undefined;
+        indexSeparator?: string | undefined;
+        thumbnailPosition?: "top" | "right" | "bottom" | "left" | undefined;
+        startIndex?: number | undefined;
+        slideDuration?: number | undefined;
+        slideInterval?: number | undefined;
+        slideOnThumbnailOver?: boolean | undefined;
+        swipeThreshold?: number | undefined;
+        swipingTransitionDuration?: number | undefined;
+        onSlide?: ((currentIndex: number) => void) | undefined;
+        onBeforeSlide?: ((currentIndex: number) => void) | undefined;
+        onScreenChange?: ((fullScreen: boolean) => void) | undefined;
+        onPause?: ((currentIndex: number) => void) | undefined;
+        onPlay?: ((currentIndex: number) => void) | undefined;
+        onImageLoad?: import("react").ReactEventHandler<HTMLImageElement> | undefined;
+        onImageError?: import("react").ReactEventHandler<HTMLImageElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onThumbnailError?: import("react").ReactEventHandler<HTMLImageElement> | undefined;
+        onThumbnailClick?: ((event: import("react").MouseEvent<HTMLAnchorElement>, index: number) => void) | undefined;
+        renderCustomControls?: (() => import("react").ReactNode) | undefined;
+        renderLeftNav?: ((onClick: import("react").MouseEventHandler<HTMLElement>, disabled: boolean) => import("react").ReactNode) | undefined;
+        renderRightNav?: ((onClick: import("react").MouseEventHandler<HTMLElement>, disabled: boolean) => import("react").ReactNode) | undefined;
+        renderPlayPauseButton?: ((onClick: import("react").MouseEventHandler<HTMLElement>, isPlaying: boolean) => import("react").ReactNode) | undefined;
+        renderFullscreenButton?: ((onClick: import("react").MouseEventHandler<HTMLElement>, isFullscreen: boolean) => import("react").ReactNode) | undefined;
+        renderItem?: ((item: import("react-image-gallery").ReactImageGalleryItem) => import("react").ReactNode) | undefined;
+        renderThumbInner?: ((item: import("react-image-gallery").ReactImageGalleryItem) => import("react").ReactNode) | undefined;
+        stopPropagation?: boolean | undefined;
+        additionalClass?: string | undefined;
+        useTranslate3D?: boolean | undefined;
+        isRTL?: boolean | undefined;
+        imageIds?: string[] | undefined;
+        actions?: {
+            upload?: {
+                label: string;
+                onUpload: (pictures: FileList) => Promise<void>;
+            };
+            remove?: {
+                label: string;
+                onRemove?: (id: string) => Promise<void>;
+            };
+        } | undefined;
+        emptyPlaceholderText?: string | undefined;
+        emptyPlaceholderActionLabel?: string | undefined;
+        additionalItemClassName?: string | undefined;
+        uploading?: boolean | undefined;
+    };
+};
+export declare const EmptyState: {
+    name: string;
+    render: (props: ComponentProps<typeof ImageCollection>) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        items: never[];
+        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        flickThreshold?: number | undefined;
+        showNav?: boolean | undefined;
+        autoPlay?: boolean | undefined;
+        lazyLoad?: boolean | undefined;
+        infinite?: boolean | undefined;
+        showIndex?: boolean | undefined;
+        showBullets?: boolean | undefined;
+        showThumbnails?: boolean | undefined;
+        showPlayButton?: boolean | undefined;
+        showFullscreenButton?: boolean | undefined;
+        disableThumbnailScroll?: boolean | undefined;
+        disableKeyDown?: boolean | undefined;
+        disableSwipe?: boolean | undefined;
+        useBrowserFullscreen?: boolean | undefined;
+        preventDefaultTouchmoveEvent?: boolean | undefined;
+        onErrorImageURL?: string | undefined;
+        indexSeparator?: string | undefined;
+        thumbnailPosition?: "top" | "right" | "bottom" | "left" | undefined;
+        startIndex?: number | undefined;
+        slideDuration?: number | undefined;
+        slideInterval?: number | undefined;
+        slideOnThumbnailOver?: boolean | undefined;
+        swipeThreshold?: number | undefined;
+        swipingTransitionDuration?: number | undefined;
+        onSlide?: ((currentIndex: number) => void) | undefined;
+        onBeforeSlide?: ((currentIndex: number) => void) | undefined;
+        onScreenChange?: ((fullScreen: boolean) => void) | undefined;
+        onPause?: ((currentIndex: number) => void) | undefined;
+        onPlay?: ((currentIndex: number) => void) | undefined;
+        onImageLoad?: import("react").ReactEventHandler<HTMLImageElement> | undefined;
+        onImageError?: import("react").ReactEventHandler<HTMLImageElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onThumbnailError?: import("react").ReactEventHandler<HTMLImageElement> | undefined;
+        onThumbnailClick?: ((event: import("react").MouseEvent<HTMLAnchorElement>, index: number) => void) | undefined;
+        renderCustomControls?: (() => import("react").ReactNode) | undefined;
+        renderLeftNav?: ((onClick: import("react").MouseEventHandler<HTMLElement>, disabled: boolean) => import("react").ReactNode) | undefined;
+        renderRightNav?: ((onClick: import("react").MouseEventHandler<HTMLElement>, disabled: boolean) => import("react").ReactNode) | undefined;
+        renderPlayPauseButton?: ((onClick: import("react").MouseEventHandler<HTMLElement>, isPlaying: boolean) => import("react").ReactNode) | undefined;
+        renderFullscreenButton?: ((onClick: import("react").MouseEventHandler<HTMLElement>, isFullscreen: boolean) => import("react").ReactNode) | undefined;
+        renderItem?: ((item: import("react-image-gallery").ReactImageGalleryItem) => import("react").ReactNode) | undefined;
+        renderThumbInner?: ((item: import("react-image-gallery").ReactImageGalleryItem) => import("react").ReactNode) | undefined;
+        stopPropagation?: boolean | undefined;
+        additionalClass?: string | undefined;
+        useTranslate3D?: boolean | undefined;
+        isRTL?: boolean | undefined;
+        imageIds?: string[] | undefined;
+        actions?: {
+            upload?: {
+                label: string;
+                onUpload: (pictures: FileList) => Promise<void>;
+            };
+            remove?: {
+                label: string;
+                onRemove?: (id: string) => Promise<void>;
+            };
+        } | undefined;
+        emptyPlaceholderText?: string | undefined;
+        emptyPlaceholderActionLabel?: string | undefined;
+        additionalItemClassName?: string | undefined;
+        uploading?: boolean | undefined;
+    };
+};

package/src/ImageCollection/helpers.d.ts

@@ -0,0 +1,13 @@
+export declare const IMAGE_ENDPOINT = "https://images.iris.trackunit.com";
+/**
+ * Generates an url for the original sized image from the image id
+ */
+export declare const createOriginalUrl: (id: string) => string;
+/**
+ * Generates an url for the thumbnail size image
+ */
+export declare const createThumbnailUrl: (id: string) => string;
+/**
+ * Generates srcSet HTML attribute to avoid loading the full size image on small screens
+ */
+export declare const createSrcSet: (id: string) => string;

package/src/ImageCollection/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ImageCollection';
+export * from './helpers';

package/src/index.d.ts

@@ -1 +1,2 @@
 export * from "./ConfirmationDialog/ConfirmationDialogContextProvider";
+export * from "./ImageCollection";