@djangocfg/ui-core 2.1.89 → 2.1.91

package/src/components/phone-input.tsx

@@ -0,0 +1,277 @@
+"use client"
+
+import {
+    AsYouType, CountryCode, getCountries, getCountryCallingCode, parsePhoneNumberFromString
+} from 'libphonenumber-js';
+import { ChevronDown, Search } from 'lucide-react';
+import * as React from 'react';
+
+import { Button } from './button';
+import { Input } from './input';
+import { cn } from '../lib';
+import {
+    DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger
+} from './dropdown-menu';
+
+// Generate country flag emoji from country code
+const getCountryFlag = (countryCode: CountryCode): string => {
+  return countryCode
+    .toUpperCase()
+    .replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397))
+}
+
+// Get country name from country code using browser's built-in Intl.DisplayNames
+const getCountryName = (countryCode: CountryCode): string => {
+  try {
+    const displayNames = new Intl.DisplayNames(['en'], { type: 'region' })
+    return displayNames.of(countryCode) || countryCode
+  } catch {
+    // Fallback for unsupported country codes
+    return countryCode
+  }
+}
+
+// Generate all countries from libphonenumber-js
+const getAllCountries = () => {
+  return getCountries().map(countryCode => ({
+    code: countryCode,
+    name: getCountryName(countryCode),
+    flag: getCountryFlag(countryCode),
+    dialCode: `+${getCountryCallingCode(countryCode)}`
+  })).sort((a, b) => a.name.localeCompare(b.name))
+}
+
+const COUNTRIES = getAllCountries()
+
+export interface PhoneInputProps {
+  value?: string
+  onChange?: (value: string | undefined) => void
+  defaultCountry?: CountryCode
+  className?: string
+  placeholder?: string
+  disabled?: boolean
+}
+
+const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+  ({
+    className,
+    value = '',
+    onChange,
+    defaultCountry = 'US',
+    placeholder = "Enter phone number",
+    disabled = false,
+    ...props
+  }, ref) => {
+    const [selectedCountry, setSelectedCountry] = React.useState<CountryCode>(defaultCountry)
+    const [inputValue, setInputValue] = React.useState('')
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false)
+    const [searchQuery, setSearchQuery] = React.useState('')
+    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)
+
+    // Find country data
+    const currentCountry = COUNTRIES.find(c => c.code === selectedCountry) || COUNTRIES[0]!
+
+    // Filter countries based on search query
+    const filteredCountries = React.useMemo(() => {
+      if (!searchQuery.trim()) return COUNTRIES
+
+      const query = searchQuery.toLowerCase()
+      return COUNTRIES.filter(country =>
+        country.name.toLowerCase().includes(query) ||
+        country.dialCode.includes(query) ||
+        country.code.toLowerCase().includes(query)
+      )
+    }, [searchQuery])
+
+    // Initialize input value from props
+    React.useEffect(() => {
+      if (value) {
+        try {
+          const phoneNumber = parsePhoneNumberFromString(value)
+          if (phoneNumber) {
+            setSelectedCountry(phoneNumber.country || defaultCountry)
+            setInputValue(phoneNumber.nationalNumber)
+          } else {
+            setInputValue(value)
+          }
+        } catch {
+          setInputValue(value)
+        }
+      }
+    }, [value, defaultCountry])
+
+    // Reset highlighted index when filtered countries change
+    React.useEffect(() => {
+      setHighlightedIndex(-1)
+    }, [filteredCountries])
+
+    // Reset search when dropdown closes
+    React.useEffect(() => {
+      if (!isDropdownOpen) {
+        setSearchQuery('')
+        setHighlightedIndex(-1)
+      }
+    }, [isDropdownOpen])
+
+    // Handle country selection
+    const handleCountrySelect = (country: typeof COUNTRIES[0]) => {
+      setSelectedCountry(country.code)
+      setIsDropdownOpen(false)
+      setSearchQuery('')
+      setHighlightedIndex(-1)
+
+      // Format existing number for new country
+      if (inputValue) {
+        const formatter = new AsYouType(country.code)
+        const formatted = formatter.input(inputValue)
+        setInputValue(formatted)
+
+        // Get E.164 format for onChange
+        const phoneNumber = formatter.getNumber()
+        onChange?.(phoneNumber?.number)
+      }
+    }
+
+    // Handle keyboard navigation
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (!isDropdownOpen) return
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault()
+          setHighlightedIndex(prev =>
+            prev < filteredCountries.length - 1 ? prev + 1 : 0
+          )
+          break
+        case 'ArrowUp':
+          e.preventDefault()
+          setHighlightedIndex(prev =>
+            prev > 0 ? prev - 1 : filteredCountries.length - 1
+          )
+          break
+        case 'Enter':
+          e.preventDefault()
+          if (highlightedIndex >= 0 && highlightedIndex < filteredCountries.length) {
+            handleCountrySelect(filteredCountries[highlightedIndex]!)
+          }
+          break
+        case 'Escape':
+          e.preventDefault()
+          setIsDropdownOpen(false)
+          break
+      }
+    }
+
+    // Handle input change
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const input = e.target.value
+
+      // Use AsYouType formatter for real-time formatting
+      const formatter = new AsYouType(selectedCountry)
+      const formatted = formatter.input(input)
+
+      setInputValue(formatted)
+
+      // Get the parsed phone number for validation and E.164 format
+      const phoneNumber = formatter.getNumber()
+      onChange?.(phoneNumber?.number)
+    }
+
+    // Handle paste events to extract phone numbers
+    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+      const pastedText = e.clipboardData.getData('text')
+
+      try {
+        // Try to parse as international number first
+        const phoneNumber = parsePhoneNumberFromString(pastedText)
+        if (phoneNumber) {
+          e.preventDefault()
+          setSelectedCountry(phoneNumber.country || selectedCountry)
+          setInputValue(phoneNumber.nationalNumber)
+          onChange?.(phoneNumber.number)
+          return
+        }
+      } catch {
+        // Let default paste behavior handle it
+      }
+    }
+
+    return (
+      <div className={cn("relative flex", className)} onKeyDown={handleKeyDown}>
+        {/* Country Dropdown */}
+        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-10 px-3 rounded-r-none border-r-0 flex items-center gap-2"
+              disabled={disabled}
+            >
+              <span className="text-base">{currentCountry.flag}</span>
+              <span className="text-sm font-mono">{currentCountry.dialCode}</span>
+              <ChevronDown className="h-3 w-3 opacity-50" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-80 max-h-80 p-0">
+            {/* Search Input */}
+            <div className="p-2 border-b">
+              <div className="relative">
+                <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="Search countries..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-8 h-8"
+                  autoFocus
+                />
+              </div>
+            </div>
+
+            {/* Countries List */}
+            <div className="max-h-60 overflow-y-auto">
+              {filteredCountries.length === 0 ? (
+                <div className="p-4 text-sm text-muted-foreground text-center">
+                  No countries found
+                </div>
+              ) : (
+                filteredCountries.map((country, index) => (
+                  <DropdownMenuItem
+                    key={country.code}
+                    onClick={() => handleCountrySelect(country)}
+                    className={cn(
+                      "flex items-center gap-3 px-3 py-2 cursor-pointer",
+                      index === highlightedIndex && "bg-accent"
+                    )}
+                  >
+                    <span className="text-base">{country.flag}</span>
+                    <span className="flex-1 text-sm">{country.name}</span>
+                    <span className="text-sm font-mono text-muted-foreground">
+                      {country.dialCode}
+                    </span>
+                  </DropdownMenuItem>
+                ))
+              )}
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* Phone Input */}
+        <Input
+          ref={ref}
+          type="tel"
+          value={inputValue}
+          onChange={handleInputChange}
+          onPaste={handlePaste}
+          placeholder={placeholder}
+          disabled={disabled}
+          className="rounded-l-none border-l-0 flex-1"
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+
+PhoneInput.displayName = "PhoneInput"
+
+export { PhoneInput }

