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

package/Components/MasterCell/DefaultComponents/SecondaryImage/index.ts

@@ -103,7 +103,7 @@ export const SecondaryImage = ({ value, currentPosition, state }: Props) => {
         data: [
           {
             func: "image_src_from_media_item",
-            args: [imageKey],
+            args: [imageKey, false],
             propName: "uri",
           },
         ],

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -7,7 +7,6 @@ import {
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { useTextLabel, withFocusedStyles } from "./hooks";
-import { withScaledLineHeight } from "./utils";
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
@@ -70,12 +69,9 @@ const _Text = ({
 
   return (
     <Text
-      style={[
-        withScaledLineHeight(withFocusedStyles({ style, otherProps })),
-        { height },
-      ]}
-      allowFontScaling={false}
+      style={[withFocusedStyles({ style, otherProps }), { height }]}
       {...withoutLabel(otherProps)}
+      allowFontScaling={false}
     >
       {textLabel}
     </Text>

package/Components/MasterCell/DefaultComponents/index.ts

@@ -16,12 +16,14 @@ import { CellBadge } from "./CellBadge";
 import { TvActionButtons } from "./tv/TvActionButtons";
 import { ButtonContainerView } from "./tv/ButtonContainerView";
 import { ImageBorderContainer } from "./ImageBorderContainer";
+import { PressableView } from "./PressableView";
 
 export const defaultComponents = {
   View,
   CollapsibleTextContainer,
   Text,
   Button,
+  PressableView,
   Image,
   PureImage,
   ButtonContainerView,

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

@@ -0,0 +1,46 @@
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  actionIdentifier: string;
+  testID?: string;
+};
+
+export const Asset = ({ prefix, value, actionIdentifier, testID }: Props) => {
+  if (!value(`${prefix}_asset_enabled`)) {
+    return null;
+  }
+
+  return {
+    type: "Image",
+    style: {
+      width: toNumberWithDefaultZero(value(`${prefix}_asset_width`)),
+      height: toNumberWithDefaultZero(value(`${prefix}_asset_height`)),
+      marginTop: toNumberWithDefaultZero(value(`${prefix}_asset_margin_top`)),
+      marginRight: toNumberWithDefaultZero(
+        value(`${prefix}_asset_margin_right`)
+      ),
+      marginBottom: toNumberWithDefaultZero(
+        value(`${prefix}_asset_margin_bottom`)
+      ),
+      marginLeft: toNumberWithDefaultZero(value(`${prefix}_asset_margin_left`)),
+      backgroundColor: "transparent",
+    },
+    data: [
+      {
+        func: (entry) => entry,
+        args: [],
+        propName: "entry",
+      },
+    ],
+    additionalProps: {
+      source: {
+        context: actionIdentifier,
+      },
+      state: "inactive",
+      mobileActionRole: "asset",
+      testID: testID ? `${testID}-asset` : undefined,
+    },
+  };
+};

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

@@ -0,0 +1,126 @@
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+import { Asset } from "./Asset";
+import { Spacer } from "./Spacer";
+import { TextLabelsContainer } from "./TextLabelsContainer";
+import { getContentDirection, getContentsAlignment } from "./helpers";
+
+const displayModeStyle = ({ value, prefix }) => {
+  const mode = value(`${prefix}_display_mode`) || "dynamic";
+
+  if (mode === "fixed") {
+    return {
+      width: toNumberWithDefault(140, value(`${prefix}_width`)),
+    };
+  }
+
+  if (mode === "fill") {
+    return {
+      flex: 1,
+    };
+  }
+
+  return {};
+};
+
+type Props = {
+  index: number;
+  value: Function;
+  stylePrefix: string;
+  specificPrefix: string;
+  spacingStyle: Record<string, unknown>;
+};
+
+export const Button = ({
+  index,
+  value,
+  stylePrefix,
+  specificPrefix,
+  spacingStyle,
+}: Props) => {
+  if (!value(`${specificPrefix}_button_enabled`)) {
+    return null;
+  }
+
+  const testID = `mobile_action_button_${index + 1}`;
+  const actionIdentifier = value(`${specificPrefix}_assign_action`);
+  const assetAlignment = value(`${stylePrefix}_asset_alignment`) || "left";
+
+  const contentsAlignment =
+    value(`${stylePrefix}_contents_alignment`) || "center";
+
+  return {
+    type: "PressableView",
+    style: {
+      flexDirection: getContentDirection(assetAlignment),
+      alignItems: "center",
+      justifyContent: getContentsAlignment(contentsAlignment),
+
+      marginTop: toNumberWithDefaultZero(value(`${stylePrefix}_margin_top`)),
+      marginRight: toNumberWithDefaultZero(
+        value(`${stylePrefix}_margin_right`)
+      ),
+      marginBottom: toNumberWithDefaultZero(
+        value(`${stylePrefix}_margin_bottom`)
+      ),
+      marginLeft: toNumberWithDefaultZero(value(`${stylePrefix}_margin_left`)),
+
+      paddingTop: toNumberWithDefaultZero(value(`${stylePrefix}_padding_top`)),
+      paddingRight: toNumberWithDefaultZero(
+        value(`${stylePrefix}_padding_right`)
+      ),
+      paddingBottom: toNumberWithDefaultZero(
+        value(`${stylePrefix}_padding_bottom`)
+      ),
+      paddingLeft: toNumberWithDefaultZero(
+        value(`${stylePrefix}_padding_left`)
+      ),
+
+      borderWidth: toNumberWithDefaultZero(value(`${stylePrefix}_border_size`)),
+      borderRadius: toNumberWithDefaultZero(
+        value(`${stylePrefix}_corner_radius`)
+      ),
+      borderColor: value(`${stylePrefix}_border_color`),
+      backgroundColor: value(`${stylePrefix}_background_color`),
+
+      ...displayModeStyle({ value, prefix: stylePrefix }),
+      ...spacingStyle,
+    },
+    additionalProps: {
+      action: {
+        identifier: actionIdentifier,
+      },
+      focusedStyles: {
+        backgroundColor: value(`${stylePrefix}_focused_background_color`),
+        borderColor: value(`${stylePrefix}_focused_border_color`),
+      },
+      testID,
+    },
+    elements: compact([
+      Asset({
+        prefix: stylePrefix,
+        value,
+        actionIdentifier,
+        testID,
+      }),
+      Spacer(),
+      TextLabelsContainer({
+        prefix: stylePrefix,
+        value,
+        actionIdentifier,
+        testID,
+      }),
+    ]),
+    data: [
+      {
+        func: (x) => x,
+        args: [],
+        propName: "item",
+      },
+    ],
+  };
+};

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

@@ -0,0 +1,23 @@
+type Props = {
+  style: Record<string, unknown>;
+  contentStyle: Record<string, unknown>;
+  elements: Array<Record<string, unknown>>;
+};
+
+export const ButtonContainerView = ({
+  style,
+  contentStyle,
+  elements,
+}: Props) => {
+  return {
+    type: "View",
+    style,
+    elements: [
+      {
+        type: "View",
+        style: contentStyle,
+        elements,
+      },
+    ],
+  };
+};

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

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

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,32 @@
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+import { TextLabel } from "./TextLabel";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  actionIdentifier: string;
+  testID?: string;
+};
+
+export const TextLabelsContainer = ({
+  prefix,
+  value,
+  actionIdentifier,
+  testID,
+}: Props) => {
+  return {
+    type: "View",
+    additionalProps: {
+      mobileActionRole: "label_container",
+    },
+    elements: compact([
+      TextLabel({
+        prefix,
+        value,
+        actionIdentifier,
+        testID,
+      }),
+    ]),
+  };
+};

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

@@ -0,0 +1,191 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { elementMapper } from "../../../../elementMapper";
+import { defaultComponents } from "../../../index";
+
+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 item = {
+  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",
+    },
+    label: {
+      label_1: "Play",
+    },
+    ...entryState,
+  })),
+  invokeAction: jest.fn(),
+  addListener: jest.fn(() => jest.fn()),
+  isActionAvailable: jest.fn(() => true),
+});
+
+const baseNode = {
+  type: "PressableView",
+  style: {
+    backgroundColor: "rgba(1,1,1,1)",
+    borderColor: "rgba(2,2,2,1)",
+    borderWidth: 1,
+  },
+  props: {
+    item,
+    action: {
+      identifier: "navigation_action",
+    },
+    focusedStyles: {
+      backgroundColor: "rgba(3,3,3,1)",
+      borderColor: "rgba(4,4,4,1)",
+    },
+    testID: "mobile-action-button",
+  },
+  elements: [
+    {
+      type: "Image",
+      style: {
+        width: 24,
+        height: 24,
+      },
+      props: {
+        testID: "mobile-action-button-asset",
+        source: {
+          context: "navigation_action",
+        },
+        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("PressableView", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderNode = (node = baseNode) =>
+    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", () => {
+    mockUseActions.mockReturnValue(buildActionContext({ active: true }));
+
+    const { getByTestId, getByText } = renderNode();
+
+    expect(
+      getByTestId("mobile-action-button").props.style.backgroundColor
+    ).toBe("rgba(3,3,3,1)");
+
+    expect(getByText("Play").props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ 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(
+      item,
+      expect.objectContaining({
+        updateState: expect.any(Function),
+      })
+    );
+  });
+});

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

@@ -0,0 +1,140 @@
+import { Asset } from "../Asset";
+import { Button } from "../Button";
+import { ButtonContainerView } from "../ButtonContainerView";
+import { Spacer } from "../Spacer";
+import { TextLabel } from "../TextLabel";
+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 container node with content style in additionalProps", () => {
+    const result = ButtonContainerView({
+      style: { position: "absolute" },
+      contentStyle: {
+        flexDirection: "row",
+      },
+      elements: [{ type: "PressableView" }],
+    });
+
+    expect(result).toEqual({
+      type: "View",
+      style: { position: "absolute" },
+      elements: [
+        {
+          type: "View",
+          style: {
+            flexDirection: "row",
+          },
+          elements: [{ type: "PressableView" }],
+        },
+      ],
+    });
+  });
+
+  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("PressableView");
+    expect(result.additionalProps.action.identifier).toBe("navigation_action");
+
+    expect(result.elements).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ type: "Image" }),
+        expect.objectContaining({ type: "View" }),
+      ])
+    );
+  });
+
+  it("builds the asset, label container, label and spacer nodes", () => {
+    expect(
+      Asset({
+        prefix: "mobile_button_1",
+        value,
+        actionIdentifier: "navigation_action",
+      })
+    ).toEqual(
+      expect.objectContaining({
+        type: "Image",
+      })
+    );
+
+    expect(
+      TextLabelsContainer({
+        prefix: "mobile_button_1",
+        value,
+        actionIdentifier: "navigation_action",
+      })
+    ).toEqual(
+      expect.objectContaining({
+        type: "View",
+        elements: [expect.objectContaining({ type: "Text" })],
+      })
+    );
+
+    expect(
+      TextLabel({
+        prefix: "mobile_button_1",
+        value,
+        actionIdentifier: "navigation_action",
+      })
+    ).toEqual(
+      expect.objectContaining({
+        type: "Text",
+      })
+    );
+
+    expect(Spacer({ enabled: true })).toEqual({
+      type: "View",
+      style: {
+        flex: 1,
+      },
+    });
+  });
+});