@applicaster/zapp-react-native-ui-components 15.1.0-rc.1 → 16.0.0-rc.1

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

@@ -0,0 +1,37 @@
+export type ActionButtonSlot = number;
+
+export type ActionButtonDescriptor = {
+  slot: ActionButtonSlot;
+  renderIndex: number;
+  specificPrefix: string;
+  stylePrefix: string;
+};
+
+export type ActionButtonsContainerLayout = {
+  horizontalAlign: string;
+  margins: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  stacking: "horizontal" | "vertical";
+  horizontalGutter: number;
+  verticalGutter: number;
+  independentStyles: boolean;
+};
+
+export type ActionButtonsModel = {
+  enabledSlots: ActionButtonSlot[];
+  buttonsCount: number;
+  container: ActionButtonsContainerLayout;
+  buttons: ActionButtonDescriptor[];
+};
+
+export type BuildActionButtonsModelOptions = {
+  configuration: Record<string, unknown>;
+  value: (key: string) => unknown;
+  containerPrefix: string;
+  buttonPrefix: string;
+  maxButtons?: number;
+};

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

@@ -135,17 +135,11 @@ export const BorderContainerView = (props: Props) => {
 
   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(() => {

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -2,7 +2,6 @@ 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";
@@ -35,20 +34,6 @@ type Props = {
   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,
 };

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.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}>
+      <View style={contentStyle}>{children}</View>
+    </View>
+  );
+}

package/Components/MasterCell/DefaultComponents/ButtonContainerView/index.tv.android.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/{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/DataProvider/index.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import { View } from "react-native";
+
+type Props = Record<string, any> & {
+  children?: React.ReactNode;
+};
+
+/**
+ * Creates the provider payload from the resolved runtime props.
+ * `children` is structural and is therefore excluded. `_dataKey` is produced
+ * by `configInflater` from the data mapping propName and identifies the prop
+ * that carries the resolved entry value.
+ */
+const createDataProviderProps = ({ children: _children, ...props }: Props) => ({
+  _dataKey: props._dataKey,
+  [props._dataKey as string]: props[props._dataKey as string],
+});
+
+/**
+ * Merges provider values into an element's existing `dataProviderProps`
+ * without overwriting keys that were supplied explicitly.
+ */
+const mergeDataProviderProps = (
+  targetProps: Record<string, unknown>,
+  forwardedProps: Record<string, unknown>
+) => {
+  const dataProviderProps = Object.keys(forwardedProps).reduce(
+    (acc, key) => {
+      if (typeof acc[key] === "undefined") {
+        acc[key] = forwardedProps[key];
+      }
+
+      return acc;
+    },
+    { ...(targetProps.dataProviderProps as Record<string, unknown>) } as Record<
+      string,
+      unknown
+    >
+  );
+
+  return {
+    dataProviderProps: dataProviderProps,
+    ...(targetProps[dataProviderProps._dataKey as string] === undefined
+      ? {
+          [dataProviderProps._dataKey as string]:
+            forwardedProps[dataProviderProps._dataKey as string],
+        }
+      : {}),
+  };
+};
+
+/**
+ * Applies the provider props to the wrapped child's direct children only.
+ * The shallow stop is intentional: descendants below this level must receive
+ * data explicitly from their parent component instead of implicit propagation.
+ */
+const cloneSecondLevel = (
+  nodes: React.ReactNode,
+  forwardedProps: Record<string, unknown>
+) =>
+  React.Children.map(nodes, (child) => {
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+
+    if (child.type === View) {
+      return child;
+    }
+
+    return React.cloneElement(
+      child,
+      mergeDataProviderProps(
+        child.props as Record<string, unknown>,
+        forwardedProps
+      ) as never
+    );
+  });
+
+/**
+ * Specification:
+ * `DataProvider` bridges MasterCell node-tree `data` mappings into runtime
+ * React props for a shallow wrapped subtree under `dataProviderProps`.
+ *
+ * Purpose:
+ * Use `DataProvider` when a subtree root and that root's direct children must
+ * receive the same resolved runtime prop without propagating that prop deeper
+ * into the tree.
+ *
+ * Input contract:
+ * - `DataProvider` receives runtime props from normal MasterCell inflation.
+ * - The values under `dataProviderProps` are derived from the resolved props
+ *   it receives.
+ * - The inner keys are not hardcoded and may include `entry`, `item`, or any
+ *   other prop name produced by the node-tree `data` mapping.
+ *
+ * Forwarding contract:
+ * - inject the mapped value as a direct prop on the wrapped child
+ * - inject `dataProviderProps` into the wrapped child
+ * - inject both the direct prop and `dataProviderProps` into that child's
+ *   direct children
+ * - stop at that level
+ * - do not overwrite explicit keys that already exist inside
+ *   `dataProviderProps` on wrapped elements
+ *
+ * Non-forwarded props:
+ * - `children`
+ *
+ * Example:
+ *
+ * ```ts
+ * {
+ *   type: "DataProvider",
+ *   data: [
+ *     {
+ *       func: "identity",
+ *       args: [],
+ *       propName: "entry",
+ *     },
+ *   ],
+ *   elements: [
+ *     {
+ *       type: "ButtonContainerView",
+ *       elements: [Button({ ... })],
+ *     },
+ *   ],
+ * }
+ * ```
+ *
+ * Expected runtime result:
+ * - `ButtonContainerView` receives `entry` and `dataProviderProps.entry`
+ * - each direct `Button` child receives `entry` and `dataProviderProps.entry`
+ * - deeper descendants such as `Asset` or `TextLabel` do not receive
+ *   `entry` or `dataProviderProps.entry` unless their parent passes it
+ *   explicitly
+ */
+export const DataProvider = ({ children, ...props }: Props) => {
+  const forwardedProps = createDataProviderProps(props);
+
+  return (
+    <>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return child;
+        }
+
+        const injectedChildren = cloneSecondLevel(
+          child.props.children,
+          forwardedProps
+        );
+
+        return React.cloneElement(child, {
+          ...mergeDataProviderProps(
+            child.props as Record<string, unknown>,
+            forwardedProps
+          ),
+          ...(typeof injectedChildren !== "undefined"
+            ? { children: injectedChildren }
+            : {}),
+        });
+      })}
+    </>
+  );
+};

