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

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

@@ -0,0 +1,141 @@
+import { MobileActionButtons } from "..";
+import { Asset } from "../Asset";
+import { AssetComponent } from "../AssetComponent";
+import { Button } from "../Button";
+import { TextLabelsContainer } from "../TextLabelsContainer";
+
+describe("mobile action button builders", () => {
+  const configuration = {
+    mobile_buttons_container_align: "left",
+    mobile_buttons_container_margin_top: 0,
+    mobile_buttons_container_margin_right: 12,
+    mobile_buttons_container_margin_bottom: 0,
+    mobile_buttons_container_margin_left: 6,
+    mobile_buttons_container_stacking: "horizontal",
+    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_enabled: true,
+    mobile_button_1_action_asset_flavour: "flavour_1",
+    mobile_button_1_asset_alignment: "left",
+    mobile_button_1_asset_width: 24,
+    mobile_button_1_asset_height: 24,
+    mobile_button_1_asset_margin_top: 1,
+    mobile_button_1_asset_margin_right: 2,
+    mobile_button_1_asset_margin_bottom: 3,
+    mobile_button_1_asset_margin_left: 4,
+    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)",
+    mobile_button_1_ios_font_family: "Ubuntu-Bold",
+    mobile_button_1_android_font_family: "Ubuntu-Bold",
+    mobile_button_1_font_size: 15,
+    mobile_button_1_line_height: 24,
+    mobile_button_1_ios_letter_spacing: -0.2,
+    mobile_button_1_android_letter_spacing: -0.2,
+    mobile_button_1_text_transform: "default",
+  };
+
+  const value = (key) => configuration[key];
+
+  it("builds the button node with asset and text label children", () => {
+    const result = Button({
+      index: 0,
+      value,
+      stylePrefix: "mobile_button_1",
+      specificPrefix: "mobile_button_1",
+      spacingStyle: { marginRight: 8 },
+    });
+
+    expect(result.type).toBe("MobileActionButton");
+    expect(result.additionalProps.action.identifier).toBe("navigation_action");
+
+    expect(result.elements).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ type: "ReactComponent" }),
+        expect.objectContaining({ type: "View" }),
+      ])
+    );
+  });
+
+  it("wraps each mobile button with DataProvider", () => {
+    const dataProviderConfiguration = {
+      ...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: 12,
+      mobile_buttons_container_margin_bottom: 0,
+      mobile_buttons_container_margin_left: 6,
+      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",
+    };
+
+    const result = MobileActionButtons({
+      value: (key) => dataProviderConfiguration[key],
+      configuration: dataProviderConfiguration,
+      placement: "over_image",
+    });
+
+    // Top-level is ButtonContainerView (View)
+    expect(result.type).toBe("ButtonContainerView");
+
+    // Content view contains DataProvider-wrapped buttons
+    const dataProvider = result.elements[0];
+    expect(dataProvider.type).toBe("DataProvider");
+
+    expect(dataProvider).toMatchObject({
+      type: "DataProvider",
+      data: [
+        {
+          func: "identity",
+          args: [],
+          propName: "entry",
+        },
+      ],
+      elements: [expect.objectContaining({ type: "MobileActionButton" })],
+    });
+  });
+
+  it("builds the asset, label container, and label nodes", () => {
+    expect(
+      Asset({
+        style: { width: 24, height: 24 },
+        testID: "mobile_action_button_1",
+      })
+    ).toEqual(
+      expect.objectContaining({
+        type: "ReactComponent",
+        additionalProps: expect.objectContaining({
+          component: AssetComponent,
+        }),
+      })
+    );
+
+    expect(
+      TextLabelsContainer({
+        actionIdentifier: "navigation_action",
+        testID: "mobile_action_button_1",
+        style: { color: "rgba(255,255,255,1)" },
+      })
+    ).toEqual(
+      expect.objectContaining({
+        type: "View",
+        elements: [expect.objectContaining({ type: "Text" })],
+      })
+    );
+  });
+});

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

