@applicaster/zapp-react-native-ui-components 15.1.12 → 15.1.13-alpha.1034774223

package/Components/ModalComponent/__tests__/showTextInput.test.ts

@@ -0,0 +1,95 @@
+import {
+  actionExecutor,
+  ActionResult,
+} from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import { TextInputContent } from "../TextInputContent";
+import { showTextInputAction } from "../showTextInput";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor",
+  () => ({
+    actionExecutor: {
+      handleAction: jest.fn().mockResolvedValue("success"),
+    },
+    ActionResult: { Success: "success", Error: "error" },
+  })
+);
+
+jest.mock("../TextInputContent", () => ({
+  TextInputContent: function MockTextInputContent() {
+    return null;
+  },
+}));
+
+describe("showTextInputAction", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("delegates to openBottomSheet with TextInputContent as body-only component", async () => {
+    const action = {
+      type: "showTextInput",
+      options: {
+        headerTitle: "Create Playlist",
+        inputLabel: "Name your playlist",
+        defaultValue: "",
+        buttonLabel: "Create",
+        actions: [
+          {
+            type: "sendCloudEvent",
+            options: {
+              url: "https://example.com/events",
+              type: "com.applicaster.collection.create.v1",
+              data: {},
+            },
+          },
+          {
+            type: "showToast",
+            options: {
+              message: "Playlist created.",
+            },
+          },
+        ],
+      },
+    };
+
+    const result = await showTextInputAction(action as any);
+
+    expect(result).toBe(ActionResult.Success);
+    expect(actionExecutor.handleAction).toHaveBeenCalledTimes(1);
+
+    expect(actionExecutor.handleAction).toHaveBeenCalledWith(
+      {
+        type: "openBottomSheet",
+        options: {
+          header: {
+            title: "Create Playlist",
+          },
+          content: {
+            component: TextInputContent,
+            props: {
+              inputLabel: "Name your playlist",
+              defaultValue: "",
+              buttonLabel: "Create",
+              actions: action.options.actions,
+            },
+          },
+        },
+      },
+      undefined
+    );
+  });
+
+  it("returns Error when required options are missing", async () => {
+    const action = {
+      type: "showTextInput",
+      options: {
+        headerTitle: "Create Playlist",
+      },
+    };
+
+    const result = await showTextInputAction(action as any);
+    expect(result).toBe(ActionResult.Error);
+    expect(actionExecutor.handleAction).not.toHaveBeenCalled();
+  });
+});

package/Components/ModalComponent/index.tsx

@@ -1,7 +1,18 @@
 import React, { useCallback, useState } from "react";
+import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
 
 import { BasicMeasurementsPortal as MeasurementsPortal } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
 import { BottomSheetModalContent } from "./BottomSheetModalContent";
