@trackunit/react-components 0.2.0 → 0.2.1

package/index.cjs.js

@@ -16,9 +16,10 @@ var isEqual = require('lodash/isEqual');
 var reactUse = require('react-use');
 var reactRouter = require('@tanstack/react-router');
 var reactSwipeable = require('react-swipeable');
+var ImageGallery = require('react-image-gallery');
+var tailwindMerge = require('tailwind-merge');
 var react = require('@floating-ui/react');
 var omit = require('lodash/omit');
-var tailwindMerge = require('tailwind-merge');
 var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
 var dateFns = require('date-fns');
@@ -3598,6 +3599,124 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsxRuntime.jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
+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 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) => {
+    const { imageIds, actions, emptyPlaceholderText, additionalItemClassName } = props;
+    const [openImageId, setOpenImageId] = React.useState(imageIds[0]);
+    const [isDeleting, setIsDeleting] = React.useState(false);
+    const { width } = 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(Button, { 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]);
+    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]);
+    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); }, 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(Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: async () => {
+                            var _a;
+                            if (!(((_a = 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);
+                            }
+                        }, prefix: jsxRuntime.jsx(Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : (jsxRuntime.jsx(EmptyState, { action: uploadButton, description: emptyPlaceholderText })), jsxRuntime.jsx("input", { 
+                // Users can still select other files on mobile devices
+                accept: "image/jpeg, image/png, image/bmp, image/webp, image/gif", 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" })] }));
+};
+
 /**
  * The hook that powers the Popover component.
  * It should not be used directly, but rather through the Popover component.
@@ -4985,8 +5104,10 @@ exports.EmptyState = EmptyState;
 exports.EmptyValue = EmptyValue;
 exports.ExternalLink = ExternalLink;
 exports.Heading = Heading;
+exports.IMAGE_ENDPOINT = IMAGE_ENDPOINT;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.ImageCollection = ImageCollection;
 exports.Indicator = Indicator;
 exports.KPICard = KPICard;
 exports.MenuItem = MenuItem;
@@ -5024,6 +5145,8 @@ exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.VirtualizedList = VirtualizedList;
 exports.WidgetBody = WidgetBody;
+exports.createOriginalUrl = createOriginalUrl;
+exports.createThumbnailUrl = createThumbnailUrl;
 exports.cvaButton = cvaButton;
 exports.cvaButtonPrefixSuffix = cvaButtonPrefixSuffix;
 exports.cvaButtonSpinner = cvaButtonSpinner;

package/index.esm.js

@@ -15,9 +15,10 @@ import isEqual from 'lodash/isEqual';
 import { usePrevious, useMeasure, useCopyToClipboard } from 'react-use';
 import { Link, useBlocker } from '@tanstack/react-router';
 import { useSwipeable } from 'react-swipeable';
+import ImageGallery from 'react-image-gallery';
+import { twMerge } from 'tailwind-merge';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import omit from 'lodash/omit';
-import { twMerge } from 'tailwind-merge';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List, Root } from '@radix-ui/react-tabs';
 import { format, formatDistance } from 'date-fns';
@@ -3578,6 +3579,124 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
+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 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) => {
+    const { imageIds, actions, emptyPlaceholderText, additionalItemClassName } = 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, { 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]);
+    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]);
+    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); }, 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: async () => {
+                            var _a;
+                            if (!(((_a = 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);
+                            }
+                        }, prefix: jsx(Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : (jsx(EmptyState, { action: uploadButton, description: emptyPlaceholderText })), jsx("input", { 
+                // Users can still select other files on mobile devices
+                accept: "image/jpeg, image/png, image/bmp, image/webp, image/gif", 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" })] }));
+};
+
 /**
  * The hook that powers the Popover component.
  * It should not be used directly, but rather through the Popover component.
@@ -4947,4 +5066,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, IMAGE_ENDPOINT, Icon, IconButton, ImageCollection, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, createOriginalUrl, createThumbnailUrl, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -27,7 +27,8 @@
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "@trackunit/react-table-pagination": "*",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "react-image-gallery": "1.3.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/ImageCollection/ImageCollection.d.ts

@@ -0,0 +1,26 @@
+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;
+    additionalItemClassName?: string;
+};
+/**
+ * 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/components/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/components/index.d.ts

@@ -12,6 +12,7 @@ export * from "./EmptyValue/EmptyValue";
 export * from "./ExternalLink/ExternalLink";
 export * from "./Heading";
 export * from "./Icon/Icon";
+export * from "./ImageCollection/ImageCollection";
 export * from "./Indicator";
 export * from "./KPICard/KPICard";
 export * from "./Menu";
@@ -41,3 +42,7 @@ export * from "./Tooltip";
 export * from "./ValueBar";
 export * from "./VirtualizedList/VirtualizedList";
 export * from "./Widget";
+export * from "./buttons";
+export { createOriginalUrl } from "./ImageCollection/helpers";
+export { createThumbnailUrl } from "./ImageCollection/helpers";
+export { IMAGE_ENDPOINT } from "./ImageCollection/helpers";