@djangocfg/ui-core 2.1.90 → 2.1.92

package/src/hooks/useResolvedTheme.ts

@@ -0,0 +1,68 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export type ResolvedTheme = 'light' | 'dark';
+
+/**
+ * Hook to detect the current resolved theme (light or dark)
+ *
+ * Standalone hook - doesn't require ThemeProvider.
+ * Detects theme from:
+ * 1. 'dark' class on html element
+ * 2. System preference (prefers-color-scheme)
+ *
+ * For full theme control (setTheme, toggleTheme), use useThemeContext instead.
+ *
+ * @example
+ * ```tsx
+ * const theme = useResolvedTheme(); // 'light' | 'dark'
+ * ```
+ */
+export const useResolvedTheme = (): ResolvedTheme => {
+  const [theme, setTheme] = useState<ResolvedTheme>('light');
+
+  useEffect(() => {
+    const checkTheme = (): ResolvedTheme => {
+      // Check if dark class is applied to html element
+      if (document.documentElement.classList.contains('dark')) {
+        return 'dark';
+      }
+
+      // Check system preference
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+      }
+
+      return 'light';
+    };
+
+    // Set initial theme
+    setTheme(checkTheme());
+
+    // Listen for class changes on html element
+    const observer = new MutationObserver(() => {
+      setTheme(checkTheme());
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleMediaChange = () => {
+      setTheme(checkTheme());
+    };
+
+    mediaQuery.addEventListener('change', handleMediaChange);
+
+    return () => {
+      observer.disconnect();
+      mediaQuery.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+
+  return theme;
+};

package/src/hooks/useSessionStorage.ts

@@ -0,0 +1,290 @@
+'use client';
+
+import { 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 useSessionStorage hook
+ */
+export interface UseSessionStorageOptions {
+  /**
+   * 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 sessionStorage hook with better error handling and optional TTL support
+ *
+ * @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] = useSessionStorage('key', 'default');
+ *
+ * @example
+ * // With TTL (1 hour)
+ * const [value, setValue] = useSessionStorage('key', 'default', {
+ *   ttl: 60 * 60 * 1000
+ * });
+ */
+export function useSessionStorage<T>(
+  key: string,
+  initialValue: T,
+  options?: UseSessionStorageOptions
+) {
+  const ttl = options?.ttl;
+
+  // Get initial value from sessionStorage or use provided initialValue
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') {
+      return initialValue;
+    }
+
+    try {
+      const item = window.sessionStorage.getItem(key);
+      if (item === null) return initialValue;
+
+      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.sessionStorage.removeItem(key);
+            return initialValue;
+          }
+          // Not expired, extract value
+          return parsed._value;
+        }
+
+        // Old format (backwards compatible)
+        return parsed as T;
+      } catch {
+        // If JSON.parse fails, return as string
+        return item as T;
+      }
+    } catch (error) {
+      console.error(`Error reading sessionStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  // 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 sessionStorage is full
+  const clearOldData = () => {
+    try {
+      const keys = Object.keys(sessionStorage).filter(k => k && typeof k === '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 k = keys[i];
+            if (k) {
+              sessionStorage.removeItem(k);
+            }
+          } catch {
+            // Ignore errors when removing items
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error clearing old sessionStorage data:', error);
+    }
+  };
+
+  // Force clear all data if quota is exceeded
+  const forceClearAll = () => {
+    try {
+      const keys = Object.keys(sessionStorage);
+      for (const k of keys) {
+        try {
+          sessionStorage.removeItem(k);
+        } catch {
+          // Ignore errors when removing items
+        }
+      }
+    } catch (error) {
+      console.error('Error force clearing sessionStorage:', 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 sessionStorage 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.sessionStorage.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.sessionStorage.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('sessionStorage quota exceeded, clearing old data...');
+            clearOldData();
+
+            // Try again after clearing
+            try {
+              window.sessionStorage.setItem(key, dataToStore);
+            } catch (retryError) {
+              console.error(`Failed to set sessionStorage key "${key}" after clearing old data:`, retryError);
+              // If still fails, force clear all and try one more time
+              try {
+                forceClearAll();
+                window.sessionStorage.setItem(key, dataToStore);
+              } catch (finalError) {
+                console.error(`Failed to set sessionStorage key "${key}" after force clearing:`, finalError);
+                // If still fails, just update the state without sessionStorage
+                setStoredValue(valueToStore);
+              }
+            }
+          } else {
+            throw storageError;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Error setting sessionStorage key "${key}":`, error);
+      // Still update the state even if sessionStorage fails
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+    }
+  };
+
+  // Remove value from sessionStorage
+  const removeValue = () => {
+    try {
+      setStoredValue(initialValue);
+      if (typeof window !== 'undefined') {
+        try {
+          window.sessionStorage.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('sessionStorage quota exceeded during removal, clearing old data...');
+            clearOldData();
+
+            try {
+              window.sessionStorage.removeItem(key);
+            } catch (retryError) {
+              console.error(`Failed to remove sessionStorage key "${key}" after clearing:`, retryError);
+              // If still fails, force clear all
+              forceClearAll();
+            }
+          } else {
+            throw removeError;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Error removing sessionStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue, removeValue] as const;
+}

package/src/hooks/useToast.ts

@@ -1,247 +1,23 @@
 "use client"
 
-// Inspired by react-hot-toast library
-import * as React from 'react';
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "../components/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_DEFAULT_DURATION = 5000 // 5 seconds default auto-dismiss
-const TOAST_DISMISS_DELAY = 300 // Animation delay before removing from DOM
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-  duration?: number // Auto-dismiss duration in ms
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-const autoDismissTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-// Queue toast for removal after animation
-const addToRemoveQueue = (toastId: string, delay: number = TOAST_DISMISS_DELAY) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, delay)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-// Schedule auto-dismiss after duration
-const scheduleAutoDismiss = (toastId: string, duration: number) => {
-  // Clear existing auto-dismiss if any
-  const existing = autoDismissTimeouts.get(toastId)
-  if (existing) {
-    clearTimeout(existing)
-  }
-
-  const timeout = setTimeout(() => {
-    autoDismissTimeouts.delete(toastId)
-    dispatch({ type: "DISMISS_TOAST", toastId })
-  }, duration)
-
-  autoDismissTimeouts.set(toastId, timeout)
-}
-
-// Clear auto-dismiss timeout (e.g., on manual dismiss)
-const clearAutoDismiss = (toastId: string) => {
-  const timeout = autoDismissTimeouts.get(toastId)
-  if (timeout) {
-    clearTimeout(timeout)
-    autoDismissTimeouts.delete(toastId)
-  }
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // Clear auto-dismiss timer and queue for removal
-      if (toastId) {
-        clearAutoDismiss(toastId)
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          clearAutoDismiss(toast.id)
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
+/**
+ * Toast notifications using Sonner
+ *
+ * @example
+ * import { toast } from '@djangocfg/ui-core/hooks';
+ *
+ * toast.success('Saved!');
+ * toast.error('Error', { description: 'Details here' });
+ * toast.promise(fetchData(), { loading: 'Loading...', success: 'Done!', error: 'Failed' });
+ */
+
+import { toast } from 'sonner';
+
+// Re-export types and toast from sonner
+export { toast, type ExternalToast as ToastOptions } from 'sonner';
+
+// Hook for components using destructuring pattern: const { toast } = useToast()
+type ToastFn = typeof toast;
+export function useToast(): { toast: ToastFn; dismiss: ToastFn['dismiss'] } {
+  return { toast, dismiss: toast.dismiss };
 }
-
-type Toast = Omit<ToasterToast, "id">
-
-function createToast({ duration = TOAST_DEFAULT_DURATION, ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  // Schedule auto-dismiss after duration (0 means no auto-dismiss)
-  if (duration > 0) {
-    scheduleAutoDismiss(id, duration)
-  }
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-// Main toast function with variant helpers
-function toast(props: Toast) {
-  return createToast(props)
-}
-
-// Convenience methods for different variants
-toast.success = (props: Omit<Toast, "variant">) =>
-  createToast({ ...props, variant: "success" })
-
-toast.error = (props: Omit<Toast, "variant">) =>
-  createToast({ ...props, variant: "destructive" })
-
-toast.warning = (props: Omit<Toast, "variant">) =>
-  createToast({ ...props, variant: "warning" })
-
-toast.info = (props: Omit<Toast, "variant">) =>
-  createToast({ ...props, variant: "info" })
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }

package/src/lib/index.ts

@@ -1,2 +1,3 @@
 export * from "./utils";
 export * from "./og-image";
+export * from "./logger";

package/src/lib/logger/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Universal Logger
+ *
+ * Combines console logging with zustand store for Console panel.
+ * Use createMediaLogger for media tools (AudioPlayer, VideoPlayer, ImageViewer).
+ */
+
+export { createLogger, createMediaLogger, logger, log } from './logger';
+export { useLogStore, useFilteredLogs, useLogCount, useErrorCount } from './logStore';
+export type { LogEntry, LogLevel, LogFilter, LogStore, Logger, MediaLogger } from './types';