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

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -1,13 +1,9 @@
 import React, { useCallback, useEffect } from "react";
-import { ViewStyle } from "react-native";
-import {
-  ActionButton as UIKitActionButton,
-  ActionButtonProps,
-} from "@applicaster/uikit/lib/components/uikit/action-button";
+import { TouchableOpacity, ViewStyle } from "react-native";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import Image from "./Image";
 
+import Image from "./Image";
 type Props = {
   item: ZappEntry | ZappFeed;
   flavour?: "flavour_1" | "flavour_2";
@@ -32,6 +28,30 @@ type Props = {
   extraProps?: Record<string, any>;
 };
 
+function isStringAsset(asset) {
+  return typeof asset === "string" || Array.isArray(asset);
+}
+
+function getAssetValue(asset, flavour, fallbackAsset = null) {
+  if (!asset) {
+    return null;
+  }
+
+  if (typeof asset === "string") return fallbackAsset || asset;
+
+  if (Array.isArray(asset)) {
+    const flavourIndex = Number(flavour.replace("flavour_", ""));
+
+    if (flavour && flavourIndex > -1) {
+      return fallbackAsset || asset[flavourIndex - 1];
+    }
+
+    return fallbackAsset || asset[0];
+  }
+
+  return asset.src || fallbackAsset;
+}
+
 export const ActionButton = React.memo(function ActionButtonComponent(
   props: Props
 ) {
@@ -73,32 +93,44 @@ export const ActionButton = React.memo(function ActionButtonComponent(
   }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
-
-  const resolvedAssetComponent = actionState?.asset;
+  const AssetComponent = actionState?.asset;
 
   // Default state is not yet ready
-  if (!resolvedAssetComponent) return null;
+  if (!AssetComponent) return null;
 
   return (
-    <UIKitActionButton
-      id={`action-button-${item.id}`}
-      item={item}
-      action={action}
-      asset={asset}
-      flavour={flavour}
-      cellUUID={cellUUID}
-      extraProps={props?.extraProps}
-      show={!!resolvedAssetComponent}
-      AssetComponent={resolvedAssetComponent}
-      ImageComponent={Image}
+    <TouchableOpacity
+      activeOpacity={1}
       onPress={onPress}
-      testID={props?.testID}
-      accessibilityLabel={props?.accessibilityLabel}
+      testID={props?.testID || `${item?.id}`}
+      accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
-      style={props?.style as ActionButtonProps["style"]}
-      fallbackSrc={
-        actionState.state === 1 ? asset?.src.active : asset?.src.inactive
-      }
-    />
+      accessible={!!(props?.testID || props?.accessibilityLabel)}
+      style={props?.style}
+    >
+      {isStringAsset(actionState.asset) ? (
+        <Image
+          fadeDuration={0}
+          style={asset?.style || props?.style}
+          uri={getAssetValue(
+            actionState.asset,
+            flavour,
+            actionState.state === 1 ? asset?.src.active : asset?.src.inactive
+          )}
+          {...asset?.props}
+        />
+      ) : (
+        <AssetComponent
+          flavour={flavour}
+          asset={getAssetValue(
+            asset,
+            flavour,
+            actionState.state === 1 ? asset?.src.active : asset?.src.inactive
+          )}
+          cellUUID={cellUUID}
+          {...(props?.extraProps ?? {})}
+        />
+      )}
+    </TouchableOpacity>
   );
 });

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>
   );
 };