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

package/Components/MasterCell/DefaultComponents/BorderContainerView/__tests__/index.test.tsx

@@ -1,85 +1,26 @@
 import * as React from "react";
-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();
+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),
+}));
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
   () => ({
     useAccessibilityManager: jest.fn(() => ({
-      addHeading: mockAddHeading,
+      addHeading: jest.fn(),
     })),
   })
 );
 
-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);
@@ -94,159 +35,47 @@ describe("BorderContainerView", () => {
     });
 
     it("returns borderWidth for invalid position", () => {
-      // @ts-ignore preserve current fallback semantics
+      // @ts-ignore
       expect(getBorderPadding("other_value", 10)).toBe(10);
     });
   });
 
-  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 }
+  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>
     );
 
-    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);
+    const children = queryByTestId("border-container").children;
 
-    expect(overlay.props.borderWidth).toBe(5);
-    expect(overlay.props.borderColor).toBe("black");
-    expect(overlay.props.borderRadius).toBe(10);
+    expect(children[1].props.testID).toBe("child");
 
-    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);
+    expect(children[0].children.length).toBe(0);
   });
 });

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

@@ -1,27 +1,18 @@
 import React, { useMemo, useContext, useEffect } from "react";
-import {
-  ImageStyle,
-  StyleProp,
-  StyleSheet,
-  ViewProps,
-  ViewStyle,
-} from "react-native";
-import {
-  BorderContainer as UIKitBorderContainer,
-  getBorderPadding,
-  type BorderPosition,
-  type UIKitBorderContainerProps,
-} from "@applicaster/uikit/lib/components/uikit/border-container";
+import { ImageStyle, StyleSheet, View, ViewStyle } from "react-native";
 import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { MeasurementPortalContext } from "../../../MeasurmentsPortal/MeasurementsPortal";
 
-interface Props extends ViewProps {
+type BorderPosition = "inside" | "outside" | "center";
+
+interface Props {
   hasFocusableInside: (entry: ZappEntry) => boolean;
   entry: ZappEntry;
   state: CellState;
   hasTextLabels: boolean;
-  style: StyleProp<ImageStyle | ViewStyle>;
-  borderPosition?: BorderPosition | null;
+  style: ImageStyle | ViewStyle;
+  borderPosition: BorderPosition;
   borderPaddingTop: number;
   borderPaddingRight: number;
   borderPaddingBottom: number;
@@ -29,23 +20,100 @@ interface Props extends ViewProps {
   children: React.ReactNode;
 }
 
-const toNumberOrZero = (value: unknown) => {
-  const numeric = Number(value);
+const COLOR_TRANSPARENT = "transparent";
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "visible",
+    borderWidth: 0,
+    borderColor: COLOR_TRANSPARENT,
+  },
+  border: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+  },
+});
 
-  return Number.isFinite(numeric) ? numeric : 0;
+export const getBorderPadding = (
+  borderPosition: BorderPosition,
+  borderWidth: number
+) => {
+  switch (borderPosition) {
+    case "inside":
+      return 0;
+    case "center":
+      return borderWidth / 2;
+    case "outside":
+      return borderWidth;
+    default:
+      return borderWidth;
+  }
 };
 
-const getBorderPropsFromStyle = (style: StyleProp<ImageStyle | ViewStyle>) => {
-  const flattenedStyle = StyleSheet.flatten(style) ?? {};
+const Border = ({
+  style,
+  padding,
+  borderPosition,
+}: {
+  style: ViewStyle;
+  padding: ViewStyle;
+  borderPosition: BorderPosition;
+}) => {
+  if (!borderPosition) {
+    return null;
+  }
 
-  return {
-    borderWidth: toNumberOrZero(flattenedStyle.borderWidth),
-    borderColor: flattenedStyle.borderColor,
-    borderRadius: toNumberOrZero(flattenedStyle.borderRadius),
-  };
-};
+  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
+  const containerPadding = getBorderPadding(borderPosition, borderWidth);
+
+  const initialBorderRadius = toNumberWithDefaultZero(style.borderRadius);
+  const paddingTop = toNumberWithDefaultZero(padding.paddingTop);
+  const paddingRight = toNumberWithDefaultZero(padding.paddingRight);
+  const paddingBottom = toNumberWithDefaultZero(padding.paddingBottom);
+  const paddingLeft = toNumberWithDefaultZero(padding.paddingLeft);
+
+  const borderRadiusStyle = initialBorderRadius
+    ? {
+        borderTopLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingLeft),
+        borderTopRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingRight),
+        borderBottomLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingLeft),
+        borderBottomRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingRight),
+      }
+    : {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+      };
 
