@trackunit/react-compound-components 1.7.90 → 1.7.94

package/index.cjs.js

@@ -6,11 +6,9 @@ var reactCoreHooks = require('@trackunit/react-core-hooks');
 var reactModal = require('@trackunit/react-modal');
 var react = require('react');
 var reactComponents = require('@trackunit/react-components');
-var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
-var ImageGallery = require('react-image-gallery');
-var tailwindMerge = require('tailwind-merge');
-var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 var reactFormComponents = require('@trackunit/react-form-components');
+var tailwindMerge = require('tailwind-merge');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 
 var defaultTranslations = {
 	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
@@ -121,135 +119,6 @@ const ConfirmationDialogContextProvider = ({ children }) => {
     return (jsxRuntime.jsxs(reactCoreHooks.ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsxRuntime.jsx(ConfirmationDialogModal, { ...modal, ...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",
-    "hover:[&_.image-gallery-icon]:text-blue-600",
-    // This centers thumbnails and makes the clickable area independent of image size
-    "[&_.image-gallery-thumbnail]:h-[100px]",
-]);
-const titleStyle = "absolute top-3 left-1/2 transform -translate-x-1/2 text-white bg-black/50 text-sm px-1 rounded-md backdrop-blur-sm text-wrap";
-/**
- * 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 { imagesData, actions, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
-    const [openImageId, setOpenImageId] = react.useState(imagesData[0]?.id);
-    const [isDeleting, setIsDeleting] = react.useState(false);
-    const { isLg } = reactComponents.useViewportBreakpoints();
-    const fileInputRef = react.useRef(null);
-    const imageGalleryRef = react.useRef(null);
-    const uploadButton = react.useMemo(() => actions?.upload ? (jsxRuntime.jsx("div", { className: "flex justify-end", children: jsxRuntime.jsx(reactComponents.Button, { loading: uploading, onClick: () => fileInputRef.current?.click(), children: actions.upload.label }) })) : null, [actions?.upload, uploading]);
-    const items = react.useMemo(() => imagesData.map(image => ({
-        id: image.id,
-        original: createOriginalUrl(image.id),
-        thumbnail: createThumbnailUrl(image.id),
-        srcSet: createSrcSet(image.id),
-        name: image.name,
-        timestamp: dateAndTimeUtils.formatDateUtil(new Date(image.timestamp), { dateFormat: "medium", timeFormat: "medium" }),
-    })), [imagesData]);
-    react.useEffect(() => {
-        if ((!openImageId || !imagesData.map(x => x.id).includes(openImageId)) && imagesData.length > 0) {
-            setOpenImageId(imagesData[0]?.id);
-        }
-    }, [imagesData, openImageId]);
-    const onRemove = react.useCallback(async () => {
-        if (!(actions?.remove?.onRemove && openImageId)) {
-            return;
-        }
-        try {
-            let nextIndex;
-            const indexToDelete = imagesData.map(x => x.id).indexOf(openImageId);
-            const deletingLastImage = indexToDelete === imagesData.length - 1;
-            if (imagesData.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?.remove, imagesData, openImageId]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [imagesData.length > 0 ? (jsxRuntime.jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", "data-testid": "image-collection", children: [jsxRuntime.jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => setOpenImageId(items[index]?.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, 
-                        // @ts-ignore
-                        name, 
-                        // @ts-ignore
-                        timestamp, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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 }), jsxRuntime.jsx("div", { className: titleStyle, "data-testid": `image-title-${id}`, onClick: e => e.stopPropagation(), children: `${name} - ${timestamp}` })] })), 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: isLg, 
-                        // reduce sliding around during deletion
-                        slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, 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] })) : actions?.upload?.onUpload ? (uploading ? (jsxRuntime.jsx(reactComponents.Spinner, {})) : (jsxRuntime.jsx(reactFormComponents.DropZone, { accept: ACCEPT_FOR_IMAGES, className: "h-[98vh]", dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel, multiple: true }))) : null, jsxRuntime.jsx("input", { 
-                // Users can still select other files on mobile devices
-                accept: ACCEPT_FOR_IMAGES, "data-testid": "site-images-input-files", hidden: true, multiple: true, onChange: async (e) => {
-                    if (!(e.target.files && actions?.upload)) {
-                        return;
-                    }
-                    await actions.upload.onUpload(e.target.files);
-                }, ref: fileInputRef, type: "file" })] }));
-};
-
 const cvaPreferenceCard = cssClassVarianceUtilities.cvaMerge(["rounded-lg", "border", "border-neutral-200", "bg-white", "w-full"], {
     variants: {
         disabled: {
@@ -376,9 +245,4 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
 setupLibraryTranslations();
 
 exports.ConfirmationDialogContextProvider = ConfirmationDialogContextProvider;
-exports.IMAGE_ENDPOINT = IMAGE_ENDPOINT;
-exports.ImageCollection = ImageCollection;
 exports.PreferenceCard = PreferenceCard;
-exports.createOriginalUrl = createOriginalUrl;
-exports.createSrcSet = createSrcSet;
-exports.createThumbnailUrl = createThumbnailUrl;

package/index.esm.js

@@ -1,14 +1,12 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { ConfirmationDialogProvider } from '@trackunit/react-core-hooks';
 import { Modal, ModalHeader, ModalBody, ModalFooter, useModal } from '@trackunit/react-modal';
-import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import { Button, useViewportBreakpoints, Icon, Spinner, Tooltip, SkeletonLines, Text, Tag } from '@trackunit/react-components';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import ImageGallery from 'react-image-gallery';
+import { useState, useMemo, useCallback } from 'react';
+import { Button, Tooltip, SkeletonLines, Icon, Text, Tag } from '@trackunit/react-components';
+import { Checkbox, RadioItem, ToggleSwitch } from '@trackunit/react-form-components';
 import { twMerge } from 'tailwind-merge';
-import { formatDateUtil } from '@trackunit/date-and-time-utils';
-import { DropZone, Checkbox, RadioItem, ToggleSwitch } from '@trackunit/react-form-components';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 
 var defaultTranslations = {
 	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
@@ -119,135 +117,6 @@ const ConfirmationDialogContextProvider = ({ children }) => {
     return (jsxs(ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsx(ConfirmationDialogModal, { ...modal, ...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",
-    "hover:[&_.image-gallery-icon]:text-blue-600",
-    // This centers thumbnails and makes the clickable area independent of image size
-    "[&_.image-gallery-thumbnail]:h-[100px]",
-]);
-const titleStyle = "absolute top-3 left-1/2 transform -translate-x-1/2 text-white bg-black/50 text-sm px-1 rounded-md backdrop-blur-sm text-wrap";
-/**
- * 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 { imagesData, actions, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
-    const [openImageId, setOpenImageId] = useState(imagesData[0]?.id);
-    const [isDeleting, setIsDeleting] = useState(false);
-    const { isLg } = useViewportBreakpoints();
-    const fileInputRef = useRef(null);
-    const imageGalleryRef = useRef(null);
-    const uploadButton = useMemo(() => actions?.upload ? (jsx("div", { className: "flex justify-end", children: jsx(Button, { loading: uploading, onClick: () => fileInputRef.current?.click(), children: actions.upload.label }) })) : null, [actions?.upload, uploading]);
-    const items = useMemo(() => imagesData.map(image => ({
-        id: image.id,
-        original: createOriginalUrl(image.id),
-        thumbnail: createThumbnailUrl(image.id),
-        srcSet: createSrcSet(image.id),
-        name: image.name,
-        timestamp: formatDateUtil(new Date(image.timestamp), { dateFormat: "medium", timeFormat: "medium" }),
-    })), [imagesData]);
-    useEffect(() => {
-        if ((!openImageId || !imagesData.map(x => x.id).includes(openImageId)) && imagesData.length > 0) {
-            setOpenImageId(imagesData[0]?.id);
-        }
-    }, [imagesData, openImageId]);
-    const onRemove = useCallback(async () => {
-        if (!(actions?.remove?.onRemove && openImageId)) {
-            return;
-        }
-        try {
-            let nextIndex;
-            const indexToDelete = imagesData.map(x => x.id).indexOf(openImageId);
-            const deletingLastImage = indexToDelete === imagesData.length - 1;
-            if (imagesData.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?.remove, imagesData, openImageId]);
-    return (jsxs(Fragment, { children: [imagesData.length > 0 ? (jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", "data-testid": "image-collection", children: [jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => setOpenImageId(items[index]?.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, 
-                        // @ts-ignore
-                        name, 
-                        // @ts-ignore
-                        timestamp, }) => (jsxs(Fragment, { children: [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 }), jsx("div", { className: titleStyle, "data-testid": `image-title-${id}`, onClick: e => e.stopPropagation(), children: `${name} - ${timestamp}` })] })), 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: isLg, 
-                        // reduce sliding around during deletion
-                        slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, 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] })) : actions?.upload?.onUpload ? (uploading ? (jsx(Spinner, {})) : (jsx(DropZone, { accept: ACCEPT_FOR_IMAGES, className: "h-[98vh]", dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel, multiple: true }))) : null, jsx("input", { 
-                // Users can still select other files on mobile devices
-                accept: ACCEPT_FOR_IMAGES, "data-testid": "site-images-input-files", hidden: true, multiple: true, onChange: async (e) => {
-                    if (!(e.target.files && actions?.upload)) {
-                        return;
-                    }
-                    await actions.upload.onUpload(e.target.files);
-                }, ref: fileInputRef, type: "file" })] }));
-};
-
 const cvaPreferenceCard = cvaMerge(["rounded-lg", "border", "border-neutral-200", "bg-white", "w-full"], {
     variants: {
         disabled: {
@@ -373,4 +242,4 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
  */
 setupLibraryTranslations();
 
-export { ConfirmationDialogContextProvider, IMAGE_ENDPOINT, ImageCollection, PreferenceCard, createOriginalUrl, createSrcSet, createThumbnailUrl };
+export { ConfirmationDialogContextProvider, PreferenceCard };

package/package.json

@@ -1,23 +1,21 @@
 {
   "name": "@trackunit/react-compound-components",
-  "version": "1.7.90",
+  "version": "1.7.94",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
     "react": "19.0.0",
     "tailwind-merge": "^2.0.0",
-    "react-image-gallery": "1.3.0",
-    "@trackunit/react-core-contexts-api": "1.8.63",
-    "@trackunit/react-core-hooks": "1.7.67",
-    "@trackunit/react-components": "1.10.26",
-    "@trackunit/react-modal": "1.8.86",
-    "@trackunit/css-class-variance-utilities": "1.7.58",
-    "@trackunit/date-and-time-utils": "1.7.58",
-    "@trackunit/react-form-components": "1.8.90",
-    "@trackunit/i18n-library-translation": "1.7.70",
-    "@trackunit/react-test-setup": "1.4.58",
-    "@trackunit/shared-utils": "1.9.58",
-    "@trackunit/ui-icons": "1.7.59"
+    "@trackunit/react-core-contexts-api": "1.8.65",
+    "@trackunit/react-core-hooks": "1.7.69",
+    "@trackunit/react-components": "1.10.28",
+    "@trackunit/react-modal": "1.8.88",
+    "@trackunit/css-class-variance-utilities": "1.7.60",
+    "@trackunit/react-form-components": "1.8.93",
+    "@trackunit/i18n-library-translation": "1.7.72",
+    "@trackunit/react-test-setup": "1.4.60",
+    "@trackunit/shared-utils": "1.9.60",
+    "@trackunit/ui-icons": "1.7.61"
   },
   "engines": {
     "node": ">=22.x",

package/src/ConfirmationDialog/ConfirmationDialogContextProvider.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 export interface ConfirmationDialogProviderProps {
     children: ReactNode;
 }
@@ -7,4 +7,4 @@ export interface ConfirmationDialogProviderProps {
  *
  * Provides confirmation dialog context and manages modal state with Promise-based resolution
  */
-export declare const ConfirmationDialogContextProvider: ({ children }: ConfirmationDialogProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfirmationDialogContextProvider: ({ children }: ConfirmationDialogProviderProps) => ReactElement;

package/src/ConfirmationDialog/ConfirmationDialogModal.d.ts

@@ -1,5 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { UseModalReturnValue } from "@trackunit/react-modal";
+import { ReactElement } from "react";
 import { ConfirmationDialogProps } from "./useConfirmationDialog.demo";
 export interface ConfirmationDialogModalProps extends Pick<ConfirmationDialogProps, "title" | "message" | "primaryActionLabel" | "secondaryActionLabel" | "primaryActionType">, UseModalReturnValue, CommonProps {
     handlePrimaryActionClick: () => void;
@@ -8,4 +9,4 @@ export interface ConfirmationDialogModalProps extends Pick<ConfirmationDialogPro
 /**
  *
  */
-export declare const ConfirmationDialogModal: ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }: ConfirmationDialogModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfirmationDialogModal: ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }: ConfirmationDialogModalProps) => ReactElement;

package/src/ConfirmationDialog/useConfirmationDialog.demo.d.ts

@@ -1,4 +1,5 @@
 import { ConfirmationDialogProps as ConfirmationDialogPropsActual } from "@trackunit/react-core-contexts-api";
+import { ReactElement } from "react";
 export interface ConfirmationDialogProps extends ConfirmationDialogPropsActual {
     /**
      * The heading of the modal.
@@ -37,4 +38,4 @@ export interface ConfirmationDialogProps extends ConfirmationDialogPropsActual {
  *
  * **ATTENTION:** In the Manager and Iris Apps, this hook will "just work". If you are using the hook in a custom setup, you need to wrap your app in the ConfirmationDialogContextProvider.
  */
-export declare const UseConfirmationDialogDemoComponent: (props: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UseConfirmationDialogDemoComponent: (props: ConfirmationDialogProps) => ReactElement;

package/src/ConfirmationDialog/useConfirmationDialog.stories.d.ts

@@ -3,7 +3,7 @@ import { ReactElement } from "react";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: (props: import("./useConfirmationDialog.demo").ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
+    component: (props: import("./useConfirmationDialog.demo").ConfirmationDialogProps) => ReactElement;
     parameters: {
         docs: {
             source: {

package/src/index.d.ts

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

package/src/translation.d.ts

@@ -1,4 +1,5 @@
-import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
+import { NamespaceTransProps, TransForLibs, TranslationResource, useNamespaceTranslation } from "@trackunit/i18n-library-translation";
+import { ReactElement } from "react";
 import defaultTranslations from "./locales/en/translation.json";
 /** A type for all available translation keys in this library */
 export type TranslationKeys = keyof typeof defaultTranslations;
@@ -14,11 +15,7 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"confirmationDialog.default.message" | "confirmationDialog.default.primarybutton" | "confirmationDialog.default.secondarybutton" | "confirmationDialog.default.title">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"confirmationDialog.default.message" | "confirmationDialog.default.primarybutton" | "confirmationDialog.default.secondarybutton" | "confirmationDialog.default.title">;
-    i18n: import("i18next").i18n;
-    ready: boolean;
-};
+export declare const useTranslation: () => ReturnType<typeof useNamespaceTranslation<TranslationKeys>>;
 /**
  * Type of the t function for the local useTranslation for this specific library
  */
@@ -26,7 +23,7 @@ export type TranslationFunction = TransForLibs<TranslationKeys>;
 /**
  * Trans for this specific library.
  */
-export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => import("react/jsx-runtime").JSX.Element;
+export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => ReactElement;
 /**
  * Registers the translations for this library
  */

package/src/ImageCollection/ImageCollection.d.ts

@@ -1,31 +0,0 @@
-import { ComponentProps } from "react";
-import ImageGallery from "react-image-gallery";
-type Props = Omit<ComponentProps<typeof ImageGallery>, "items"> & {
-    imagesData: Array<{
-        id: string;
-        name: string;
-        timestamp: string;
-    }>;
-    actions?: {
-        upload?: {
-            label: string;
-            onUpload: (pictures: FileList) => Promise<void>;
-        };
-        remove?: {
-            label: string;
-            onRemove?: (id: string) => Promise<void>;
-        };
-    };
-    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

@@ -1,39 +0,0 @@
-import { StoryObj } from "@storybook/react-webpack5";
-import { ReactElement } from "react";
-type Story = StoryObj<typeof meta>;
-declare const meta: {
-    title: string;
-    component: (props: Omit<import("react-image-gallery").ReactImageGalleryProps, "items"> & {
-        imagesData: Array<{
-            id: string;
-            name: string;
-            timestamp: string;
-        }>;
-        actions?: {
-            upload?: {
-                label: string;
-                onUpload: (pictures: FileList) => Promise<void>;
-            };
-            remove?: {
-                label: string;
-                onRemove?: (id: string) => Promise<void>;
-            };
-        };
-        emptyPlaceholderActionLabel?: string;
-        additionalItemClassName?: string;
-        uploading?: boolean;
-    }) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    parameters: {
-        docs: {
-            source: {
-                type: string;
-                excludeDecorators: boolean;
-            };
-        };
-    };
-};
-export default meta;
-export declare const PackageName: () => ReactElement;
-export declare const Default: Story;
-export declare const EmptyState: Story;

package/src/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;

package/src/ImageCollection/index.d.ts

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