indas-ui 0.0.1 → 0.1.0

package/dist/cjs/hooks/useIntelligentColumnSizing.js

@@ -0,0 +1,315 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLUMN_SIZING_PRESETS = void 0;
+exports.useIntelligentColumnSizing = useIntelligentColumnSizing;
+exports.createIntelligentColumn = createIntelligentColumn;
+const react_1 = require("react");
+const DEFAULT_CONFIG = {
+    globalMinWidth: 30, // Very small - will be overridden by content
+    globalMaxWidth: 300, // Maximum column width
+    paddingBuffer: 4, // Extra padding buffer
+    sampleSize: 100, // Sample first 100 rows for performance
+    enableIntelligentSizing: true
+};
+// Internal defaults for calculations
+const CALCULATION_DEFAULTS = {
+    characterWidth: 7, // Average character width for 12px font (text-xs)
+    headerPadding: 8, // 4px left + 4px right (matches px-1 in CSS)
+    cellPadding: 8, // 4px left + 4px right (matches px-1 in CSS)
+};
+/**
+ * Hook for intelligent column sizing based on content analysis
+ * Automatically calculates optimal column widths based on content
+ * MERGED: Best features from useAutoIntelligentSizing + useIntelligentColumnSizing
+ */
+function useIntelligentColumnSizing(data, columns, config = {}) {
+    const finalConfig = { ...DEFAULT_CONFIG, ...config };
+    // Smart content analyzer - detects data type and calculates optimal width
+    const analyzeContent = (0, react_1.useCallback)((columnId, sampleData) => {
+        const values = sampleData.map(row => row[columnId]).filter(v => v !== null && v !== undefined);
+        if (values.length === 0) {
+            return {
+                dataType: 'text',
+                widths: [80], // Default fallback
+                avgLength: 0
+            };
+        }
+        // Smart type detection
+        let dataType = 'text';
+        const widths = [];
+        values.forEach(value => {
+            let displayText = '';
+            let detectedType = 'text';
+            if (typeof value === 'number') {
+                detectedType = 'number';
+                // Smart number formatting detection
+                const formattedNumber = value.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+                if (columnId.toLowerCase().includes('salary') || columnId.toLowerCase().includes('price')) {
+                    displayText = `$${formattedNumber}`;
+                }
+                else if (columnId.toLowerCase().includes('percent') || columnId.toLowerCase().includes('performance')) {
+                    displayText = `${value}%`;
+                }
+                else {
+                    displayText = formattedNumber;
+                }
+            }
+            else if (typeof value === 'boolean') {
+                detectedType = 'boolean';
+                displayText = value ? 'Yes' : 'No';
+            }
+            else if (Array.isArray(value)) {
+                detectedType = 'array';
+                displayText = value.length > 2 ? `${value.slice(0, 2).join(', ')} +${value.length - 2}` : value.join(', ');
+            }
+            else if (typeof value === 'string') {
+                // Smart string type detection
+                if (value.match(/^\d{4}-\d{2}-\d{2}/)) {
+                    detectedType = 'date';
+                }
+                else if (value.length < 20 && ['active', 'inactive', 'pending', 'approved', 'rejected', 'admin', 'user', 'manager'].includes(value.toLowerCase())) {
+                    detectedType = 'badge';
+                }
+                displayText = String(value);
+            }
+            else {
+                displayText = String(value);
+            }
+            // Calculate display width (8px per character average + smart type-based adjustments)
+            let pixelWidth = displayText.length * CALCULATION_DEFAULTS.characterWidth;
+            // Smart adjustments based on content type
+            if (detectedType === 'number')
+                pixelWidth += 10; // Numbers need extra space for formatting
+            if (detectedType === 'badge')
+                pixelWidth += 20; // Badges have padding and borders
+            if (detectedType === 'array')
+                pixelWidth += 15; // Arrays have spacing between items
+            if (detectedType === 'date')
+                pixelWidth += 5; // Dates are consistent but need slight buffer
+            widths.push(pixelWidth);
+            // Set the most common type
+            if (dataType === 'text' || detectedType !== 'text') {
+                dataType = detectedType;
+            }
+        });
+        return {
+            dataType,
+            widths,
+            avgLength: widths.reduce((sum, w) => sum + w, 0) / widths.length
+        };
+    }, []);
+    // Intelligent analysis of all columns
+    const columnAnalysis = (0, react_1.useMemo)(() => {
+        if (!finalConfig.enableIntelligentSizing || !data.length) {
+            return new Map();
+        }
+        const analysis = new Map();
+        const sampleData = data.slice(0, Math.min(finalConfig.sampleSize, data.length));
+        columns.forEach(column => {
+            const columnId = column.id || column.accessorKey;
+            if (!columnId || columnId === 'select' || columnId === 'actions')
+                return;
+            // Get column configuration from meta
+            const columnMeta = column.meta;
+            const metaMinWidth = columnMeta?.minWidth;
+            const metaMaxWidth = columnMeta?.maxWidth;
+            // Calculate header text width
+            const headerText = typeof column.header === 'string' ? column.header : columnId;
+            const headerWidth = (headerText.length * CALCULATION_DEFAULTS.characterWidth) + CALCULATION_DEFAULTS.headerPadding;
+            // Analyze content with smart type detection
+            const contentAnalysis = analyzeContent(columnId, sampleData);
+            // Calculate content statistics
+            const maxContentWidth = Math.max(...contentAnalysis.widths, 0);
+            const avgContentWidth = contentAnalysis.avgLength;
+            const minContentWidth = Math.min(...contentAnalysis.widths, 0);
+            // Calculate variance (how much content size varies)
+            const variance = contentAnalysis.widths.length > 1
+                ? Math.sqrt(contentAnalysis.widths.reduce((sum, w) => sum + Math.pow(w - avgContentWidth, 2), 0) / contentAnalysis.widths.length)
+                : 0;
+            // BALANCED LOGIC: Compare header vs content, use intelligent rules
+            // Calculate header-to-content ratio
+            const headerToContentRatio = headerWidth / Math.max(maxContentWidth, 1);
+            // Dynamic buffer based on content type
+            let contentBuffer;
+            if (contentAnalysis.dataType === 'badge' || contentAnalysis.dataType === 'boolean') {
+                contentBuffer = 15;
+            }
+            else if (contentAnalysis.dataType === 'number') {
+                contentBuffer = 25;
+            }
+            else if (contentAnalysis.dataType === 'date') {
+                contentBuffer = 20;
+            }
+            else if (variance > avgContentWidth * 0.5) {
+                contentBuffer = 35;
+            }
+            else {
+                contentBuffer = 30;
+            }
+            // Optimal width calculation with intelligent rules
+            let optimalWidth;
+            // Calculate base width from content
+            const baseContentWidth = variance > avgContentWidth * 0.5
+                ? avgContentWidth + contentBuffer
+                : maxContentWidth + contentBuffer;
+            // Rule 1: If header is much wider than content (ratio > 1.8), use compromise
+            if (headerToContentRatio > 1.8) {
+                // Use 60% content + 40% header (let header wrap significantly)
+                optimalWidth = (baseContentWidth * 0.6) + (headerWidth * 0.4);
+            }
+            // Rule 2: If header is moderately wider (ratio 1.2-1.8), use balanced approach
+            else if (headerToContentRatio > 1.2) {
+                // Use 50% content + 50% header (balanced)
+                optimalWidth = (baseContentWidth * 0.5) + (headerWidth * 0.5);
+            }
+            // Rule 3: If content is wider or similar to header, use content
+            else {
+                // Use content width (header fits comfortably)
+                optimalWidth = baseContentWidth;
+            }
+            // Minimum width = reasonable minimum, not too cramped
+            const actualMinWidth = Math.max(minContentWidth + 20, finalConfig.globalMinWidth);
+            // Apply meta overrides if present
+            const finalMinWidth = metaMinWidth || actualMinWidth;
+            const finalMaxWidth = metaMaxWidth || finalConfig.globalMaxWidth;
+            // Final optimal width = content-based but capped at max
+            const finalWidth = Math.min(Math.max(finalMinWidth, optimalWidth), // At least minimum, prefer optimal
+            finalMaxWidth // But never exceed maximum
+            );
+            analysis.set(columnId, {
+                minWidth: finalMinWidth,
+                maxWidth: finalMaxWidth,
+                contentWidth: maxContentWidth,
+                optimalWidth: finalWidth,
+                dataType: contentAnalysis.dataType,
+                variance
+            });
+        });
+        return analysis;
+    }, [data, columns, finalConfig, analyzeContent]);
+    // Get optimal width for a specific column
+    const getColumnWidth = (0, react_1.useCallback)((columnId) => {
+        const analysis = columnAnalysis.get(columnId);
+        return analysis?.optimalWidth || finalConfig.globalMinWidth;
+    }, [columnAnalysis, finalConfig.globalMinWidth]);
+    // Get sizing constraints for a column
+    const getColumnConstraints = (0, react_1.useCallback)((columnId) => {
+        return columnAnalysis.get(columnId) || null;
+    }, [columnAnalysis]);
+    // Get sizing summary for debugging/monitoring
+    const getSizingSummary = (0, react_1.useCallback)(() => {
+        const summary = {};
+        columnAnalysis.forEach((constraints, columnId) => {
+            summary[columnId] = {
+                optimal: constraints.optimalWidth,
+                min: constraints.minWidth,
+                max: constraints.maxWidth,
+                content: constraints.contentWidth,
+                type: constraints.dataType,
+                variance: constraints.variance
+            };
+        });
+        return summary;
+    }, [columnAnalysis]);
+    // Recalculate widths (useful when data changes)
+    const recalculateWidths = (0, react_1.useCallback)(() => {
+        return getSizingSummary();
+    }, [getSizingSummary]);
+    // Auto-resize all columns to optimal width
+    const autoResizeAllColumns = (0, react_1.useCallback)((table) => {
+        if (!table?.getAllColumns)
+            return;
+        const allColumns = table.getAllColumns();
+        allColumns.forEach((column) => {
+            const columnId = column.id;
+            const optimalWidth = getColumnWidth(columnId);
+            if (column.setSize) {
+                column.setSize(optimalWidth);
+            }
+        });
+    }, [getColumnWidth]);
+    // Smart resize based on content changes (single column)
+    const smartResize = (0, react_1.useCallback)((columnId, table) => {
+        const column = table?.getColumn?.(columnId);
+        if (!column?.setSize)
+            return;
+        const optimalWidth = getColumnWidth(columnId);
+        column.setSize(optimalWidth);
+    }, [getColumnWidth]);
+    // Apply intelligent sizing to column definitions
+    const enhancedColumns = (0, react_1.useMemo)(() => {
+        if (!finalConfig.enableIntelligentSizing) {
+            return columns;
+        }
+        return columns.map(column => {
+            const columnId = column.id || column.accessorKey;
+            if (!columnId)
+                return column;
+            const constraints = columnAnalysis.get(columnId);
+            if (!constraints)
+                return column;
+            return {
+                ...column,
+                size: constraints.optimalWidth,
+                minSize: constraints.minWidth,
+                // maxSize intentionally not set here - allows users to drag columns wider than calculated optimal
+                // The calculated maxWidth is only used for auto-sizing, not for limiting manual resize
+                enableResizing: true
+            };
+        });
+    }, [columns, columnAnalysis, finalConfig]);
+    return {
+        // Enhanced columns with intelligent sizing
+        enhancedColumns,
+        // Utilities
+        getColumnWidth,
+        getColumnConstraints,
+        getSizingSummary,
+        recalculateWidths,
+        autoResizeAllColumns,
+        smartResize,
+        // Analysis data
+        columnAnalysis: Object.fromEntries(columnAnalysis),
+        // Configuration
+        config: finalConfig,
+        // Statistics
+        stats: {
+            totalColumns: columnAnalysis.size,
+            avgOptimalWidth: Array.from(columnAnalysis.values()).reduce((sum, c) => sum + c.optimalWidth, 0) / columnAnalysis.size || 0,
+            minWidth: Math.min(...Array.from(columnAnalysis.values()).map(c => c.optimalWidth), finalConfig.globalMaxWidth),
+            maxWidth: Math.max(...Array.from(columnAnalysis.values()).map(c => c.optimalWidth), finalConfig.globalMinWidth)
+        }
+    };
+}
+/**
+ * Helper function to create a column with intelligent sizing options
+ */
+function createIntelligentColumn(columnDef, sizingOptions) {
+    return {
+        ...columnDef,
+        meta: {
+            ...columnDef.meta,
+            minWidth: sizingOptions?.minWidth,
+            maxWidth: sizingOptions?.maxWidth,
+            priority: sizingOptions?.priority
+        }
+    };
+}
+/**
+ * Preset configurations for common use cases
+ */
+exports.COLUMN_SIZING_PRESETS = {
+    compact: {
+        globalMinWidth: 20,
+        globalMaxWidth: 200,
+        paddingBuffer: 4,
+        sampleSize: 50
+    },
+    standard: {
+        globalMinWidth: 30,
+        globalMaxWidth: 300,
+        paddingBuffer: 4,
+        sampleSize: 100
+    }
+};

