@applicaster/zapp-react-native-utils 15.1.13-alpha.1034774223 → 15.1.13

package/modalState/__tests__/useBottomSheetContent.test.ts

@@ -1,349 +0,0 @@
-import { renderHook, act, waitFor } from "@testing-library/react-native";
-
-import { modalOrchestrator } from "../ModalOrchestrator";
-import { MenuItem } from "../types";
-import { useBottomSheetContent } from "../useBottomSheetContent";
-import type { ContentState } from "../ContentViewModel";
-
-jest.mock("../ModalOrchestrator", () => ({
-  isPresentSubMenuAction: jest.requireActual("../types").isPresentSubMenuAction,
-  modalOrchestrator: {
-    canGoBack: false,
-    back: jest.fn(),
-    close: jest.fn(),
-  },
-}));
-
-type MockViewModel = {
-  getState: jest.Mock<ContentState, []>;
-  subscribe: jest.Mock<(listener: (state: ContentState) => void) => () => void>;
-  refetch: jest.Mock<Promise<void>, []>;
-};
-
-const createViewModel = (
-  initialState: ContentState
-): MockViewModel & {
-  emit: (nextState: ContentState) => void;
-} => {
-  let listener: ((state: ContentState) => void) | undefined;
-  const unsubscribe = jest.fn();
-
-  const viewModel: MockViewModel & { emit: (nextState: ContentState) => void } =
-    {
-      getState: jest.fn(() => initialState),
-      subscribe: jest.fn((nextListener) => {
-        listener = nextListener;
-
-        return unsubscribe;
-      }),
-      refetch: jest.fn().mockResolvedValue(undefined),
-      emit: (nextState) => {
-        listener?.(nextState);
-      },
-    };
-
-  return viewModel;
-};
-
-describe("useBottomSheetContent", () => {
-  const onPress = jest.fn().mockResolvedValue(undefined);
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    modalOrchestrator.canGoBack = false;
-  });
-
-  it("returns initial state from the view model", () => {
-    const viewModel = createViewModel({
-      items: [{ title: "Item 1" }],
-      isLoading: false,
-    });
-
-    const { result } = renderHook(() =>
-      useBottomSheetContent({ viewModel: viewModel as any, onPress })
-    );
-
-    expect(result.current.items).toEqual([{ title: "Item 1" }]);
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.error).toBeUndefined();
-    expect(result.current.showCentralLoading).toBe(false);
-    expect(result.current.canGoBack).toBe(false);
-    expect(viewModel.subscribe).toHaveBeenCalledTimes(1);
-  });
-
-  it("computes showCentralLoading when loading with no items", () => {
-    const viewModel = createViewModel({
-      items: [],
-      isLoading: true,
-    });
-
-    const { result } = renderHook(() =>
-      useBottomSheetContent({ viewModel: viewModel as any, onPress })
-    );
-
-    expect(result.current.showCentralLoading).toBe(true);
-  });
-
-  it("does not show central loading when items exist while loading", () => {
-    const viewModel = createViewModel({
-      items: [{ title: "Item 1" }],
-      isLoading: true,
-    });
-
-    const { result } = renderHook(() =>
-      useBottomSheetContent({ viewModel: viewModel as any, onPress })
-    );
-
-    expect(result.current.showCentralLoading).toBe(false);
-  });
-
-  it("updates when the view model emits new state", () => {
-    const viewModel = createViewModel({
-      items: [],
-      isLoading: true,
-    });
-
-    const { result } = renderHook(() =>
-      useBottomSheetContent({ viewModel: viewModel as any, onPress })
-    );
-
-    act(() => {
-      viewModel.emit({
-        items: [{ title: "Fetched Item" }],
-        isLoading: false,
-      });
-    });
-
-    expect(result.current.items).toEqual([{ title: "Fetched Item" }]);
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.showCentralLoading).toBe(false);
-  });
-
-  it("exposes error state from the view model", () => {
-    const viewModel = createViewModel({
-      items: [],
-      isLoading: false,
-      error: "Network Error",
-    });
-
-    const { result } = renderHook(() =>
-      useBottomSheetContent({ viewModel: viewModel as any, onPress })
-    );
-
-    expect(result.current.error).toBe("Network Error");
-  });
-
-  it("unsubscribes from the view model on unmount", () => {
-    const viewModel = createViewModel({
-      items: [],
-      isLoading: false,
-    });
-
-    const { unmount } = renderHook(() =>
-      useBottomSheetContent({ viewModel: viewModel as any, onPress })
-    );
-
-    const unsubscribeFn = viewModel.subscribe.mock.results[0]
-      .value as jest.Mock;
-
-    unmount();
-
-    expect(unsubscribeFn).toHaveBeenCalledTimes(1);
-  });
-
-  describe("handleItemPress", () => {
-    it("delegates to onPress and refetches for leaf items", async () => {
-      const viewModel = createViewModel({
-        items: [{ title: "Leaf" }],
-        isLoading: false,
-      });
-
-      const item: MenuItem = { title: "Leaf" };
-
-      const { result } = renderHook(() =>
-        useBottomSheetContent({ viewModel: viewModel as any, onPress })
-      );
-
-      await act(async () => {
-        await result.current.handleItemPress(item);
-      });
-
-      expect(onPress).toHaveBeenCalledWith(item);
-      expect(viewModel.refetch).toHaveBeenCalledTimes(1);
-    });
-
-    it("does not refetch when the item opens a present submenu action", async () => {
-      const viewModel = createViewModel({
-        items: [{ title: "Parent" }],
-        isLoading: false,
-      });
-
-      const item: MenuItem = {
-        title: "Parent",
-        action: {
-          type: "presentSubMenu",
-          menu: {
-            content: {
-              title: "Submenu",
-              items: [{ title: "Child" }],
-            },
-          },
-        },
-      };
-
-      const { result } = renderHook(() =>
-        useBottomSheetContent({ viewModel: viewModel as any, onPress })
-      );
-
-      await act(async () => {
-        await result.current.handleItemPress(item);
-      });
-
-      expect(onPress).toHaveBeenCalledWith(item);
-      expect(viewModel.refetch).not.toHaveBeenCalled();
-    });
-
-    it("awaits onPress before refetching", async () => {
-      const viewModel = createViewModel({
-        items: [{ title: "Leaf" }],
-        isLoading: false,
-      });
-
-      const item: MenuItem = { title: "Leaf" };
-      const callOrder: string[] = [];
-
-      onPress.mockImplementation(async () => {
-        callOrder.push("onPress");
-      });
-
-      viewModel.refetch.mockImplementation(async () => {
-        callOrder.push("refetch");
-      });
-
-      const { result } = renderHook(() =>
-        useBottomSheetContent({ viewModel: viewModel as any, onPress })
-      );
-
-      await act(async () => {
-        await result.current.handleItemPress(item);
-      });
-
-      expect(callOrder).toEqual(["onPress", "refetch"]);
-    });
-  });
-
-  describe("goBackOrClose", () => {
-    it("calls back when the orchestrator can go back", () => {
-      modalOrchestrator.canGoBack = true;
-
-      const viewModel = createViewModel({
-        items: [],
-        isLoading: false,
-      });
-
-      const { result } = renderHook(() =>
-        useBottomSheetContent({ viewModel: viewModel as any, onPress })
-      );
-
-      act(() => {
-        result.current.goBackOrClose();
-      });
-
-      expect(modalOrchestrator.back).toHaveBeenCalledTimes(1);
-      expect(modalOrchestrator.close).not.toHaveBeenCalled();
-    });
-
-    it("calls close when the orchestrator cannot go back", () => {
-      modalOrchestrator.canGoBack = false;
-
-      const viewModel = createViewModel({
-        items: [],
-        isLoading: false,
-      });
-
-      const { result } = renderHook(() =>
-        useBottomSheetContent({ viewModel: viewModel as any, onPress })
-      );
-
-      act(() => {
-        result.current.goBackOrClose();
-      });
-
-      expect(modalOrchestrator.close).toHaveBeenCalledTimes(1);
-      expect(modalOrchestrator.back).not.toHaveBeenCalled();
-    });
-  });
-
-  it("exposes close from the modal orchestrator", () => {
-    const viewModel = createViewModel({
-      items: [],
-      isLoading: false,
-    });
-
-    const { result } = renderHook(() =>
-      useBottomSheetContent({ viewModel: viewModel as any, onPress })
-    );
-
-    act(() => {
-      result.current.close();
-    });
-
-    expect(modalOrchestrator.close).toHaveBeenCalledTimes(1);
-  });
-
-  it("reflects canGoBack from the modal orchestrator", () => {
-    modalOrchestrator.canGoBack = true;
-
-    const viewModel = createViewModel({
-      items: [],
-      isLoading: false,
-    });
-
-    const { result } = renderHook(() =>
-      useBottomSheetContent({ viewModel: viewModel as any, onPress })
-    );
-
-    expect(result.current.canGoBack).toBe(true);
-  });
-
-  it("resubscribes when the view model instance changes", async () => {
-    const firstViewModel = createViewModel({
-      items: [{ title: "First" }],
-      isLoading: false,
-    });
-
-    const secondViewModel = createViewModel({
-      items: [{ title: "Second" }],
-      isLoading: false,
-    });
-
-    const { result, rerender } = renderHook(
-      ({ viewModel }) =>
-        useBottomSheetContent({ viewModel: viewModel as any, onPress }),
-      {
-        initialProps: { viewModel: firstViewModel },
-      }
-    );
-
-    expect(result.current.items).toEqual([{ title: "First" }]);
-
-    rerender({ viewModel: secondViewModel });
-
-    expect(
-      firstViewModel.subscribe.mock.results[0].value
-    ).toHaveBeenCalledTimes(1);
-
-    expect(secondViewModel.subscribe).toHaveBeenCalledTimes(1);
-
-    act(() => {
-      secondViewModel.emit({
-        items: [{ title: "Updated Second" }],
-        isLoading: false,
-      });
-    });
-
-    await waitFor(() => {
-      expect(result.current.items).toEqual([{ title: "Updated Second" }]);
-    });
-  });
-});

