@cripty2001/utils 0.0.225 → 0.0.227

package/dist/Logger/Logger.d.ts

@@ -12,11 +12,13 @@ declare class Logger {
     private static instance;
     lines: Whispr<LoggerItem[]>;
     private setLines;
+    private readonly dismissTimers;
     private constructor();
     private reconstructError;
     static getInstance(): Logger;
+    private removeItem;
     log(message: string, severity?: LoggerItem['severity'], context?: string): void;
-    logError(error: Error | DOMException | any): void;
+    logError(error: Error | DOMException | unknown): void;
 }
 declare const _default: Logger;
 export default _default;

package/dist/Logger/Logger.js

@@ -2,14 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const whispr_1 = require("@cripty2001/whispr");
 const __1 = require("..");
+const AUTO_DISMISS_MS = {
+    success: 5000,
+    info: 5000,
+    warning: 6000,
+    error: 8000,
+};
 class Logger {
     static instance;
     lines;
     setLines;
+    dismissTimers = new Map();
     constructor() {
         [this.lines, this.setLines] = whispr_1.Whispr.create([]);
-        window.addEventListener("unhandledrejection", (e) => this.log(e.reason, "error"));
-        window.addEventListener("error", (e) => this.logError(this.reconstructError(e)));
+        if (typeof window !== "undefined") {
+            window.addEventListener("unhandledrejection", (e) => this.log(e.reason, "error"));
+            window.addEventListener("error", (e) => this.logError(this.reconstructError(e)));
+        }
     }
     reconstructError(e) {
         if (e.error && e.error instanceof Error) {
@@ -26,24 +35,34 @@ class Logger {
         }
         return Logger.instance;
     }
+    removeItem(id) {
+        const timer = this.dismissTimers.get(id);
+        if (timer !== undefined) {
+            clearTimeout(timer);
+            this.dismissTimers.delete(id);
+        }
+        this.setLines(this.lines.value.filter((i) => i.id !== id));
+    }
     log(message, severity = "info", context) {
+        const id = (0, __1.getRandomId)();
         const item = {
-            id: (0, __1.getRandomId)(),
+            id,
             date: new Date(),
             message,
             severity,
             context,
-            dismiss: () => {
-                this.setLines(this.lines.value.filter(i => i.id !== item.id));
-            },
-            trace: (new Error()).stack
+            dismiss: () => this.removeItem(id),
+            trace: (new Error()).stack,
         };
         this.setLines([...this.lines.value, item]);
+        if (typeof window !== "undefined") {
+            const timer = window.setTimeout(() => item.dismiss(), AUTO_DISMISS_MS[severity]);
+            this.dismissTimers.set(id, timer);
+        }
     }
     logError(error) {
         if (error instanceof DOMException ||
-            error instanceof Error ||
-            false) {
+            error instanceof Error) {
             return this.log(error.message, "error", error.stack);
         }
         console.trace('UNKNOWN ERROR', error);

package/dist/react/index.d.ts

@@ -1 +1 @@
-export { LoggerReactDisplay } from './logger-display';
+export { LoggerReactDisplay, type LoggerReactDisplayProps } from './logger-display';

package/dist/react/logger-display.d.ts

@@ -1 +1,4 @@
-export declare function LoggerReactDisplay(): import("react/jsx-runtime").JSX.Element;
+export type LoggerReactDisplayProps = {
+    zIndex?: number;
+};
+export declare function LoggerReactDisplay({ zIndex }: LoggerReactDisplayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/react/logger-display.js

@@ -8,68 +8,44 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const Logger_1 = __importDefault(require("../Logger/Logger"));
 const react_whispr_1 = require("../react-whispr");
-function LoggerReactDisplay() {
-    const messages = (0, react_whispr_1.useWhisprValue)(Logger_1.default.lines);
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            position: 'fixed',
-            bottom: 0,
-            right: 0,
-            width: '100%',
-            zIndex: 50,
-            padding: '1rem',
-            borderRadius: '0.5rem',
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '0.5rem',
-                alignItems: 'center',
-                width: '100%',
-                justifyContent: 'center',
-            }, children: [...messages]
-                .reverse()
-                .slice(0, 3)
-                .map((message) => ((0, jsx_runtime_1.jsx)(LoggerReactDisplayItem, { message: message }, message.id))) }) }));
-}
+const SEVERITY_STYLES = {
+    error: {
+        icon: lucide_react_1.AlertCircle,
+        container: "border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/40",
+        iconClass: "text-red-600 dark:text-red-400",
+        textClass: "text-red-800 dark:text-red-200",
+    },
+    warning: {
+        icon: lucide_react_1.TriangleAlert,
+        container: "border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/40",
+        iconClass: "text-amber-600 dark:text-amber-400",
+        textClass: "text-amber-900 dark:text-amber-200",
+    },
+    success: {
+        icon: lucide_react_1.CheckCircle2,
+        container: "border-emerald-200 bg-emerald-50 dark:border-emerald-900/50 dark:bg-emerald-950/40",
+        iconClass: "text-emerald-600 dark:text-emerald-400",
+        textClass: "text-emerald-900 dark:text-emerald-200",
+    },
+    info: {
+        icon: lucide_react_1.Info,
+        container: "border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-950/40",
+        iconClass: "text-blue-600 dark:text-blue-400",
+        textClass: "text-blue-900 dark:text-blue-200",
+    },
+};
+const MAX_VISIBLE_TOASTS = 3;
+/** ~5 lines at text-sm / leading-snug */
+const MESSAGE_MAX_HEIGHT_CLASS = "max-h-[6.875rem]";
 function LoggerReactDisplayItem({ message }) {
-    const getColor = (severity) => {
-        switch (severity) {
-            case 'success':
-                return '#4CAF50';
-            case 'info':
-                return '#2196F3';
-            case 'warning':
-                return '#FF9800';
-            case 'error':
-                return '#F44336';
-            default:
-                return '#333';
-        }
-    };
-    const relTs = (0, react_whispr_1.useRelTime)(message.date);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            padding: '0.5rem',
-            borderRadius: '0.375rem',
-            boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-            color: '#fff',
-            width: '100%',
-            maxWidth: '65ch',
-            cursor: 'pointer',
-            backgroundColor: getColor(message.severity)
-        }, onClick: message.dismiss, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["[", relTs, "] "] }), message.context && (0, jsx_runtime_1.jsxs)("span", { style: {
-                                    marginLeft: '0.5rem',
-                                }, children: [" - ", message.context, " "] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: message.dismiss, style: {
-                            marginLeft: '1rem',
-                            color: '#fff',
-                            fontWeight: 'bold',
-                            background: 'none',
-                            border: 'none',
-                            cursor: 'pointer',
-                            padding: 0,
-                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    marginTop: '0.25rem',
-                }, children: message.message })] }, message.id));
+    const styles = SEVERITY_STYLES[message.severity];
+    const Icon = styles.icon;
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: `flex items-start gap-3 rounded-lg border px-3 py-2.5 shadow-lg ${styles.container}`, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 16, className: `mt-0.5 shrink-0 ${styles.iconClass}` }), (0, jsx_runtime_1.jsx)("p", { className: `min-w-0 flex-1 overflow-y-auto text-sm leading-snug ${MESSAGE_MAX_HEIGHT_CLASS} ${styles.textClass}`, children: message.message }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: message.dismiss, className: "shrink-0 rounded p-0.5 text-gray-400 hover:bg-black/5 hover:text-gray-600 dark:hover:bg-white/10 dark:hover:text-gray-200", "aria-label": "Dismiss", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }) })] }));
+}
+function LoggerReactDisplay({ zIndex = 5000 }) {
+    const messages = (0, react_whispr_1.useWhisprValue)(Logger_1.default.lines);
+    const visible = [...messages].reverse().slice(0, MAX_VISIBLE_TOASTS);
+    if (visible.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none fixed inset-x-0 bottom-4 flex justify-center px-4", style: { zIndex }, children: (0, jsx_runtime_1.jsx)("div", { className: "pointer-events-auto flex w-full max-w-sm flex-col gap-2", children: visible.map((message) => ((0, jsx_runtime_1.jsx)(LoggerReactDisplayItem, { message: message }, message.id))) }) }));
 }

package/dist/react-ui/button.d.ts

@@ -2,5 +2,6 @@ export type ButtonProps = {
     onClick: () => unknown | Promise<unknown>;
     children: React.ReactElement;
     className?: string;
+    onError?: (error: unknown) => void;
 };
-export default function Button({ onClick, children, className }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function Button({ onClick, children, className, onError }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/react-ui/button.js

@@ -4,7 +4,7 @@ exports.default = Button;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
-function Button({ onClick, children, className }) {
+function Button({ onClick, children, className, onError }) {
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const handleClick = async () => {
@@ -20,7 +20,9 @@ function Button({ onClick, children, className }) {
         })()
             .catch(e => {
             console.trace("Caught error in button", e);
-            setError(e instanceof Error ? e.message : "Unknown error");
+            const handleError = onError
+                ?? ((err) => setError(err instanceof Error ? err.message : "Unknown error"));
+            handleError(e);
         })
             .finally(() => setLoading(false));
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cripty2001/utils",
-  "version": "0.0.225",
+  "version": "0.0.227",
   "description": "Internal Set of utils. If you need them use them, otherwise go to the next package ;)",
   "homepage": "https://github.com/cripty2001/utils#readme",
   "bugs": {
@@ -87,9 +87,9 @@
       "require": "./dist/Logger/Logger.js"
     },
     "./logger/react": {
-      "import": "./dist/Logger/react-display.js",
-      "types": "./dist/Logger/react-display.d.ts",
-      "require": "./dist/Logger/react-display.js"
+      "import": "./dist/react/logger-display.js",
+      "types": "./dist/react/logger-display.d.ts",
+      "require": "./dist/react/logger-display.js"
     },
     "./appserver/server": {
       "import": "./dist/Appserver/server.js",