@applicaster/zapp-react-native-utils 16.0.0-alpha.6861239588 → 16.0.0-alpha.6918106967

package/manifestUtils/modalBlocks.js

@@ -0,0 +1,304 @@
+function getModalBlockStyles({ prefix }) {
+  return [
+    {
+      group: true,
+      label: "Header Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_backgroundColor`,
+          label: "Header Background Color",
+          initial_value: "rgba(30,30,30,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_borderBottomColor`,
+          label: "Header Border Bottom Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_container_default_borderBottomSize`,
+          label: "Header Border Bottom Size",
+          initial_value: 0,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_title_default_fontColor`,
+          label: "Header Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_fontSize`,
+          label: "Header Title Font Size",
+          initial_value: 18,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_lineHeight`,
+          label: "Header Title Line Height",
+          initial_value: 32,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_default_backgroundColor`,
+          label: "Close Button Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_hover_backgroundColor`,
+          label: "Close Button Hover Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_header_close_button_asset`,
+          label: "Close Button Icon Asset",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_backgroundColor`,
+          label: "Header Action Button Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_hover_backgroundColor`,
+          label: "Header Action Button Hover Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_fontColor`,
+          label: "Header Action Button Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_fontSize`,
+          label: "Header Action Button Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_borderRadius`,
+          label: "Header Action Button Radius",
+          initial_value: 16,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Item Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_default_backgroundColor`,
+          label: "Item Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_focus_backgroundColor`,
+          label: "Item Focus/Touch Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_borderRadius`,
+          label: "Item Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingTop`,
+          label: "Item Padding Top",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingBottom`,
+          label: "Item Padding Bottom",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingLeft`,
+          label: "Item Padding Left",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingRight`,
+          label: "Item Padding Right",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_width`,
+          label: "Item Image Width",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_height`,
+          label: "Item Image Height",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_borderRadius`,
+          label: "Item Image Radius",
+          initial_value: 6,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_1_default_fontColor`,
+          label: "Item Title Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_1_default_fontSize`,
+          label: "Item Title Font Size",
+          initial_value: 15,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_2_default_fontColor`,
+          label: "Item Subtitle Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_2_default_fontSize`,
+          label: "Item Subtitle Font Size",
+          initial_value: 13,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Action Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_default_backgroundColor`,
+          label: "Action Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_hover_backgroundColor`,
+          label: "Action Hover/Touch Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_borderRadius`,
+          label: "Action Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingTop`,
+          label: "Action Padding Top",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingBottom`,
+          label: "Action Padding Bottom",
+          initial_value: 14,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_title_default_fontColor`,
+          label: "Action Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_title_default_fontSize`,
+          label: "Action Title Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_action_trailing_icon_chevron_asset`,
+          label: "Action Chevron Asset",
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Button Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_default_backgroundColor`,
+          label: "Button Background Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_focus_backgroundColor`,
+          label: "Button Focus Color",
+          initial_value: "#E0E0E0",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_inactive_backgroundColor`,
+          label: "Button Inactive Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_background_default_borderRadius`,
+          label: "Button Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_title_default_fontColor`,
+          label: "Button Title Color",
+          initial_value: "#000000",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_title_default_fontSize`,
+          label: "Button Title Font Size",
+          initial_value: 15,
+        },
+      ],
+    },
+  ];
+}
+
+function getModalLocalizations({ prefix }) {
+  return [
+    {
+      type: "text_input",
+      label: "Queue Header Title",
+      key: `${prefix}_header_title`,
+      initial_value: "Queue",
+    },
+    {
+      type: "text_input",
+      label: "Go To Queue Action Label",
+      key: `${prefix}_label_go_to_queue`,
+      initial_value: "Go To Queue",
+    },
+  ];
+}
+
+module.exports = {
+  getModalBlockStyles,
+  getModalLocalizations,
+};

package/modalState/ContentViewModel.ts

@@ -0,0 +1,113 @@
+import { BehaviorSubject, Observable } from "rxjs";
+import {
+  Content,
+  MenuItem,
+  SelectionBehavior,
+  DynamicCollectionOptions,
+} from "./types";
+import { loadItemsFromSource } from "../actionsExecutor/actions/openBottomSheet";
+import { resolveEditableCollection } from "./EditableCollectionRegistry";
+import { EditableCollection } from "./EditableCollection";
+
+export interface ContentState {
+  items: MenuItem[];
+  isLoading: boolean;
+  error?: Error | string;
+  role?: string;
+  behavior?: SelectionBehavior;
+  dynamicCollection?: DynamicCollectionOptions;
+  themePluginId?: string;
+}
+
+export class ContentViewModel {
+  private state$: BehaviorSubject<ContentState>;
+  readonly itemsUrl?: string;
+  public editableCollection: EditableCollection | null = null;
+  private content: Content;
+
+  constructor(content: Content) {
+    this.content = content;
+    this.itemsUrl = content.itemsUrl;
+
+    this.state$ = new BehaviorSubject<ContentState>({
+      items: content.items || [],
+      isLoading: false,
+      role: content.role,
+      behavior: content.behavior,
+      dynamicCollection: content.dynamicCollection,
+      themePluginId: content.themePluginId,
+    });
+
+    this.initEditableCollection(content);
+
+    if (this.itemsUrl && this.state$.value.items.length === 0) {
+      this.refetch();
+    }
+  }
+
+  private initEditableCollection(content: Content) {
+    this.editableCollection = resolveEditableCollection(content, this.refetch);
+  }
+
+  getState = (): ContentState => this.state$.value;
+
+  get stateObservable(): Observable<ContentState> {
+    return this.state$.asObservable();
+  }
+
+  subscribe = (listener: (state: ContentState) => void) => {
+    const subscription = this.state$.subscribe(listener);
+
+    return () => subscription.unsubscribe();
+  };
+
+  private updateState(partialState: Partial<ContentState>) {
+    this.state$.next({ ...this.state$.value, ...partialState });
+  }
+
+  refetch = async () => {
+    if (!this.itemsUrl) return;
+
+    this.updateState({ isLoading: true, error: undefined });
+
+    try {
+      const separator = this.itemsUrl.includes("?") ? "&" : "?";
+      const cacheBustedUrl = `${this.itemsUrl}${separator}_t=${Date.now()}`;
+
+      const { items, role, behavior, dynamicCollection } =
+        await loadItemsFromSource(cacheBustedUrl);
+
+      this.content = {
+        ...this.content,
+        items,
+        role,
+        behavior,
+        dynamicCollection,
+      };
+
+      this.updateState({
+        items,
+        role,
+        behavior,
+        dynamicCollection,
+        isLoading: false,
+      });
+
+      if (this.editableCollection) {
+        // Reuse the existing collection instance. Pushing the freshly loaded
+        // server items replaces any optimistic local state with the
+        // authoritative result (and rolls forward a successful mutation).
+        this.editableCollection.sync?.(items);
+      } else {
+        // The collection may only become resolvable once options arrive from
+        // the feed (e.g. inline content had none). Create it lazily here.
+        this.initEditableCollection(this.content);
+      }
+    } catch (err) {
+      this.updateState({
+        error: err?.message || "Failed to load",
+        isLoading: false,
+      });
+    }
+  };
+}

package/modalState/EditableCollection.ts

@@ -0,0 +1,17 @@
+import { Observable } from "rxjs";
+import { MenuItem, Operation } from "./types";
+
+export interface EditableCollection {
+  items$: Observable<MenuItem[]>;
+  operations: Operation[];
+  add?(item?: MenuItem): void | Promise<void>;
+  remove?(index: number): void | Promise<void>;
+  move?(itemIds: string[]): void | Promise<void>;
+  deleteCollection?(): void | Promise<void>;
+  /**
+   * Push authoritative items (e.g. a fresh server feed after a mutation) into
+   * the collection, replacing any optimistic local state. Called by the
+   * ContentViewModel on refetch so the instance is reused instead of recreated.
+   */
+  sync?(items: MenuItem[]): void;
+}

package/modalState/EditableCollectionRegistry.ts

@@ -0,0 +1,51 @@
+import { Content } from "./types";
+import { EditableCollection } from "./EditableCollection";
+import { RemoteEditableCollection } from "./RemoteEditableCollection";
+import { createLogger } from "../logger";
+
+const { log_error } = createLogger({
+  subsystem: "modalState",
+  category: "EditableCollectionRegistry",
+});
+
+type ProviderFactory = () => EditableCollection;
+
+export class EditableCollectionRegistry {
+  private static providers: Record<string, ProviderFactory> = {};
+
+  static register(token: string, factory: ProviderFactory) {
+    this.providers[token] = factory;
+  }
+
+  static getProvider(token: string): EditableCollection | null {
+    const factory = this.providers[token];
+
+    return factory ? factory() : null;
+  }
+}
+
+export function resolveEditableCollection(
+  content: Content,
+  refetch: () => Promise<void>
+): EditableCollection | null {
+  const options = content.dynamicCollection;
+  if (!options) return null;
+
+  if (options.provider) {
+    const provider = EditableCollectionRegistry.getProvider(options.provider);
+
+    if (!provider) {
+      log_error(
+        `No EditableCollection provider registered for token "${options.provider}"`
+      );
+    }
+
+    return provider;
+  }
+
+  if (options.postUrl) {
+    return new RemoteEditableCollection(content, refetch);
+  }
+
+  return null;
+}

package/modalState/ModalOrchestrator.ts

@@ -0,0 +1,211 @@
+import { dismissModal, modalStore, openBottomSheetModal } from "./store";
+import {
+  getMenuItemActions,
+  isPresentSubMenuAction,
+  Menu,
+  MenuItem,
+  PresentSubMenuAction,
+} from "./types";
+import { ContentViewModel } from "./ContentViewModel";
+
+export type { Menu, MenuItem };
+
+export { isPresentSubMenuAction, getMenuItemActions };
+
+/**
+ * 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,
+      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 async (item: MenuItem) => {
+      if (onItemPress) {
+        await onItemPress(item);
+      }
+
+      const actions = getMenuItemActions(item);
+
+      const subMenuAction = actions.find(isPresentSubMenuAction) as
+        | PresentSubMenuAction
+        | undefined;
+
+      if (subMenuAction) {
+        // Navigate deeper into the sub-menu
+        this.open(subMenuAction.menu, onItemPress);
+      }
+    };
+  }
+
+  /**
+   * 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();