@applicaster/zapp-react-native-utils 12.0.0-alpha.5895113034 → 12.0.0-alpha.5933014273

package/booleanUtils/index.ts

@@ -1,7 +1,7 @@
-import * as R from "ramda";
+import { is, toLower } from "ramda";
 
 export const toBoolean = (value: any): boolean | undefined => {
-  if (R.is(Boolean, value)) {
+  if (is(Boolean, value)) {
     return value;
   }
 
@@ -17,12 +17,12 @@ export const toBooleanWithDefaultTrue = toBooleanWithDefault(true);
 
 export const toBooleanWithDefaultFalse = toBooleanWithDefault(false);
 
-export const isTrue = (value: any): boolean => {
+export const isTrue = (value: unknown): boolean => {
   if (value === true) {
     return true;
   }
 
-  if (R.is(String, value) && value.toLowerCase() === "true") {
+  if (is(String, value) && toLower(value) === "true") {
     return true;
   }
 

package/cellUtils/index.ts

@@ -31,13 +31,12 @@ export const getKeyForLabel = (dataKey, customKey) => {
  * This method will return true if the argument passed to it is either empty or nil
  * The method prevents zero from being evaluated as falsey in an || condition
  * i.e. - NaN, null, {}, "", [], should all return true
- * @param {*} argument - argument passed to it could be any type
  * @returns {Boolean} returns true if empty or nil
+ * @param value
  */
-export const isEmptyOrNil = R.either(
-  R.equals(NaN),
-  R.either(R.isEmpty, R.isNil)
-);
+
+export const isEmptyOrNil = (value: any): boolean =>
+  Number.isNaN(value) || value == null || R.isEmpty(value);
 
 /**
  * This method is used to find the appropriate label for any given text field.
@@ -320,6 +319,7 @@ export const ifElseFocusedSelected = (
  * @param {Object} stylesObj styles object with keys from zapp { button_icon_width: "10" }
  * @returns {*} value, returns any type that can be used as styles
  */
+
 export const getValue = (stylesObj) => (key) => {
   return R.propOr(null, key, stylesObj);
 };
@@ -468,3 +468,36 @@ export const getColorFromData = ({
 
   return valueFromLayout;
 };
+
+export const getImageStyles = ({
+  image,
+  value,
+}: {
+  image: any;
+  value: any;
+}) => {
+  return {
+    width: image.imageContentWidth,
+    height: image.imageContentHeight,
+    aspectRatio: image.aspectRatio,
+    borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+  };
+};
+
+export const getImageContainerPaddingStyles = ({ value }: { value: any }) => {
+  return {
+    paddingTop: value("image_padding_top"),
+    paddingBottom: value("image_padding_bottom"),
+    paddingLeft: value("image_padding_left"),
+    paddingRight: value("image_padding_right"),
+  };
+};
+
+export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
+  return {
+    marginTop: value("image_margin_top"),
+    marginBottom: value("image_margin_bottom"),
+    marginLeft: value("image_margin_left"),
+    marginRight: value("image_margin_right"),
+  };
+};

package/functionUtils/index.ts

@@ -1,4 +1,42 @@
 import * as R from "ramda";
+import { useRef } from "react";
+
+/**
+ *
+ * @param callback - The function to throttle.
+ * @param delay - The delay in milliseconds.
+ * @returns A throttled version of the callback.
+ */
+export const useThrottle = (callback: () => void, delay: number) => {
+  const lastCallRef = useRef<number>(0);
+  const timeoutRef = useRef<any | null>(null);
+
+  const throttledFunction = () => {
+    const now = Date.now();
+
+    if (now - lastCallRef.current >= delay) {
+      callback();
+      lastCallRef.current = now;
+    } else if (!timeoutRef.current) {
+      const remainingTime = delay - (now - lastCallRef.current);
+
+      timeoutRef.current = setTimeout(() => {
+        callback();
+        lastCallRef.current = Date.now();
+        timeoutRef.current = null;
+      }, remainingTime);
+    }
+  };
+
+  const cancel = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  return { throttledFunction, cancel };
+};
 
 /**
  * standard debounce function.

package/index.d.ts

@@ -143,3 +143,18 @@ declare type BuilderData = {
   river?: ZappRiver;
   method?: string;
 };
+
+declare type AccessibilityState = {
+  screenReaderEnabled: boolean;
+  reduceMotionEnabled: boolean;
+  boldTextEnabled: boolean;
+};
+
+declare type AccessibilityProps = {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  "aria-label"?: string;
+  "aria-description"?: string;
+  accessibilityRole?: string;
+  "aria-role"?: string;
+};

package/navigationUtils/index.ts

@@ -592,3 +592,51 @@ export function isMenuDisabled(
 export function routeIsPlayerScreen(currentRoute) {
   return currentRoute?.includes("/playable");
 }
+
+export const getNavBarProps =
+  (currentRiver: ZappRiver, pathname: string, title: string) => () => {
+    const props = getNavigationPropsV2({
+      currentRiver,
+      title,
+      category: "nav_bar",
+    });
+
+    if (props) {
+      return {
+        ...props,
+        id: pathname,
+        pathname: pathname,
+      };
+    }
+
+    return null;
+  };
+
+export const findMenuPlugin = (
+  navigations: ZappNavigation[],
+  plugins
+): QuickBrickPlugin => {
+  return resolveNavigationPlugin({
+    category: "menu",
+    navigations,
+    plugins,
+  }) as QuickBrickPlugin;
+};
+
+export const shouldNavBarDisplayMenu = (currentRiver: ZappRiver, plugins) =>
+  findMenuPlugin(currentRiver.navigations, plugins)?.identifier ===
+    "quick_brick_side_menu" ||
+  currentRiver?.navigations.findIndex(
+    (nav) => nav.category === "nav_bar" && nav.general?.override_menu_target
+  ) > -1;
+
+export const getScreenId = (
+  screenData: LegacyNavigationScreenData,
+  fallbackRiver: ZappRiver
+) => {
+  return screenData?.targetScreen
+    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    : "screen_id" in screenData
+    ? screenData.screen_id
+    : fallbackRiver.id;
+};

package/numberUtils/__tests__/isLikeNumber.test.ts

@@ -7,12 +7,24 @@ describe("isLikeNumber", () => {
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a number", () => {
+    const value = 123.45;
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is a string as number", () => {
     const value = "123";
 
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a string as number", () => {
+    const value = "123.45";
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is empty string", () => {
     const value = "";
 
@@ -54,4 +66,10 @@ describe("isLikeNumber", () => {
 
     expect(isLikeNumber(value)).toBe(false);
   });
+
+  it("NaN is not a number", () => {
+    const value = NaN;
+
+    expect(isLikeNumber(value)).toBe(false);
+  });
 });

package/numberUtils/__tests__/toNumber.test.ts

@@ -2,7 +2,7 @@ import { toNumber } from "..";
 
 describe("toNumber", () => {
   it("return number if input is number", () => {
-    const inputs = [-1, 0, 1, 100];
+    const inputs = [-1, 0, 1, 100, 0.2];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {
@@ -12,7 +12,7 @@ describe("toNumber", () => {
   });
 
   it("return number if input is string as number", () => {
-    const inputs = ["-1", "0", "1", "100"];
+    const inputs = ["-1", "0", "1", "100", "0.2"];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {

package/numberUtils/index.ts

@@ -50,27 +50,14 @@ export const toFiniteNumberWithDefault = (
   return possibleNumber;
 };
 
-export const isLikeNumber = (value: any): boolean => {
-  if (R.isEmpty(value)) {
-    return false;
-  }
-
-  if (R.is(Number, value)) {
-    return true;
-  }
-
-  if (R.is(String, value)) {
-    const onlyDigit = value
-      .split("")
-      .filter((char) =>
-        ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(char)
-      )
-      .join("");
+export const isLikeNumber = (value: unknown): boolean => {
+  const possibleNumber = toNumber(value);
 
-    return value === onlyDigit;
+  if (R.isNil(possibleNumber)) {
+    return false;
   }
 
-  return false;
+  return true;
 };
 
 export const isZero = (value: unknown): boolean =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.5895113034",
+  "version": "12.0.0-alpha.5933014273",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.5895113034",
+    "@applicaster/applicaster-types": "12.0.0-alpha.5933014273",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/playerUtils/imaScriptDom.ts

@@ -0,0 +1,59 @@
+import { createLogger } from "../logger";
+
+export const logger = createLogger({
+  category: "ImaDomUtils",
+  subsystem: "Player/ImaDomUtils",
+});
+
+const { log_debug, log_error, log_verbose } = logger;
+
+const removeElement = (node) => {
+  if (node) {
+    const parentNode = node.parentNode;
+
+    if (parentNode) {
+      parentNode.removeChild(node);
+    }
+  }
+};
+
+// TODO: This should probably be loaded to root of project before player init
+export const loadIMAScript = async () => {
+  return new Promise((resolve) => {
+    // If ima script is already loaded, resolve
+    const imaScript = document.getElementById("ima-script");
+
+    if (imaScript) {
+      log_verbose("loadIMAScript: IMA script already loaded");
+
+      return resolve(true);
+    }
+
+    const script = document.createElement("script");
+
+    if (__DEV__) {
+      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3_debug.js";
+    } else {
+      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js";
+    }
+
+    script.async = true;
+    script.id = "ima-script";
+
+    script.onload = () => {
+      removeElement(script);
+      log_debug("loadIMAScript: Loaded ima script", script.src);
+      resolve(true);
+    };
+
+    script.onerror = (_e) => {
+      removeElement(script);
+      log_error("loadIMAScript: Failed to load ima script", script.src);
+      resolve(false);
+    };
+
+    if (document.head) {
+      document.head.appendChild(script);
+    }
+  });
+};

package/pluginUtils/index.ts

@@ -245,3 +245,12 @@ export function generateManifest({ manifestConfig, version }) {
 
   return manifestConfig({ platform, version });
 }
+
+const getPluginType = R.pathOr("unknown_plugin_type", [
+  "state",
+  "screen",
+  "plugin_type",
+]);
+
+export const isPlayerPlugin = (routeState): boolean =>
+  getPluginType(routeState) === "player";

package/reactHooks/cell-click/__tests__/index.test.js

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { cleanup, renderHook } from "@testing-library/react-hooks";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+
 import { waitFor } from "@testing-library/react-native";
 
 const navigator = {
@@ -29,10 +31,6 @@ jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
   },
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useScreenContext: jest.fn(() => navigator.data),
-}));
-
 const { useCellClick } = require("../");
 
 const mockProps = {
@@ -47,9 +45,15 @@ const mockProps = {
 
 const onCellTap = jest.fn();
 
+const actionExecutor = {
+  handleEntryActions: jest.fn(() => Promise.resolve()),
+};
+
 const wrapper = ({ children }) => (
   <CellTapContext.Provider value={onCellTap}>
-    {children}
+    <ActionExecutorContext.Provider value={actionExecutor}>
+      {children}
+    </ActionExecutorContext.Provider>
   </CellTapContext.Provider>
 );
 

package/reactHooks/cell-click/index.ts

@@ -1,7 +1,6 @@
 /// <reference types="@applicaster/applicaster-types" />
 
 import * as React from "react";
-import { useContext } from "react";
 import * as R from "ramda";
 import { handleActionSchemeUrl } from "@applicaster/quick-brick-core/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
@@ -12,8 +11,9 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { noop } from "../../functionUtils";
-import { ActionExecutorContext } from "../../actionsExecutor/ActionExecutorContext";
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+
+import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
 
@@ -30,12 +30,12 @@ type Props = {
   zappPipesData?: ZappPipesData;
 };
 
-export const useCellClick = (props: Props) => {
-  const { component, zappPipesData } = props;
+export const useCellClick = ({ component, zappPipesData, item }: Props) => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
-  const onCellTap = React.useContext(CellTapContext);
-  const actionExecutor = useContext(ActionExecutorContext);
+
+  const onCellTap: Option<Function> = React.useContext(CellTapContext);
+  const actionExecutor = React.useContext(ActionExecutorContext);
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -47,7 +47,7 @@ export const useCellClick = (props: Props) => {
   const logTimestamp = useProfilerLogging();
 
   const sendAnalyticsOnPress = useSendAnalyticsOnPress(
-    props.item,
+    item,
     component,
     zappPipesData
   );
@@ -56,7 +56,7 @@ export const useCellClick = (props: Props) => {
     async (_item?: ZappEntry | any, _index?: number) => {
       // Making sure we are not getting GestureResponderEvent in here.
       const isZappEntry = _item?.id && _item?.type;
-      const selectedItem = isZappEntry ? _item : props.item;
+      const selectedItem = isZappEntry ? _item : item;
       setEntryContext?.(selectedItem);
 
       if (!selectedItem?.type?.value) {
@@ -80,8 +80,8 @@ export const useCellClick = (props: Props) => {
           });
         }
       } else {
-        if (typeof onCellTap === "function") {
-          onCellTap(selectedItem, _index);
+        if (isFunction(onCellTap)) {
+          onCellTap?.(selectedItem, _index);
         } else {
           if (currentRoute === pathname || pathname.includes("video-modal")) {
             const targetScreen = component?.data?.target;

package/reactHooks/debugging/__tests__/index.test.js

@@ -4,38 +4,77 @@ import {
   timers,
 } from "@applicaster/zapp-react-native-utils/reactHooks/debugging";
 
-jest.useFakeTimers();
-
 describe("Debug utils", () => {
+  let performanceNowMock;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    // Clear the timers object
+    Object.keys(timers).forEach((key) => delete timers[key]);
+
+    // Mock performance.now()
+    // eslint-disable-next-line no-undef
+    performanceNowMock = jest.spyOn(performance, "now");
+    performanceNowMock.mockReturnValue(0); // Initial value
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+    performanceNowMock.mockRestore();
+  });
+
   describe("Unit Test: time", () => {
     it("should create new timer if timer with a label does not exist", () => {
+      performanceNowMock.mockReturnValue(1000);
       time("timer1");
       expect(timers["timer1"]).toBeDefined();
+      expect(timers["timer1"].startTime).toBe(1000);
     });
 
     it("should update start time of timer if timer with a label exists", () => {
+      // First call to time()
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
       const previousStartTime = timers["timer1"].startTime;
-      jest.advanceTimersByTime(1000);
+
+      // Second call to time()
+      performanceNowMock.mockReturnValue(2000);
       time("timer1");
       const currentStartTime = timers["timer1"].startTime;
-      expect(previousStartTime).not.toEqual(currentStartTime);
+
+      expect(previousStartTime).toBe(1000);
+      expect(currentStartTime).toBe(2000);
     });
   });
 
   describe("Unit Test: timeEnd", () => {
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+      jest.spyOn(console, "log").mockImplementation(() => {});
+    });
 
     it("should log elapsed time", () => {
       const logSpy = jest.spyOn(console, "log");
 
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1");
 
-      expect(logSpy).toHaveBeenCalled();
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer1: 1000.000ms 2",
+        expect.any(Object)
+      );
     });
 
     it("should not log elapsed time if accumulative: true in settings", () => {
       const logSpy = jest.spyOn(console, "log");
 
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1", { accumulative: true });
 
       expect(logSpy).not.toHaveBeenCalled();
@@ -43,21 +82,52 @@ describe("Debug utils", () => {
   });
 
   describe("Integration Test: time and timeEnd", () => {
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+      jest.spyOn(console, "log").mockImplementation(() => {});
+    });
 
     it("should log elapsed time on timeEnd call", () => {
       const logSpy = jest.spyOn(console, "log");
+
+      performanceNowMock.mockReturnValue(1000);
       time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1");
-      expect(logSpy).toHaveBeenCalled();
+
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer1: 1000.000ms 2",
+        expect.objectContaining({
+          label: "timer1",
+          settings: undefined,
+        })
+      );
     });
 
-    it("should log total and average time on timeEnd call without accumulative option", () => {
+    it("should log total and average time when accumulative timing is complete", () => {
       const logSpy = jest.spyOn(console, "log");
+
+      // First timing
+      performanceNowMock.mockReturnValue(1000);
       time("timer2");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer2", { accumulative: true });
-      timeEnd("timer2");
-      expect(logSpy).toHaveBeenCalled();
+
+      // Second timing
+      performanceNowMock.mockReturnValue(3000);
+      time("timer2");
+
+      performanceNowMock.mockReturnValue(5000);
+      timeEnd("timer2"); // This will log because timer is accumulative (callCount > 1)
+
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer2: 2000.000ms 2",
+        expect.objectContaining({
+          label: "timer2",
+          settings: undefined,
+        })
+      );
     });
   });
 });