@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/shared/utils/price.js

@@ -0,0 +1,79 @@
+function parseCurrency({ currencyCode, locale, price, useGrouping = true, }) {
+    const formatter = new Intl.NumberFormat(locale, {
+        currency: currencyCode,
+        currencyDisplay: 'narrowSymbol',
+        style: 'currency',
+        useGrouping,
+    });
+    const parts = formatter.formatToParts(price);
+    const namedParts = parts.reduce((result, part) => {
+        if (part.type === 'literal')
+            return result;
+        if (part.type === 'integer')
+            return { ...result, integers: [...(result.integers || []), part.value] };
+        if (result[part.type] !== part.value && result[part.type] !== undefined)
+            throw new Error(`Duplicate part type: ${part.type}`);
+        return { ...result, [part.type]: part.value };
+    }, {});
+    return {
+        ...namedParts,
+        integer: namedParts.integers?.join(namedParts.group),
+        parts,
+        symbolPosition: parts.findIndex(part => part.type === 'currency') === parts.length - 1
+            ? 'after'
+            : 'before',
+    };
+}
+function formatCurrency({ currencyCode, locale, price, replaceNonBreakingSpace = false, useGrouping = true, }) {
+    const formatter = new Intl.NumberFormat(locale, {
+        currency: currencyCode,
+        currencyDisplay: 'narrowSymbol',
+        style: 'currency',
+        useGrouping,
+    });
+    const string = formatter.format(price);
+    const normalized = replaceNonBreakingSpace
+        ? string.replaceAll(new RegExp('\u00A0', 'g'), ' ')
+        : string;
+    return normalized;
+}
+const countryCodeToCurrencyCode = {
+    AR: 'ARS',
+    AU: 'AUD',
+    BR: 'BRL',
+    CA: 'CAD',
+    CH: 'CHF',
+    CN: 'CNY',
+    CZ: 'CZK',
+    DK: 'DKK',
+    GB: 'GBP',
+    HK: 'HKD',
+    HR: 'HRK',
+    HU: 'HUN',
+    ID: 'IDR',
+    IN: 'INR',
+    JP: 'JPY',
+    KR: 'KRW',
+    LA: 'LAK',
+    MG: 'MGA',
+    MX: 'MXN',
+    MY: 'MYR',
+    NO: 'NOK',
+    NZ: 'NZD',
+    PH: 'PHP',
+    PL: 'PLN',
+    RO: 'RON',
+    RS: 'RSD',
+    RU: 'RUB',
+    SE: 'SEK',
+    SG: 'SGD',
+    SK: 'SKK',
+    TH: 'THB',
+    TW: 'TWD',
+    US: 'USD',
+    VN: 'VND',
+    default: 'EUR',
+};
+const getCurrencyByCountryCode = (countryCode) => countryCodeToCurrencyCode[countryCode] || countryCodeToCurrencyCode.default;
+
+export { formatCurrency, getCurrencyByCountryCode, parseCurrency };

package/dist/shared/utils/promise.d.ts

@@ -0,0 +1,2 @@
+export declare function wait(ms: number): Promise<unknown>;
+export declare function isPromise<T>(value: any): value is Promise<T>;

package/dist/shared/utils/promise.js

