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

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

@@ -0,0 +1,159 @@
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+import { Asset } from "./Asset";
+import { TextLabelsContainer } from "./TextLabelsContainer";
+import {
+  getAssetStyles,
+  getContentDirection,
+  getContentsAlignment,
+  getPressableStyles,
+  getTextLabelStyles,
+} from "./utils";
+import { ViewStyle } from "react-native";
+import { Spacer } from "./Spacer";
+
+const displayModeStyle = (value, isVertical: boolean) => {
+  const mode = value("display_mode") || "dynamic";
+
+  const defaultStyle = {
+    flexShrink: 1,
+  };
+
+  const width = toNumberWithDefault(140, value("width"));
+
+  switch (mode) {
+    case "fixed":
+      return {
+        ...defaultStyle,
+        width,
+        maxWidth: width,
+      };
+    case "fill":
+      return {
+        ...defaultStyle,
+        width: isVertical ? "100%" : undefined,
+        flex: !isVertical ? 1 : undefined,
+      };
+    case "dynamic":
+    default:
+      return {
+        ...defaultStyle,
+      };
+  }
+};
+
+type Props = {
+  index: number;
+  value: Function;
+  stylePrefix: string;
+  specificPrefix: string;
+  spacingStyle: ViewStyle;
+  isVertical: boolean;
+};
+
+export const Button = ({
+  index,
+  value,
+  stylePrefix,
+  specificPrefix,
+  spacingStyle,
+  isVertical,
+}: Props) => {
+  // Retrieves values depending to the slot
+  const getSlotBasedValue = (property: string) =>
+    value(`${specificPrefix}_${property}`);
+
+  /**
+   * Retrieves values depending to the independ_style toggle:
+   * (e.g for button value button_2_label_enabled returns button_1_label_enabled when independent_style: false)
+   */
+  const getValue = (property: string) => value(`${stylePrefix}_${property}`);
+
+  const assetEnabled = getValue("asset_enabled");
+  const labelEnabled = getValue("label_enabled");
+
+  if (!getSlotBasedValue("button_enabled")) {
+    return null;
+  }
+
+  if (!assetEnabled && !labelEnabled) {
+    return null;
+  }
+
+  const testID = `mobile_action_button_${index + 1}`;
+  const actionIdentifier = getSlotBasedValue("assign_action");
+  const assetAlignment = getValue("asset_alignment") || "left";
+
+  const hasHorizontalAlignment = ["left", "right"].includes(assetAlignment);
+  const vGutter = toNumberWithDefaultZero(getValue("vertical_gutter"));
+  const hGutter = toNumberWithDefaultZero(getValue("horizontal_gutter"));
+  const actionAssetFlavour = getValue("action_asset_flavour");
+  const contentsAlignment = getValue("contents_alignment") || "center";
+  const displayMode = getValue("display_mode") || "dynamic";
+
+  return {
+    type: "MobileActionButton",
+    style: {
+      // alignContent: "center", Why do we need this?
+      ...getPressableStyles(getValue),
+      ...displayModeStyle(getValue, isVertical),
+      ...spacingStyle,
+    },
+    additionalProps: {
+      displayMode,
+      alignment: {
+        alignContent: "center",
+        flexDirection: getContentDirection(assetAlignment),
+        alignItems: getContentsAlignment(contentsAlignment, assetAlignment),
+        justifyContent: getContentsAlignment(contentsAlignment, assetAlignment),
+      },
+      action: {
+        identifier: actionIdentifier,
+        flavour: actionAssetFlavour,
+        width: toNumberWithDefault(24, getValue("asset_width")),
+        height: toNumberWithDefault(24, getValue("asset_height")),
+      },
+      focusedStyles: {
+        backgroundColor: getValue("focused_background_color"),
+        borderColor: getValue("focused_border_color"),
+      },
+      testID,
+    },
+    elements: compact([
+      assetEnabled
+        ? Asset({
+            style: getAssetStyles(getValue),
+            testID,
+          })
+        : null,
+      Spacer({
+        enabled: assetEnabled && labelEnabled,
+        style: hasHorizontalAlignment
+          ? { width: hGutter }
+          : { height: vGutter },
+      }),
+      labelEnabled
+        ? TextLabelsContainer({
+            style: getTextLabelStyles(getValue),
+            extraProps: {
+              normalStyles: {
+                color: getValue("font_color"),
+              },
+              focusedStyles: {
+                color: getValue("focused_font_color"),
+              },
+              transformText: getValue("text_transform") || "default",
+              numberOfLines: getValue("number_of_lines") || 1,
+              ellipsizeMode: "tail",
+            },
+            actionIdentifier,
+            testID,
+          })
+        : null,
+    ]),
+  };
+};

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

