@cripty2001/utils 0.0.39 → 0.0.41

package/dist/Logger/Logger.d.ts

@@ -0,0 +1,22 @@
+import { Whispr } from "@cripty2001/whispr";
+type LoggerItem = {
+    id: string;
+    date: Date;
+    message: string;
+    severity: "success" | "info" | "warning" | "error";
+    context: string | undefined;
+    dismiss: () => void;
+    trace: string | undefined;
+};
+declare class Logger {
+    private static instance;
+    lines: Whispr<LoggerItem[]>;
+    private setLines;
+    private constructor();
+    private reconstructError;
+    static getInstance(): Logger;
+    log(message: string, severity?: LoggerItem['severity'], context?: string): void;
+    logError(error: Error | DOMException | any): void;
+}
+declare const _default: Logger;
+export default _default;

package/dist/Logger/Logger.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const whispr_1 = require("@cripty2001/whispr");
+const __1 = require("..");
+class Logger {
+    static instance;
+    lines;
+    setLines;
+    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)));
+    }
+    reconstructError(e) {
+        if (e.error && e.error instanceof Error) {
+            return e.error;
+        }
+        if (e.message && typeof e.message === 'string') {
+            return new Error(e.message);
+        }
+        return new Error("Unknown error");
+    }
+    static getInstance() {
+        if (!Logger.instance) {
+            Logger.instance = new Logger();
+        }
+        return Logger.instance;
+    }
+    log(message, severity = "info", context) {
+        const item = {
+            id: (0, __1.getRandomId)(),
+            date: new Date(),
+            message,
+            severity,
+            context,
+            dismiss: () => {
+                this.setLines(this.lines.value.filter(i => i.id !== item.id));
+            },
+            trace: (new Error()).stack
+        };
+        this.setLines([...this.lines.value, item]);
+    }
+    logError(error) {
+        if (error instanceof DOMException ||
+            error instanceof Error ||
+            false) {
+            return this.log(error.message, "error", error.stack);
+        }
+        console.trace('UNKNOWN ERROR', error);
+        return this.log("Unknown error - See Console", "error");
+    }
+}
+exports.default = Logger.getInstance();

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

@@ -0,0 +1 @@
+export declare function LoggerReactDisplay(): import("react/jsx-runtime").JSX.Element;

package/dist/Logger/react-display.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoggerReactDisplay = LoggerReactDisplay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_whispr_1 = require("../react-whispr");
+const Logger_1 = __importDefault(require("./Logger"));
+const lucide_react_1 = require("lucide-react");
+function LoggerReactDisplay() {
+    const messages = (0, react_whispr_1.useWhisprValue)(Logger_1.default.lines);
+    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)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed bottom-0 right-0 w-full z-50  p-4 rounded ", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 items-center w-full justify-center", children: messages
+                .slice(0, 3)
+                .map((message) => ((0, jsx_runtime_1.jsxs)("div", { className: `p-2 rounded shadow-md text-white ng-black w-full max-w-prose cursor-pointer`, onClick: message.dismiss, style: {
+                    backgroundColor: getColor(message.severity)
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["[", relTs(message.date), "] "] }), message.context && (0, jsx_runtime_1.jsxs)("span", { className: "ml-2", children: [" - ", message.context, " "] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: message.dismiss, className: "ml-4 text-white font-bold", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-1", children: [" ", message.message, " "] })] }, message.id))) }) }));
+}

package/dist/react-whispr.d.ts

@@ -56,3 +56,10 @@ export declare function useDebounced<T>(value: T): T;
  * @type O Output for the async function
  */
 export declare function useAsync<I, O>(f: (input: I, setProgress: (p: number) => void, signal: AbortSignal) => Promise<O>, data: I, debouce?: number): Dispatcher<I, O>;
+/**
+ * Format a timestamp into a relative time string (e.g. "5 minutes ago", "in 2 hours"), using the browser locale.
+ * The refreshed time is reactive.
+ * @param refresh The refresh interval, in milliseconds. Default to 1000ms.
+ * @returns A callback (reactive, will change on refresh) that formats a given timestamp into a relative time string.
+ */
+export declare function useRelTime(refresh?: number): (ts: Date | number) => string;

package/dist/react-whispr.js

@@ -6,6 +6,7 @@ exports.useOnWhispr = useOnWhispr;
 exports.useCurrentTimestamp = useCurrentTimestamp;
 exports.useDebounced = useDebounced;
 exports.useAsync = useAsync;
+exports.useRelTime = useRelTime;
 const whispr_1 = require("@cripty2001/whispr");
 const react_1 = require("react");
 const lodash_1 = require("lodash");
@@ -118,3 +119,21 @@ function useAsync(f, data, debouce = 200) {
     // Returning dispatcher
     return dispatcher;
 }
+/**
+ * Format a timestamp into a relative time string (e.g. "5 minutes ago", "in 2 hours"), using the browser locale.
+ * The refreshed time is reactive.
+ * @param refresh The refresh interval, in milliseconds. Default to 1000ms.
+ * @returns A callback (reactive, will change on refresh) that formats a given timestamp into a relative time string.
+ */
+function useRelTime(refresh = 1000) {
+    const currTs = useCurrentTimestamp(refresh);
+    const rtf = (0, react_1.useRef)(new Intl.RelativeTimeFormat(navigator.language, { numeric: "auto" })).current;
+    const cb = (0, react_1.useCallback)((ts) => {
+        const now = currTs;
+        const then = ts instanceof Date ? ts.getTime() : ts;
+        const delta = then - now;
+        const seconds = Math.round(delta / 1000);
+        return rtf.format(seconds, "second");
+    }, [currTs, rtf]);
+    return cb;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cripty2001/utils",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "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": {
@@ -34,11 +34,12 @@
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
+    "lucide-react": "^0.552.0",
+    "@msgpack/msgpack": "^3.1.2",
     "@sinclair/typebox": "^0.34.41",
     "dotenv": "^17.2.3",
     "express": "^5.1.0",
-    "react": "^19",
-    "@msgpack/msgpack": "^3.1.2"
+    "react": "^19"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -71,4 +72,4 @@
       "types": "./dist/Appserver/client.d.ts"
     }
   }
-}
+}