@applicaster/zapp-react-native-ui-components 15.0.0-alpha.5197372201 → 15.0.0-alpha.5262500595

package/Components/Cell/TvOSCellComponent.tsx

@@ -195,7 +195,6 @@ class TvOSCell extends React.Component<Props, State> {
       groupId,
       component,
       index,
-      componentsMapOffset,
     } = this.props;
 
     this.setScreenLayout(componentAnchorPointY, screenLayout);
@@ -222,8 +221,7 @@ class TvOSCell extends React.Component<Props, State> {
       const totalOffset =
         headerOffset +
         toNumberWithDefaultZero(componentAnchorPointY) +
-        extraAnchorPointYOffset -
-        toNumberWithDefaultZero(componentsMapOffset) +
+        extraAnchorPointYOffset +
         componentMarginTop +
         componentPaddingTop;
 

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -12,12 +12,26 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useEventAlerts } from "./utils/useEventAlerts";
+import {
+  selectRiverById,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+import { getScreenDataSource } from "./utils/getScreenDataSource";
+import { ScreenResolverFeedProvider } from "../ScreenResolverFeedProvider/ScreenResolverFeedProvider";
 
 const { log_debug } = createLogger({
   category: "ScreenContainer",
   subsystem: "General",
 });
 
+/** Provides screen-feed from general-screen configuration (if defined) */
+const useFeedData = (id) => {
+  const river = useAppSelector((state) => selectRiverById(state, id));
+  const feedData = getScreenDataSource(river);
+
+  return feedData;
+};
+
 export const GeneralContentScreen = ({
   feed,
   screenId,
@@ -103,24 +117,26 @@ export const GeneralContentScreen = ({
   if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
 
   return (
-    <ScreenTrackedViewPositionsContext.Provider>
-      <CellTapContext.Provider value={contextValue}>
-        <ComponentsMap
-          feed={feed}
-          riverId={screenId}
-          groupId={groupId || `general-content-screen-${screenId}`}
-          riverComponents={components || uiComponents}
-          scrollViewExtraProps={scrollViewExtraProps}
-          getStaticComponentFeed={getStaticComponentFeed}
-          extraAnchorPointYOffset={extraAnchorPointYOffset}
-          isScreenWrappedInContainer={isScreenWrappedInContainer}
-          parentFocus={parentFocus}
-          focused={focused}
-          containerHeight={containerHeight}
-          preferredFocus={preferredFocus}
-          {...componentsMapExtraProps}
-        />
-      </CellTapContext.Provider>
-    </ScreenTrackedViewPositionsContext.Provider>
+    <ScreenResolverFeedProvider id={screenId} useFeedData={useFeedData}>
+      <ScreenTrackedViewPositionsContext.Provider>
+        <CellTapContext.Provider value={contextValue}>
+          <ComponentsMap
+            feed={feed}
+            riverId={screenId}
+            groupId={groupId || `general-content-screen-${screenId}`}
+            riverComponents={components || uiComponents}
+            scrollViewExtraProps={scrollViewExtraProps}
+            getStaticComponentFeed={getStaticComponentFeed}
+            extraAnchorPointYOffset={extraAnchorPointYOffset}
+            isScreenWrappedInContainer={isScreenWrappedInContainer}
+            parentFocus={parentFocus}
+            focused={focused}
+            containerHeight={containerHeight}
+            preferredFocus={preferredFocus}
+            {...componentsMapExtraProps}
+          />
+        </CellTapContext.Provider>
+      </ScreenTrackedViewPositionsContext.Provider>
+    </ScreenResolverFeedProvider>
   );
 };

package/Components/GeneralContentScreen/__tests__/GeneralContentScreen.test.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { GeneralContentScreen } from "../GeneralContentScreen";
+
+const mockUseAppSelector = jest.fn();
+const mockSelectRiverById = jest.fn();
+const mockProviderSpy = jest.fn();
+
+jest.mock("../../River/ComponentsMap", () => ({
+  ComponentsMap: () => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    return <View testID="components-map" />;
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => jest.fn()),
+}));
+
+jest.mock("../utils", () => ({
+  logger: { warn: jest.fn() },
+  whenMatchingType: jest.fn((_type, value) => value),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
+  useLayoutVersion: jest.fn(() => false),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData",
+  () => ({
+    useScreenData: jest.fn(() => ({
+      ui_components: [{ id: "ui-component" }],
+      general: {},
+    })),
+  })
+);
+
+jest.mock("../utils/useCurationAPI", () => ({
+  useCurationAPI: jest.fn(() => [{ id: "curation-component" }]),
+}));
+
+jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
+  useRiverInitialState: jest.fn(() => []),
+}));
+
+jest.mock("../utils/useEventAlerts", () => ({
+  useEventAlerts: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  useAppSelector: (...args) => mockUseAppSelector(...args),
+  selectRiverById: (...args) => mockSelectRiverById(...args),
+}));
+
+jest.mock("../utils/getScreenDataSource", () => ({
+  getScreenDataSource: jest.fn(() => ({
+    source: "https://feed",
+    mapping: {},
+  })),
+}));
+
+jest.mock(
+  "../../ScreenResolverFeedProvider/ScreenResolverFeedProvider",
+  () => ({
+    ScreenResolverFeedProvider: ({ id, useFeedData, children }) => {
+      const React = require("react");
+      const { View } = require("react-native");
+
+      mockProviderSpy(id, useFeedData);
+      useFeedData(id);
+
+      return <View testID="screen-resolver-feed-provider">{children}</View>;
+    },
+  })
+);
+
+describe("GeneralContentScreen", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseAppSelector.mockImplementation((selector) => selector({}));
+    mockSelectRiverById.mockReturnValue({ id: "screen-1" });
+  });
+
+  it("wraps content with ScreenResolverFeedProvider and renders ComponentsMap", () => {
+    const { getByTestId } = render(
+      <GeneralContentScreen
+        screenId="screen-1"
+        feed={null}
+        components={[{ id: "component-1" }]}
+      />
+    );
+
+    expect(getByTestId("screen-resolver-feed-provider")).toBeDefined();
+    expect(getByTestId("components-map")).toBeDefined();
+
+    expect(mockProviderSpy).toHaveBeenCalledWith(
+      "screen-1",
+      expect.any(Function)
+    );
+  });
+});

