@applicaster/zapp-react-native-utils 13.0.0-alpha.1124981321 → 13.0.0-alpha.1173186260

package/dateUtils/index.ts

@@ -2,10 +2,29 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import isoWeek from "dayjs/plugin/isoWeek";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
 
 // Extend dayjs with plugins
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
+dayjs.extend(duration);
+
+dayjs.extend(relativeTime, {
+  thresholds: [
+    { l: "s", r: 1 },
+    { l: "m", r: 1 },
+    { l: "mm", r: 59, d: "minute" },
+    { l: "h", r: 1 },
+    { l: "hh", r: 23, d: "hour" },
+    { l: "d", r: 1 },
+    { l: "dd", r: 29, d: "day" },
+    { l: "M", r: 1 },
+    { l: "MM", r: 11, d: "month" },
+    { l: "y", r: 1 },
+    { l: "yy", d: "year" },
+  ],
+});
 
 export { dayjs };

package/equalUtils/__tests__/isEqual/combination.test.ts

@@ -0,0 +1,263 @@
+import { isEqual } from "../..";
+
+const array = [1, 2, 3];
+const sameProp = "sameProp";
+
+describe("isEqual - comprehensive tests", () => {
+  describe("all conditions together", () => {
+    it("all conditions checked and not equal", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+        extraProp1: 123,
+        extraProp2: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "different",
+        extraProp1: 456,
+        extraProp2: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+        compareRemainingKeysBySameValue: true,
+      })(prev, next);
+
+      expect(result).toBe(false);
+
+      expect(customComparator).toHaveBeenCalledWith(
+        prev.byComparatorProp,
+        next.byComparatorProp
+      );
+    });
+
+    it("all conditions pass with exact remaining keys check", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+        extraProp: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+        extraProp: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+        compareRemainingKeysBySameValue: true,
+      })(prev, next);
+
+      expect(result).toBe(true);
+
+      expect(customComparator).toHaveBeenCalledWith(
+        prev.byComparatorProp,
+        next.byComparatorProp
+      );
+    });
+
+    it("byReference check fails first (early return)", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: [1, 2, 3],
+        byComparatorProp: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+      })(prev, next);
+
+      expect(result).toBe(false);
+      expect(customComparator).not.toHaveBeenCalled();
+    });
+
+    it("byValue check fails after byReference passes", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 3 },
+        byRefProp: array,
+        byComparatorProp: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+      })(prev, next);
+
+      expect(result).toBe(false);
+      expect(customComparator).not.toHaveBeenCalled();
+    });
+
+    it("byComparator check fails after other checks pass", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "different",
+      };
+
+      const customComparator = jest.fn().mockReturnValue(false);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+      })(prev, next);
+
+      expect(result).toBe(false);
+
+      expect(customComparator).toHaveBeenCalledWith(
+        prev.byComparatorProp,
+        next.byComparatorProp
+      );
+    });
+
+    it("remaining keys comparison fails", () => {
+      const sharedArray = [1, 2, 3];
+
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: sharedArray,
+        byComparatorProp: "test",
+        extraProp: "original",
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: sharedArray,
+        byComparatorProp: "different",
+        extraProp: "changed",
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+        compareRemainingKeysBySameValue: true,
+      })(prev, next);
+
+      expect(result).toBe(false);
+      expect(customComparator).toHaveBeenCalled();
+    });
+
+    it("with debug flag", () => {
+      const consoleSpy = jest.spyOn(console, "log").mockImplementation();
+
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+        extraProp: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "different",
+        extraProp: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+        compareRemainingKeysBySameValue: true,
+        debug: true,
+      })(prev, next);
+
+      expect(result).toBe(true);
+      expect(consoleSpy).toHaveBeenCalled();
+
+      consoleSpy.mockRestore();
+    });
+
+    it("handles missing properties", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: [1, 2, 3],
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byComparatorProp: "test",
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+      })(prev, next);
+
+      expect(result).toBe(false);
+      expect(customComparator).not.toHaveBeenCalled();
+    });
+  });
+});

