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

package/modalState/ModalOrchestrator.ts

@@ -1,204 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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

@@ -1,245 +0,0 @@
-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>
-  );
-};