package/Components/GeneralContentScreen/utils/__tests__/getScreenDataSource.test.ts

@@ -0,0 +1,19 @@
+import { getScreenDataSource } from "../getScreenDataSource";
+
+describe("getScreenDataSource", () => {
+  it("returns screen_feed data when present", () => {
+    const result = getScreenDataSource({
+      data: {
+        screen_feed: {
+          source: "https://feed",
+        },
+      },
+    });
+
+    expect(result).toEqual({ source: "https://feed" });
+  });
+
+  it("returns undefined when screen_feed is missing", () => {
+    expect(getScreenDataSource({ data: {} })).toBeUndefined();
+  });
+});

package/Components/GeneralContentScreen/utils/getScreenDataSource.ts

@@ -0,0 +1,9 @@
+import { get } from "@applicaster/zapp-react-native-utils/utils";
+
+const lookupPath = ["data", "screen_feed"];
+
+export const getScreenDataSource = (
+  screenData: any
+): Option<ZappDataSource> => {
+  return get(screenData, lookupPath) as ZappDataSource | undefined;
+};

package/Components/HookRenderer/HookRenderer.tsx

@@ -6,7 +6,12 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useHookAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { PresentationType } from "../ScreenResolver";
+
+import { componentsLogger } from "../../Helpers/logger";
+
+const logger = componentsLogger.addSubsystem("HookRenderer");
+
+const HOOK_PRESENTATION_TYPE = "Hook";
 
 type Props = {
   focused?: boolean;
@@ -15,20 +20,17 @@ type Props = {
   callback: hookCallback;
 };
 
-export const HookRenderer = (props: Props) => {
-  const {
-    focused,
-    screenData: { payload, hookPlugin },
-    callback,
-  } = props;
-
-  const { setVisible: showNavBar } = useSetNavbarState();
+const HookRenderer = (props: Props) => {
+  const { focused, screenData, callback } = props;
+  const { payload, hookPlugin } = screenData;
 
   const {
     module: { Component: HookComponent, presentFullScreen },
     configuration,
   } = hookPlugin;
 
+  const { setVisible: showNavBar } = useSetNavbarState();
+
   useHookAnalytics(props);
 
   const isNavBarVisible = useIsNavBarVisible();
@@ -63,8 +65,36 @@ export const HookRenderer = (props: Props) => {
         hookPlugin,
         focused,
         parentFocus,
-        presentationType: PresentationType.Hook,
+        presentationType: HOOK_PRESENTATION_TYPE,
       }}
     />
   );
 };
