@applicaster/zapp-react-native-ui-components 15.1.0-rc.8 → 16.0.0-alpha.1833861900

package/Components/River/TV/River.tsx

@@ -2,7 +2,8 @@
 
 import * as React from "react";
 import { Text } from "react-native";
-import * as R from "ramda";
+
+import { mergeRight } from "@applicaster/zapp-react-native-utils/utils";
 
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
@@ -13,6 +14,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
+import { toStringOrEmpty } from "./utils";
+
 type Props = {
   screenId: string;
   screenData: ZappRiver | ZappEntry;
@@ -24,6 +27,7 @@ type Props = {
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
   river?: ZappRiver | ZappEntry;
+  groupId: string;
 };
 
 export const River = (props: Props) => {
@@ -35,6 +39,7 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
+    groupId,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -51,28 +56,41 @@ export const River = (props: Props) => {
     [screenId]
   );
 
-  const stringOrEmpty = (value: string | number | undefined): string =>
-    R.isNil(value) ? "" : String(value);
+  const screenResolverData = React.useMemo(() => {
+    const extraData = mergeRight(extraProps, screenResolverExtraProps);
+
+    return {
+      extraData,
+      screenData: mergeRight(river, { groupId: extraData?.groupId }),
+      componentsMapExtraProps: mergeRight(componentsMapExtraProps, { groupId }),
+    };
+  }, [
+    extraProps,
+    screenResolverExtraProps,
+    river,
+    componentsMapExtraProps,
+    groupId,
+  ]);
 
   React.useEffect(() => {
     if (!isInsideContainer) {
-      setScreenTitle(stringOrEmpty(screenData?.title));
-      setScreenSummary(stringOrEmpty(screenData?.summary));
+      setScreenTitle(toStringOrEmpty(screenData?.title));
+      setScreenSummary(toStringOrEmpty(screenData?.summary));
     }
   }, [screenData.id]);
 
   React.useEffect(() => {
     if (feedData && !isInsideContainer) {
       if (feedData.title && feedData.title !== screenTitle) {
-        setScreenTitle(stringOrEmpty(feedData.title));
+        setScreenTitle(toStringOrEmpty(feedData.title));
       }
 
       if (feedData.summary && feedData.summary !== screenSummary) {
-        setScreenSummary(stringOrEmpty(feedData.summary));
+        setScreenSummary(toStringOrEmpty(feedData.summary));
       }
     } else {
-      setScreenTitle(stringOrEmpty(screenData?.title));
-      setScreenSummary(stringOrEmpty(screenData?.summary));
+      setScreenTitle(toStringOrEmpty(screenData?.title));
+      setScreenSummary(toStringOrEmpty(screenData?.summary));
     }
   }, [feedData, screenData, screenTitle, screenSummary]);
 
@@ -86,15 +104,13 @@ export const River = (props: Props) => {
   }
 
   if (river.type !== "general_content") {
-    const extraData = { ...R.mergeRight(extraProps, screenResolverExtraProps) };
-
     return (
       <ScreenResolver
         screenType={river.type}
         screenId={screenId}
-        screenData={R.merge(river, { groupId: extraData?.groupId })}
-        componentsMapExtraProps={componentsMapExtraProps}
-        {...extraData}
+        screenData={screenResolverData.screenData}
+        componentsMapExtraProps={screenResolverData.componentsMapExtraProps}
+        {...screenResolverData.extraData}
       />
     );
   }
@@ -106,6 +122,7 @@ export const River = (props: Props) => {
       isScreenWrappedInContainer={isInsideContainer}
       extraAnchorPointYOffset={extraAnchorPointYOffset}
       componentsMapExtraProps={componentsMapExtraProps}
+      groupId={groupId}
     />
   );
 };

package/Components/River/TV/index.tsx

@@ -1,11 +1,15 @@
-import { compose } from "ramda";
+import { compose, identity } from "@applicaster/zapp-react-native-utils/utils";
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 import { River as RiverComponent } from "./River";
-import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 import { withRiverDataLoader } from "./withRiverDataLoader";
+import { withFocusableGroupForContent } from "./withFocusableGroupForContent";
+
+const isTVOS = isTvOSPlatform();
 
 export const River = compose(
-  withTvEventHandler,
   withComponentsMapOffsetContext,
-  withRiverDataLoader
+  withRiverDataLoader,
+  isTVOS ? withFocusableGroupForContent : identity
 )(RiverComponent);

package/Components/River/TV/utils/__tests__/toStringOrEmpty.test.ts

@@ -0,0 +1,30 @@
+import { toStringOrEmpty } from "..";
+
+describe("toStringOrEmpty", () => {
+  test("returns empty string for undefined", () => {
+    expect(toStringOrEmpty(undefined)).toBe("");
+  });
+
+  test("returns empty string for null", () => {
+    expect(toStringOrEmpty(null)).toBe("");
+  });
+
+  test("converts number to string", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+    expect(toStringOrEmpty(123)).toBe("123");
+    expect(toStringOrEmpty(-42)).toBe("-42");
+  });
+
+  test("returns string as is", () => {
+    expect(toStringOrEmpty("hello")).toBe("hello");
+    expect(toStringOrEmpty("")).toBe("");
+  });
+
+  test("works with numeric strings", () => {
+    expect(toStringOrEmpty("123")).toBe("123");
+  });
+
+  test("does not throw on falsy values like 0", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+  });
+});

