@applicaster/zapp-react-native-utils 13.0.0-alpha.7330390362 → 13.0.0-alpha.7620873141

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,4 +1,3 @@
-import * as R from "ramda";
 import { ViewStyle } from "react-native";
 
 import { useMemo } from "react";
@@ -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/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,
+        },
       ]
     )
   );

package/manifestUtils/fonts/index.js

@@ -224,12 +224,11 @@ function fontKey(label, defaults, conditionalField = null) {
   return fields;
 }
 
-function tvMenuLabel(label, description, defaults) {
-  return fieldsGroup(
-    label,
-    description,
-    generateFieldsFromDefaults(label, defaults, TV_MENU_LABEL_FIELDS)
-  );
+function tvMenuLabel(label, description, defaults, fields = []) {
+  return fieldsGroup(label, description, [
+    ...fields,
+    ...generateFieldsFromDefaults(label, defaults, TV_MENU_LABEL_FIELDS),
+  ]);
 }
 
 function mobileCellLabel(label, description, defaults, groupFolded) {

package/manifestUtils/keys.js

@@ -23,6 +23,13 @@ const ZAPPIFEST_FIELDS = {
 
 const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku", "vizio"];
 
+const MOBILE_PLATFORMS = [
+  "ios",
+  "ios_for_quickbrick",
+  "android",
+  "android_for_quickbrick",
+];
+
 const FontPropsForTVPlatform = (platform) => ({
   [`${R.toLower(platform)}FontFamily`]: {
     name: `${platform} font family`,
@@ -2083,4 +2090,6 @@ module.exports = {
   TV_CELL_BADGE_FIELDS,
   progressBarFields,
   secondaryImageFields,
+  TV_PLATFORMS,
+  MOBILE_PLATFORMS,
 };

package/manifestUtils/sharedConfiguration/screenPicker/__tests__/utils.test.js

@@ -0,0 +1,304 @@
+// @ts-nocheck
+import utils from "../utils";
+
+describe("generateFontConfiguration", () => {
+  it("should generate default configuration for tvos", () => {
+    const expected = [
+      {
+        initial_value: 20,
+        label: "tvOS font Size",
+        key: "tvos_font_size",
+        type: "number_input",
+      },
+      {
+        initial_value: 40,
+        label: "tvOS line Height",
+        key: "tvos_line_height",
+        type: "number_input",
+      },
+      {
+        initial_value: 0.4,
+        label: "tvOS letter Spacing",
+        key: "tvos_letter_spacing",
+        type: "number_input",
+      },
+    ];
+
+    const platforms = {
+      tvos: "tvOS",
+    };
+
+    const generatedFontConfiguration =
+      utils.generateFontConfiguration(platforms);
+
+    expect(generatedFontConfiguration).toEqual(expected);
+  });
+
+  it("should generate default configuration for android_tv", () => {
+    const expected = [
+      {
+        initial_value: 20,
+        label: "Android TV font Size",
+        key: "android_tv_font_size",
+        type: "number_input",
+      },
+      {
+        initial_value: 40,
+        label: "Android TV line Height",
+        key: "android_tv_line_height",
+        type: "number_input",
+      },
+      {
+        initial_value: 0.4,
+        label: "Android TV letter Spacing",
+        key: "android_tv_letter_spacing",
+        type: "number_input",
+      },
+    ];
+
+    const platforms = {
+      android_tv: "Android TV",
+    };
+
+    const generatedFontConfiguration =
+      utils.generateFontConfiguration(platforms);
+
+    expect(generatedFontConfiguration).toEqual(expected);
+  });
+
+  it("should generate default configuration for lg_tv", () => {
+    const expected = [
+      {
+        initial_value: 20,
+        label: "LG TV font Size",
+        key: "lg_tv_font_size",
+        type: "number_input",
+      },
+      {
+        initial_value: 40,
+        label: "LG TV line Height",
+        key: "lg_tv_line_height",
+        type: "number_input",
+      },
+      {
+        initial_value: 0.4,
+        label: "LG TV letter Spacing",
+        key: "lg_tv_letter_spacing",
+        type: "number_input",
+      },
+    ];
+
+    const platforms = {
+      lg_tv: "LG TV",
+    };
+
+    const generatedFontConfiguration =
+      utils.generateFontConfiguration(platforms);
+
+    expect(generatedFontConfiguration).toEqual(expected);
+  });
+
+  it("should generate default configuration for samsung_tv", () => {
+    const expected = [
+      {
+        initial_value: 20,
+        label: "Samsung TV font Size",
+        key: "samsung_tv_font_size",
+        type: "number_input",
+      },
+      {
+        initial_value: 40,
+        label: "Samsung TV line Height",
+        key: "samsung_tv_line_height",
+        type: "number_input",
+      },
+      {
+        initial_value: 0.4,
+        label: "Samsung TV letter Spacing",
+        key: "samsung_tv_letter_spacing",
+        type: "number_input",
+      },
+    ];
+
+    const platforms = {
+      samsung_tv: "Samsung TV",
+    };
+
+    const generatedFontConfiguration =
+      utils.generateFontConfiguration(platforms);
+
+    expect(generatedFontConfiguration).toEqual(expected);
+  });
+});
+
+test("conditional_rule helper should return correct object", () => {
+  expect(utils.conditional_rule("a", "b")).toMatchObject({
+    key: "a",
+    condition_value: "b",
+  });
+});
+
+test("createConditionalConfig helper should return correct object", () => {
+  expect(
+    utils.createConditionalConfig([
+      ["a", "b"],
+      ["c", "d"],
+    ])
+  ).toEqual({
+    rules: "conditional",
+    conditional_fields: [
+      {
+        key: "a",
+        condition_value: "b",
+      },
+      {
+        key: "c",
+        condition_value: "d",
+      },
+    ],
+  });
+});
+
+test("conditional_horizontal_type should contain correct parameters", () => {
+  expect(
+    utils.conditional_horizontal_type_item_fixed.conditional_fields[0]
+  ).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "horizontal",
+  });
+});
+
+test("conditional_vertical_type should contain correct parameters", () => {
+  expect(utils.conditional_vertical_type.conditional_fields[0]).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "vertical",
+  });
+});
+
+test("conditional_horizontal_type_item_fixed should contain correct parameters", () => {
+  expect(
+    utils.conditional_horizontal_type_item_fixed.conditional_fields[0]
+  ).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "horizontal",
+  });
+
+  expect(
+    utils.conditional_horizontal_type_item_fixed.conditional_fields[1]
+  ).toMatchObject({
+    key: "styles/screen_picker_item_size",
+    condition_value: "fixed",
+  });
+});
+
+test("conditional_horizontal_display_type_fixed should contain correct parameters", () => {
+  expect(
+    utils.conditional_horizontal_display_type_fixed.conditional_fields[0]
+  ).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "horizontal",
+  });
+
+  expect(
+    utils.conditional_horizontal_display_type_fixed.conditional_fields[1]
+  ).toMatchObject({
+    key: "styles/screen_picker_horizontal_display_type",
+    condition_value: "fixed",
+  });
+});
+
+test("conditional_horizontal_display_type_fixed should contain correct parameters", () => {
+  expect(
+    utils.conditional_horizontal_asset_on.conditional_fields[0]
+  ).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "horizontal",
+  });
+
+  expect(
+    utils.conditional_horizontal_asset_on.conditional_fields[1]
+  ).toMatchObject({
+    key: "styles/screen_picker_asset_switch",
+    condition_value: true,
+  });
+});
+
+describe("createVariationFields", () => {
+  const defaultInput = {
+    key: "somekey",
+    label: "default somekey label",
+    variants: [
+      {
+        initial_value: "a",
+      },
+      {
+        initial_value: "b",
+        label: "custom label",
+      },
+    ],
+  };
+
+  const config = utils.createVariationFields(defaultInput);
+
+  it("should return array containing object for conditional_vertical_type", () => {
+    expect(config[0].rules).toBe("conditional");
+
+    expect(config[0].conditional_fields).toEqual([
+      {
+        key: "styles/screen_picker_type",
+        condition_value: "vertical",
+      },
+    ]);
+
+    expect(config[0].type).toBe("number_input");
+    expect(config[0].key).toBe("screen_picker_vertical_somekey");
+    expect(config[0].label).toBe("default somekey label");
+    expect(config[0].initial_value).toBe("a");
+  });
+
+  it("should return array containing object for conditional_horizontal_type", () => {
+    expect(config[1].rules).toBe("conditional");
+
+    expect(config[1].conditional_fields).toEqual([
+      {
+        key: "styles/screen_picker_type",
+        condition_value: "horizontal",
+      },
+    ]);
+
+    expect(config[1].type).toBe("number_input");
+    expect(config[1].key).toBe("screen_picker_horizontal_somekey");
+    expect(config[1].label).toBe("custom label");
+    expect(config[1].initial_value).toBe("b");
+  });
+
+  it("should accept custom prefix (empty)", () => {
+    const config = utils.createVariationFields({
+      ...defaultInput,
+      prefix: "",
+    });
+
+    expect(config[0].key).toBe("vertical_somekey");
+    expect(config[1].key).toBe("horizontal_somekey");
+  });
+
+  it("should accept custom prefix (string)", () => {
+    const config = utils.createVariationFields({
+      ...defaultInput,
+      prefix: "string",
+    });
+
+    expect(config[0].key).toBe("string_vertical_somekey");
+    expect(config[1].key).toBe("string_horizontal_somekey");
+  });
+
+  it("should accept custom type (string)", () => {
+    const config = utils.createVariationFields({
+      ...defaultInput,
+      type: "text_input",
+    });
+
+    expect(config[0].type).toBe("text_input");
+    expect(config[1].type).toBe("text_input");
+  });
+});