@trackunit/react-components 0.2.1 → 0.2.3

package/index.cjs.js

@@ -16,10 +16,9 @@ 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');
@@ -3599,124 +3598,6 @@ 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.
@@ -5104,10 +4985,8 @@ 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;
@@ -5145,8 +5024,6 @@ 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,10 +15,9 @@ 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';
@@ -3579,124 +3578,6 @@ 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.
@@ -5066,4 +4947,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-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 };
+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 };

package/package.json

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

package/src/components/index.d.ts

@@ -12,7 +12,6 @@ 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";
@@ -43,6 +42,3 @@ 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/components/ImageCollection/ImageCollection.d.ts

@@ -1,26 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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;