package/Components/River/TV/utils/index.ts

@@ -0,0 +1,4 @@
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+
+export const toStringOrEmpty = (value: unknown): string =>
+  isNil(value) ? "" : String(value);

package/Components/River/TV/withFocusableGroupForContent.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { riverFocusManager } from "@applicaster/zapp-react-native-utils/appUtils/RiverFocusManager";
+
+import { topMenuLayoutChange$ } from "@applicaster/zapp-react-native-tvos-app/Layout/topMenu";
+
+const styles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+  },
+});
+
+export const withFocusableGroupForContent = (Component) => {
+  return function WithFocusableGroupForContent(props) {
+    const { screenId, isInsideContainer } = props;
+
+    const [topMenuHeight, setTopMenuHeight] = React.useState(0);
+
+    React.useEffect(() => {
+      const subscription = topMenuLayoutChange$.subscribe((layout) => {
+        setTopMenuHeight(layout.height);
+      });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, []);
+
+    const focusableId = React.useMemo(
+      () =>
+        riverFocusManager.screenFocusableGroupId({
+          screenId,
+          isInsideContainer,
+        }),
+      [screenId, isInsideContainer]
+    );
+
+    if (isInsideContainer) {
+      return <Component {...props} />;
+    }
+
+    return (
+      <FocusableGroup
+        key={focusableId}
+        id={focusableId}
+        // The top menu is rendered in its own FocusableGroup, anchored at the top of the screen.
+        // When the "content" FocusableGroup starts at y = 0 as well, the two groups visually overlap.
+        // On TvOS platform this overlap can confuse the focus engine, because the focusable bounds of
+        // the top-menu group and the content group intersect, leading to erratic navigation between
+        // the menu and the content (e.g. unexpected jumps or focus getting "stuck").
+        //
+        // To avoid this, we shift the entire content FocusableGroup down by the dynamic top menu
+        // height (marginTop: topMenuHeight). This separates the focus regions of the two groups in
+        // focus space, so they no longer intersect.
+        //
+        // The inner <View> below then applies the inverse margin (marginTop: -topMenuHeight) so that
+        // the actual visual position of the content on screen does not change; only the focusable
+        // bounds of the outer group are offset.
+        style={[styles.flexOne, { marginTop: topMenuHeight }]}
+        // this group does not have parent
+        groupId={undefined}
+      >
+        <View style={[styles.flexOne, { marginTop: -1 * topMenuHeight }]}>
+          <Component {...props} groupId={focusableId} />
+        </View>
+      </FocusableGroup>
+    );
+  };
+};

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -155,6 +155,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         }
       }
       stickyHeaderIndices={[]}
+      testID="components-map-flat-list"
       viewabilityConfigCallbackPairs={[]}
       windowSize={12}
     >

package/Components/River/__tests__/componentsMap.test.js

@@ -139,7 +139,13 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-ui-components/events", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-ui-components/events"),
+  emitScrollEndReached: jest.fn(),
+}));
+
 const { View } = require("react-native");