-export { getBorderPadding };
+  return (
+    <View
+      pointerEvents="none"
+      style={{
+        ...styles.border,
+        right: -containerPadding - paddingRight,
+        bottom: -containerPadding - paddingBottom,
+        left: -containerPadding - paddingLeft,
+        top: -containerPadding - paddingTop,
+        borderWidth,
+        borderColor: style.borderColor,
+        ...borderRadiusStyle,
+      }}
+    />
+  );
+};
 
 export const BorderContainerView = (props: Props) => {
   const {
@@ -60,15 +128,11 @@ export const BorderContainerView = (props: Props) => {
     entry,
     state,
     hasTextLabels,
-    ...viewProps
   } = props;
 
   const accessibilityManager = useAccessibilityManager();
   const isMeasurement = useContext(MeasurementPortalContext);
 
-  const { borderWidth, borderColor, borderRadius } =
-    getBorderPropsFromStyle(style);
-
   const isImageOnlyCell = useMemo(
     () =>
       state === "focused" &&
@@ -84,21 +148,20 @@ export const BorderContainerView = (props: Props) => {
     }
   }, [isImageOnlyCell, entry?.title]);
 
+  const padding =
+    borderPosition === "outside"
+      ? {
+          paddingTop: borderPaddingTop,
+          paddingRight: borderPaddingRight,
+          paddingBottom: borderPaddingBottom,
+          paddingLeft: borderPaddingLeft,
+        }
+      : {};
+
   return (
-    <UIKitBorderContainer
-      testID="border-container-view"
-      {...viewProps}
-      style={style as UIKitBorderContainerProps["style"]}
-      borderPosition={borderPosition}
-      borderWidth={borderWidth}
-      borderColor={borderColor}
-      borderRadius={borderRadius}
-      borderPaddingTop={borderPaddingTop}
-      borderPaddingRight={borderPaddingRight}
-      borderPaddingBottom={borderPaddingBottom}
-      borderPaddingLeft={borderPaddingLeft}
-    >
+    <View pointerEvents="box-none" {...props} style={[style, styles.container]}>
+      <Border style={style} padding={padding} borderPosition={borderPosition} />
       {children}
-    </UIKitBorderContainer>
+    </View>
   );
 };

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { TouchableOpacity } from "react-native";
 
-import { Button as UIKitButton } from "@applicaster/uikit/lib/components/uikit/button";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";
 import { masterCellLogger } from "../logger";
@@ -21,43 +22,50 @@ type Props = {
     style: {};
     type: "Image" | "Svg" | "Lottie";
   };
+  initiallyActive: boolean;
   action: {
-    src?: Record<string, string | undefined>;
     identifier: string;
     type: string;
   };
   style: {};
+  plugins: [];
   testID?: string;
   accessibilityLabel?: string;
+  cellUUID?: string;
 };
 
 const components = {
   Image,
 };
 
