@trackunit/react-components 0.5.28 → 0.5.30

package/index.cjs.js

@@ -19,7 +19,6 @@ var omit = require('lodash/omit');
 var tailwindMerge = require('tailwind-merge');
 var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
-var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 var reactTablePagination = require('@trackunit/react-table-pagination');
 
 function _interopNamespaceDefault(e) {
@@ -809,154 +808,6 @@ const Badge = ({ color = "primary", className, count, max, hideZero = false, dat
     return (jsxRuntime.jsx("span", { className: cvaBadge({ color, className }), "data-testid": dataTestId, children: displayedCount }));
 };
 
-/**
- * Sets a value in the local storage with the specified key.
- * Thin wrapper around localStorage.setItem() that is slightly more type safe
- * Stringifies value automatically.
- * Useful if you for some reason can't use the useLocalStorage hook for React lifecycle reasons
- *
- * @template TValue - The type of value to be stored.
- * @param {string} key - The key under which to store the value.
- * @param {TValue} value - The value to store in the local storage.
- */
-const setLocalStorage = (key, value) => {
-    localStorage.setItem(key, JSON.stringify(value));
-};
-
-/**
- * Validates the state object using a Zod schema.
- *
- * @template TState - The type of the state.
- * @param {ValidateStateOptions<TState>} params - The parameters for the validateState function.
- */
-const validateState = ({ state, schema, onValidationFailed, onValidationSuccessful, defaultState, }) => {
-    try {
-        const parsedState = schema.parse(state);
-        onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful(parsedState);
-        return parsedState;
-    }
-    catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Failed to parse and validate the state from local storage.", error);
-        onValidationFailed === null || onValidationFailed === void 0 ? void 0 : onValidationFailed(error);
-        return defaultState;
-    }
-};
-
-/**
- * Initializes the state from local storage, parsing and validating it if a Zod schema is provided.
- *
- * @template TState - The type of the state stored in local storage.
- * @param {Omit<LocalStorageParams<TState>, "state">} params - The parameters for initializing the local storage state.
- * @returns {TState} - The initialized state.
- */
-const initLocalStorageState = ({ key, defaultState, schema, }) => {
-    const localStorageItem = localStorage.getItem(key);
-    if (!localStorageItem) {
-        return defaultState;
-    }
-    const localStorageItemJSON = JSON.parse(localStorageItem);
-    if (!schema) {
-        return localStorageItemJSON;
-    }
-    return validateState({ state: localStorageItemJSON, defaultState, schema });
-};
-
-/**
- * The usePrevious hook is a useful tool for tracking the previous value of a variable in a functional component. This can be particularly handy in scenarios where it is necessary to compare the current value with the previous one, such as triggering actions or rendering based on changes.
- *
- * @example
- * const [color, setColor] = React.useState(getRandomColor());
-  const previousColor = usePrevious(color);
- */
-const usePrevious = (value) => {
-    const ref = React.useRef();
-    React.useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-};
-
-/**
- * Custom hook for synchronizing a state variable with local storage,
- * with optional schema validation and callbacks.
- *
- * @template TState - The type of the state variable.
- * @param {LocalStorageParams<TState> & LocalStorageCallbacks & { state: TState }} params - The parameters for the useLocalStorageEffect hook.
- */
-const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
-    const prevState = usePrevious(state);
-    React.useEffect(() => {
-        if (JSON.stringify(prevState) === JSON.stringify(state)) {
-            return;
-        }
-        if (schema) {
-            validateState({
-                state,
-                schema,
-                defaultState,
-                onValidationFailed: error => {
-                    // eslint-disable-next-line no-console
-                    console.error(`State validation failed. Resetting local storage to default state: ${defaultState}.`, error);
-                    localStorage.removeItem(key);
-                    onValidationFailed === null || onValidationFailed === void 0 ? void 0 : onValidationFailed(error);
-                },
-                onValidationSuccessful: data => {
-                    setLocalStorage(key, data);
-                    onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful(data);
-                },
-            });
-        }
-        else {
-            const stringifiedState = JSON.stringify(state);
-            localStorage.setItem(key, stringifiedState);
-        }
-    }, [state, key, schema, defaultState, prevState, onValidationFailed, onValidationSuccessful]);
-};
-
-/**
- * Works like a normal useState, but saves to local storage and has optional schema validation.
- *
- * @template TState - The type of the value stored in local storage.
- * @param {Omit<LocalStorageParams<TState>, "state"> & LocalStorageCallbacks} options - The options for useLocalStorage.
- * @returns {[TState, Dispatch<SetStateAction<TState>>, () => void]} - A tuple containing the current value, a function to update the value, and a function to remove the value from local storage.
- */
-const useLocalStorage = ({ key, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
-    if (!key) {
-        throw new Error("useLocalStorage key may not be falsy");
-    }
-    const [state, setState] = React.useState(initLocalStorageState({ key, defaultState, schema }));
-    useLocalStorageEffect({
-        key,
-        state,
-        defaultState,
-        schema,
-        onValidationFailed,
-        onValidationSuccessful,
-    });
-    const reset = () => {
-        setState(defaultState);
-    };
-    return [state, setState, reset];
-};
-
-/**
- * Works like a normal useReducer, but saves to local storage and has optional schema validation.
- *
- * @template TState - The type of the state.
- * @template TAction - The type of the action.
- * @param {LocalStorageParams<TState> & LocalStorageCallbacks} params - The parameters for the useLocalStorageReducer function.
- * @returns {[TState, Dispatch<TAction>]} - A tuple containing the state and the dispatch function.
- */
-const useLocalStorageReducer = ({ key, defaultState, reducer, schema, onValidationFailed, onValidationSuccessful, }) => {
-    if (!key) {
-        throw new Error("useLocalStorage key may not be falsy");
-    }
-    const [state, dispatch] = React.useReducer(reducer, defaultState, () => initLocalStorageState({ key, defaultState, schema }));
-    useLocalStorageEffect({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful });
-    return [state, dispatch];
-};
-
 /**
  * Custom hook to handle click outside events.
  *
@@ -4690,52 +4541,6 @@ const Tabs = ({ children, forceRender, className, dataTestId, fullWidth, ...rest
     return (jsxRuntime.jsx(reactTabs.Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
-const cvaTimeline = cssClassVarianceUtilities.cvaMerge("ml-4");
-const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge([
-    "grid",
-    "grid-cols-[min-content_auto]",
-    "grid-rows-[auto_auto]",
-    "items-start",
-    "border-l-[8px]",
-    "border-gray-100",
-    "pb-4",
-    "last:border-transparent",
-]);
-const cvaTimelineDot = cssClassVarianceUtilities.cvaMerge(["flex", "space-x-4", "items-start", "ml-[calc(-50%-8px)]"]);
-
-/**
- * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
- * - with an indicator (dot)
- * - a header (next to the dot)
- * - and a body.
- *
- * @param {TimelineProps} props - The props for the Timeline component
- * @returns {JSX.Element} Timeline component
- */
-const Timeline = ({ className, dataTestId, children }) => {
-    return (jsxRuntime.jsx("ol", { className: cvaTimeline({ className }), "data-testid": dataTestId, children: children }));
-};
-/**
- * TimelineElement - entry on a timeline - rendered with an icon on the timeline
- * - a date as the header and the children provided as body.
- *
- * @param {TimeLineElementProps} props the props
- * @returns {JSX.Element} component
- */
-const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", dot = jsxRuntime.jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsxRuntime.jsx(Icon, { name: "Calendar", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
-    return (jsxRuntime.jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId ? `${dataTestId}` : null, onClick: () => onClick && onClick(), children: [jsxRuntime.jsx("div", { className: cvaTimelineDot(), children: dot }), jsxRuntime.jsx("div", { className: "text-secondary-500 text-sm", children: header }), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { children: children }) })] }));
-};
-function defaultHeader(date, showTime) {
-    return `${formattedDate(date, showTime)} (${dateAndTimeUtils.timeSinceAuto(date, new Date())})`;
-}
-const formattedDate = (date, showTime) => {
-    return dateAndTimeUtils.formatDateUtil(date, {
-        dateFormat: "medium",
-        timeFormat: "short",
-        selectFormat: !showTime ? "dateOnly" : undefined,
-    });
-};
-
 const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
 const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {
     variants: {
@@ -5064,8 +4869,6 @@ exports.TabList = TabList;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;
-exports.Timeline = Timeline;
-exports.TimelineElement = TimelineElement;
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleItem = ToggleItem;
 exports.Tooltip = Tooltip;
@@ -5094,7 +4897,6 @@ exports.getDevicePixelRatio = getDevicePixelRatio;
 exports.getValueBarColorByValue = getValueBarColorByValue;
 exports.iconColorNames = iconColorNames;
 exports.iconPalette = iconPalette;
-exports.setLocalStorage = setLocalStorage;
 exports.useClickOutside = useClickOutside;
 exports.useContainerBreakpoints = useContainerBreakpoints;
 exports.useContinuousTimeout = useContinuousTimeout;
@@ -5105,12 +4907,9 @@ exports.useHover = useHover;
 exports.useIsFirstRender = useIsFirstRender;
 exports.useIsFullscreen = useIsFullscreen;
 exports.useIsTextCutOff = useIsTextCutOff;
-exports.useLocalStorage = useLocalStorage;
-exports.useLocalStorageReducer = useLocalStorageReducer;
 exports.useOptionallyElevatedState = useOptionallyElevatedState;
 exports.useOverflowItems = useOverflowItems;
 exports.usePopoverContext = usePopoverContext;
-exports.usePrevious = usePrevious;
 exports.usePrompt = usePrompt;
 exports.useResize = useResize;
 exports.useScrollDetection = useScrollDetection;

package/index.esm.js

@@ -1,6 +1,6 @@
 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 React__default, { useRef, useMemo, useEffect, useState, useCallback, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
 import { objectKeys, uuidv4, 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';
@@ -18,7 +18,6 @@ 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 { timeSinceAuto, formatDateUtil } from '@trackunit/date-and-time-utils';
 import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
 
 const docs = {
@@ -789,154 +788,6 @@ const Badge = ({ color = "primary", className, count, max, hideZero = false, dat
     return (jsx("span", { className: cvaBadge({ color, className }), "data-testid": dataTestId, children: displayedCount }));
 };
 
-/**
- * Sets a value in the local storage with the specified key.
- * Thin wrapper around localStorage.setItem() that is slightly more type safe
- * Stringifies value automatically.
- * Useful if you for some reason can't use the useLocalStorage hook for React lifecycle reasons
- *
- * @template TValue - The type of value to be stored.
- * @param {string} key - The key under which to store the value.
- * @param {TValue} value - The value to store in the local storage.
- */
-const setLocalStorage = (key, value) => {
-    localStorage.setItem(key, JSON.stringify(value));
-};
-
-/**
- * Validates the state object using a Zod schema.
- *
- * @template TState - The type of the state.
- * @param {ValidateStateOptions<TState>} params - The parameters for the validateState function.
- */
-const validateState = ({ state, schema, onValidationFailed, onValidationSuccessful, defaultState, }) => {
-    try {
-        const parsedState = schema.parse(state);
-        onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful(parsedState);
-        return parsedState;
-    }
-    catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Failed to parse and validate the state from local storage.", error);
-        onValidationFailed === null || onValidationFailed === void 0 ? void 0 : onValidationFailed(error);
-        return defaultState;
-    }
-};
-
-/**
- * Initializes the state from local storage, parsing and validating it if a Zod schema is provided.
- *
- * @template TState - The type of the state stored in local storage.
- * @param {Omit<LocalStorageParams<TState>, "state">} params - The parameters for initializing the local storage state.
- * @returns {TState} - The initialized state.
- */
-const initLocalStorageState = ({ key, defaultState, schema, }) => {
-    const localStorageItem = localStorage.getItem(key);
-    if (!localStorageItem) {
-        return defaultState;
-    }
-    const localStorageItemJSON = JSON.parse(localStorageItem);
-    if (!schema) {
-        return localStorageItemJSON;
-    }
-    return validateState({ state: localStorageItemJSON, defaultState, schema });
-};
-
-/**
- * The usePrevious hook is a useful tool for tracking the previous value of a variable in a functional component. This can be particularly handy in scenarios where it is necessary to compare the current value with the previous one, such as triggering actions or rendering based on changes.
- *
- * @example
- * const [color, setColor] = React.useState(getRandomColor());
-  const previousColor = usePrevious(color);
- */
-const usePrevious = (value) => {
-    const ref = useRef();
-    useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-};
-
-/**
- * Custom hook for synchronizing a state variable with local storage,
- * with optional schema validation and callbacks.
- *
- * @template TState - The type of the state variable.
- * @param {LocalStorageParams<TState> & LocalStorageCallbacks & { state: TState }} params - The parameters for the useLocalStorageEffect hook.
- */
-const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
-    const prevState = usePrevious(state);
-    useEffect(() => {
-        if (JSON.stringify(prevState) === JSON.stringify(state)) {
-            return;
-        }
-        if (schema) {
-            validateState({
-                state,
-                schema,
-                defaultState,
-                onValidationFailed: error => {
-                    // eslint-disable-next-line no-console
-                    console.error(`State validation failed. Resetting local storage to default state: ${defaultState}.`, error);
-                    localStorage.removeItem(key);
-                    onValidationFailed === null || onValidationFailed === void 0 ? void 0 : onValidationFailed(error);
-                },
-                onValidationSuccessful: data => {
-                    setLocalStorage(key, data);
-                    onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful(data);
-                },
-            });
-        }
-        else {
-            const stringifiedState = JSON.stringify(state);
-            localStorage.setItem(key, stringifiedState);
-        }
-    }, [state, key, schema, defaultState, prevState, onValidationFailed, onValidationSuccessful]);
-};
-
-/**
- * Works like a normal useState, but saves to local storage and has optional schema validation.
- *
- * @template TState - The type of the value stored in local storage.
- * @param {Omit<LocalStorageParams<TState>, "state"> & LocalStorageCallbacks} options - The options for useLocalStorage.
- * @returns {[TState, Dispatch<SetStateAction<TState>>, () => void]} - A tuple containing the current value, a function to update the value, and a function to remove the value from local storage.
- */
-const useLocalStorage = ({ key, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
-    if (!key) {
-        throw new Error("useLocalStorage key may not be falsy");
-    }
-    const [state, setState] = useState(initLocalStorageState({ key, defaultState, schema }));
-    useLocalStorageEffect({
-        key,
-        state,
-        defaultState,
-        schema,
-        onValidationFailed,
-        onValidationSuccessful,
-    });
-    const reset = () => {
-        setState(defaultState);
-    };
-    return [state, setState, reset];
-};
-
-/**
- * Works like a normal useReducer, but saves to local storage and has optional schema validation.
- *
- * @template TState - The type of the state.
- * @template TAction - The type of the action.
- * @param {LocalStorageParams<TState> & LocalStorageCallbacks} params - The parameters for the useLocalStorageReducer function.
- * @returns {[TState, Dispatch<TAction>]} - A tuple containing the state and the dispatch function.
- */
-const useLocalStorageReducer = ({ key, defaultState, reducer, schema, onValidationFailed, onValidationSuccessful, }) => {
-    if (!key) {
-        throw new Error("useLocalStorage key may not be falsy");
-    }
-    const [state, dispatch] = useReducer(reducer, defaultState, () => initLocalStorageState({ key, defaultState, schema }));
-    useLocalStorageEffect({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful });
-    return [state, dispatch];
-};
-
 /**
  * Custom hook to handle click outside events.
  *
@@ -4670,52 +4521,6 @@ const Tabs = ({ children, forceRender, className, dataTestId, fullWidth, ...rest
     return (jsx(Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
-const cvaTimeline = cvaMerge("ml-4");
-const cvaTimelineElement = cvaMerge([
-    "grid",
-    "grid-cols-[min-content_auto]",
-    "grid-rows-[auto_auto]",
-    "items-start",
-    "border-l-[8px]",
-    "border-gray-100",
-    "pb-4",
-    "last:border-transparent",
-]);
-const cvaTimelineDot = cvaMerge(["flex", "space-x-4", "items-start", "ml-[calc(-50%-8px)]"]);
-
-/**
- * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
- * - with an indicator (dot)
- * - a header (next to the dot)
- * - and a body.
- *
- * @param {TimelineProps} props - The props for the Timeline component
- * @returns {JSX.Element} Timeline component
- */
-const Timeline = ({ className, dataTestId, children }) => {
-    return (jsx("ol", { className: cvaTimeline({ className }), "data-testid": dataTestId, children: children }));
-};
-/**
- * TimelineElement - entry on a timeline - rendered with an icon on the timeline
- * - a date as the header and the children provided as body.
- *
- * @param {TimeLineElementProps} props the props
- * @returns {JSX.Element} component
- */
-const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", dot = jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsx(Icon, { name: "Calendar", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
-    return (jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId ? `${dataTestId}` : null, onClick: () => onClick && onClick(), children: [jsx("div", { className: cvaTimelineDot(), children: dot }), jsx("div", { className: "text-secondary-500 text-sm", children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] }));
-};
-function defaultHeader(date, showTime) {
-    return `${formattedDate(date, showTime)} (${timeSinceAuto(date, new Date())})`;
-}
-const formattedDate = (date, showTime) => {
-    return formatDateUtil(date, {
-        dateFormat: "medium",
-        timeFormat: "short",
-        selectFormat: !showTime ? "dateOnly" : undefined,
-    });
-};
-
 const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
 const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {
     variants: {
@@ -4994,4 +4799,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, ToggleItem, 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, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, ToggleItem, 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, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.5.28",
+  "version": "0.5.30",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,14 +10,12 @@
     "@trackunit/ui-design-tokens": "*",
     "@radix-ui/react-slot": "^1.0.2",
     "react": "18.3.1",
-    "@trackunit/date-and-time-utils": "*",
     "@trackunit/css-class-variance-utilities": "*",
     "usehooks-ts": "^3.1.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@trackunit/ui-icons": "*",
     "@trackunit/shared-utils": "*",
     "react-helmet-async": "^1.3.0",
-    "zod": "3.22.4",
     "lodash": "4.17.21",
     "jest-fetch-mock": "^3.0.3",
     "@testing-library/react": "15.0.6",

package/src/components/index.d.ts

@@ -35,7 +35,6 @@ export * from "./Tabs/TabList";
 export * from "./Tabs/Tabs";
 export * from "./Tag";
 export * from "./Text";
-export * from "./Timeline/Timeline";
 export * from "./ToggleGroup/ToggleGroup";
 export * from "./Tooltip";
 export * from "./ValueBar";

package/src/hooks/index.d.ts

@@ -1,6 +1,3 @@
-export * from "./localStorage/setLocalStorage";
-export * from "./localStorage/useLocalStorage";
-export * from "./localStorage/useLocalStorageReducer";
 export * from "./useClickOutside";
 export * from "./useContainerBreakpoints";
 export * from "./useContinuousTimeout";
@@ -12,7 +9,6 @@ export * from "./useIsFirstRender";
 export * from "./useIsFullScreen";
 export * from "./useIsTextCutOff";
 export * from "./useOptionallyElevatedState";
-export * from "./usePrevious";
 export * from "./useResize";
 export * from "./useScrollDetection";
 export * from "./useSelfUpdatingRef";

package/src/components/Timeline/Timeline.d.ts

@@ -1,31 +0,0 @@
-import { CommonProps } from "../../common/CommonProps";
-export interface TimelineProps extends CommonProps {
-    children: React.ReactNode;
-}
-/**
- * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
- * - with an indicator (dot)
- * - a header (next to the dot)
- * - and a body.
- *
- * @param {TimelineProps} props - The props for the Timeline component
- * @returns {JSX.Element} Timeline component
- */
-export declare const Timeline: ({ className, dataTestId, children }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
-interface TimeLineElementProps extends CommonProps {
-    date: Date;
-    showTime?: boolean;
-    header?: React.ReactNode;
-    children: React.ReactNode;
-    dot?: React.ReactNode;
-    onClick?: () => void;
-}
-/**
- * TimelineElement - entry on a timeline - rendered with an icon on the timeline
- * - a date as the header and the children provided as body.
- *
- * @param {TimeLineElementProps} props the props
- * @returns {JSX.Element} component
- */
-export declare const TimelineElement: ({ date, showTime, children, className, dataTestId, dot, header, onClick, }: TimeLineElementProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/Timeline/Timeline.variants.d.ts

@@ -1,3 +0,0 @@
-export declare const cvaTimeline: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTimelineElement: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTimelineDot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/hooks/localStorage/initLocalStorageState.d.ts

@@ -1,9 +0,0 @@
-import { LocalStorageParams } from "./types";
-/**
- * Initializes the state from local storage, parsing and validating it if a Zod schema is provided.
- *
- * @template TState - The type of the state stored in local storage.
- * @param {Omit<LocalStorageParams<TState>, "state">} params - The parameters for initializing the local storage state.
- * @returns {TState} - The initialized state.
- */
-export declare const initLocalStorageState: <TState>({ key, defaultState, schema, }: Omit<LocalStorageParams<TState>, "state">) => any;

package/src/hooks/localStorage/setLocalStorage.d.ts

@@ -1,11 +0,0 @@
-/**
- * Sets a value in the local storage with the specified key.
- * Thin wrapper around localStorage.setItem() that is slightly more type safe
- * Stringifies value automatically.
- * Useful if you for some reason can't use the useLocalStorage hook for React lifecycle reasons
- *
- * @template TValue - The type of value to be stored.
- * @param {string} key - The key under which to store the value.
- * @param {TValue} value - The value to store in the local storage.
- */
-export declare const setLocalStorage: <TValue>(key: string, value: TValue) => void;

package/src/hooks/localStorage/types.d.ts

@@ -1,27 +0,0 @@
-import { z } from "zod";
-export interface LocalStorageParams<TState> {
-    /**
-     * The key used to store the value in local storage.
-     */
-    key: string;
-    /**
-     * The default state value.
-     */
-    defaultState: TState;
-    /**
-     * Optional schema for validating the state.
-     */
-    schema?: z.Schema<TState>;
-}
-export interface LocalStorageCallbacks<TState> {
-    /**
-     * Optional callback function called when validation fails.
-     *
-     * @param error - The validation error object.
-     */
-    onValidationFailed?: (error: unknown) => void;
-    /**
-     * Optional callback function called when validation succeeds.
-     */
-    onValidationSuccessful?: (data: TState) => void;
-}

package/src/hooks/localStorage/useLocalStorage.d.ts

@@ -1,10 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-import { LocalStorageCallbacks, LocalStorageParams } from "./types";
-/**
- * Works like a normal useState, but saves to local storage and has optional schema validation.
- *
- * @template TState - The type of the value stored in local storage.
- * @param {Omit<LocalStorageParams<TState>, "state"> & LocalStorageCallbacks} options - The options for useLocalStorage.
- * @returns {[TState, Dispatch<SetStateAction<TState>>, () => void]} - A tuple containing the current value, a function to update the value, and a function to remove the value from local storage.
- */
-export declare const useLocalStorage: <TState>({ key, defaultState, schema, onValidationFailed, onValidationSuccessful, }: LocalStorageParams<TState> & LocalStorageCallbacks<TState>) => readonly [TState, Dispatch<SetStateAction<TState>>, () => void];

package/src/hooks/localStorage/useLocalStorageEffect.d.ts

@@ -1,11 +0,0 @@
-import { LocalStorageCallbacks, LocalStorageParams } from "./types";
-/**
- * Custom hook for synchronizing a state variable with local storage,
- * with optional schema validation and callbacks.
- *
- * @template TState - The type of the state variable.
- * @param {LocalStorageParams<TState> & LocalStorageCallbacks & { state: TState }} params - The parameters for the useLocalStorageEffect hook.
- */
-export declare const useLocalStorageEffect: <TState>({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }: LocalStorageParams<TState> & LocalStorageCallbacks<TState> & {
-    state: TState;
-}) => void;

package/src/hooks/localStorage/useLocalStorageReducer.d.ts

@@ -1,13 +0,0 @@
-import { Dispatch } from "react";
-import { LocalStorageCallbacks, LocalStorageParams } from "./types";
-/**
- * Works like a normal useReducer, but saves to local storage and has optional schema validation.
- *
- * @template TState - The type of the state.
- * @template TAction - The type of the action.
- * @param {LocalStorageParams<TState> & LocalStorageCallbacks} params - The parameters for the useLocalStorageReducer function.
- * @returns {[TState, Dispatch<TAction>]} - A tuple containing the state and the dispatch function.
- */
-export declare const useLocalStorageReducer: <TState, TAction>({ key, defaultState, reducer, schema, onValidationFailed, onValidationSuccessful, }: {
-    reducer: (state: TState, action: TAction) => TState;
-} & LocalStorageParams<TState> & LocalStorageCallbacks<TState>) => readonly [TState, Dispatch<TAction>];

package/src/hooks/localStorage/validateState.d.ts

@@ -1,13 +0,0 @@
-import { LocalStorageCallbacks, LocalStorageParams } from "./types";
-type ValidateStateOptions<TState> = Required<Pick<LocalStorageParams<TState>, "schema">> & {
-    state: TState;
-    defaultState: TState;
-} & LocalStorageCallbacks<TState>;
-/**
- * Validates the state object using a Zod schema.
- *
- * @template TState - The type of the state.
- * @param {ValidateStateOptions<TState>} params - The parameters for the validateState function.
- */
-export declare const validateState: <TState>({ state, schema, onValidationFailed, onValidationSuccessful, defaultState, }: ValidateStateOptions<TState>) => TState;
-export {};

package/src/hooks/usePrevious.d.ts

@@ -1,8 +0,0 @@
-/**
- * The usePrevious hook is a useful tool for tracking the previous value of a variable in a functional component. This can be particularly handy in scenarios where it is necessary to compare the current value with the previous one, such as triggering actions or rendering based on changes.
- *
- * @example
- * const [color, setColor] = React.useState(getRandomColor());
-  const previousColor = usePrevious(color);
- */
-export declare const usePrevious: <TValue>(value: TValue) => TValue | undefined;