indas-ui 0.0.1 → 0.1.0

package/dist/cjs/hooks/useFormValidation.js

@@ -0,0 +1,68 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormValidation = useFormValidation;
+const react_1 = require("react");
+// ─── Helpers ─────────────────────────────────────────────────────
+function isValueEmpty(value) {
+    if (value === undefined || value === null)
+        return true;
+    if (typeof value === 'string' && value.trim() === '')
+        return true;
+    if (Array.isArray(value) && value.length === 0)
+        return true;
+    return false;
+}
+function checkField(fieldName, currentValue, rules, formData) {
+    const rule = rules[fieldName];
+    if (!rule)
+        return false;
+    if (rule.required && isValueEmpty(currentValue))
+        return true;
+    if (rule.validate) {
+        const result = rule.validate(currentValue, formData || {});
+        if (result !== true)
+            return true;
+    }
+    return false;
+}
+// ─── Hook ────────────────────────────────────────────────────────
+function useFormValidation(rules) {
+    const [showErrors, setShowErrors] = (0, react_1.useState)(false);
+    const rulesRef = (0, react_1.useRef)(rules);
+    rulesRef.current = rules;
+    const validate = (0, react_1.useCallback)((formData) => {
+        const errorMessages = [];
+        const currentRules = rulesRef.current;
+        for (const [fieldName, rule] of Object.entries(currentRules)) {
+            const value = formData[fieldName];
+            if (rule.required && isValueEmpty(value)) {
+                errorMessages.push(fieldName);
+                continue;
+            }
+            if (rule.validate) {
+                const result = rule.validate(value, formData);
+                if (result !== true) {
+                    errorMessages.push(result);
+                }
+            }
+        }
+        setShowErrors(true);
+        return { isValid: errorMessages.length === 0, errorMessages };
+    }, []);
+    const fieldError = (0, react_1.useCallback)((fieldName, currentValue) => {
+        if (!showErrors)
+            return false;
+        return checkField(fieldName, currentValue, rulesRef.current);
+    }, [showErrors]);
+    const fieldLabelClass = (0, react_1.useCallback)((fieldName, currentValue, baseClass = 'text-xs font-medium') => {
+        if (!showErrors)
+            return baseClass;
+        const invalid = checkField(fieldName, currentValue, rulesRef.current);
+        return invalid ? `${baseClass} text-[rgb(var(--color-error))]` : baseClass;
+    }, [showErrors]);
+    const clearErrors = (0, react_1.useCallback)(() => {
+        setShowErrors(false);
+    }, []);
+    return { validate, fieldError, fieldLabelClass, showErrors, setShowErrors, clearErrors };
+}

package/dist/cjs/hooks/useGridSettings.js

@@ -0,0 +1,85 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridSettings = useGridSettings;
+const react_1 = require("react");
+const DEFAULT_SETTINGS = {
+    columnVisibility: {},
+    columnOrder: [],
+    frozenColumns: [],
+    pageSize: 50,
+    searchType: 'advanced',
+    sortingState: [],
+    filterState: []
+};
+/**
+ * Hook for persistent grid settings using localStorage
+ * @param gridId - Unique identifier for the grid instance
+ */
+function useGridSettings(gridId) {
+    const storageKey = `grid-settings-${gridId}`;
+    const [settings, setSettings] = (0, react_1.useState)(() => {
+        if (typeof window === 'undefined')
+            return DEFAULT_SETTINGS;
+        try {
+            const stored = localStorage.getItem(storageKey);
+            return stored ? { ...DEFAULT_SETTINGS, ...JSON.parse(stored) } : DEFAULT_SETTINGS;
+        }
+        catch (error) {
+            return DEFAULT_SETTINGS;
+        }
+    });
+    // Save settings to localStorage
+    const saveSettings = (0, react_1.useCallback)((newSettings) => {
+        const updatedSettings = { ...settings, ...newSettings };
+        setSettings(updatedSettings);
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(updatedSettings));
+        }
+        catch (error) {
+        }
+    }, [settings, storageKey]);
+    // Individual setting updaters
+    const updateColumnVisibility = (0, react_1.useCallback)((visibility) => {
+        saveSettings({ columnVisibility: visibility });
+    }, [saveSettings]);
+    const updateColumnOrder = (0, react_1.useCallback)((order) => {
+        saveSettings({ columnOrder: order });
+    }, [saveSettings]);
+    const updateFrozenColumns = (0, react_1.useCallback)((frozen) => {
+        saveSettings({ frozenColumns: frozen });
+    }, [saveSettings]);
+    const updatePageSize = (0, react_1.useCallback)((size) => {
+        saveSettings({ pageSize: size });
+    }, [saveSettings]);
+    const updateSearchType = (0, react_1.useCallback)((type) => {
+        saveSettings({ searchType: type });
+    }, [saveSettings]);
+    const updateSortingState = (0, react_1.useCallback)((sorting) => {
+        saveSettings({ sortingState: sorting });
+    }, [saveSettings]);
+    const updateFilterState = (0, react_1.useCallback)((filters) => {
+        saveSettings({ filterState: filters });
+    }, [saveSettings]);
+    // Clear all settings
+    const clearSettings = (0, react_1.useCallback)(() => {
+        setSettings(DEFAULT_SETTINGS);
+        try {
+            localStorage.removeItem(storageKey);
+        }
+        catch (error) {
+        }
+    }, [storageKey]);
+    return {
+        settings,
+        updateColumnVisibility,
+        updateColumnOrder,
+        updateFrozenColumns,
+        updatePageSize,
+        updateSearchType,
+        updateSortingState,
+        updateFilterState,
+        clearSettings,
+        saveSettings
+    };
+}

