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

package/reactHooks/screen/__tests__/useCurrentScreenIsStartupHook.test.ts

@@ -0,0 +1,94 @@
+import { renderHook } from "@testing-library/react-native";
+import { useCurrentScreenIsStartupHook } from "../useCurrentScreenIsStartupHook";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks");
+jest.mock("@applicaster/zapp-react-native-utils/arrayUtils");
+
+const mockUseNavigation = useNavigation as jest.Mock;
+const mockIsFilledArray = isFilledArray as jest.Mock;
+
+describe("useCurrentScreenIsStartupHook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns true when startUpHooks is a filled array", () => {
+    mockUseNavigation.mockReturnValue({
+      startUpHooks: ["hook1"],
+    });
+
+    mockIsFilledArray.mockReturnValue(true);
+
+    const { result } = renderHook(() => useCurrentScreenIsStartupHook());
+
+    expect(result.current).toBe(true);
+    expect(mockIsFilledArray).toHaveBeenCalledWith(["hook1"]);
+  });
+
+  it('returns true when startUpHooks is "in_process"', () => {
+    mockUseNavigation.mockReturnValue({
+      startUpHooks: "in_process",
+    });
+
+    mockIsFilledArray.mockReturnValue(false);
+
+    const { result } = renderHook(() => useCurrentScreenIsStartupHook());
+
+    expect(result.current).toBe(true);
+    expect(mockIsFilledArray).toHaveBeenCalledWith("in_process");
+  });
+
+  it("returns false when startUpHooks is empty array", () => {
+    mockUseNavigation.mockReturnValue({
+      startUpHooks: [],
+    });
+
+    mockIsFilledArray.mockReturnValue(false);
+
+    const { result } = renderHook(() => useCurrentScreenIsStartupHook());
+
+    expect(result.current).toBe(false);
+    expect(mockIsFilledArray).toHaveBeenCalledWith([]);
+  });
+
+  it("returns false when startUpHooks is undefined", () => {
+    mockUseNavigation.mockReturnValue({
+      startUpHooks: undefined,
+    });
+
+    mockIsFilledArray.mockReturnValue(false);
+
+    const { result } = renderHook(() => useCurrentScreenIsStartupHook());
+
+    expect(result.current).toBe(false);
+    expect(mockIsFilledArray).toHaveBeenCalledWith(undefined);
+  });
+
+  it("returns false when startUpHooks is null", () => {
+    mockUseNavigation.mockReturnValue({
+      startUpHooks: null,
+    });
+
+    mockIsFilledArray.mockReturnValue(false);
+
+    const { result } = renderHook(() => useCurrentScreenIsStartupHook());
+
+    expect(result.current).toBe(false);
+    expect(mockIsFilledArray).toHaveBeenCalledWith(null);
+  });
+
+  it("prioritizes filled array over string comparison", () => {
+    mockUseNavigation.mockReturnValue({
+      startUpHooks: ["hook1"],
+    });
+
+    mockIsFilledArray.mockReturnValue(true);
+
+    const { result } = renderHook(() => useCurrentScreenIsStartupHook());
+
+    expect(result.current).toBe(true);
+  });
+});

package/reactHooks/screen/__tests__/useScreenBackgroundColor.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",

package/reactHooks/screen/__tests__/useScreenData.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 
 const mockStore = configureStore();

package/reactHooks/screen/__tests__/useTargetScreenData.test.tsx

@@ -1,24 +1,16 @@
 import * as React from "react";
 import { Provider } from "react-redux";
