@applicaster/zapp-react-native-ui-components 15.0.0-alpha.1690332913 → 15.0.0-alpha.1693300296

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/index.test.ts

@@ -0,0 +1,222 @@
+import { MobileActionButtons } from "..";
+
+describe("MobileActionButtons", () => {
+  const configuration = {
+    mobile_buttons_container_buttons_enabled: true,
+    mobile_buttons_container_position: "over_image",
+    mobile_buttons_container_align: "left",
+    mobile_buttons_container_margin_top: 0,
+    mobile_buttons_container_margin_right: 0,
+    mobile_buttons_container_margin_bottom: 0,
+    mobile_buttons_container_margin_left: 0,
+    mobile_buttons_container_stacking: "horizontal",
+    mobile_buttons_container_horizontal_gutter: 8,
+    mobile_buttons_container_vertical_gutter: 8,
+    mobile_buttons_container_independent_styles: true,
+    mobile_buttons_container_over_image_position: "top_right",
+    mobile_button_1_button_enabled: true,
+    mobile_button_1_assign_action: "navigation_action",
+    mobile_button_1_display_mode: "dynamic",
+    mobile_button_1_contents_alignment: "center",
+    mobile_button_1_background_color: "rgba(1,1,1,1)",
+    mobile_button_1_border_color: "rgba(0,0,0,0)",
+    mobile_button_1_border_size: 0,
+    mobile_button_1_corner_radius: 8,
+    mobile_button_1_padding_top: 10,
+    mobile_button_1_padding_right: 10,
+    mobile_button_1_padding_bottom: 10,
+    mobile_button_1_padding_left: 10,
+    mobile_button_1_asset_width: 24,
+    mobile_button_1_asset_height: 24,
+    mobile_button_1_asset_margin_top: 0,
+    mobile_button_1_asset_margin_right: 0,
+    mobile_button_1_asset_margin_bottom: 0,
+    mobile_button_1_asset_margin_left: 0,
+    mobile_button_1_asset_enabled: true,
+    mobile_button_1_label_enabled: true,
+    mobile_button_1_font_color: "rgba(255,255,255,1)",
+    mobile_button_1_focused_font_color: "rgba(255,0,0,1)",
+  };
+
+  const value = (key) => configuration[key];
+
+  it("renders over-image buttons only for over_image placement", () => {
+    const result = MobileActionButtons({
+      value,
+      configuration,
+      placement: "over_image",
+    });
+
+    expect(result).toBeTruthy();
+    expect(result.type).toBe("View");
+    expect(result.style.position).toBe("absolute");
+    expect(result.style.top).toBe(0);
+    expect(result.style.right).toBe(0);
+    expect(result.elements).toHaveLength(1);
+    expect(result.elements[0].type).toBe("View");
+    expect(result.elements[0].style.flexDirection).toBe("row");
+    expect(result.elements[0].elements[0].type).toBe("PressableView");
+
+    expect(result.elements[0].elements[0].elements).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ type: "Image" }),
+        expect.objectContaining({ type: "View" }),
+      ])
+    );
+  });
+
+  it("does not render label placement when position is over_image", () => {
+    const result = MobileActionButtons({
+      value,
+      configuration,
+      placement: "labels",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("renders button 1 when only button 1 is enabled", () => {
+    const configurationWithSingleButton = {
+      ...configuration,
+      mobile_button_1_button_enabled: true,
+      mobile_button_2_button_enabled: false,
+      mobile_button_3_button_enabled: false,
+    };
+
+    const singleButtonValue = (key) => configurationWithSingleButton[key];
+
+    const result = MobileActionButtons({
+      value: singleButtonValue,
+      configuration: configurationWithSingleButton,
+      placement: "over_image",
+    });
+
+    expect(result?.elements?.[0]?.elements).toHaveLength(1);
+    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe("PressableView");
+  });
+
+  it("renders button 2 when only button 2 is enabled", () => {
+    const configurationWithSingleButton = {
+      ...configuration,
+      mobile_button_1_button_enabled: false,
+      mobile_button_2_button_enabled: true,
+      mobile_button_3_button_enabled: false,
+    };
+
+    const singleButtonValue = (key) => configurationWithSingleButton[key];
+
+    const result = MobileActionButtons({
+      value: singleButtonValue,
+      configuration: configurationWithSingleButton,
+      placement: "over_image",
+    });
+
+    expect(result?.elements?.[0]?.elements).toHaveLength(1);
+    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe("PressableView");
+
+    expect(
+      result?.elements?.[0]?.elements?.[0]?.additionalProps?.action?.identifier
+    ).toBe(configurationWithSingleButton.mobile_button_2_assign_action);
+  });
+
+  it("renders button 3 when only button 3 is enabled", () => {
+    const configurationWithSingleButton = {
+      ...configuration,
+      mobile_button_1_button_enabled: false,
+      mobile_button_2_button_enabled: false,
+      mobile_button_3_button_enabled: true,
+      mobile_button_3_assign_action: "local_storage_favourites_action",
+    };
+
+    const singleButtonValue = (key) => configurationWithSingleButton[key];
+
+    const result = MobileActionButtons({
+      value: singleButtonValue,
+      configuration: configurationWithSingleButton,
+      placement: "over_image",
+    });
+
+    expect(result?.elements?.[0]?.elements).toHaveLength(1);
+    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe("PressableView");
+
+    expect(
+      result?.elements?.[0]?.elements?.[0]?.additionalProps?.action?.identifier
+    ).toBe(configurationWithSingleButton.mobile_button_3_assign_action);
+  });
+
+  it("renders sparse slots contiguously while preserving slot-specific actions", () => {
+    const configurationWithSparseButtons = {
+      ...configuration,
+      mobile_button_1_button_enabled: true,
+      mobile_button_1_assign_action: "action_1",
+      mobile_button_2_button_enabled: false,
+      mobile_button_3_button_enabled: true,
+      mobile_button_3_assign_action: "action_3",
+    };
+
+    const sparseValue = (key) => configurationWithSparseButtons[key];
+
+    const result = MobileActionButtons({
+      value: sparseValue,
+      configuration: configurationWithSparseButtons,
+      placement: "over_image",
+    });
+
+    expect(result?.elements?.[0]?.elements).toHaveLength(2);
+
+    expect(
+      result?.elements?.[0]?.elements?.[0]?.additionalProps?.action?.identifier
+    ).toBe("action_1");
+
+    expect(
+      result?.elements?.[0]?.elements?.[1]?.additionalProps?.action?.identifier
+    ).toBe("action_3");
+
+    expect(result?.elements?.[0]?.elements?.[0]?.additionalProps?.testID).toBe(
+      "mobile_action_button_1"
+    );
+
+    expect(result?.elements?.[0]?.elements?.[1]?.additionalProps?.testID).toBe(
+      "mobile_action_button_2"
+    );
+  });
+
+  it("maps shared semantic layout data into content styles", () => {
+    const configurationWithLayout = {
+      ...configuration,
+      mobile_buttons_container_align: "middle",
+      mobile_buttons_container_margin_top: 5,
+      mobile_buttons_container_margin_right: 6,
+      mobile_buttons_container_margin_bottom: 7,
+      mobile_buttons_container_margin_left: 8,
+      mobile_buttons_container_stacking: "vertical",
+    };
+
+    const layoutValue = (key) => configurationWithLayout[key];
+
+    const result = MobileActionButtons({
+      value: layoutValue,
+      configuration: configurationWithLayout,
+      placement: "labels",
+    });
+
+    expect(result).toBeNull();
+
+    const overImageResult = MobileActionButtons({
+      value: layoutValue,
+      configuration: configurationWithLayout,
+      placement: "over_image",
+    });
+
+    expect(overImageResult?.elements?.[0]?.style).toMatchObject({
+      flexDirection: "column",
+      alignItems: "center",
+      marginTop: 5,
+      marginRight: 6,
+      marginBottom: 7,
+      marginLeft: 8,
+    });
+
+    expect(overImageResult?.elements?.[0]?.style.alignSelf).toBeUndefined();
+  });
+});

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/helpers.ts

@@ -0,0 +1,105 @@
+import { Platform } from "react-native";
+
+export function isStringAsset(asset) {
+  return typeof asset === "string" || Array.isArray(asset);
+}
+
+export function getAssetValue(asset, flavour, fallbackAsset = null) {
+  if (!asset) {
+    return fallbackAsset;
+  }
+
+  if (typeof asset === "string") {
+    return asset;
+  }
+
+  if (Array.isArray(asset)) {
+    const flavourIndex = Number(String(flavour || "").replace("flavour_", ""));
+
+    if (!Number.isNaN(flavourIndex) && flavourIndex > 0) {
+      return asset[flavourIndex - 1];
+    }
+
+    return asset[0];
+  }
+
+  return asset.src || fallbackAsset;
+}
+
+export function getContentDirection(alignment = "left") {
+  switch (alignment) {
+    case "right":
+      return "row-reverse";
+    case "above":
+      return "column";
+    case "below":
+      return "column-reverse";
+    case "left":
+    default:
+      return "row";
+  }
+}
+
+export function getContentsAlignment(alignment = "center") {
+  switch (alignment) {
+    case "left":
+      return "flex-start";
+    case "right":
+      return "flex-end";
+    case "center":
+    default:
+      return "center";
+  }
+}
+
+export function resolveLabelText(label) {
+  if (typeof label === "string") {
+    return label;
+  }
+
+  return label?.label_1 || "";
+}
+
+export function resolveIsActive(actionState, fallbackSelected = false) {
+  if (actionState == null) {
+    return fallbackSelected;
+  }
+
+  return Boolean(
+    actionState?.active ??
+      actionState?.isActive ??
+      actionState?.selected ??
+      actionState?.isSelected ??
+      fallbackSelected
+  );
+}
+
+export function buildLegacySelection(item, actionContext) {
+  const defaultIsSelected = (actionContext?.state || []).includes(item);
+
+  return actionContext?.masterCell?.isSelected
+    ? actionContext?.masterCell?.isSelected(item)
+    : defaultIsSelected;
+}
+
+export function buildLabelStyle(label) {
+  if (!label?.enabled) {
+    return {};
+  }
+
+  const platformFontFamily =
+    Platform.OS === "ios"
+      ? label?.iosFontFamily || label?.normalStyle?.fontFamily
+      : label?.androidFontFamily || label?.normalStyle?.fontFamily;
+
+  const platformLetterSpacing =
+    Platform.OS === "ios"
+      ? label?.iosLetterSpacing
+      : label?.androidLetterSpacing;
+
+  return {
+    ...label?.normalStyle,
+    fontFamily: platformFontFamily,
+    letterSpacing: platformLetterSpacing,
+  };
+}

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/index.ts

@@ -0,0 +1,104 @@
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+import {
+  insertButtonsBetweenLabels,
+  insertButtonsBetweenLabelContainers,
+  mobileOverImagePositionStyles,
+} from "./utils";
+import { Button } from "./Button";
+import { ButtonContainerView } from "./ButtonContainerView";
+import { buildActionButtonsModel } from "../../ActionButtonsCore/model";
+
+const CONTAINER_PREFIX = "mobile_buttons_container";
+const BUTTON_PREFIX = "mobile_button";
+
+type MobileActionButtonsProps = {
+  value: (key: string) => unknown;
+  configuration: Record<string, unknown>;
+  placement: "labels" | "over_image"; // Indicates where the component was placed, to apply specific display rules
+};
+
+export const MobileActionButtons = ({
+  value,
+  configuration,
+  placement,
+}: MobileActionButtonsProps) => {
+  const position = value(`${CONTAINER_PREFIX}_position`);
+
+  if (placement === "labels" && position === "over_image") {
+    return null;
+  }
+
+  if (placement === "over_image" && position !== "over_image") {
+    return null;
+  }
+
+  const model = buildActionButtonsModel({
+    configuration,
+    value,
+    containerPrefix: CONTAINER_PREFIX,
+    buttonPrefix: BUTTON_PREFIX,
+  });
+
+  if (!model) {
+    return null;
+  }
+
+  const elements = compact(
+    model.buttons.map(({ renderIndex, specificPrefix, stylePrefix }) => {
+      const isNotLast = renderIndex < model.buttons.length - 1;
+
+      const {
+        container: { stacking, verticalGutter, horizontalGutter },
+      } = model;
+
+      const isVertical = stacking === "vertical";
+      const gutter = isVertical ? verticalGutter : horizontalGutter;
+
+      const spacingStyle = {
+        [isVertical ? "marginBottom" : "marginRight"]: isNotLast ? gutter : 0,
+      };
+
+      return Button({
+        index: renderIndex,
+        value,
+        stylePrefix,
+        specificPrefix,
+        spacingStyle,
+      });
+    })
+  );
+
+  return ButtonContainerView({
+    style: {
+      alignItems: "center",
+      ...(placement === "over_image"
+        ? {
+            position: "absolute",
+            zIndex: 10,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ...mobileOverImagePositionStyles(
+              value(`${CONTAINER_PREFIX}_over_image_position`) as string
+            ),
+          }
+        : {}),
+    },
+    contentStyle: {
+      flexDirection: model.container.stacking === "vertical" ? "column" : "row",
+      alignSelf:
+        placement !== "over_image"
+          ? model.container.horizontalAlign
+          : undefined,
+      alignItems: model.container.horizontalAlign,
+      marginTop: model.container.margins.top,
+      marginRight: model.container.margins.right,
+      marginBottom: model.container.margins.bottom,
+      marginLeft: model.container.margins.left,
+    },
+    elements,
+  });
+};
+
+export { insertButtonsBetweenLabels, insertButtonsBetweenLabelContainers };

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/utils/__tests__/insertButtons.test.ts

@@ -0,0 +1,118 @@
+import {
+  insertButtonsBetweenLabelContainers,
+  insertButtonsBetweenLabels,
+  mobileOverImagePositionStyles,
+} from "..";
+
+describe("mobile action insertion helpers", () => {
+  const labels = [{ name: "text_label_1" }, { name: "text_label_2" }];
+  const buttons = { type: "View", name: "buttons" };
+
+  it("inserts label buttons below target label", () => {
+    const result = insertButtonsBetweenLabels(
+      { mobile_buttons_container_position: "below_text_label_1" },
+      buttons,
+      labels
+    );
+
+    expect(result).toEqual([labels[0], buttons, labels[1]]);
+  });
+
+  it("returns labels unchanged when the flat-label target is unknown", () => {
+    const result = insertButtonsBetweenLabels(
+      { mobile_buttons_container_position: "unknown" },
+      buttons,
+      labels
+    );
+
+    expect(result).toEqual([labels[0], labels[1]]);
+  });
+
+  it("inserts label-container buttons below nested target", () => {
+    const labelContainers = [
+      {
+        elements: [{ elements: [{ name: "top_text_label_1" }] }],
+      },
+    ];
+
+    const result = insertButtonsBetweenLabelContainers(
+      { mobile_buttons_container_position: "top_text_label_1" },
+      buttons,
+      labelContainers
+    );
+
+    expect(result).toEqual([
+      {
+        elements: [{ elements: [{ name: "top_text_label_1" }, buttons] }],
+      },
+    ]);
+  });
+
+  it("inserts label-container buttons below direct target in two-level structure", () => {
+    const labelContainers = [
+      {
+        elements: [{ name: "top_text_label_1" }],
+      },
+    ];
+
+    const result = insertButtonsBetweenLabelContainers(
+      { mobile_buttons_container_position: "top_text_label_1" },
+      buttons,
+      labelContainers
+    );
+
+    expect(result).toEqual([
+      {
+        elements: [{ name: "top_text_label_1" }, buttons],
+      },
+    ]);
+  });
+
+  it("appends container buttons into the last container when target is unknown", () => {
+    const labelContainers = [
+      {
+        elements: [{ elements: [{ name: "top_text_label_1" }] }],
+      },
+      {
+        elements: [{ elements: [{ name: "bottom_text_label_1" }] }],
+      },
+    ];
+
+    const result = insertButtonsBetweenLabelContainers(
+      { mobile_buttons_container_position: "unknown" },
+      buttons,
+      labelContainers
+    );
+
+    expect(result).toEqual([
+      labelContainers[0],
+      {
+        elements: [...labelContainers[1].elements, buttons],
+      },
+    ]);
+  });
+});
+
+describe("mobileOverImagePositionStyles", () => {
+  it("maps bottom left anchor to absolute positioning", () => {
+    const result = mobileOverImagePositionStyles("bottom_left");
+
+    expect(result).toEqual({
+      justifyContent: "flex-end",
+      alignItems: "flex-start",
+    });
+  });
+
+  it("maps center anchor to absolute center positioning", () => {
+    const result = mobileOverImagePositionStyles("center");
+
+    expect(result).toEqual({
+      justifyContent: "center",
+      alignItems: "center",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    });
+  });
+});

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/utils/index.ts

@@ -0,0 +1,73 @@
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../../../ActionButtonsCore/placement";
+
+export const insertButtonsBetweenLabels = (
+  configuration: Record<string, unknown>,
+  buttons,
+  labels = []
+) =>
+  insertBetweenLabels(
+    {
+      position: configuration?.mobile_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: false,
+      appendWhenMissing: false,
+    },
+    buttons,
+    labels // "text_label_1", "text_label_2", "text_label_3", "text_label_4"
+  );
+
+export const insertButtonsBetweenLabelContainers = (
+  configuration: Record<string, unknown>,
+  buttons,
+  labelContainers = []
+) =>
+  insertBetweenLabelContainers(
+    {
+      position: configuration?.mobile_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: false,
+      appendWhenMissing: true,
+    },
+    buttons,
+    labelContainers // top_label_1, top_label_2, bottom_label_1, bottom_label_2, etc.
+  );
+
+export const mobileOverImagePositionStyles = (position: string) => {
+  switch (position) {
+    case "top_left":
+      return {
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+      };
+    case "top_right":
+      return {
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+      };
+    case "bottom_left":
+      return {
+        justifyContent: "flex-end",
+        alignItems: "flex-start",
+      };
+    case "bottom_right":
+      return {
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+      };
+    case "center":
+    default:
+      return {
+        justifyContent: "center",
+        alignItems: "center",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      };
+  }
+};

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/__tests__/index.test.ts

@@ -0,0 +1,86 @@
+import { TvActionButtons } from "..";
+
+describe("TvActionButtons", () => {
+  const baseConfiguration = {
+    tv_buttons_container_buttons_enabled: true,
+    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_horizontal_gutter: 10,
+    tv_buttons_container_independent_styles: false,
+    tv_buttons_button_1_button_enabled: true,
+    tv_buttons_button_1_assign_action: "action_1",
+    tv_buttons_button_1_background_padding_top: 11,
+    tv_buttons_button_1_background_padding_right: 12,
+    tv_buttons_button_1_background_padding_bottom: 13,
+    tv_buttons_button_1_background_padding_left: 14,
+    tv_buttons_button_3_button_enabled: true,
+    tv_buttons_button_3_assign_action: "action_3",
+    tv_buttons_button_3_background_padding_top: 31,
+    tv_buttons_button_3_background_padding_right: 32,
+    tv_buttons_button_3_background_padding_bottom: 33,
+    tv_buttons_button_3_background_padding_left: 34,
+  };
+
+  const platformValue = jest.fn();
+
+  it("renders sparse enabled slots with slot-based action lookup and ids", () => {
+    const value = (key) => baseConfiguration[key];
+
+    const result = TvActionButtons({
+      value,
+      platformValue,
+      configuration: baseConfiguration,
+      state: "focused",
+      skipButtons: false,
+    });
+
+    expect(result.style.justifyContent).toBe("center");
+    expect(result.additionalProps.buttonsCount).toBe(2);
+    expect(result.elements).toHaveLength(2);
+
+    expect(result.elements[0].additionalProps.pluginIdentifier).toBe(
+      "action_1"
+    );
+
+    expect(result.elements[0].additionalProps.suffixId).toBe(
+      "tv_buttons_button_1"
+    );
+
+    expect(result.elements[0].additionalProps.preferredFocus).toBe(true);
+
+    expect(result.elements[1].additionalProps.pluginIdentifier).toBe(
+      "action_3"
+    );
+
+    expect(result.elements[1].additionalProps.suffixId).toBe(
+      "tv_buttons_button_3"
+    );
+
+    expect(result.elements[1].additionalProps.preferredFocus).toBe(false);
+  });
+
+  it("keeps shared button styles from slot 1 while preserving slot 3 identity", () => {
+    const value = (key) => baseConfiguration[key];
+
+    const result = TvActionButtons({
+      value,
+      platformValue,
+      configuration: baseConfiguration,
+      state: "focused",
+      skipButtons: false,
+    });
+
+    expect(result.elements[1].style.paddingTop).toBe(11);
+
+    expect(result.elements[1].additionalProps.pluginIdentifier).toBe(
+      "action_3"
+    );
+
+    expect(result.elements[1].additionalProps.suffixId).toBe(
+      "tv_buttons_button_3"
+    );
+  });
+});