@zuzjs/ui 0.8.0 → 0.8.2

package/dist/esm/hooks/useGoogleTagManager.js

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+/**
+ * Custom hook for Google gtag (Global Site Tag) tracking
+ * @param id - Google Analytics tracking ID (e.g., 'G-XXXXXXXXXX')
+ */
+const useGtag = (id) => {
+    // Initialize gtag.js
+    useEffect(() => {
+        if (!id)
+            return;
+        // Load gtag.js script if not already loaded
+        if (!window.gtag) {
+            const script = document.createElement('script');
+            script.async = true;
+            script.src = `https://www.googletagmanager.com/gtag/js?id=${id}`;
+            document.head.appendChild(script);
+            window.dataLayer = window.dataLayer || [];
+            window.gtag = function () {
+                window.dataLayer.push(arguments);
+            };
+            // Set the current date/time
+            window.gtag('js', new Date());
+        }
+        // Configure the tracker
+        window.gtag('config', id);
+    }, [id]);
+    /**
+     * Track a page view
+     * @param path - URL path to track (defaults to current location)
+     */
+    const trackPageView = (path) => {
+        if (!id)
+            return;
+        window.gtag('config', id, {
+            page_path: path || window.location.pathname,
+        });
+    };
+    /**
+     * Track an event
+     * @param eventName - Event name (e.g., 'login', 'sign_up')
+     * @param params - Additional event parameters
+     */
+    const trackEvent = (eventName, params) => {
+        if (!id)
+            return;
+        window.gtag('event', eventName, params);
+    };
+    return {
+        trackPageView,
+        trackEvent,
+    };
+};
+export default useGtag;

package/dist/esm/hooks/useImage.js

@@ -1,8 +1,8 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 const useImage = (url, crossOrigin, referrerPolicy) => {
-    const img = useRef(null);
     const [state, setState] = useState({ loaded: false, error: null });
+    const img = useRef(null);
     useEffect(() => {
         if (url && url !== ``) {
             var _img = new Image();
@@ -17,7 +17,7 @@ const useImage = (url, crossOrigin, referrerPolicy) => {
             };
             _img.src = url;
         }
-    }, []);
+    }, [url]);
     return [img.current ? img.current.src : ``, state.loaded, state.error];
 };
 export default useImage;

package/dist/esm/hooks/useImageCropper.d.ts

@@ -0,0 +1,10 @@
+import { CropShape } from '..';
+declare const useImageCropper: (imageUrl: string, cropSize: number, cropShape?: CropShape, scale?: number) => {
+    canvasRef: import("react").RefObject<HTMLCanvasElement | null>;
+    crop: () => string | null;
+    setScale: import("react").Dispatch<import("react").SetStateAction<number>>;
+    handleMouseDown: () => void;
+    handleMouseUp: () => void;
+    handleMouseMove: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+};
+export default useImageCropper;

package/dist/esm/hooks/useImageCropper.js

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+import { CropShape } from '..';
+const useImageCropper = (imageUrl, cropSize, cropShape = CropShape.Circle, scale = 1) => {
+    const [dragging, setDragging] = useState(false);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [_scale, setScale] = useState(scale);
+    const imgRef = useRef(null);
+    const canvasRef = useRef(null);
+    const draw = () => {
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext('2d');
+        const img = imgRef.current;
+        if (!canvas || !ctx || !img)
+            return;
+        canvas.width = cropSize;
+        canvas.height = cropSize;
+        ctx.clearRect(0, 0, cropSize, cropSize);
+        ctx.globalAlpha = 0.5;
+        ctx.drawImage(img, offset.x, offset.y, img.width * _scale, img.height * _scale);
+        ctx.globalAlpha = 1.0;
+        ctx.save();
+        if (cropShape === CropShape.Circle) {
+            ctx.beginPath();
+            ctx.arc(cropSize / 2, cropSize / 2, cropSize / 2, 0, Math.PI * 2);
+            ctx.closePath();
+            ctx.clip();
+        }
+        ctx.drawImage(img, offset.x, offset.y, img.width * _scale, img.height * _scale);
+        ctx.restore();
+    };
+    useEffect(draw, [_scale]);
+    useEffect(() => {
+        if (imageUrl) {
+            const img = new Image();
+            img.onload = () => {
+                imgRef.current = img;
+                draw();
+            };
+            img.src = imageUrl;
+        }
+    }, [imageUrl, offset]);
+    const handleMouseDown = () => setDragging(true);
+    const handleMouseUp = () => setDragging(false);
+    const handleMouseMove = (e) => {
+        if (!dragging || !imgRef.current)
+            return;
+        setOffset(prev => ({
+            x: prev.x + e.movementX,
+            y: prev.y + e.movementY,
+        }));
+    };
+    const crop = () => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return null;
+        return canvas.toDataURL('image/png');
+    };
+    return {
+        canvasRef,
+        crop,
+        setScale,
+        handleMouseDown,
+        handleMouseUp,
+        handleMouseMove,
+    };
+};
+export default useImageCropper;

package/dist/esm/hooks/useUploader.d.ts

@@ -0,0 +1,46 @@
+import { CancelTokenSource } from "@zuzjs/core";
+import { dynamic } from "..";
+export declare enum Status {
+    Error = -1,
+    Idle = 0,
+    FetchingServer = 1,
+    Uploading = 2,
+    Saving = 3
+}
+export interface QueItem {
+    ID: string;
+    file: File;
+    dir: string;
+    remote: false;
+    progress: number;
+    speed: number;
+    eta: number;
+    bytes: number;
+    status: Status;
+    server?: Server | null;
+}
+export type Server = {
+    ID: string;
+    uri: string;
+    token: string;
+    rmf: string | null;
+};
+export type Uploadify = {
+    que: QueItem[];
+    index: number;
+    speed: number;
+    stamp: number | null;
+    token: string | null;
+    status: Status;
+    cancelToken?: CancelTokenSource | null;
+};
+export interface Uploader {
+    apiUrl: string;
+    onChange?: (file: QueItem | null) => void;
+    onQueFinished?: () => void;
+}
+declare const useUploader: (conf: Uploader) => {
+    getQue: () => QueItem[];
+    addToQue: (f: dynamic) => void;
+};
+export default useUploader;

