@djangocfg/ui-core 1.0.1

package/src/components/tooltip-provider-safe.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from 'react';
+import { TooltipProvider as RadixTooltipProvider } from '@radix-ui/react-tooltip';
+
+interface SafeTooltipProviderProps {
+  children: React.ReactNode;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  disableHoverableContent?: boolean;
+}
+
+/**
+ * SafeTooltipProvider - SSR-safe wrapper for Radix TooltipProvider
+ * Only renders on client-side to avoid hydration mismatches
+ */
+export function SafeTooltipProvider({
+  children,
+  delayDuration = 700,
+  skipDelayDuration = 300,
+  disableHoverableContent,
+}: SafeTooltipProviderProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // During SSR, return children without TooltipProvider
+    return <>{children}</>;
+  }
+
+  return (
+    <RadixTooltipProvider
+      delayDuration={delayDuration}
+      skipDelayDuration={skipDelayDuration}
+      disableHoverableContent={disableHoverableContent}
+    >
+      {children}
+    </RadixTooltipProvider>
+  );
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-150 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/index.ts

@@ -0,0 +1,15 @@
+// ============================================================================
+// Hooks - Reusable React Hooks (No Next.js/Browser Storage dependencies)
+// For use in Electron, Vite, CRA apps
+// ============================================================================
+
+export { useCountdown } from './useCountdown';
+export { useDebouncedCallback } from './useDebouncedCallback';
+export { useDebounce } from './useDebounce';
+export { useDebugTools } from './useDebugTools';
+export { useEventListener, events } from './useEventsBus';
+export { useIsMobile } from './useMobile';
+export { useMediaQuery } from './useMediaQuery';
+export { useCopy } from './useCopy';
+export { useImageLoader } from './useImageLoader';
+export { useToast, toast } from './useToast';

package/src/hooks/useCopy.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { useToast } from './useToast';
+
+interface UseCopyOptions {
+    successMessage?: string;
+    errorMessage?: string;
+}
+
+export const useCopy = (options: UseCopyOptions = {}) => {
+    const { toast } = useToast();
+
+    const {
+        successMessage = "Copied to clipboard",
+        errorMessage = "Failed to copy to clipboard"
+    } = options;
+
+    const copyToClipboard = useCallback(async (text: string, customSuccessMessage?: string) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            toast({
+                title: "Success!",
+                description: customSuccessMessage || successMessage,
+                variant: "default",
+            });
+            return true;
+        } catch (error) {
+            console.error('Failed to copy:', error);
+            toast({
+                title: "Error",
+                description: errorMessage,
+                variant: "destructive",
+            });
+            return false;
+        }
+    }, [toast, successMessage, errorMessage]);
+
+    return { copyToClipboard };
+};

package/src/hooks/useCountdown.ts

@@ -0,0 +1,73 @@
+'use client';
+
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+
+interface CountdownState {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  isExpired: boolean;
+  totalSeconds: number;
+}
+
+export const useCountdown = (targetDate: string | null): CountdownState => {
+  const [countdown, setCountdown] = useState<CountdownState>({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    isExpired: false,
+    totalSeconds: 0,
+  });
+
+  useEffect(() => {
+    if (!targetDate) {
+      return;
+    }
+
+    const target = moment.utc(targetDate);
+
+    const updateCountdown = () => {
+      const now = moment.utc();
+      const diff = target.diff(now, 'seconds');
+
+      if (diff <= 0) {
+        setCountdown({
+          days: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+          isExpired: true,
+          totalSeconds: 0,
+        });
+        return;
+      }
+
+      const days = Math.floor(diff / (24 * 60 * 60));
+      const hours = Math.floor((diff % (24 * 60 * 60)) / (60 * 60));
+      const minutes = Math.floor((diff % (60 * 60)) / 60);
+      const seconds = diff % 60;
+
+      setCountdown({
+        days,
+        hours,
+        minutes,
+        seconds,
+        isExpired: false,
+        totalSeconds: diff,
+      });
+    };
+
+    // Update immediately
+    updateCountdown();
+
+    // Update every second
+    const interval = setInterval(updateCountdown, 1000);
+
+    return () => clearInterval(interval);
+  }, [targetDate]);
+
+  return countdown;
+};

package/src/hooks/useDebounce.ts

@@ -0,0 +1,25 @@
+/**
+ * useDebounce hook
+ *
+ * Debounces a value by delaying its update until after a specified delay.
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/hooks/useDebouncedCallback.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Creates a debounced version of a callback function.
+ *
+ * @param callback The function to debounce.
+ * @param delay The debounce delay in milliseconds.
+ * @returns A debounced callback function.
+ */
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
+    callback: T,
+    delay: number
+): (...args: Parameters<T>) => void {
+    const callbackRef = useRef(callback);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Update ref when callback changes, but don't trigger effect
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    const debouncedCallback = useCallback(
+        (...args: Parameters<T>) => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+
+            timeoutRef.current = setTimeout(() => {
+                callbackRef.current(...args);
+            }, delay);
+        },
+        [delay]
+    );
+
+    // Add a cancel method to the debounced function
+    // We attach it directly to the function object
+    (debouncedCallback as any).cancel = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+
+    return debouncedCallback;
+}
+
+export default useDebouncedCallback; 

package/src/hooks/useDebugTools.ts

