@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

package/Components/Layout/TV/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 import { LayoutContainer } from "./LayoutContainer";
 import { ScreenContainer } from "./ScreenContainer";
@@ -28,9 +29,7 @@ type Props = {
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
 
-  const { appState: { appReady = false } = {} } = usePickFromState([
-    "appState",
-  ]);
+  const appReady = useAppSelector(selectAppReady);
 
   if (!appReady) {
     return null;

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

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { pathOr } from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -16,8 +16,7 @@ type Props = {
 };
 
 const Layout = ({ Components }: Props) => {
-  const { appState } = usePickFromState(["appState"]);
-  const appReady = pathOr(false, ["appReady"], appState);
+  const appReady = useAppSelector(selectAppReady);
 
   if (!appReady) {
     return null;

package/Components/LinkHandler/LinkHandler.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   inflateString,
   objectToReadableString,
@@ -40,7 +40,7 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const { plugins } = usePickFromState(["rivers", "plugins"]);
+  const plugins = usePlugins();
 
   const ScreenPlugin = findPluginByIdentifier(
     WEBVIEW_SCREEN_IDENTIFIER,

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/ActionButton.tsx

@@ -1,9 +1,13 @@
 import React, { useCallback, useEffect } from "react";
-import { TouchableOpacity, ViewStyle } from "react-native";
+import { ViewStyle } from "react-native";
+import {
+  ActionButton as UIKitActionButton,
+  ActionButtonProps,
+} from "@applicaster/uikit/lib/components/uikit/action-button";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-
 import Image from "./Image";
+
 type Props = {
   item: ZappEntry | ZappFeed;
   flavour?: "flavour_1" | "flavour_2";
@@ -28,27 +32,6 @@ type Props = {
   extraProps?: Record<string, any>;
 };
 
-function isStringAsset(asset) {
-  return typeof asset === "string" || Array.isArray(asset);
-}
-
-function getAssetValue(asset, flavour, fallbackAsset = null) {
-  if (!asset) {
-    return null;
-  }
-
-  if (typeof asset === "string") return asset;
-
-  if (Array.isArray(asset)) {
-    const flavourIndex = Number(flavour.replace("flavour_", ""));
-    if (flavour && flavourIndex > -1) return asset[flavourIndex - 1];
-
-    return asset[0];
-  }
-
-  return asset.src || fallbackAsset;
-}
-
 export const ActionButton = React.memo(function ActionButtonComponent(
   props: Props
 ) {
@@ -90,36 +73,32 @@ export const ActionButton = React.memo(function ActionButtonComponent(
   }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
-  const AssetComponent = actionState?.asset;
+
+  const resolvedAssetComponent = actionState?.asset;
 
   // Default state is not yet ready
-  if (!AssetComponent) return null;
+  if (!resolvedAssetComponent) return null;
 
   return (
-    <TouchableOpacity
-      activeOpacity={1}
+    <UIKitActionButton
+      id={`action-button-${item.id}`}
+      item={item}
+      action={action}
+      asset={asset}
+      flavour={flavour}
+      cellUUID={cellUUID}
+      extraProps={props?.extraProps}
+      show={!!resolvedAssetComponent}
+      AssetComponent={resolvedAssetComponent}
+      ImageComponent={Image}
       onPress={onPress}
-      testID={props?.testID || `${item?.id}`}
-      accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      testID={props?.testID}
+      accessibilityLabel={props?.accessibilityLabel}
       accessibilityHint={props?.accessibilityHint}
-      accessible={!!(props?.testID || props?.accessibilityLabel)}
-      style={props?.style}
-    >
-      {isStringAsset(actionState.asset) ? (
-        <Image
-          fadeDuration={0}
-          style={asset?.style || props?.style}
-          uri={getAssetValue(actionState.asset, flavour, asset?.src)}
-          {...asset?.props}
-        />
-      ) : (
-        <AssetComponent
-          flavour={flavour}
-          asset={getAssetValue(asset, flavour)}
-          cellUUID={cellUUID}
-          {...(props?.extraProps ?? {})}
-        />
-      )}
-    </TouchableOpacity>
+      style={props?.style as ActionButtonProps["style"]}
+      fallbackSrc={
+        actionState.state === 1 ? asset?.src.active : asset?.src.inactive
+      }
+    />
   );
 });

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",
+        },
+      ],
+    });
+  });
+});

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

