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

package/App/NotificationToastRenderer/NotificationToastRenderer.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { View, Text, Animated, StyleSheet, ViewStyle } from "react-native";
+import {
+  Directions,
+  Gesture,
+  GestureDetector,
+} from "react-native-gesture-handler";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import {
+  CONFIRMATION_TOAST_SOURCE,
+  notificationToastManager,
+} from "./NotificationToastManager";
+import { useNotificationToastState } from "./useNotificationToastState";
+import { useNotificationHeight } from "./useNotificationHeight";
+import { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
+
+const DEFAULT_TOAST_BACKGROUND_COLOR = "#000";
+const DEFAULT_TOAST_MESSAGE_COLOR = "#fff";
+
+const styles = StyleSheet.create({
+  notificationView: {
+    flex: 1,
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});
+
+type NumberBoolean = 0 | 1;
+
+export const NotificationToastRenderer = ({ children }) => {
+  const { statusHeight, notificationHeight } = useNotificationHeight();
+  const theme = useTheme<BaseThemePropertiesMobile>();
+
+  const toast = useNotificationToastState();
+
+  const [notificationOpacity, setNotificationOpacity] =
+    useState<NumberBoolean>(0);
+
+  const yPosition = useRef(new Animated.Value(0)).current;
+
+  const resolvedStyle =
+    toast?.source === CONFIRMATION_TOAST_SOURCE
+      ? resolveConfirmationToastStyle(theme, toast.style)
+      : toast?.style;
+
+  const backgroundColor =
+    resolvedStyle?.backgroundColor ?? DEFAULT_TOAST_BACKGROUND_COLOR;
+
+  const color = resolvedStyle?.color ?? DEFAULT_TOAST_MESSAGE_COLOR;
+
+  const textStyles = {
+    color,
+    fontFamily: resolvedStyle?.fontFamily,
+    fontSize: resolvedStyle?.fontSize,
+    lineHeight: resolvedStyle?.lineHeight,
+    letterSpacing: resolvedStyle?.letterSpacing,
+  };
+
+  const animatedViewStyles: ViewStyle = {
+    ...styles.notificationView,
+    transform: [
+      {
+        translateY: yPosition.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-notificationHeight, 0],
+        }),
+      },
+    ],
+    opacity: notificationOpacity,
+    height: notificationHeight,
+    width: "100%",
+
+    backgroundColor,
+  };
+
+  const flingGesture = useMemo(
+    () =>
+      Gesture.Fling()
+        .direction(Directions.UP)
+        .enabled(!!toast)
+        .runOnJS(true)
+        .onEnd((_event, success) => {
+          if (success) {
+            notificationToastManager.dismiss();
+          }
+        }),
+    [toast]
+  );
+
+  useEffect(() => {
+    if (toast) {
+      setNotificationOpacity(1);
+
+      Animated.timing(yPosition, {
+        toValue: 1,
+        useNativeDriver: true,
+        duration: 300,
+      }).start();
+    } else {
+      Animated.timing(yPosition, {
+        toValue: 0,
+        useNativeDriver: true,
+        duration: 300,
+      }).start(() => setNotificationOpacity(0));
+    }
+  }, [toast]);
+
+  return (
+    <View
+      testID="NotificationToastRenderer"
+      style={StyleSheet.absoluteFill}
+      pointerEvents="box-none"
+    >
+      {children}
+      <GestureDetector gesture={flingGesture}>
+        <Animated.View
+          testID="NotificationToastRenderer-fling"
+          pointerEvents={toast ? "auto" : "none"}
+          style={animatedViewStyles}
+        >
+          <View style={{ height: statusHeight, backgroundColor }} />
+          <Text testID="NotificationToastRenderer-message" style={textStyles}>
+            {toast?.message}
+          </Text>
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+};

