@applicaster/zapp-react-native-utils 15.0.0-rc.99 → 15.1.0-alpha.4285753931

package/reactHooks/state/useComponentScreenState.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useStore } from "zustand";
+
+/**
+ * A custom hook that provides persistent state storage across component re-mounts
+ * using the screen's component state store.
+ *
+ * @see {@link DOCS/adr/0010-useComponentScreenState.md} - ADR explaining why useComponentScreenState is used for List/Hero/Grid/Gallery components
+ *
+ * The state is shared across all components using the same componentId within the same screen context.
+ * If no value exists for the componentId, the initial value is returned as a fallback but is not persisted in the store.
+ * The initial value must be explicitly set using the returned setter function to persist it.
+ *
+ * @template T - The type of value being stored
+ * @param componentId - Unique identifier for this state in the component state store
+ * @param initialValue - The default value if no value exists for the componentId
+ * @returns A tuple containing the current value and a memoized setter function
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = useComponentScreenState<number>('counter', 0);
+ * const [name, setName] = useComponentScreenState<string>('username', 'Anonymous');
+ * ```
+ */
+export const useComponentScreenState = <T = unknown>(
+  componentId: string,
+  initialValue: T
+): [T, (value: T) => void] => {
+  const store = useScreenContextV2()._componentStateStore;
+
+  const value = useStore(
+    store,
+    (state) => (state[componentId] as T | undefined) ?? initialValue
+  );
+
+  const setValue = React.useCallback(
+    (nextValue: T) => {
+      store.setState({ [componentId]: nextValue });
+    },
+    [componentId, store]
+  );
+
+  return [value, setValue] as const;
+};

package/reactHooks/state/useRivers.ts

@@ -3,6 +3,6 @@ import {
   selectRivers,
 } from "@applicaster/zapp-react-native-redux";
 