+import { showTextInputAction } from "./showTextInput";
+
+actionExecutor.registerAction("showTextInput", showTextInputAction);
+
+export { SortableList, type SortableListProps } from "./SortableList";
+
+export {
+  TextInputContent,
+  type TextInputContentProps,
+} from "./TextInputContent";
 
 export type PluginConfiguration = {
   [key: string]: any;

package/Components/ModalComponent/presets/__tests__/getCell.test.ts

@@ -0,0 +1,66 @@
+import { getCell } from "../index";
+import { standardCell } from "../standardCell";
+import { selectableCell } from "../selectableCell";
+import { dynamicCollectionCell } from "../dynamicCollectionCell";
+import { mapMenuItemToPlaylistData } from "../../AudioPlayer/Components/Item";
+
+describe("getCell", () => {
+  it("returns selectable cell for collection_selector", () => {
+    expect(getCell("collection_selector")).toBe(selectableCell);
+  });
+
+  it("returns selectable cell for preference_editor", () => {
+    expect(getCell("preference_editor")).toBe(selectableCell);
+  });
+
+  it("returns standard cell when role is undefined", () => {
+    expect(getCell(undefined)).toBe(standardCell);
+  });
+
+  it("returns standard cell for unknown roles", () => {
+    expect(getCell("unknown_role")).toBe(standardCell);
+  });
+
+  it("returns the dynamic collection cell for dynamic_collection", () => {
+    expect(getCell("dynamic_collection")).toBe(dynamicCollectionCell);
+  });
+
+  it("does not use behavior to select the cell family", () => {
+    expect(getCell(undefined, { selectMode: "multi" })).toBe(standardCell);
+
+    expect(getCell("collection_selector", { selectMode: "single" })).toBe(
+      selectableCell
+    );
+  });
+});
+
+describe("mapMenuItemToPlaylistData", () => {
+  const item = {
+    title: "Playlist 1",
+    summary: "5 items",
+    icon: "https://example.com/icon.png",
+  };
+
+  it("defaults to multiSelect trailing button when selectMode is multi or undefined", () => {
+    const data1 = mapMenuItemToPlaylistData(item, { selectMode: "multi" });
+    expect(data1.trailingButton).toBe("multiSelect");
+
+    const data2 = mapMenuItemToPlaylistData(item);
+    expect(data2.trailingButton).toBe("multiSelect");
+  });
+
+  it("omits trailing button when behavior selectMode is none", () => {
+    const data = mapMenuItemToPlaylistData(item, { selectMode: "none" });
+    expect(data.trailingButton).toBeUndefined();
+  });
+
+  it("omits trailing button when item trailingButton is explicitly none", () => {
+    const itemWithNone = { ...item, trailingButton: "none" };
+
+    const data = mapMenuItemToPlaylistData(itemWithNone, {
+      selectMode: "multi",
+    });
+
+    expect(data.trailingButton).toBeUndefined();
+  });
+});

package/Components/ModalComponent/presets/dynamicCollectionCell.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import {
+  AudioPlayerTrackItem,
+  VARIANT_QUEUED_ITEM,
+  ItemData,
+} from "../AudioPlayer/Components/Item";
+import type { CellRenderer, RenderItemArgs } from "./types";
+import {
+  MenuItem,
+  OPERATIONS,
+  hasOperation,
+} from "@applicaster/zapp-react-native-utils/modalState";
+
+function mapMenuItemToDynamicData(
+  item: MenuItem,
+  operations: string[]
+): ItemData {
+  const hasRemove = hasOperation(operations, OPERATIONS.REMOVE);
+  const hasReorder = hasOperation(operations, OPERATIONS.REORDER);
+
+  const title =
+    typeof item?.title === "string"
+      ? item.title
+      : item?.title != null
+        ? String(item.title)
+        : "";
+
+  const summary =
+    typeof item?.summary === "string"
+      ? item.summary.trim()
+      : item?.summary != null
+        ? String(item.summary)
+        : "";
+
+  return {
+    imageUri: item?.icon,
+    textLabel1: title,
+    textLabel2: summary,
+    leadingButton: hasRemove ? "remove" : undefined,
+    trailingButton: hasReorder ? "drag" : undefined,
+    isSelected: item?.isSelected,
+  };
+}
+
+export const dynamicCollectionCell: CellRenderer = {
+  renderItem: ({
+    item,
+    index,
+    onPress,
+    context,
+    renderHandle,
+  }: RenderItemArgs) => {
+    const { editableCollection } = context;
+    const operations = editableCollection?.operations || [];
+
+    const handleRemove = () => {
+      if (editableCollection?.remove) {
+        editableCollection.remove(index);
+      }
+    };
+
+    const handleDrag = () => {
+      // Drag is managed by SortableList drag handle context
+    };
+
+    return (
+      <AudioPlayerTrackItem
+        key={item.id}
+        configuration={VARIANT_QUEUED_ITEM}
+        data={mapMenuItemToDynamicData(item, operations)}
+        onPress={() => onPress(item)}
+        onLeadingButtonPress={handleRemove}
+        onTrailingButtonPress={handleDrag}
+        renderHandle={renderHandle}
+      />
+    );
+  },
+};

package/Components/ModalComponent/presets/index.ts

@@ -0,0 +1,27 @@
+import type { SelectionBehavior } from "@applicaster/zapp-react-native-utils/modalState";
+import { selectableCell } from "./selectableCell";
+import { standardCell } from "./standardCell";
+import type { CellRenderer } from "./types";
+
+export type { CellRenderer, RenderItemArgs, SheetRenderContext } from "./types";
+
+export { standardCell } from "./standardCell";
+
+export { selectableCell } from "./selectableCell";
+
+import { dynamicCollectionCell } from "./dynamicCollectionCell";
+
+const SELECTION_ROLES = new Set(["collection_selector", "preference_editor"]);
+
+/**
+ * Resolve the row cell from feed role (+ behavior for future config only).
+ * Unknown / none -> standard Button cell.
+ */
+export const getCell = (
+  role?: string,
+  _behavior?: SelectionBehavior
+): CellRenderer => {
+  if (role === "dynamic_collection") return dynamicCollectionCell;
+
+  return role && SELECTION_ROLES.has(role) ? selectableCell : standardCell;
+};

package/Components/ModalComponent/presets/selectableCell.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import {
+  AudioPlayerTrackItem,
+  mapMenuItemToPlaylistData,
+  VARIANT_PLAYLIST_ITEM,
+} from "../AudioPlayer/Components/Item";
+import type { CellRenderer } from "./types";
+
+export const selectableCell: CellRenderer = {
+  renderItem: ({ item, onPress, context }) => (
+    <AudioPlayerTrackItem
+      key={item.id}
+      configuration={VARIANT_PLAYLIST_ITEM}
+      data={mapMenuItemToPlaylistData(item, context?.behavior)}
+      onPress={() => onPress(item)}
+      onTrailingButtonPress={
+        item.secondaryAction?.action
+          ? () =>
+              onPress({
+                id: `${item.id}_secondary`,
+                title: item.title,
+                action: item.secondaryAction!.action,
+              })
+          : undefined
+      }
+    />
+  ),
+};

package/Components/ModalComponent/presets/standardCell.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import type { CellRenderer } from "./types";
+
+export const standardCell: CellRenderer = {
+  renderItem: ({ item, onPress, context }) => {
+    if (!item) {
+      return null;
+    }
+
+    const {
+      theme,
+      ButtonComponent,
+      current_selection,
+      iconBaseProps,
+      itemBaseProps,
+      labelBaseProps,
+      getSelectedItemIcon,
+      getDefaultItemIcon,
+      iconPlacement,
+    } = context;
+
+    return (
+      <ButtonComponent
+        key={item.id}
+        configuration={theme}
+        selectedItem={current_selection}
+        item={item}
+        onPress={onPress}
+        label={
+          theme[(item as any)?.label] ?? ((item as any)?.label || item?.title)
+        }
+        iconBaseProps={iconBaseProps}
+        itemBaseProps={itemBaseProps}
+        labelBaseProps={labelBaseProps}
+        selectedItemIcon={getSelectedItemIcon(theme)}
+        defaultItemIcon={getDefaultItemIcon(theme)}
+        iconPlacement={iconPlacement}
+      />
+    );
+  },
+};

package/Components/ModalComponent/presets/types.ts

@@ -0,0 +1,35 @@
+import type React from "react";
+import type {
+  MenuItem,
+  SelectionBehavior,
+} from "@applicaster/zapp-react-native-utils/modalState";
+import type { EditableCollection } from "@applicaster/zapp-react-native-utils/modalState/EditableCollection";
+
+/**
+ * Extra props row renderers need.
+ */
+export type SheetRenderContext = {
+  theme: any;
+  ButtonComponent: React.ComponentType<any>;
+  current_selection?: any;
+  iconBaseProps: any;
+  itemBaseProps: any;
+  labelBaseProps: any;
+  getSelectedItemIcon: (theme: any) => any;
+  getDefaultItemIcon: (theme: any) => any;
+  iconPlacement?: "left" | "right";
+  editableCollection?: EditableCollection | null;
+  behavior?: SelectionBehavior;
+};
+
+export type RenderItemArgs = {
+  item: MenuItem;
+  index: number;
+  onPress: (item: MenuItem) => void;
+  context: SheetRenderContext;
+  renderHandle?: (children: React.ReactElement) => React.ReactElement;
+};
+
+export type CellRenderer = {
+  renderItem: (args: RenderItemArgs) => React.ReactNode;
+};

package/Components/ModalComponent/showTextInput.ts

@@ -0,0 +1,43 @@
+import {
+  actionExecutor,
+  ActionResult,
+} from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import { TextInputContent } from "./TextInputContent";
+
+/**
+ * Opens a text-input bottom sheet driven by action.options.
+ * Uses openBottomSheet with content.component as body-only UI;
+ * standard ModalHeader (dismiss x) is provided by ModalComponent.
+ */
+export async function showTextInputAction(
+  action: ActionType,
+  context?: Record<string, any>
+): Promise<ActionResult> {
+  const { headerTitle, inputLabel, defaultValue, buttonLabel, actions } =
+    action.options || {};
+
+  if (!headerTitle || !buttonLabel || !actions || !actions.length) {
+    return ActionResult.Error;
+  }
+
+  return actionExecutor.handleAction(
+    {
+      type: "openBottomSheet",
+      options: {
+        header: {
+          title: headerTitle,
+        },
+        content: {
+          component: TextInputContent,
+          props: {
+            inputLabel,
+            defaultValue: defaultValue ?? "",
+            buttonLabel,
+            actions,
+          },
+        },
+      },
+    },
+    context
+  );
+}

package/Components/ModalComponent/utils.ts

@@ -1,4 +1,8 @@
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { PluginConfiguration } from "./";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemLabelProps } from "./Button/ItemLabel";
@@ -6,7 +10,8 @@ import { ItemProps } from "./Button/Item";
 
 export function defaultItemProps(
   config: PluginConfiguration,
-  maxWidth: number
+  maxWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemProps {
   const {
     modal_bottom_sheet_item_background_color,
@@ -24,19 +29,36 @@ export function defaultItemProps(
     modal_bottom_sheet_item_padding_top,
   } = config;
 
+  const bgDefault = blockItemStyle?.background?.default;
+
+  const bgFocused =
+    blockItemStyle?.background?.focused || blockItemStyle?.background?.focus;
+
   return {
-    backgroundColor: modal_bottom_sheet_item_background_color,
-    focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
+    backgroundColor:
+      bgDefault?.backgroundColor || modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor:
+      bgFocused?.backgroundColor ||
+      modal_bottom_sheet_item_focus_background_color,
     selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
     focusedSelectedBackgroundColor:
       modal_bottom_sheet_item_focused_selected_background_color,
-    borderRadius: modal_bottom_sheet_item_corner_radius,
+    borderRadius: toNumberWithDefault(
+      modal_bottom_sheet_item_corner_radius,
+      bgDefault?.borderRadius
+    ),
     marginBottom: modal_bottom_sheet_item_margin_bottom,
     marginTop: modal_bottom_sheet_item_margin_top,
     marginLeft: modal_bottom_sheet_item_margin_left,
     marginRight: modal_bottom_sheet_item_margin_right,
-    paddingTop: modal_bottom_sheet_item_padding_top,
-    paddingBottom: modal_bottom_sheet_item_padding_bottom,
+    paddingTop: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_top,
+      bgDefault?.paddingTop
+    ),
+    paddingBottom: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_bottom,
+      bgDefault?.paddingBottom
+    ),
     paddingRight: modal_bottom_sheet_item_padding_right,
     paddingLeft: modal_bottom_sheet_item_padding_left,
     maxWidth,
@@ -45,7 +67,8 @@ export function defaultItemProps(
 
 export function defaultItemLabelProps(
   config: PluginConfiguration,
-  sheetWidth: number
+  sheetWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemLabelProps {
   const {
     modal_bottom_sheet_item_label_android_letter_spacing,
@@ -72,15 +95,48 @@ export function defaultItemLabelProps(
     modal_bottom_sheet_item_padding_right,
   } = config;
 
-  const maxWidth =
+  const iconWidth = toNumberWithDefaultZero(modal_bottom_sheet_item_icon_width);
+
+  const iconMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_left
+  );
+
+  const iconMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_right
+  );
+
+  const itemMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_left
+  );
+
+  const itemMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_right
+  );
+
+  const itemPaddingLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_left
+  );
+
+  const itemPaddingRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_right
+  );
+
+  const calculatedMaxWidth =
     sheetWidth -
