@applicaster/zapp-react-native-utils 15.0.0-alpha.5485312433 → 15.0.0-alpha.5531846549

package/reactHooks/dev/__tests__/useReRenderLog.test.ts

@@ -0,0 +1,188 @@
+import { renderHook } from "@testing-library/react-native";
+import { useReRenderLog } from "../index";
+
+describe("useReRenderLog", () => {
+  let consoleLogSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleLogSpy = jest.spyOn(console, "log").mockImplementation();
+  });
+
+  afterEach(() => {
+    consoleLogSpy.mockRestore();
+  });
+
+  it("should log on initial render", () => {
+    const message = "Test Component";
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<RE-RENDERED>>")
+    );
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 1>>")
+    );
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining(message)
+    );
+  });
+
+  it("should increment count on each re-render", () => {
+    const message = "Counter Test";
+
+    const { rerender } = renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 1>>")
+    );
+
+    rerender();
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 2>>")
+    );
+
+    rerender();
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining("<<COUNT: 3>>")
+    );
+  });
+
+  it("should log correct message format", () => {
+    const message = "MyComponent";
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      "<<RE-RENDERED>><<COUNT: 1>>: MyComponent"
+    );
+  });
+
+  it("should track renders independently for different hook instances", () => {
+    const message1 = "Component1";
+    const message2 = "Component2";
+
+    const { rerender: rerender1 } = renderHook(() => useReRenderLog(message1));
+
+    const { rerender: rerender2 } = renderHook(() => useReRenderLog(message2));
+
+    consoleLogSpy.mockClear();
+
+    rerender1();
+
+    expect(consoleLogSpy).toHaveBeenLastCalledWith(
+      expect.stringContaining("Component1")
+    );
+
+    rerender2();
+
+    expect(consoleLogSpy).toHaveBeenLastCalledWith(
+      expect.stringContaining("Component2")
+    );
+  });
+
+  it("should handle empty string message", () => {
+    renderHook(() => useReRenderLog(""));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith("<<RE-RENDERED>><<COUNT: 1>>: ");
+  });
+
+  it("should handle message with special characters", () => {
+    const message = "Test!@#$%^&*()";
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining(message)
+    );
+  });
+
+  it("should handle long messages", () => {
+    const message = "A".repeat(1000);
+
+    renderHook(() => useReRenderLog(message));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      expect.stringContaining(message)
+    );
+  });
+
+  it("should persist count across multiple re-renders", () => {
+    const message = "Persistence Test";
+
+    const { rerender } = renderHook(() => useReRenderLog(message));
+
+    for (let i = 2; i <= 10; i++) {
+      rerender();
+
+      expect(consoleLogSpy).toHaveBeenLastCalledWith(
+        expect.stringContaining(`<<COUNT: ${i}>>`)
+      );
+    }
+  });
+
+  it("should log on every render without dependencies", () => {
+    const message = "Every Render";
+
+    const { rerender } = renderHook(() => useReRenderLog(message));
+
+    const initialCallCount = consoleLogSpy.mock.calls.length;
+
+    rerender();
+    rerender();
+    rerender();
+
+    // Should have 4 total calls (initial + 3 rerenders)
+    expect(consoleLogSpy).toHaveBeenCalledTimes(initialCallCount + 3);
+  });
+
+  it("should handle numeric messages", () => {
+    renderHook(() => useReRenderLog(123 as any));
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(expect.stringContaining("123"));
+  });
+
+  it("should handle object messages", () => {
+    const obj = { key: "value" };
+
+    renderHook(() => useReRenderLog(obj as any));
+
+    expect(consoleLogSpy).toHaveBeenCalled();
+  });
+
+  it("should maintain separate refs for each instance", () => {
+    const { rerender: rerender1 } = renderHook(() =>
+      useReRenderLog("Instance1")
+    );
+
+    const { rerender: rerender2 } = renderHook(() =>
+      useReRenderLog("Instance2")
+    );
+
+    consoleLogSpy.mockClear();
+
+    // Render instance 1 twice more
+    rerender1();
+    rerender1();
+
+    // Render instance 2 once more
+    rerender2();
+
+    const calls = consoleLogSpy.mock.calls;
+
+    // Instance 1 should be at count 2 and 3
+    expect(calls[0][0]).toContain("Instance1");
+    expect(calls[0][0]).toContain("<<COUNT: 2>>");
+
+    expect(calls[1][0]).toContain("Instance1");
+    expect(calls[1][0]).toContain("<<COUNT: 3>>");
+
+    // Instance 2 should be at count 2
+    expect(calls[2][0]).toContain("Instance2");
+    expect(calls[2][0]).toContain("<<COUNT: 2>>");
+  });
+});