@@ -0,0 +1,213 @@
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../placement";
+
+describe("ActionButtonsCore placement", () => {
+  const buttons = { type: "View", name: "buttons" };
+
+  const slots = [
+    { name: "text_label_1", element: { type: "View", id: "label_1" } },
+    { name: "text_label_2", element: { type: "View", id: "label_2" } },
+    { name: "text_label_3", element: { type: "View", id: "label_3" } },
+  ];
+
+  const labels = slots.map((slot) => slot.element);
+
+  it("inserts buttons after the matching label", () => {
+    expect(
+      insertBetweenLabels({ position: "below_text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
+  });
+
+  it("inserts buttons before the matching label", () => {
+    expect(
+      insertBetweenLabels({ position: "above_text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], buttons, labels[1], labels[2]]);
+  });
+
+  it("inserts buttons after the matching label on a plain name match", () => {
+    expect(
+      insertBetweenLabels({ position: "text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
+  });
+
+  it("keeps the slot when its label is empty (null element)", () => {
+    const slotsWithEmpty = [
+      { name: "text_label_1", element: { id: "label_1" } },
+      { name: "text_label_2", element: null },
+      { name: "text_label_3", element: { id: "label_3" } },
+    ];
+
+    expect(
+      insertBetweenLabels(
+        { position: "above_text_label_2" },
+        buttons,
+        slotsWithEmpty
+      )
+    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
+
+    expect(
+      insertBetweenLabels(
+        { position: "below_text_label_2" },
+        buttons,
+        slotsWithEmpty
+      )
+    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
+  });
+
+  it("prepends buttons only when on_top is allowed", () => {
+    expect(
+      insertBetweenLabels(
+        { position: "on_top", allowOnTop: true },
+        buttons,
+        slots
+      )
+    ).toEqual([buttons, ...labels]);
+
+    expect(
+      insertBetweenLabels(
+        { position: "on_top", allowOnTop: false },
+        buttons,
+        slots
+      )
+    ).toEqual(labels);
+  });
+
+  it("appends buttons when appendWhenMissing is enabled", () => {
+    expect(
+      insertBetweenLabels(
+        { position: "unknown", appendWhenMissing: true },
+        buttons,
+        slots
+      )
+    ).toEqual([...labels, buttons]);
+  });
+
+  it("returns labels unchanged when appendWhenMissing is disabled", () => {
+    expect(
+      insertBetweenLabels(
+        { position: "unknown", appendWhenMissing: false },
+        buttons,
+        slots
+      )
+    ).toEqual(labels);
+  });
+
+  const labelContainers = [
+    {
+      elements: [
+        {
+          elements: [{ name: "top_label_1" }, { name: "top_label_2" }],
+        },
+      ],
+    },
+    {
+      elements: [
+        {
+          elements: [{ name: "bottom_label_1" }],
+        },
+      ],
+    },
+  ];
+
+  it("inserts buttons after the matching label in a nested container", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "below_top_label_2" },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      {
+        elements: [
+          {
+            elements: [
+              { name: "top_label_1" },
+              { name: "top_label_2" },
+              buttons,
+            ],
+          },
+        ],
+      },
+      labelContainers[1],
+    ]);
+  });
+
+  it("inserts buttons before the matching label in a nested container", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "above_top_label_2" },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      {
+        elements: [
+          {
+            elements: [
+              { name: "top_label_1" },
+              buttons,
+              { name: "top_label_2" },
+            ],
+          },
+        ],
+      },
+      labelContainers[1],
+    ]);
+  });
+
+  it("prepends buttons into the first container only when on_top is allowed", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "on_top", allowOnTop: true },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      {
+        elements: [buttons, ...labelContainers[0].elements],
+      },
+      labelContainers[1],
+    ]);
+  });
+
+  it("appends buttons into the last container when configured", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "unknown", appendWhenMissing: true },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      labelContainers[0],
+      {
+        elements: [...labelContainers[1].elements, buttons],
+      },
+    ]);
+  });
+
+  it("inserts buttons after a matching label in a direct two-level container", () => {
+    const directLabelContainers = [
+      {
+        elements: [{ name: "top_label_1" }, { name: "top_label_2" }],
+      },
+      {
+        elements: [{ name: "bottom_label_1" }],
+      },
+    ];
+
+    expect(
+      insertBetweenLabelContainers(
+        { position: "below_top_label_2" },
+        buttons,
+        directLabelContainers
+      )
+    ).toEqual([
+      {
+        elements: [{ name: "top_label_1" }, { name: "top_label_2" }, buttons],
+      },
+      directLabelContainers[1],
+    ]);
+  });
+});

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

