@applicaster/zapp-react-native-utils 15.0.0-rc.98 → 15.1.0-alpha.1852552014

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

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