@applicaster/quick-brick-core 16.0.0-rc.8 → 16.0.0-rc.81

package/App/ModalProvider/ModalBottomSheet/hooks/__tests__/useKeyboardHeight.android.test.ts

@@ -0,0 +1,105 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { Keyboard } from "react-native";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isApplePlatform: () => false,
+}));
+
+// Import after mocks so module-level isApple resolves to false.
+// eslint-disable-next-line import/first
+import { useKeyboardHeight } from "../useKeyboardHeight";
+
+type KeyboardListener = (event?: {
+  endCoordinates: { height: number };
+}) => void;
+
+function setupKeyboardListenerMock() {
+  const listeners: Record<string, KeyboardListener> = {};
+  const removeMocks: Record<string, jest.Mock> = {};
+
+  const addListenerSpy = jest
+    .spyOn(Keyboard, "addListener")
+    .mockImplementation((event: string, callback: KeyboardListener) => {
+      listeners[event] = callback;
+
+      const remove = jest.fn();
+      removeMocks[event] = remove;
+
+      return { remove };
+    });
+
+  return { listeners, removeMocks, addListenerSpy };
+}
+
+describe("useKeyboardHeight (non-Apple platforms)", () => {
+  let listeners: Record<string, KeyboardListener>;
+  let removeMocks: Record<string, jest.Mock>;
+  let addListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    const mock = setupKeyboardListenerMock();
+    listeners = mock.listeners;
+    removeMocks = mock.removeMocks;
+    addListenerSpy = mock.addListenerSpy;
+  });
+
+  afterEach(() => {
+    addListenerSpy.mockRestore();
+  });
+
+  it("returns 0 initially and subscribes to didShow / didHide events", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    expect(result.current).toBe(0);
+    expect(addListenerSpy).toHaveBeenCalledTimes(2);
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardDidShow",
+      expect.any(Function)
+    );
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardDidHide",
+      expect.any(Function)
+    );
+  });
+
+  it("updates height when keyboardDidShow fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardDidShow?.({
+        endCoordinates: { height: 412 },
+      });
+    });
+
+    expect(result.current).toBe(412);
+  });
+
+  it("resets height to 0 when keyboardDidHide fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardDidShow?.({
+        endCoordinates: { height: 412 },
+      });
+    });
+
+    expect(result.current).toBe(412);
+
+    act(() => {
+      listeners.keyboardDidHide?.();
+    });
+
+    expect(result.current).toBe(0);
+  });
+
+  it("removes listeners on unmount", () => {
+    const { unmount } = renderHook(() => useKeyboardHeight());
+
+    unmount();
+
+    expect(removeMocks.keyboardDidShow).toHaveBeenCalledTimes(1);
+    expect(removeMocks.keyboardDidHide).toHaveBeenCalledTimes(1);
+  });
+});

package/App/ModalProvider/ModalBottomSheet/hooks/__tests__/useKeyboardHeight.test.ts

