@applicaster/zapp-react-native-utils 13.0.0-alpha.1744140354 → 13.0.0-alpha.1753452014

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

@@ -250,7 +250,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

@@ -8,6 +8,8 @@ import { isNilOrEmpty } from "../reactUtils/helpers";
 import { isAndroidTVPlatform } from "../reactUtils";
 import { noop } from "../functionUtils";
 
+const EMPTY_GROUP_COMPONENT = "empty_group_component";
+
 export function useFocusManager() {
   return focusManager;
 }
@@ -74,6 +76,14 @@ export function useFocusEffect(onFocus, focusWatcher) {
   }, focusWatcher);
 }
 
+export function shouldShowEmptyGroup(component) {
+  return (
+    component?.ui_components?.filter(
+      ({ component_type }) => component_type === EMPTY_GROUP_COMPONENT
+    )?.length > 0
+  );
+}
+
 export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
   R.tryCatch(
     R.compose(
@@ -101,15 +111,42 @@ 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 hasEmptyGroup = shouldShowEmptyGroup(component);
+
+  const isGallery = component?.component_type === "gallery-qb";
+
+  const isHiddenDueToEmptyData =
+    !isLoadingData && hasNoData && hideIfDataEmpty && !hasEmptyGroup;
+
+  const defaultFocusableLogic =
+    componentCellsFocusable && (!hasNoData || !hideIfDataEmpty);
+
   React.useEffect(() => {
     if (isAndroidTVPlatform()) {
-      setIsFocusable(
-        componentCellsFocusable && (!hasNoData || !hideIfDataEmpty)
-      );
+      let isFocusableNew = false;
+
+      if (isGallery) {
+        isFocusableNew = true;
+      } else if (isFocusable(component)) {
+        isFocusableNew = defaultFocusableLogic;
+      }
+
+      setIsFocusable(isFocusableNew);
     }
-  }, [setIsFocusable, componentCellsFocusable, hasNoData]);
+  }, [
+    defaultFocusableLogic,
+    isHiddenDueToEmptyData,
+    isGallery,
+    setIsFocusable,
+    hasDataError,
+    hasEmptyGroup,
+  ]);
 };

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 };
 };

package/idleUtils/__tests__/withTimeout$.test.ts

@@ -0,0 +1,37 @@
+import { TestScheduler } from "rxjs/testing";
+
+import { withTimeout$ } from "..";
+
+describe("withTimeout$", () => {
+  let testScheduler: TestScheduler;
+
+  beforeEach(() => {
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  it("should emit undefined after the specified timeout", () => {
+    testScheduler.run(({ expectObservable }) => {
+      const timeout = 1000;
+      const expectedMarble = "1s (a|)";
+      const expectedValues = { a: undefined };
+
+      const result$ = withTimeout$(timeout);
+
+      expectObservable(result$).toBe(expectedMarble, expectedValues);
+    });
+  });
+
+  it("should complete after emitting undefined", () => {
+    testScheduler.run(({ expectObservable }) => {
+      const timeout = 500;
+      const expectedMarble = "500ms (a|)";
+      const expectedValues = { a: undefined };
+
+      const result$ = withTimeout$(timeout);
+
+      expectObservable(result$).toBe(expectedMarble, expectedValues);
+    });
+  });
+});

package/idleUtils/index.ts

@@ -1,4 +1,4 @@
-export { withTimeout } from "./withTimeout";
+export { withTimeout, withTimeout$ } from "./withTimeout";
 
 export { onIdle } from "./onIdle";
 

package/idleUtils/withTimeout.ts

@@ -1,7 +1,20 @@
-export const withTimeout = (timeout: number) => {
-  return new Promise((resolve) => {
+import { of, Observable } from "rxjs";
+import { delay } from "rxjs/operators";
+
+export const withTimeout = (timeout: number): Promise<void> => {
+  return new Promise<void>((resolve) => {
     setTimeout(() => {
       resolve(undefined);
     }, timeout);
   });
 };
+
+/**
+ * Creates an observable that emits a single value after a specified timeout.
+ *
+ * @param timeout - The delay duration in milliseconds before emitting the value.
+ * @returns An observable that emits `undefined` after the specified timeout.
+ */
+export const withTimeout$ = (timeout: number): Observable<void> => {
+  return of(undefined).pipe(delay(timeout));
+};

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/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/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");
+  });
+});