@applicaster/zapp-react-native-utils 16.0.0-rc.6 → 16.0.0-rc.60

package/modalState/ModalOrchestrator.ts

@@ -0,0 +1,201 @@
+import { dismissModal, modalStore, openBottomSheetModal } from "./store";
+import { isPresentSubMenuAction, Menu, MenuItem } from "./types";
+import { ContentViewModel } from "./ContentViewModel";
+
+export type { Menu, MenuItem };
+
+export { isPresentSubMenuAction };
+
+/**
+ * Converts a Menu model into the props expected by BottomSheetModalContent.
+ * - Maps MenuItem.title → label (required by BottomSheetModalContent)
+ * - Maps MenuItem.icon  → image src
+ * - Flattens header.title / header.subtitle into top-level title / summary
+ */
+interface StackEntry {
+  menu: Menu;
+  onItemPress?: (item: MenuItem) => void | Promise<void>;
+  viewModel: ContentViewModel;
+}
+
+function menuToModalArgs(
+  menu: Menu,
+  viewModel: ContentViewModel,
+  onItemPress: (item: MenuItem) => void | Promise<void>,
+  key: string
+): OpenModalBottomSheetArgs {
+  const items = menu.content.items.map((item) => ({
+    ...item,
+    // BottomSheetModalContent renders `theme[item.label] ?? item.label`
+    label: item.title,
+  }));
+
+  return {
+    modalBottomSheetContentProps: {
+      key,
+      items,
+      itemsUrl: menu.content.itemsUrl,
+      title: menu.header?.title ?? menu.content.title,
+      summary: menu.header?.subtitle,
+      headerComponent: menu.header?.component,
+      headerComponentProps: menu.header?.componentProps,
+      styleOverrides: menu.content.styleOverrides,
+      onPress: onItemPress,
+      viewModel,
+    },
+    options: {},
+  };
+}
+
+/**
+ * ModalOrchestrator manages a stack of Menu modals, enabling push/pop
+ * navigation between bottom sheet screens.
+ *
+ * Usage:
+ *   modalOrchestrator.open(menu);
+ *   modalOrchestrator.back();    // go to previous modal in the stack
+ *   modalOrchestrator.close();   // dismiss all and clear the stack
+ */
+class ModalOrchestrator {
+  private _stack: StackEntry[] = [];
+
+  /** Number of entries currently in the stack. */
+  get stackSize(): number {
+    return this._stack.length;
+  }
+
+  /** Whether there is a previous modal to go back to. */
+  get canGoBack(): boolean {
+    return this._stack.length > 1;
+  }
+
+  /** The Menu currently shown, or null if the stack is empty. */
+  get current(): Menu | null {
+    return this._stack[this._stack.length - 1]?.menu ?? null;
+  }
+
+  /**
+   * Push a new Menu onto the stack and display it.
+   * If a menu item carries a PresentSubMenuAction it will automatically
+   * push the sub-menu when pressed; all other items delegate to
+   * the optional `onItemPress` callback.
+   */
+  open(
+    menu: Menu,
+    onItemPress?: (item: MenuItem) => void | Promise<void>
+  ): void {
+    const viewModel = new ContentViewModel(menu.content);
+    this._stack.push({ menu, onItemPress, viewModel });
+    this._present(menu, viewModel, onItemPress);
+  }
+
+  /**
+   * Pop the current modal and return to the previous one.
+   * If the stack has only one entry, closes entirely.
+   */
+  back(): void {
+    if (this._stack.length === 0) {
+      return;
+    }
+
+    this._stack.pop();
+
+    const previous = this._stack[this._stack.length - 1];
+
+    if (previous) {
+      this._present(previous.menu, previous.viewModel, previous.onItemPress);
+    } else {
+      dismissModal();
+    }
+  }
+
+  /**
+   * Close all modals and clear the entire stack.
+   */
+  close(): void {
+    this._stack = [];
+    dismissModal();
+  }
+
+  /**
+   * Replace the current top of the stack without adding a new history entry.
+   */
+  replace(
+    menu: Menu,
+    onItemPress?: (item: MenuItem) => void | Promise<void>
+  ): void {
+    if (this._stack.length === 0) {
+      this.open(menu, onItemPress);
+
+      return;
+    }
+
+    const viewModel = new ContentViewModel(menu.content);
+    this._stack[this._stack.length - 1] = { menu, onItemPress, viewModel };
+    this._present(menu, viewModel, onItemPress);
+  }
+
+  private _buildOnPress(
+    onItemPress?: (item: MenuItem) => void | Promise<void>
+  ): (item: MenuItem) => void | Promise<void> {
+    return (item: MenuItem) => {
+      if (isPresentSubMenuAction(item.action)) {
+        // Navigate deeper into the sub-menu
+        this.open(item.action.menu, onItemPress);
+
+        return;
+      }
+
+      return onItemPress?.(item);
+    };
+  }
+
+  /**
+   * Called when the UI dismisses the modal (swipe / overlay tap).
+   * Clears the stack without calling dismissModal() again to avoid
+   * a feedback loop with the store reset.
+   */
+  private _onUIDismiss(): void {
+    this._stack = [];
+  }
+
+  /**
+   * True when the Zustand modal store already has a visible bottom sheet.
+   * Used to skip the slide-in animation when navigating to a deeper level.
+   */
+  private get _isOpen(): boolean {
+    return modalStore.getState().modalState.visible;
+  }
+
+  private _present(
+    menu: Menu,
+    viewModel: ContentViewModel,
+    onItemPress?: (item: MenuItem) => void | Promise<void>
+  ): void {
+    const key = `menu-level-${this._stack.length}`;
+
+    const args = menuToModalArgs(
+      menu,
+      viewModel,
+      this._buildOnPress(onItemPress),
+      key
+    );
+
+    const alreadyOpen = this._isOpen;
+
+    openBottomSheetModal({
+      ...args,
+      options: {
+        ...args.options,
+        // Skip the slide-in when updating an already-visible sheet (sub-level nav)
+        animated: !alreadyOpen,
+        animationType: alreadyOpen ? "none" : "slide",
+        // Keep the stack in sync when the user dismisses via swipe or overlay
+        onDismiss: () => this._onUIDismiss(),
+        onRequestClose: () => this._onUIDismiss(),
+      },
+    });
+  }
+}
+
+export const modalOrchestrator = new ModalOrchestrator();

