@robosystems/core 0.11.4 → 0.11.5

package/hooks/use-toast.d.ts

@@ -4,25 +4,25 @@ export interface ToastMessage {
     message: string;
     duration?: number;
 }
+/** Test-only: clear the shared store between tests. */
+export declare function resetToastsForTests(): void;
+/** Renders the shared toasts, but only in the first mounted container. */
+declare function SharedToastContainer(): import("react").JSX.Element;
 /**
- * A reusable toast notification hook built on Flowbite React components.
+ * Toast notifications on Flowbite React, shared across the app.
  *
- * Provides toast notifications with auto-dismiss functionality and consistent styling
- * across the RoboSystems ecosystem.
+ * Every call raises into one store, and the first mounted `ToastContainer`
+ * renders it, so a component can raise a toast without rendering a
+ * container of its own, and two containers never show a toast twice.
  *
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { showSuccess, showError, ToastContainer } = useToast()
- *
- *   const handleSuccess = () => {
- *     showSuccess('Operation completed successfully!')
- *   }
- *
+ *   const { showSuccess, ToastContainer } = useToast()
  *   return (
  *     <>
  *       <ToastContainer />
- *       <button onClick={handleSuccess}>Show Success Toast</button>
+ *       <button onClick={() => showSuccess('Saved')}>Save</button>
  *     </>
  *   )
  * }
@@ -33,5 +33,6 @@ export declare function useToast(): {
     showError: (message: string, duration?: number) => void;
     showWarning: (message: string, duration?: number) => void;
     showInfo: (message: string, duration?: number) => void;
-    ToastContainer: () => import("react").JSX.Element;
+    ToastContainer: typeof SharedToastContainer;
 };
+export {};

package/hooks/use-toast.js

@@ -1,117 +1,117 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Toast, ToastToggle } from 'flowbite-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useSyncExternalStore } from 'react';
 import { HiCheckCircle, HiExclamation, HiInformationCircle, } from 'react-icons/hi';
+let toasts = [];
+let hosts = [];
+const listeners = new Set();
+const timeouts = new Map();
+const EMPTY = [];
+function emit() {
+    listeners.forEach((listener) => listener());
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+function removeToast(id) {
+    const timeout = timeouts.get(id);
+    if (timeout) {
+        clearTimeout(timeout);
+        timeouts.delete(id);
+    }
+    toasts = toasts.filter((t) => t.id !== id);
+    emit();
+}
+function addToast(toast) {
+    const id = Math.random().toString(36).substring(2, 11);
+    const newToast = Object.assign({ id, duration: 5000 }, toast);
+    toasts = [...toasts, newToast];
+    emit();
+    if (newToast.duration && newToast.duration > 0) {
+        timeouts.set(id, setTimeout(() => removeToast(id), newToast.duration));
+    }
+}
+/** Test-only: clear the shared store between tests. */
+export function resetToastsForTests() {
+    timeouts.forEach(clearTimeout);
+    timeouts.clear();
+    toasts = [];
+    hosts = [];
+    emit();
+}
+const ICONS = {
+    success: HiCheckCircle,
+    error: HiExclamation,
+    warning: HiExclamation,
+    info: HiInformationCircle,
+};
+const COLORS = {
+    success: 'success',
+    error: 'failure',
+    warning: 'warning',
+    info: 'info',
+};
+const ICON_CLASSES = {
+    success: 'bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200',
+    error: 'bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200',
+    warning: 'bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200',
+    info: 'bg-primary-100 text-primary-500 dark:bg-primary-800 dark:text-primary-200',
+};
+/** Renders the shared toasts, but only in the first mounted container. */
+function SharedToastContainer() {
+    const hostId = useId();
+    useEffect(() => {
+        hosts = [...hosts, hostId];
+        emit();
+        return () => {
+            hosts = hosts.filter((h) => h !== hostId);
+            emit();
+        };
+    }, [hostId]);
+    const current = useSyncExternalStore(subscribe, () => toasts, () => EMPTY);
+    const isHost = useSyncExternalStore(subscribe, () => hosts[0] === hostId, () => false);
+    if (!isHost)
+        return null;
+    return (_jsx("div", { className: "fixed top-4 right-4 z-50 flex flex-col gap-2", children: current.map((toast) => {
+            var _a;
+            const Icon = (_a = ICONS[toast.type]) !== null && _a !== void 0 ? _a : HiInformationCircle;
+            return (_jsxs(Toast, { className: "min-w-80", color: COLORS[toast.type], children: [_jsx("div", { className: `inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${ICON_CLASSES[toast.type]}`, children: _jsx(Icon, { className: "h-5 w-5" }) }), _jsx("div", { className: "ml-3 text-sm font-normal", children: toast.message }), _jsx(ToastToggle, { onClick: () => removeToast(toast.id) })] }, toast.id));
+        }) }));
+}
 /**
- * A reusable toast notification hook built on Flowbite React components.
+ * Toast notifications on Flowbite React, shared across the app.
  *
- * Provides toast notifications with auto-dismiss functionality and consistent styling
- * across the RoboSystems ecosystem.
+ * Every call raises into one store, and the first mounted `ToastContainer`
+ * renders it, so a component can raise a toast without rendering a
+ * container of its own, and two containers never show a toast twice.
  *
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { showSuccess, showError, ToastContainer } = useToast()
- *
- *   const handleSuccess = () => {
- *     showSuccess('Operation completed successfully!')
- *   }
- *
+ *   const { showSuccess, ToastContainer } = useToast()
  *   return (
  *     <>
  *       <ToastContainer />
- *       <button onClick={handleSuccess}>Show Success Toast</button>
+ *       <button onClick={() => showSuccess('Saved')}>Save</button>
  *     </>
  *   )
  * }
  * ```
  */
 export function useToast() {
-    const [toasts, setToasts] = useState([]);
-    const timeoutRefs = useRef({});
-    const addToast = useCallback((toast) => {
-        const id = Math.random().toString(36).substring(2, 11);
-        const newToast = Object.assign({ id, duration: 5000 }, toast);
-        setToasts((prev) => [...prev, newToast]);
-        if (newToast.duration && newToast.duration > 0) {
-            const timeoutId = setTimeout(() => {
-                setToasts((prev) => prev.filter((t) => t.id !== id));
-                delete timeoutRefs.current[id];
-            }, newToast.duration);
-            timeoutRefs.current[id] = timeoutId;
-        }
-    }, []);
-    const removeToast = useCallback((id) => {
-        if (timeoutRefs.current[id]) {
-            clearTimeout(timeoutRefs.current[id]);
-            delete timeoutRefs.current[id];
-        }
-        setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, []);
-    const showSuccess = useCallback((message, duration) => {
-        addToast({ type: 'success', message, duration });
-    }, [addToast]);
-    const showError = useCallback((message, duration) => {
-        addToast({ type: 'error', message, duration });
-    }, [addToast]);
-    const showWarning = useCallback((message, duration) => {
-        addToast({ type: 'warning', message, duration });
-    }, [addToast]);
-    const showInfo = useCallback((message, duration) => {
-        addToast({ type: 'info', message, duration });
-    }, [addToast]);
-    // Cleanup all timeouts on unmount
-    useEffect(() => {
-        const timeouts = timeoutRefs.current;
-        return () => {
-            Object.values(timeouts).forEach(clearTimeout);
-        };
-    }, []);
-    const ToastContainer = useCallback(() => (_jsx("div", { className: "fixed top-4 right-4 z-50 flex flex-col gap-2", children: toasts.map((toast) => {
-            const getIcon = () => {
-                switch (toast.type) {
-                    case 'success':
-                        return HiCheckCircle;
-                    case 'error':
-                        return HiExclamation;
-                    case 'warning':
-                        return HiExclamation;
-                    case 'info':
-                        return HiInformationCircle;
-                    default:
-                        return HiInformationCircle;
-                }
-            };
-            const getColor = () => {
-                switch (toast.type) {
-                    case 'success':
-                        return 'success';
-                    case 'error':
-                        return 'failure';
-                    case 'warning':
-                        return 'warning';
-                    case 'info':
-                        return 'info';
-                    default:
-                        return 'info';
-                }
-            };
-            const Icon = getIcon();
-            const color = getColor();
-            return (_jsxs(Toast, { className: "min-w-80", color: color, children: [_jsx("div", { className: `inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${toast.type === 'success'
-                            ? 'bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200'
-                            : toast.type === 'error'
-                                ? 'bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200'
-                                : toast.type === 'warning'
-                                    ? 'bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200'
-                                    : 'bg-primary-100 text-primary-500 dark:bg-primary-800 dark:text-primary-200'}`, children: _jsx(Icon, { className: "h-5 w-5" }) }), _jsx("div", { className: "ml-3 text-sm font-normal", children: toast.message }), _jsx(ToastToggle, { onClick: () => removeToast(toast.id) })] }, toast.id));
-        }) })), [toasts, removeToast]);
+    const showSuccess = useCallback((message, duration) => addToast({ type: 'success', message, duration }), []);
+    const showError = useCallback((message, duration) => addToast({ type: 'error', message, duration }), []);
+    const showWarning = useCallback((message, duration) => addToast({ type: 'warning', message, duration }), []);
+    const showInfo = useCallback((message, duration) => addToast({ type: 'info', message, duration }), []);
     return {
         showSuccess,
         showError,
         showWarning,
         showInfo,
-        ToastContainer,
+        ToastContainer: SharedToastContainer,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosystems/core",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "description": "Shared RoboSystems frontend core library (auth, contexts, task monitoring, UI components) for the RoboSystems Next.js apps",
   "license": "MIT",
   "private": false,