@zuzjs/ui 0.8.0 → 0.8.2

package/dist/cjs/funs/index.js

@@ -1,6 +1,4 @@
-import axios from "axios";
 import Hashids from "hashids";
-import Cookies from "js-cookie";
 import md5 from "md5";
 import moment from "moment";
 import { nanoid } from "nanoid";
@@ -205,88 +203,6 @@ export const removeDuplicatesFromArray = (array) => {
         return accumulator;
     }, []);
 };
-export const withPost = async (uri, data, timeout = 60, onProgress) => {
-    const _cookies = Cookies.get();
-    if (data instanceof FormData) {
-        for (const c in _cookies) {
-            data.append(c, _cookies[c]);
-        }
-        return new Promise((resolve, reject) => {
-            axios({
-                method: 'post',
-                url: uri,
-                data: data,
-                timeout: timeout * 1000,
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-                onUploadProgress: ev => onProgress && onProgress(ev)
-            })
-                .then(resp => {
-                if (resp.data && "kind" in resp.data) {
-                    resolve(resp.data);
-                }
-                else {
-                    reject(resp.data);
-                }
-            })
-                .catch(err => reject(err));
-        });
-    }
-    return new Promise((resolve, reject) => {
-        axios.post(uri, {
-            ...data,
-            ..._cookies,
-            __stmp: new Date().getTime() / 1000
-        }, {
-            timeout: 1000 * timeout,
-            headers: {
-                'Content-Type': 'application/json',
-            }
-        })
-            .then(resp => {
-            if (resp.data && "kind" in resp.data) {
-                resolve(resp.data);
-            }
-            else {
-                reject(resp.data);
-            }
-        })
-            .catch(err => {
-            if (err?.response?.data)
-                reject(err.response.data);
-            else
-                reject(err.code && err.code == `ERR_NETWORK` ? { error: err.code, message: navigator.onLine ? `Unable to connect to the server. It may be temporarily down.` : `Network error: Unable to connect. Please check your internet connection and try again.` } : err);
-        });
-    });
-};
-export const withGet = async (uri, timeout = 60, ignoreKind = false) => {
-    return new Promise((resolve, reject) => {
-        axios
-            .get(uri, { timeout: timeout * 1000 })
-            .then((resp) => {
-            if (ignoreKind || (resp.data && "kind" in resp.data)) {
-                resolve(resp.data);
-            }
-            else {
-                reject(resp.data);
-            }
-        })
-            .catch((err) => {
-            if (err?.response?.data)
-                reject(err.response.data);
-            else
-                reject(err.code === `ERR_NETWORK`
-                    ? {
-                        error: err.code,
-                        message: navigator.onLine
-                            ? `Unable to connect to the server. It may be temporarily down.`
-                            : `Network error: Unable to connect. Please check your internet connection and try again.`,
-                    }
-                    : err);
-        });
-    });
-};
 export const withTime = (fun) => {
     const start = new Date().getTime();
     const result = fun();
@@ -546,3 +462,42 @@ export const truncate = (selector, lines = 2) => {
         }
     });
 };
+export const checkPasswordStrength = (password) => {
+    const suggestions = [];
+    let score = 0;
+    if (password.length >= 8) {
+        score++;
+    }
+    else {
+        suggestions.push("Use at least 8 characters");
+    }
+    if (/[a-z]/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Add lowercase letters");
+    }
+    if (/[A-Z]/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Add uppercase letters");
+    }
+    if (/\d/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Include numbers");
+    }
+    if (/[^A-Za-z0-9]/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Add special characters (e.g. !, @, #)");
+    }
+    return {
+        score,
+        result: score <= 2 ? "Weak" : score == 3 ? "Moderate" : score == 4 ? "Strong" : "Excellent",
+        suggestion: suggestions
+    };
+};

package/dist/cjs/hooks/index.d.ts

@@ -16,7 +16,10 @@ export { default as useMergedRefs } from './useMergedRefs';
 export { default as useMutationObserver, type MutationCallback } from './useMutationObserver';
 export { default as useDrag, type DragOptions } from './useDrag';
 export { default as useFileManager } from './useFileManager';
+export { default as useFacebookPixel } from './useFacebookPixel';
+export { default as useGoogleTagManager } from './useGoogleTagManager';
 export { default as useImage } from './useImage';
+export { default as useImageCropper } from './useImageCropper';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
 export { default as useSheet } from './useSheet';
@@ -25,5 +28,6 @@ export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useTruncateText } from './useTruncateText';
+export { default as useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket, type WebSocketOptions } from './useWebSocket';