package/dist/esm/hooks/useUploader.js

@@ -0,0 +1,101 @@
+import { getCancelToken, withPost } from "@zuzjs/core";
+import { uuid } from "..";
+export var Status;
+(function (Status) {
+    Status[Status["Error"] = -1] = "Error";
+    Status[Status["Idle"] = 0] = "Idle";
+    Status[Status["FetchingServer"] = 1] = "FetchingServer";
+    Status[Status["Uploading"] = 2] = "Uploading";
+    Status[Status["Saving"] = 3] = "Saving";
+})(Status || (Status = {}));
+const useUploader = (conf) => {
+    const { apiUrl, onChange, onQueFinished } = conf;
+    const self = {
+        que: [],
+        index: -1,
+        speed: 0,
+        stamp: null,
+        token: null,
+        status: Status.Idle
+    };
+    const sync = () => onChange?.(currentFile());
+    const importFile = () => { };
+    const uploadFile = () => {
+        self.stamp = Date.now();
+        const file = currentFile();
+        const formData = new FormData();
+        formData.append("ID", file.ID);
+        formData.append("dir", file.dir);
+        formData.append("server", file.server.ID);
+        formData.append("token", file.server.token);
+        formData.append('file', file.file);
+        formData.append('fs', file.file.size.toString());
+        self.cancelToken = getCancelToken();
+        withPost(`${self.que[self.index].server.uri}/receive`, formData, 86400, true, (ev) => {
+            console.log(ev);
+        })
+            .catch(resp => {
+            console.log(`Uploaded`, resp);
+        })
+            .catch(err => {
+            self.que[self.index].status = Status.Error;
+            self.status = Status.Idle;
+            sync();
+            Que();
+        });
+    };
+    const getServer = (force) => {
+        self.que[self.index].status = Status.FetchingServer;
+        sync();
+        withPost(`${apiUrl}get_server`, { size: currentFile().file.size })
+            .then((resp) => {
+            self.que[self.index].server = resp.server;
+            self.que[self.index].status = Status.Uploading;
+            sync();
+            uploadFile();
+        })
+            .catch((err) => {
+            self.que[self.index].status = Status.Error;
+            self.status = Status.Idle;
+            sync();
+            Que();
+        });
+    };
+    const currentFile = () => self.que[self.index];
+    const getQue = () => self.que;
+    const Que = () => {
+        if (self.status == Status.Idle &&
+            (self.que.length - 1) > self.index) {
+            self.status = Status.Uploading;
+            self.index++;
+            self.que[self.index].status = Status.Uploading;
+            sync();
+            if (self.que[self.index].remote)
+                importFile();
+            else
+                getServer(true);
+        }
+        else
+            onQueFinished?.();
+    };
+    const addToQue = (f) => {
+        self.que.push({
+            ID: uuid(),
+            file: f.file,
+            dir: f.dir,
+            remote: f.remote,
+            progress: 0,
+            speed: 0,
+            eta: 0,
+            bytes: 0,
+            status: Status.Idle,
+            server: null
+        });
+        Que();
+    };
+    return {
+        getQue,
+        addToQue,
+    };
+};
+export default useUploader;

package/dist/esm/hooks/useWebSocket.d.ts

@@ -1,9 +1,9 @@
-import { dynamicObject } from "..";
+import { dynamic } from "..";
 export type WebSocketOptions = {
     onOpen?: (event: Event) => void;
     onClose?: (event: CloseEvent) => void;
     onRawMessage?: (event: MessageEvent) => void;
-    onMessage?: (data: dynamicObject) => void;
+    onMessage?: (data: dynamic) => void;
     onError?: (event: Event) => void;
     reconnect?: boolean;
 };

package/dist/esm/hooks/useWebSocket.js

@@ -18,8 +18,19 @@ const useWebSocket = (url, options) => {
         reconnectIntervals.set(url, 2); // Reset to 1s on successful reconnect
     };
     const connect = useCallback(() => {
-        if (socketInstances.has(url))
+        if (socketInstances.has(url)) {
+            const Socket = socketInstances.get(url);
+            if (Socket) {
+                Socket.onmessage = (event) => {
+                    setMessages((prev) => [...prev, event.data]);
+                    onRawMessage?.(event);
+                    const raw = JSON.parse(Buffer.isBuffer(event) ? event.toString(`utf8`) : `string` == typeof event ? event : event.data);
+                    onMessage?.(raw);
+                    listenersMap.get(url)?.forEach((listener) => listener(event));
+                };
+            }
             return; // Prevent duplicate connection
+        }
         const socket = new WebSocket(url);
         socketInstances.set(url, socket);
         listenersMap.set(url, []);
@@ -79,7 +90,7 @@ const useWebSocket = (url, options) => {
             socket.send(data);
         }
         else {
-            console.warn("WebSocket is not connected.");
+            console.log("WebSocket is not connected.");
         }
     }, [url]);
     return { isConnected, messages, sendMessage };

package/dist/esm/types/index.d.ts

@@ -5,6 +5,9 @@ import { animationProps, Skeleton } from "./interfaces";
 export type Deprecated<T, M extends string> = T & {
     __deprecatedMessage?: M;
 };
+export type dynamic = {
+    [x: string]: any;
+};
 export type dynamicObject = {
     [x: string]: any;
 };