+const events = require("@applicaster/zapp-react-native-ui-components/events");
 const { ComponentsMap } = require("../ComponentsMap/ComponentsMap");
 const theme = require("./theme-mock.json");
 
@@ -190,4 +196,36 @@ describe("componentsMap", () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("calls emitScrollEndReached when onScroll was called and isScreenWrappedInContainer is false", () => {
+    themeSpy = jest
+      .spyOn(themeUtils, "useTheme")
+      .mockImplementation(() => () => theme);
+
+    events.emitScrollEndReached.mockClear();
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ComponentsMap
+          {...props}
+          isScreenWrappedInContainer={false}
+          feed={{ entry: [] }}
+        />
+      </Provider>
+    );
+
+    const flatList = getByTestId("components-map-flat-list");
+
+    flatList.props.onScroll({
+      nativeEvent: {
+        contentOffset: { y: 0 },
+        layoutMeasurement: { height: 100 },
+        contentSize: { height: 200 },
+      },
+    });
+
+    flatList.props.onEndReached();
+
+    expect(events.emitScrollEndReached).toHaveBeenCalledTimes(1);
+  });
 });

package/Components/River/hooks/__tests__/usePullToRefresh.test.ts

@@ -0,0 +1,132 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { refreshCoordinator } from "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator";
+
+import { usePullToRefresh } from "../usePullToRefresh";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator",
+  () => ({
+    refreshCoordinator: {
+      triggerRefresh: jest.fn(),
+    },
+  })
+);
+
+jest.useFakeTimers();
+
+describe("usePullToRefresh", () => {
+  const screenId = "test-screen";
+  const components = [{ id: "comp1" }, { id: "comp2" }] as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should initialize with refreshing=false", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    expect(result.current.refreshing).toBe(false);
+  });
+
+  it("should trigger refresh and set refreshing=true", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    expect(result.current.refreshing).toBe(true);
+
+    expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledWith(
+      components,
+      screenId
+    );
+  });
+
+  it("should set refreshing=false after spinner duration", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    expect(result.current.refreshing).toBe(true);
+
+    act(() => {
+      jest.advanceTimersByTime(1500);
+    });
+
+    expect(result.current.refreshing).toBe(false);
+  });
+
+  it("should not stop refreshing before spinner duration", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(result.current.refreshing).toBe(true);
+  });
+
+  it("should clear timeout on unmount", () => {
+    const clearTimeoutSpy = jest.spyOn(global, "clearTimeout");
+
+    const { result, unmount } = renderHook(() =>
+      usePullToRefresh(screenId, components)
+    );
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    unmount();
+
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+  });
+
+  it("should handle multiple refresh calls correctly", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+      result.current.onRefresh();
+    });
+
+    expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(2);
+    expect(result.current.refreshing).toBe(true);
+
+    act(() => {
+      jest.advanceTimersByTime(1500);
+    });
+
+    expect(result.current.refreshing).toBe(false);
+  });
+
+  it("should use latest props in callback", () => {
+    const { result, rerender } = renderHook(
+      ({ screenId, components }) => usePullToRefresh(screenId, components),
+      {
+        initialProps: { screenId, components },
+      }
+    );
+
+    const newComponents = [{ id: "new-comp" }] as any;
+    const newScreenId = "new-screen";
+
+    rerender({ screenId: newScreenId, components: newComponents });
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledWith(
+      newComponents,
+      newScreenId
+    );
+  });
+});

package/Components/River/hooks/index.ts

@@ -0,0 +1 @@
+export { usePullToRefresh } from "./usePullToRefresh";

package/Components/River/hooks/usePullToRefresh.ts

@@ -0,0 +1,51 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { refreshCoordinator } from "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator";
+
+const SPINNER_DURATION_MS = 1500;
+
+/**
+ * Pull-to-refresh hook.
+ *
+ * Triggers a refresh for all screen components via RefreshCoordinator.
+ * Each component's UrlFeedResolver already subscribes to refresh$ events
+ * and calls reloadData() when triggered — so this hook only needs to:
+ * 1. Push events into the refresh bus
+ * 2. Show a fixed-duration spinner as UX feedback
+ *
+ * Data updates arrive reactively via Redux (silentRefresh: true keeps
+ * old data visible while loading).
+ */
+export const usePullToRefresh = (
+  screenId: string,
+  components: ZappUIComponent[] = []
+) => {
+  const [refreshing, setRefreshing] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    refreshCoordinator.triggerRefresh(components, screenId);
+
+    // Spinner is UX feedback for the gesture.
+    // Data updates arrive reactively via Redux (silentRefresh: true).
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(
+      () => setRefreshing(false),
+      SPINNER_DURATION_MS
+    );
+  }, [components, screenId]);
+
+  return { refreshing, onRefresh };
+};

