@applicaster/zapp-react-native-utils 15.0.0-rc.12 → 15.0.0-rc.120

package/reactHooks/navigation/index.ts

@@ -1,21 +1,24 @@
-import { useContext, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { BackHandler } from "react-native";
+import { shallow } from "zustand/shallow";
 
 import {
   useContentTypes,
-  usePickFromState,
+  usePlugins,
 } from "@applicaster/zapp-react-native-redux/hooks";
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
-import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
+import { useZappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
 
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { pick } from "@applicaster/zapp-react-native-utils/utils";
 import { useNavbarState } from "../screen";
+import { useRivers } from "../state";
+import { useLayoutVersion } from "../layout";
 
 export { useNavigation } from "./useNavigation";
 
@@ -86,6 +89,10 @@ export function isNavBarVisible(
   if (route.startsWith("/hooks/")) {
     const module = screenData?.module;
 
+    if (module === undefined) {
+      return showNavBar;
+    }
+
     if (module?.presentFullScreen) {
       return false;
     }
@@ -162,13 +169,22 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
-
-  const {
-    appData: { layoutVersion },
-    rivers,
-    plugins,
-  } = usePickFromState(["appData", "rivers", "plugins"]);
+  } = useZappHookModalStore(
+    (state) =>
+      pick(state, [
+        "setState",
+        "resetState",
+        "setIsHooksExecutionInProgress",
+        "setIsPresentingFullScreen",
+        "setIsRunningInBackground",
+      ]),
+    shallow
+  );
+
+  const plugins = usePlugins();
+  const rivers = useRivers();
+
+  const layoutVersion = useLayoutVersion();
 
   const contentTypes = useContentTypes();
 

package/reactHooks/navigation/useRoute.ts

@@ -3,7 +3,10 @@
 
 import { useContext } from "react";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useContentTypes,
+  usePlugins,
+} from "@applicaster/zapp-react-native-redux/hooks";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
 
@@ -14,6 +17,7 @@ import { useNavigation } from "./useNavigation";
 import { useModalStoreState } from "../../modalState";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { usePathname } from "./usePathname";
+import { useRivers } from "../state";
 
 // starts with modal/
 const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
@@ -42,17 +46,17 @@ export const useRoute = (
     ? legacyScreenData(screenContext)
     : screenContext;
 
-  const { plugins, contentTypes, rivers } = usePickFromState([
-    "plugins",
-    "rivers",
-    "contentTypes",
-  ]);
+  const plugins = usePlugins();
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
 
   const modalState = useModalStoreState();
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = useHookModalScreenData();
+  const hookModalScreenData = useHookModalScreenData(
+    !isHookModalPathname(pathname)
+  );
 
   const videoModalScreenData =
     navigator?.videoModalState?.item &&

package/reactHooks/player/TVSeekControlller/TVSeekController.ts

@@ -147,17 +147,34 @@ export class TVSeekController
 
     let targetPos = currentPos;
 
-    if (this.currentSeekType === SEEK_TYPE.FORWARD) {
-      targetPos = Math.min(
-        currentPos + offset,
-        this.playerController.getSeekableDuration()
-      );
-    } else if (this.currentSeekType === SEEK_TYPE.REWIND) {
-      targetPos = Math.max(0, currentPos - offset);
+    const isLive = this.playerController.isLive();
+
+    if (isLive) {
+      if (this.currentSeekType === SEEK_TYPE.REWIND) {
+        targetPos = Math.min(
+          currentPos + offset,
+          this.playerController.getSeekableDuration()
+        );
+      } else if (this.currentSeekType === SEEK_TYPE.FORWARD) {
+        targetPos = Math.max(0, currentPos - offset);
+      } else {
+        log_warning(
+          `TVSeekController: handleDelayedSeek - invalid seek type: ${this.currentSeekType}`
+        );
+      }
     } else {
-      log_warning(
-        `TVSeekController: handleDelayedSeek - invalid seek type: ${this.currentSeekType}`
-      );
+      if (this.currentSeekType === SEEK_TYPE.FORWARD) {
+        targetPos = Math.min(
+          currentPos + offset,
+          this.playerController.getSeekableDuration()
+        );
+      } else if (this.currentSeekType === SEEK_TYPE.REWIND) {
+        targetPos = Math.max(0, currentPos - offset);
+      } else {
+        log_warning(
+          `TVSeekController: handleDelayedSeek - invalid seek type: ${this.currentSeekType}`
+        );
+      }
     }
 
     log_debug(

package/reactHooks/player/__tests__/useAutoSeek._test.tsx

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 
 import { ON_HOLD_INTERVAL, SEEK_TYPE, SKIP_TIME_BASE } from "../const";

package/reactHooks/player/__tests__/useTapSeek._test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { useTapSeek } from "../useTapSeek";
 

package/reactHooks/resolvers/__tests__/useCellResolver.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 

package/reactHooks/resolvers/__tests__/useComponentResolver.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 

package/reactHooks/resolvers/useCellResolver.ts

@@ -3,7 +3,10 @@ import memoizee from "memoizee";
 import * as R from "ramda";
 
 import { CellRendererResolver } from "@applicaster/zapp-react-native-ui-components/Components/CellRendererResolver";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  usePlugins,
+  useCellStyles,
+} from "@applicaster/zapp-react-native-redux";
 import { useDimensions } from "../layout";
 import { useIsRTL } from "../../localizationUtils";
 
@@ -53,7 +56,8 @@ export function useCellResolver({
     updateForInactiveScreens: false,
   });
 
-  const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);
+  const plugins = usePlugins();
+  const cellStyles = useCellStyles();
   const isRTL = useIsRTL();
 
   const options = {

package/reactHooks/resolvers/useComponentResolver.ts

@@ -1,8 +1,14 @@
 /// <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 { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  usePlugins,
+  useAppSelector,
+  selectComponents,
+} from "@applicaster/zapp-react-native-redux";
 
 type Decorator = (component: React.Component<any>) => React.Component<any>;
 type Watcher = Array<any>;
@@ -15,9 +21,11 @@ export function useComponentResolver(
   { componentType, decorators }: Props,
   watchers?: Watcher
 ): React.ComponentType<any> {
-  const { plugins, components } = usePickFromState(["plugins", "components"]);
+  const plugins = usePlugins();
+
+  const components = useAppSelector(selectComponents);
 
-  return React.useMemo(
+  const component = React.useMemo(
     () =>
       findComponentByType({
         components,
@@ -27,4 +35,12 @@ export function useComponentResolver(
       }),
     watchers
   );
+
+  if (!component) {
+    coreLogger.warn({
+      message: `useComponentResolver: Component of type ${componentType} not found`,
+    });
+  }
+
+  return component;
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Provider } from "react-redux";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 const mockStore = configureStore([thunk]);
 

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

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

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

@@ -1,16 +1,24 @@
 import * as React from "react";
 import { Provider } from "react-redux";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 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 = {};
-  const river_id_1 = {};
+  const river_id_2 = {
+    id: "river_id_2",
+    type: "any",
+  };
+
+  const river_id_1 = {
+    id: "river_id_1",
+    type: "any",
+  };
+
   const screenId = "river_id_2";
   const entry = { id: "test", type: { value: "video" } };
 

package/reactHooks/screen/useTargetScreenData.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useContentTypes } 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,
@@ -43,7 +44,8 @@ export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
 }
 
 export const useTargetScreenData = (entry: ZappEntry) => {
-  const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
 
   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/useRefWithInitialValue.ts

@@ -1,5 +1,9 @@
 import React from "react";
 
+type WithOptionalCleanup = {
+  cleanup?: () => void;
+};
+
 /**
  * returns a ref with an initial value that is lazily evaluated once
  * */
@@ -10,5 +14,11 @@ export const useRefWithInitialValue = <T>(initialValueGetter: () => T) => {
     ref.current = initialValueGetter();
   }
 
+  React.useEffect(() => {
+    return () => {
+      (ref.current as unknown as WithOptionalCleanup)?.cleanup?.();
+    };
+  }, []);
+
   return ref;
 };

package/reactHooks/state/useRivers.ts

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