package/modalState/RemoteEditableCollection.ts

@@ -0,0 +1,227 @@
+import { BehaviorSubject, Observable } from "rxjs";
+import { Content, MenuItem, Operation } from "./types";
+import { EditableCollection } from "./EditableCollection";
+import { reorderByIds } from "../arrayUtils";
+import { actionExecutor } from "../actionsExecutor/ActionExecutor";
+import { createLogger } from "../logger";
+
+const { log_debug, log_warning, log_error } = createLogger({
+  subsystem: "modalState",
+  category: "RemoteEditableCollection",
+});
+
+export class RemoteEditableCollection implements EditableCollection {
+  public items$: Observable<MenuItem[]>;
+  public operations: Operation[];
+  private itemsSubject: BehaviorSubject<MenuItem[]>;
+  private refetch: () => Promise<void>;
+  private content: Content;
+  private pendingMutationsCount = 0;
+
+  constructor(content: Content, refetch: () => Promise<void>) {
+    this.content = content;
+    this.refetch = refetch;
+    this.operations = content.dynamicCollection?.operations || [];
+    this.itemsSubject = new BehaviorSubject<MenuItem[]>(content.items || []);
+    this.items$ = this.itemsSubject.asObservable();
+  }
+
+  /**
+   * Replace the current items with an authoritative server list (called after
+   * a successful mutation reloads the feed). Overrides optimistic state.
+   */
+  sync(items: MenuItem[]): void {
+    if (this.pendingMutationsCount > 0) {
+      log_debug(
+        `sync: Suppressing server sync because ${this.pendingMutationsCount} local mutation(s) are in-flight`
+      );
+
+      return;
+    }
+
+    this.itemsSubject.next(items);
+  }
+
+  async remove(index: number): Promise<void> {
+    const items = this.itemsSubject.value;
+    const snapshot = [...items];
+    const item = items[index];
+
+    if (!item) return;
+
+    this.pendingMutationsCount++;
+
+    // Optimistic update
+    const newItems = items.filter((_, i) => i !== index);
+    this.itemsSubject.next(newItems);
+
+    let actionFailed = false;
+
+    try {
+      await this.executeActionAlias(item, "remove_item");
+    } catch (e) {
+      actionFailed = true;
+      log_error("Remove failed, rolling back", { error: e });
+      this.itemsSubject.next(snapshot);
+    } finally {
+      this.pendingMutationsCount = Math.max(0, this.pendingMutationsCount - 1);
+    }
+
+    if (!actionFailed) {
+      await this.refetch();
+    }
+  }
+
+  async move(itemIds: string[]): Promise<void> {
+    const items = this.itemsSubject.value;
+    const snapshot = [...items];
+
+    if (itemIds && itemIds.length > 0) {
+      this.pendingMutationsCount++;
+      const newItems = reorderByIds(items, itemIds);
+      this.itemsSubject.next(newItems);
+
+      let actionFailed = false;
+
+      try {
+        const targetItem = newItems[0] || items[0];
+
+        await this.executeActionAlias(targetItem, "reorder_item", {
+          itemIds,
+        });
+      } catch (e) {
+        actionFailed = true;
+        log_error("Move failed, rolling back", { error: e });
+        this.itemsSubject.next(snapshot);
+      } finally {
+        this.pendingMutationsCount = Math.max(
+          0,
+          this.pendingMutationsCount - 1
+        );
+      }
+
+      if (!actionFailed) {
+        await this.refetch();
+      }
+    }
+  }
+
+  async add(_item?: MenuItem): Promise<void> {
+    const items = this.itemsSubject.value;
+    const snapshot = [...items];
+
+    const addEvents = this.content.dynamicCollection?.events?.add;
+
+    if (!addEvents || addEvents.length === 0) {
+      log_warning("No events.add action found for create collection operation");
+
+      return;
+    }
+
+    this.pendingMutationsCount++;
+    let actionFailed = false;
+
+    try {
+      for (const action of addEvents) {
+        await actionExecutor.handleAction(action as any);
+      }
+    } catch (e) {
+      actionFailed = true;
+      log_error("Add/create collection failed", { error: e });
+      this.itemsSubject.next(snapshot);
+    } finally {
+      this.pendingMutationsCount = Math.max(0, this.pendingMutationsCount - 1);
+    }
+
+    if (!actionFailed) {
+      await this.refetch();
+    }
+  }
+
+  async deleteCollection(): Promise<void> {
+    const items = this.itemsSubject.value;
+    const snapshot = [...items];
+
+    this.pendingMutationsCount++;
+    this.itemsSubject.next([]);
+
+    let actionFailed = false;
+
+    try {
+      const firstItem = items[0];
+
+      if (firstItem) {
+        await this.executeActionAlias(firstItem, [
+          "delete_collection",
+          "clear_collection",
+        ]);
+      }
+    } catch (e) {
+      actionFailed = true;
+      log_error("deleteCollection failed, rolling back", { error: e });
+      this.itemsSubject.next(snapshot);
+    } finally {
+      this.pendingMutationsCount = Math.max(0, this.pendingMutationsCount - 1);
+    }
+
+    if (!actionFailed) {
+      await this.refetch();
+    }
+  }
+
+  private async executeActionAlias(
+    item: MenuItem,
+    alias: string | string[],
+    data?: Record<string, unknown>
+  ): Promise<void> {
+    const entryActions = item.entryActions || [];
+    const aliases = Array.isArray(alias) ? alias : [alias];
+
+    const actionGroup = entryActions.find(
+      (ea) => ea.button?.alias && aliases.includes(ea.button.alias)
+    );
+
+    log_debug("executeActionAlias:", {
+      alias,
+      itemId: item.id,
+      entryActionsCount: entryActions.length,
+      availableAliases: entryActions.map((ea) => ea.button?.alias),
+      foundActionGroup: !!actionGroup,
+      data,
+    });
+
+    if (!actionGroup || !actionGroup.actions) {
+      log_warning(`No entry action found for alias "${aliases.join(", ")}"`, {
+        itemId: item.id,
+      });
+
+      return;
+    }
+
+    // Execute each action in the group
+    for (const action of actionGroup.actions) {
+      const actionToExecute = data
+        ? {
+            ...action,
+            options: {
+              ...action.options,
+              ...data,
+              data: {
+                ...(action.options?.data || {}),
+                ...data,
+              },
+            },
+          }
+        : action;
+
+      log_debug("handling action:", actionToExecute);
+
+      await actionExecutor.handleAction(
+        actionToExecute as any,
+        {
+          entry: item as any,
+        } as any
+      );
+    }
+  }
+}