package/modalState/store.ts

@@ -1,102 +0,0 @@
-import { createStore, useStore } from "zustand";
-
-export interface ModalState {
-  visible: boolean;
-  screen: any;
-  options: Record<string, unknown>;
-  props: Record<string, unknown>;
-}
-
-export interface ModalStore {
-  modalState: ModalState;
-  setModalState: (newState: Partial<ModalState>) => void;
-  openModal: (
-    item: any,
-    options?: Record<string, unknown>,
-    props?: Record<string, unknown>
-  ) => void;
-  dismissModal: () => void;
-}
-
-const initialModalState: ModalState = {
-  visible: false,
-  screen: null,
-  options: {},
-  props: {},
-};
-
-export const modalStore = createStore<ModalStore>((set, get) => ({
-  modalState: initialModalState,
-  setModalState: (newState) =>
-    set((state) => ({
-      modalState: { ...state.modalState, ...newState },
-    })),
-  openModal: ({ item, options = {}, props }: OpenModalArg) => {
-    const resetStore = () => set({ modalState: initialModalState });
-    const { onDismiss, onRequestClose, ...restOptions } = options as any;
-
-    set({
-      modalState: {
-        visible: true,
-        screen: item,
-        options: {
-          animated: true,
-          animationType: "slide",
-          onShow: () => {},
-          presentationStyle: "overFullScreen",
-          transparent: true,
-          ...restOptions,
-          // Compose caller-provided callbacks with the store reset so both run
-          onDismiss: () => {
-            resetStore();
-            onDismiss?.();
-          },
-          onRequestClose: () => {
-            resetStore();
-            onRequestClose?.();
-          },
-        },
-        props,
-      },
-    });
-  },
-  dismissModal: () => {
-    const onDismiss = (get().modalState?.options as any)?.onDismiss;
-
-    if (typeof onDismiss === "function") {
-      onDismiss();
-    } else {
-      set({ modalState: initialModalState });
-    }
-  },
-}));
-
-export const useModalStore = <T>(selector: (state: ModalStore) => T) =>
-  useStore(modalStore, selector);
-
-export const openModal = modalStore.getInitialState().openModal;
-
-export const dismissModal = modalStore.getInitialState().dismissModal;
-
-export const openBottomSheetModal = ({
-  ModalBottomSheetContent,
-  modalBottomSheetContentProps,
-  props = {},
-  options = {},
-}: OpenModalBottomSheetArgs) => {
-  openModal({
-    item: {
-      ModalBottomSheetContent,
-      modalBottomSheetContentProps,
-    },
-    props,
-    options: {
-      animationType: "none",
-      animated: false,
-      ...options,
-    },
-  });
-};
-
-export const useModalStoreState = (): ModalState =>
-  useModalStore<ModalState>((state) => state.modalState);

