@applicaster/zapp-react-native-utils 13.0.0-alpha.5335086935 → 13.0.0-alpha.5375459737

package/focusManager/index.ts

@@ -8,8 +8,6 @@ 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;
 }
@@ -76,14 +74,6 @@ 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,6 +91,7 @@ type Props = {
 
 export const useIsFocusable = (props: Props): void => {
   const { component, zappPipesData } = props;
+
   const { setIsFocusable } = useFocusable();
 
   const componentCellsFocusable = toBooleanWithDefaultTrue(
@@ -119,12 +110,7 @@ export const useIsFocusable = (props: Props): void => {
 
   const hasDataError = !!zappPipesData?.error;
 
-  const hasEmptyGroup = shouldShowEmptyGroup(component);
-
-  const isGallery = component?.component_type === "gallery-qb";
-
-  const isHiddenDueToEmptyData =
-    !isLoadingData && hasNoData && hideIfDataEmpty && !hasEmptyGroup;
+  const isHiddenDueToEmptyData = !isLoadingData && hasNoData && hideIfDataEmpty;
 
   const defaultFocusableLogic =
     componentCellsFocusable && (!hasNoData || !hideIfDataEmpty);
@@ -133,9 +119,7 @@ export const useIsFocusable = (props: Props): void => {
     if (isAndroidTVPlatform()) {
       let isFocusableNew = false;
 
-      if (isGallery) {
-        isFocusableNew = true;
-      } else if (isFocusable(component)) {
+      if (isFocusable(component)) {
         isFocusableNew = defaultFocusableLogic;
       }
 
@@ -144,9 +128,7 @@ export const useIsFocusable = (props: Props): void => {
   }, [
     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 };
 };
@@ -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/sharedConfiguration/screenPicker/stylesFields.js

@@ -24,7 +24,7 @@ const componentConfigurationFields = [
     initial_value: "vertical",
     options: [
       { text: "Vertical", value: "vertical" },
-      { text: "Horizontal (Beta)", value: "horizontal" },
+      { text: "Horizontal", value: "horizontal" },
     ],
   },
   {

package/modalState/__tests__/index.test.ts

@@ -0,0 +1,51 @@
+import { modalStore } from "../";
+
+describe("Modal State", () => {
+  it("should have initial state", () => {
+    const state = modalStore.getState();
+
+    expect(state).toMatchObject({
+      modalState: {
+        visible: false,
+        screen: null,
+        options: {},
+        props: {},
+      },
+    });
+
+    expect(state.openModal).toBeDefined();
+    expect(state.dismissModal).toBeDefined();
+  });
+
+  describe("opening and dismissing modal", () => {
+    it("should open modal", () => {
+      const item = { id: "test", name: "Test Modal" };
+      const options = { animated: true, animationType: "slide" };
+      const props = { customProp: "value" };
+
+      modalStore.getState().openModal({ item, options, props });
+
+      const state = modalStore.getState();
+
+      expect(state.modalState).toMatchObject({
+        visible: true,
+        screen: item,
+        options,
+        props,
+      });
+    });
+
+    it("should dismiss modal", () => {
+      modalStore.getState().dismissModal();
+
+      const state = modalStore.getState();
+
+      expect(state.modalState).toMatchObject({
+        visible: false,
+        screen: null,
+        options: {},
+        props: {},
+      });
+    });
+  });
+});

package/modalState/index.ts

@@ -1,4 +1,4 @@
-import { create } from "zustand";
+import { useStore, createStore } from "zustand";
 
 interface ModalState {
   visible: boolean;
@@ -25,7 +25,7 @@ const initialModalState: ModalState = {
   props: {},
 };
 
-export const useModalStore = create<ModalStore>((set) => ({
+export const modalStore = createStore<ModalStore>((set) => ({
   modalState: initialModalState,
   setModalState: (newState) =>
     set((state) => ({
@@ -51,3 +51,33 @@ export const useModalStore = create<ModalStore>((set) => ({
     }),
   dismissModal: () => set(() => ({ modalState: initialModalState })),
 }));
+
+export const useModalStore = <T>(selector: (state: ModalStore) => T) =>
+  useStore(modalStore, selector);
+
+export const openModal = modalStore.getInitialState().openModal;
+
+export const dismissModal = modalStore.getInitialState().dismissModal;
+
+export const openBottomSheetModal = ({
+  ModalBottomSheetContent,
+  modalBottomSheetContentProps,
+  props = {},
+  options = {},
+}: OpenModalBottomSheetArgs) => {
+  openModal({
+    item: {
+      ModalBottomSheetContent,
+      modalBottomSheetContentProps,
+    },
+    props,
+    options: {
+      animationType: "none",
+      animated: false,
+      ...options,
+    },
+  });
+};
+
+export const useModalStoreState = (): ModalState =>
+  useModalStore<ModalState>((state) => state.modalState);

package/navigationUtils/__tests__/__snapshots__/navigationUtils.test.js.snap

@@ -5,6 +5,7 @@ exports[`getNavigationProps returns the props otherwise 1`] = `
   "assets": {
     "appLogo": "appLogo.png",
   },
+  "data": undefined,
   "home": false,
   "nav_items": [
     {

package/navigationUtils/index.ts

@@ -111,6 +111,7 @@ export function getNavigationProps({
   assets: ZappNavBarAssets;
   rules: ZappNavBarRules;
   nav_items: NavBarItem[];
+  data: MenuItemDataProperties;
 } | null {
   const { activeRiver } = navigator;
   const { navigations, id: selected, home } = activeRiver; // use useRiver hook instead
@@ -124,7 +125,7 @@ export function getNavigationProps({
     return null;
   }
 
-  const { styles, assets, nav_items, rules } = navigation;
+  const { styles, assets, nav_items, rules, data } = navigation;
 
   return {
     selected,
@@ -134,6 +135,7 @@ export function getNavigationProps({
     assets: assets as ZappNavBarAssets,
     nav_items: nav_items as any as NavBarItem[],
     rules: rules as any as ZappNavBarRules,
+    data: data as MenuItemDataProperties,
   };
 }
 

package/numberUtils/__tests__/toPositiveNumberWithDefault.test.ts

@@ -1,10 +1,10 @@
 import { toPositiveNumberWithDefault } from "..";
 
-describe("toNumber", () => {
+describe("toPositiveNumberWithDefault", () => {
   const DEFAULT = 5;
 
   it("return number if input is positive number", () => {
-    const inputs = [0, 1, 2, 100, 200.12, Infinity];
+    const inputs = [1, 2, 100, 200.12, Infinity];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {
@@ -14,7 +14,7 @@ describe("toNumber", () => {
   });
 
   it("return number if input is positive number as string", () => {
-    const inputs = ["0", "1", "2", "100", "200.12"];
+    const inputs = ["1", "2", "100", "200.12"];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {
@@ -63,4 +63,24 @@ describe("toNumber", () => {
       expect(output).toBe(DEFAULT);
     });
   });
+
+  it("return default if input is zero number", () => {
+    const inputs = [0, -0];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default if input is zero string", () => {
+    const inputs = ["0", "-0"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
 });

package/numberUtils/index.ts

@@ -3,7 +3,7 @@ import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 const numberUtilsLogger = logger?.addSubsystem("NumberUtils");
 
-export const toNumber = (value: any): number | undefined => {
+export const toNumber = (value: unknown): number | undefined => {
   if (R.isNil(value) || R.isEmpty(value)) {
     return undefined;
   }
@@ -17,10 +17,12 @@ export const toNumber = (value: any): number | undefined => {
   return undefined;
 };
 
-export const toNumberWithDefault = (defaultValue: number, value: any): number =>
-  toNumber(value) ?? defaultValue;
+export const toNumberWithDefault = (
+  defaultValue: number,
+  value: unknown
+): number => toNumber(value) ?? defaultValue;
 
-export const toNumberWithDefaultZero = (value: any): number =>
+export const toNumberWithDefaultZero = (value: unknown): number =>
   toNumberWithDefault(0, value);
 
 export const requireNumber = (obj, key: string) => {
@@ -39,7 +41,7 @@ export const requireNumber = (obj, key: string) => {
 
 export const toFiniteNumberWithDefault = (
   defaultValue: number,
-  value: any
+  value: unknown
 ): number => {
   const possibleNumber = toNumberWithDefault(defaultValue, value);
 
@@ -81,6 +83,10 @@ export const toPositiveNumberWithDefault = (
     return defaultValue;
   }
 
+  if (isZero(possibleNumber)) {
+    return defaultValue;
+  }
+
   return possibleNumber;
 };
 

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.5335086935",
+  "version": "13.0.0-alpha.5375459737",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo skipping hybrid ts build in main packages for now"
   },
   "publishConfig": {
@@ -28,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.5335086935",
+    "@applicaster/applicaster-types": "13.0.0-alpha.5375459737",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",
@@ -45,8 +44,5 @@
     "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"
-  },
-  "devDependencies": {
-    "@types/react-native": "0.69.6"
   }
 }

package/playerUtils/configurationGenerator.ts

@@ -55,6 +55,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.",
+      },
     ],
   };
 
@@ -2549,6 +2557,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/reactHooks/advertising/index.ts

@@ -5,6 +5,7 @@ import * as R from "ramda";
 import { useNavigation } from "../navigation";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { dismissModal, openModal } from "../../modalState";
 
 const GOOGLE_ADS_IDENTIFIER = "google-admob-ads-qb";
 
@@ -14,9 +15,8 @@ const ModalContainer = platformSelect({
 });
 
 export function useAdvertisingInterstitial() {
-  const navigator = useNavigation();
+  const { screenData, currentRoute } = useNavigation();
   const { plugins } = usePickFromState();
-  const { screenData } = navigator;
 
   return useEffect(() => {
     // TODD: typing problem: fix any type
@@ -26,7 +26,7 @@ export function useAdvertisingInterstitial() {
         plugins
       );
 
-      navigator.openModal({
+      openModal({
         item: {},
         options: {
           ModalContainer,
@@ -36,11 +36,11 @@ export function useAdvertisingInterstitial() {
           screenType: "hooks",
           screenData: {
             payload: screenData,
-            callback: navigator.dismissModal,
+            callback: dismissModal,
             hookPlugin: GoogleAdsPlugin,
           },
         },
       });
     }
-  }, [navigator.currentRoute, screenData?.id]);
+  }, [currentRoute, screenData?.id]);
 }

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -35,25 +35,23 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component", async () => {
+  it("should update position for selected component - onViewportEnter", () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
 
-    // Fast-forward until all timers have been executed
-    jest.advanceTimersByTime(3000);
-
     expect(result.current.inViewPort).toBe(false);
 
     const mockRect = {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(() => {
-      result.current.onPositionUpdated(mockRect);
+    act(async () => {
+      await result.current.onPositionUpdated(mockRect);
     });
 
-    jest.advanceTimersByTime(3000);
+    // Fast-forward until all timers have been executed
+    jest.runAllTimers();
 
     expect(result.current.inViewPort).toBe(true);
 

package/reactHooks/autoscrolling/useTrackedView.ts

@@ -2,6 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { findTrackedView } from "./utils/findTrackedView";
+import { isNil } from "ramda";
+import { withTimeout } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT = 500; // ms
 
 const getNormalizedRect = (rect, componentId, screenWidth, screenHeight) => {
   if (!rect) {
@@ -37,9 +41,16 @@ export const useTrackedView = (componentId: string) => {
   );
 
   const onPositionUpdated = useCallback(
-    ({ rect }) => {
+    async ({ rect }) => {
       const currentPosition = normalizedRect(componentId, rect);
 
+      // There is an issue on the native side where they are unable to guarantee
+      // that the order of onViewportLeave and onViewportEnter events is always correct.
+      // This workaround/hack delays the onViewportEnter event to ensure it is received last.
+      if (!isNil(currentPosition)) {
+        await withTimeout(TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT);
+      }
+
       updateComponentsPositions(componentId, currentPosition as any);
 
       setInViewPort(!!currentPosition);