@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/shared/utils/local-storage.js

@@ -0,0 +1,108 @@
+"use strict";
+/* eslint-disable no-prototype-builtins */
+/** Mocks the localStorage and sessionStorage API in Node.js
+ * @see https://gitlab.com/kaictl/node/mock-local-storage */
+const HAS_LOCAL_STORAGE_SUPPORT = typeof localStorage !== 'undefined';
+function mockStorage() {
+    if (HAS_LOCAL_STORAGE_SUPPORT)
+        return;
+    // const global = require('global')
+    // const window = require('global/window')
+    let win;
+    if (typeof global !== 'undefined') {
+        win = global;
+    }
+    else if (typeof self === 'undefined') {
+        win = {};
+    }
+    else {
+        win = self;
+    }
+    Object.defineProperty(global, 'Storage', {
+        value: createStorage,
+    });
+    Object.defineProperty(win, 'Storage', {
+        value: createStorage,
+    });
+    Object.defineProperty(global, 'localStorage', {
+        value: createStorage(),
+    });
+    Object.defineProperty(win, 'localStorage', {
+        value: global.localStorage,
+    });
+    Object.defineProperty(global, 'sessionStorage', {
+        value: createStorage(),
+    });
+    Object.defineProperty(win, 'sessionStorage', {
+        value: global.sessionStorage,
+    });
+}
+const noopCallback = () => { };
+function createStorage() {
+    const UNSET = Symbol();
+    const s = {};
+    let _itemInsertionCallback = noopCallback;
+    Object.defineProperty(s, 'setItem', {
+        get: () => {
+            return (k, v = UNSET) => {
+                if (v === UNSET) {
+                    throw new TypeError(`Failed to execute 'setItem' on 'Storage': 2 arguments required, but only 1 present.`);
+                }
+                if (!s.hasOwnProperty(String(k))) {
+                    _itemInsertionCallback();
+                }
+                s[String(k)] = String(v);
+            };
+        },
+    });
+    Object.defineProperty(s, 'getItem', {
+        get: () => {
+            return k => {
+                return s.hasOwnProperty(String(k)) ? s[String(k)] : null;
+            };
+        },
+    });
+    Object.defineProperty(s, 'removeItem', {
+        get: () => {
+            return k => {
+                if (s.hasOwnProperty(String(k))) {
+                    delete s[String(k)];
+                }
+            };
+        },
+    });
+    Object.defineProperty(s, 'clear', {
+        get: () => {
+            return () => {
+                for (const k in s) {
+                    delete s[String(k)];
+                }
+            };
+        },
+    });
+    Object.defineProperty(s, 'length', {
+        get: () => {
+            return Object.keys(s).length;
+        },
+    });
+    Object.defineProperty(s, 'key', {
+        value: k => {
+            const key = Object.keys(s)[String(k)];
+            return key ?? null;
+        },
+    });
+    Object.defineProperty(s, 'itemInsertionCallback', {
+        get: () => {
+            return _itemInsertionCallback;
+        },
+        set: v => {
+            if (!v || typeof v != 'function') {
+                v = noopCallback;
+            }
+            _itemInsertionCallback = v;
+        },
+    });
+    return s;
+}
+// Mock localStorage
+mockStorage();