-    (modal_bottom_sheet_item_icon_width +
-      modal_bottom_sheet_item_icon_margin_left +
-      modal_bottom_sheet_item_icon_margin_right +
-      modal_bottom_sheet_item_margin_left +
-      modal_bottom_sheet_item_margin_right +
-      modal_bottom_sheet_item_padding_left +
-      modal_bottom_sheet_item_padding_right);
+    (iconWidth +
+      iconMarginLeft +
+      iconMarginRight +
+      itemMarginLeft +
+      itemMarginRight +
+      itemPaddingLeft +
+      itemPaddingRight);
+
+  const maxWidth =
+    Number.isNaN(calculatedMaxWidth) || calculatedMaxWidth <= 0
+      ? sheetWidth
+      : calculatedMaxWidth;
+
+  const label1Default = blockItemStyle?.textLabel1?.default;
 
   return {
     fontFamily: platformSelect({
@@ -91,8 +147,11 @@ export function defaultItemLabelProps(
       ios: modal_bottom_sheet_item_label_ios_letter_spacing,
       android: modal_bottom_sheet_item_label_android_letter_spacing,
     }),
-    fontSize: modal_bottom_sheet_item_label_font_size,
-    color: modal_bottom_sheet_item_label_font_color,
+    fontSize: toNumberWithDefault(
+      modal_bottom_sheet_item_label_font_size,
+      label1Default?.fontSize
+    ),
+    color: label1Default?.fontColor || modal_bottom_sheet_item_label_font_color,
     focusColor: modal_bottom_sheet_item_label_focus_font_color,
     hoverSelectedColor: modal_bottom_sheet_item_label_hover_selected_font_color,
     selectedColor: modal_bottom_sheet_item_label_selected_font_color,
@@ -146,7 +205,8 @@ export function getItemLabelProps(
   width: number,
   labelProps?:
     | ((theme: PluginConfiguration, width: number) => ItemLabelProps)
-    | ItemLabelProps
+    | ItemLabelProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (labelProps) {
     return typeof labelProps === "function"
@@ -154,7 +214,7 @@ export function getItemLabelProps(
       : labelProps;
   }
 
-  return defaultItemLabelProps(theme, width);
+  return defaultItemLabelProps(theme, width, blockItemStyle);
 }
 
 export function getItemProps(
@@ -162,7 +222,8 @@ export function getItemProps(
   width: number,
   itemProps?:
     | ((theme: PluginConfiguration, width: number) => ItemProps)
-    | ItemProps
+    | ItemProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (itemProps) {
     return typeof itemProps === "function"
@@ -170,5 +231,5 @@ export function getItemProps(
       : itemProps;
   }
 
-  return defaultItemProps(theme, width);
+  return defaultItemProps(theme, width, blockItemStyle);
 }

package/Hooks/useEntryActionsExpander.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+import {
+  buildEntryActions,
+  EntryActionDeps,
+} from "@applicaster/zapp-react-native-utils/entryActions";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import {
+  useCurrentScreenData,
+  useScreenContext,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+/**
+ * Expands `entry.extensions.entry_action` into invokable actions, against the
+ * screen this hook is called from.
+ *
+ * Entry actions are data on the entry, not an installed capability, so there is
+ * nothing to look up by identifier: the surface showing the entry expands them.
+ * That also decides which screen they execute against — the one whose tree this
+ * hook runs in, rather than whichever screen happened to be current when a
+ * global provider was registered.
+ *
+ * Pass the result to `resolveActionIdentifiers` / `resolvePlayerActions` as
+ * `expandEntryActions`.
+ */
+export function useEntryActionsExpander(): (
+  entry: ZappEntry | ZappFeed
+) => RegisteredAction[] {
+  const { pathname } = useRoute();
+
+  const screenContext = useScreenContext();
+  const screenData = useCurrentScreenData();
+  const screenState = screenContext?.options;
+  const screenStateStore = useScreenStateStore();
+  const actionExecutor = React.useContext(ActionExecutorContext);
+
+  // Read through a ref so the returned expander keeps a stable identity: it
+  // feeds `useMemo` dependency lists on surfaces that re-resolve their actions
+  // on every registry change.
+  const depsRef = React.useRef<EntryActionDeps>();
+
+  depsRef.current = {
+    actionExecutor,
+    actionContext: {
+      screenData,
+      screenState,
+      screenRoute: pathname,
+      screenStateStore,
+      // From the screen context, the way `useCellClick` builds the same bag.
+      // The ZappPipes entry context is a route-keyed map, so reading `.data`
+      // off it was always undefined.
+      screenEntry: screenContext?.entry,
+    },
+  };
+
+  return React.useCallback(
+    (entry: ZappEntry | ZappFeed) => buildEntryActions(entry, depsRef.current),
+    []
+  );
+}