package/modalState/types.ts

@@ -1,159 +0,0 @@
-export interface Header {
-  title: string;
-  subtitle?: string;
-  icon?: string;
-}
-
-export interface Action {
-  type: string;
-  payload?: any;
-  options?: any;
-}
-
-// Represented as 3 dots icon on top menu (opens new second level menu on desktop
-// or a new bottom sheet on mobile)
-export interface PresentSubMenuAction extends Action {
-  menu: Menu;
-}
-
-export interface SecondaryAction {
-  action: Action | PresentSubMenuAction;
-  icon?: string;
-}
-
-/**
- * A group of actions attached to an entry, keyed by a button alias
- * (e.g. "remove_item", "reorder_item"). Injected by the feed decorator and
- * dispatched by the remote EditableCollection when an operation runs.
- */
-export interface EntryActionGroup {
-  button?: { alias?: string };
-  actions?: Action[];
-}
-
-export interface MenuItem {
-  id: string;
-  title: string;
-  summary?: string;
-  icon?: string;
-  isSelected?: boolean;
-  actions?: (Action | PresentSubMenuAction)[];
-  /** @deprecated Use `actions` array instead. Maintained for backwards compatibility. */
-  action?: Action | PresentSubMenuAction;
-  secondaryAction?: SecondaryAction;
-  trailingButton?: any;
-  entryActions?: EntryActionGroup[];
-}
-
-export type SelectMode = "single" | "multi" | "none";
-
-export interface SelectionBehavior {
-  selectMode?: SelectMode;
-  currentSelection?: string[];
-  selector?: string;
-}
-
-/**
- * Operations that act on a specific item in the collection.
- * Their action payloads are looked up on the item's entryActions (e.g. "remove_item", "reorder_item").
- */
-export type ItemScopedOperation = "remove" | "reorder";
-
-/**
- * Operations that act on the collection as a whole.
- * Their action payloads are looked up on dynamicCollection.events (e.g. events.add, events.clearAll, events.delete).
- */
-export type CollectionScopedOperation = "add" | "clearAll" | "delete";
-
-/**
- * UI display or behavior flags that do not require action payloads.
- */
-export type UIOperation = "nowPlaying";
-
-export const OPERATIONS = {
-  REMOVE: "remove",
-  REORDER: "reorder",
-  ADD: "add",
-  CLEAR_ALL: "clearAll",
-  DELETE: "delete",
-  NOW_PLAYING: "nowPlaying",
-} as const;
-
-export function hasOperation(
-  operations: string[] | undefined,
-  target: string
-): boolean {
-  if (!Array.isArray(operations)) return false;
-
-  const targetLower = target.toLowerCase();
-
-  return operations.some(
-    (op) => typeof op === "string" && op.toLowerCase() === targetLower
-  );
-}
-
-export type Operation =
-  | ItemScopedOperation
-  | CollectionScopedOperation
-  | UIOperation;
-
-export interface DynamicCollectionOptions {
-  operations: Operation[];
-  postUrl?: string;
-  provider?: string;
-  /**
-   * Action handlers for CollectionScopedOperations (e.g. "add", "clearAll", "delete").
-   */
-  events?: Record<CollectionScopedOperation | string, Action[]>;
-}
-
-export interface Content {
-  title: string;
-  stickyTitle?: boolean;
-  items: MenuItem[];
-  itemsUrl?: string;
-  action?: Action;
-  role?: string;
-  behavior?: SelectionBehavior;
-  dynamicCollection?: DynamicCollectionOptions;
-  themePluginId?: string;
-  styleOverrides?: Record<string, any>;
-}
-
-export interface Menu {
-  header?: Header;
-  content: Content;
-  closeButton?: boolean;
-}
-
-export function isPresentSubMenuAction(
-  action: any
-): action is PresentSubMenuAction {
-  return !!action && typeof action === "object" && "menu" in action;
-}
-
-/**
- * Normalizes an item's action/actions into an array of Action items.
- * Supports canonical `actions: Action[]` and backwards-compatible `action: Action | Action[]`.
- */
-export function getMenuItemActions(
-  item?: Partial<MenuItem> | null
-): (Action | PresentSubMenuAction)[] {
-  if (!item) {
-    return [];
-  }
-
-  if (Array.isArray(item.actions) && item.actions.length > 0) {
-    return item.actions;
-  }
-
-  if (Array.isArray((item as any).action)) {
-    return (item as any).action;
-  }
-
-  if (item.action) {
-    return [item.action];
-  }
-
-  return [];
-}