package/dist/shared/utils/merge.js

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function main(...items) {
+    return merge(...items);
+}
+main.clone = clone;
+main.isPlainObject = isPlainObject;
+main.deepMerge = deepMerge;
+function merge(...items) {
+    return _merge(true, false, items);
+}
+function deepMerge(...items) {
+    return _merge(true, true, items);
+}
+function clone(input) {
+    if (Array.isArray(input)) {
+        const output = [];
+        for (let index = 0; index < input.length; ++index)
+            output.push(clone(input[index]));
+        return output;
+    }
+    else if (isPlainObject(input)) {
+        const output = {};
+        for (const index in input)
+            output[index] = clone(input[index]);
+        return output;
+    }
+    else {
+        return input;
+    }
+}
+function isPlainObject(input) {
+    if (input === null || typeof input !== 'object')
+        return false;
+    if (Object.getPrototypeOf(input) === null)
+        return true;
+    let ref = input;
+    while (Object.getPrototypeOf(ref) !== null)
+        ref = Object.getPrototypeOf(ref);
+    return Object.getPrototypeOf(input) === ref;
+}
+function _recursiveMerge(base, extend) {
+    if (!isPlainObject(base) || !isPlainObject(extend))
+        return extend;
+    for (const key in extend) {
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype')
+            continue;
+        base[key] =
+            isPlainObject(base[key]) && isPlainObject(extend[key])
+                ? _recursiveMerge(base[key], extend[key])
+                : extend[key];
+    }
+    return base;
+}
+function _merge(isClone, isRecursive, items) {
+    let result;
+    result = {};
+    for (const item of items) {
+        if (!isPlainObject(item))
+            continue;
+        for (const key in item) {
+            if (key === '__proto__' || key === 'constructor' || key === 'prototype')
+                continue;
+            const value = clone(item[key]) ;
+            result[key] = isRecursive ? _recursiveMerge(result[key], value) : value;
+        }
+    }
+    return result;
+}
+
+export { clone, deepMerge, main as default, isPlainObject, main, merge };

package/dist/shared/utils/price.js

@@ -0,0 +1,6 @@
+const formatPrice = (price) => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+}).format(price);
+
+export { formatPrice };

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/uuid.js

@@ -0,0 +1,15 @@
+/**
+ * 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);
+    });
+}
+
+export { createUUID };

package/dist/shared/utils/wait.js

@@ -0,0 +1,5 @@
+function wait(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export { wait };

package/dist/sidebar/sidebar-provider.js

@@ -0,0 +1,46 @@
+"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;
+        setTimeout(() => setState(state => ({ ...state, transition: true })), 10);
+        // 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,
+            [styles['docked']]: isDocked,
+            [styles['open']]: isOpen,
+        }), children: [jsx(SidebarDetectBreakpoint, {}), children, isDocked && isOpen && (jsx(BackgroundOverlay, { isOpen: isOpen, onClose: 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.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IconButton } from '../buttons/icon-button/icon-button.js';
+import { StrokeCloseboxIcon } from '../icons/stroke/stroke-closebox-icon.js';
+import { useSidebar } from './use-sidebar.js';
+import styles from './sidebar.module.css.js';
+
+function InnerSidebar({ children }) {
+    const { isDocked, isOpen, toggle, transition } = useSidebar();
+    return (jsxs("aside", { className: clsx(styles.sidebar, {
+            [styles['transition']]: transition,
+            [styles['is-open']]: isOpen,
+            [styles['is-closed']]: !isOpen,
+            [styles['is-docked']]: isDocked,
+            [styles['is-not-docked']]: !isDocked,
+        }), children: [jsx("div", { className: styles.close, children: jsx(IconButton, { color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }) }), children] }));
+}
+function Sidebar({ children }) {
+    return jsx(InnerSidebar, { 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","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 { StrokeFilterIcon } from '../icons/stroke/stroke-filter-icon.js';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import { useSidebar } from './use-sidebar.js';
+
+const ToggleSidebarButton = () => {
+    const { isOpen, toggle } = useSidebar();
+    return (jsx(Button, { color: "secondary", icon: jsx(StrokeFilterIcon, {}), 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,38 @@
+"use client";
+import { useCallback } from 'react';
+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: () => { },
+        open: () => { },
+        toggle: () => { },
+    });
+    return actions;
+};
+
+export { useSidebar, useSidebarActions };

package/dist/styles.css

@@ -241,16 +241,9 @@
   --zoom-image-layer: 2100;
 }
 :root {
-  --header-height-desktop: 96px;
-  --header-height-mobile: 54px;
   --search-input-height: 76px;
   --announcement-bar-height: 52px;
-  --header-height: var(--header-height-mobile);
-}
-@media (width >= 1024px) {
-  :root {
-    --header-height: var(--header-height-desktop);
-  }
+  --header-height: 0px;
 }
 
 /* stylelint-disable no-descending-specificity */