-export function useRivers() {
+export function useRivers(): Record<string, ZappRiver> {
   return useAppSelector(selectRivers);
 }

package/reactHooks/usePluginConfiguration.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
 import { useMemo } from "react";
 
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 // importing this way prevents typescript packages importing from this
 // file to go crazy reporting errors on JS
@@ -25,7 +25,7 @@ export function parsePluginConfiguration(plugin, manifest) {
 }
 
 export function usePluginConfiguration<T, S>(identifier, manifest) {
-  const plugins = usePlugins();
+  const { plugins } = usePickFromState(["plugins"]);
 
   const plugin = useMemo(
     () => R.find(R.propEq("identifier", identifier), plugins),

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

@@ -1,5 +1,5 @@
 import { usePrevious, useIsInitialRender } from "../";
-import { renderHook, cleanup } from "@testing-library/react-native";
+import { renderHook, cleanup } from "@testing-library/react-hooks";
 
 describe("usePrevious", () => {
   it("renders", () => {

package/reactHooks/videoModal/hooks/useVideoModalScreenData.tsx

@@ -2,6 +2,12 @@ import React from "react";
 import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useRivers } from "../../state";
+import { createLogger } from "../../../logger";
+
+const { log_warning } = createLogger({
+  subsystem: "zapp-react-native-utils/reactHooks/videoModal",
+  category: "useVideoModalScreenData",
+});
 
 export const useVideoModalScreenData = ():
   | (ZappEntry & { targetScreen: any }) // TODO: fix ZappEntry type ( was ZappRiver but conflict )
@@ -14,10 +20,22 @@ export const useVideoModalScreenData = ():
   const rivers = useRivers();
 
   return React.useMemo(() => {
-    if (item?.type?.value) {
-      const screenId = contentTypes[item?.type?.value].screen_id;
+    const itemType = item?.type?.value;
+
+    if (!itemType) {
+      return;
+    }
 
-      return { ...item, targetScreen: rivers?.[screenId] };
+    const screenId = contentTypes[itemType]?.screen_id;
+
+    if (!screenId) {
+      log_warning(
+        `Type mapping is missing for item type: ${itemType}, title: ${item.title}`
+      );
+
+      return;
     }
-  }, [item]);
+
+    return { ...item, targetScreen: rivers?.[screenId] };
+  }, [contentTypes, item, rivers]);
 };

package/rectUtils/index.ts

@@ -9,7 +9,7 @@
  */
 export function measureDimensionalIntersection(direction, current, target) {
   if (direction.isHorizontal) {
-    return measureVerticalIntersection(current, target);
+    return measureVerticalIntersectiont(current, target);
   } else {
     return measureHorizontalIntersection(current, target);
   }
@@ -25,7 +25,7 @@ export function measureDimensionalIntersection(direction, current, target) {
  * @param {Object} target rect object {right, left, top, bottom, x, y, width. height}
  * @returns {Int} Returns vertical intersection of current and target object
  */
-export function measureVerticalIntersection(current, target) {
+export function measureVerticalIntersectiont(current, target) {
   if (target.top >= current.bottom || target.bottom <= current.top) {
     return 0;
   }

package/riverComponetsMeasurementProvider/index.tsx

@@ -1,10 +1,20 @@
 import * as React from "react";
-import { NativeModules, StyleSheet, View } from "react-native";
+import { NativeModules, View, StyleSheet } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
-import { isApplePlatform, isWeb } from "../reactUtils";
+import { isApplePlatform, isWeb, isTV } from "../reactUtils";
 import { useRivers } from "../reactHooks";
 
+const isTVPlatform = isTV();
+
+const styles = StyleSheet.create({
+  container: isTVPlatform
+    ? {
+        flex: 1,
+      }
+    : undefined,
+});
+
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({
     height: index === payload.index ? payload.height : item.height,
@@ -30,12 +40,6 @@ type MeasurementContext = {
   onLayout: (index: number) => (event) => void;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
 const { Logger } = getXray();
 
 const logger = new Logger("general", "ui");
@@ -152,9 +156,5 @@ export const ScreenLoadingMeasurementsListItemWrapper = ({
 }: ItemProps) => {
   const { onLayout } = React.useContext(MeasurementsSettersContext);
 
-  return (
-    <View style={styles.container} onLayout={onLayout?.(index)}>
-      {children}
-    </View>
-  );
+  return <View onLayout={onLayout?.(index)}>{children}</View>;
 };

package/screenPickerUtils/index.ts

@@ -1,3 +1,5 @@
+import { endsWith } from "@applicaster/zapp-react-native-utils/utils";
+
 export const getFocusableId = (id) => `PickerItem.${id}`;
 
 export const getPickerSelectorId = (id) => `PickerSelector.${id}`;
@@ -11,3 +13,6 @@ export const getScreenPickerSelectorContainerId = (id) =>
 
 export const getScreenPickerContentContainerId = (id) =>
   `${getScreenPickerId(id)}-screen-container`;
+
+export const isTabsScreenContentContainerId = (id) =>
+  endsWith("-screen-container", id);

package/screenState/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-native";
+import { act, renderHook } from "@testing-library/react-hooks";
 import { useScreenState } from "../index";
 
 describe("useScreenState", () => {

package/stringUtils/index.ts

@@ -4,7 +4,7 @@ declare const global;
 import * as R from "ramda";
 import camelize from "camelize";
 // @ts-ignore
-import Handlebars from "handlebars";
+import Handlebars from "react-native-handlebars";
 
 global.Buffer = global.Buffer || require("buffer").Buffer;
 

package/testUtils/index.tsx

@@ -4,7 +4,7 @@ import React, { PropsWithChildren } from "react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { View } from "react-native";
-import { thunk } from "redux-thunk";
+import thunk from "redux-thunk";
 import * as R from "ramda";
 
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
@@ -56,29 +56,9 @@ const initialState = {
   contentTypes: null,
 };
 
-const themeObjDefault = {
-  component_margin_top: 0,
-  component_margin_bottom: 0,
-  component_margin_left: 0,
-  component_margin_right: 0,
-  component_padding_top: 0,
-  component_padding_bottom: 0,
-  component_padding_left: 0,
-  component_padding_right: 0,
-  component_gutter_vertical: 0,
-  component_gutter_horizontal: 0,
-  component_corner_radius: 0,
-  app_background_color: "rgba(0,0,0,0)",
-  screen_margin_top: 0,
-  screen_margin_bottom: 0,
-  component_anchor_point_y: 0,
-  assets: "",
-};
-
 export const WrappedWithProviders = ({
   children,
   store: storeObj = {},
-  theme: themeObj = themeObjDefault,
 }: any) => {
   const _store = configureStore([thunk])(
     R.mergeDeepRight(initialState, { ...storeObj })
@@ -90,7 +70,24 @@ export const WrappedWithProviders = ({
     <ThemeContext.Provider
       value={{
         themes: {
-          light: themeObj,
+          light: {
+            component_margin_top: 0,
+            component_margin_bottom: 0,
+            component_margin_left: 0,
+            component_margin_right: 0,
+            component_padding_top: 0,
+            component_padding_bottom: 0,
+            component_padding_left: 0,
+            component_padding_right: 0,
+            component_gutter_vertical: 0,
+            component_gutter_horizontal: 0,
+            component_corner_radius: 0,
+            app_background_color: "rgba(0,0,0,0)",
+            screen_margin_top: 0,
+            screen_margin_bottom: 0,
+            component_anchor_point_y: 0,
+            assets: "",
+          },
         },
         selectedThemeId: "light",
         setSelectedThemeId: () => {},
@@ -116,17 +113,11 @@ export const WrappedWithProviders = ({
  * @param store optional store to pass to the provider
  * @returns
  */
-export const renderWithProviders = (
-  component,
-  storeObj?: unknown,
-  themeObj?: unknown
-) => {
+export const renderWithProviders = (component, storeObj?: unknown) => {
   return render(component, {
     wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
       return (
-        <WrappedWithProviders store={storeObj} theme={themeObj}>
-          {children}
-        </WrappedWithProviders>
+        <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
       );
     },
   });

package/typeGuards/index.ts

@@ -1,7 +1,3 @@
 export const isString = (value: unknown) => {
-  if (typeof value === "object" && value instanceof String) {
-    return true;
-  }
-
   return typeof value === "string";
 };

package/utils/__tests__/clone.test.ts

@@ -0,0 +1,158 @@
+import { clone } from "../clone";
+
+describe("clone", () => {
+  const originalStructuredClone = global.structuredClone;
+
+  afterEach(() => {
+    // Restore the original structuredClone after each test
+    global.structuredClone = originalStructuredClone;
+  });
+
+  describe("when structuredClone is available", () => {
+    beforeEach(() => {
+      // Mock structuredClone if it's not available
+      if (typeof global.structuredClone === "undefined") {
+        global.structuredClone = jest.fn((value) =>
+          JSON.parse(JSON.stringify(value))
+        );
+      }
+    });
+
+    test("clones primitive values", () => {
+      expect(clone(42)).toBe(42);
+      expect(clone("test")).toBe("test");
+      expect(clone(true)).toBe(true);
+      expect(clone(null)).toBe(null);
+    });
+
+    test("clones simple objects", () => {
+      const original = { a: 1, b: 2 };
+      const cloned = clone(original);
+
+      expect(cloned).toEqual(original);
+      expect(cloned).not.toBe(original);
+    });
+
+    test("clones nested objects", () => {
+      const original = { a: { b: { c: 1 } } };
+      const cloned = clone(original);
+
+      expect(cloned).toEqual(original);
+      expect(cloned).not.toBe(original);
+      expect(cloned.a).not.toBe(original.a);
+      expect(cloned.a.b).not.toBe(original.a.b);
+    });
+
+    test("clones arrays", () => {
+      const original = [1, 2, 3];
+      const cloned = clone(original);
+
+      expect(cloned).toEqual(original);
+      expect(cloned).not.toBe(original);
+    });
+
+    test("clones arrays with nested objects", () => {
+      const original = [{ a: 1 }, { b: 2 }];
+      const cloned = clone(original);
+
+      expect(cloned).toEqual(original);
+      expect(cloned).not.toBe(original);
+      expect(cloned[0]).not.toBe(original[0]);
+      expect(cloned[1]).not.toBe(original[1]);
+    });
+
+    test("does not mutate the original value", () => {
+      const original = { a: 1, b: { c: 2 } };
+      const cloned = clone(original);
+
+      cloned.a = 99;
+      cloned.b.c = 99;
+
+      expect(original.a).toBe(1);
+      expect(original.b.c).toBe(2);
+    });
+  });
+
+  describe("when structuredClone is not available (fallback to cloneDeep)", () => {
+    beforeEach(() => {
+      // Delete structuredClone to force fallback to cloneDeep
+      delete (global as any).structuredClone;
+    });
+
+    test("clones primitive values using cloneDeep", () => {
+      expect(clone(42)).toBe(42);
+      expect(clone("test")).toBe("test");
+      expect(clone(true)).toBe(true);
+      expect(clone(null)).toBe(null);
+    });
+
+    test("clones simple objects using cloneDeep", () => {
+      const original = { a: 1, b: 2 };
+      const cloned = clone(original);
+
+      expect(cloned).toEqual(original);
+      expect(cloned).not.toBe(original);
+    });
+
+    test("clones nested objects using cloneDeep", () => {
+      const original = { a: { b: { c: 1 } } };
+      const cloned = clone(original);
+
+      expect(cloned).toEqual(original);
+      expect(cloned).not.toBe(original);
+      expect(cloned.a).not.toBe(original.a);
+      expect(cloned.a.b).not.toBe(original.a.b);
+    });
+
+    test("clones arrays using cloneDeep", () => {
+      const original = [1, 2, 3];
+      const cloned = clone(original);
+
+      expect(cloned).toEqual(original);
+      expect(cloned).not.toBe(original);
+    });
+
+    test("clones arrays with nested objects using cloneDeep", () => {
+      const original = [{ a: 1 }, { b: 2 }];
+      const cloned = clone(original);
+
+      expect(cloned).toEqual(original);
+      expect(cloned).not.toBe(original);
+      expect(cloned[0]).not.toBe(original[0]);
+      expect(cloned[1]).not.toBe(original[1]);
+    });
+
+    test("does not mutate the original value when using cloneDeep", () => {
+      const original = { a: 1, b: { c: 2 } };
+      const cloned = clone(original);
+
+      cloned.a = 99;
+      cloned.b.c = 99;
+
+      expect(original.a).toBe(1);
+      expect(original.b.c).toBe(2);
+    });
+
+    test("handles complex objects with multiple levels", () => {
+      const original = {
+        name: "test",
+        data: {
+          items: [
+            { id: 1, value: "a" },
+            { id: 2, value: "b" },
+          ],
+          meta: { count: 2 },
+        },
+      };
+
+      const cloned = clone(original);
+
+      expect(cloned).toEqual(original);
+      expect(cloned).not.toBe(original);
+      expect(cloned.data).not.toBe(original.data);
+      expect(cloned.data.items).not.toBe(original.data.items);
+      expect(cloned.data.items[0]).not.toBe(original.data.items[0]);
+      expect(cloned.data.meta).not.toBe(original.data.meta);
+    });
+  });
+});

package/utils/clone.ts

@@ -0,0 +1,7 @@
+import { cloneDeep } from "lodash";
+
+export const clone = (value) => {
+  return typeof structuredClone !== "undefined"
+    ? structuredClone(value) // no support for hermes, fallback to cloneDeep
+    : cloneDeep(value);
+};

package/utils/index.ts

@@ -18,10 +18,9 @@ export { take } from "./take";
 
 export { mapAccum } from "./mapAccum";
 
-export { mergeRight } from "./mergeRight";
+export { clone } from "./clone";
 
 export {
-  cloneDeep as clone,
   flatten,
   drop,
   size,
@@ -38,20 +37,9 @@ export {
   last,
   toLower,
   isEqual as equals,
-  uniq,
   uniqWith,
   flowRight as compose,
   partial,
-  clamp,
   reverse,
-  takeRight,
-  fromPairs,
-  sortBy,
-  merge,
-  values,
-  head,
-  findIndex,
-  set,
   compact,
-  identity,
 } from "lodash";

package/utils/path.ts

@@ -1,8 +1,5 @@
-import { pathOr } from "./pathOr";
+import { get } from "lodash";
 
-export const path = <T = any>(
-  route: (string | number) | (string | number)[],
-  record: any
-) => {
-  return pathOr<T>(undefined, route, record);
+export const path = (route, record) => {
+  return get(record, route, undefined);
 };

package/utils/pathOr.ts

@@ -1,9 +1,5 @@
 import { get } from "lodash";
 
-export const pathOr = <T = any>(
-  defaultValue: T,
-  path: (number | string) | (number | string)[],
-  record: any
-): T => {
+export const pathOr = (defaultValue, path, record) => {
   return get(record, path, defaultValue);
 };

package/zappFrameworkUtils/HookCallback/callbackNavigationAction.ts

@@ -85,7 +85,7 @@ export const getNavigationKeys = (
   const general = (item?.general ?? {}) as General;
 
   const pluginIdentifier =
-    (item as any).identifier ?? item?.type ?? item?.component_type ?? "";
+    (item as any)?.identifier ?? item?.type ?? item?.component_type ?? "";
 
   const legacy =
     legacyMappingKeys[`${pluginIdentifier}.${resultType}`] ??
@@ -197,7 +197,7 @@ export const useCallbackNavigationAction = (
         }
       }
 
-      hookCallback?.({ ...args, success: false, cancelled: true });
+      hookCallback?.({ ...args, success: false, abort: true });
       const currentNavigation = navigationRef.current;
 
       switch (data.action) {

package/zappFrameworkUtils/HookCallback/hookCallbackManifestExtensions.config.js

@@ -20,7 +20,7 @@ const callbackKeyPrefix = (key, prefix, keySeparator = "_") =>
 
 const extendManifestWithHookCallback = (prefix = null) => ({
   group: true,
-  label: `CallBack Navigation: ${prefix}`,
+  label: prefix ? `Callback Navigation: ${prefix}` : "Callback Navigation",
   folded: true,
   fields: [
     {

package/zappFrameworkUtils/loginPluginUtils.ts

@@ -20,7 +20,7 @@ const isAuthenticationRequired = ({ payload, logs }) => {
 
   if (!payload) {
     log_info(
-      "isAuthenticationRequired: No payload exist, authentication required"
+      "isAuthenticationRequired: No payload exists, authentication required"
     );
 
     return true;