@@ -0,0 +1,52 @@
+'use client';
+
+import { useDebugValue } from 'react';
+
+type DebugValue = Record<string, unknown> | unknown[] | null | undefined;
+
+export function useDebugTools(values: DebugValue, prefix = '') {
+    if (values === null || values === undefined) {
+        useDebugValue(values, () => `${prefix}: ${values === null ? 'null' : 'undefined'}`);
+        return;
+    }
+
+    if (Array.isArray(values)) {
+        values.forEach((value, index) => {
+            useDebugValue(value, (v) => {
+                const label = prefix ? `${prefix}[${index}]` : `[${index}]`;
+                return `${label}: ${formatValue(v)}`;
+            });
+        });
+        return;
+    }
+
+    if (typeof values === 'object') {
+        for (const [key, value] of Object.entries(values)) {
+            useDebugValue(value, (v) => {
+                const label = prefix ? `${prefix}.${key}` : key;
+                return `${label}: ${formatValue(v)}`;
+            });
+        }
+        return;
+    }
+
+    // Handle primitive values
+    useDebugValue(values, (v) => `${prefix}: ${formatValue(v)}`);
+}
+
+function formatValue(value: unknown): string {
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+
+    try {
+        if (typeof value === 'object') {
+            if (Array.isArray(value)) {
+                return `Array(${value.length})`;
+            }
+            return JSON.stringify(value);
+        }
+        return String(value);
+    } catch {
+        return '[Unserializable]';
+    }
+}

package/src/hooks/useEventsBus.ts

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export type FormEvent<T extends string = string, P = any> = {
+    type: T;
+    payload?: P;
+    timestamp?: number;
+};
+
+type EventListener<T extends FormEvent> = (event: T) => void;
+
+class EventBus {
+    private listeners: Set<EventListener<any>> = new Set();
+
+    publish<T extends FormEvent>(event: T) {
+        this.listeners.forEach(listener => listener({
+            ...event,
+            timestamp: event.timestamp || Date.now(),
+        }));
+    }
+
+    subscribe<T extends FormEvent>(listener: EventListener<T>) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+}
+
+export const events = new EventBus();
+
+export function useEventListener<T extends string, P>(
+    eventType: T,
+    handler: (payload: P) => void
+) {
+    const savedHandler = useRef(handler);
+
+    useEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+
+    useEffect(() => {
+        const listener = (event: FormEvent) => {
+            if (event.type === eventType) {
+                savedHandler.current(event.payload);
+            }
+        };
+
+        const unsubscribe = events.subscribe(listener);
+        return () => unsubscribe();
+    }, [eventType]);
+}

package/src/hooks/useImageLoader.ts

@@ -0,0 +1,95 @@
+/**
+ * Enhanced Image Loader Hook
+ * 
+ * Hook to check if an image is loaded successfully with callback support
+ */
+
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+export interface ImageLoaderState {
+  isLoading: boolean;
+  isLoaded: boolean;
+  hasError: boolean;
+}
+
+export interface ImageLoaderCallbacks {
+  onLoadStart?: () => void;
+  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+}
+
+export const useImageLoader = (
+  src?: string, 
+  callbacks?: ImageLoaderCallbacks
+): ImageLoaderState => {
+  const [state, setState] = useState<ImageLoaderState>({
+    isLoading: false,
+    isLoaded: false,
+    hasError: false,
+  });
+
+  const handleLoad = useCallback((event: Event) => {
+    setState({
+      isLoading: false,
+      isLoaded: true,
+      hasError: false,
+    });
+    
+    // Call user callback if provided
+    if (callbacks?.onLoad) {
+      callbacks.onLoad(event as unknown as React.SyntheticEvent<HTMLImageElement>);
+    }
+  }, [callbacks?.onLoad]);
+
+  const handleError = useCallback((event: Event) => {
+    setState({
+      isLoading: false,
+      isLoaded: false,
+      hasError: true,
+    });
+    
+    // Call user callback if provided
+    if (callbacks?.onError) {
+      callbacks.onError(event as unknown as React.SyntheticEvent<HTMLImageElement>);
+    }
+  }, [callbacks?.onError]);
+
+  useEffect(() => {
+    if (!src) {
+      setState({
+        isLoading: false,
+        isLoaded: false,
+        hasError: true,
+      });
+      return;
+    }
+
+    setState({
+      isLoading: true,
+      isLoaded: false,
+      hasError: false,
+    });
+
+    // Call load start callback
+    if (callbacks?.onLoadStart) {
+      callbacks.onLoadStart();
+    }
+
+    const img = new Image();
+    
+    img.addEventListener('load', handleLoad);
+    img.addEventListener('error', handleError);
+    
+    img.src = src;
+
+    // Cleanup function
+    return () => {
+      img.removeEventListener('load', handleLoad);
+      img.removeEventListener('error', handleError);
+    };
+  }, [src, handleLoad, handleError, callbacks?.onLoadStart]);
+
+  return state;
+};

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook to check if a media query matches
+ *
+ * @param query - CSS media query string
+ * @returns boolean indicating if the query matches
+ *
+ * @example
+ * const isMobile = useMediaQuery('(max-width: 768px)');
+ * const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+ * const isLandscape = useMediaQuery('(orientation: landscape)');
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+
+    // Set initial value
+    setMatches(mediaQuery.matches);
+
+    // Create event listener
+    const handler = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    // Add listener
+    mediaQuery.addEventListener('change', handler);
+
+    // Cleanup
+    return () => {
+      mediaQuery.removeEventListener('change', handler);
+    };
+  }, [query]);
+
+  return matches;
+}

package/src/hooks/useMobile.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import * as React from 'react';
+
+// Увеличил breakpoint до 1024px чтобы включить планшеты
+const MOBILE_BREAKPOINT = 1024
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}