package/modalState/useBottomSheetContent.ts

@@ -1,104 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-
-import { MenuItem, modalOrchestrator } from "./ModalOrchestrator";
-
-import { ContentViewModel } from "./ContentViewModel";
-import {
-  DynamicCollectionOptions,
-  getMenuItemActions,
-  isPresentSubMenuAction,
-  SelectionBehavior,
-} from "./types";
-import type { EditableCollection } from "./EditableCollection";
-
-type Props = {
-  viewModel?: ContentViewModel | null;
-  onPress: (item: MenuItem) => void | Promise<void>;
-};
-
-type Return = {
-  items: MenuItem[];
-  isLoading: boolean;
-  error?: Error | string;
-  showCentralLoading: boolean;
-  canGoBack: boolean;
-  handleItemPress: (item: MenuItem) => Promise<void>;
-  goBackOrClose: () => void;
-  close: () => void;
-  role?: string;
-  behavior?: SelectionBehavior;
-  dynamicCollection?: DynamicCollectionOptions;
-  editableCollection: EditableCollection | null;
-  themePluginId?: string;
-};
-
-export const useBottomSheetContent = (props: Props): Return => {
-  const { onPress, viewModel } = props;
-
-  const [state, setState] = useState(viewModel?.getState());
-
-  const [editableItems, setEditableItems] = useState<MenuItem[]>(
-    () => viewModel?.getState().items || []
-  );
-
-  // Subscribe to the viewModel state changes
-  useEffect(() => {
-    return viewModel?.subscribe((nextState) => {
-      setState(nextState);
-    });
-  }, [viewModel]);
-
-  // Subscribe to editable collection items
-  useEffect(() => {
-    if (viewModel?.editableCollection) {
-      const subscription =
-        viewModel.editableCollection.items$.subscribe(setEditableItems);
-
-      return () => subscription.unsubscribe();
-    }
-  }, [viewModel?.editableCollection]);
-
-  /**
-   * Handles an item press:
-   * - Delegates to the parent onPress (which runs the action and awaits it).
-   * - If the item was a leaf action (not a submenu), triggers viewModel.refetch()
-   *   so that checkmarks (isSelected) reflect the updated server state.
-   */
-  const handleItemPress = async (item: MenuItem) => {
-    const actions = getMenuItemActions(item);
-    const isSubMenu = actions.some(isPresentSubMenuAction);
-
-    await onPress(item);
-
-    if (!isSubMenu) {
-      await viewModel?.refetch();
-    }
-  };
-
-  const goBackOrClose = React.useCallback(() => {
-    if (modalOrchestrator.canGoBack) {
-      modalOrchestrator.back();
-    } else {
-      modalOrchestrator.close();
-    }
-  }, [modalOrchestrator.canGoBack]);
-
-  return {
-    items: viewModel?.editableCollection ? editableItems : state?.items,
-    isLoading: toBooleanWithDefaultFalse(state?.isLoading),
-    error: state?.error,
-    showCentralLoading: toBooleanWithDefaultFalse(
-      state?.isLoading && state?.items.length === 0
-    ),
-    canGoBack: modalOrchestrator.canGoBack,
-    handleItemPress,
-    goBackOrClose,
-    close: () => modalOrchestrator.close(),
-    role: state?.role,
-    behavior: state?.behavior,
-    dynamicCollection: state?.dynamicCollection,
-    editableCollection: viewModel?.editableCollection || null,
-    themePluginId: state?.themePluginId,
-  };
-};