@applicaster/quick-brick-core 16.0.0-alpha.6088600543 → 16.0.0-alpha.6409114856

package/App/ActionsProvider/ActionsProvider.tsx

@@ -3,6 +3,14 @@ import * as R from "ramda";
 
 import { ActionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ActionsContext";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+import { LegacyActionsRegistryAdapter } from "./LegacyActionsRegistryAdapter";
+
+const { log_debug } = createLogger({
+  subsystem: "ActionsProvider",
+  category: "ActionRegistration",
+});
 
 type Props = {
   children: React.ReactNode;
@@ -36,19 +44,17 @@ const abstractIdentifier = (actionPlugins: Plugin[]): PluginsIdMap =>
  * Component returning children.
  * Can be used to create Component from children
  */
-const ChildrenWrapper = ({
-  children,
-}: {
-  children: React.ReactElement<any>;
-}) => {
-  return children;
+const ChildrenWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
 };
 
 /**
  * It wraps children in multiple context providers
  * @param contexts - Array of React Context Providers
  */
-const contextComposer = (contexts: Plugin[]): React.ExoticComponent =>
+const contextComposer = (
+  contexts: Plugin[]
+): React.ComponentType<React.PropsWithChildren> =>
   R.compose(...contexts)(ChildrenWrapper);
 
 /**
@@ -69,6 +75,19 @@ export function ActionsProvider(props: Props) {
     [plugins]
   );
 
+  React.useEffect(() => {
+    const count = Object.keys(actionPlugins).length;
+
+    if (count > 0) {
+      log_debug(
+        `ActionsProvider: composed ${count} action plugin(s) into context`,
+        { identifiers: Object.keys(actionPlugins) }
+      );
+    } else {
+      log_debug("ActionsProvider: no action plugins to compose");
+    }
+  }, [actionPlugins]);
+
   const contextProviders = React.useMemo((): [Plugin] | [] => {
     try {
       const providers = R.compose(
@@ -88,7 +107,7 @@ export function ActionsProvider(props: Props) {
         ? contextComposer(contextProviders)
         : React.Fragment,
     []
-  );
+  ) as React.ComponentType<React.PropsWithChildren>;
 
   const contextValue = React.useMemo(
     () => ({ actions: actionPlugins }),
@@ -97,7 +116,10 @@ export function ActionsProvider(props: Props) {
 
   return (
     <ActionsContext.Provider value={contextValue}>
-      <Context>{children}</Context>
+      <Context>
+        <LegacyActionsRegistryAdapter actionPlugins={actionPlugins} />
+        {children}
+      </Context>
     </ActionsContext.Provider>
   );
 }

package/App/ActionsProvider/LegacyActionsRegistryAdapter.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+import * as R from "ramda";
+
+import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+const { log_debug, log_warning } = createLogger({
+  subsystem: "LegacyActionsRegistryAdapter",
+  category: "ActionRegistration",
+});
+
+type LegacyActionPlugin = Record<string, any> & {
+  identifier: string;
+  module: {
+    context?: React.Context<any>;
+    [key: string]: any;
+  };
+};
+
+/**
+ * Bridges a single legacy action plugin (one that exposes `module.context`)
+ * into the `uiActionsRegistry`.
+ *
+ * Reactivity note: legacy stateful actions rely on React Context re-renders to
+ * propagate their latest value to subscribed UI (via `useActions`). We keep
+ * that mechanism intact and only *mirror* the current value into the registry
+ * through a ref, so registry-based consumers always read the freshest value at
+ * call time without changing legacy reactivity.
+ */
+function LegacyActionBridge({ plugin }: { plugin: LegacyActionPlugin }) {
+  // `plugin.module.context` is stable for the lifetime of the plugin, so this
+  // single `useContext` call is safe and rules-of-hooks compliant.
+  const value = React.useContext(plugin.module.context as React.Context<any>);
+
+  const valueRef = React.useRef(value);
+  valueRef.current = value;
+
+  React.useEffect(() => {
+    if (value == null) {
+      log_warning(
+        `LegacyActionBridge: context value for "${plugin.identifier}" is null/undefined – skipping registration`,
+        { identifier: plugin.identifier }
+      );
+    } else {
+      log_debug(
+        `LegacyActionBridge: context value ready for "${plugin.identifier}", registering in UIActionsRegistry`,
+        { identifier: plugin.identifier }
+      );
+    }
+
+    const unregister = uiActionsRegistry.registerActionProvider(
+      plugin.identifier,
+      () =>
+        valueRef.current
+          ? [{ identifier: plugin.identifier, action: valueRef.current }]
+          : []
+    );
+
+    return () => {
+      log_debug(
+        `LegacyActionBridge: unmounting bridge for "${plugin.identifier}"`,
+        { identifier: plugin.identifier }
+      );
+
+      unregister();
+    };
+  }, [plugin.identifier]);
+
+  return null;
+}
+
+type Props = {
+  actionPlugins: Record<string, LegacyActionPlugin>;
+};
+
+/**
+ * Registers every legacy action plugin's live context value into the
+ * `uiActionsRegistry`. It must be rendered *inside* the composed context
+ * providers (see `ActionsProvider`) so that each plugin's context is populated.
+ *
+ * This is the compatibility layer that lets new, registry-based consumers read
+ * actions coming from old plugins that still export `contextProvider`/`context`.
+ */
+export function LegacyActionsRegistryAdapter({ actionPlugins }: Props) {
+  const bridgedPlugins = React.useMemo(
+    () =>
+      R.values(actionPlugins).filter(
+        (plugin) => plugin?.module?.context != null
+      ),
+    [actionPlugins]
+  );
+
+  log_debug(
+    `LegacyActionsRegistryAdapter: bridging ${bridgedPlugins.length} legacy action plugin(s)`,
+    { identifiers: bridgedPlugins.map((p) => p.identifier) }
+  );
+
+  return (
+    <>
+      {bridgedPlugins.map((plugin) => (
+        <LegacyActionBridge key={plugin.identifier} plugin={plugin} />
+      ))}
+    </>
+  );
+}
+
+LegacyActionsRegistryAdapter.displayName = "LegacyActionsRegistryAdapter";

package/App/ModalProvider/ModalBottomSheet/DraggableBottomSheet/__tests__/index.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { State } from "react-native-gesture-handler";
+import { DraggableBottomSheet } from "../index";
+
+// Render the gesture handlers as passthrough Views so we can mount the sheet
+// and drive its release handler directly. State stays real (we need ACTIVE).
+jest.mock("react-native-gesture-handler", () => {
+  const RN = require("react-native");
+  const ReactActual = require("react");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  const Passthrough = ReactActual.forwardRef(({ children }: any, _ref: any) => (
+    <RN.View>{children}</RN.View>
+  ));
+
+  return {
+    __esModule: true,
+    ...actual,
+    PanGestureHandler: Passthrough,
+    TapGestureHandler: Passthrough,
+  };
+});
+
+// height 800, sheetHeight 400, no header:
+//   SnapPoints.top = 800 - 400 = 400 (lastSnap after mount)
+//   SnapPoints.threshold = max(800 - 400 / 2, 100) = 600
+// Release dismisses when lastSnap + translationY + 0.05 * velocityY > 600,
+// i.e. once the drag+toss pushes past 200px.
+const mountSheet = () => {
+  const dismiss = jest.fn();
+  const ref = React.createRef<DraggableBottomSheet>();
+
+  render(
+    <DraggableBottomSheet
+      ref={ref}
+      header={() => null}
+      dismiss={dismiss}
+      visible={true}
+      sheetHeight={400}
+      width={320}
+      height={800}
+      hasHeader={false}
+      maxWidth={320}
+    >
+      <View testID="child" />
+    </DraggableBottomSheet>
+  );
+
+  return { instance: ref.current as DraggableBottomSheet, dismiss };
+};
+
+const release = (
+  instance: DraggableBottomSheet,
+  translationY: number,
+  velocityY = 0
+) =>
+  instance._onHandlerStateChange({
+    nativeEvent: { oldState: State.ACTIVE, translationY, velocityY },
+  });
+
+describe("DraggableBottomSheet release", () => {
+  // Mounting an open sheet schedules a deferred animateIn via setTimeout. Keep
+  // it on fake timers so it never fires into a torn-down Jest environment.
+  beforeEach(() => jest.useFakeTimers());
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it("dismisses when the release lands past the threshold", () => {
+    const { instance, dismiss } = mountSheet();
+
+    release(instance, 300);
+
+    expect(dismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("springs back (does not dismiss) when the release is below the threshold", () => {
+    const { instance, dismiss } = mountSheet();
+
+    release(instance, 50);
+
+    expect(dismiss).not.toHaveBeenCalled();
+  });
+});

package/App/ModalProvider/ModalBottomSheet/DraggableBottomSheet/index.tsx

@@ -1,15 +1,24 @@
-import React, { Component, ReactChild, ReactElement } from "react";
+import React, { Component, ReactElement } from "react";
 import { Animated, StyleSheet, View, Easing } from "react-native";
 import {
   PanGestureHandler,
-  NativeViewGestureHandler,
   State,
   TapGestureHandler,
 } from "react-native-gesture-handler";
 
 import { SnapPoints } from "./SnapPoints";
-
-const USE_NATIVE_DRIVER = true;
+import {
+  BottomSheetContext,
+  BottomSheetContextValue,
+} from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+// Must stay false: the sheet drives _dragY from old-API PanGestureHandler
+// onGestureEvent props via RN Animated.event. This RNGH version cannot attach
+// a native (useNativeDriver: true) Animated.event to those handlers — it leaks
+// the AnimatedEvent object into the JS event path and throws "Expected
+// onGestureHandlerEvent listener to be a function". Native-threaded dragging
+// needs the full reanimated + Gesture-API migration (tracked separately).
+const USE_NATIVE_DRIVER = false;
 const HEADER_HEIGHT = 44;
 
 const ANIMATION_DURATION = 400;
@@ -24,7 +33,7 @@ const styles = StyleSheet.create({
 });
 
 type Props = {
-  children: ReactChild;
+  children: ReactElement;
   header: (boolean) => ReactElement;
   dismiss: () => void;
   visible: boolean;
@@ -49,35 +58,24 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
   _isMounted = false;
   _animatedIn = false;
   _animating = false;
-  _lastScrollYValue: number;
-  _lastScrollY: Animated.Value;
   _dragY: Animated.Value;
-  _reverseLastScrollY: Animated.AnimatedInterpolation<number>;
   _translateYOffset: Animated.Value;
   _translateY: Animated.AnimatedInterpolation<number>;
   _snapPoints: SnapPoints;
   _prevContentHeight = 0;
+  _bottomSheetContextValue: BottomSheetContextValue;
 
   _callWhenMounted: () => void | null;
 
-  _onRegisterLastScroll: (...args: any[]) => void;
+  // One shared JS Animated.event feeds _dragY for every drag handler (top
+  // handle, header drag-area, body). Safe because useNativeDriver is false — the
+  // event is a plain JS listener that setValue's _dragY for whichever handler
+  // is active, and only one gesture is ever active at a time.
   _onGestureEvent: (...args: any[]) => void;
 
   constructor(props) {
     super(props);
 
-    this._lastScrollYValue = 0;
-    this._lastScrollY = new Animated.Value(0);
-
-    this._onRegisterLastScroll = Animated.event(
-      [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }],
-      { useNativeDriver: USE_NATIVE_DRIVER }
-    );
-
-    this._lastScrollY.addListener(({ value }) => {
-      this._lastScrollYValue = value;
-    });
-
     this._dragY = new Animated.Value(0);
 
     this._onGestureEvent = Animated.event(
@@ -85,10 +83,11 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
       { useNativeDriver: USE_NATIVE_DRIVER }
     );
 
-    this._reverseLastScrollY = Animated.multiply(
-      new Animated.Value(-1),
-      this._lastScrollY
-    );
+    this._bottomSheetContextValue = {
+      masterDrawerRef: this.masterdrawer,
+      onDragGestureEvent: this._onGestureEvent,
+      onDragStateChange: this._onHeaderHandlerStateChange,
+    };
 
     const initialSnapPoints = new SnapPoints(props.height, props.sheetHeight);
 
@@ -181,7 +180,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
 
     this._translateY = Animated.add(
       this._translateYOffset,
-      Animated.add(this._dragY, this._reverseLastScrollY)
+      this._dragY
     ).interpolate({
       inputRange: [this._snapPoints.top, this._snapPoints.bottom],
       outputRange: [this._snapPoints.top, this._snapPoints.bottom],
@@ -226,10 +225,6 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
       return;
     }
 
-    if (nativeEvent.oldState === State.BEGAN) {
-      this._lastScrollY.setValue(0);
-    }
-
     this._onHandlerStateChange({ nativeEvent });
   };
 
@@ -240,8 +235,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
 
     if (nativeEvent.oldState === State.ACTIVE) {
       const { velocityY } = nativeEvent;
-      let { translationY } = nativeEvent;
-      translationY -= this._lastScrollYValue;
+      const { translationY } = nativeEvent;
       const dragToss = 0.05;
 
       const endOffsetY =
@@ -300,7 +294,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
           >
             <PanGestureHandler
               ref={this.drawerheader}
-              simultaneousHandlers={[this.scroll, this.masterdrawer]}
+              simultaneousHandlers={[this.masterdrawer]}
               shouldCancelWhenOutside={false}
               onGestureEvent={this._onGestureEvent}
               onHandlerStateChange={this._onHeaderHandlerStateChange}
@@ -309,31 +303,11 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
                 {this.props?.header(this.state.dragging)}
               </Animated.View>
             </PanGestureHandler>
-            <PanGestureHandler
-              ref={this.drawer}
-              simultaneousHandlers={[this.scroll, this.masterdrawer]}
-              shouldCancelWhenOutside={false}
-              onGestureEvent={this._onGestureEvent}
-              onHandlerStateChange={this._onHandlerStateChange}
-            >
+            <BottomSheetContext.Provider value={this._bottomSheetContextValue}>
               <Animated.View style={styles.container}>
-                <NativeViewGestureHandler
-                  ref={this.scroll}
-                  waitFor={this.masterdrawer}
-                  simultaneousHandlers={this.drawer}
-                >
-                  <Animated.ScrollView
-                    bounces={false}
-                    onScrollBeginDrag={this._onRegisterLastScroll}
-                    scrollEventThrottle={1}
-                    scrollEnabled={false}
-                    showsVerticalScrollIndicator={false}
-                  >
-                    {this.props.children}
-                  </Animated.ScrollView>
-                </NativeViewGestureHandler>
+                {this.props.children}
               </Animated.View>
-            </PanGestureHandler>
+            </BottomSheetContext.Provider>
           </Animated.View>
         </View>
       </TapGestureHandler>

package/App/NotificationToastRenderer/NotificationToastManager.ts

@@ -0,0 +1,203 @@
+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 interface ToastPayload {
+  id?: string;
+  message: string;
+  extraMessage?: string; // secondary line; TV renderers show it as a subtitle, mobile ignores it
+  timeout?: number; // ms; if omitted, toast stays until dismissed
+  style?: ToastStyle;
+  [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++) };
+
+    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();