@applicaster/zapp-react-native-ui-components 16.0.0-rc.8 → 16.0.0-rc.80

package/Components/ModalComponent/__tests__/TextInputContent.test.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react-native";
+import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor",
+  () => ({
+    actionExecutor: {
+      handleAction: jest.fn().mockResolvedValue(undefined),
+      handleActions: jest.fn().mockResolvedValue(undefined),
+    },
+    ActionResult: { Success: "success", Error: "error" },
+  })
+);
+
+jest.mock("../AudioPlayer/Components/Input", () => ({
+  AudioPlayerInput: ({ value, onChangeText, data }: any) => {
+    const { TextInput, Text } = require("react-native");
+
+    return (
+      <>
+        <Text testID="input-label">{data?.label}</Text>
+        <TextInput
+          testID="playlist-input"
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={data?.placeholder}
+        />
+      </>
+    );
+  },
+  VARIANT_NAME_PLAYLIST_INPUT: {},
+}));
+
+jest.mock("../AudioPlayer/Components/Button", () => ({
+  AudioPlayerButton: ({ data, onPress }: any) => {
+    const { Pressable, Text } = require("react-native");
+
+    return (
+      <Pressable testID="submit-button" onPress={onPress}>
+        <Text>{data?.title}</Text>
+      </Pressable>
+    );
+  },
+  VARIANT_TEXT_ONLY: {},
+}));
+
+import { TextInputContent } from "../TextInputContent";
+
+const submitAction = {
+  type: "sendCloudEvent",
+  options: {
+    url: "https://server.com/cloud-events",
+    type: "com.applicaster.collection.create.v1",
+    subject: "edit_collection",
+    data: { collectionId: "playlist-123" },
+  },
+};
+
+const baseProps = {
+  inputLabel: "Name your playlist",
+  defaultValue: "Summer Hits",
+  buttonLabel: "Update",
+  actions: [submitAction],
+};
+
+describe("TextInputContent", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders default value and button label without a modal header", () => {
+    render(<TextInputContent {...baseProps} />);
+
+    expect(screen.queryByTestId("sheet-header")).toBeNull();
+
+    expect(screen.getByTestId("playlist-input").props.value).toBe(
+      "Summer Hits"
+    );
+
+    expect(screen.getByTestId("submit-button")).toBeTruthy();
+    expect(screen.getByText("Update")).toBeTruthy();
+  });
+
+  it("on submit merges name into sendCloudEvent data then dismisses", async () => {
+    render(<TextInputContent {...baseProps} />);
+
+    fireEvent.changeText(screen.getByTestId("playlist-input"), "New Name");
+    fireEvent.press(screen.getByTestId("submit-button"));
+
+    await waitFor(() => {
+      expect(actionExecutor.handleActions).toHaveBeenCalledTimes(1);
+      expect(actionExecutor.handleAction).toHaveBeenCalledTimes(1);
+    });
+
+    expect(actionExecutor.handleActions).toHaveBeenCalledWith([
+      {
+        type: "sendCloudEvent",
+        options: {
+          url: "https://server.com/cloud-events",
+          type: "com.applicaster.collection.create.v1",
+          subject: "edit_collection",
+          data: {
+            collectionId: "playlist-123",
+            name: "New Name",
+          },
+        },
+      },
+    ]);
+
+    expect(actionExecutor.handleAction).toHaveBeenCalledWith({
+      type: "dismissBottomSheet",
+    });
+  });
+});

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