@@ -0,0 +1,9 @@
+function wait(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isPromise(value) {
+    return value && typeof value.then === 'function';
+}
+
+export { isPromise, wait };

package/dist/shared/utils/query-client.d.ts

@@ -0,0 +1,4 @@
+import { QueryClient } from '@tanstack/react-query';
+export declare function createQueryClient({ throwOnError, }?: {
+    throwOnError?: (error: unknown) => boolean;
+}): QueryClient;

package/dist/shared/utils/query-client.js

@@ -0,0 +1,33 @@
+import { QueryClient } from '@tanstack/react-query';
+import { TIME } from './time.js';
+
+/* Example of how to handle specific errors globally
+ * an have react query re-throw them to be caught by an error boundary
+
+  throwOnError: _error => {
+      return (
+        error instanceof UnauthorizedRequestError ||
+        error instanceof ForbiddenRequestError
+      )
+  },
+
+*/
+function createQueryClient({ throwOnError, } = {}) {
+    return new QueryClient({
+        defaultOptions: {
+            mutations: {
+                retry: false,
+                throwOnError,
+            },
+            queries: {
+                /* Set gcTime and staleTime to 0 to disable react query cache */
+                gcTime: 1 * TIME.DAY,
+                retry: false,
+                staleTime: 1 * TIME.DAY,
+                throwOnError,
+            },
+        },
+    });
+}
+
+export { createQueryClient };

package/dist/shared/utils/random.d.ts

@@ -0,0 +1,10 @@
+export declare function random<T>(array: T[]): T;
+export declare function random<T>(array: T[] | ({
+    length: 0;
+} & never[])): T | undefined;
+export declare function random(max: number): number;
+export declare function random(min: number, max: number): number;
+export declare function random(minMax: number, max?: number): number;
+export declare function randomInt(max: number): number;
+export declare function randomInt(min: number, max: number): number;
+export declare function randomInt(minMax: number, max?: number): number;

package/dist/shared/utils/random.js

@@ -0,0 +1,16 @@
+function random(minMaxArray, max) {
+    if (Array.isArray(minMaxArray)) {
+        const randomEntry = minMaxArray[randomInt(minMaxArray.length)];
+        if (!randomEntry)
+            throw new Error('Array is empty');
+        return randomEntry;
+    }
+    const _min = max === undefined ? 0 : minMaxArray;
+    const _max = max === undefined ? minMaxArray : max;
+    return Math.random() * (_max - _min) + _min;
+}
+function randomInt(minMax, max) {
+    return Math.floor(random(minMax, max));
+}
+
+export { random, randomInt };

package/dist/shared/utils/refs.d.ts

@@ -0,0 +1,2 @@
+import { ForwardedRef, LegacyRef, MutableRefObject } from 'react';
+export declare function multiRef<T extends HTMLElement>(...refs: (ForwardedRef<T> | MutableRefObject<T | undefined>)[]): LegacyRef<T>;

package/dist/shared/utils/refs.js

@@ -0,0 +1,14 @@
+function multiRef(...refs) {
+    return function (el) {
+        for (const ref of refs) {
+            if (ref && ref instanceof Function) {
+                ref(el);
+            }
+            else if (ref) {
+                ref.current = el;
+            }
+        }
+    };
+}
+
+export { multiRef };

package/dist/shared/{hooks/use-scroll-to.d.ts → utils/scrolling.d.ts}

@@ -4,5 +4,5 @@ interface ScrollOptions {
     scrollPadding?: number;
 }
 export declare const scrollToTop: (scrollOptions?: ScrollToOptions) => void;
-export declare const useScrollTo: (ref: RefObject<HTMLElement>, scrollOptions?: ScrollOptions) => () => void;
+export declare const scrollIntoViewRef: (ref: RefObject<HTMLElement>, scrollOptions?: ScrollOptions) => void;
 export {};

package/dist/shared/utils/scrolling.js

@@ -0,0 +1,16 @@
+const scrollToTop = (scrollOptions) => {
+    window?.scrollTo({
+        behavior: scrollOptions?.behavior || 'smooth',
+        top: 0,
+    });
+};
+const scrollIntoViewRef = (ref, scrollOptions) => {
+    if (!ref.current)
+        return;
+    ref.current.scrollIntoView({
+        behavior: scrollOptions?.behavior || 'smooth',
+    });
+    // Use CSS scroll-margin-block to control scrolling offset
+};
+
+export { scrollIntoViewRef, scrollToTop };

package/dist/shared/utils/string.d.ts

@@ -0,0 +1 @@
+export declare function camelCase(string: string): string;

package/dist/shared/utils/string.js

@@ -0,0 +1,7 @@
+function camelCase(string) {
+    return string.replaceAll(/^([A-Z]+)([ ./a-z].*)$/g, (_, p, rest) => {
+        return p.toLocaleLowerCase() + rest;
+    });
+}
+
+export { camelCase };

package/dist/shared/utils/time.js

@@ -0,0 +1,9 @@
+var TIME;
+(function (TIME) {
+    TIME[TIME["SECOND"] = 1000] = "SECOND";
+    TIME[TIME["MINUTE"] = 60000] = "MINUTE";
+    TIME[TIME["HOUR"] = 3600000] = "HOUR";
+    TIME[TIME["DAY"] = 86400000] = "DAY";
+})(TIME || (TIME = {}));
+
+export { TIME };

package/dist/shared/utils/types.d.ts

@@ -0,0 +1,4 @@
+export type NoValue = null | undefined | '';
+export declare function has<T>(obj: T | undefined): obj is Exclude<T, NoValue>;
+export declare function hasNo<T>(obj: T | NoValue): obj is NoValue;
+export declare function isObject(item: unknown): item is object;

package/dist/shared/utils/types.js

@@ -0,0 +1,11 @@
+function has(obj) {
+    return obj !== undefined && obj !== null && obj !== '';
+}
+function hasNo(obj) {
+    return obj === undefined || obj === null || obj === '';
+}
+function isObject(item) {
+    return Boolean(item) && typeof item === 'object';
+}
+
+export { has, hasNo, isObject };

package/dist/shared/utils/url.d.ts

@@ -0,0 +1,5 @@
+export declare function join(..._paths: string[]): string;
+declare const _default: {
+    join: typeof join;
+};
+export default _default;

package/dist/shared/utils/url.js

@@ -0,0 +1,20 @@
+function join(..._paths) {
+    const paths = _paths.map(path => path.trim()).filter(Boolean);
+    let result = '';
+    for (const path of paths) {
+        if (result) {
+            result += `${result.endsWith('/') ? '' : '/'}${path.replaceAll(/^\/+|\/+$/g, '')}`;
+        }
+        else {
+            result =
+                path.length > 1 && path.endsWith('/')
+                    ? path.replaceAll(/\/+$/g, '')
+                    : path;
+        }
+    }
+    if (paths.at(-1)?.endsWith('/') && !result.endsWith('/'))
+        result += '/';
+    return result;
+}
+
+export { join };

package/dist/shared/utils/url.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/utils/uuid.d.ts

@@ -1,7 +1,9 @@
+export type UUID = `${string}-${string}-4${string}-${string}-${string}`;
 /**
  * Create UUID according to
  * https://www.ietf.org/rfc/rfc4122.txt.
  *
  * @returns Generated UUID.
  */
-export declare function createUUID(): string;
+export declare function createUUID(): UUID;
+export declare function isUUID(value: string): value is UUID;

package/dist/shared/utils/uuid.js

@@ -0,0 +1,18 @@
+/**
+ * Create UUID according to
+ * https://www.ietf.org/rfc/rfc4122.txt.
+ *
+ * @returns Generated UUID.
+ */
+function createUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replaceAll(/[xy]/g, c => {
+        const r = Math.trunc(Math.random() * 16);
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+function isUUID(value) {
+    return /^[\da-f]{8}(?:-[\da-f]{4}){2}-[89ab][\da-f]{3}-[\da-f]{12}$/.test(value);
+}
+
+export { createUUID, isUUID };

package/dist/sidebar/sidebar-provider.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import clsx from 'clsx';
+import { BackgroundOverlay } from '../background-overlay/background-overlay.js';
+import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
+import { useGlobalState } from '../shared/providers/global-state-provider.js';
+import { useSidebar } from './use-sidebar.js';
+import styles from './sidebar-provider.module.css.js';
+
+function SidebarDetectBreakpoint() {
+    const xxl = useIsBreakpoint('xxl');
+    const [{ transition }, setState] = useGlobalState('sidebar-state', { isDocked: !xxl, isOpen: xxl, transition: false });
+    useEffect(() => {
+        setState(state => {
+            const isDocked = !xxl;
+            const didDockChange = state.isDocked !== isDocked;
+            const isOpen = didDockChange ? !isDocked : state.isOpen;
+            return {
+                ...state,
+                isDocked,
+                isOpen,
+                transition: !didDockChange,
+            };
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [xxl]);
+    useEffect(() => {
+        if (transition)
+            return;
+        const timeoutId = setTimeout(() => setState(state => ({ ...state, transition: true })), 10);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [transition]);
+    return null;
+}
+function SidebarProvider({ children }) {
+    const state = useSidebar();
+    const { close, isDocked, isOpen, transition } = state;
+    return (jsxs("div", { className: clsx(styles['sidebar-container'], {
+            [styles['transition']]: transition,
+        }), children: [jsx(SidebarDetectBreakpoint, {}), children, jsx(BackgroundOverlay, { isOpen: isDocked && isOpen, onClick: close })] }));
+}
+
+export { SidebarDetectBreakpoint, SidebarProvider };

package/dist/sidebar/sidebar-provider.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR"};
+
+export { styles as default };

package/dist/sidebar/sidebar.d.ts

@@ -1,4 +1,5 @@
 export interface SidebarProps {
     children: React.ReactNode;
+    className?: string;
 }
-export declare function Sidebar({ children }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ children, className }: SidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/sidebar/sidebar.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IconButton } from '../buttons/icon-button/icon-button.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useInert } from '../shared/hooks/use-inert.js';
+import { useSidebar } from './use-sidebar.js';
+import styles from './sidebar.module.css.js';
+
+function Sidebar({ children, className }) {
+    const t = useFormattedMessage();
+    const { isDocked, isOpen, toggle, transition } = useSidebar();
+    const { ref: sidebarRef } = useInert(isOpen);
+    return (jsxs("aside", { ref: sidebarRef, "aria-hidden": !isOpen.toString(), className: clsx(styles.sidebar, {
+            [styles['transition']]: transition,
+            [styles['is-open']]: isOpen,
+            [styles['is-closed']]: !isOpen,
+            [styles['is-docked']]: isDocked,
+            [styles['is-not-docked']]: !isDocked,
+        }, className), children: [jsx(IconButton, { className: styles.close, icon: "Close", label: t('Close'), onClick: toggle, size: "lg", theme: "secondary" }), jsx("div", { className: styles['content'], children: children })] }));
+}
+
+export { Sidebar };

package/dist/sidebar/sidebar.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"sidebar":"sidebar-module-fSa9Q","is-docked":"sidebar-module-AIq0M","transition":"sidebar-module-LEZgg","is-open":"sidebar-module-lV7wp","is-closed":"sidebar-module-dGDrr","close":"sidebar-module-2puGC","content":"sidebar-module-83z7V","is-not-docked":"sidebar-module-Scw7D"};
+
+export { styles as default };

package/dist/sidebar/toggle-sidebar-button.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../buttons/button/button.js';
+import { Icon } from '../icon/icon.js';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import { useSidebar } from './use-sidebar.js';
+
+const ToggleSidebarButton = () => {
+    const { isOpen, toggle } = useSidebar();
+    return (jsx(Button, { light: true, color: "secondary", icon: jsx(Icon, { name: "Filter", size: "sm" }), onClick: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
+};
+
+export { ToggleSidebarButton };

package/dist/sidebar/use-sidebar.js

@@ -0,0 +1,39 @@
+"use client";
+import { useCallback } from 'react';
+import { voidFunction } from '../shared/model/defaults.js';
+import { useGlobalState } from '../shared/providers/global-state-provider.js';
+import { getCurrentBreakpoints } from '../shared/utils/breakpoints.js';
+
+const useSidebar = () => {
+    const isDocked = !getCurrentBreakpoints().xxl;
+    const [state, setState] = useGlobalState('sidebar-state', {
+        isDocked,
+        isOpen: !isDocked,
+        transition: false,
+    });
+    const close = useCallback(() => {
+        setState(state => ({ ...state, isOpen: false }));
+    }, [setState]);
+    const open = useCallback(() => {
+        setState(state => ({ ...state, isOpen: true }));
+    }, [setState]);
+    const toggle = useCallback(() => {
+        setState(state => ({ ...state, isOpen: !state.isOpen }));
+    }, [setState]);
+    useGlobalState('sidebar-actions', {
+        close,
+        open,
+        toggle,
+    });
+    return { ...state, close, open, toggle };
+};
+const useSidebarActions = () => {
+    const [actions] = useGlobalState('sidebar-actions', {
+        close: voidFunction,
+        open: voidFunction,
+        toggle: voidFunction,
+    });
+    return actions;
+};
+
+export { useSidebar, useSidebarActions };