@@ -0,0 +1,45 @@
+import {
+  getButtonSlotPrefix,
+  getEnabledButtonSlots,
+  getStylePrefix,
+} from "../selectors";
+
+describe("ActionButtonsCore selectors", () => {
+  it("returns explicit enabled button slots without collapsing sparse slots", () => {
+    const configuration = {
+      mobile_button_1_button_enabled: true,
+      mobile_button_2_button_enabled: false,
+      mobile_button_3_button_enabled: true,
+    };
+
+    expect(getEnabledButtonSlots(configuration, "mobile_button")).toEqual([
+      1, 3,
+    ]);
+  });
+
+  it("returns slot-based prefixes", () => {
+    expect(getButtonSlotPrefix("tv_buttons_button", 3)).toBe(
+      "tv_buttons_button_3"
+    );
+  });
+
+  it("reuses button 1 styles when independent styles are disabled", () => {
+    expect(
+      getStylePrefix({
+        slot: 3,
+        independentStyles: false,
+        buttonPrefix: "mobile_button",
+      })
+    ).toBe("mobile_button_1");
+  });
+
+  it("uses the explicit slot prefix when independent styles are enabled", () => {
+    expect(
+      getStylePrefix({
+        slot: 3,
+        independentStyles: true,
+        buttonPrefix: "mobile_button",
+      })
+    ).toBe("mobile_button_3");
+  });
+});

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

@@ -0,0 +1,49 @@
+import { buildContainerLayout, getContainerMargins } from "../style";
+
+describe("ActionButtonsCore style helpers", () => {
+  it("returns numeric margins with zero defaults", () => {
+    const configuration = {
+      mobile_buttons_container_margin_top: "4",
+      mobile_buttons_container_margin_left: 6,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(getContainerMargins(value, "mobile_buttons_container")).toEqual({
+      top: 4,
+      right: 0,
+      bottom: 0,
+      left: 6,
+    });
+  });
+
+  it("returns semantic layout data using shared alignment mapping", () => {
+    const configuration = {
+      tv_buttons_container_align: "middle",
+      tv_buttons_container_margin_top: 1,
+      tv_buttons_container_margin_right: 2,
+      tv_buttons_container_margin_bottom: 3,
+      tv_buttons_container_margin_left: 4,
+      tv_buttons_container_stacking: "vertical",
+      tv_buttons_container_horizontal_gutter: 8,
+      tv_buttons_container_vertical_gutter: 12,
+      tv_buttons_container_independent_styles: true,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(buildContainerLayout(value, "tv_buttons_container")).toEqual({
+      horizontalAlign: "center",
+      margins: {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      },
+      stacking: "vertical",
+      horizontalGutter: 8,
+      verticalGutter: 12,
+      independentStyles: true,
+    });
+  });
+});