@applicaster/zapp-react-native-utils 16.0.0-rc.7 → 16.0.0-rc.71

package/modalState/__tests__/useBottomSheetContent.test.ts

@@ -0,0 +1,349 @@
+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/index.ts

@@ -1,83 +1,30 @@
-import { useStore, createStore } from "zustand";
-
-interface ModalState {
-  visible: boolean;
-  screen: any;
-  options: Record<string, unknown>;
-  props: Record<string, unknown>;
-}
-
-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) => ({
-  modalState: initialModalState,
-  setModalState: (newState) =>
-    set((state) => ({
-      modalState: { ...state.modalState, ...newState },
-    })),
-  openModal: ({ item, options = {}, props }: OpenModalArg) =>
-    set({
-      modalState: {
-        visible: true,
-        screen: item,
-        options: {
-          animated: true,
-          animationType: "slide",
-          onShow: () => {},
-          presentationStyle: "overFullScreen",
-          transparent: true,
-          ...options,
-          onDismiss: () => set({ modalState: initialModalState }),
-          onRequestClose: () => set({ modalState: initialModalState }),
-        },
-        props,
-      },
-    }),
-  dismissModal: () => 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);
+export {
+  modalStore,
+  useModalStore,
+  openModal,
+  dismissModal,
+  openBottomSheetModal,
+  useModalStoreState,
+} from "./store";
+
+export type { ModalState, ModalStore } from "./store";
+
+export { modalOrchestrator } from "./ModalOrchestrator";
+
+export { ContentViewModel } from "./ContentViewModel";
+
+export type {
+  Menu,
+  MenuItem,
+  Header,
+  Content,
+  Action,
+  PresentSubMenuAction,
+  SecondaryAction,
+  SelectMode,
+  SelectionBehavior,
+} from "./types";
+
+export { isPresentSubMenuAction, OPERATIONS, hasOperation } from "./types";
+
+export { useBottomSheetContent } from "./useBottomSheetContent";

package/modalState/store.ts

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

@@ -0,0 +1,133 @@
+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;
+  // When item represents an audio item, clicking on it will start playback
+  // and secondary action will allow to add it to queue or playlist
+  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;
+}