@@ -0,0 +1,18 @@
+type Props = {
+  enabled?: boolean;
+  style?: object;
+};
+
+export const Spacer = ({
+  enabled = false,
+  style = { flex: 1 },
+}: Props = {}) => {
+  if (!enabled) {
+    return null;
+  }
+
+  return {
+    type: "View",
+    style,
+  };
+};

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

@@ -0,0 +1,67 @@
+import { Platform } from "react-native";
+
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  actionIdentifier: string;
+  testID?: string;
+};
+
+export const TextLabel = ({
+  prefix,
+  value,
+  actionIdentifier,
+  testID,
+}: Props) => {
+  if (!value(`${prefix}_label_enabled`)) {
+    return null;
+  }
+
+  return {
+    type: "Text",
+    style: {
+      color: value(`${prefix}_font_color`),
+      fontSize: toNumberWithDefaultZero(value(`${prefix}_font_size`)),
+      lineHeight: toNumberWithDefaultZero(value(`${prefix}_line_height`)),
+      marginTop: toNumberWithDefaultZero(value(`${prefix}_margin_top`)),
+      marginRight: toNumberWithDefaultZero(value(`${prefix}_margin_right`)),
+      marginBottom: toNumberWithDefaultZero(value(`${prefix}_margin_bottom`)),
+      marginLeft: toNumberWithDefaultZero(value(`${prefix}_margin_left`)),
+      fontFamily:
+        Platform.OS === "ios"
+          ? value(`${prefix}_ios_font_family`)
+          : value(`${prefix}_android_font_family`),
+      letterSpacing: toNumberWithDefaultZero(
+        Platform.OS === "ios"
+          ? value(`${prefix}_ios_letter_spacing`)
+          : value(`${prefix}_android_letter_spacing`)
+      ),
+    },
+    data: [
+      {
+        func: (entry) => entry,
+        args: [],
+        propName: "entry",
+      },
+    ],
+    additionalProps: {
+      label: {
+        context: actionIdentifier,
+        name: "label_1",
+      },
+      normalStyles: {
+        color: value(`${prefix}_font_color`),
+      },
+      focusedStyles: {
+        color: value(`${prefix}_focused_font_color`),
+      },
+      state: "default",
+      mobileActionRole: "label",
+      transformText: value(`${prefix}_text_transform`) || "default",
+      numberOfLines: value(`${prefix}_number_of_lines`),
+      testID: testID ? `${testID}-label` : undefined,
+    },
+  };
+};

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