package/equalUtils/index.ts

@@ -1,6 +1,8 @@
 /* eslint no-console: off */
 
-import * as R from "ramda";
+import { equals } from "ramda";
+
+const alwaysTrue = () => true;
 
 export const isParentFocusEqual = (
   prevParentFocus: ParentFocus,
@@ -18,7 +20,7 @@ export const isEqual =
   ({
     byValue = [],
     byReference = [],
-    byComparator = { comparator: R.always(true), keys: [] },
+    byComparator = { comparator: alwaysTrue, keys: [] },
     debug = false,
     compareRemainingKeysBySameValue = false,
   }: {
@@ -29,42 +31,59 @@ export const isEqual =
     compareRemainingKeysBySameValue?: boolean;
   }) =>
   (prev, next) => {
-    const isEqualByValue = R.isEmpty(byValue)
-      ? true
-      : R.all((key) => R.equals(prev[key], next[key]), byValue);
+    for (const key of byReference) {
+      if (prev[key] !== next[key]) {
+        if (debug) console.log({ isEqualByReference: false });
 
-    const isEqualByReference = R.isEmpty(byReference)
-      ? true
-      : R.all((key) => prev[key] === next[key], byReference);
+        return false;
+      }
+    }
 
-    const isEqualByComparator = R.isEmpty(byComparator.keys)
-      ? true
-      : R.all(
-          (key) => byComparator.comparator(prev[key], next[key]),
-          byComparator.keys
-        );
+    for (const key of byValue) {
+      if (!equals(prev[key], next[key])) {
+        if (debug) console.log({ isEqualByValue: false });
 
-    if (debug) {
-      console.log({ isEqualByValue, isEqualByReference, isEqualByComparator });
+        return false;
+      }
+    }
+
+    for (const key of byComparator.keys) {
+      if (!byComparator.comparator(prev[key], next[key])) {
+        if (debug) console.log({ isEqualByComparator: false });
+
+        return false;
+      }
     }
 
     if (compareRemainingKeysBySameValue) {
-      const undeclaredKeys = R.difference(
-        [...byValue, ...byReference, byComparator.keys],
-        Object.keys(prev)
-      );
+      const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+
+      const declaredKeys = new Set([
+        ...byValue,
+        ...byReference,
+        ...byComparator.keys,
+      ]);
 
-      const isRestKeysEqualAllBySameValue = undeclaredKeys.every((key) =>
-        Object.is(prev[key], next[key])
-      );
+      for (const key of Array.from(allKeys)) {
+        if (!declaredKeys.has(key) && !Object.is(prev[key], next[key])) {
+          if (debug) console.log({ isRestKeysEqualAllBySameValue: false });
 
-      return (
-        isEqualByValue &&
-        isEqualByReference &&
-        isEqualByComparator &&
-        isRestKeysEqualAllBySameValue
-      );
+          return false;
+        }
+      }
+    }
+
+    // if we made it here, everything matched
+    if (debug) {
+      console.log({
+        isEqualByValue: true,
+        isEqualByReference: true,
+        isEqualByComparator: true,
+        isRestKeysEqualAllBySameValue: compareRemainingKeysBySameValue
+          ? true
+          : undefined,
+      });
     }
 
-    return isEqualByValue && isEqualByReference && isEqualByComparator;
+    return true;
   };

package/focusManager/FocusManager.ts

@@ -227,7 +227,9 @@ class FocusManager {
 
       const nextNextFocus = FocusManager.getNextFocusable(direction, nextFocus);
 
-      FocusManager.instance.setFocus(nextNextFocus, options);
+      if (nextNextFocus) {
+        FocusManager.instance.setFocus(nextNextFocus, options);
+      }
     } else {
       FocusManager.instance.setFocusLocal(nextFocus);
 
@@ -250,7 +252,17 @@ class FocusManager {
   }
 
   onDisableFocusChange = (id) => {
-    if (FocusManager.instance.isFocused(id)) {
+    const isFocused = FocusManager.instance.isFocused(id);
+
+    const isDescendantFocused = (() => {
+      try {
+        return FocusManager.instance.isAnyDescendantFocused(id);
+      } catch (_e) {
+        return false;
+      }
+    })();
+
+    if (isFocused || isDescendantFocused) {
       // Move focus to next one
       const nextFocus = FocusManager.instance.focused?.props
         ?.nextFocusDown as string;

package/focusManager/index.ts

@@ -91,6 +91,7 @@ type Props = {
 
 export const useIsFocusable = (props: Props): void => {
   const { component, zappPipesData } = props;
+
   const { setIsFocusable } = useFocusable();
 
   const componentCellsFocusable = toBooleanWithDefaultTrue(
@@ -101,15 +102,33 @@ export const useIsFocusable = (props: Props): void => {
     component.rules.hide_component_if_data_is_empty
   );
 
+  const isLoadingData = !!zappPipesData?.loading;
+
   const hasNoData =
     isNilOrEmpty(zappPipesData?.data) ||
     isNilOrEmpty(zappPipesData?.data?.entry);
 
+  const hasDataError = !!zappPipesData?.error;
+
+  const isHiddenDueToEmptyData = !isLoadingData && hasNoData && hideIfDataEmpty;
+
+  const defaultFocusableLogic =
+    componentCellsFocusable && (!hasNoData || !hideIfDataEmpty);
+
   React.useEffect(() => {
     if (isAndroidTVPlatform()) {
-      setIsFocusable(
-        componentCellsFocusable && (!hasNoData || !hideIfDataEmpty)
-      );
+      let isFocusableNew = false;
+
+      if (isFocusable(component)) {
+        isFocusableNew = defaultFocusableLogic;
+      }
+
+      setIsFocusable(isFocusableNew);
     }
-  }, [setIsFocusable, componentCellsFocusable, hasNoData]);
+  }, [
+    defaultFocusableLogic,
+    isHiddenDueToEmptyData,
+    setIsFocusable,
+    hasDataError,
+  ]);
 };

package/functionUtils/index.ts

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 /**
  *
@@ -9,31 +9,44 @@ import { useRef } from "react";
  */
 export const useThrottle = (callback: () => void, delay: number) => {
   const lastCallRef = useRef<number>(0);
-  const timeoutRef = useRef<any | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef<() => void>(callback);
 
-  const throttledFunction = () => {
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const throttledFunction = useCallback(() => {
     const now = Date.now();
 
     if (now - lastCallRef.current >= delay) {
-      callback();
+      callbackRef.current();
       lastCallRef.current = now;
     } else if (!timeoutRef.current) {
       const remainingTime = delay - (now - lastCallRef.current);
 
       timeoutRef.current = setTimeout(() => {
-        callback();
+        callbackRef.current();
         lastCallRef.current = Date.now();
         timeoutRef.current = null;
       }, remainingTime);
     }
-  };
+  }, [delay]);
 
-  const cancel = () => {
+  const cancel = useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
 
   return { throttledFunction, cancel };
 };
@@ -245,3 +258,28 @@ export const extractDataFromProperty = (property, data): any =>
   );
 
 export const then = (fn) => (promise) => promise.then(fn);
+
+/**
+ * Returns a replacer function for JSON.stringify that handles circular references,
+ * functions, and React context objects
+ * @returns {Function} A replacer function that detects and handles circular references,
+ * functions, and React context objects
+ */
+export const getJsonReplacer = () => {
+  return (_key, value) => {
+    if (typeof value === "function") {
+      return "[Function]";
+    }
+
+    if (
+      typeof value === "object" &&
+      value !== null &&
+      value.Provider &&
+      value.Consumer
+    ) {
+      return "[ReactContext]";
+    }
+
+    return value;
+  };
+};

package/index.d.ts

@@ -105,18 +105,6 @@ declare type NavBarState = {
   title: string;
 };
 
-declare type StorageValuesToAdd = Record<string, NamespaceValues>;
-
-declare type StorageValuesToRemove = {
-  string?: string[];
-};
-
-declare type StorageOwnedValues = {
-  string?: string[];
-};
-
-declare type NamespaceValues = Record<string, string>;
-
 declare type RefreshProps = {
   forceRefresh?: boolean;
 };

package/localizationUtils/index.ts

@@ -1,9 +1,8 @@
-import * as R from "ramda";
 import { ViewStyle } from "react-native";
 
 import { useMemo } from "react";
-import { getUILanguage } from "../appUtils/localizationsHelper";
-import { utilsLogger } from "../logger";
+import { getUILanguage } from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
+import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
 
 export {
   getLocale,
@@ -11,7 +10,7 @@ export {
   getCountryCode,
   getLocalizations,
   getUILanguage,
-} from "../appUtils/localizationsHelper";
+} from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
 
 const RTL_LOCALES = [
   "ar", // Arabic
@@ -29,14 +28,16 @@ const RTL_LOCALES = [
   "yi", // Yiddish
 ];
 
-export function useLocalizedStrings({ localizations }) {
+export function useLocalizedStrings({ localizations = {} }) {
   const languageCode = getUILanguage();
 
   // TODO: probably we can call getLocalizations here from localizationsHelper.js
   const result = useMemo(
     () =>
       localizations?.[languageCode] ||
-      R.compose(R.head, R.filter(R.is(Object)), R.values)(localizations) ||
+      Object.values(localizations).find(
+        (value) => typeof value === "object" && value !== null
+      ) ||
       {},
     [languageCode, localizations]
   );
@@ -53,13 +54,7 @@ export function getIsRTL(): boolean {
     return false;
   }
 
-  const [languageCode] = uiLanguage.split("-");
-
-  const lowerCaseLanguageCode = languageCode.toLocaleLowerCase();
-
-  const isRTL = R.contains(lowerCaseLanguageCode, RTL_LOCALES);
-
-  return isRTL;
+  return RTL_LOCALES.includes(uiLanguage.split("-")[0].toLocaleLowerCase());
 }
 
 export function useIsRTL(): boolean {

package/manifestUtils/__tests__/createConfig.test.js

@@ -78,8 +78,6 @@ describe("createConfig", () => {
       extend: "styles",
     })(props);
 
-    console.log(mockGenerators.styles.mock.calls);
-
     expect(mockGenerators.styles).toBeCalledWith(props);
   });
 

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -251,6 +251,19 @@ const generalContent = () => ({
         key: "screen_title",
         initial_value: null,
       },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Description",
+        key: "msg_maximum_selection_reached_message",
+        initial_value:
+          "You’ve reached the maximum number of items you can select.",
+      },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Button",
+        key: "msg_maximum_selection_reached_message_ok_button",
+        initial_value: "Got it",
+      },
     ],
   },
   advertising: {

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -50,6 +50,14 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
       },
+      {
+        key: "audio_player_background_image_default_color",
+        label: "Audio Player Background Image Default Color",
+        initial_value: "",
+        type: "text_input",
+        label_tooltip:
+          "Set the default color for the audio player background image if not image or set of gradient colors are not provided.",
+      },
     ],
   };
 
@@ -2547,6 +2555,12 @@ function getPlayerConfiguration({ platform }) {
           multiple: false,
           label_tooltip: "Choose the default aspect ratio for the artwork",
         },
+        {
+          key: "audio_player_artwork_border_radius",
+          label: "Audio Player Artwork Corner Radius",
+          type: "number_input",
+          initial_value: 16,
+        },
       ]
     )
   );