@@ -0,0 +1,102 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { Keyboard } from "react-native";
+import { useKeyboardHeight } from "../useKeyboardHeight";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isApplePlatform: () => true,
+}));
+
+type KeyboardListener = (event?: {
+  endCoordinates: { height: number };
+}) => void;
+
+function setupKeyboardListenerMock() {
+  const listeners: Record<string, KeyboardListener> = {};
+  const removeMocks: Record<string, jest.Mock> = {};
+
+  const addListenerSpy = jest
+    .spyOn(Keyboard, "addListener")
+    .mockImplementation((event: string, callback: KeyboardListener) => {
+      listeners[event] = callback;
+
+      const remove = jest.fn();
+      removeMocks[event] = remove;
+
+      return { remove };
+    });
+
+  return { listeners, removeMocks, addListenerSpy };
+}
+
+describe("useKeyboardHeight (Apple platforms)", () => {
+  let listeners: Record<string, KeyboardListener>;
+  let removeMocks: Record<string, jest.Mock>;
+  let addListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    const mock = setupKeyboardListenerMock();
+    listeners = mock.listeners;
+    removeMocks = mock.removeMocks;
+    addListenerSpy = mock.addListenerSpy;
+  });
+
+  afterEach(() => {
+    addListenerSpy.mockRestore();
+  });
+
+  it("returns 0 initially and subscribes to willShow / willHide events", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    expect(result.current).toBe(0);
+    expect(addListenerSpy).toHaveBeenCalledTimes(2);
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardWillShow",
+      expect.any(Function)
+    );
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardWillHide",
+      expect.any(Function)
+    );
+  });
+
+  it("updates height when keyboardWillShow fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardWillShow?.({
+        endCoordinates: { height: 336 },
+      });
+    });
+
+    expect(result.current).toBe(336);
+  });
+
+  it("resets height to 0 when keyboardWillHide fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardWillShow?.({
+        endCoordinates: { height: 280 },
+      });
+    });
+
+    expect(result.current).toBe(280);
+
+    act(() => {
+      listeners.keyboardWillHide?.();
+    });
+
+    expect(result.current).toBe(0);
+  });
+
+  it("removes listeners on unmount", () => {
+    const { unmount } = renderHook(() => useKeyboardHeight());
+
+    unmount();
+
+    expect(removeMocks.keyboardWillShow).toHaveBeenCalledTimes(1);
+    expect(removeMocks.keyboardWillHide).toHaveBeenCalledTimes(1);
+  });
+});

package/App/ModalProvider/ModalBottomSheet/hooks/index.ts

@@ -0,0 +1 @@
+export { useKeyboardHeight } from "./useKeyboardHeight";

