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

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

@@ -1,18 +1,27 @@
 import React, { useMemo, useContext, useEffect } from "react";
-import { ImageStyle, StyleSheet, View, ViewStyle } from "react-native";
+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 { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { MeasurementPortalContext } from "../../../MeasurmentsPortal/MeasurementsPortal";
 
-type BorderPosition = "inside" | "outside" | "center";
-
-interface Props {
+interface Props extends ViewProps {
   hasFocusableInside: (entry: ZappEntry) => boolean;
   entry: ZappEntry;
   state: CellState;
   hasTextLabels: boolean;
-  style: ImageStyle | ViewStyle;
-  borderPosition: BorderPosition;
+  style: StyleProp<ImageStyle | ViewStyle>;
+  borderPosition?: BorderPosition | null;
   borderPaddingTop: number;
   borderPaddingRight: number;
   borderPaddingBottom: number;
@@ -20,101 +29,24 @@ interface Props {
   children: React.ReactNode;
 }
 
-const COLOR_TRANSPARENT = "transparent";
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: "visible",
-    borderWidth: 0,
-    borderColor: COLOR_TRANSPARENT,
-  },
-  border: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1,
-  },
-});
+const toNumberOrZero = (value: unknown) => {
+  const numeric = Number(value);
 
-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;
-  }
+  return Number.isFinite(numeric) ? numeric : 0;
 };
 
-const Border = ({
-  style,
-  padding,
-  borderPosition,
-}: {
-  style: ViewStyle;
-  padding: ViewStyle;
-  borderPosition: BorderPosition;
-}) => {
-  if (!borderPosition) {
-    return null;
-  }
-
-  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
-  const containerPadding = getBorderPadding(borderPosition, borderWidth);
+const getBorderPropsFromStyle = (style: StyleProp<ImageStyle | ViewStyle>) => {
+  const flattenedStyle = StyleSheet.flatten(style) ?? {};
 
-  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,
-      };
-
-  return (
-    <View
-      pointerEvents="none"
-      style={{
-        ...styles.border,
-        right: -containerPadding - paddingRight,
-        bottom: -containerPadding - paddingBottom,
-        left: -containerPadding - paddingLeft,
-        top: -containerPadding - paddingTop,
-        borderWidth,
-        borderColor: style.borderColor,
-        ...borderRadiusStyle,
-      }}
-    />
-  );
+  return {
+    borderWidth: toNumberOrZero(flattenedStyle.borderWidth),
+    borderColor: flattenedStyle.borderColor,
+    borderRadius: toNumberOrZero(flattenedStyle.borderRadius),
+  };
 };
 
+export { getBorderPadding };
+
 export const BorderContainerView = (props: Props) => {
   const {
     borderPosition,
@@ -128,24 +60,22 @@ 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(
     () =>
-      !hasFocusableInside(entry) &&
-      !hasTextLabels &&
       state === "focused" &&
-      !isMeasurement?.measuringInProgress,
-    [
-      hasFocusableInside,
-      entry,
-      hasTextLabels,
-      state,
-      isMeasurement?.measuringInProgress,
-    ]
+      !hasTextLabels &&
+      !isMeasurement?.measuringInProgress &&
+      !hasFocusableInside(entry),
+    [entry, hasTextLabels, state, isMeasurement?.measuringInProgress]
   );
 
   useEffect(() => {
@@ -154,20 +84,21 @@ export const BorderContainerView = (props: Props) => {
     }
   }, [isImageOnlyCell, entry?.title]);
 
-  const padding =
-    borderPosition === "outside"
-      ? {
-          paddingTop: borderPaddingTop,
-          paddingRight: borderPaddingRight,
-          paddingBottom: borderPaddingBottom,
-          paddingLeft: borderPaddingLeft,
-        }
-      : {};
-
   return (
-    <View pointerEvents="box-none" {...props} style={[style, styles.container]}>
-      <Border style={style} padding={padding} borderPosition={borderPosition} />
+    <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}
+    >
       {children}
-    </View>
+    </UIKitBorderContainer>
   );
 };

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -1,12 +1,10 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { TouchableOpacity } from "react-native";
-// import { SvgUri } from "react-native-svg";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
+import { Button as UIKitButton } from "@applicaster/uikit/lib/components/uikit/button";
+
 import Image from "./Image";
 import { masterCellLogger } from "../logger";
 import { ActionButton } from "./ActionButton";
@@ -23,64 +21,43 @@ 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;
 };
 
-// function Svg({
-//   uri,
-//   style,
-//   ...props
-// }: {
-//   uri: {},
-//   style: { width: Number, height: number },
-// }) {
-//   const width = style?.width;
-//   const height = style?.height;
-
-//   return <SvgUri width={width} height={height} uri={uri} />;
-// }
-
 const components = {
   Image,
 };
 