-export function Button(props: Props) {
-  const { asset, item, action, style, testID, accessibilityLabel } = props;
+function ButtonComponent(props: Props) {
+  const asset = props?.asset;
+  const item = props?.item;
+  const action = props?.action;
 
   const assetType = asset?.type || "Image";
 
   const ButtonAsset = components[assetType];
 
-  type ActionContext =
-    | {
-        masterCell?: {
-          isSelected?: (entry: ZappEntry) => boolean;
-        };
-        state?: ZappEntry[];
-        removeFavourite?: (item: ZappEntry) => Promise<void>;
-        addFavourite?: (item: ZappEntry) => Promise<void>;
-        invokeAction?: (item: ZappEntry) => Promise<void>;
-        initialEntryState?: (...args: unknown[]) => unknown;
-      }
-    | undefined;
+  const actionContext = useActions(action?.identifier);
+
+  // TODO: better handling of missing plugin
+  if (!actionContext) {
+    // eslint-disable-next-line no-console
+    masterCellLogger.warning(
+      `You're missing an action plugin(${action?.identifier}) required by your button.  \n Button can't be displayed`
+    );
 
-  const actionContext: ActionContext = useActions(action?.identifier);
+    return null;
+  }
+
+  // if the action context implements the initialEntryState function, it
+  // means it uses the new Action Button API.
+  if (typeof actionContext?.initialEntryState === "function") {
+    return <ActionButton {...props} />;
+  }
 
-  const defaultIsSelected = R.includes(item, actionContext?.state || []);
+  const defaultIsSelected = R.includes(item, actionContext.state || []);
 
   const isSelected = actionContext?.masterCell?.isSelected
     ? actionContext?.masterCell?.isSelected(item)
@@ -67,45 +75,31 @@ export function Button(props: Props) {
   const assetSrc = isSelected ? asset?.src?.active : asset?.src?.inactive;
 
   const favouritesAction = isSelected
-    ? actionContext?.removeFavourite
-    : actionContext?.addFavourite;
+    ? actionContext.removeFavourite
+    : actionContext.addFavourite;
 
   const toggleAction = actionContext?.invokeAction ?? favouritesAction;
 
-  const onPress = React.useCallback(async () => {
-    try {
-      await toggleAction(item);
-    } catch (error) {
-      masterCellLogger.error(
-        `Error invoking action for button with item ${item?.id}`,
-        error
-      );
-    }
-  }, [item, toggleAction]);
-
-  if (!actionContext) {
-    masterCellLogger.warning(
-      `You're missing an action plugin(${action?.identifier}) required by your button.  \n Button can't be displayed`
-    );
-
-    return null;
-  }
-
-  // Action context is the preferred API when the plugin exposes initialEntryState (new Action Button API).
-  if (typeof actionContext?.initialEntryState === "function") {
-    return <ActionButton {...props} />;
+  async function onPress() {
+    // TODO: loading state
+    await toggleAction(item);
   }
 
-  // Legacy button rendering with image inside is the default path for action contexts without initialEntryState.
   return (
-    <UIKitButton
-      id={`${item?.id}`}
-      style={style}
-      testID={testID}
-      accessibilityLabel={accessibilityLabel}
+    <TouchableOpacity
+      activeOpacity={1}
       onPress={onPress}
+      testID={props?.testID || `${item?.id}`}
+      accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityRole="button"
+      accessible={!!(props?.testID || props?.accessibilityLabel)}
+      style={props?.style}
     >
       <ButtonAsset style={asset?.style} uri={assetSrc} {...asset?.props} />
-    </UIKitButton>
+    </TouchableOpacity>
   );
 }
+
+export const Button = R.compose(connectToStore(R.pick(["plugins"])))(
+  ButtonComponent
+);

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

@@ -4,7 +4,10 @@ import {
   ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-const UIKitBadge = "UIKitBadge";
+
+import { getPositionStyles } from "./utils";
+
+const View = "View";
 const Image = "Image";
 
 type Props = {
@@ -27,24 +30,22 @@ export const CellBadge = ({
   const position = value("cell_badge_position");
 
   return {
-    type: UIKitBadge, // Cell badge view
+    type: View, // Cell badge view
     style: {
       flex: platformSelect({
         tvos: 0,
         android_tv: 0,
         default: 1,
       }),
-    },
-    additionalProps: {
-      position,
-      width: value("cell_badge_width"),
-      height: value("cell_badge_height"),
-      margins: {
-        marginTop: value("cell_badge_margin_top"),
-        marginRight: value("cell_badge_margin_right"),
-        marginBottom: value("cell_badge_margin_bottom"),
-        marginLeft: value("cell_badge_margin_left"),
-      },
+      position: "absolute",
+      ...getPositionStyles(position, {
+        width: value("cell_badge_width"),
+        height: value("cell_badge_height"),
+      }),
+      marginTop: value("cell_badge_margin_top"),
+      marginRight: value("cell_badge_margin_right"),
+      marginBottom: value("cell_badge_margin_bottom"),
+      marginLeft: value("cell_badge_margin_left"),
     },
     elements: compact([
       {