@trackunit/react-components 0.1.414 → 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');
@@ -1292,6 +1293,81 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
+/**
+ * Maps viewport size keys to their corresponding state property names.
+ */
+const propsMap = {
+    xs: "isXs",
+    sm: "isSm",
+    md: "isMd",
+    lg: "isLg",
+    xl: "isXl",
+    "2xl": "is2xl",
+    "3xl": "is3xl",
+};
+/**
+ * The default state for viewport sizes, with all values set to false.
+ */
+const defaultState = {
+    isXs: false,
+    isSm: false,
+    isMd: false,
+    isLg: false,
+    isXl: false,
+    is2xl: false,
+    is3xl: false,
+};
+/**
+ * A custom React hook that provides real-time information about the current viewport size.
+ *
+ * This hook listens to changes in the viewport size and returns an object with boolean values
+ * indicating which breakpoints are currently active. It's useful for creating responsive
+ * layouts and components that need to adapt to different screen sizes.
+ *
+ * @returns {ViewportSizeState} An object containing boolean values for each viewport size breakpoint.
+ * @example
+ * function MyComponent() {
+ *   const viewportSize = useViewportSize();
+ *
+ *   if (viewportSize.isLg) {
+ *     return <LargeScreenLayout />;
+ *   } else if (viewportSize.isMd) {
+ *     return <MediumScreenLayout />;
+ *   } else {
+ *     return <SmallScreenLayout />;
+ *   }
+ * }
+ */
+const useViewportSize = () => {
+    const [viewportSize, setViewportSize] = React.useState(() => defaultState);
+    const updateViewportSize = React.useCallback(() => {
+        const newViewportSize = sharedUtils.objectEntries(uiDesignTokens.themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => {
+            const matches = window.matchMedia(`(min-width: ${minWidth}px)`).matches;
+            return {
+                ...acc,
+                [propsMap[size]]: matches,
+            };
+        }, Object.assign({}, defaultState));
+        setViewportSize(newViewportSize);
+    }, []);
+    React.useEffect(() => {
+        // Initial check
+        updateViewportSize();
+        // Set up listeners for each breakpoint
+        const mediaQueryLists = sharedUtils.objectEntries(uiDesignTokens.themeScreenSizeAsNumber).map(([_, minWidth]) => window.matchMedia(`(min-width: ${minWidth}px)`));
+        mediaQueryLists.forEach(mql => {
+            mql.addEventListener("change", updateViewportSize);
+        });
+        // Cleanup
+        return () => {
+            mediaQueryLists.forEach(mql => {
+                mql.removeEventListener("change", updateViewportSize);
+            });
+        };
+    }, [updateViewportSize]);
+    return viewportSize;
+};
+
 const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
@@ -3523,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.
@@ -4910,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;
@@ -4949,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;
@@ -4990,4 +5188,5 @@ exports.usePrompt = usePrompt;
 exports.useResize = useResize;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;
 exports.useTimeout = useTimeout;
+exports.useViewportSize = useViewportSize;
 exports.useWindowActivity = useWindowActivity;

package/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useEffect, useState, useReducer, useCallback, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
-import { objectKeys, objectValues } from '@trackunit/shared-utils';
-import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, color } from '@trackunit/ui-design-tokens';
+import { objectKeys, objectEntries, objectValues } from '@trackunit/shared-utils';
+import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
@@ -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';
@@ -1272,6 +1273,81 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
+/**
+ * Maps viewport size keys to their corresponding state property names.
+ */
+const propsMap = {
+    xs: "isXs",
+    sm: "isSm",
+    md: "isMd",
+    lg: "isLg",
+    xl: "isXl",
+    "2xl": "is2xl",
+    "3xl": "is3xl",
+};
+/**
+ * The default state for viewport sizes, with all values set to false.
+ */
+const defaultState = {
+    isXs: false,
+    isSm: false,
+    isMd: false,
+    isLg: false,
+    isXl: false,
+    is2xl: false,
+    is3xl: false,
+};
+/**
+ * A custom React hook that provides real-time information about the current viewport size.
+ *
+ * This hook listens to changes in the viewport size and returns an object with boolean values
+ * indicating which breakpoints are currently active. It's useful for creating responsive
+ * layouts and components that need to adapt to different screen sizes.
+ *
+ * @returns {ViewportSizeState} An object containing boolean values for each viewport size breakpoint.
+ * @example
+ * function MyComponent() {
+ *   const viewportSize = useViewportSize();
+ *
+ *   if (viewportSize.isLg) {
+ *     return <LargeScreenLayout />;
+ *   } else if (viewportSize.isMd) {
+ *     return <MediumScreenLayout />;
+ *   } else {
+ *     return <SmallScreenLayout />;
+ *   }
+ * }
+ */
+const useViewportSize = () => {
+    const [viewportSize, setViewportSize] = useState(() => defaultState);
+    const updateViewportSize = useCallback(() => {
+        const newViewportSize = objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => {
+            const matches = window.matchMedia(`(min-width: ${minWidth}px)`).matches;
+            return {
+                ...acc,
+                [propsMap[size]]: matches,
+            };
+        }, Object.assign({}, defaultState));
+        setViewportSize(newViewportSize);
+    }, []);
+    useEffect(() => {
+        // Initial check
+        updateViewportSize();
+        // Set up listeners for each breakpoint
+        const mediaQueryLists = objectEntries(themeScreenSizeAsNumber).map(([_, minWidth]) => window.matchMedia(`(min-width: ${minWidth}px)`));
+        mediaQueryLists.forEach(mql => {
+            mql.addEventListener("change", updateViewportSize);
+        });
+        // Cleanup
+        return () => {
+            mediaQueryLists.forEach(mql => {
+                mql.removeEventListener("change", updateViewportSize);
+            });
+        };
+    }, [updateViewportSize]);
+    return viewportSize;
+};
+
 const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
@@ -3503,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.
@@ -4872,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, 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.1.414",
+  "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";

package/src/hooks/index.d.ts

@@ -14,4 +14,5 @@ export * from "./useOptionallyElevatedState";
 export * from "./useResize";
 export * from "./useSelfUpdatingRef";
 export * from "./useTimeout";
+export * from "./useViewportSize";
 export * from "./useWindowActivity";

package/src/hooks/useViewportSize.d.ts

@@ -0,0 +1,32 @@
+import { themeScreenSizeAsNumber } from "@trackunit/ui-design-tokens";
+type ViewportSize = keyof typeof themeScreenSizeAsNumber;
+/**
+ * Represents the state of viewport sizes as boolean values.
+ * Each property is true if the viewport width is greater than or equal to the corresponding breakpoint.
+ */
+type ViewportSizeState = {
+    [K in ViewportSize as `is${Capitalize<K>}`]: boolean;
+};
+/**
+ * A custom React hook that provides real-time information about the current viewport size.
+ *
+ * This hook listens to changes in the viewport size and returns an object with boolean values
+ * indicating which breakpoints are currently active. It's useful for creating responsive
+ * layouts and components that need to adapt to different screen sizes.
+ *
+ * @returns {ViewportSizeState} An object containing boolean values for each viewport size breakpoint.
+ * @example
+ * function MyComponent() {
+ *   const viewportSize = useViewportSize();
+ *
+ *   if (viewportSize.isLg) {
+ *     return <LargeScreenLayout />;
+ *   } else if (viewportSize.isMd) {
+ *     return <MediumScreenLayout />;
+ *   } else {
+ *     return <SmallScreenLayout />;
+ *   }
+ * }
+ */
+export declare const useViewportSize: () => ViewportSizeState;
+export {};