@applicaster/quick-brick-core 16.0.0-rc.11 → 16.0.0-rc.111

package/App/NotificationToastRenderer/__tests__/useNotificationHeight.test.tsx

@@ -0,0 +1,58 @@
+import { renderHook } from "@testing-library/react-native";
+
+let mockInsets = { top: 0 };
+const mockGetNavbarHeight = jest.fn();
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => mockInsets,
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
+  getNavbarHeight: () => mockGetNavbarHeight(),
+}));
+
+import { useNotificationHeight } from "../useNotificationHeight";
+
+describe("useNotificationHeight", () => {
+  beforeEach(() => {
+    mockGetNavbarHeight.mockClear();
+  });
+
+  it("adds the safe area top inset to the nav bar height", () => {
+    mockInsets = { top: 44 };
+    mockGetNavbarHeight.mockReturnValueOnce(56);
+
+    const { result } = renderHook(() => useNotificationHeight());
+
+    expect(result.current).toEqual({
+      statusHeight: 44,
+      notificationHeight: 100,
+    });
+  });
+
+  it("falls back to a 0 status height when there is no top inset", () => {
+    mockInsets = { top: 0 };
+    mockGetNavbarHeight.mockReturnValueOnce(44);
+
+    const { result } = renderHook(() => useNotificationHeight());
+
+    expect(result.current).toEqual({
+      statusHeight: 0,
+      notificationHeight: 44,
+    });
+  });
+
+  it("uses getNavbarHeight for the nav bar height", () => {
+    mockInsets = { top: 20 };
+    mockGetNavbarHeight.mockReturnValueOnce(56);
+
+    const { result } = renderHook(() => useNotificationHeight());
+
+    expect(mockGetNavbarHeight).toHaveBeenCalled();
+
+    expect(result.current).toEqual({
+      statusHeight: 20,
+      notificationHeight: 76,
+    });
+  });
+});

package/App/NotificationToastRenderer/__tests__/useNotificationToastState.test.ts

