@envive-ai/react-hooks 0.2.10 → 0.2.11

package/src/hooks/GrabAndScroll/useGrabAndScroll.ts

@@ -1,133 +1,145 @@
-import { useRef, useState } from "react";
+import { useRef, useState } from 'react';
 
-type ArrowPosition = 'lt' | 'ct' | 'rt'
+type ArrowPosition = 'lt' | 'ct' | 'rt';
 
 interface AnimationProps {
-    element: HTMLElement
-    targetScroll: number 
-    duration: number 
-    direction?: 'lt' | 'rt' 
-    multiply?: number 
-    offset?: number
-    callback?: (position: ArrowPosition) => void
+  element: HTMLElement;
+  targetScroll: number;
+  duration: number;
+  direction?: 'lt' | 'rt';
+  multiply?: number;
+  offset?: number;
+  callback?: (position: ArrowPosition) => void;
 }
 
-const animateHorizontalScroll = ({ element, duration, targetScroll, multiply = 1, direction, callback, offset = 0 }: AnimationProps) => {
-    const start = element.scrollLeft
-    const distance = (targetScroll - start) * multiply;
-    const startTime = performance.now();
-
-    function easeOutSine(x: number): number {
-      return Math.sin((x * Math.PI) / 2);
+const animateHorizontalScroll = ({
+  element,
+  duration,
+  targetScroll,
+  multiply = 1,
+  direction,
+  callback,
+  offset = 0,
+}: AnimationProps) => {
+  const start = element.scrollLeft;
+  const distance = (targetScroll - start) * multiply;
+  const startTime = performance.now();
+
+  function easeOutSine(x: number): number {
+    return Math.sin((x * Math.PI) / 2);
+  }
+
+  function scrollStep(currentTime: number): void {
+    const timeElapsed = currentTime - startTime;
+    const progress = Math.min(timeElapsed / duration, 1);
+    const easing = easeOutSine(progress);
+    const step = start + distance * easing;
+    const canScroll =
+      (direction === 'rt' ? element.scrollLeft < step : element.scrollLeft > step) || !direction;
+
+    if (step > 0 && canScroll) {
+      element.scrollTo(step, 0);
     }
 
-    function scrollStep(currentTime: number): void {
-        const timeElapsed = currentTime - startTime;
-        const progress = Math.min(timeElapsed / duration, 1);
-        const easing = easeOutSine(progress);
-        const step = start + (distance * easing)
-        const canScroll = (direction === 'rt' ? (element.scrollLeft < step) : (element.scrollLeft > step)) || !direction
-        
-        if (step > 0 && canScroll) {
-          element.scrollTo(step, 0)
-        }
-
-        if (timeElapsed < duration) {
-            requestAnimationFrame(scrollStep);
-        } 
-
-        // End of scrolling container
-        else if ((element.scrollLeft + offset) === element.scrollWidth) {
-            callback?.('rt')
-        } 
-        // Begin of scrolling container
-        else if (element.scrollLeft <= 1) {
-            callback?.('lt')
-        }
-        // Somewhere in the middle
-        else {
-            callback?.('ct')
-        }
-
+    if (timeElapsed < duration) {
+      requestAnimationFrame(scrollStep);
     }
 
-    requestAnimationFrame(scrollStep);
-}
-
-
-export const useGrabAndScroll = (enabled: boolean, chunkWidth: number, speed: number = 400, offset: number = 0) => {
-    const containerRef = useRef<HTMLDivElement>(null)
-    const [ leftArrow, setLeftArrow ] = useState(false)
-    const [ rightArrow, setRightArrow ] = useState(true)
-
-    const handleArrows = (position: ArrowPosition) => {
-        switch (position) {
-            case 'lt':
-                setLeftArrow(false)
-                setRightArrow(true)
-                break
-
-            case 'rt':
-                setLeftArrow(true)
-                setRightArrow(false)
-                break
-
-            default:
-                setLeftArrow(true)
-                setRightArrow(true)
-        }
+    // End of scrolling container
+    else if (element.scrollLeft + offset === element.scrollWidth) {
+      callback?.('rt');
     }
-
-    const animationTrigger = () => {
-        if (enabled && containerRef.current) {
-            const dist = (containerRef?.current?.scrollLeft || 0) / chunkWidth
-            const targetScroll = chunkWidth * (Math.floor(dist) + (dist % 1 > 0.5 ? 1 : 0))
-            animateHorizontalScroll({
-                element: containerRef.current, 
-                targetScroll, 
-                duration: speed,
-                offset,
-                callback: handleArrows
-            })
-        }
+    // Begin of scrolling container
+    else if (element.scrollLeft <= 1) {
+      callback?.('lt');
     }
-
-    const onNext = (cardsToSlide: number) => {
-        if (containerRef.current) {
-            const targetScroll = containerRef.current.scrollLeft + chunkWidth
-            animateHorizontalScroll({
-                element: containerRef.current, 
-                targetScroll, 
-                duration: speed, 
-                direction: 'rt', 
-                multiply: cardsToSlide,
-                offset,
-                callback: handleArrows
-            })
-        }
+    // Somewhere in the middle
+    else {
+      callback?.('ct');
     }
-    
-    const onPrevious = (cardsToSlide: number) => {
-        if (containerRef.current) {
-            const targetScroll = containerRef.current.scrollLeft - chunkWidth
-            animateHorizontalScroll({
-                element: containerRef.current, 
-                targetScroll, 
-                duration: speed, 
-                direction: 'lt', 
-                multiply: cardsToSlide,
-                offset,
-                callback: handleArrows
-            })
-        }
+  }
+
+  requestAnimationFrame(scrollStep);
+};
+
+export const useGrabAndScroll = (
+  enabled: boolean,
+  chunkWidth: number,
+  speed: number = 400,
+  offset: number = 0,
+) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [leftArrow, setLeftArrow] = useState(false);
+  const [rightArrow, setRightArrow] = useState(true);
+
+  const handleArrows = (position: ArrowPosition) => {
+    switch (position) {
+      case 'lt':
+        setLeftArrow(false);
+        setRightArrow(true);
+        break;
+
+      case 'rt':
+        setLeftArrow(true);
+        setRightArrow(false);
+        break;
+
+      default:
+        setLeftArrow(true);
+        setRightArrow(true);
     }
-
-    return {
-        containerRef,
-        leftArrow,
-        rightArrow,
-        animationTrigger,
-        onNext,
-        onPrevious
+  };
+
+  const animationTrigger = () => {
+    if (enabled && containerRef.current) {
+      const dist = (containerRef?.current?.scrollLeft || 0) / chunkWidth;
+      const targetScroll = chunkWidth * (Math.floor(dist) + (dist % 1 > 0.5 ? 1 : 0));
+      animateHorizontalScroll({
+        element: containerRef.current,
+        targetScroll,
+        duration: speed,
+        offset,
+        callback: handleArrows,
+      });
+    }
+  };
+
+  const onNext = (cardsToSlide: number) => {
+    if (containerRef.current) {
+      const targetScroll = containerRef.current.scrollLeft + chunkWidth;
+      animateHorizontalScroll({
+        element: containerRef.current,
+        targetScroll,
+        duration: speed,
+        direction: 'rt',
+        multiply: cardsToSlide,
+        offset,
+        callback: handleArrows,
+      });
+    }
+  };
+
+  const onPrevious = (cardsToSlide: number) => {
+    if (containerRef.current) {
+      const targetScroll = containerRef.current.scrollLeft - chunkWidth;
+      animateHorizontalScroll({
+        element: containerRef.current,
+        targetScroll,
+        duration: speed,
+        direction: 'lt',
+        multiply: cardsToSlide,
+        offset,
+        callback: handleArrows,
+      });
     }
-}
+  };
+
+  return {
+    containerRef,
+    leftArrow,
+    rightArrow,
+    animationTrigger,
+    onNext,
+    onPrevious,
+  };
+};

package/src/hooks/GraphQLConfig/index.ts

@@ -1 +1 @@
-export * from "./useGraphQLConfig";
+export * from './useGraphQLConfig';

package/src/hooks/GraphQLConfig/useGraphQLConfig.ts

@@ -1,8 +1,5 @@
-import { useCallback, useEffect, useState } from "react";
-import {
-  GraphQlConfigValues,
-  useGraphQLClient,
-} from "src/contexts/graphqlContext/graphqlContext";
+import { useCallback, useEffect, useState } from 'react';
+import { GraphQlConfigValues, useGraphQLClient } from 'src/contexts/graphqlContext/graphqlContext';
 
 export const useColorsAndFrontendConfig = () => {
   const { getColorsAndFrontendConfig, isReady } = useGraphQLClient();
@@ -20,7 +17,7 @@ export const useColorsAndFrontendConfig = () => {
       const result = await getColorsAndFrontendConfig();
       setData(result);
     } catch (err) {
-      setError(err instanceof Error ? err : new Error("Unknown error"));
+      setError(err instanceof Error ? err : new Error('Unknown error'));
     } finally {
       setLoading(false);
     }
@@ -50,7 +47,7 @@ export const useOrgId = () => {
         const id = await getOrgId();
         setOrgId(id);
       } catch (err) {
-        setError(err instanceof Error ? err : new Error("Unknown error"));
+        setError(err instanceof Error ? err : new Error('Unknown error'));
       } finally {
         setLoading(false);
       }

package/src/hooks/IdentifyUser/index.ts

@@ -1 +1 @@
-export * from "./useIdentifyUser";
+export * from './useIdentifyUser';

package/src/hooks/IdentifyUser/useIdentifyUser.ts

@@ -1,5 +1,5 @@
-import { useState, useCallback } from "react";
-import { useUserIdentity } from "src/contexts/userIdentityContext/userIdentityContext";
+import { useState, useCallback } from 'react';
+import { useUserIdentity } from 'src/contexts/userIdentityContext/userIdentityContext';
 
 export const useIdentifyUser = () => {
   const { identifyUser, isReady } = useUserIdentity();
@@ -8,7 +8,7 @@ export const useIdentifyUser = () => {
 
   const executeIdentifyUser = useCallback(async () => {
     if (!isReady) {
-      setError(new Error("UserIdentityContext not ready."));
+      setError(new Error('UserIdentityContext not ready.'));
       return;
     }
 
@@ -18,11 +18,7 @@ export const useIdentifyUser = () => {
     try {
       await identifyUser();
     } catch (err) {
-      setError(
-        err instanceof Error
-          ? err
-          : new Error("Unknown error during user identification.")
-      );
+      setError(err instanceof Error ? err : new Error('Unknown error during user identification.'));
       throw err;
     } finally {
       setLoading(false);

package/src/hooks/ImageResolver/index.ts

@@ -1 +1 @@
-export * from "./useImageResolver";
+export * from './useImageResolver';

package/src/hooks/ImageResolver/useImageResolver.ts

@@ -1,6 +1,6 @@
-import { useAtomValue } from "jotai";
-import { OrgShortName } from "src/application/models";
-import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
+import { useAtomValue } from 'jotai';
+import { OrgShortName } from 'src/application/models';
+import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
 abstract class ImageResolver {
   abstract resolve(url: string, size: number): string;
 }
@@ -11,14 +11,8 @@ class MerchantImageResolver {
   private static loadMapping() {
     if (this.imageResolverMap.size === 0) {
       this.imageResolverMap.set(OrgShortName.Spanx, new ShopifyImageResolver());
-      this.imageResolverMap.set(
-        OrgShortName.SpanxStaging,
-        new ShopifyImageResolver()
-      );
-      this.imageResolverMap.set(
-        OrgShortName.UniqueVintage,
-        new ShopifyImageResolver()
-      );
+      this.imageResolverMap.set(OrgShortName.SpanxStaging, new ShopifyImageResolver());
+      this.imageResolverMap.set(OrgShortName.UniqueVintage, new ShopifyImageResolver());
     }
     return this.imageResolverMap;
   }
@@ -36,7 +30,7 @@ class ShopifyImageResolver extends ImageResolver {
     if (urlHasPrefix) {
       return url.replace(pattern, newSizePrefix);
     }
-    return url.replace(".jpg", newSizePrefix);
+    return url.replace('.jpg', newSizePrefix);
   }
 }
 
@@ -44,10 +38,7 @@ export const useImageResolver = () => {
   const orgShortName = useAtomValue(orgShortNameAtom);
   const resolve = (image?: string, size?: number) => {
     if (image && size && orgShortName) {
-      const newImagePath = MerchantImageResolver.get(orgShortName)?.resolve(
-        image,
-        size
-      );
+      const newImagePath = MerchantImageResolver.get(orgShortName)?.resolve(image, size);
       return newImagePath || image;
     }
     return image;

package/src/hooks/Intersection/index.ts

@@ -1 +1 @@
-export * from "./useIntersection";
+export * from './useIntersection';

package/src/hooks/IsSmallScreen/index.ts

@@ -1 +1 @@
-export * from "./useIsSmallScreen";
+export * from './useIsSmallScreen';

package/src/hooks/LocalStorageOperations/index.ts

@@ -1 +1 @@
-export * from "./useLocalStorageOperations";
+export * from './useLocalStorageOperations';

package/src/hooks/LocalStorageOperations/useLocalStorageOperations.ts

@@ -1,14 +1,10 @@
-import { useState, useEffect, useCallback } from "react";
-import { LocalStorageEventListener } from "src/application/models/localStorageEventListener";
-import {
-  useLocalStorage,
-  LocalStorageKeys,
-} from "src/contexts/localStorageContext";
+import { useState, useEffect, useCallback } from 'react';
+import { LocalStorageEventListener } from 'src/application/models/localStorageEventListener';
+import { useLocalStorage, LocalStorageKeys } from 'src/contexts/localStorageContext';
 
 // Reactive localStorage value hook
 export const useLocalStorageValue = (key: string) => {
-  const { getItem, setItem, attachListener, detachListener } =
-    useLocalStorage();
+  const { getItem, setItem, attachListener, detachListener } = useLocalStorage();
   const [value, setValue] = useState<string | null>(() => getItem(key));
 
   useEffect(() => {
@@ -28,7 +24,7 @@ export const useLocalStorageValue = (key: string) => {
       setItem(key, newValue);
       setValue(newValue);
     },
-    [key, setItem]
+    [key, setItem],
   );
 
   return { value, setValue: updateValue };
@@ -43,11 +39,11 @@ export const useSpiffyFeatureFlag = () => {
     (flag: boolean | null) => {
       setSpiffyOnFeatureFlag(flag);
     },
-    [setSpiffyOnFeatureFlag]
+    [setSpiffyOnFeatureFlag],
   );
 
   return {
-    value: value === "true" ? true : value === "false" ? false : null,
+    value: value === 'true' ? true : value === 'false' ? false : null,
     setFlag,
   };
 };
@@ -60,25 +56,22 @@ export const useEnviveFeatureFlag = () => {
   const setFlag = useCallback(
     (flag: boolean | null) => {
       if (flag === true) {
-        setItem(LocalStorageKeys.EnviveOnOverride, "true");
+        setItem(LocalStorageKeys.EnviveOnOverride, 'true');
       } else if (flag === false) {
-        setItem(LocalStorageKeys.EnviveOnOverride, "false");
+        setItem(LocalStorageKeys.EnviveOnOverride, 'false');
       }
     },
-    [setItem]
+    [setItem],
   );
 
   return {
-    value: value === "true" ? true : value === "false" ? false : null,
+    value: value === 'true' ? true : value === 'false' ? false : null,
     setFlag,
   };
 };
 
 // Storage listener hook
-export const useLocalStorageListener = (
-  key: string,
-  callback: (event: StorageEvent) => void
-) => {
+export const useLocalStorageListener = (key: string, callback: (event: StorageEvent) => void) => {
   const { attachListener, detachListener } = useLocalStorage();
 
   useEffect(() => {

package/src/hooks/MessageFilter/index.ts

@@ -1 +1 @@
-export * from "./useMessageFilter";
+export * from './useMessageFilter';

package/src/hooks/MessageFilter/useMessageFilter.ts

@@ -10,7 +10,7 @@ export const useMessageFilter = () => {
   const findMessageIndex = ({ msgs, type, role }: MessageFinder) => {
     let lastIndex = -1;
     msgs.forEach((subArray, index) => {
-      subArray.forEach((obj) => {
+      subArray.forEach(obj => {
         if (obj.type === type || obj.role === role) lastIndex = index;
       });
     });

package/src/hooks/MessageScrollObserver/index.ts

@@ -1 +1 @@
-export * from "./useMessageScrollObserver";
+export * from './useMessageScrollObserver';

package/src/hooks/MessageScrollObserver/useMessageScrollObserver.ts

@@ -1,47 +1,45 @@
-import { useEffect } from "react";
+import { useEffect } from 'react';
 
 export const useMessageScrollObserver = (
-    boxRef: React.RefObject<HTMLDivElement>, 
-    scrollRef: React.RefObject<HTMLDivElement>, 
-    onScrollChange: (position: number) => void
+  boxRef: React.RefObject<HTMLDivElement>,
+  scrollRef: React.RefObject<HTMLDivElement>,
+  onScrollChange: (position: number) => void,
 ) => {
-
-    const calculateScrollHeight = () => {
-      const boxHeight = boxRef?.current?.getBoundingClientRect().height || 0
-      const scrollHeight = scrollRef?.current?.getBoundingClientRect().height || 0
-      return boxHeight - scrollHeight
+  const calculateScrollHeight = () => {
+    const boxHeight = boxRef?.current?.getBoundingClientRect().height || 0;
+    const scrollHeight = scrollRef?.current?.getBoundingClientRect().height || 0;
+    return boxHeight - scrollHeight;
+  };
+
+  const updateState = () => {
+    const scrollHeight = calculateScrollHeight();
+    if (scrollHeight > 0) {
+      onScrollChange(scrollHeight);
     }
+  };
 
-    const updateState = () => {
-      const scrollHeight = calculateScrollHeight()
-      if (scrollHeight > 0) {
-        onScrollChange(scrollHeight)
-      }
+  useEffect(() => {
+    let boxRO = null;
+    let scrollRO = null;
+
+    if (scrollRef?.current) {
+      boxRO = new ResizeObserver(updateState);
+      boxRO.observe(scrollRef?.current);
     }
 
-    useEffect(() => {
-      let boxRO = null;
-      let scrollRO = null;
+    if (boxRef?.current) {
+      scrollRO = new ResizeObserver(updateState);
+      scrollRO.observe(boxRef?.current);
+    }
 
-      if (scrollRef?.current) {
-        boxRO = new ResizeObserver(updateState);
-        boxRO.observe(scrollRef?.current);
+    return () => {
+      if (scrollRef?.current && boxRO) {
+        boxRO.unobserve(scrollRef?.current);
       }
-      
-      if (boxRef?.current) {
-        scrollRO = new ResizeObserver(updateState);
-        scrollRO.observe(boxRef?.current);
-      }
-
-      return () => {
-        if (scrollRef?.current && boxRO) {
-          boxRO.unobserve(scrollRef?.current);
-        }
 
-        if (scrollRO && boxRef?.current) {
-          scrollRO?.unobserve(boxRef?.current)
-        }
-      };
-    }, []);
-
-}
+      if (scrollRO && boxRef?.current) {
+        scrollRO?.unobserve(boxRef?.current);
+      }
+    };
+  }, []);
+};

package/src/hooks/NewOrgConfig/index.ts

@@ -1 +1 @@
-export * from "./useNewOrgConfig";
+export * from './useNewOrgConfig';

package/src/hooks/NewOrgConfig/useNewOrgConfig.ts

@@ -1,4 +1,4 @@
-import { useNewOrgConfigContext } from "src/contexts/newOrgConfigContext/newOrgConfigContext";
+import { useNewOrgConfigContext } from 'src/contexts/newOrgConfigContext/newOrgConfigContext';
 
 export const useNewOrgConfig = () => {
   const config = useNewOrgConfigContext();