@@ -0,0 +1,354 @@
+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("ButtonContainerView");
+    expect(result.style.position).toBe("absolute");
+    expect(result.style.top).toBe(0);
+    expect(result.style.right).toBe(0);
+
+    // Content view
+    expect(result.additionalProps.contentStyle.flexDirection).toBe("row");
+
+    // First button wrapped in DataProvider
+    const dataProvider = result.elements[0];
+    expect(dataProvider.type).toBe("DataProvider");
+
+    expect(dataProvider.data).toEqual([
+      {
+        func: "identity",
+        args: [],
+        propName: "entry",
+      },
+    ]);
+
+    const button = dataProvider.elements[0];
+    expect(button.type).toBe("MobileActionButton");
+
+    expect(button.elements).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ type: "ReactComponent" }),
+        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]?.type).toBe("DataProvider");
+
+    expect(result?.elements?.[0]?.elements?.[0]?.type).toBe(
+      "MobileActionButton"
+    );
+  });
+
+  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_2_asset_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(
+      "MobileActionButton"
+    );
+
+    expect(
+      result?.elements?.[0]?.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",
+      mobile_button_3_asset_enabled: true,
+    };
+
+    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(
+      "MobileActionButton"
+    );
+
+    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",
+      mobile_button_3_asset_enabled: true,
+    };
+
+    const sparseValue = (key) => configurationWithSparseButtons[key];
+
+    const result = MobileActionButtons({
+      value: sparseValue,
+      configuration: configurationWithSparseButtons,
+      placement: "over_image",
+    });
+
+    // Content view has 2 DataProvider children (one per enabled button)
+    expect(result?.elements).toHaveLength(2);
+
+    expect(
+      result?.elements?.[0]?.elements?.[0]?.additionalProps?.action?.identifier
+    ).toBe("action_1");
+
+    expect(
+      result?.elements?.[1]?.elements?.[0]?.additionalProps?.action?.identifier
+    ).toBe("action_3");
+
+    expect(result?.elements?.[0]?.elements?.[0]?.additionalProps?.testID).toBe(
+      "mobile_action_button_1"
+    );
+
+    expect(result?.elements?.[1]?.elements?.[0]?.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?.additionalProps?.contentStyle).toMatchObject({
+      flexDirection: "column",
+      alignItems: "center",
+      paddingTop: 5,
+      paddingRight: 6,
+      paddingBottom: 7,
+      paddingLeft: 8,
+    });
+
+    expect(overImageResult?.style).toMatchObject({
+      alignItems: "flex-end",
+      bottom: 0,
+      justifyContent: "flex-start",
+      left: 0,
+      position: "absolute",
+      right: 0,
+      top: 0,
+      zIndex: 10,
+    });
+
+    expect(
+      overImageResult?.additionalProps?.contentStyle?.alignSelf
+    ).toBeUndefined();
+  });
+
+  describe("button content visibility", () => {
+    const makeConfig = (overrides) => ({
+      ...configuration,
+      ...overrides,
+    });
+
+    it("renders only an asset when only asset is enabled", () => {
+      const config = makeConfig({
+        mobile_button_1_asset_enabled: true,
+        mobile_button_1_label_enabled: false,
+      });
+
+      const result = MobileActionButtons({
+        value: (key) => config[key],
+        configuration: config,
+        placement: "over_image",
+      });
+
+      const buttonElements =
+        result?.elements?.[0]?.elements?.[0]?.elements ?? [];
+
+      expect(buttonElements.some((el) => el.type === "ReactComponent")).toBe(
+        true
+      );
+
+      expect(buttonElements.some((el) => el.type === "View")).toBe(false);
+    });
+
+    it("renders only a label container when only label is enabled", () => {
+      const config = makeConfig({
+        mobile_button_1_asset_enabled: false,
+        mobile_button_1_label_enabled: true,
+      });
+
+      const result = MobileActionButtons({
+        value: (key) => config[key],
+        configuration: config,
+        placement: "over_image",
+      });
+
+      const buttonElements =
+        result?.elements?.[0]?.elements?.[0]?.elements ?? [];
+
+      expect(buttonElements.some((el) => el.type === "ReactComponent")).toBe(
+        false
+      );
+
+      expect(buttonElements.some((el) => el.type === "View")).toBe(true);
+    });
+
+    it("renders both asset and label container when both are enabled", () => {
+      const config = makeConfig({
+        mobile_button_1_asset_enabled: true,
+        mobile_button_1_label_enabled: true,
+      });
+
+      const result = MobileActionButtons({
+        value: (key) => config[key],
+        configuration: config,
+        placement: "over_image",
+      });
+
+      const buttonElements =
+        result?.elements?.[0]?.elements?.[0]?.elements ?? [];
+
+      expect(buttonElements.some((el) => el.type === "ReactComponent")).toBe(
+        true
+      );
+
+      expect(buttonElements.some((el) => el.type === "View")).toBe(true);
+    });
+
+    it("omits the button entirely when neither asset nor label is enabled", () => {
+      const config = makeConfig({
+        mobile_button_1_asset_enabled: false,
+        mobile_button_1_label_enabled: false,
+      });
+
+      const result = MobileActionButtons({
+        value: (key) => config[key],
+        configuration: config,
+        placement: "over_image",
+      });
+
+      // Button() returns null so compact filters the DataProvider wrapper
+      expect(result?.elements).toHaveLength(0);
+    });
+  });
+});

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