package/App/ModalProvider/ModalBottomSheet/hooks/useKeyboardHeight.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { Keyboard, KeyboardEvent } from "react-native";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const isApple = isApplePlatform();
+
+export function useKeyboardHeight() {
+  const [keyboardHeight, setKeyboardHeight] = React.useState(0);
+
+  React.useEffect(() => {
+    // iOS supports smooth 'willShow' / 'willHide' events
+    const showEvent = isApple ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = isApple ? "keyboardWillHide" : "keyboardDidHide";
+
+    const showListener = Keyboard.addListener(showEvent, (e: KeyboardEvent) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+
+    const hideListener = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+}

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -47,9 +47,11 @@ export function ModalBottomSheet(props: Props) {
 
   const {
     ModalBottomSheetContent = ModalComponent,
-    modalBottomSheetContentProps,
+    modalBottomSheetContentProps = {},
   } = props;
 
+  const { key, ...restContentProps } = modalBottomSheetContentProps;
+
   useEffect(() => {
     Keyboard.dismiss();
   }, []);
@@ -82,11 +84,12 @@ export function ModalBottomSheet(props: Props) {
         }}
       >
         <ModalBottomSheetContent
+          key={key as any}
           width={
             Math.min(sheetTabletMaxWidth, dimensions.width) || dimensions.width
           }
           maxHeight={sheetMaxHeight}
-          {...modalBottomSheetContentProps}
+          {...restContentProps}
           dismiss={dismiss}
           currentRoute={navigator.currentRoute}
         />

package/App/NavigationProvider/NavigationProvider.tsx

@@ -55,6 +55,7 @@ import {
   getTargetScreen,
   legacyScreenData,
   openExternalUrl,
+  stripHookPrefix,
 } from "./utils";
 import {
   debounce,
@@ -414,6 +415,19 @@ export function NavigationProvider({ children }: Props) {
     },
     dispose
   ) => {
+    logger.debug({
+      message: `Hook screen presented: ${
+        hookPlugin.isModalHook() ? `(modal) ${route}` : route
+      }`,
+      data: {
+        route,
+        hookIdentifier: hookPlugin?.identifier,
+        hookScreenId: hookPlugin?.screen_id,
+        isModal: hookPlugin.isModalHook(),
+        lastHook: hookPlugin?.lastHook,
+      },
+    });
+
     if (hookPlugin?.lastHook) {
       dispose();
     }
@@ -536,6 +550,17 @@ export function NavigationProvider({ children }: Props) {
         currentStartUpHooks.current && setStartUpHooks(false);
       }
 
+      logger.debug({
+        message: `Hooks complete, navigating to: ${targetRoute}`,
+        data: {
+          targetRoute,
+          hookIdentifier: hookPlugin?.identifier,
+          screenId: screen?.id,
+          screenName: screen?.name,
+          options,
+        },
+      });
+
       dispatch(
         navigationAction(targetRoute, { screen, entry: payload, options })
       );
@@ -574,12 +599,28 @@ export function NavigationProvider({ children }: Props) {
     ) => {
       const { entry, screen, targetRoute, externalUrl } = getNavigationTarget(
         item,
-        action === ACTIONS.REPLACE ? "" : pathnameRef.current,
+        action === ACTIONS.REPLACE ? "" : stripHookPrefix(pathnameRef.current),
         contentTypes,
         layoutVersion,
         rivers
       );
 
+      logger.debug({
+        message: `Navigating: ${pathnameRef.current || "(none)"} -> ${
+          targetRoute || externalUrl || "(unresolved)"
+        }`,
+        data: {
+          action,
+          from: pathnameRef.current,
+          to: targetRoute,
+          externalUrl,
+          screenId: screen?.id,
+          screenName: screen?.name,
+          entryType: entry?.type?.value,
+          options,
+        },
+      });
+
       if (externalUrl) {
         const openURL = async (url) => {
           const inflatedURL = await inflateUrl(url);
@@ -668,6 +709,15 @@ export function NavigationProvider({ children }: Props) {
 
         hooksManager.handleHooks(legacyScreenData({ entry, screen }));
       } else {
+        logger.debug({
+          message: `Navigating offline (hooks skipped) to: ${targetRoute}`,
+          data: {
+            targetRoute,
+            screenId: screen?.id,
+            screenName: screen?.name,
+          },
+        });
+
         dispatch(navigationAction(targetRoute, { screen, entry, options }));
       }
     },

package/App/NavigationProvider/__tests__/utils.test.ts

@@ -1,4 +1,4 @@
-const { targetShouldOpenExternally } = require("../utils");
+const { targetShouldOpenExternally, stripHookPrefix } = require("../utils");
 
 const mockedOpenUrl = jest.fn();
 
@@ -116,3 +116,33 @@ describe("targetShouldOpenExternally", () => {
     });
   });
 });
+
+describe("stripHookPrefix", () => {
+  const HOOK = "203d96a9-f4af-49d1-9890-435e683b9274";
+  const MANAGE = "9f8e1e06-abd6-48b9-b73a-4caf4601f870";
+
+  it("drops the hook segment so a hook screen navigates from the root", () => {
+    expect(stripHookPrefix(`/hooks/${HOOK}`)).toBe("");
+  });
+
+  it("keeps the screens opened from a hook, without their hook prefix", () => {
+    expect(stripHookPrefix(`/hooks/${HOOK}/river/${MANAGE}`)).toBe(
+      `/river/${MANAGE}`
+    );
+  });
+
+  it("leaves a regular route untouched", () => {
+    expect(stripHookPrefix(`/river/${MANAGE}`)).toBe(`/river/${MANAGE}`);
+  });
+
+  it("only strips a hook segment at the start of the path", () => {
+    expect(stripHookPrefix(`/river/${MANAGE}/hooks/${HOOK}`)).toBe(
+      `/river/${MANAGE}/hooks/${HOOK}`
+    );
+  });
+
+  it("returns an empty prefix for an empty or missing path", () => {
+    expect(stripHookPrefix("")).toBe("");
+    expect(stripHookPrefix(undefined)).toBe("");
+  });
+});

package/App/NavigationProvider/utils.ts

@@ -18,6 +18,20 @@ const WEBVIEW_SCREEN_IDENTIFIER = "webview_screen_qb";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
+/**
+ * Drops a leading `/hooks/<screen_id>` segment from a path.
+ *
+ * Routes are built by appending to the current path, and a hook screen is
+ * presented at an absolute `/hooks/<screen_id>`. Without this, every screen
+ * opened from a hook would inherit that prefix for good: the hook's stack entry
+ * would stay buried under its descendants, and `canGoBack` — which treats any
+ * route containing `/hooks` as a hook — would count the whole branch as one
+ * entry and send Back home instead of popping.
+ */
+export function stripHookPrefix(pathname?: string): string {
+  return pathname?.replace(/^\/hooks\/[^/]+/, "") ?? "";
+}
+
 export function targetShouldOpenExternally(
   target: ZappEntry,
   targetScreen: ZappRiver | null,

package/App/NotificationToastRenderer/NotificationToastManager.ts

@@ -0,0 +1,214 @@
+import { subscriber } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { subscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+
+// events accepted on the shared cross-package event bus (see useSubscriberFor),
+// so packages that must not depend on quick-brick-core (e.g. OfflineHandler in
+// zapp-react-native-ui-components) can trigger a toast by event name alone,
+// without importing notificationToastManager directly.
+const unwrapEventPayload = (payload: unknown) =>
+  Array.isArray(payload) ? payload[0] : payload;
+
+export const NOTIFICATION_TOAST_EVENTS = {
+  SHOW_TOAST: "showToast", // in: request to enqueue a toast
+  DISMISS: "dismiss", // in: renderer/user dismissed the visible toast early
+  SHOW: "show", // out: renderer should display this toast
+  HIDE: "hide", // out: renderer should hide the current toast
+} as const;
+
+export interface ToastStyle {
+  backgroundColor?: string;
+  color?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  lineHeight?: number;
+  letterSpacing?: number;
+}
+
+export const DEFAULT_TOAST_TIMEOUT = 4000;
+
+export const CONFIRMATION_TOAST_SOURCE = "confirmation";
+
+export interface ToastPayload {
+  id?: string;
+  message: string;
+  extraMessage?: string; // secondary line; TV renderers show it as a subtitle, mobile ignores it
+  timeout?: number; // ms; defaults to DEFAULT_TOAST_TIMEOUT (4000) if omitted
+  style?: ToastStyle;
+  // stamped by the showToast action; Theme confirmation styles apply when
+  // source === CONFIRMATION_TOAST_SOURCE ("confirmation")
+  source?: string;
+  [key: string]: unknown;
+}
+
+class NotificationToastManager {
+  private static instance: NotificationToastManager;
+
+  private eventHandler = subscriber();
+  private queue: ToastPayload[] = [];
+  private hideTimer: ReturnType<typeof setTimeout> | null = null;
+  private isShowing = false;
+  private nextId = 0;
+
+  private constructor() {
+    // subscribe to the shared event bus so other packages can trigger toasts
+    subscriberFor(
+      NOTIFICATION_TOAST_EVENTS.SHOW_TOAST,
+      this.handleShowToastEvent
+    );
+
+    subscriberFor(NOTIFICATION_TOAST_EVENTS.DISMISS, this.handleDismiss);
+
+    this.getCurrentState = this.getCurrentState.bind(this);
+    this.subscribe = this.subscribe.bind(this);
+  }
+
+  static getInstance(): NotificationToastManager {
+    if (!NotificationToastManager.instance) {
+      NotificationToastManager.instance = new NotificationToastManager();
+    }
+
+    return NotificationToastManager.instance;
+  }
+
+  on(event: string, callback: (...args: any[]) => void) {
+    this.eventHandler.on(event, callback);
+  }
+
+  removeHandler(event: string, callback: (...args: any[]) => void) {
+    this.eventHandler.removeHandler(event, callback);
+  }
+
+  showToast(payload: ToastPayload) {
+    this.handleShowToast(payload);
+  }
+
+  dismiss() {
+    this.handleDismiss();
+  }
+
+  getCurrentState() {
+    return this.queue[0] ?? null;
+  }
+
+  subscribe(callback) {
+    this.eventHandler.on(NOTIFICATION_TOAST_EVENTS.SHOW, callback);
+
+    this.eventHandler.on(NOTIFICATION_TOAST_EVENTS.HIDE, callback);
+
+    return () => {
+      this.eventHandler.removeHandler(NOTIFICATION_TOAST_EVENTS.SHOW, callback);
+
+      this.eventHandler.removeHandler(NOTIFICATION_TOAST_EVENTS.HIDE, callback);
+    };
+  }
+
+  // subscriberFor's shared bus can deliver the raw payload (component emitters,
+  // see useSubscriberFor) or an args array (postEvent-style callers) - accept both.
+  private handleShowToastEvent = (payload: unknown) => {
+    if (!payload) {
+      console.warn(
+        "NotificationToastManager: Invalid showToast payload:",
+        payload
+      );
+
+      return;
+    }
+
+    const unwrappedPayload = unwrapEventPayload(payload) as ToastPayload;
+
+    if (!unwrappedPayload || typeof unwrappedPayload.message !== "string") {
+      console.warn(
+        "NotificationToastManager: Invalid showToast payload:",
+        payload
+      );
+
+      return;
+    }
+
+    this.handleShowToast(unwrappedPayload);
+  };
+
+  private handleShowToast = (payload: ToastPayload) => {
+    const item = {
+      ...payload,
+      id: payload.id ?? String(this.nextId++),
+      timeout: payload.timeout ?? DEFAULT_TOAST_TIMEOUT,
+    };
+
+    const queuedIndex = this.queue.findIndex((queued) => queued.id === item.id);
+
+    if (queuedIndex === -1) {
+      this.queue.push(item);
+    } else if (queuedIndex === 0 && this.isShowing) {
+      // this id is the toast currently on screen - swap its content in place
+      // (new one appears in front of it) and dismiss the old timer/content
+      this.clearTimer();
+      this.queue[0] = item;
+      this.eventHandler.invokeHandler(NOTIFICATION_TOAST_EVENTS.SHOW, item);
+
+      if (item.timeout) {
+        this.hideTimer = setTimeout(() => this.finishCurrent(), item.timeout);
+      }
+
+      return;
+    } else {
+      // still queued, not yet shown - update it in place instead of duplicating
+      this.queue[queuedIndex] = item;
+
+      return;
+    }
+
+    if (!this.isShowing) {
+      this.processNext();
+    }
+  };
+
+  private handleDismiss = () => {
+    if (!this.isShowing) {
+      return;
+    }
+
+    this.finishCurrent();
+  };
+
+  private processNext() {
+    const next = this.queue[0];
+
+    if (!next) {
+      this.isShowing = false;
+
+      return;
+    }
+
+    this.isShowing = true;
+    this.eventHandler.invokeHandler(NOTIFICATION_TOAST_EVENTS.SHOW, next);
+
+    if (next.timeout) {
+      this.hideTimer = setTimeout(() => this.finishCurrent(), next.timeout);
+    }
+  }
+
+  private finishCurrent() {
+    this.clearTimer();
+    this.queue.shift();
+    this.eventHandler.invokeHandler(NOTIFICATION_TOAST_EVENTS.HIDE);
+    this.isShowing = false;
+    this.processNext();
+  }
+
+  private clearTimer() {
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+  }
+
+  public reset(): void {
+    this.clearTimer();
+    this.queue = [];
+    this.isShowing = false;
+    this.nextId = 0;
+  }
+}
+
+export const notificationToastManager = NotificationToastManager.getInstance();