+
+/**
+ * Guard component to prevent rendering HookRenderer when screenData or hookPlugin is missing. This is to avoid potential crashes due to missing data.
+ */
+const HookRendererGuard = (props: Props) => {
+  React.useEffect(() => {
+    if (!props.screenData) {
+      logger.error(
+        "HookRenderer received no screenData, screen cannot be rendered"
+      );
+    } else if (!props.screenData.hookPlugin) {
+      logger.error(
+        "HookRenderer received screenData with no hookPlugin, screen cannot be rendered",
+        {
+          screenData: props.screenData,
+        }
+      );
+    }
+  }, [props.screenData]);
+
+  if (!props.screenData || !props.screenData.hookPlugin) {
+    return null;
+  }
+
+  return <HookRenderer {...props} />;
+};
+
+export { HookRendererGuard as HookRenderer };

package/Components/HookRenderer/__tests__/HookRenderer.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { HookRenderer } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isTV: jest.fn(() => false),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useBackHandler: jest.fn(),
+  useIsNavBarVisible: jest.fn(() => true),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useHookAnalytics: jest.fn(),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useSetNavbarState: jest.fn(() => ({
+    setVisible: jest.fn(),
+  })),
+}));
+
+describe("HookRenderer", () => {
+  it("returns null when hookPlugin is missing", () => {
+    const { toJSON } = render(
+      <HookRenderer callback={jest.fn()} screenData={{ payload: {} } as any} />
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+
+  it("passes Hook presentationType to rendered hook component", () => {
+    const HookComponent = (props) => (
+      <View testID="hook-component" {...props} />
+    );
+
+    const { getByTestId } = render(
+      <HookRenderer
+        callback={jest.fn()}
+        screenData={{
+          payload: { foo: "bar" },
+          hookPlugin: {
+            module: {
+              Component: HookComponent,
+              presentFullScreen: false,
+            },
+            configuration: {},
+          },
+        }}
+      />
+    );
+
+    expect(getByTestId("hook-component").props.presentationType).toBe("Hook");
+  });
+});

package/Components/Layout/TV/NavBarContainer.tsx

@@ -15,12 +15,6 @@ const styles = StyleSheet.create({
     flex: 1,
     width: "100%",
   },
-  themeStyles: {
-    // limits the height of the focusable container of the TopMenuBarTV component
-    // to prevent it from being overlapped by the screen content,
-    // as it makes TopMenuBarTV unfocusable on tvOS
-    maxHeight: 1,
-  },
 });
 
 export const NavBarContainer = ({ children, isVisible, onReady }: Props) => {
@@ -31,10 +25,7 @@ export const NavBarContainer = ({ children, isVisible, onReady }: Props) => {
   }, [onReady]);
 
   return isVisible ? (
-    <View
-      testID="nav-bar-container"
-      style={[styles.container, styles.themeStyles]}
-    >
+    <View testID="nav-bar-container" style={styles.container}>
       {children}
     </View>
   ) : null;

package/Components/Layout/TV/__tests__/__snapshots__/NavBarContainer.test.tsx.snap

@@ -3,18 +3,13 @@
 exports[`NavBarContainer renders 1`] = `
 <View
   style={
-    [
-      {
-        "flex": 1,
-        "position": "absolute",
-        "top": 0,
-        "width": "100%",
-        "zIndex": 10,
-      },
-      {
-        "maxHeight": 1,
-      },
-    ]
+    {
+      "flex": 1,
+      "position": "absolute",
+      "top": 0,
+      "width": "100%",
+      "zIndex": 10,
+    }
   }
   testID="nav-bar-container"
 >

package/Components/Layout/TV/__tests__/__snapshots__/ScreenContainer.test.tsx.snap

@@ -14,18 +14,13 @@ exports[`ScreenContainer renders 1`] = `
 >
   <View
     style={
-      [
-        {
-          "flex": 1,
-          "position": "absolute",
-          "top": 0,
-          "width": "100%",
-          "zIndex": 10,
-        },
-        {
-          "maxHeight": 1,
-        },
-      ]
+      {
+        "flex": 1,
+        "position": "absolute",
+        "top": 0,
+        "width": "100%",
+        "zIndex": 10,
+      }
     }
     testID="nav-bar-container"
   >

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -9,6 +9,11 @@ exports[`Layout TV renders 1`] = `
     excludeFromFocusSearching={true}
     id="/river/A1234"
     preferredFocus={true}
+    style={
+      {
+        "flex": 1,
+      }
+    }
   >
     <View
       Components={

package/Components/MasterCell/CONFIG_BUILDER_TO_REACT_COMPONENT.md

@@ -0,0 +1,144 @@
+# Config Builder -> React Component Migration Guide
+
+This guide explains how to migrate MasterCell config-builders to React components incrementally, without breaking existing config-node rendering.
+
+## Why This Exists
+
+MasterCell currently supports config-node builders such as:
+
+```ts
+{
+  type: "View",
+  style: {},
+  additionalProps: {},
+  data: [],
+  elements: []
+}
+```
+
+This is still valid and should continue to work.
+
+For incremental migration, MasterCell also supports inline React nodes:
+
+```ts
+{
+  type: "ReactComponent",
+  style: {},
+  additionalProps: {
+    component: MyComponent
+  }
+}
+```
+
+This lets you migrate one builder at a time.
+
+## Rendering Pipeline
+
+1. Builder returns node config (`type`, `style`, `additionalProps`, `data`, `elements`).
+2. `configInflater` converts `additionalProps` into runtime `props` and resolves `data`.
+3. `elementMapper` renders:
+4. String `type` nodes via component registry (`components[type]`).
+5. `type: "ReactComponent"` nodes via `props.component`.
+
+## Migration Pattern
+
+1. Keep existing builder API unchanged.
+2. Add a dedicated React component for the node being migrated.
+3. Change builder output from string `type` to `type: "ReactComponent"`.
+4. Pass component reference through `additionalProps.component`.
+5. Keep behavioral props unchanged (`testID`, roles, accessibility props).
+6. Set `renderChildren` explicitly:
+7. `false` when React component renders everything itself.
+8. `true` (or omit) when builder still provides `elements` children.
+9. Set `requiresCellUUID: true` only if the component needs `cellUUID`.
+10. Update builder-shape tests and rendering tests together.
+
+## Example Using `TextLabelsContainer.ts`
+
+Current builder (config-node only):
+
+```ts
+export const TextLabelsContainer = ({ actionIdentifier, testID, style, extraProps }) => ({
+  type: "View",
+  additionalProps: {
+    mobileActionRole: "label_container",
+  },
+  elements: [
+    {
+      type: "Text",
+      style,
+      additionalProps: {
+        label: { context: actionIdentifier, name: "label_1" },
+        state: "default",
+        mobileActionRole: "label",
+        testID: testID ? `${testID}-label` : undefined,
+        ...extraProps,
+      },
+    },
+  ],
+});
+```
+
+Incremental migration target:
+
+```ts
+import { TextLabelsContainerView } from "./TextLabelsContainerView";
+
+export const TextLabelsContainer = ({ actionIdentifier, testID, style, extraProps }) => ({
+  type: "ReactComponent",
+  additionalProps: {
+    component: TextLabelsContainerView,
+    renderChildren: false,
+    mobileActionRole: "label_container",
+    actionIdentifier,
+    testID,
+    textStyle: style,
+    textProps: extraProps,
+  },
+});
+```
+
+And React component:
+
+```tsx
+export const TextLabelsContainerView = ({
+  actionIdentifier,
+  testID,
+  textStyle,
+  textProps,
+  mobileActionRole,
+}) => (
+  <View mobileActionRole={mobileActionRole}>
+    <Text
+      style={textStyle}
+      label={{ context: actionIdentifier, name: "label_1" }}
+      state="default"
+      mobileActionRole="label"
+      testID={testID ? `${testID}-label` : undefined}
+      {...textProps}
+    />
+  </View>
+);
+```
+
+This keeps external behavior and props contract intact while moving implementation to React.
+
+## Rules for Safe Incremental Migration
+
+1. Do not change role markers used by parent logic (for example `mobileActionRole`).
+2. Do not rename `testID` contracts during migration.
+3. Keep output shape stable for parent builders (`null` handling, `elements` presence).
+4. Keep data-mapping semantics identical (`label`, `state`, `entry`, etc.).
+5. Migrate one node per PR where possible.
+
+## Testing Checklist
+
+1. Builder test: node type and required props (`component`, role, `testID`) are correct.
+2. Rendering test: `configInflater + elementMapper` still renders expected UI.
+3. Behavior test: parent container logic that clones/filters children still works.
+4. Regression test: hidden/empty states still return `null` as before.
+
+## Important Limitation
+
+`additionalProps.component` is a function reference and is suitable for local JS-built trees.
+If a tree must be fully serialized JSON, use a string `componentKey` and resolve it in a registry instead of storing a function directly.

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/model.test.ts

@@ -0,0 +1,80 @@
+import { buildActionButtonsModel } from "../model";
+
+describe("buildActionButtonsModel", () => {
+  it("returns null when the container is disabled", () => {
+    const configuration = {
+      mobile_buttons_container_buttons_enabled: false,
+      mobile_button_1_button_enabled: true,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(
+      buildActionButtonsModel({
+        configuration,
+        value,
+        containerPrefix: "mobile_buttons_container",
+        buttonPrefix: "mobile_button",
+      })
+    ).toBeNull();
+  });
+
+  it("returns explicit enabled slots and semantic container data", () => {
+    const configuration = {
+      mobile_buttons_container_buttons_enabled: true,
+      mobile_buttons_container_align: "right",
+      mobile_buttons_container_margin_top: 1,
+      mobile_buttons_container_margin_right: 2,
+      mobile_buttons_container_margin_bottom: 3,
+      mobile_buttons_container_margin_left: 4,
+      mobile_buttons_container_stacking: "vertical",
+      mobile_buttons_container_horizontal_gutter: 8,
+      mobile_buttons_container_vertical_gutter: 12,
+      mobile_buttons_container_independent_styles: false,
+      mobile_button_1_button_enabled: true,
+      mobile_button_2_button_enabled: false,
+      mobile_button_3_button_enabled: true,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(
+      buildActionButtonsModel({
+        configuration,
+        value,
+        containerPrefix: "mobile_buttons_container",
+        buttonPrefix: "mobile_button",
+      })
+    ).toEqual({
+      enabledSlots: [1, 3],
+      buttonsCount: 2,
+      container: {
+        horizontalAlign: "flex-end",
+        margins: {
+          top: 1,
+          right: 2,
+          bottom: 3,
+          left: 4,
+        },
+        stacking: "vertical",
+        horizontalGutter: 8,
+        verticalGutter: 12,
+        independentStyles: false,
+      },
+      buttons: [
+        {
+          slot: 1,
+          renderIndex: 0,
+          specificPrefix: "mobile_button_1",
+          stylePrefix: "mobile_button_1",
+        },
+        {
+          slot: 3,
+          renderIndex: 1,
+          specificPrefix: "mobile_button_3",
+          stylePrefix: "mobile_button_1",
+        },
+      ],
+    });
+  });
+});