package/src/components/sonner.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Toaster as Sonner } from 'sonner';
+import { useResolvedTheme } from '../hooks/useResolvedTheme';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const theme = useResolvedTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      richColors
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/hooks/index.ts

@@ -13,3 +13,7 @@ export { useMediaQuery } from './useMediaQuery';
 export { useCopy } from './useCopy';
 export { useImageLoader } from './useImageLoader';
 export { useToast, toast } from './useToast';
+export { useResolvedTheme } from './useResolvedTheme';
+export type { ResolvedTheme } from './useResolvedTheme';
+export { useLocalStorage } from './useLocalStorage';
+export { useSessionStorage } from './useSessionStorage';

package/src/hooks/useCopy.ts

@@ -20,19 +20,11 @@ export const useCopy = (options: UseCopyOptions = {}) => {
     const copyToClipboard = useCallback(async (text: string, customSuccessMessage?: string) => {
         try {
             await navigator.clipboard.writeText(text);
-            toast({
-                title: "Success!",
-                description: customSuccessMessage || successMessage,
-                variant: "default",
-            });
+            toast.success(customSuccessMessage || successMessage);
             return true;
         } catch (error) {
             console.error('Failed to copy:', error);
-            toast({
-                title: "Error",
-                description: errorMessage,
-                variant: "destructive",
-            });
+            toast.error(errorMessage);
             return false;
         }
     }, [toast, successMessage, errorMessage]);

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,300 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Storage wrapper format with metadata
+ * Used when TTL is specified
+ */
+interface StorageWrapper<T> {
+  _meta: {
+    createdAt: number;
+    ttl: number;
+  };
+  _value: T;
+}
+
+/**
+ * Options for useLocalStorage hook
+ */
+export interface UseLocalStorageOptions {
+  /**
+   * Time-to-live in milliseconds.
+   * After this time, value is considered expired and initialValue is returned.
+   * Data is automatically cleaned up on next read.
+   * @example 24 * 60 * 60 * 1000 // 24 hours
+   */
+  ttl?: number;
+}
+
+/**
+ * Check if data is in new wrapped format with _meta
+ */
+function isWrappedFormat<T>(data: unknown): data is StorageWrapper<T> {
+  return (
+    data !== null &&
+    typeof data === 'object' &&
+    '_meta' in data &&
+    '_value' in data &&
+    typeof (data as StorageWrapper<T>)._meta === 'object' &&
+    typeof (data as StorageWrapper<T>)._meta.createdAt === 'number'
+  );
+}
+
+/**
+ * Check if wrapped data is expired
+ */
+function isExpired<T>(wrapped: StorageWrapper<T>): boolean {
+  if (!wrapped._meta.ttl) return false;
+  const age = Date.now() - wrapped._meta.createdAt;
+  return age > wrapped._meta.ttl;
+}
+
+/**
+ * Simple localStorage hook with better error handling and optional TTL support
+ *
+ * IMPORTANT: To prevent hydration mismatch, this hook:
+ * - Always returns initialValue on first render (same as SSR)
+ * - Reads from localStorage only after component mounts
+ *
+ * @param key - Storage key
+ * @param initialValue - Default value if key doesn't exist
+ * @param options - Optional configuration (ttl for auto-expiration)
+ * @returns [value, setValue, removeValue] - Current value, setter function, and remove function
+ *
+ * @example
+ * // Without TTL (backwards compatible)
+ * const [value, setValue] = useLocalStorage('key', 'default');
+ *
+ * @example
+ * // With TTL (24 hours)
+ * const [value, setValue] = useLocalStorage('key', 'default', {
+ *   ttl: 24 * 60 * 60 * 1000
+ * });
+ */
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+  options?: UseLocalStorageOptions
+) {
+  const ttl = options?.ttl;
+  // Always start with initialValue to match SSR
+  const [storedValue, setStoredValue] = useState<T>(initialValue);
+  const [isHydrated, setIsHydrated] = useState(false);
+  const isInitialized = useRef(false);
+
+  // Read from localStorage after mount (avoids hydration mismatch)
+  useEffect(() => {
+    if (isInitialized.current) return;
+    isInitialized.current = true;
+
+    try {
+      const item = window.localStorage.getItem(key);
+      if (item !== null) {
+        // Try to parse as JSON first, fallback to string
+        try {
+          const parsed = JSON.parse(item);
+
+          // Check if new format with _meta
+          if (isWrappedFormat<T>(parsed)) {
+            // Check TTL expiration
+            if (isExpired(parsed)) {
+              // Expired! Clean up and use initial value
+              window.localStorage.removeItem(key);
+              // Keep initialValue (already set)
+            } else {
+              // Not expired, extract value
+              setStoredValue(parsed._value);
+            }
+          } else {
+            // Old format (backwards compatible)
+            setStoredValue(parsed as T);
+          }
+        } catch {
+          // If JSON.parse fails, return as string
+          setStoredValue(item as T);
+        }
+      }
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+    }
+
+    setIsHydrated(true);
+  }, [key]);
+
+  // Check data size and limit
+  const checkDataSize = (data: any): boolean => {
+    try {
+      const jsonString = JSON.stringify(data);
+      const sizeInBytes = new Blob([jsonString]).size;
+      const sizeInKB = sizeInBytes / 1024;
+      
+      // Limit to 1MB per item
+      if (sizeInKB > 1024) {
+        console.warn(`Data size (${sizeInKB.toFixed(2)}KB) exceeds 1MB limit for key "${key}"`);
+        return false;
+      }
+      
+      return true;
+    } catch (error) {
+      console.error(`Error checking data size for key "${key}":`, error);
+      return false;
+    }
+  };
+
+  // Clear old data when localStorage is full
+  const clearOldData = () => {
+    try {
+      const keys = Object.keys(localStorage).filter(key => key && typeof key === 'string');
+      // Remove oldest items if we have more than 50 items
+      if (keys.length > 50) {
+        const itemsToRemove = Math.ceil(keys.length * 0.2);
+        for (let i = 0; i < itemsToRemove; i++) {
+          try {
+            const key = keys[i];
+            if (key) {
+              localStorage.removeItem(key);
+            }
+          } catch {
+            // Ignore errors when removing items
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error clearing old localStorage data:', error);
+    }
+  };
+
+  // Force clear all data if quota is exceeded
+  const forceClearAll = () => {
+    try {
+      const keys = Object.keys(localStorage);
+      for (const key of keys) {
+        try {
+          localStorage.removeItem(key);
+        } catch {
+          // Ignore errors when removing items
+        }
+      }
+    } catch (error) {
+      console.error('Error force clearing localStorage:', error);
+    }
+  };
+
+  // Prepare data for storage (with or without TTL wrapper)
+  const prepareForStorage = (value: T): string => {
+    if (ttl) {
+      // Wrap with _meta for TTL support
+      const wrapped: StorageWrapper<T> = {
+        _meta: {
+          createdAt: Date.now(),
+          ttl,
+        },
+        _value: value,
+      };
+      return JSON.stringify(wrapped);
+    }
+    // Old format (no wrapper) - for strings, store directly
+    if (typeof value === 'string') {
+      return value;
+    }
+    return JSON.stringify(value);
+  };
+
+  // Update localStorage when value changes
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+
+      // Check data size before attempting to save
+      if (!checkDataSize(valueToStore)) {
+        console.warn(`Data size too large for key "${key}", removing key`);
+        // Remove the key if data is too large
+        try {
+          window.localStorage.removeItem(key);
+        } catch {
+          // Ignore errors when removing
+        }
+        // Still update the state
+        setStoredValue(valueToStore);
+        return;
+      }
+
+      setStoredValue(valueToStore);
+
+      if (typeof window !== 'undefined') {
+        const dataToStore = prepareForStorage(valueToStore);
+
+        // Try to set the value
+        try {
+          window.localStorage.setItem(key, dataToStore);
+        } catch (storageError: any) {
+          // If quota exceeded, clear old data and try again
+          if (storageError.name === 'QuotaExceededError' ||
+              storageError.code === 22 ||
+              storageError.message?.includes('quota')) {
+            console.warn('localStorage quota exceeded, clearing old data...');
+            clearOldData();
+
+            // Try again after clearing
+            try {
+              window.localStorage.setItem(key, dataToStore);
+            } catch (retryError) {
+              console.error(`Failed to set localStorage key "${key}" after clearing old data:`, retryError);
+              // If still fails, force clear all and try one more time
+              try {
+                forceClearAll();
+                window.localStorage.setItem(key, dataToStore);
+              } catch (finalError) {
+                console.error(`Failed to set localStorage key "${key}" after force clearing:`, finalError);
+                // If still fails, just update the state without localStorage
+                setStoredValue(valueToStore);
+              }
+            }
+          } else {
+            throw storageError;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+      // Still update the state even if localStorage fails
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+    }
+  };
+
+  // Remove value from localStorage
+  const removeValue = () => {
+    try {
+      setStoredValue(initialValue);
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.removeItem(key);
+        } catch (removeError: any) {
+          // If removal fails due to quota, try to clear some data first
+          if (removeError.name === 'QuotaExceededError' || 
+              removeError.code === 22 || 
+              removeError.message?.includes('quota')) {
+            console.warn('localStorage quota exceeded during removal, clearing old data...');
+            clearOldData();
+
+            try {
+              window.localStorage.removeItem(key);
+            } catch (retryError) {
+              console.error(`Failed to remove localStorage key "${key}" after clearing:`, retryError);
+              // If still fails, force clear all
+              forceClearAll();
+            }
+          } else {
+            throw removeError;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Error removing localStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue, removeValue] as const;
+}