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

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,30 +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 fallbackAsset || asset;
-
-  if (Array.isArray(asset)) {
-    const flavourIndex = Number(flavour.replace("flavour_", ""));
-
-    if (flavour && flavourIndex > -1) {
-      return fallbackAsset || asset[flavourIndex - 1];
-    }
-
-    return fallbackAsset || asset[0];
-  }
-
-  return asset.src || fallbackAsset;
-}
-
 export const ActionButton = React.memo(function ActionButtonComponent(
   props: Props
 ) {
@@ -93,44 +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,
-            actionState.state === 1 ? asset?.src.active : asset?.src.inactive
-          )}
-          {...asset?.props}
-        />
-      ) : (
-        <AssetComponent
-          flavour={flavour}
-          asset={getAssetValue(
-            asset,
-            flavour,
-            actionState.state === 1 ? asset?.src.active : asset?.src.inactive
-          )}
-          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__/placement.test.ts

@@ -6,28 +6,54 @@ import {
 describe("ActionButtonsCore placement", () => {
   const buttons = { type: "View", name: "buttons" };
 
-  const above_labels = [
-    { name: "above_label_1" },
-    { name: "above_label_2" },
-    { name: "above_label_3" },
+  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 below_labels = [
-    { name: "below_label_1" },
-    { name: "below_label_2" },
-    { name: "below_label_3" },
-  ];
+  const labels = slots.map((slot) => slot.element);
 
   it("inserts buttons after the matching label", () => {
     expect(
-      insertBetweenLabels({ position: "below_label_2" }, buttons, below_labels)
-    ).toEqual([below_labels[0], below_labels[1], buttons, below_labels[2]]);
+      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_label_2" }, buttons, above_labels)
-    ).toEqual([above_labels[0], buttons, above_labels[1], above_labels[2]]);
+      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", () => {
@@ -35,17 +61,17 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "on_top", allowOnTop: true },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual([buttons, ...below_labels]);
+    ).toEqual([buttons, ...labels]);
 
     expect(
       insertBetweenLabels(
         { position: "on_top", allowOnTop: false },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual(below_labels);
+    ).toEqual(labels);
   });
 
   it("appends buttons when appendWhenMissing is enabled", () => {
@@ -53,9 +79,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: true },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual([...below_labels, buttons]);
+    ).toEqual([...labels, buttons]);
   });
 
   it("returns labels unchanged when appendWhenMissing is disabled", () => {
@@ -63,9 +89,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: false },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual(below_labels);
+    ).toEqual(labels);
   });
 
   const labelContainers = [

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

@@ -17,6 +17,11 @@ type InsertOptions = {
   appendWhenMissing?: boolean;
 };
 
+type Slot = {
+  name: string;
+  element?: unknown;
+};
+
 const hasLabelName = (value: unknown): value is Label =>
   !!value &&
   typeof value === "object" &&
@@ -100,8 +105,14 @@ const containsNestedLabel = (
 export const insertBetweenLabels = (
   { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
   buttons: unknown,
-  labels: Label[] = []
+  slots: Slot[] = []
 ) => {
+  // Slots are defined by the canonical label list, so an empty (null) label
+  // still keeps its position — buttons placed above/below it survive.
+  const labels = slots
+    .map((slot) => slot.element)
+    .filter((element) => element != null);
+
   if (buttons == null) {
     return labels;
   }
@@ -110,14 +121,31 @@ export const insertBetweenLabels = (
     return [buttons, ...labels];
   }
 
-  const labelsWithButtons = withButtons(position, buttons, labels);
-  const inserted = labelsWithButtons.length !== labels.length;
+  let inserted = false;
+  const result: unknown[] = [];
+
+  for (const { name, element } of slots) {
+    if (position === `above_${name}`) {
+      result.push(buttons);
+      inserted = true;
+    }
+
+    if (element != null) {
+      result.push(element);
+    }
+
+    // Insert after on `below_*` or a plain label-name match.
+    if (position === `below_${name}` || position === name) {
+      result.push(buttons);
+      inserted = true;
+    }
+  }
 
-  if (!inserted && appendWhenMissing) {
-    return [...labels, buttons];
+  if (!inserted) {
+    return appendWhenMissing ? [...labels, buttons] : labels;
   }
 
-  return inserted ? labelsWithButtons : [...labels];
+  return result;
 };
 
 export const insertBetweenLabelContainers = (

package/Components/MasterCell/DefaultComponents/BorderContainerView/__tests__/index.test.tsx

@@ -1,26 +1,85 @@
 import * as React from "react";
-import {
-  BorderContainerView,
-  getBorderPadding, // Export for testing (using a double underscore prefix is a common convention)
-} from "../index";
-import { render } from "@testing-library/react-native";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import { View } from "react-native";
-
-jest.mock("@applicaster/zapp-react-native-utils/numberUtils", () => ({
-  toNumberWithDefaultZero: jest.fn((value) => Number(value) || 0),
-}));
+import { render, waitFor } from "@testing-library/react-native";
+import { StyleSheet, View } from "react-native";
+
+import { BorderContainerView, getBorderPadding } from "../index";
+import { ImageBorderContainer } from "../../ImageBorderContainer";
+import { MeasurementPortalContext } from "../../../../MeasurmentsPortal/MeasurementsPortal";
+
+const mockAddHeading = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
   () => ({
     useAccessibilityManager: jest.fn(() => ({
-      addHeading: jest.fn(),
+      addHeading: mockAddHeading,
     })),
   })
 );
 
+const createMockValue = () => {
+  const values = {
+    cell_padding_top: 1,
+    cell_padding_left: 2,
+    cell_padding_right: 3,
+    cell_padding_bottom: 4,
+    image_border_size: 5,
+    image_focused_border_color: "red",
+    image_selected_border_color: "blue",
+    image_focused_selected_border_color: "green",
+    image_border_color: "black",
+    image_corner_radius: 10,
+    image_border_position: "outside",
+    image_border_padding_top: 6,
+    image_border_padding_right: 7,
+    image_border_padding_bottom: 8,
+    image_border_padding_left: 9,
+    image_margin_top: 11,
+    image_margin_left: 12,
+    image_margin_right: 13,
+    image_margin_bottom: 14,
+  };
+
+  return (key) => values[key] || 0;
+};
+
+const renderBorderContainer = (
+  overrideProps: Partial<any> = {},
+  measurementValue: React.ContextType<typeof MeasurementPortalContext> = null
+) => {
+  const props = {
+    style: {
+      borderWidth: 4,
+      borderColor: "red",
+      borderRadius: 8,
+      backgroundColor: "navy",
+    },
+    testID: "border-container",
+    borderPosition: "outside" as const,
+    borderPaddingTop: 1,
+    borderPaddingRight: 2,
+    borderPaddingBottom: 3,
+    borderPaddingLeft: 4,
+    hasFocusableInside: jest.fn(() => false),
+    entry: { id: "test-entry", title: "Test title" } as ZappEntry,
+    state: "focused" as CellState,
+    hasTextLabels: false,
+    children: <View testID="child" />,
+    ...overrideProps,
+  };
+
+  return render(
+    <MeasurementPortalContext.Provider value={measurementValue}>
+      <BorderContainerView {...props} />
+    </MeasurementPortalContext.Provider>
+  );
+};
+
 describe("BorderContainerView", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   describe("getBorderPadding", () => {
     it("returns 0 for inside", () => {
       expect(getBorderPadding("inside", 10)).toBe(0);
@@ -35,47 +94,159 @@ describe("BorderContainerView", () => {
     });
 
     it("returns borderWidth for invalid position", () => {
-      // @ts-ignore
+      // @ts-ignore preserve current fallback semantics
       expect(getBorderPadding("other_value", 10)).toBe(10);
     });
   });
 
-  it("Border component renders null if no borderPosition", () => {
-    const style = { borderWidth: 5, borderRadius: 10, borderColor: "red" };
-
-    const padding = {
-      paddingTop: 2,
-      paddingRight: 3,
-      paddingBottom: 4,
-      paddingLeft: 5,
-    };
-
-    const borderPosition = null;
-    const mockEntry = { id: "test-entry" } as ZappEntry;
-    const mockHasFocusableInside = jest.fn(() => false);
-
-    const { queryByTestId } = render(
-      <BorderContainerView
-        style={style}
-        testID="border-container"
-        borderPosition={borderPosition}
-        borderPaddingTop={toNumberWithDefaultZero(padding.paddingTop)}
-        borderPaddingRight={toNumberWithDefaultZero(padding.paddingRight)}
-        borderPaddingBottom={toNumberWithDefaultZero(padding.paddingBottom)}
-        borderPaddingLeft={toNumberWithDefaultZero(padding.paddingLeft)}
-        hasFocusableInside={mockHasFocusableInside}
-        entry={mockEntry}
-        state="focused"
-        hasTextLabels={false}
-      >
-        <View testID="child" />
-      </BorderContainerView>
+  it("extracts explicit border props from flattened style while preserving root style", () => {
+    const style = [
+      { backgroundColor: "purple", shadowOpacity: 0.6 },
+      { borderWidth: "6", borderColor: "orange", borderRadius: 12 },
+    ];
+
+    const { getByTestId } = renderBorderContainer({
+      style,
+      borderPaddingTop: 1,
+      borderPaddingRight: 2,
+      borderPaddingBottom: 3,
+      borderPaddingLeft: 4,
+    });
+
+    const root = getByTestId("border-container");
+    const overlay = root.children[0] as any;
+    const overlayHost = overlay.children[0] as any;
+    const child = root.children[1] as any;
+
+    expect(child.props.testID).toBe("child");
+
+    const flattenedRootStyle = StyleSheet.flatten(root.props.style);
+    expect(flattenedRootStyle.backgroundColor).toBe("purple");
+    expect(flattenedRootStyle.shadowOpacity).toBe(0.6);
+    expect(flattenedRootStyle.borderRadius).toBe(12);
+
+    expect(overlay.props.borderWidth).toBe(6);
+    expect(overlay.props.borderColor).toBe("orange");
+    expect(overlay.props.borderRadius).toBe(12);
+
+    const flattenedOverlayStyle = StyleSheet.flatten(overlayHost.props.style);
+    expect(flattenedOverlayStyle.borderWidth).toBe(6);
+    expect(flattenedOverlayStyle.borderColor).toBe("orange");
+    expect(flattenedOverlayStyle.top).toBe(-7);
+    expect(flattenedOverlayStyle.right).toBe(-8);
+    expect(flattenedOverlayStyle.bottom).toBe(-9);
+    expect(flattenedOverlayStyle.left).toBe(-10);
+    expect(flattenedOverlayStyle.borderTopLeftRadius).toBe(19);
+    expect(flattenedOverlayStyle.borderTopRightRadius).toBe(19);
+    expect(flattenedOverlayStyle.borderBottomLeftRadius).toBe(21);
+    expect(flattenedOverlayStyle.borderBottomRightRadius).toBe(20);
+  });
+
+  it("renders no overlay when borderPosition is missing", () => {
+    const { getByTestId } = renderBorderContainer({
+      borderPosition: null,
+    });
+
+    const root = getByTestId("border-container");
+
+    expect(root.children).toHaveLength(2);
+    expect((root.children[0] as any).children).toHaveLength(0);
+    expect((root.children[1] as any).props.testID).toBe("child");
+  });
+
+  it("preserves root pointerEvents defaults and caller overrides", () => {
+    const defaultRender = renderBorderContainer();
+
+    expect(
+      defaultRender.getByTestId("border-container").props.pointerEvents
+    ).toBe("box-none");
+
+    const overrideRender = renderBorderContainer({
+      pointerEvents: "none",
+      testID: "override-border-container",
+    });
+
+    expect(
+      overrideRender.getByTestId("override-border-container").props
+        .pointerEvents
+    ).toBe("none");
+  });
+
+  it("keeps the heading announcement logic in the QuickBrick wrapper", async () => {
+    renderBorderContainer({
+      entry: { id: "entry-1", title: "Hero title" } as ZappEntry,
+      state: "focused",
+      hasTextLabels: false,
+      hasFocusableInside: jest.fn(() => false),
+    });
+
+    await waitFor(() => {
+      expect(mockAddHeading).toHaveBeenCalledWith("Hero title");
+    });
+  });
+
+  it("suppresses the heading announcement while measurement is in progress", async () => {
+    renderBorderContainer(
+      {
+        entry: { id: "entry-1", title: "Hero title" } as ZappEntry,
+      },
+      { measuringInProgress: true }
     );
 
-    const children = queryByTestId("border-container").children;
+    await waitFor(() => {
+      expect(mockAddHeading).not.toHaveBeenCalled();
+    });
+  });
+
+  it("stays compatible with the ImageBorderContainer caller path", () => {
+    const imageBorderConfig = ImageBorderContainer({
+      value: createMockValue(),
+      state: "default",
+      imageStyles: {
+        width: 100,
+        height: 60,
+      },
+    });
+
+    const { getByTestId } = renderBorderContainer({
+      style: imageBorderConfig.style,
+      pointerEvents: imageBorderConfig.additionalProps.pointerEvents,
+      borderPosition: imageBorderConfig.additionalProps.borderPosition,
+      borderPaddingTop: imageBorderConfig.additionalProps.borderPaddingTop,
+      borderPaddingRight: imageBorderConfig.additionalProps.borderPaddingRight,
+      borderPaddingBottom:
+        imageBorderConfig.additionalProps.borderPaddingBottom,
+      borderPaddingLeft: imageBorderConfig.additionalProps.borderPaddingLeft,
+      children: <View testID="image-border-child" />,
+      state: null,
+      hasTextLabels: true,
+    });
+
+    const root = getByTestId("border-container");
+    const overlay = root.children[0] as any;
+    const overlayHost = overlay.children[0] as any;
+    const child = root.children[1] as any;
+
+    expect(root.props.pointerEvents).toBe("none");
+    expect(child.props.testID).toBe("image-border-child");
+
+    const flattenedRootStyle = StyleSheet.flatten(root.props.style);
+    expect(flattenedRootStyle.borderRadius).toBe(10);
+    expect(flattenedRootStyle.marginTop).toBe(12);
+    expect(flattenedRootStyle.marginLeft).toBe(14);
+    expect(flattenedRootStyle.marginRight).toBe(16);
+    expect(flattenedRootStyle.marginBottom).toBe(18);
 
-    expect(children[1].props.testID).toBe("child");
+    expect(overlay.props.borderWidth).toBe(5);
+    expect(overlay.props.borderColor).toBe("black");
+    expect(overlay.props.borderRadius).toBe(10);
 
-    expect(children[0].children.length).toBe(0);
+    const flattenedOverlayStyle = StyleSheet.flatten(overlayHost.props.style);
+    expect(flattenedOverlayStyle.borderWidth).toBe(5);
+    expect(flattenedOverlayStyle.borderColor).toBe("black");
+    expect(flattenedOverlayStyle.borderTopLeftRadius).toBe(21);
+    expect(flattenedOverlayStyle.borderTopRightRadius).toBe(21);
+    expect(flattenedOverlayStyle.borderBottomLeftRadius).toBe(23);
+    expect(flattenedOverlayStyle.borderBottomRightRadius).toBe(22);
   });
 });