package/App/NotificationToastRenderer/NotificationToastRenderer.tv.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { View, Text, Animated, StyleSheet, ViewStyle } from "react-native";
+import {
+  Directions,
+  FlingGestureHandler,
+  State,
+} from "react-native-gesture-handler";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import {
+  CONFIRMATION_TOAST_SOURCE,
+  notificationToastManager,
+} from "./NotificationToastManager";
+import { useNotificationToastState } from "./useNotificationToastState";
+import { useNotificationHeight } from "./useNotificationHeight";
+import { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
+
+const DEFAULT_TOAST_BACKGROUND_COLOR = "#000";
+const DEFAULT_TOAST_MESSAGE_COLOR = "#fff";
+
+const styles = StyleSheet.create({
+  notificationView: {
+    flex: 1,
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});
+
+type NumberBoolean = 0 | 1;
+
+export const NotificationToastRenderer = ({ children }) => {
+  const { statusHeight, notificationHeight } = useNotificationHeight();
+  const theme = useTheme<BaseThemePropertiesMobile>();
+
+  const toast = useNotificationToastState();
+
+  const [notificationOpacity, setNotificationOpacity] =
+    useState<NumberBoolean>(0);
+
+  const yPosition = useRef(new Animated.Value(0)).current;
+
+  const resolvedStyle =
+    toast?.source === CONFIRMATION_TOAST_SOURCE
+      ? resolveConfirmationToastStyle(theme, toast.style)
+      : toast?.style;
+
+  const backgroundColor =
+    resolvedStyle?.backgroundColor ?? DEFAULT_TOAST_BACKGROUND_COLOR;
+
+  const color = resolvedStyle?.color ?? DEFAULT_TOAST_MESSAGE_COLOR;
+
+  const textStyles = {
+    color,
+    fontFamily: resolvedStyle?.fontFamily,
+    fontSize: resolvedStyle?.fontSize,
+    lineHeight: resolvedStyle?.lineHeight,
+    letterSpacing: resolvedStyle?.letterSpacing,
+  };
+
+  const animatedViewStyles: ViewStyle = {
+    ...styles.notificationView,
+    transform: [
+      {
+        translateY: yPosition.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-notificationHeight, 0],
+        }),
+      },
+    ],
+    opacity: notificationOpacity,
+    height: notificationHeight,
+    width: "100%",
+
+    backgroundColor,
+  };
+
+  const onFlingStateChange = useCallback(({ nativeEvent }) => {
+    // Fling activates then ends; dismiss once the upward fling is recognized.
+    if (nativeEvent.oldState === State.ACTIVE) {
+      notificationToastManager.dismiss();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (toast) {
+      setNotificationOpacity(1);
+
+      Animated.timing(yPosition, {
+        toValue: 1,
+        useNativeDriver: true,
+        duration: 300,
+      }).start();
+    } else {
+      Animated.timing(yPosition, {
+        toValue: 0,
+        useNativeDriver: true,
+        duration: 300,
+      }).start(() => setNotificationOpacity(0));
+    }
+  }, [toast]);
+
+  return (
+    <View
+      testID="NotificationToastRenderer"
+      style={StyleSheet.absoluteFill}
+      pointerEvents="box-none"
+    >
+      {children}
+      <FlingGestureHandler
+        enabled={!!toast}
+        direction={Directions.UP}
+        onHandlerStateChange={onFlingStateChange}
+      >
+        <Animated.View
+          testID="NotificationToastRenderer-fling"
+          pointerEvents={toast ? "auto" : "none"}
+          style={animatedViewStyles}
+        >
+          <View style={{ height: statusHeight, backgroundColor }} />
+          <Text testID="NotificationToastRenderer-message" style={textStyles}>
+            {toast?.message}
+          </Text>
+        </Animated.View>
+      </FlingGestureHandler>
+    </View>
+  );
+};

