@applicaster/zapp-react-native-utils 16.0.0-alpha.9183418480 → 16.0.0-alpha.9530606740

package/modalState/ModalOrchestrator.ts

@@ -0,0 +1,204 @@
+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,
+      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[] = [];
+  private _sheetContentComponent: any = null;
+
+  public registerSheetContentComponent(component: any) {
+    this._sheetContentComponent = component;
+  }
+
+  /** 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,
+      ModalBottomSheetContent: this._sheetContentComponent,
+      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/__tests__/ContentViewModel.test.ts

@@ -0,0 +1,107 @@
+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()).toEqual({
+      items: content.items,
+      isLoading: false,
+    });
+
+    expect(loadItemsFromSource).not.toHaveBeenCalled();
+  });
+
+  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(mockItems);
+
+    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(
+      "http://example.com/items"
+    );
+
+    expect(viewModel.getState()).toEqual({
+      items: mockItems,
+      isLoading: false,
+    });
+  });
+
+  it("should notify subscribers of state changes", async () => {
+    const mockItems = [{ title: "Fetched Item" }];
+    (loadItemsFromSource as jest.Mock).mockResolvedValue(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()).toEqual({
+      items: [],
+      isLoading: false,
+      error: "Network Error",
+    });
+  });
+});

package/modalState/components/ActionItem.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, Pressable, Image } from "react-native";
+import { MenuItem, isPresentSubMenuAction } from "../types";
+
+const styles = StyleSheet.create({
+  itemRowContainer: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    justifyContent: "space-between",
+    borderBottomWidth: 1,
+    borderBottomColor: "#2a2a2a",
+    backgroundColor: "#1e1e1e",
+  },
+  itemMainPart: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+  },
+  itemMainPartPressed: {
+    backgroundColor: "#2d2d2d",
+  },
+  itemIconImage: {
+    width: 24,
+    height: 24,
+    borderRadius: 4,
+    marginRight: 12,
+    backgroundColor: "#2a2a2a",
+  },
+  itemIconText: {
+    color: "#FFFFFF",
+    fontSize: 20,
+    marginRight: 12,
+    width: 24,
+    textAlign: "center",
+  },
+  itemText: {
+    color: "#ffffff",
+    fontSize: 15,
+    fontWeight: "500",
+    flex: 1,
+  },
+  itemTextSelected: {
+    fontWeight: "bold",
+  },
+  checkmark: {
+    color: "#30d158",
+    marginLeft: 8,
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+  chevronWrapper: {
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 16,
+  },
+  chevron: {
+    color: "#8e8e93",
+    fontSize: 20,
+    fontWeight: "300",
+  },
+  secondaryActionButton: {
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    borderLeftWidth: 1,
+    borderLeftColor: "#2a2a2a",
+  },
+  secondaryActionButtonPressed: {
+    backgroundColor: "#333333",
+  },
+  secondaryActionText: {
+    color: "#aeaeb2",
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+});
+
+export interface ActionItemProps {
+  item: MenuItem;
+  onPress?: () => void;
+  onSecondaryPress?: () => void;
+}
+
+export const ActionItem: React.FC<ActionItemProps> = ({
+  item,
+  onPress,
+  onSecondaryPress,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const hasSub =
+    (item.submenu && item.submenu.length > 0) ||
+    (item.action && isPresentSubMenuAction(item.action));
+
+  const hasSecondary = !!item.secondaryAction;
+  const isSelected = !!item.isSelected;
+
+  // Determine if icon is a remote image URI or text/emoji
+  const isIconUri =
+    item.icon &&
+    (item.icon.startsWith("http") ||
+      item.icon.startsWith("file") ||
+      item.icon.includes("/") ||
+      item.icon.includes("."));
+
+  return (
+    <View style={styles.itemRowContainer}>
+      <Pressable
+        style={({ pressed }) => [
+          styles.itemMainPart,
+          (pressed || isFocused) && styles.itemMainPartPressed,
+        ]}
+        onPress={onPress}
+        onPressIn={() => setIsFocused(true)}
+        onPressOut={() => setIsFocused(false)}
+      >
+        {item.icon ? (
+          isIconUri ? (
+            <Image source={{ uri: item.icon }} style={styles.itemIconImage} />
+          ) : (
+            <Text style={styles.itemIconText}>{item.icon}</Text>
+          )
+        ) : null}
+
+        <Text style={[styles.itemText, isSelected && styles.itemTextSelected]}>
+          {item.title}
+        </Text>
+
+        {isSelected && !hasSecondary ? (
+          <Text style={styles.checkmark}>✓</Text>
+        ) : null}
+      </Pressable>
+
+      {hasSecondary ? (
+        <Pressable
+          onPress={onSecondaryPress}
+          style={({ pressed }) => [
+            styles.secondaryActionButton,
+            pressed && styles.secondaryActionButtonPressed,
+          ]}
+        >
+          <Text style={styles.secondaryActionText}>
+            {item.secondaryAction?.icon || "•••"}
+          </Text>
+        </Pressable>
+      ) : hasSub ? (
+        <View style={styles.chevronWrapper}>
+          <Text style={styles.chevron}>›</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+};

package/modalState/components/BottomSheetHeader.tsx

@@ -0,0 +1,245 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  ActivityIndicator,
+} from "react-native";
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: "#262626",
+    paddingVertical: 12,
+  },
+  navBarBorder: {
+    borderBottomWidth: 1,
+    borderBottomColor: "#333333",
+  },
+  headerGutter16: {
+    paddingHorizontal: 16,
+  },
+  headerGutter12: {
+    paddingHorizontal: 12,
+  },
+  headerTitle: {
+    color: "#FFFFFF",
+    fontWeight: "bold",
+    fontSize: 16,
+    textAlign: "center",
+  },
+  headerTitleCenter: {
+    fontSize: 17,
+    flex: 1,
+    textAlign: "center",
+  },
+  headerTitleSection: {
+    color: "#aaaaaa",
+    fontSize: 13,
+    fontWeight: "600",
+    textTransform: "uppercase",
+  },
+  titleWrapper: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  subtitle: {
+    color: "#aaaaaa",
+    fontSize: 11,
+    marginTop: 2,
+    textAlign: "center",
+  },
+  backButton: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 6,
+    backgroundColor: "#333333",
+    width: 70,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  backButtonText: {
+    color: "#ffffff",
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  closeButton: {
+    width: 44,
+    height: 44,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  closeButtonText: {
+    color: "#FFFFFF",
+    fontSize: 18,
+  },
+  headerActionButton: {
+    backgroundColor: "#3e3e3e",
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderRadius: 16,
+    minWidth: 70,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  headerActionText: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+    fontSize: 14,
+  },
+  navSpacer: {
+    width: 70,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  pressedState: {
+    opacity: 0.7,
+  },
+});
+
+export interface BottomSheetHeaderProps {
+  variant?: "single" | "actions" | "section";
+  title: string;
+  subtitle?: string;
+  onClose?: () => void;
+  onBack?: () => void;
+  onCancel?: () => void;
+  onDone?: () => void;
+  onClear?: () => void;
+  isLoading?: boolean;
+}
+
+export const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({
+  variant = "single",
+  title,
+  subtitle,
+  onClose,
+  onBack,
+  onCancel,
+  onDone,
+  onClear,
+  isLoading = false,
+}) => {
+  if (variant === "actions") {
+    return (
+      <View
+        style={[
+          styles.headerContainer,
+          styles.headerGutter12,
+          styles.navBarBorder,
+        ]}
+      >
+        <Pressable
+          style={({ pressed }) => [
+            styles.headerActionButton,
+            pressed && styles.pressedState,
+          ]}
+          onPress={onCancel}
+        >
+          <Text style={styles.headerActionText}>Cancel</Text>
+        </Pressable>
+        <View style={styles.titleWrapper}>
+          <Text
+            numberOfLines={1}
+            style={[styles.headerTitle, styles.headerTitleCenter]}
+          >
+            {title}
+          </Text>
+          {subtitle ? (
+            <Text numberOfLines={1} style={styles.subtitle}>
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
+        <Pressable
+          style={({ pressed }) => [
+            styles.headerActionButton,
+            pressed && styles.pressedState,
+          ]}
+          onPress={onDone}
+        >
+          <Text style={styles.headerActionText}>Done</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  if (variant === "section") {
+    return (
+      <View style={[styles.headerContainer, styles.headerGutter12]}>
+        <Text style={[styles.headerTitle, styles.headerTitleSection]}>
+          {title}
+        </Text>
+        {onClear ? (
+          <Pressable
+            style={({ pressed }) => [
+              styles.headerActionButton,
+              pressed && styles.pressedState,
+            ]}
+            onPress={onClear}
+          >
+            <Text style={styles.headerActionText}>Clear</Text>
+          </Pressable>
+        ) : null}
+      </View>
+    );
+  }
+
+  // Default: Single Line with Back and Close button options
+  return (
+    <View
+      style={[
+        styles.headerContainer,
+        styles.headerGutter16,
+        styles.navBarBorder,
+      ]}
+    >
+      {onBack ? (
+        <Pressable
+          onPress={onBack}
+          style={({ pressed }) => [
+            styles.backButton,
+            pressed && styles.pressedState,
+          ]}
+        >
+          <Text style={styles.backButtonText}>‹ Back</Text>
+        </Pressable>
+      ) : (
+        <View style={styles.navSpacer} />
+      )}
+
+      <View style={styles.titleWrapper}>
+        <Text numberOfLines={1} style={styles.headerTitle}>
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text numberOfLines={1} style={styles.subtitle}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+
+      {isLoading ? (
+        <View style={styles.navSpacer}>
+          <ActivityIndicator size="small" color="#aaaaaa" />
+        </View>
+      ) : onClose ? (
+        <Pressable
+          style={({ pressed }) => [
+            styles.closeButton,
+            pressed && styles.pressedState,
+          ]}
+          onPress={onClose}
+        >
+          <Text style={styles.closeButtonText}>✕</Text>
+        </Pressable>
+      ) : (
+        <View style={styles.navSpacer} />
+      )}
+    </View>
+  );
+};