package/Components/MasterCell/DefaultComponents/FocusableView/index.android.tsx

@@ -1,17 +1,11 @@
 import React from "react";
 import { View, ImageStyle } from "react-native";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
-import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { useFocusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/index.android";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 
-const { Logger } = getXray();
-
 import { recursiveCloneElementsWithState } from "../../utils";
 
-const logger = new Logger("plugin", "plugins/navigation-action");
-
 type ButtonProps = Record<string, any> & {
   style: ImageStyle;
 };
@@ -33,7 +27,7 @@ const getNextFocusRight = ({ nextFocusRight, parentFocus, isRTL }) => {
 };
 
 export function FocusableViewComponent(
-  { style, children, item, ...otherProps }: ButtonProps,
+  { style, children, ...otherProps }: ButtonProps,
   ref
 ) {
   const {
@@ -44,7 +38,6 @@ export function FocusableViewComponent(
     focusedStyles,
     nextFocusLeft,
     nextFocusRight,
-    pluginIdentifier,
     disableFocus,
     onButtonFocus,
   } = otherProps;
@@ -52,20 +45,6 @@ export function FocusableViewComponent(
   const parentFocus = useFocusable();
   const isRTL = useIsRTL();
 
-  const actionContext = useActions(pluginIdentifier);
-
-  const onPress = () => {
-    if (!actionContext) {
-      logger.warning(
-        `Cannot resolve action context for ${pluginIdentifier} - please make sure the plugin is installed and up to date`
-      );
-
-      return;
-    }
-
-    actionContext?.invokeAction?.(item);
-  };
-
   const onFocus = React.useCallback(
     (ref) => {
       onButtonFocus?.(ref);
@@ -82,7 +61,7 @@ export function FocusableViewComponent(
       id={generateId(cellUUID, suffixId)}
       disableFocus={disableFocus}
       groupId={groupId}
-      onPress={onPress}
+      onPress={otherProps.onPress}
       nextFocusUp={parentFocus?.nextFocusUp}
       nextFocusDown={parentFocus?.nextFocusDown}
       nextFocusLeft={getNextFocusLeft({ nextFocusLeft, parentFocus, isRTL })}

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

@@ -1,26 +1,20 @@
 import React, { useMemo } from "react";
 import { ImageStyle } from "react-native";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
-import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-const { Logger } = getXray();
-
 import {
   recursiveCloneElementsWithState,
   getFocusedButtonId,
 } from "../../utils";
 
-const logger = new Logger("plugin", "plugins/navigation-action");
-
 type Props = Record<string, any> & {
   style: ImageStyle;
 };
 
 const getFocusableId = (prefixId, suffixId) => `${prefixId}___${suffixId}`;
 
-export function FocusableView({ style, children, item, ...otherProps }: Props) {
+export function FocusableView({ style, children, ...otherProps }: Props) {
   const {
     groupId,
     prefixId,
@@ -29,7 +23,6 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
     focusedButtonId,
     normalStyles,
     focusedStyles,
-    pluginIdentifier,
     preferredFocus,
   } = otherProps;
 
@@ -41,20 +34,9 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 
-  const actionContext = useActions(pluginIdentifier);
-
-  const onPress = (event) => {
+  const handlePress = (event) => {
     event?.preventDefault?.();
-
-    if (!actionContext) {
-      logger.warning(
-        `Cannot resolve action context for ${pluginIdentifier} - please make sure the plugin is installed and up to date`
-      );
-
-      return;
-    }
-
-    actionContext?.invokeAction?.(item);
+    otherProps?.onPress?.(event);
   };
 
   const handleFocus = (focusable) => {
@@ -83,7 +65,7 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
       style={styles}
       onFocus={handleFocus}
       onBlur={handleBlur}
-      onPress={onPress}
+      onPress={handlePress}
       preferredFocus={preferredFocus}
       skipFocusManagerRegistration={otherProps.skipFocusManagerRegistration}
       isFocusable={otherProps.isFocusable}

package/Components/MasterCell/DefaultComponents/Image/Image.android.tsx

@@ -24,7 +24,9 @@ const MemoizedImage = React.memo(QBImage, R.equals);
 const isValidExternalSource = (source): boolean =>
   source?.uri?.startsWith("http") ||
   source?.uri?.startsWith("data:image") ||
-  source?.uri?.startsWith("file://");
+  source?.uri?.startsWith("file://") ||
+  source?.uri?.startsWith("asset:/") ||
+  source?.uri?.startsWith("node_modules_");
 
 export default function Image({
   style,
@@ -32,6 +34,7 @@ export default function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [showDefault, setShowDefault] = React.useState(false);
@@ -48,7 +51,10 @@ export default function Image({
     entry,
     showDefault,
     placeholderImage: placeholderImage || "",
-    otherProps,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
   });
 
   const onError = React.useCallback(() => {

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
-import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
+import { equals } from "@applicaster/zapp-react-native-utils/utils";
 
 type Source = {
   uri: string;
@@ -25,11 +25,19 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [error, setErrorState] = React.useState(null);
 
-  const source = useImageSource({ uri, entry, otherProps });
+  const source = useImageSource({
+    uri,
+    entry,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
+  });
 
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
@@ -49,7 +57,7 @@ function Image({
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...omit(["source"], otherProps)}
+      {...otherProps}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/Image/Image.web.tsx

@@ -23,9 +23,17 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
-  const source = useImageSource({ uri, entry, otherProps });
+  const source = useImageSource({
+    uri,
+    entry,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
+  });
 
   const updatedSource = source ? withDimensions(source) : { uri: "" };