package/App/NotificationToastRenderer/NotificationToastRenderer.web.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+import { notificationToastManager } from "./NotificationToastManager";
+import { useNotificationToastState } from "./useNotificationToastState";
+
+const styles: Record<string, React.CSSProperties> = {
+  body: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: 1920,
+    height: 200,
+    background:
+      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    color: "#fff",
+    paddingBottom: 15,
+  },
+  title: {
+    fontSize: 28,
+    margin: 0,
+    padding: 0,
+  },
+  subtitle: {
+    fontSize: 20,
+    margin: 0,
+    padding: 0,
+  },
+};
+
+export const NotificationToastRenderer = ({ children }) => {
+  const toast = useNotificationToastState();
+
+  return (
+    <div
+      data-testid="NotificationToastRenderer"
+      onClick={() => notificationToastManager.dismiss()}
+    >
+      {children}
+      {toast ? (
+        <div
+          data-testid="NotificationToastRenderer-touchable"
+          style={styles.body}
+        >
+          <div style={styles.title}>
+            <h2 data-testid="NotificationToastRenderer-message">
+              {toast.message}
+            </h2>
+          </div>
+          {toast.extraMessage ? (
+            <h4 style={styles.subtitle}>{toast.extraMessage}</h4>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,237 @@
+import {
+  notificationToastManager,
+  NOTIFICATION_TOAST_EVENTS,
+  DEFAULT_TOAST_TIMEOUT,
+} from "../NotificationToastManager";
+import { postEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+
+jest.useFakeTimers();
+
+// notificationToastManager is a module-level singleton with a private
+// queue/isShowing/nextId, so every test must register its handlers through
+// `on()` (tracked below for cleanup) and fully drain the queue afterwards -
+// otherwise state leaks into the next test.
+describe("NotificationToastManager", () => {
+  let registered: Array<[string, (...args: any[]) => void]> = [];
+
+  const on = (event: string, handler: (...args: any[]) => void) => {
+    notificationToastManager.on(event, handler);
+    registered.push([event, handler]);
+  };
+
+  beforeAll(() => {
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    (console.log as jest.Mock).mockRestore();
+  });
+
+  afterEach(() => {
+    registered.forEach(([event, handler]) =>
+      notificationToastManager.removeHandler(event, handler)
+    );
+
+    registered = [];
+
+    // drain whatever is left showing/queued so the next test starts clean
+    notificationToastManager.reset();
+
+    jest.clearAllTimers();
+    jest.restoreAllMocks();
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  it("emits SHOW with the toast payload when showToast is called", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ id: "t1", message: "hello" });
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "t1", message: "hello" }),
+      expect.any(Function)
+    );
+  });
+
+  it("auto-generates distinct ids for payloads that don't provide one", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ message: "first" });
+    const firstId = onShow.mock.calls[0][0].id;
+
+    notificationToastManager.dismiss();
+
+    notificationToastManager.showToast({ message: "second" });
+    const secondId = onShow.mock.calls[1][0].id;
+
+    expect(typeof firstId).toBe("string");
+    expect(firstId).not.toEqual(secondId);
+  });
+
+  it("keeps a caller-provided id instead of generating one", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ id: "custom-id", message: "hi" });
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "custom-id" }),
+      expect.any(Function)
+    );
+  });
+
+  it("queues a second toast and shows it only after the first is dismissed", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ id: "a", message: "first" });
+    notificationToastManager.showToast({ id: "b", message: "second" });
+
+    expect(onShow).toHaveBeenCalledTimes(1);
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "a" }),
+      expect.any(Function)
+    );
+
+    notificationToastManager.dismiss();
+
+    expect(onShow).toHaveBeenCalledTimes(2);
+
+    expect(onShow).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: "b" }),
+      expect.any(Function)
+    );
+  });
+
+  it("auto-hides after the timeout and advances to the next queued toast", () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+    on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
+
+    notificationToastManager.showToast({
+      id: "a",
+      message: "first",
+      timeout: 1000,
+    });
+
+    notificationToastManager.showToast({ id: "b", message: "second" });
+
+    jest.advanceTimersByTime(1000);
+
+    expect(onHide).toHaveBeenCalledTimes(1);
+
+    expect(onShow).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: "b" }),
+      expect.any(Function)
+    );
+  });
+
+  it("does nothing when dismiss is called with no toast showing", () => {
+    const onHide = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
+
+    notificationToastManager.dismiss();
+
+    expect(onHide).not.toHaveBeenCalled();
+  });
+
+  it("updates a still-queued (not yet shown) toast in place instead of duplicating it", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({ id: "a", message: "first" });
+    notificationToastManager.showToast({ id: "b", message: "second" });
+    notificationToastManager.showToast({ id: "b", message: "second updated" });
+
+    notificationToastManager.dismiss();
+
+    expect(onShow).toHaveBeenCalledTimes(2);
+
+    expect(onShow).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: "b", message: "second updated" }),
+      expect.any(Function)
+    );
+  });
+
+  it("swaps the content of the currently visible toast when re-shown with the same id", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.showToast({
+      id: "a",
+      message: "first",
+      timeout: 5000,
+    });
+
+    notificationToastManager.showToast({ id: "a", message: "first updated" });
+
+    expect(onShow).toHaveBeenCalledTimes(2);
+
+    expect(onShow).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: "a", message: "first updated" }),
+      expect.any(Function)
+    );
+
+    // old timer must have been cleared, not still pending
+    jest.advanceTimersByTime(5000);
+    expect(onShow).toHaveBeenCalledTimes(2);
+  });
+
+  it("routes cross-package showToast events via the shared event bus", () => {
+    const onShow = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    postEvent(NOTIFICATION_TOAST_EVENTS.SHOW_TOAST, [
+      { id: "bus", message: "from event bus" },
+    ]);
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "bus", message: "from event bus" }),
+      expect.any(Function)
+    );
+  });
+
+  it("stops emitting to a handler after it has been removed", () => {
+    const onShow = jest.fn();
+    notificationToastManager.on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+
+    notificationToastManager.removeHandler(
+      NOTIFICATION_TOAST_EVENTS.SHOW,
+      onShow
+    );
+
+    notificationToastManager.showToast({
+      id: "removed-handler",
+      message: "hello",
+    });
+
+    expect(onShow).not.toHaveBeenCalled();
+  });
+
+  it("defaults timeout to DEFAULT_TOAST_TIMEOUT (4000ms) when omitted and auto-hides", () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+    on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
+
+    notificationToastManager.showToast({
+      message: "Added to queue",
+    });
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "Added to queue",
+        timeout: DEFAULT_TOAST_TIMEOUT,
+      }),
+      expect.any(Function)
+    );
+
+    jest.advanceTimersByTime(DEFAULT_TOAST_TIMEOUT);
+
+    expect(onHide).toHaveBeenCalledTimes(1);
+  });
+});