package/modalState/__tests__/ContentViewModel.editable.test.ts

@@ -0,0 +1,69 @@
+import { ContentViewModel } from "../ContentViewModel";
+import { loadItemsFromSource } from "../../actionsExecutor/actions/openBottomSheet";
+import { EditableCollectionRegistry } from "../EditableCollectionRegistry";
+import { EditableCollection } from "../EditableCollection";
+import { BehaviorSubject } from "rxjs";
+import type { MenuItem } from "../types";
+
+jest.mock("../../actionsExecutor/actions/openBottomSheet", () => ({
+  loadItemsFromSource: jest.fn(),
+}));
+
+const load = loadItemsFromSource as jest.Mock;
+
+describe("ContentViewModel — editable collection", () => {
+  beforeEach(() => {
+    (EditableCollectionRegistry as any).providers = {};
+    jest.clearAllMocks();
+  });
+
+  it("resolves the collection once and syncs fresh items on refetch (no recreation)", async () => {
+    const sync = jest.fn();
+
+    const collection: EditableCollection = {
+      items$: new BehaviorSubject<MenuItem[]>([]).asObservable(),
+      operations: ["remove"],
+      sync,
+    };
+
+    const factory = jest.fn(() => collection);
+    EditableCollectionRegistry.register("@{provider/test}", factory);
+
+    const serverItems: MenuItem[] = [{ id: "1", title: "Fetched" }];
+
+    load.mockResolvedValue({
+      items: serverItems,
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["remove"],
+        provider: "@{provider/test}",
+      },
+    });
+
+    const viewModel = new ContentViewModel({
+      title: "Queue",
+      items: [],
+      itemsUrl: "pipesv2://queue-action",
+      dynamicCollection: {
+        operations: ["remove"],
+        provider: "@{provider/test}",
+      },
+    });
+
+    // constructor resolves the provider, then refetches (items empty + itemsUrl)
+    await new Promise(process.nextTick);
+
+    expect(viewModel.editableCollection).toBe(collection);
+    // factory used exactly once — instance reused, not rebuilt on refetch
+    expect(factory).toHaveBeenCalledTimes(1);
+    // authoritative server items pushed into the existing instance
+    expect(sync).toHaveBeenLastCalledWith(serverItems);
+
+    sync.mockClear();
+
+    await viewModel.refetch();
+
+    expect(factory).toHaveBeenCalledTimes(1);
+    expect(sync).toHaveBeenCalledWith(serverItems);
+  });
+});