@@ -0,0 +1,112 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+import { notificationToastManager } from "../NotificationToastManager";
+import { useNotificationToastState } from "../useNotificationToastState";
+
+jest.useFakeTimers();
+
+describe("useNotificationToastState", () => {
+  beforeAll(() => {
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    (console.log as jest.Mock).mockRestore();
+  });
+
+  afterEach(() => {
+    // drain whatever is left showing/queued so the next test starts clean;
+    // the hook's own effect cleanup (on unmount) removes its SHOW/HIDE
+    // handlers automatically via RNTL's auto-cleanup.
+    for (let i = 0; i < 10; i++) {
+      notificationToastManager.dismiss();
+    }
+
+    jest.restoreAllMocks();
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  it("starts with no toast", () => {
+    const { result } = renderHook(() => useNotificationToastState());
+
+    expect(result.current).toBeNull();
+  });
+
+  it("reflects the toast emitted by the manager's SHOW event", () => {
+    const { result } = renderHook(() => useNotificationToastState());
+
+    act(() => {
+      notificationToastManager.showToast({ message: "hello" });
+    });
+
+    expect(result.current).toEqual(
+      expect.objectContaining({ message: "hello" })
+    );
+  });
+
+  it("clears the toast when the manager emits HIDE", () => {
+    const { result } = renderHook(() => useNotificationToastState());
+
+    act(() => {
+      notificationToastManager.showToast({ message: "hello" });
+    });
+
+    expect(result.current).not.toBeNull();
+
+    act(() => {
+      notificationToastManager.dismiss();
+    });
+
+    expect(result.current).toBeNull();
+  });
+
+  it("stops updating after unmount", () => {
+    const { result, unmount } = renderHook(() => useNotificationToastState());
+
+    unmount();
+
+    act(() => {
+      notificationToastManager.showToast({ message: "after unmount" });
+    });
+
+    expect(result.current).toBeNull();
+  });
+
+  it("subscribes on mount and disposes the subscription on unmount", () => {
+    const dispose = jest.fn();
+
+    const subscribeSpy = jest
+      .spyOn(notificationToastManager, "subscribe")
+      .mockReturnValue(dispose);
+
+    const { unmount } = renderHook(() => useNotificationToastState());
+
+    expect(subscribeSpy).toHaveBeenCalledWith(expect.any(Function));
+    expect(dispose).not.toHaveBeenCalled();
+
+    unmount();
+
+    expect(dispose).toHaveBeenCalledTimes(1);
+  });
+
+  it("subscribe registers SHOW/HIDE handlers and its disposer removes them", () => {
+    const callback = jest.fn();
+
+    const dispose = notificationToastManager.subscribe(callback);
+
+    act(() => {
+      notificationToastManager.showToast({ message: "hello" }); // emits SHOW
+    });
+
+    expect(callback).toHaveBeenCalled();
+
+    callback.mockClear();
+    dispose();
+
+    act(() => {
+      notificationToastManager.showToast({ message: "again" }); // emits SHOW
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+});

package/App/NotificationToastRenderer/index.tsx

@@ -0,0 +1,9 @@
+export { notificationToastManager } from "./NotificationToastManager";
+
+export type { ToastPayload, ToastStyle } from "./NotificationToastManager";
+
+export { CONFIRMATION_TOAST_SOURCE } from "./NotificationToastManager";
+
+export { NotificationToastRenderer } from "./NotificationToastRenderer";
+
+export { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";

package/App/NotificationToastRenderer/resolveConfirmationToastStyle.ts

@@ -0,0 +1,33 @@
+import { getAllSpecificStyles } from "@applicaster/zapp-react-native-utils/configurationUtils/manifestKeyParser";
+
+import { ToastStyle } from "./NotificationToastManager";
+
+const CONFIRMATION_TOAST_STYLE_COMPONENT = "confirmation_toast";
+
+/**
+ * Builds confirmation-toast style from Theme defaults via getAllSpecificStyles,
+ * then shallow-merges any caller override on top.
+ *
+ * Expected Theme keys follow:
+ * `confirmation_toast_style_[platform_]<style_name>`
+ * e.g. confirmation_toast_style_background_color,
+ *      confirmation_toast_style_ios_font_family
+ */
+export function resolveConfirmationToastStyle(
+  theme: Partial<BaseThemePropertiesMobile> | null | undefined,
+  overrideStyle?: ToastStyle | null
+): ToastStyle {
+  const outStyles: Record<string, ToastStyle> = {};
+
+  getAllSpecificStyles({
+    configuration: { ...(theme ?? {}) },
+    componentName: CONFIRMATION_TOAST_STYLE_COMPONENT,
+    subComponentName: "",
+    outStyles,
+  });
+
+  return {
+    ...outStyles.default,
+    ...overrideStyle,
+  };
+}

package/App/NotificationToastRenderer/useNotificationHeight.tsx

@@ -0,0 +1,14 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { getNavbarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
+
+/** Hook calculates the height of the notification area including the status bar and navigation bar, used only for mobile */
+export const useNotificationHeight = () => {
+  const insets = useSafeAreaInsets();
+
+  const navBarHeight = getNavbarHeight();
+
+  const statusHeight = insets.top;
+  const notificationHeight = statusHeight + navBarHeight;
+
+  return { statusHeight, notificationHeight };
+};

package/App/NotificationToastRenderer/useNotificationToastState.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+import { notificationToastManager } from "./NotificationToastManager";
+
+export const useNotificationToastState = () => {
+  const state = React.useSyncExternalStore(
+    notificationToastManager.subscribe,
+    notificationToastManager.getCurrentState
+  );
+
+  return state;
+};

package/App/index.tsx

@@ -31,6 +31,7 @@ import { withActionExecutor } from "@applicaster/zapp-react-native-utils/actions
 import { withScreenDataContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { LogicAggregatorContainer } from "./LogicAggregatorContainer";
 import { LoadingOverlay } from "./LoadingOverlay";
+import { NotificationToastRenderer } from "./NotificationToastRenderer";
 import { ZappAppWrapper } from "./components/ZappAppWrapper";
 
 interface AppOptions {
@@ -67,11 +68,13 @@ const App = ({
               <ErrorBoundary>
                 <URLSchemeListener>
                   <SplashLoader>
-                    <OfflineHandler>
-                      <Layout>
-                        <RouteManager />
-                      </Layout>
-                    </OfflineHandler>
+                    <NotificationToastRenderer>
+                      <OfflineHandler>
+                        <Layout>
+                          <RouteManager />
+                        </Layout>
+                      </OfflineHandler>
+                    </NotificationToastRenderer>
                   </SplashLoader>
                   <ModalProvider />
                 </URLSchemeListener>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "16.0.0-rc.11",
+  "version": "16.0.0-rc.111",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.11",
-    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.11",
-    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.11",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.11",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.11",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.11",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.11",
+    "@applicaster/applicaster-types": "16.0.0-rc.111",
+    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.111",
+    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.111",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.111",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.111",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.111",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.111",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",