package/Components/Screen/TV/index.web.tsx

@@ -9,9 +9,10 @@ import {
 import {
   useIsScreenActive,
   useNavigation,
+  useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useNavbarState,
   useScreenBackgroundColor,
@@ -102,7 +103,8 @@ export const Screen = ({ route, Components }: Props) => {
   }
 
   const navigator = useNavigation();
-  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
+  const plugins = usePlugins();
+  const rivers = useRivers();
 
   const pathAttributes = getPathAttributes({ pathname: route });
   const routeState = navigator.getStackForPathname(route);

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,18 +1,15 @@
 import * as React from "react";
 import { View } from "react-native";
-import { render } from "@testing-library/react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
 ));
 
-const mock_navBarVisibleFlag = true;
-
-const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
-
 const mockIsOrientationCompatible = jest.fn(() => true);
 
 jest.mock("react-native-safe-area-context", () => ({
+  ...jest.requireActual("react-native-safe-area-context"),
   useSafeAreaInsets: () => ({ top: 44 }),
   useSafeAreaFrame: () => ({ x: 0, y: 0, width: 375, height: 812 }),
 }));
@@ -36,12 +33,14 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/analyticsUtils"),
   useAnalytics: jest.fn(() => ({
     sendScreenEvent: jest.fn(),
   })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/theme"),
   useTheme: jest.fn(() => ({
     app_background_color: "blue",
   })),
@@ -78,21 +77,44 @@ jest.mock(
   })
 );
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  isNavBarVisible: mockIsNavBarVisible,
-  useIsScreenActive: jest.fn().mockReturnValue(true),
-  useNavigation: jest.fn(() => ({
-    canGoBack: () => false,
-    currentRoute: "/river/testId",
-    activeRiver: { id: "testId" },
-    screenData: { id: "testId" },
-    data: { screen: { id: "testId" } },
-  })),
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
-  })),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+    ),
+    useNavigation: jest.fn(() => ({
+      canGoBack: () => false,
+      currentRoute: "/river/testId",
+      activeRiver: { id: "testId" },
+      screenData: { id: "testId" },
+      data: { screen: { id: "testId" } },
+    })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive"
+    ),
+    useIsScreenActive: jest.fn().mockReturnValue(true),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
+  () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute"
+    ),
+    useRoute: jest.fn(() => ({
+      pathname: "/river/testId",
+      screenData: { id: "testId" },
+    })),
+  })
+);
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
@@ -113,26 +135,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
-  const View = jest.requireActual("react-native").View;
-
-  return {
-    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
-    usePickFromState: () => ({
-      plugins: [
-        {
-          name: "Offline Plugin",
-          identifier: "offline-experience",
-          type: "general",
-          module: {
-            OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
-          },
-        },
-      ],
-    }),
-  };
-});
-
 const {
   allowedOrientationsForScreen,
   getOrientation,
@@ -152,6 +154,19 @@ const screenProps = {
 
 const { Screen } = require("..");
 
+const store = {
+  plugins: [
+    {
+      name: "Offline Plugin",
+      identifier: "offline-experience",
+      type: "general",
+      module: {
+        OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
+      },
+    },
+  ],
+};
+
 describe("<Screen Component />", () => {
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
@@ -161,14 +176,22 @@ describe("<Screen Component />", () => {
 
   describe("when the navbar should show", () => {
     it("renders correctly", () => {
-      const { toJSON } = render(<Screen {...screenProps} />);
+      const { toJSON } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
     it("renders correctly", () => {
-      const { toJSON } = render(<Screen {...screenProps} />);
+      const { toJSON } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
       expect(toJSON()).toMatchSnapshot();
     });
   });