package/modalState/__tests__/ContentViewModel.test.ts

@@ -0,0 +1,165 @@
+import { ContentViewModel } from "../ContentViewModel";
+import { loadItemsFromSource } from "../../actionsExecutor/actions/openBottomSheet";
+
+jest.mock("../../actionsExecutor/actions/openBottomSheet", () => ({
+  loadItemsFromSource: jest.fn(),
+}));
+
+describe("ContentViewModel", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should initialize with items and not fetch if itemsUrl is not provided", () => {
+    const content = {
+      title: "Test Menu",
+      items: [{ title: "Item 1" }, { title: "Item 2" }],
+    };
+
+    const viewModel = new ContentViewModel(content);
+
+    expect(viewModel.getState()).toMatchObject({
+      items: content.items,
+      isLoading: false,
+      role: undefined,
+      behavior: undefined,
+    });
+
+    expect(loadItemsFromSource).not.toHaveBeenCalled();
+  });
+
+  it("seeds role and behavior from Content", () => {
+    const viewModel = new ContentViewModel({
+      title: "Playlists",
+      items: [{ title: "A" }],
+      role: "collection_selector",
+      behavior: { selectMode: "multi", currentSelection: ["a"] },
+    });
+
+    expect(viewModel.getState().role).toBe("collection_selector");
+
+    expect(viewModel.getState().behavior).toEqual({
+      selectMode: "multi",
+      currentSelection: ["a"],
+    });
+  });
+
+  it("should trigger fetch on init if items is empty and itemsUrl is present", async () => {
+    const mockItems = [{ title: "Fetched Item" }];
+
+    (loadItemsFromSource as jest.Mock).mockResolvedValueOnce({
+      items: mockItems,
+      role: "collection_selector",
+      behavior: { selectMode: "multi", currentSelection: [] },
+    });
+
+    const content = {
+      title: "Test Menu",
+      items: [],
+      itemsUrl: "http://example.com/items",
+    };
+
+    const viewModel = new ContentViewModel(content);
+
+    // Initial state should be loading
+    expect(viewModel.getState().isLoading).toBe(true);
+
+    // Wait for the asynchronous refetch to complete
+    await new Promise(process.nextTick);
+
+    expect(loadItemsFromSource).toHaveBeenCalledWith(
+      expect.stringMatching(/^http:\/\/example\.com\/items\?_t=\d+$/)
+    );
+
+    expect(viewModel.getState()).toMatchObject({
+      items: mockItems,
+      isLoading: false,
+      role: "collection_selector",
+      behavior: { selectMode: "multi", currentSelection: [] },
+    });
+  });
+
+  it("updates role and behavior on refetch", async () => {
+    (loadItemsFromSource as jest.Mock)
+      .mockResolvedValueOnce({
+        items: [{ title: "First" }],
+        role: "collection_selector",
+        behavior: { selectMode: "multi", currentSelection: [] },
+      })
+      .mockResolvedValueOnce({
+        items: [{ title: "Second", isSelected: true }],
+        role: "collection_selector",
+        behavior: { selectMode: "multi", currentSelection: ["2"] },
+      });
+
+    const viewModel = new ContentViewModel({
+      title: "Test Menu",
+      items: [],
+      itemsUrl: "http://example.com/items",
+    });
+
+    await new Promise(process.nextTick);
+
+    await viewModel.refetch();
+
+    expect(viewModel.getState().items[0].title).toBe("Second");
+    expect(viewModel.getState().behavior?.currentSelection).toEqual(["2"]);
+    expect(viewModel.getState().role).toBe("collection_selector");
+  });
+
+  it("should notify subscribers of state changes", async () => {
+    const mockItems = [{ title: "Fetched Item" }];
+
+    (loadItemsFromSource as jest.Mock).mockResolvedValue({
+      items: mockItems,
+    });
+
+    const content = {
+      title: "Test Menu",
+      items: [],
+      itemsUrl: "http://example.com/items",
+    };
+
+    const viewModel = new ContentViewModel(content);
+
+    // Wait for constructor's refetch to finish
+    await new Promise(process.nextTick);
+
+    const listener = jest.fn();
+    const unsubscribe = viewModel.subscribe(listener);
+
+    await viewModel.refetch();
+
+    expect(listener).toHaveBeenCalled();
+    expect(viewModel.getState().items).toEqual(mockItems);
+
+    unsubscribe();
+    listener.mockClear();
+
+    await viewModel.refetch();
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("should handle error states during fetching", async () => {
+    const error = new Error("Network Error");
+    (loadItemsFromSource as jest.Mock).mockRejectedValueOnce(error);
+
+    const content = {
+      title: "Test Menu",
+      items: [],
+      itemsUrl: "http://example.com/items",
+    };
+
+    const viewModel = new ContentViewModel(content);
+
+    await new Promise(process.nextTick);
+
+    expect(viewModel.getState()).toMatchObject({
+      items: [],
+      isLoading: false,
+      error: "Network Error",
+      role: undefined,
+      behavior: undefined,
+    });
+  });
+});