@@ -0,0 +1,39 @@
+type Props = {
+  actionIdentifier: string;
+  testID?: string;
+  style?: object;
+  labelEnabled?: boolean;
+  extraProps?: object;
+};
+
+export const TextLabelsContainer = ({
+  actionIdentifier,
+  testID,
+  style,
+  extraProps,
+}: Props) => {
+  return {
+    type: "View",
+    style: {
+      flexShrink: 1,
+    },
+    additionalProps: {
+      mobileActionRole: "label_container",
+    },
+    elements: [
+      {
+        type: "Text",
+        style: style,
+        additionalProps: {
+          label: {
+            context: actionIdentifier,
+            name: "label_1",
+          },
+          mobileActionRole: "label",
+          testID: testID ? `${testID}-label` : undefined,
+          ...extraProps,
+        },
+      },
+    ],
+  };
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -0,0 +1,402 @@
+import React from "react";
+import { Pressable, Text as RNText, View } from "react-native";
+import { render, fireEvent } from "@testing-library/react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { configInflater } from "../../../../dataAdapter";
+import { elementMapper } from "../../../../elementMapper";
+import { defaultComponents } from "../../../index";
+import { MobileActionButtons } from "..";
+import { AssetComponent } from "../AssetComponent";
+import { usePressedState } from "../../../../hooks/usePressedState";
+
+jest.mock("../../../../hooks/usePressedState", () => ({
+  usePressedState: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({}),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: jest.fn(() => false),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: jest.fn(() => ({
+      currentRoute: "home",
+      videoModalState: {
+        visible: false,
+      },
+    })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname",
+  () => ({
+    usePathname: jest.fn(() => "home"),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
+  () => ({
+    useAccessibilityManager: jest.fn(() => ({
+      addHeading: jest.fn(),
+    })),
+  })
+);
+
+const mockUseActions = useActions as jest.Mock;
+
+const entry = {
+  id: "entry-1",
+} as ZappEntry;
+
+const buildActionContext = (entryState = {}) => ({
+  initialEntryState: jest.fn(() => ({
+    asset: {
+      inactive: "https://example.com/image-inactive.png",
+      active: "https://example.com/image-active.png",
+    },
+    mobileButtonAssets: [
+      "https://example.com/image-inactive.png",
+      "https://example.com/image-active.png",
+    ],
+    label: {
+      label_1: "Play",
+    },
+    ...entryState,
+  })),
+  invokeAction: jest.fn(),
+  addListener: jest.fn(() => jest.fn()),
+  isActionAvailable: jest.fn(() => true),
+});
+
+const mobileConfiguration = {
+  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(2,2,2,1)",
+  mobile_button_1_border_size: 1,
+  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(10,10,10,1)",
+  mobile_button_1_focused_font_color: "rgba(20,20,20,1)",
+  mobile_button_1_font_size: 15,
+  mobile_button_1_line_height: 24,
+  mobile_button_1_ios_font_family: "Ubuntu-Bold",
+  mobile_button_1_android_font_family: "Ubuntu-Bold",
+  mobile_button_1_ios_letter_spacing: -0.2,
+  mobile_button_1_android_letter_spacing: -0.2,
+  mobile_button_1_text_transform: "default",
+};
+
+const baseNode = {
+  type: "MobileActionButton",
+  style: {
+    backgroundColor: "rgba(1,1,1,1)",
+    borderColor: "rgba(2,2,2,1)",
+    borderWidth: 1,
+  },
+  props: {
+    entry,
+    action: {
+      identifier: "navigation_action",
+    },
+    focusedStyles: {
+      backgroundColor: "rgba(3,3,3,1)",
+      borderColor: "rgba(4,4,4,1)",
+    },
+    testID: "mobile-action-button",
+    testOnly_pressed: false,
+  },
+  elements: [
+    {
+      type: "ReactComponent",
+      style: {
+        width: 24,
+        height: 24,
+      },
+      props: {
+        component: AssetComponent,
+        renderChildren: false,
+        requiresCellUUID: true,
+        testID: "mobile-action-button-asset",
+        mobileActionRole: "asset",
+      },
+    },
+    {
+      type: "View",
+      style: {
+        flexDirection: "column",
+      },
+      props: {
+        mobileActionRole: "label_container",
+      },
+      elements: [
+        {
+          type: "Text",
+          style: {
+            fontSize: 15,
+          },
+          props: {
+            testID: "mobile-action-button-label",
+            label: {
+              context: "navigation_action",
+              name: "label_1",
+            },
+            focusedStyles: {
+              color: "rgba(20,20,20,1)",
+            },
+            normalStyles: {
+              color: "rgba(10,10,10,1)",
+            },
+            mobileActionRole: "label",
+            transformText: "default",
+          },
+        },
+      ],
+    },
+  ],
+};
+
+describe("MobileActionButton", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (usePressedState as jest.Mock).mockReturnValue(false);
+  });
+
+  const renderNode = ({ node = baseNode, pressed = false } = {}) => {
+    if (pressed) {
+      node.props.testOnly_pressed = true;
+    }
+
+    return render(
+      <React.Fragment>
+        {elementMapper(defaultComponents)(node as never)}
+      </React.Fragment>
+    );
+  };
+
+  it("renders nested image and text children through elementMapper", () => {
+    mockUseActions.mockReturnValue(buildActionContext());
+
+    const { getByText, getByTestId } = renderNode();
+
+    expect(getByTestId("mobile-action-button")).toBeTruthy();
+    expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
+    expect(getByText("Play")).toBeTruthy();
+  });
+
+  it("applies focused styles when action entry state is active", () => {
+    (usePressedState as jest.Mock).mockReturnValue(true);
+    mockUseActions.mockReturnValue(buildActionContext({ active: true }));
+
+    const { getByTestId, getByText } = renderNode({ pressed: true });
+
+    expect(
+      getByTestId("mobile-action-button").props.style[2].backgroundColor
+    ).toBe("rgba(3,3,3,1)");
+
+    expect(getByText("Play").props.style).toMatchObject({
+      color: "rgba(20,20,20,1)",
+    });
+  });
+
+  it("invokes action on press", () => {
+    const actionContext = buildActionContext();
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId } = renderNode();
+
+    fireEvent.press(getByTestId("mobile-action-button"));
+
+    expect(actionContext.invokeAction).toHaveBeenCalledWith(
+      entry,
+      expect.objectContaining({
+        updateState: expect.any(Function),
+      })
+    );
+  });
+
+  it("preserves the rendered primitive tree when the mobile builder is wrapped with DataProvider", () => {
+    mockUseActions.mockReturnValue(buildActionContext());
+
+    const node = configInflater(
+      entry,
+      MobileActionButtons({
+        value: (key) => mobileConfiguration[key],
+        configuration: mobileConfiguration,
+        placement: "over_image",
+      })
+    );
+
+    node.props.testOnly_pressed = false;
+
+    const { UNSAFE_getAllByType, UNSAFE_getByType, getByTestId, getByText } =
+      render(
+        <React.Fragment>
+          {elementMapper(defaultComponents)(node as never)}
+        </React.Fragment>
+      );
+
+    const pressable = UNSAFE_getByType(Pressable);
+    const label = getByText("Play");
+    const asset = getByTestId("mobile_action_button_1-asset");
+
+    expect(pressable.props.testID).toBe("mobile_action_button_1");
+    expect(pressable.props.accessibilityLabel).toBe("entry-1");
+
+    expect(pressable.props.style({ pressed: false })[0]).toMatchObject({
+      backgroundColor: "rgba(1,1,1,1)",
+      borderColor: "rgba(2,2,2,1)",
+      borderWidth: 1,
+    });
+
+    expect(asset.props.style).toMatchObject({
+      width: 24,
+      height: 24,
+    });
+
+    expect(label.props.style).toMatchObject({
+      color: "rgba(10,10,10,1)",
+      fontSize: 15,
+      lineHeight: 24,
+    });
+
+    expect(UNSAFE_getAllByType(View).length).toBeGreaterThan(0);
+    expect(UNSAFE_getAllByType(RNText).length).toBeGreaterThan(0);
+  });
+
+  describe("component asset via mobileButtonAssets", () => {
+    const nodeWithFlavour1 = {
+      ...baseNode,
+      props: {
+        ...baseNode.props,
+        action: {
+          identifier: "navigation_action",
+          flavour: "flavour_1" as const,
+        },
+      },
+    };
+
+    const nodeWithFlavour2 = {
+      ...baseNode,
+      props: {
+        ...baseNode.props,
+        action: {
+          identifier: "navigation_action",
+          flavour: "flavour_2" as const,
+        },
+      },
+    };
+
+    it("renders mobileButtonAssets component instead of Image when it is a function", () => {
+      const MockAssetComponent = jest.fn(({ testID }) => (
+        <View testID={testID} accessibilityLabel="mock-asset" />
+      ));
+
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: MockAssetComponent })
+      );
+
+      const { getByTestId } = renderNode({ node: nodeWithFlavour1 });
+
+      expect(MockAssetComponent).toHaveBeenCalled();
+      expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
+    });
+
+    it("passes flavour_1 to the mobileButtonAssets component", () => {
+      const MockAssetComponent = jest.fn(({ testID }) => (
+        <View testID={testID} />
+      ));
+
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: MockAssetComponent })
+      );
+
+      renderNode({ node: nodeWithFlavour1 });
+
+      expect(MockAssetComponent).toHaveBeenCalledWith(
+        expect.objectContaining({ flavour: "flavour_1" }),
+        expect.anything()
+      );
+    });
+
+    it("passes flavour_2 to the mobileButtonAssets component", () => {
+      const MockAssetComponent = jest.fn(({ testID }) => (
+        <View testID={testID} />
+      ));
+
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: MockAssetComponent })
+      );
+
+      renderNode({ node: nodeWithFlavour2 });
+
+      expect(MockAssetComponent).toHaveBeenCalledWith(
+        expect.objectContaining({ flavour: "flavour_2" }),
+        expect.anything()
+      );
+    });
+
+    it("does not render asset when mobileButtonAssets is absent", () => {
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: undefined })
+      );
+
+      const { queryByTestId } = renderNode({ node: nodeWithFlavour1 });
+
+      expect(queryByTestId("mobile-action-button-asset")).toBeNull();
+    });
+
+    it("renders asset when mobileButtonAssets exists even if asset is absent", () => {
+      mockUseActions.mockReturnValue(
+        buildActionContext({
+          asset: undefined,
+          mobileButtonAssets: [
+            "https://example.com/image-inactive.png",
+            "https://example.com/image-active.png",
+          ],
+        })
+      );
+
+      const { getByTestId } = renderNode({ node: nodeWithFlavour1 });
+
+      expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
+    });
+  });
+});