@zuzjs/ui 0.7.9 → 0.8.1

package/dist/esm/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/esm/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/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/useWebSocket.d.ts

@@ -0,0 +1,15 @@
+import { dynamicObject } from "..";
+export type WebSocketOptions = {
+    onOpen?: (event: Event) => void;
+    onClose?: (event: CloseEvent) => void;
+    onRawMessage?: (event: MessageEvent) => void;
+    onMessage?: (data: dynamicObject) => void;
+    onError?: (event: Event) => void;
+    reconnect?: boolean;
+};
+declare const useWebSocket: (url: string, options?: WebSocketOptions) => {
+    isConnected: boolean;
+    messages: any[];
+    sendMessage: (message: string | object) => void;
+};
+export default useWebSocket;

package/dist/esm/hooks/useWebSocket.js

@@ -0,0 +1,87 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+const socketInstances = new Map();
+const listenersMap = new Map();
+const reconnectIntervals = new Map(); // Store dynamic reconnect intervals
+const useWebSocket = (url, options) => {
+    const { onOpen, onClose, onRawMessage, onMessage, onError, reconnect = true } = options || {};
+    const [isConnected, setIsConnected] = useState(false);
+    const [messages, setMessages] = useState([]);
+    const getReconnectInterval = (url) => reconnectIntervals.get(url) ?? 2;
+    const increaseReconnectInterval = (url) => {
+        const current = getReconnectInterval(url);
+        const next = Math.min(current * 2, 60); // Double each time, max 60s
+        reconnectIntervals.set(url, next);
+        return next * 1000;
+    };
+    const resetReconnectInterval = (url) => {
+        reconnectIntervals.set(url, 2); // Reset to 1s on successful reconnect
+    };
+    const connect = useCallback(() => {
+        if (socketInstances.has(url))
+            return; // Prevent duplicate connection
+        const socket = new WebSocket(url);
+        socketInstances.set(url, socket);
+        listenersMap.set(url, []);
+        socket.onopen = (event) => {
+            setIsConnected(true);
+            resetReconnectInterval(url);
+            onOpen?.(event);
+        };
+        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));
+        };
+        socket.onerror = (event) => {
+            onError?.(event);
+        };
+        socket.onclose = (event) => {
+            setIsConnected(false);
+            onClose?.(event);
+            socketInstances.delete(url);
+            listenersMap.delete(url);
+            if (reconnect && event.code !== 1000) { // 1000 = normal close
+                const delay = increaseReconnectInterval(url);
+                console.log(`Reconnecting in ${delay / 1000} seconds...`);
+                setTimeout(() => {
+                    if (!socketInstances.has(url))
+                        connect(); // Ensure only one instance reconnects
+                }, delay);
+            }
+        };
+    }, [url, onOpen, onClose, onMessage, onError, reconnect]);
+    useEffect(() => {
+        connect();
+        return () => {
+            if (listenersMap.get(url)?.length === 0) {
+                socketInstances.get(url)?.close();
+                socketInstances.delete(url);
+                listenersMap.delete(url);
+                reconnectIntervals.delete(url);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const messageListener = (event) => setMessages((prev) => [...prev, event.data]);
+        listenersMap.get(url)?.push(messageListener);
+        return () => {
+            const listeners = listenersMap.get(url) || [];
+            listenersMap.set(url, listeners.filter((listener) => listener !== messageListener));
+        };
+    }, [url]);
+    const sendMessage = useCallback((message) => {
+        const socket = socketInstances.get(url);
+        if (socket && socket.readyState === WebSocket.OPEN) {
+            const data = typeof message === "string" ? message : JSON.stringify(message);
+            socket.send(data);
+        }
+        else {
+            console.warn("WebSocket is not connected.");
+        }
+    }, [url]);
+    return { isConnected, messages, sendMessage };
+};
+export default useWebSocket;