package/reactHooks/device/useIsTablet.tsx

@@ -1,28 +1,23 @@
 /* eslint react-native/split-platform-components: off */
 
 import { Platform, PlatformIOSStatic, NativeModules } from "react-native";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { F as alwaysFalse } from "ramda";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-const useIsTabletIos = (): boolean => {
-  const { isPad } = Platform as PlatformIOSStatic;
+export const useIsTablet = (): boolean => {
+  const platform = Platform.OS;
 
-  return isPad;
-};
+  if (platform === "ios") {
+    const { isPad } = Platform as PlatformIOSStatic;
 
-const useIsTabletAndroid = (): boolean => {
-  const { initialProps } = NativeModules.QuickBrickCommunicationModule;
+    return Boolean(isPad);
+  }
 
-  return toBooleanWithDefaultFalse(initialProps?.is_tablet);
-};
+  if (platform === "android") {
+    const initialProps =
+      NativeModules.QuickBrickCommunicationModule?.initialProps;
 
-export const useIsTablet = platformSelect({
-  ios: useIsTabletIos,
-  android: useIsTabletAndroid,
-  lg_tv: alwaysFalse,
-  samsung_tv: alwaysFalse,
-  android_tv: alwaysFalse,
-  tvos: alwaysFalse,
-  default: alwaysFalse,
-});
+    return toBooleanWithDefaultFalse(initialProps?.is_tablet);
+  }
+
+  return false;
+};

package/reactHooks/events/index.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { scrollEndReached$ } from "@applicaster/zapp-react-native-ui-components/events";
+import { filter } from "rxjs/operators";
+
+/**
+ * Subscribe to scroll-end-reached and call loadNextData only when this item is last in the river.
+ * Use in Grid/List so they load next page when the user scrolls to the end (river or tabs scroll container).
+ */
+export function useScrollEndReachedLoadNext(
+  isLast: boolean,
+  loadNextData: () => void
+): void {
+  React.useEffect(() => {
+    const sub = scrollEndReached$.pipe(filter(() => isLast)).subscribe(() => {
+      loadNextData();
+    });
+
+    return () => sub.unsubscribe();
+  }, [isLast, loadNextData]);
+}

package/reactHooks/feed/index.ts

@@ -1,5 +1,3 @@
-export { useFeedRefresh, feedRefreshLogger } from "./useFeedRefresh";
-
 export { useFeedLoader } from "./useFeedLoader";
 
 export { getSearchContext, getInflatedDataSourceUrl } from "./useInflatedUrl";

package/reactHooks/feed/useInflatedUrl.ts

@@ -45,7 +45,7 @@ interface GetInflatedDataSourceUrl {
   (properties: {
     source?: string;
     contexts: {
-      entry?: ZappEntry;
+      entry?: ZappEntry & { parent?: ZappEntry };
       screen?: ZappRiver;
       search?: object | string;
     };

package/reactHooks/index.ts

@@ -15,3 +15,5 @@ export * from "./device";
 export * from "./screen";
 
 export * from "./state";
+
+export * from "./events";

package/reactHooks/resolvers/useComponentResolver.ts

@@ -1,6 +1,8 @@
 /// <reference types="@applicaster/applicaster-types" />
 import * as React from "react";
 
+import { coreLogger } from "@applicaster/zapp-react-native-utils/logger";
+
 import { findComponentByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
   usePlugins,
@@ -23,7 +25,7 @@ export function useComponentResolver(
 
   const components = useAppSelector(selectComponents);
 
-  return React.useMemo(
+  const component = React.useMemo(
     () =>
       findComponentByType({
         components,
@@ -33,4 +35,12 @@ export function useComponentResolver(
       }),
     watchers
   );
+
+  if (!component) {
+    coreLogger.warn({
+      message: `useComponentResolver: Component of type ${componentType} not found`,
+    });
+  }
+
+  return component;
 }

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