package/dist/cjs/hooks/useKeyboardNavigation.js

@@ -0,0 +1,192 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardNavigation = useKeyboardNavigation;
+const react_1 = require("react");
+/**
+ * Hook for keyboard navigation in data grids
+ * Supports arrow keys, Enter for editing, Space for selection
+ */
+function useKeyboardNavigation(rows, columns, options = {}) {
+    const { enableNavigation = true, enableCellEdit = true, onCellEdit, onCellSelect, onRowSelect } = options;
+    const [focusedCell, setFocusedCell] = (0, react_1.useState)(null);
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    // Get navigable columns (exclude select columns)
+    const navigableColumns = columns.filter(col => !col.meta?.isSelectColumn && col.id !== 'select');
+    // Move focus to a specific cell
+    const moveFocus = (0, react_1.useCallback)((rowIndex, columnIndex) => {
+        const maxRow = rows.length - 1;
+        const maxCol = navigableColumns.length - 1;
+        const newRowIndex = Math.max(0, Math.min(rowIndex, maxRow));
+        const newColIndex = Math.max(0, Math.min(columnIndex, maxCol));
+        setFocusedCell({ rowIndex: newRowIndex, columnIndex: newColIndex });
+        const columnId = navigableColumns[newColIndex]?.id || navigableColumns[newColIndex]?.accessorKey;
+        onCellSelect?.(newRowIndex, columnId);
+    }, [rows.length, navigableColumns, onCellSelect]);
+    // Start editing current cell
+    const startEditing = (0, react_1.useCallback)(() => {
+        if (!focusedCell || !enableCellEdit)
+            return;
+        setIsEditing(true);
+        const columnId = navigableColumns[focusedCell.columnIndex]?.id ||
+            navigableColumns[focusedCell.columnIndex]?.accessorKey;
+        onCellEdit?.(focusedCell.rowIndex, columnId);
+    }, [focusedCell, enableCellEdit, navigableColumns, onCellEdit]);
+    // Stop editing
+    const stopEditing = (0, react_1.useCallback)(() => {
+        setIsEditing(false);
+    }, []);
+    // Handle keyboard events
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (!enableNavigation || !focusedCell)
+            return;
+        // Don't handle keys when editing (let the edit component handle them)
+        if (isEditing)
+            return;
+        const { rowIndex, columnIndex } = focusedCell;
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                moveFocus(rowIndex - 1, columnIndex);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                moveFocus(rowIndex + 1, columnIndex);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                moveFocus(rowIndex, columnIndex - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                moveFocus(rowIndex, columnIndex + 1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (event.ctrlKey) {
+                    // Ctrl+Home: Go to first cell
+                    moveFocus(0, 0);
+                }
+                else {
+                    // Home: Go to first column of current row
+                    moveFocus(rowIndex, 0);
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                if (event.ctrlKey) {
+                    // Ctrl+End: Go to last cell
+                    moveFocus(rows.length - 1, navigableColumns.length - 1);
+                }
+                else {
+                    // End: Go to last column of current row
+                    moveFocus(rowIndex, navigableColumns.length - 1);
+                }
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                moveFocus(Math.max(0, rowIndex - 10), columnIndex);
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                moveFocus(Math.min(rows.length - 1, rowIndex + 10), columnIndex);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (enableCellEdit) {
+                    startEditing();
+                }
+                break;
+            case ' ':
+                event.preventDefault();
+                // Space for row selection
+                onRowSelect?.(rowIndex, event.ctrlKey || event.metaKey);
+                break;
+            case 'Tab':
+                event.preventDefault();
+                if (event.shiftKey) {
+                    // Shift+Tab: Move to previous cell
+                    if (columnIndex > 0) {
+                        moveFocus(rowIndex, columnIndex - 1);
+                    }
+                    else if (rowIndex > 0) {
+                        moveFocus(rowIndex - 1, navigableColumns.length - 1);
+                    }
+                }
+                else {
+                    // Tab: Move to next cell
+                    if (columnIndex < navigableColumns.length - 1) {
+                        moveFocus(rowIndex, columnIndex + 1);
+                    }
+                    else if (rowIndex < rows.length - 1) {
+                        moveFocus(rowIndex + 1, 0);
+                    }
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                // Clear focus or stop editing
+                if (isEditing) {
+                    stopEditing();
+                }
+                else {
+                    setFocusedCell(null);
+                }
+                break;
+        }
+    }, [
+        enableNavigation,
+        focusedCell,
+        isEditing,
+        rows.length,
+        navigableColumns.length,
+        moveFocus,
+        startEditing,
+        stopEditing,
+        onRowSelect,
+        enableCellEdit
+    ]);
+    // Attach keyboard event listeners
+    (0, react_1.useEffect)(() => {
+        const container = containerRef.current;
+        if (!container || !enableNavigation)
+            return;
+        container.addEventListener('keydown', handleKeyDown);
+        return () => container.removeEventListener('keydown', handleKeyDown);
+    }, [handleKeyDown, enableNavigation]);
+    // Scroll focused cell into view
+    (0, react_1.useEffect)(() => {
+        if (!focusedCell || !containerRef.current)
+            return;
+        const container = containerRef.current;
+        const cell = container.querySelector(`[data-row-index="${focusedCell.rowIndex}"][data-column-index="${focusedCell.columnIndex}"]`);
+        if (cell) {
+            cell.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest'
+            });
+        }
+    }, [focusedCell]);
+    // Public API
+    return {
+        containerRef,
+        focusedCell,
+        isEditing,
+        moveFocus,
+        startEditing,
+        stopEditing,
+        setFocusedCell,
+        // Helper functions
+        isCellFocused: (rowIndex, columnIndex) => focusedCell?.rowIndex === rowIndex && focusedCell?.columnIndex === columnIndex,
+        getCellProps: (rowIndex, columnIndex) => ({
+            'data-row-index': rowIndex,
+            'data-column-index': columnIndex,
+            tabIndex: focusedCell?.rowIndex === rowIndex && focusedCell?.columnIndex === columnIndex ? 0 : -1,
+            className: focusedCell?.rowIndex === rowIndex && focusedCell?.columnIndex === columnIndex
+                ? 'ring-2 ring-blue-500 ring-inset'
+                : ''
+        })
+    };
+}