-import { renderHook } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
-import { thunk } from "redux-thunk";
+import thunk from "redux-thunk";
 
 const mockStore = configureStore([thunk]);
 
 import { useTargetScreenData } from "../useTargetScreenData";
 
 describe("useTargetScreenData", function () {
-  const river_id_2 = {
-    id: "river_id_2",
-    type: "any",
-  };
-
-  const river_id_1 = {
-    id: "river_id_1",
-    type: "any",
-  };
-
+  const river_id_2 = {};
+  const river_id_1 = {};
   const screenId = "river_id_2";
   const entry = { id: "test", type: { value: "video" } };
 

package/reactHooks/screen/index.ts

@@ -12,3 +12,9 @@ export {
 } from "./useScreenContext";
 
 export { useScreenBackgroundColor } from "./useScreenBackgroundColor";
+
+export { useCurrentScreenIsHook } from "./useCurrentScreenIsHook";
+
+export { useCurrentScreenIsStartupHook } from "./useCurrentScreenIsStartupHook";
+
+export { useIsStandaloneFullscreen } from "./useIsStandaloneFullscreen";

package/reactHooks/screen/useCurrentScreenIsHook.ts

@@ -0,0 +1,9 @@
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
+export const useCurrentScreenIsHook = (): boolean => {
+  const { mainStack = [] } = useNavigation();
+
+  return toBooleanWithDefaultFalse(last(mainStack)?.route?.includes("hook"));
+};

package/reactHooks/screen/useCurrentScreenIsStartupHook.ts

@@ -0,0 +1,8 @@
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
+
+export const useCurrentScreenIsStartupHook = (): boolean => {
+  const { startUpHooks } = useNavigation();
+
+  return isFilledArray(startUpHooks) || startUpHooks === "in_process";
+};

package/reactHooks/screen/useIsStandaloneFullscreen.ts

@@ -0,0 +1,12 @@
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
+export const useIsStandaloneFullscreen = (): boolean => {
+  const navigator = useNavigation();
+
+  return toBooleanWithDefaultFalse(
+    !navigator?.canGoBack() &&
+      // @ts-ignore
+      navigator?.screenData?.general?.allow_screen_plugin_presentation
+  );
+};

package/reactHooks/screen/useTargetScreenData.ts

@@ -1,8 +1,7 @@
 import React from "react";
-import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import * as R from "ramda";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import { useRivers } from "../state";
 
 export function getTargetScreenData(
   entry: ZappEntry,
@@ -44,8 +43,7 @@ export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
 }
 
 export const useTargetScreenData = (entry: ZappEntry) => {
-  const rivers = useRivers();
-  const contentTypes = useContentTypes();
+  const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);
 
   return React.useMemo(
     () => getTargetScreenData(entry, rivers, contentTypes),

package/reactHooks/state/__tests__/useComponentScreenState.test.ts

@@ -0,0 +1,246 @@
+import { renderHook, act } from "@testing-library/react-native";
+import { useComponentScreenState } from "../useComponentScreenState";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+
+import { create } from "zustand";
+
+const createMockStore = () => create(() => ({}));
+
+// Mock the external dependencies
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContextV2: jest.fn(),
+  })
+);
+
+const mockUseScreenContextV2 = useScreenContextV2 as jest.MockedFunction<
+  typeof useScreenContextV2
+>;
+
+describe("useComponentScreenState", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return initial value when no state exists for componentId", () => {
+    const mockStore = createMockStore();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _componentStateStore: mockStore,
+    } as any);
+
+    const initialValue = "default-value";
+    const componentId = "test-component";
+
+    const { result } = renderHook(() =>
+      useComponentScreenState(componentId, initialValue)
+    );
+
+    expect(result.current[0]).toBe(initialValue);
+  });
+
+  it("should return stored value when state exists for componentId", () => {
+    const mockStore = createMockStore();
+    mockStore.setState({ "existing-component": "stored-value" });
+
+    mockUseScreenContextV2.mockReturnValue({
+      _componentStateStore: mockStore,
+    } as any);
+
+    const { result } = renderHook(() =>
+      useComponentScreenState("existing-component", "default")
+    );
+
+    expect(result.current[0]).toBe("stored-value");
+  });
+
+  it("should update state when setter is called", () => {
+    const mockStore = createMockStore();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _componentStateStore: mockStore,
+    } as any);
+
+    const { result } = renderHook(() =>
+      useComponentScreenState("update-test", "initial")
+    );
+
+    // Verify initial value
+    expect(result.current[0]).toBe("initial");
+
+    // Update the value
+    act(() => {
+      result.current[1]("updated-value");
+    });
+
+    // Verify updated value
+    expect(result.current[0]).toBe("updated-value");
+  });
+
+  it("should handle different data types correctly", () => {
+    const mockStore = createMockStore();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _componentStateStore: mockStore,
+    } as any);
+
+    // Test with number
+    const { result: numberResult } = renderHook(() =>
+      useComponentScreenState<number>("number-test", 42)
+    );
+
+    expect(numberResult.current[0]).toBe(42);
+
+    // Test with boolean
+    const { result: boolResult } = renderHook(() =>
+      useComponentScreenState<boolean>("bool-test", true)
+    );
+
+    expect(boolResult.current[0]).toBe(true);
+
+    // Test with object
+    const testObj = { key: "value" };
+
+    const { result: objResult } = renderHook(() =>
+      useComponentScreenState<{ key: string }>("obj-test", testObj)
+    );
+
+    expect(objResult.current[0]).toEqual(testObj);
+  });
+
+  it("should maintain separate states for different componentIds", () => {
+    const mockStore = createMockStore();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _componentStateStore: mockStore,
+    } as any);
+
+    const { result: firstResult } = renderHook(() =>
+      useComponentScreenState("first", "first-initial")
+    );
+
+    const { result: secondResult } = renderHook(() =>
+      useComponentScreenState("second", "second-initial")
+    );
+
+    // Verify initial values are separate
+    expect(firstResult.current[0]).toBe("first-initial");
+    expect(secondResult.current[0]).toBe("second-initial");
+
+    // Update first component's state
+    act(() => {
+      firstResult.current[1]("first-updated");
+    });
+
+    // Verify only first component's state changed
+    expect(firstResult.current[0]).toBe("first-updated");
+    expect(secondResult.current[0]).toBe("second-initial");
+  });
+
+  it("should return a memoized setter function", () => {
+    const mockStore = createMockStore();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _componentStateStore: mockStore,
+    } as any);
+
+    const { result, rerender } = renderHook(
+      ({ id, initial }) => useComponentScreenState(id, initial),
+      {
+        initialProps: { id: "memo-test", initial: "initial" },
+      }
+    );
+
+    const firstSetter = result.current[1];
+
+    // Rerender with same props
+    rerender({ id: "memo-test", initial: "initial" });
+
+    const secondSetter = result.current[1];
+
+    // Setter should be the same instance due to useCallback
+    expect(firstSetter).toBe(secondSetter);
+  });
+
+  it("should update setter when componentId changes", () => {
+    const mockStore = createMockStore();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _componentStateStore: mockStore,
+    } as any);
+
+    const { result, rerender } = renderHook(
+      ({ id, initial }) => useComponentScreenState(id, initial),
+      {
+        initialProps: { id: "old-id", initial: "initial" },
+      }
+    );
+
+    const firstSetter = result.current[1];
+
+    // Rerender with different componentId
+    rerender({ id: "new-id", initial: "initial" });
+
+    const secondSetter = result.current[1];
+
+    // Setter should be different because componentId changed
+    expect(firstSetter).not.toBe(secondSetter);
+  });
+
+  it("should call store.setState with correct parameters", () => {
+    const mockStore = createMockStore();
+    const setStateSpy = jest.spyOn(mockStore, "setState");
+
+    mockUseScreenContextV2.mockReturnValue({
+      _componentStateStore: mockStore,
+    } as any);
+
+    const { result } = renderHook(() =>
+      useComponentScreenState("state-test", "initial")
+    );
+
+    const newValue = "new-value";
+
+    act(() => {
+      result.current[1](newValue);
+    });
+
+    expect(setStateSpy).toHaveBeenCalledWith({
+      "state-test": newValue,
+    });
+  });
+
+  it("should handle falsy initial values correctly", () => {
+    const mockStore = createMockStore();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _componentStateStore: mockStore,
+    } as any);
+
+    // Test with falsy values
+    const { result: nullResult } = renderHook(() =>
+      useComponentScreenState("null-test", null)
+    );
+
+    expect(nullResult.current[0]).toBeNull();
+
+    const { result: falseResult } = renderHook(() =>
+      useComponentScreenState("false-test", false)
+    );
+
+    expect(falseResult.current[0]).toBe(false);
+
+    const { result: zeroResult } = renderHook(() =>
+      useComponentScreenState("zero-test", 0)
+    );
+
+    expect(zeroResult.current[0]).toBe(0);
+
+    const { result: emptyStrResult } = renderHook(() =>
+      useComponentScreenState("empty-test", "")
+    );
+
+    expect(emptyStrResult.current[0]).toBe("");
+  });
+});

package/reactHooks/state/index.ts

@@ -3,3 +3,5 @@ export { useRivers } from "./useRivers";
 export { useHomeRiver, getHomeRiver } from "./useHomeRiver";
 
 export { ZStoreProvider, useZStore } from "./ZStoreProvider";
+
+export { useComponentScreenState } from "./useComponentScreenState";

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