package/dist/cjs/hooks/index.js

@@ -17,7 +17,10 @@ export { default as useMutationObserver } from './useMutationObserver';
 export { default as useDrag } from './useDrag';
 export { default as useFileManager } from './useFileManager';
 //useFilter
+export { default as useFacebookPixel } from './useFacebookPixel';
+export { default as useGoogleTagManager } from './useGoogleTagManager';
 export { default as useImage } from './useImage';
+export { default as useImageCropper } from './useImageCropper';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
 export { default as useSheet } from './useSheet';
@@ -26,5 +29,6 @@ export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useTruncateText } from './useTruncateText';
+export { default as useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket } from './useWebSocket';

package/dist/cjs/hooks/useDB.d.ts

@@ -17,10 +17,14 @@ export interface IDBSchema {
     unique?: boolean;
 }
 declare const useDB: (options: IDBOptions) => {
+    getAll: <T>(storeName: string) => Promise<T>;
     getByID: <T>(storeName: string, id: string | number) => Promise<T>;
     getStore: <T>(storeName: string, id: string | number) => Promise<T>;
     insert: <T>(storeName: string, value: T, key?: any) => Promise<number>;
-    update: <T>(storeName: string, value: T, key: IDBValidKey) => Promise<void>;
+    update: <T>(storeName: string, values: {
+        [x: string | number | symbol]: T;
+    }) => Promise<void>;
+    update_one: <T extends Object>(storeName: string, value: Partial<T>, key: IDBValidKey) => Promise<void>;
     remove: (storeName: string, key: IDBValidKey) => Promise<void>;
     error: string | null;
 };

package/dist/cjs/hooks/useDB.js

@@ -65,6 +65,25 @@ const useDB = (options) => {
             reject(err.message || 'Database either corrupted or not initialized');
         });
     });
+    const getAll = (storeName) => new Promise((resolve, reject) => {
+        connect().then((db) => {
+            const { store } = createTransaction(storeName, DBMode.readOnly);
+            const request = store.getAll();
+            request.onsuccess = (evt) => {
+                const result = evt.target.result;
+                if (undefined == result)
+                    reject('Record not found');
+                resolve(evt.target.result);
+            };
+            request.onerror = (evt) => {
+                reject(`SELECT Failed. ${evt.target.result}`);
+            };
+        })
+            .catch(err => {
+            console.log(`[getAll]`, err);
+            reject('Database either corrupted or not initialized');
+        });
+    });
     const getByID = (storeName, id) => new Promise((resolve, reject) => {
         connect().then((db) => {
             const { store } = createTransaction(storeName, DBMode.readOnly);
@@ -80,7 +99,7 @@ const useDB = (options) => {
             };
         })
             .catch(err => {
-            // console.log(`getByID`, err)
+            console.log(`[getByID]`, err);
             reject('Database either corrupted or not initialized');
         });
     });
@@ -99,16 +118,43 @@ const useDB = (options) => {
             reject(err.message || 'Database either corrupted or not initialized');
         });
     });
