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

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

@@ -0,0 +1,198 @@
+type Label = {
+  name?: string;
+  elements?: Array<Label | unknown>;
+};
+
+type LabelContainer = {
+  elements?: Array<Label | unknown>;
+};
+
+type LabelExtraContainer = {
+  elements?: Array<LabelContainer | unknown>;
+};
+
+type InsertOptions = {
+  position?: string;
+  allowOnTop?: boolean;
+  appendWhenMissing?: boolean;
+};
+
+type Slot = {
+  name: string;
+  element?: unknown;
+};
+
+const hasLabelName = (value: unknown): value is Label =>
+  !!value &&
+  typeof value === "object" &&
+  typeof (value as Label).name === "string" &&
+  (value as Label).name !== "";
+
+const withButtons = (
+  labelName: string | undefined,
+  buttons: unknown,
+  labels: Label[]
+) =>
+  labels.reduce<Array<Label | unknown>>((acc, label) => {
+    if (!!label?.name && labelName?.includes(label.name)) {
+      // handle above_*
+      if (labelName?.startsWith("above_")) {
+        return [...acc, buttons, label];
+      }
+
+      // handle below_* or plain exact match (default: insert after (covers below_* AND plain names))
+      return [...acc, label, buttons];
+    }
+
+    return [...acc, label];
+  }, []);
+
+const withButtonsInNestedViews = (
+  labelName: string | undefined,
+  buttons: unknown,
+  views: Array<LabelContainer | unknown>
+) => {
+  const hasDirectLabels = views.some((view) => hasLabelName(view));
+
+  if (hasDirectLabels) {
+    return withButtons(labelName, buttons, views as Label[]);
+  }
+
+  return views.map((view) => {
+    if (
+      !view ||
+      typeof view !== "object" ||
+      !Array.isArray((view as LabelContainer).elements)
+    ) {
+      return view;
+    }
+
+    return {
+      ...(view as LabelContainer),
+      elements: withButtons(
+        labelName,
+        buttons,
+        (view as LabelContainer).elements || []
+      ),
+    };
+  });
+};
+
+const containsNestedLabel = (
+  labelName: string | undefined,
+  labelContainers: LabelExtraContainer[]
+) =>
+  labelContainers.some((labelContainer) =>
+    (labelContainer.elements || []).some((view) => {
+      if (hasLabelName(view)) {
+        return labelName?.includes(view.name) ?? false;
+      }
+
+      if (
+        !view ||
+        typeof view !== "object" ||
+        !Array.isArray((view as LabelContainer).elements)
+      ) {
+        return false;
+      }
+
+      return ((view as LabelContainer).elements || []).some((label) =>
+        hasLabelName(label) ? (labelName?.includes(label.name) ?? false) : false
+      );
+    })
+  );
+
+export const insertBetweenLabels = (
+  { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
+  buttons: unknown,
+  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;
+  }
+
+  if (allowOnTop && position === "on_top") {
+    return [buttons, ...labels];
+  }
+
+  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) {
+    return appendWhenMissing ? [...labels, buttons] : labels;
+  }
+
+  return result;
+};
+
+export const insertBetweenLabelContainers = (
+  { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
+  buttons: unknown,
+  labelContainers: LabelExtraContainer[] = []
+) => {
+  if (buttons == null) {
+    return labelContainers;
+  }
+
+  if (labelContainers.length === 0) {
+    return [buttons];
+  }
+
+  if (allowOnTop && position === "on_top") {
+    return labelContainers.map((labelContainer, index) =>
+      index === 0
+        ? {
+            ...labelContainer,
+            elements: [buttons, ...(labelContainer.elements || [])],
+          }
+        : labelContainer
+    );
+  }
+
+  const hasMatchingLabel = containsNestedLabel(position, labelContainers);
+
+  const labelContainersWithButtons = labelContainers.map((labelContainer) => ({
+    ...labelContainer,
+    elements: withButtonsInNestedViews(
+      position,
+      buttons,
+      labelContainer.elements || []
+    ),
+  }));
+
+  if (!hasMatchingLabel && appendWhenMissing) {
+    return labelContainers.map((labelContainer, index) =>
+      index === labelContainers.length - 1
+        ? {
+            ...labelContainer,
+            elements: [...(labelContainer.elements || []), buttons],
+          }
+        : labelContainer
+    );
+  }
+
+  return hasMatchingLabel ? labelContainersWithButtons : labelContainers;
+};

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

@@ -0,0 +1,26 @@
+export const getButtonSlotPrefix = (buttonPrefix: string, slot: number) =>
+  `${buttonPrefix}_${slot}`;
+
+export const getEnabledButtonSlots = (
+  configuration: Record<string, unknown>,
+  buttonPrefix: string,
+  maxButtons = 3
+): number[] =>
+  Array.from({ length: maxButtons }, (_, index) => index + 1).filter((slot) =>
+    Boolean(
+      configuration[`${getButtonSlotPrefix(buttonPrefix, slot)}_button_enabled`]
+    )
+  );
+
+export const getStylePrefix = ({
+  slot,
+  independentStyles,
+  buttonPrefix,
+}: {
+  slot: number;
+  independentStyles: boolean;
+  buttonPrefix: string;
+}) =>
+  independentStyles
+    ? getButtonSlotPrefix(buttonPrefix, slot)
+    : getButtonSlotPrefix(buttonPrefix, 1);

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

@@ -0,0 +1,29 @@
+import { mapSelfAlignment } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+import { ActionButtonsContainerLayout } from "./types";
+
+export const getContainerMargins = (
+  value: (key: string) => unknown,
+  prefix: string
+) => ({
+  top: toNumberWithDefaultZero(value(`${prefix}_margin_top`)),
+  right: toNumberWithDefaultZero(value(`${prefix}_margin_right`)),
+  bottom: toNumberWithDefaultZero(value(`${prefix}_margin_bottom`)),
+  left: toNumberWithDefaultZero(value(`${prefix}_margin_left`)),
+});
+
+export const buildContainerLayout = (
+  value: (key: string) => unknown,
+  prefix: string
+): ActionButtonsContainerLayout => ({
+  horizontalAlign: mapSelfAlignment(value(`${prefix}_align`)),
+  margins: getContainerMargins(value, prefix),
+  stacking:
+    value(`${prefix}_stacking`) === "vertical" ? "vertical" : "horizontal",
+  horizontalGutter: toNumberWithDefaultZero(
+    value(`${prefix}_horizontal_gutter`)
+  ),
+  verticalGutter: toNumberWithDefaultZero(value(`${prefix}_vertical_gutter`)),
+  independentStyles: Boolean(value(`${prefix}_independent_styles`)),
+});

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

@@ -0,0 +1,37 @@
+export type ActionButtonSlot = number;
+
+export type ActionButtonDescriptor = {
+  slot: ActionButtonSlot;
+  renderIndex: number;
+  specificPrefix: string;
+  stylePrefix: string;
+};
+
+export type ActionButtonsContainerLayout = {
+  horizontalAlign: string;
+  margins: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  stacking: "horizontal" | "vertical";
+  horizontalGutter: number;
+  verticalGutter: number;
+  independentStyles: boolean;
+};
+
+export type ActionButtonsModel = {
+  enabledSlots: ActionButtonSlot[];
+  buttonsCount: number;
+  container: ActionButtonsContainerLayout;
+  buttons: ActionButtonDescriptor[];
+};
+
+export type BuildActionButtonsModelOptions = {
+  configuration: Record<string, unknown>;
+  value: (key: string) => unknown;
+  containerPrefix: string;
+  buttonPrefix: string;
+  maxButtons?: number;
+};

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);
   });
 });