package/dist/cjs/hooks/useNotifications.js

@@ -0,0 +1,63 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNotifications = void 0;
+exports.formatTimeAgo = formatTimeAgo;
+exports.getNotificationIcon = getNotificationIcon;
+exports.getIconBoxColors = getIconBoxColors;
+const lucide_react_1 = require("lucide-react");
+// `useNotifications` now reads from the shared NotificationProvider (one fetch/poll/SignalR
+// for the whole app) instead of running its own per-mount. Re-exported here so existing
+// `@/hooks/useNotifications` imports keep working unchanged.
+var NotificationContext_1 = require("../contexts/NotificationContext.js");
+Object.defineProperty(exports, "useNotifications", { enumerable: true, get: function () { return NotificationContext_1.useNotifications; } });
+// Helper: format relative time
+function formatTimeAgo(dateString) {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / (1000 * 60));
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    if (diffMins < 1)
+        return 'Just now';
+    if (diffMins < 60)
+        return `${diffMins} min ago`;
+    if (diffHours < 24)
+        return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+    if (diffDays < 7)
+        return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+    return date.toLocaleDateString();
+}
+// Helper: get icon component for a notification
+function getNotificationIcon(notification) {
+    const type = notification.type;
+    const module = notification.module;
+    if (type === 'Approval' || module === 'Approval')
+        return lucide_react_1.FileText;
+    if (type === 'Warning')
+        return lucide_react_1.AlertTriangle;
+    if (type === 'Error')
+        return lucide_react_1.AlertOctagon;
+    if (type === 'Success')
+        return lucide_react_1.CheckCircle;
+    if (module === 'Enquiry')
+        return lucide_react_1.UserPlus;
+    if (module === 'Estimation')
+        return lucide_react_1.DollarSign;
+    if (module === 'Quotation')
+        return lucide_react_1.FileText;
+    return lucide_react_1.Bell;
+}
+// Helper: get icon box color classes for a notification (based on category)
+function getIconBoxColors(notification) {
+    const category = notification.category;
+    if (category === 'Pending') {
+        return 'bg-amber-50 text-amber-600';
+    }
+    if (category === 'Escalation') {
+        return 'bg-red-50 text-red-600';
+    }
+    // Update
+    return 'bg-blue-50 text-blue-500';
+}

package/dist/cjs/hooks/usePrevious.js

@@ -0,0 +1,20 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrevious = usePrevious;
+const react_1 = require("react");
+/**
+ * Custom hook to get the previous value of a state or prop
+ * More modern alternative to manually managing prevRef
+ *
+ * @example
+ * const prevCount = usePrevious(count)
+ * const prevIsOpen = usePrevious(isOpen)
+ */
+function usePrevious(value) {
+    const ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}