@@ -4048,9 +4041,7 @@ button.swiper-pagination-bullet {
   left: 0;
   overflow: auto;
   width: 100%;
-  height: calc(
-    100dvh - var(--header-height-mobile) - var(--search-input-height)
-  );
+  height: calc(100dvh - var(--header-height) - var(--search-input-height));
   box-sizing: border-box;
   background-color: var(--color-white);
   box-shadow: var(--box-shadow-heavy);
@@ -4180,8 +4171,6 @@ button.swiper-pagination-bullet {
       }
 
 .blank-page-spacer-module-lXxle {
-  --header-height: var(--header-height-mobile);
-
   display: grid;
   width: 100%;
   height: calc(100dvh - var(--header-height));
@@ -4617,7 +4606,7 @@ button.swiper-pagination-bullet {
   .checkout-page-layout-module-54Qta .checkout-page-layout-module---Bqj {
     position: fixed;
     z-index: 5;
-    top: 0;
+    top: var(--header-height);
     left: 0;
     width: 100%;
     box-sizing: border-box;
@@ -5851,7 +5840,7 @@ button.swiper-pagination-bullet {
   }
 }
 .toast-provider-module-EoPKW {
-  top: calc(var(--header-height-mobile) + var(--space-12));
+  top: calc(var(--header-height) + var(--space-12));
   right: auto;
   left: auto;
   display: flex;
@@ -5862,7 +5851,7 @@ button.swiper-pagination-bullet {
 }
 
   @media (width >= 1024px) {.toast-provider-module-EoPKW {
-    top: calc(var(--header-height-desktop) + var(--space-12));
+    top: calc(var(--header-height) + var(--space-12));
     right: var(--toastify-toast-right);
     width: -moz-fit-content;
     width: fit-content;

package/dist/toast/toast-provider.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { ToastContainer, Slide } from 'react-toastify';
+import styles from './toast-provider.module.css.js';
+
+function ToastProvider(props) {
+    return (jsx(ToastContainer, { autoClose: 3000, bodyClassName: styles.body, className: styles.container, closeButton: false, hideProgressBar: true, newestOnTop: true, toastClassName: styles.toast, transition: Slide, ...props }));
+}
+
+export { ToastProvider };

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

@@ -0,0 +1,3 @@
+var styles = {"container":"toast-provider-module-EoPKW","toast":"toast-provider-module-SeZ02","body":"toast-provider-module-BdbPL"};
+
+export { styles as default };

package/dist/toast/toast.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { IconButton } from '../buttons/icon-button/icon-button.js';
+import { SolidAttentionIcon } from '../icons/solid/solid-attention-icon.js';
+import { SolidInformationIcon } from '../icons/solid/solid-information-icon.js';
+import { SolidNoticeIcon } from '../icons/solid/solid-notice-icon.js';
+import { SolidOkayIcon } from '../icons/solid/solid-okay-icon.js';
+import { StrokeCloseboxIcon } from '../icons/stroke/stroke-closebox-icon.js';
+import styles from './toast.module.css.js';
+
+const icons = {
+    danger: jsx(SolidAttentionIcon, {}),
+    info: jsx(SolidInformationIcon, {}),
+    success: jsx(SolidOkayIcon, {}),
+    warning: jsx(SolidNoticeIcon, {}),
+};
+const Toast = forwardRef(({ className, id, onClose, toastMessage: { body, isUserDismissable, messageType = 'info' }, }, ref) => {
+    return (jsxs("div", { ref: ref, className: clsx(styles.toast, styles[messageType], className), "data-test-selector": `toast${messageType}`, children: [jsx("span", { className: styles.icon, children: icons[messageType] }), body, isUserDismissable && (jsx(IconButton, { className: styles.close, color: "secondary", onClick: () => onClose?.(id), children: jsx(StrokeCloseboxIcon, {}) }))] }));
+});
+Toast.displayName = 'Toast';
+
+export { Toast };

package/dist/toast/toast.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"toast":"toast-module-VzLw4","close":"toast-module-mAwpu","icon":"toast-module-JqNiT","success":"toast-module-cuSIT","info":"toast-module-ABLCP","warning":"toast-module-jGWiH","danger":"toast-module-t33Ra"};
+
+export { styles as default };

package/dist/toast/use-toast.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { toast } from 'react-toastify';
+import { createUUID } from '../shared/utils/uuid.js';
+import { Toast } from './toast.js';
+
+function useToast() {
+    const count = useRef(0);
+    return {
+        addToast(toastMessage, toastOptions) {
+            const id = createUUID();
+            toast(jsx(Toast, { ref: el => el && (el.style.zIndex = (count.current++).toString()), id: id, onClose: id => toast.dismiss(id), toastMessage: toastMessage }), {
+                toastId: id,
+                ...toastOptions,
+            });
+        },
+    };
+}
+
+export { useToast };

package/dist/tokens/tokens.js

@@ -0,0 +1,8 @@
+const getTokenValue = (token) => typeof document === 'undefined' || typeof getComputedStyle === 'undefined'
+    ? 'unknown'
+    : getComputedStyle(document.documentElement).getPropertyValue(token);
+const getTokenKeyValue = (token) => ({
+    [token]: getTokenValue(token),
+});
+
+export { getTokenKeyValue, getTokenValue };

package/dist/typography/heading/heading.js

@@ -0,0 +1,27 @@
+import { createElement } from 'react';
+import clsx from 'clsx';
+import styles from './heading.module.css.js';
+
+const SIZES = ['xxl', 'xl', 'l', 'm', 's', 'xs', 'xxs', 'xxxs'];
+const TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7'];
+const sizeToTag = {
+    l: 'h3',
+    m: 'h4',
+    s: 'h5',
+    xl: 'h2',
+    xs: 'h6',
+    xxl: 'h1',
+    xxs: 'h6',
+    xxxs: 'h6',
+};
+function Heading({ bold = true, children, className, italic, size = 'xxl', tag, uppercase, }) {
+    return createElement(tag || sizeToTag[size], {
+        className: clsx(className, styles.heading, styles[size], {
+            [styles.uppercase]: uppercase,
+            [styles.italic]: italic,
+            [styles.bold]: bold,
+        }),
+    }, children);
+}
+
+export { Heading, SIZES, TAGS };

package/dist/typography/heading/heading.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7","xxxs":"heading-module-qvrEk"};
+
+export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.119",
+  "version": "120.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -26,7 +26,7 @@
     "clean": "rimraf node_modules dist",
     "generate:icons": "node src/utils/icons/import-icons.js",
     "generate:icons:watch": "nodemon src/utils/icons/import-icons.js",
-    "generate:exports": "find ./src -type f | grep -e 'ts[x]*$' | grep -vE \"stories|icons|exports|test|local-storage|src/index|\\.d\\.ts$\" | sed -e \"s/\\.ts[x]*//\" | sed -e \"s/.\\/src/./\" | awk '{ print \"export * from \\\"\" $1 \"\\\"\" }' | sed -e \"s/\\\"/'/g\" | sort",
+    "generate:exports": "find ./src -type f | grep -e 'ts[x]*$' | grep -vE \"stories|icons|exports|.model.ts|test|local-storage|src/index|\\.d\\.ts$\" | sed -e \"s/\\.ts[x]*//\" | sed -e \"s/.\\/src/./\" | awk '{ print \"export * from \\\"\" $1 \"\\\"\" }' | sed -e \"s/\\\"/'/g\" | sort",
     "generate:exports:save": "echo '/* eslint-disable simple-import-sort/exports */' > src/exports.ts && pnpm run --silent generate:exports >> src/exports.ts",
     "reinstall": "pnpm clean; pnpm install && pnpm build",
     "dev": "storybook dev -p 6006",
@@ -113,6 +113,7 @@
     "rollup": "4.24.4",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "storybook": "8.4.2",
     "stylelint": "16.10.0",
     "stylelint-config-css-modules": "4.4.0",

package/dist/pages/product-listing-page/product-listing-page-provider/use-subcategories.d.ts

@@ -1,4 +0,0 @@
-export declare function useSubcatagories(): {
-    isLoading: boolean | undefined;
-    subcategories: import("../product-listing-page-data-types").CategoryType[] | undefined;
-};