-    const update = (storeName, value, key) => new Promise((resolve, reject) => {
+    const update_one = (storeName, value, key) => new Promise((resolve, reject) => {
         connect().then((db) => {
             const { store } = createTransaction(storeName, DBMode.readWrite);
-            const request = store.put(value, key);
+            const getReq = store.get(key);
+            getReq.onsuccess = () => {
+                const existing = getReq.result;
+                if (!existing) {
+                    reject(`Record with key ${key} not found.`);
+                    return;
+                }
+                const updateReq = store.put({ ...existing, ...value });
+                updateReq.onsuccess = () => resolve();
+                updateReq.onerror = (evt) => reject(`Update failed. ${evt.target.error}`);
+            };
+            getReq.onerror = (evt) => {
+                reject(`Failed to get existing record. ${evt.target.error}`);
+            };
+        })
+            .catch(err => {
+            reject('Database either corrupted or not initialized');
+        });
+    });
+    const update = (storeName, values) => new Promise((resolve, reject) => {
+        connect().then((db) => {
+            const { store } = createTransaction(storeName, DBMode.readWrite);
+            let completed = 0;
+            const request = store.put(values);
             request.onsuccess = (evt) => {
                 resolve();
             };
+            request.onerror = (evt) => {
+                reject(`UPDATE Failed. ${evt.target.result}`);
+            };
         })
             .catch(err => {
-            reject('Database either corrupted or not initialized');
+            reject(`UPDATE Failed. ${err}`);
+            // reject('Database either corrupted or not initialized');
         });
     });
     const remove = (storeName, key) => new Promise((resolve, reject) => {
@@ -125,10 +171,12 @@ const useDB = (options) => {
         });
     });
     return {
+        getAll,
         getByID,
         getStore,
         insert,
         update,
+        update_one,
         remove,
         error
     };

package/dist/cjs/hooks/useFacebookPixel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Custom hook for Facebook Pixel tracking
+ * @param pixelId - Facebook Pixel ID (e.g., '123456789012345')
+ * @param debug - Optional debug mode (default: false)
+ */
+declare const useFacebookPixel: (pixelId?: string, debug?: boolean) => {
+    trackPageView: () => void;
+    trackEvent: (eventName: string, params?: Record<string, any>) => void;
+    trackCustom: (eventName: string, params?: Record<string, any>) => void;
+};
+export default useFacebookPixel;

package/dist/cjs/hooks/useFacebookPixel.js

@@ -0,0 +1,64 @@
+import { useEffect } from "react";
+/**
+ * Custom hook for Facebook Pixel tracking
+ * @param pixelId - Facebook Pixel ID (e.g., '123456789012345')
+ * @param debug - Optional debug mode (default: false)
+ */
+const useFacebookPixel = (pixelId, debug = false) => {
+    // Initialize Facebook Pixel
+    useEffect(() => {
+        if (!pixelId)
+            return;
+        // Load Facebook Pixel script if not already loaded
+        if (!window.fbq) {
+            const script = document.createElement('script');
+            script.async = true;
+            script.src = `https://connect.facebook.net/en_US/fbevents.js`;
+            document.head.appendChild(script);
+            window._fbq = window._fbq || [];
+            window.fbq = function () {
+                window._fbq.push(arguments);
+            };
+            window.fbq('init', pixelId);
+            if (debug) {
+                window.fbq('set', 'debug', true);
+            }
+        }
+        // Track initial page view
+        window.fbq('track', 'PageView');
+    }, [pixelId, debug]);
+    /**
+     * Track a page view
+     */
+    const trackPageView = () => {
+        if (!pixelId)
+            return;
+        window.fbq('track', 'PageView');
+    };
+    /**
+     * Track a custom event
+     * @param eventName - Standard or custom event name
+     * @param params - Optional event parameters
+     */
+    const trackEvent = (eventName, params) => {
+        if (!pixelId)
+            return;
+        window.fbq('track', eventName, params);
+    };
+    /**
+     * Track a custom conversion
+     * @param eventName - Conversion event name
+     * @param params - Optional conversion parameters
+     */
+    const trackCustom = (eventName, params) => {
+        if (!pixelId)
+            return;
+        window.fbq('trackCustom', eventName, params);
+    };
+    return {
+        trackPageView,
+        trackEvent,
+        trackCustom,
+    };
+};
+export default useFacebookPixel;

package/dist/cjs/hooks/useGoogleTagManager.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Custom hook for Google gtag (Global Site Tag) tracking
+ * @param id - Google Analytics tracking ID (e.g., 'G-XXXXXXXXXX')
+ */
+declare const useGtag: (id?: string) => {
+    trackPageView: (path?: string) => void;
+    trackEvent: (eventName: string, params?: Record<string, any>) => void;
+};
+export default useGtag;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;
 };