package/dist/cjs/hooks/useGridTheme.js

@@ -0,0 +1,204 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEME_PRESETS = void 0;
+exports.useGridTheme = useGridTheme;
+exports.getThemeClasses = getThemeClasses;
+const react_1 = require("react");
+const DEFAULT_CONFIG = {
+    theme: 'auto',
+    autoDetectSystemTheme: true
+};
+/**
+ * Hook for managing grid theme with system preference detection
+ * and persistent storage
+ */
+function useGridTheme(initialConfig = {}) {
+    const config = { ...DEFAULT_CONFIG, ...initialConfig };
+    const [currentTheme, setCurrentTheme] = (0, react_1.useState)(() => {
+        if (typeof window === 'undefined')
+            return config.theme;
+        try {
+            const stored = localStorage.getItem('grid-theme');
+            return stored || config.theme;
+        }
+        catch {
+            return config.theme;
+        }
+    });
+    const [systemTheme, setSystemTheme] = (0, react_1.useState)(() => {
+        if (typeof window === 'undefined')
+            return 'light';
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    });
+    // Detect system theme changes
+    (0, react_1.useEffect)(() => {
+        if (!config.autoDetectSystemTheme || typeof window === 'undefined')
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = (e) => {
+            setSystemTheme(e.matches ? 'dark' : 'light');
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [config.autoDetectSystemTheme]);
+    // Determine the actual theme to apply
+    const resolvedTheme = currentTheme === 'auto' ? systemTheme : currentTheme;
+    // Apply theme to document
+    (0, react_1.useEffect)(() => {
+        if (typeof document === 'undefined')
+            return;
+        // Set theme attribute on document root
+        document.documentElement.setAttribute('data-theme', resolvedTheme);
+        // Also set a class for easier CSS targeting
+        document.documentElement.className = document.documentElement.className
+            .replace(/theme-\w+/g, '')
+            .concat(` theme-${resolvedTheme}`)
+            .trim();
+        // Store preference
+        try {
+            localStorage.setItem('grid-theme', currentTheme);
+        }
+        catch {
+            // Ignore localStorage errors
+        }
+    }, [currentTheme, resolvedTheme]);
+    // Apply custom colors
+    (0, react_1.useEffect)(() => {
+        if (!config.customColors || typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        if (config.customColors) {
+            Object.entries(config.customColors).forEach(([property, value]) => {
+                root.style.setProperty(`--grid-${property}`, value);
+            });
+        }
+        return () => {
+            // Cleanup custom properties
+            if (config.customColors) {
+                Object.keys(config.customColors).forEach(property => {
+                    root.style.removeProperty(`--grid-${property}`);
+                });
+            }
+        };
+    }, [config.customColors]);
+    // Change theme
+    const setTheme = (0, react_1.useCallback)((newTheme) => {
+        setCurrentTheme(newTheme);
+    }, []);
+    // Toggle between light and dark
+    const toggleTheme = (0, react_1.useCallback)(() => {
+        setCurrentTheme(current => {
+            if (current === 'auto') {
+                return systemTheme === 'light' ? 'dark' : 'light';
+            }
+            return current === 'light' ? 'dark' : 'light';
+        });
+    }, [systemTheme]);
+    // Reset to auto/system theme
+    const resetToSystemTheme = (0, react_1.useCallback)(() => {
+        setCurrentTheme('auto');
+    }, []);
+    // Get CSS custom properties for the current theme
+    const getThemeProperties = (0, react_1.useCallback)(() => {
+        if (typeof window === 'undefined')
+            return {};
+        const computedStyle = getComputedStyle(document.documentElement);
+        const properties = {};
+        // Extract all grid-related CSS variables
+        const rootStyle = document.documentElement.style;
+        for (let i = 0; i < rootStyle.length; i++) {
+            const property = rootStyle[i];
+            if (property.startsWith('--grid-')) {
+                properties[property] = computedStyle.getPropertyValue(property).trim();
+            }
+        }
+        return properties;
+    }, []);
+    // Apply custom color overrides
+    const setCustomColors = (0, react_1.useCallback)((colors) => {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        Object.entries(colors).forEach(([property, value]) => {
+            root.style.setProperty(`--grid-${property}`, value);
+        });
+    }, []);
+    // Clear custom color overrides
+    const clearCustomColors = (0, react_1.useCallback)(() => {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        const style = root.style;
+        // Remove all custom grid properties
+        for (let i = style.length - 1; i >= 0; i--) {
+            const property = style[i];
+            if (property.startsWith('--grid-')) {
+                style.removeProperty(property);
+            }
+        }
+    }, []);
+    // Check if system supports dark mode
+    const systemSupportsDarkMode = typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all';
+    // Get theme status information
+    const themeInfo = {
+        current: currentTheme,
+        resolved: resolvedTheme,
+        isAuto: currentTheme === 'auto',
+        isDark: resolvedTheme === 'dark',
+        isLight: resolvedTheme === 'light',
+        isHighContrast: resolvedTheme === 'high-contrast',
+        systemTheme,
+        systemSupportsDarkMode
+    };
+    return {
+        ...themeInfo,
+        setTheme,
+        toggleTheme,
+        resetToSystemTheme,
+        getThemeProperties,
+        setCustomColors,
+        clearCustomColors
+    };
+}
+// Utility function to get theme-aware CSS classes
+function getThemeClasses(theme = 'auto') {
+    const classes = ['advanced-data-grid'];
+    if (theme !== 'auto') {
+        classes.push(`theme-${theme}`);
+    }
+    return classes.join(' ');
+}
+// Predefined theme configurations
+exports.THEME_PRESETS = {
+    default: {
+        theme: 'auto',
+        autoDetectSystemTheme: true
+    },
+    corporate: {
+        theme: 'light',
+        customColors: {
+            'accent-primary': '#1e40af',
+            'accent-secondary': '#1e3a8a',
+            'header-bg': '#f8fafc',
+            'border-primary': '#e2e8f0'
+        }
+    },
+    minimal: {
+        theme: 'light',
+        customColors: {
+            'border-primary': '#f1f5f9',
+            'header-bg': '#ffffff',
+            'bg-hover': '#fafafa'
+        }
+    },
+    vibrant: {
+        theme: 'dark',
+        customColors: {
+            'accent-primary': '#8b5cf6',
+            'accent-secondary': '#a78bfa',
+            'bg-selected': '#5b21b6'
+        }
+    }
+};

package/dist/cjs/hooks/useId.js

@@ -0,0 +1,21 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClientId = useClientId;
+exports.useUniqueId = useUniqueId;
+const react_1 = require("react");
+let idCounter = 0;
+function useClientId(prefix = 'id') {
+    const [id, setId] = (0, react_1.useState)(`${prefix}-ssr`);
+    (0, react_1.useEffect)(() => {
+        setId(`${prefix}-${++idCounter}`);
+    }, [prefix]);
+    return id;
+}
+function useUniqueId(prefix = 'id') {
+    const [id, setId] = (0, react_1.useState)(`${prefix}-ssr`);
+    (0, react_1.useEffect)(() => {
+        setId(`${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
+    }, [prefix]);
+    return id;
+}