indas-ui 0.0.1 → 0.1.0

package/dist/hooks/useTheme.js

@@ -0,0 +1,261 @@
+'use client';
+import { useContext, useEffect, useState, useCallback } from 'react';
+import { getSystemTheme, applyCustomTheme, removeCustomTheme, getThemeClassName, validateTheme, generateColorVariants } from '../lib/theme/utils.js';
+import { THEME_CONFIG, LocalThemeStorage, FONT_FAMILIES, FONT_SCALES } from '../lib/theme/types.js';
+import { ThemeContext } from '../contexts/ThemeContext.js';
+// Default theme
+const DEFAULT_THEME = {
+    variant: 'default',
+    mode: 'light',
+    fontFamily: 'system',
+    fontSize: 'normal'
+};
+/**
+ * Hook for managing theme state
+ * This is the main interface for theme management in the application
+ */
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}
+/**
+ * Low-level theme hook for internal use or when provider is not needed
+ * Most components should use useTheme() instead
+ */
+export function useThemeState(defaultTheme = DEFAULT_THEME, storageKey = THEME_CONFIG.storageKey, enableSystem = true) {
+    const [theme, setThemeState] = useState(defaultTheme);
+    const [customTheme, setCustomThemeState] = useState(null);
+    const [isSystemPreference, setIsSystemPreference] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Create storage instance only once to prevent infinite re-renders
+    const storage = useState(() => new LocalThemeStorage())[0];
+    // Initialize theme from storage or system preference
+    useEffect(() => {
+        const initializeTheme = async () => {
+            try {
+                // Try to load saved theme
+                const savedTheme = await storage.getTheme(storageKey);
+                const savedCustomTheme = await storage.getCustomTheme(storageKey);
+                if (savedTheme) {
+                    setThemeState(savedTheme);
+                    if (savedCustomTheme) {
+                        setCustomThemeState(savedCustomTheme);
+                        applyCustomTheme(savedCustomTheme);
+                    }
+                }
+                else if (enableSystem) {
+                    // Fall back to system preference
+                    const systemMode = getSystemTheme();
+                    const systemTheme = { ...defaultTheme, mode: systemMode };
+                    setThemeState(systemTheme);
+                    setIsSystemPreference(true);
+                }
+            }
+            catch (error) {
+                // Fall back to default
+                setThemeState(defaultTheme);
+            }
+            finally {
+                setIsInitialized(true);
+            }
+        };
+        initializeTheme();
+    }, [defaultTheme, storageKey, enableSystem, storage]);
+    // Apply theme to document
+    useEffect(() => {
+        if (!isInitialized)
+            return;
+        const root = document.documentElement;
+        const themeClass = getThemeClassName(theme);
+        // Remove all existing theme classes
+        const existingClasses = Array.from(root.classList).filter(cls => cls.startsWith('theme-') || cls === 'light' || cls === 'dark');
+        root.classList.remove(...existingClasses);
+        // Add new theme classes
+        root.classList.add(...themeClass.split(' '));
+        // Apply custom theme if needed
+        if (theme.variant === 'custom' && customTheme) {
+            applyCustomTheme(customTheme);
+        }
+        else {
+            removeCustomTheme();
+        }
+        // Apply font family CSS variable
+        const fontFamily = theme.fontFamily || 'system';
+        const fontConfig = FONT_FAMILIES[fontFamily];
+        root.style.setProperty('--font-family-base', fontConfig.value);
+        // Apply font size scale CSS variable
+        // Priority: custom fontScale > fontSize preset
+        if (theme.fontScale !== undefined) {
+            const scale = theme.fontScale / 100;
+            root.style.setProperty('--font-scale', scale.toString());
+        }
+        else {
+            const fontSize = theme.fontSize || 'normal';
+            const scaleConfig = FONT_SCALES[fontSize];
+            root.style.setProperty('--font-scale', scaleConfig.scale.toString());
+        }
+    }, [theme, customTheme, isInitialized]);
+    // Listen for system theme changes
+    useEffect(() => {
+        if (!enableSystem || !isSystemPreference)
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = (e) => {
+            const newMode = e.matches ? 'dark' : 'light';
+            setThemeState(prev => ({ ...prev, mode: newMode }));
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [enableSystem, isSystemPreference]);
+    // Theme setters
+    const setTheme = useCallback(async (newTheme) => {
+        setThemeState(newTheme);
+        setIsSystemPreference(false);
+        try {
+            await storage.setTheme(storageKey, newTheme);
+        }
+        catch (error) {
+            console.error('Failed to save theme:', error);
+        }
+    }, [storageKey, storage]);
+    const setVariant = useCallback((variant) => {
+        setTheme({ ...theme, variant });
+    }, [theme, setTheme]);
+    const setMode = useCallback((mode) => {
+        setTheme({ ...theme, mode });
+    }, [theme, setTheme]);
+    const toggleMode = useCallback(() => {
+        const newMode = theme.mode === 'light' ? 'dark' : 'light';
+        setMode(newMode);
+    }, [theme.mode, setMode]);
+    const setFontFamily = useCallback((fontFamily) => {
+        setTheme({ ...theme, fontFamily });
+    }, [theme, setTheme]);
+    const setFontSize = useCallback((fontSize) => {
+        setTheme({ ...theme, fontSize, fontScale: undefined }); // Clear custom scale when using preset
+    }, [theme, setTheme]);
+    const setFontScale = useCallback((scale) => {
+        // Clamp scale to valid range (80-150)
+        const clampedScale = Math.max(80, Math.min(150, scale));
+        setTheme({ ...theme, fontScale: clampedScale, fontSize: undefined }); // Clear preset when using custom scale
+    }, [theme, setTheme]);
+    // Custom theme management
+    const setCustomTheme = useCallback(async (colors, name) => {
+        // Validate the custom theme
+        const validation = validateTheme(colors, theme.mode);
+        if (!validation.isValid) {
+            // You might want to show user feedback here
+        }
+        const newCustomTheme = {
+            ...colors,
+            name: name || 'Custom Theme',
+            id: `custom-${Date.now()}`,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+        };
+        setCustomThemeState(newCustomTheme);
+        await setTheme({ ...theme, variant: 'custom' });
+        try {
+            await storage.setCustomTheme(storageKey, newCustomTheme);
+        }
+        catch (error) {
+            console.error('Failed to save custom theme:', error);
+        }
+    }, [theme, setTheme, storageKey, storage]);
+    const removeCustomThemeCallback = useCallback(async () => {
+        setCustomThemeState(null);
+        removeCustomTheme();
+        // Switch to default theme as fallback
+        await setTheme({ ...theme, variant: 'default' });
+        try {
+            const currentTheme = await storage.getTheme(storageKey);
+            if (currentTheme) {
+                await storage.setTheme(storageKey, { ...currentTheme, variant: 'default' });
+            }
+        }
+        catch (error) {
+            console.error('Failed to remove custom theme:', error);
+        }
+    }, [theme, setTheme, storageKey, storage]);
+    return {
+        theme,
+        setTheme,
+        setVariant,
+        setMode,
+        toggleMode,
+        setFontFamily,
+        setFontSize,
+        setFontScale,
+        customTheme,
+        setCustomTheme,
+        removeCustomTheme: removeCustomThemeCallback,
+        isDark: theme.mode === 'dark',
+        isSystemPreference,
+        availableThemes: [...THEME_CONFIG.variants],
+        currentThemeClass: getThemeClassName(theme),
+    };
+}
+/**
+ * Hook for generating custom themes from a base color
+ */
+export function useCustomThemeGenerator() {
+    const { setCustomTheme } = useTheme();
+    const generateFromColor = useCallback((baseColor, name) => {
+        try {
+            const variants = generateColorVariants(baseColor);
+            setCustomTheme(variants, name);
+            return { success: true, variants };
+        }
+        catch (error) {
+            console.error('Failed to generate custom theme:', error);
+            return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
+        }
+    }, [setCustomTheme]);
+    const validateColor = useCallback((colors, mode = 'light') => {
+        return validateTheme(colors, mode);
+    }, []);
+    return {
+        generateFromColor,
+        validateColor,
+        generateColorVariants,
+    };
+}
+/**
+ * Hook for theme-aware animations
+ */
+export function useThemeTransitions() {
+    const { isDark } = useTheme();
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    useEffect(() => {
+        setIsTransitioning(true);
+        const timeout = setTimeout(() => setIsTransitioning(false), 150);
+        return () => clearTimeout(timeout);
+    }, [isDark]);
+    return {
+        isTransitioning,
+        transitionClass: isTransitioning ? 'transition-colors duration-150' : ''
+    };
+}
+/**
+ * Hook for persisting theme across sessions (multi-tenant support)
+ */
+export function useThemePersistence(tenantId) {
+    const { theme, setTheme } = useTheme();
+    const storageKey = tenantId ? `${THEME_CONFIG.storageKey}-${tenantId}` : THEME_CONFIG.storageKey;
+    const saveThemeForTenant = useCallback(async (theme) => {
+        const storage = new LocalThemeStorage();
+        await storage.setTheme(storageKey, theme);
+    }, [storageKey]);
+    const loadThemeForTenant = useCallback(async () => {
+        const storage = new LocalThemeStorage();
+        return await storage.getTheme(storageKey);
+    }, [storageKey]);
+    return {
+        saveThemeForTenant,
+        loadThemeForTenant,
+        currentStorageKey: storageKey,
+    };
+}

package/dist/hooks/useTranslation.d.ts

@@ -0,0 +1,5 @@
+export declare function useTranslation(): {
+    t: (text: string, options?: Record<string, any>) => string;
+    language: import("../contexts/LanguageContext.js").Language;
+    setLanguage: (lang: import("../contexts/LanguageContext.js").Language) => void;
+};

package/dist/hooks/useTranslation.js

@@ -0,0 +1,17 @@
+'use client';
+import { useLanguage } from '../contexts/LanguageContext.js';
+export function useTranslation() {
+    const { translations, language, setLanguage } = useLanguage();
+    const t = (text, options) => {
+        // If language is English, return text as is (with interpolation)
+        let result = language === 'en' ? text : (translations[text] || text);
+        // Handle interpolation
+        if (options) {
+            Object.keys(options).forEach(key => {
+                result = result.replace(new RegExp(`{{${key}}}`, 'g'), String(options[key]));
+            });
+        }
+        return result;
+    };
+    return { t, language, setLanguage };
+}

package/dist/hooks/useUnsavedChanges.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Hook to detect unsaved changes in a form or modal
+ * Compares current data with initial data to determine if changes exist
+ *
+ * @param currentData - Current form/modal data
+ * @param isOpen - Whether the modal/form is open
+ * @returns boolean indicating if there are unsaved changes
+ *
+ * @example
+ * ```tsx
+ * const hasUnsavedChanges = useUnsavedChanges(formData, isModalOpen)
+ * ```
+ */
+export declare function useUnsavedChanges<T extends Record<string, any>>(currentData: T, isOpen?: boolean): boolean;
+/**
+ * Hook to prevent data loss when user tries to leave page/close tab
+ * Shows browser confirmation dialog when unsaved changes exist
+ *
+ * @param hasUnsavedChanges - Boolean indicating if there are unsaved changes
+ * @param isEnabled - Whether to enable the protection (default: true)
+ *
+ * @example
+ * ```tsx
+ * usePreventDataLoss(hasUnsavedChanges, isModalOpen)
+ * ```
+ */
+export declare function usePreventDataLoss(hasUnsavedChanges: boolean, isEnabled?: boolean): void;
+/**
+ * Combined hook that provides both unsaved changes detection and data loss prevention
+ *
+ * @param currentData - Current form/modal data
+ * @param isOpen - Whether the modal/form is open
+ * @returns boolean indicating if there are unsaved changes
+ *
+ * @example
+ * ```tsx
+ * const hasUnsavedChanges = useFormProtection(formData, isModalOpen)
+ * ```
+ */
+export declare function useFormProtection<T extends Record<string, any>>(currentData: T, isOpen?: boolean): boolean;

package/dist/hooks/useUnsavedChanges.js

@@ -0,0 +1,83 @@
+'use client';
+import { useEffect, useRef, useMemo } from 'react';
+/**
+ * Hook to detect unsaved changes in a form or modal
+ * Compares current data with initial data to determine if changes exist
+ *
+ * @param currentData - Current form/modal data
+ * @param isOpen - Whether the modal/form is open
+ * @returns boolean indicating if there are unsaved changes
+ *
+ * @example
+ * ```tsx
+ * const hasUnsavedChanges = useUnsavedChanges(formData, isModalOpen)
+ * ```
+ */
+export function useUnsavedChanges(currentData, isOpen = true) {
+    // Store initial data on mount/open
+    const initialDataRef = useRef(null);
+    // Reset initial data when modal opens
+    useEffect(() => {
+        if (isOpen && !initialDataRef.current) {
+            initialDataRef.current = JSON.parse(JSON.stringify(currentData));
+        }
+        // Clear on close
+        if (!isOpen) {
+            initialDataRef.current = null;
+        }
+    }, [isOpen]);
+    // Detect changes by comparing current data with initial data
+    const hasChanges = useMemo(() => {
+        if (!initialDataRef.current)
+            return false;
+        return JSON.stringify(currentData) !== JSON.stringify(initialDataRef.current);
+    }, [currentData]);
+    return hasChanges;
+}
+/**
+ * Hook to prevent data loss when user tries to leave page/close tab
+ * Shows browser confirmation dialog when unsaved changes exist
+ *
+ * @param hasUnsavedChanges - Boolean indicating if there are unsaved changes
+ * @param isEnabled - Whether to enable the protection (default: true)
+ *
+ * @example
+ * ```tsx
+ * usePreventDataLoss(hasUnsavedChanges, isModalOpen)
+ * ```
+ */
+export function usePreventDataLoss(hasUnsavedChanges, isEnabled = true) {
+    useEffect(() => {
+        if (!isEnabled || !hasUnsavedChanges)
+            return;
+        const handleBeforeUnload = (e) => {
+            if (hasUnsavedChanges) {
+                e.preventDefault();
+                // Modern browsers require returnValue to be set
+                e.returnValue = '';
+                return '';
+            }
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [hasUnsavedChanges, isEnabled]);
+}
+/**
+ * Combined hook that provides both unsaved changes detection and data loss prevention
+ *
+ * @param currentData - Current form/modal data
+ * @param isOpen - Whether the modal/form is open
+ * @returns boolean indicating if there are unsaved changes
+ *
+ * @example
+ * ```tsx
+ * const hasUnsavedChanges = useFormProtection(formData, isModalOpen)
+ * ```
+ */
+export function useFormProtection(currentData, isOpen = true) {
+    const hasUnsavedChanges = useUnsavedChanges(currentData, isOpen);
+    usePreventDataLoss(hasUnsavedChanges, isOpen);
+    return hasUnsavedChanges;
+}