-function ButtonComponent(props: Props) {
-  const asset = props?.asset;
-  const item = props?.item;
-  const action = props?.action;
+export function Button(props: Props) {
+  const { asset, item, action, style, testID, accessibilityLabel } = props;
 
   const assetType = asset?.type || "Image";
 
   const ButtonAsset = components[assetType];
 
-  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`
-    );
+  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;
 
-    return null;
-  }
+  const actionContext: ActionContext = useActions(action?.identifier);
 
-  // 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)
@@ -90,30 +67,45 @@ function ButtonComponent(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;
 
-  async function onPress() {
-    // TODO: loading state
-    await toggleAction(item);
+  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} />;
   }
 
+  // Legacy button rendering with image inside is the default path for action contexts without initialEntryState.
   return (
-    <TouchableOpacity
-      activeOpacity={1}
+    <UIKitButton
+      id={`${item?.id}`}
+      style={style}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
       onPress={onPress}
-      testID={props?.testID || `${item?.id}`}
-      accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
-      accessible={!!(props?.testID || props?.accessibilityLabel)}
-      style={props?.style}
     >
       <ButtonAsset style={asset?.style} uri={assetSrc} {...asset?.props} />
-    </TouchableOpacity>
+    </UIKitButton>
   );
 }
-
-export const Button = R.compose(connectToStore(R.pick(["plugins"])))(
-  ButtonComponent
-);

package/Components/MasterCell/DefaultComponents/ButtonContainerView/components/HorizontalSeparator.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { View } from "react-native";
+
+import type { HorizontalSeparatorProps } from "../types";
+
+export const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
+  <View style={{ width }} />
+);

package/Components/MasterCell/DefaultComponents/ButtonContainerView/index.android.tv.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { View } from "react-native";
+import * as R from "ramda";
+import { useInitialFocus } from "@applicaster/zapp-react-native-utils/focusManager";
+import {
+  useIsRTL,
+  applyRTLStylesIfNeeded,
+} from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+import {
+  cloneChildrenWithIds,
+  insertBetween,
+  unwrapDataProviderChild,
+  useFilterChildren,
+} from "../../utils";
+
+import type { ContainerProps, ContainerChildren } from "./types";
+import { HorizontalSeparator } from "./components/HorizontalSeparator";
+
+const generateId = (cellUUID, suffixId) => `${cellUUID}--${suffixId}`;
+
+export function ButtonContainerView({
+  style,
+  children,
+  ...otherProps
+}: ContainerProps) {
+  const isRTL = useIsRTL();
+
+  const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
+  const filteredChildren = useFilterChildren<ContainerChildren>(children);
+
+  const buttonIds = filteredChildren.map((child) => {
+    const wrappedChild = unwrapDataProviderChild(child) as ContainerChildren;
+    const { cellUUID, suffixId } = wrappedChild.props;
+
+    return generateId(cellUUID, suffixId);
+  });
+
+  useInitialFocus(otherProps.state === "focused", R.head(buttonIds));
+
+  if (R.isEmpty(filteredChildren)) {
+    return null;
+  }
+
+  return (
+    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
+      {insertBetween(
+        (index) => (
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
+        ),
+        cloneChildrenWithIds(buttonIds, filteredChildren)
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { View } from "react-native";
+import { ContainerProps } from "./types";
+
+export function ButtonContainerView({
+  style,
+  contentStyle,
+  children,
+}: ContainerProps) {
+  return (
+    <View style={style} pointerEvents="box-none">
+      <View style={contentStyle}>{children}</View>
+    </View>
+  );
+}

package/Components/MasterCell/DefaultComponents/{tv/ButtonContainerView/index.tsx → ButtonContainerView/index.tv.tsx}

@@ -1,20 +1,13 @@
 import React from "react";
 import { View } from "react-native";
 import * as R from "ramda";
-import { useFilterChildren, insertBetween } from "../../../utils";
-import type {
-  HorizontalSeparatorProps,
-  ContainerProps,
-  ContainerChildren,
-} from "./types";
+import { insertBetween, useFilterChildren } from "../../utils";
+import type { ContainerProps, ContainerChildren } from "./types";
 import {
   useIsRTL,
   applyRTLStylesIfNeeded,
 } from "@applicaster/zapp-react-native-utils/localizationUtils";
-
-const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
-  <View style={{ width }} />
-);
+import { HorizontalSeparator } from "./components/HorizontalSeparator";
 
 export function ButtonContainerView({
   style,
@@ -23,7 +16,6 @@ export function ButtonContainerView({
 }: ContainerProps) {
   const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
-
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
 
   if (R.isEmpty(filteredChildren)) {

package/Components/MasterCell/DefaultComponents/ButtonContainerView/index.web.ts

@@ -0,0 +1 @@
+export { ButtonContainerView } from "./index.tv";

package/Components/MasterCell/DefaultComponents/ButtonContainerView/types.ts

@@ -0,0 +1,40 @@
+import { ReactElement, ReactNode } from "react";
+import { ViewStyle } from "react-native";
+
+export type ContainerChildProps = {
+  item: any;
+  pluginIdentifier: string;
+  cellUUID: string;
+  suffixId: string;
+  nextFocusLeft?: string;
+  nextFocusRight?: string;
+};
+
+export type ContainerProps = Record<string, any> & {
+  buttonsToggleEnabled: boolean;
+  skipButtons: boolean;
+  style: ViewStyle;
+  contentStyle?: ViewStyle;
+  children: ContainerChildren[];
+};
+
+export type ButtonProps = Record<string, any> & {
+  style: ViewStyle;
+  children?: ReactNode;
+  item: any;
+  cellUUID: string;
+  groupId?: string;
+  suffixId: string;
+  normalStyles?: ViewStyle;
+  focusedStyles?: ViewStyle;
+  nextFocusLeft?: string;
+  nextFocusRight?: string;
+  pluginIdentifier: string;
+  disableFocus?: boolean;
+};
+
+export type HorizontalSeparatorProps = {
+  width: number;
+};
+
+export type ContainerChildren = ReactElement<ContainerChildProps>;

package/Components/MasterCell/DefaultComponents/CellBadge/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CellBadge matches the rendered CellBadge snapshot after config inflation 1`] = `
+<View
+  style={
+    {
+      "bottom": 0,
+      "flex": 1,
+      "left": 0,
+      "marginBottom": 5,
+      "marginLeft": 6,
+      "marginRight": 4,
+      "marginTop": 3,
+      "position": "absolute",
+    }
+  }
+/>
+`;

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

@@ -0,0 +1,90 @@
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { configInflater } from "../../../dataAdapter";
+import { elementMapper } from "../../../elementMapper";
+import { CellBadge } from "..";
+import { UIKitBadge } from "../../UIKitAdapters/Badge";
+
+const createValue = (overrides: Record<string, unknown> = {}) => {
+  const values = {
+    cell_badge_switch: true,
+    cell_badge_position: "bottom_left",
+    cell_badge_width: 42,
+    cell_badge_height: 24,
+    cell_badge_margin_top: 3,
+    cell_badge_margin_right: 4,
+    cell_badge_margin_bottom: 5,
+    cell_badge_margin_left: 6,
+    cell_badge_default: "default.png",
+    cell_badge_selected: "selected.png",
+    cell_badge_focused: "focused.png",
+    cell_badge_focused_selected: "focused-selected.png",
+    ...overrides,
+  };
+
+  return (key: string) => values[key];
+};
+
+describe("CellBadge", () => {
+  it("returns explicit CellBadge props and image config", () => {
+    const result = CellBadge({
+      value: createValue(),
+      state: "focused_selected",
+    });
+
+    expect(result).toMatchObject({
+      type: "UIKitBadge",
+      style: {
+        flex: 1,
+      },
+      additionalProps: {
+        position: "bottom_left",
+        width: 42,
+        height: 24,
+        margins: {
+          marginTop: 3,
+          marginRight: 4,
+          marginBottom: 5,
+          marginLeft: 6,
+        },
+      },
+      elements: [
+        {
+          type: "Image",
+          style: {
+            width: 42,
+            height: 24,
+          },
+          additionalProps: {
+            resizeMode: "cover",
+          },
+        },
+      ],
+    });
+
+    expect(result.elements[0].data[0].func()).toBe("focused-selected.png");
+  });
+
+  it("matches the rendered CellBadge snapshot after config inflation", () => {
+    const inflatedConfig = configInflater(
+      {},
+      CellBadge({
+        value: createValue(),
+        state: "focused_selected",
+      })
+    );
+
+    const wrapper = render(
+      elementMapper({
+        View,
+        UIKitBadge,
+        Image: View,
+      })({
+        ...inflatedConfig,
+        key: "cell-badge",
+      })
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -4,10 +4,7 @@ import {
   ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-import { getPositionStyles } from "./utils";
-
-const View = "View";
+const UIKitBadge = "UIKitBadge";
 const Image = "Image";
 
 type Props = {
@@ -30,22 +27,24 @@ export const CellBadge = ({
   const position = value("cell_badge_position");
 
   return {
-    type: View, // Cell badge view
+    type: UIKitBadge, // Cell badge view
     style: {
       flex: platformSelect({
         tvos: 0,
         android_tv: 0,
         default: 1,
       }),
-      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"),
+    },
+    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"),
+      },
     },
     elements: compact([
       {