@janbox/storefront-ui 1.0.13 → 1.0.15

package/dist/hooks/use-query-params.js

@@ -1,53 +1,46 @@
-import { useRef, useMemo, useCallback } from "react";
-import { isPlainObject, set, isNil } from "lodash-es";
-import { useSearchParams } from "react-router";
-import { simplifyQueryParams } from "../utils/query-params.js";
-function useQueryParams(config, defaultNavigateOpts = {}) {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const defaultNavigateOptsRef = useRef(defaultNavigateOpts);
-  defaultNavigateOptsRef.current = defaultNavigateOpts;
-  const queryParams = useMemo(() => {
-    const result = {};
-    Object.keys(config).forEach((key) => {
-      const paramConfig = config[key];
-      if (isPlainObject(paramConfig) && "parser" in paramConfig) {
-        set(result, key, paramConfig.parser(searchParams.get(key)));
-        return;
-      }
-      set(result, key, paramConfig);
-    });
-    return result;
-  }, [searchParams, config]);
-  const setQueryParams = useCallback(
-    (newParams, navigateOpts = {}) => {
-      setSearchParams(
-        (prev) => {
-          const simplifyParams = simplifyQueryParams(newParams);
-          Object.keys(newParams).forEach((key) => {
-            const value = simplifyParams[key];
-            if (isNil(value)) {
-              return prev.delete(key);
+import { useCallback, useMemo, useRef } from 'react';
+import { isNil, isPlainObject, set } from 'lodash-es';
+import { useSearchParams } from 'react-router';
+import { simplifyQueryParams } from '../utils/query-params';
+/**
+ * Hook để lấy và parse query parameters từ URL
+ * @param config Cấu hình cho việc transform và giá trị mặc định
+ * @returns [queryParams, setQueryParams] - Tuple chứa giá trị parsed và hàm update
+ */
+export function useQueryParams(config, defaultNavigateOpts = {}) {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const defaultNavigateOptsRef = useRef(defaultNavigateOpts);
+    defaultNavigateOptsRef.current = defaultNavigateOpts;
+    const queryParams = useMemo(() => {
+        const result = {};
+        Object.keys(config).forEach((key) => {
+            const paramConfig = config[key];
+            if (isPlainObject(paramConfig) && 'parser' in paramConfig) {
+                set(result, key, paramConfig.parser(searchParams.get(key)));
+                return;
             }
-            return prev.set(key, value);
-          });
-          return prev;
-        },
-        {
-          ...defaultNavigateOptsRef.current,
-          ...navigateOpts
-        }
-      );
-    },
-    [setSearchParams]
-  );
-  return useMemo(
-    () => ({
-      queryParams,
-      setQueryParams
-    }),
-    [queryParams, setQueryParams]
-  );
+            set(result, key, paramConfig);
+        });
+        return result;
+    }, [searchParams, config]);
+    const setQueryParams = useCallback((newParams, navigateOpts = {}) => {
+        setSearchParams((prev) => {
+            const simplifyParams = simplifyQueryParams(newParams);
+            Object.keys(newParams).forEach((key) => {
+                const value = simplifyParams[key];
+                if (isNil(value)) {
+                    return prev.delete(key);
+                }
+                return prev.set(key, value);
+            });
+            return prev;
+        }, {
+            ...defaultNavigateOptsRef.current,
+            ...navigateOpts,
+        });
+    }, [setSearchParams]);
+    return useMemo(() => ({
+        queryParams,
+        setQueryParams,
+    }), [queryParams, setQueryParams]);
 }
-export {
-  useQueryParams
-};

package/dist/hooks/use-ripple-effect/index.d.ts

@@ -30,4 +30,3 @@ export declare const useRippleEffect: (ref: RefObject<HTMLElement | null>, { ena
     className: string;
 };
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-ripple-effect/index.js

@@ -1,69 +1,52 @@
-import { useCallback, useEffect, useMemo } from "react";
-import classes from "./use-ripple-effect.module.scss.js";
-const useRippleEffect = (ref, {
-  enabled = true,
-  color = "currentColor",
-  duration = 400,
-  opacity = 0.2,
-  sizeMultiplier = 1
-} = {}) => {
-  const createRippleCircle = useCallback(
-    (event) => {
-      const { currentTarget, clientX, clientY } = event;
-      const { clientHeight, clientWidth } = currentTarget;
-      const { left: offsetLeft, top: offsetTop } = currentTarget.getBoundingClientRect();
-      const circleLeft = clientX - offsetLeft;
-      const circleTop = clientY - offsetTop;
-      const circleRight = offsetLeft + clientWidth - clientX;
-      const circleBottom = offsetTop + clientHeight - clientY;
-      const radius = Math.max(circleLeft, circleTop, circleRight, circleBottom) * sizeMultiplier;
-      const circle = document.createElement("div");
-      circle.style.width = circle.style.height = `${radius * 2}px`;
-      circle.style.left = `${circleLeft - radius}px`;
-      circle.style.top = `${circleTop - radius}px`;
-      circle.classList.add(classes.ripple_effect__circle);
-      circle.style.setProperty("--ripple-color", color);
-      circle.style.setProperty("--ripple-duration", `${duration}ms`);
-      circle.style.setProperty("--ripple-opacity", opacity.toString());
-      return circle;
-    },
-    [color, duration, opacity, sizeMultiplier]
-  );
-  const start = useCallback(
-    (event) => {
-      var _a;
-      if (!enabled) return;
-      const circle = createRippleCircle(event);
-      const handleAnimationEnd = (ev) => {
-        if (!ev.target) return;
-        ev.target.remove();
-      };
-      circle.addEventListener("animationend", handleAnimationEnd);
-      (_a = ref.current) == null ? void 0 : _a.appendChild(circle);
-    },
-    [createRippleCircle, enabled, ref]
-  );
-  useEffect(() => {
-    if (!enabled) return;
-    const targetElement = ref.current;
-    const handleClick = (e) => {
-      start(e);
-    };
-    targetElement == null ? void 0 : targetElement.addEventListener("click", handleClick);
-    return () => {
-      targetElement == null ? void 0 : targetElement.removeEventListener("click", handleClick);
-      Array.from((targetElement == null ? void 0 : targetElement.getElementsByClassName(classes.ripple_effect__circle)) ?? []).forEach(
-        (circle) => circle.remove()
-      );
-    };
-  }, [start, enabled, ref]);
-  return useMemo(
-    () => ({
-      className: classes.ripple_effect
-    }),
-    []
-  );
-};
-export {
-  useRippleEffect
+import { useCallback, useEffect, useMemo } from 'react';
+import classes from './use-ripple-effect.module.scss';
+export const useRippleEffect = (ref, { enabled = true, color = 'currentColor', duration = 400, opacity = 0.2, sizeMultiplier = 1, } = {}) => {
+    const createRippleCircle = useCallback((event) => {
+        const { currentTarget, clientX, clientY } = event;
+        const { clientHeight, clientWidth } = currentTarget;
+        const { left: offsetLeft, top: offsetTop } = currentTarget.getBoundingClientRect();
+        const circleLeft = clientX - offsetLeft;
+        const circleTop = clientY - offsetTop;
+        const circleRight = offsetLeft + clientWidth - clientX;
+        const circleBottom = offsetTop + clientHeight - clientY;
+        const radius = Math.max(circleLeft, circleTop, circleRight, circleBottom) * sizeMultiplier;
+        const circle = document.createElement('div');
+        circle.style.width = circle.style.height = `${radius * 2}px`;
+        circle.style.left = `${circleLeft - radius}px`;
+        circle.style.top = `${circleTop - radius}px`;
+        circle.classList.add(classes.ripple_effect__circle);
+        circle.style.setProperty('--ripple-color', color);
+        circle.style.setProperty('--ripple-duration', `${duration}ms`);
+        circle.style.setProperty('--ripple-opacity', opacity.toString());
+        return circle;
+    }, [color, duration, opacity, sizeMultiplier]);
+    const start = useCallback((event) => {
+        if (!enabled)
+            return;
+        const circle = createRippleCircle(event);
+        const handleAnimationEnd = (ev) => {
+            if (!ev.target)
+                return;
+            ev.target.remove();
+        };
+        circle.addEventListener('animationend', handleAnimationEnd);
+        ref.current?.appendChild(circle);
+    }, [createRippleCircle, enabled, ref]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const targetElement = ref.current;
+        const handleClick = (e) => {
+            start(e);
+        };
+        targetElement?.addEventListener('click', handleClick);
+        return () => {
+            targetElement?.removeEventListener('click', handleClick);
+            // Cleanup any remaining ripple circles
+            Array.from(targetElement?.getElementsByClassName(classes.ripple_effect__circle) ?? []).forEach((circle) => circle.remove());
+        };
+    }, [start, enabled, ref]);
+    return useMemo(() => ({
+        className: classes.ripple_effect,
+    }), []);
 };

package/dist/hooks/use-ripple-effect/use-ripple-effect.module.scss

@@ -0,0 +1,31 @@
+@keyframes ripple {
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.ripple_effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.ripple_effect__circle {
+  position: absolute;
+  border-radius: 9999px;
+  background-color: var(--ripple-color);
+  opacity: var(--ripple-opacity);
+  transform: scale(0);
+  transform-origin: center;
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  touch-action: none;
+  animation: ripple var(--ripple-duration) ease-in-out;
+}
+
+// Optimize for devices with reduced motion
+@media (prefers-reduced-motion: reduce) {
+  .ripple_effect__circle {
+    animation-duration: calc(var(--ripple-duration) * 0.5);
+  }
+}

package/dist/hooks/use-toggle/index.d.ts

@@ -1,3 +1,2 @@
 import { Dispatch, SetStateAction } from 'react';
 export declare function useToggle(defaultValue?: boolean): [boolean, () => void, Dispatch<SetStateAction<boolean>>];
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-toggle/index.js

@@ -1,11 +1,8 @@
-import { useState, useCallback } from "react";
-function useToggle(defaultValue) {
-  const [value, setValue] = useState(!!defaultValue);
-  const toggle = useCallback(() => {
-    setValue((x) => !x);
-  }, []);
-  return [value, toggle, setValue];
+import { useCallback, useState } from 'react';
+export function useToggle(defaultValue) {
+    const [value, setValue] = useState(!!defaultValue);
+    const toggle = useCallback(() => {
+        setValue((x) => !x);
+    }, []);
+    return [value, toggle, setValue];
 }
-export {
-  useToggle
-};

package/dist/hooks/use-update-effect/index.d.ts

@@ -1,3 +1,2 @@
 import { DependencyList, EffectCallback } from 'react';
 export declare const useUpdateEffect: (effect: EffectCallback, deps: DependencyList) => void;
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-update-effect/index.js

@@ -1,13 +1,10 @@
-import { useEffect } from "react";
-import { useFirstMountState } from "../use-first-mount-state/index.js";
-const useUpdateEffect = (effect, deps) => {
-  const isFirstMount = useFirstMountState();
-  useEffect(() => {
-    if (!isFirstMount) {
-      return effect();
-    }
-  }, deps);
-};
-export {
-  useUpdateEffect
+import { useEffect } from 'react';
+import { useFirstMountState } from '../use-first-mount-state';
+export const useUpdateEffect = (effect, deps) => {
+    const isFirstMount = useFirstMountState();
+    useEffect(() => {
+        if (!isFirstMount) {
+            return effect();
+        }
+    }, deps);
 };

package/dist/hooks/use-window-screen/index.d.ts

@@ -4,4 +4,3 @@ export declare const useWindowScreen: () => {
     isSmallerThan: (target: Screen) => boolean;
     isLargerThan: (target: Screen) => boolean;
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-window-screen/index.js

@@ -1,52 +1,49 @@
-import { useState, useEffect, useMemo } from "react";
-import { isNil } from "lodash-es";
-import { isSSR } from "../../constants/index.js";
-import { breakpoint, screens } from "../../theme/screens.js";
-import "../../theme/palette.js";
-const useWindowScreen = () => {
-  const getScreenByWidth = (width) => {
-    if (width < breakpoint.sm.minWidth) {
-      return "xs";
-    }
-    if (width < breakpoint.md.minWidth) {
-      return "sm";
-    }
-    if (width < breakpoint.lg.minWidth) {
-      return "md";
-    }
-    return "lg";
-  };
-  const [currentScreen, setCurrentScreen] = useState(
-    isSSR ? void 0 : window.__isHydrated ? getScreenByWidth(window.innerWidth) : void 0
-  );
-  useEffect(() => {
-    const detectScreen = () => {
-      const queryScreen = getScreenByWidth(window.innerWidth);
-      if (queryScreen === currentScreen) return;
-      setCurrentScreen(queryScreen);
+import { useEffect, useMemo, useState } from 'react';
+import { isNil } from 'lodash-es';
+import { isSSR } from '../../constants';
+import { breakpoint, screens } from '../../theme';
+export const useWindowScreen = () => {
+    const getScreenByWidth = (width) => {
+        if (width < breakpoint.sm.minWidth) {
+            return 'xs';
+        }
+        if (width < breakpoint.md.minWidth) {
+            return 'sm';
+        }
+        if (width < breakpoint.lg.minWidth) {
+            return 'md';
+        }
+        return 'lg';
     };
-    detectScreen();
-    window.addEventListener("resize", detectScreen);
-    return () => {
-      window.removeEventListener("resize", detectScreen);
-    };
-  }, [currentScreen]);
-  return useMemo(() => {
-    const isSmallerThan = (target) => {
-      if (isNil(currentScreen)) return false;
-      return screens.indexOf(currentScreen) < screens.indexOf(target);
-    };
-    const isLargerThan = (target) => {
-      if (isNil(currentScreen)) return false;
-      return screens.indexOf(currentScreen) > screens.indexOf(target);
-    };
-    return {
-      name: currentScreen,
-      isSmallerThan,
-      isLargerThan
-    };
-  }, [currentScreen]);
-};
-export {
-  useWindowScreen
+    const [currentScreen, setCurrentScreen] = useState(isSSR ? undefined : window.__isHydrated ? getScreenByWidth(window.innerWidth) : undefined);
+    useEffect(() => {
+        const detectScreen = () => {
+            const queryScreen = getScreenByWidth(window.innerWidth);
+            if (queryScreen === currentScreen)
+                return;
+            setCurrentScreen(queryScreen);
+        };
+        detectScreen();
+        window.addEventListener('resize', detectScreen);
+        return () => {
+            window.removeEventListener('resize', detectScreen);
+        };
+    }, [currentScreen]);
+    return useMemo(() => {
+        const isSmallerThan = (target) => {
+            if (isNil(currentScreen))
+                return false;
+            return screens.indexOf(currentScreen) < screens.indexOf(target);
+        };
+        const isLargerThan = (target) => {
+            if (isNil(currentScreen))
+                return false;
+            return screens.indexOf(currentScreen) > screens.indexOf(target);
+        };
+        return {
+            name: currentScreen,
+            isSmallerThan,
+            isLargerThan,
+        };
+    }, [currentScreen]);
 };

package/dist/index.d.ts

@@ -1,2 +1 @@
 export * from './lib';
-//# sourceMappingURL=index.d.ts.map