indas-ui 0.0.1 → 0.1.0

package/dist/hooks/useKeyboardNavigation.js

@@ -0,0 +1,189 @@
+'use client';
+import { useState, useCallback, useEffect, useRef } from 'react';
+/**
+ * Hook for keyboard navigation in data grids
+ * Supports arrow keys, Enter for editing, Space for selection
+ */
+export function useKeyboardNavigation(rows, columns, options = {}) {
+    const { enableNavigation = true, enableCellEdit = true, onCellEdit, onCellSelect, onRowSelect } = options;
+    const [focusedCell, setFocusedCell] = useState(null);
+    const [isEditing, setIsEditing] = useState(false);
+    const containerRef = 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 = 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 = 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 = useCallback(() => {
+        setIsEditing(false);
+    }, []);
+    // Handle keyboard events
+    const handleKeyDown = 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
+    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
+    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/hooks/useNotifications.d.ts

@@ -0,0 +1,7 @@
+import type { LucideIcon } from 'lucide-react';
+import type { NotificationResponse } from '../lib/api/activity/index.js';
+export { useNotifications } from '../contexts/NotificationContext.js';
+export type { NotificationCategoryTab } from '../contexts/NotificationContext.js';
+export declare function formatTimeAgo(dateString: string): string;
+export declare function getNotificationIcon(notification: NotificationResponse): LucideIcon;
+export declare function getIconBoxColors(notification: NotificationResponse): string;

package/dist/hooks/useNotifications.js

@@ -0,0 +1,56 @@
+'use client';
+import { Bell, FileText, DollarSign, AlertTriangle, AlertOctagon, CheckCircle, UserPlus } from '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.
+export { useNotifications } from '../contexts/NotificationContext.js';
+// Helper: format relative time
+export 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
+export function getNotificationIcon(notification) {
+    const type = notification.type;
+    const module = notification.module;
+    if (type === 'Approval' || module === 'Approval')
+        return FileText;
+    if (type === 'Warning')
+        return AlertTriangle;
+    if (type === 'Error')
+        return AlertOctagon;
+    if (type === 'Success')
+        return CheckCircle;
+    if (module === 'Enquiry')
+        return UserPlus;
+    if (module === 'Estimation')
+        return DollarSign;
+    if (module === 'Quotation')
+        return FileText;
+    return Bell;
+}
+// Helper: get icon box color classes for a notification (based on category)
+export 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/hooks/usePrevious.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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)
+ */
+export declare function usePrevious<T>(value: T): T | undefined;

package/dist/hooks/usePrevious.js

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect, useRef } from '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)
+ */
+export function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}

package/dist/hooks/useRowSelection.d.ts

@@ -0,0 +1,45 @@
+export interface RowSelectionState<TData> {
+    selectedRows: Set<string>;
+    selectedData: TData[];
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+}
+export interface UseRowSelectionOptions<TData> {
+    data: TData[];
+    getRowId?: (row: TData) => string;
+    enableMultiSelect?: boolean;
+    onSelectionChange?: (selectedRows: TData[]) => void;
+}
+/**
+ * Hook for managing row selection state with batch operations
+ * Optimized for performance with large datasets
+ */
+export declare function useRowSelection<TData>({ data, getRowId, enableMultiSelect, onSelectionChange }: UseRowSelectionOptions<TData>): {
+    toggleRowSelection: (rowOrId: TData | string, forceValue?: boolean) => void;
+    selectRows: (rows: TData[], replace?: boolean) => void;
+    selectAll: () => void;
+    clearSelection: () => void;
+    toggleAllSelection: () => void;
+    selectWhere: (predicate: (row: TData) => boolean, replace?: boolean) => void;
+    isRowSelected: (rowOrId: TData | string) => boolean;
+    batchOperations: {
+        selectRange: (startIndex: number, endIndex: number) => void;
+        invertSelection: () => void;
+        selectByIndices: (indices: number[]) => void;
+    };
+    getRowSelectionProps: (row: TData) => {
+        checked: boolean;
+        onChange: (checked: boolean) => void;
+        'aria-label': string;
+    };
+    getSelectAllProps: () => {
+        checked: boolean;
+        indeterminate: boolean;
+        onChange: () => void;
+        'aria-label': string;
+    };
+    selectedRows: Set<string>;
+    selectedData: TData[];
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+};

package/dist/hooks/useRowSelection.js

@@ -0,0 +1,147 @@
+'use client';
+import { useState, useCallback, useMemo } from 'react';
+/**
+ * Hook for managing row selection state with batch operations
+ * Optimized for performance with large datasets
+ */
+export function useRowSelection({ data, getRowId = (row) => row.id || Math.random().toString(), enableMultiSelect = true, onSelectionChange }) {
+    const [selectedRowIds, setSelectedRowIds] = useState(new Set());
+    // Memoized row ID map for performance
+    const rowIdMap = useMemo(() => {
+        const map = new Map();
+        data.forEach((row) => {
+            const id = getRowId(row);
+            map.set(id, row);
+        });
+        return map;
+    }, [data, getRowId]);
+    // Calculate selection state
+    const selectionState = useMemo(() => {
+        const selectedData = Array.from(selectedRowIds)
+            .map(id => rowIdMap.get(id))
+            .filter(Boolean);
+        const isAllSelected = data.length > 0 && selectedRowIds.size === data.length;
+        const isIndeterminate = selectedRowIds.size > 0 && selectedRowIds.size < data.length;
+        return {
+            selectedRows: selectedRowIds,
+            selectedData,
+            isAllSelected,
+            isIndeterminate
+        };
+    }, [selectedRowIds, rowIdMap, data.length]);
+    // Select/deselect a single row
+    const toggleRowSelection = useCallback((rowOrId, forceValue) => {
+        const id = typeof rowOrId === 'string' ? rowOrId : getRowId(rowOrId);
+        setSelectedRowIds(prev => {
+            const newSet = new Set(prev);
+            const isCurrentlySelected = newSet.has(id);
+            const shouldSelect = forceValue !== undefined ? forceValue : !isCurrentlySelected;
+            if (shouldSelect) {
+                if (!enableMultiSelect) {
+                    newSet.clear();
+                }
+                newSet.add(id);
+            }
+            else {
+                newSet.delete(id);
+            }
+            // Trigger callback with new selection
+            const selectedData = Array.from(newSet)
+                .map(id => rowIdMap.get(id))
+                .filter(Boolean);
+            onSelectionChange?.(selectedData);
+            return newSet;
+        });
+    }, [getRowId, enableMultiSelect, rowIdMap, onSelectionChange]);
+    // Select multiple rows
+    const selectRows = useCallback((rows, replace = false) => {
+        setSelectedRowIds(prev => {
+            const newSet = replace ? new Set() : new Set(prev);
+            rows.forEach(row => {
+                const id = getRowId(row);
+                newSet.add(id);
+            });
+            // Trigger callback
+            const selectedData = Array.from(newSet)
+                .map(id => rowIdMap.get(id))
+                .filter(Boolean);
+            onSelectionChange?.(selectedData);
+            return newSet;
+        });
+    }, [getRowId, rowIdMap, onSelectionChange]);
+    // Select all rows
+    const selectAll = useCallback(() => {
+        const allIds = data.map((row) => getRowId(row));
+        setSelectedRowIds(new Set(allIds));
+        onSelectionChange?.(data);
+    }, [data, getRowId, onSelectionChange]);
+    // Clear selection
+    const clearSelection = useCallback(() => {
+        setSelectedRowIds(new Set());
+        onSelectionChange?.([]);
+    }, [onSelectionChange]);
+    // Toggle all selection
+    const toggleAllSelection = useCallback(() => {
+        if (selectionState.isAllSelected) {
+            clearSelection();
+        }
+        else {
+            selectAll();
+        }
+    }, [selectionState.isAllSelected, clearSelection, selectAll]);
+    // Check if a row is selected
+    const isRowSelected = useCallback((rowOrId) => {
+        const id = typeof rowOrId === 'string' ? rowOrId : getRowId(rowOrId);
+        return selectedRowIds.has(id);
+    }, [selectedRowIds, getRowId]);
+    // Select rows by condition
+    const selectWhere = useCallback((predicate, replace = false) => {
+        const matchingRows = data.filter(predicate);
+        selectRows(matchingRows, replace);
+    }, [data, selectRows]);
+    // Batch operations
+    const batchOperations = {
+        selectRange: (startIndex, endIndex) => {
+            const start = Math.max(0, Math.min(startIndex, endIndex));
+            const end = Math.min(data.length - 1, Math.max(startIndex, endIndex));
+            const rangeRows = data.slice(start, end + 1);
+            selectRows(rangeRows);
+        },
+        invertSelection: () => {
+            const unselectedRows = data.filter(row => !isRowSelected(row));
+            selectRows(unselectedRows, true);
+        },
+        selectByIndices: (indices) => {
+            const rows = indices
+                .filter(i => i >= 0 && i < data.length)
+                .map(i => data[i]);
+            selectRows(rows);
+        }
+    };
+    return {
+        // State
+        ...selectionState,
+        // Actions
+        toggleRowSelection,
+        selectRows,
+        selectAll,
+        clearSelection,
+        toggleAllSelection,
+        selectWhere,
+        // Utilities
+        isRowSelected,
+        batchOperations,
+        // For integration with table libraries
+        getRowSelectionProps: (row) => ({
+            checked: isRowSelected(row),
+            onChange: (checked) => toggleRowSelection(row, checked),
+            'aria-label': `Select row ${getRowId(row)}`
+        }),
+        getSelectAllProps: () => ({
+            checked: selectionState.isAllSelected,
+            indeterminate: selectionState.isIndeterminate,
+            onChange: toggleAllSelection,
+            'aria-label': 'Select all rows'
+        })
+    };
+}

package/dist/hooks/useSignalR.d.ts

@@ -0,0 +1,13 @@
+interface UseSignalROptions {
+    session: any;
+    onReceiveNotification: (data: any) => void;
+}
+/**
+ * Hook to manage a SignalR connection for real-time notifications.
+ *
+ * Connects to /hubs/notifications with companyId/userId as query params.
+ * Auto-reconnects with backoff: [0s, 2s, 5s, 10s, 30s].
+ * Uses ref pattern to avoid stale closure issues with the callback.
+ */
+export declare function useSignalR({ session, onReceiveNotification }: UseSignalROptions): void;
+export {};

package/dist/hooks/useSignalR.js

@@ -0,0 +1,50 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { HubConnectionBuilder, HubConnectionState, LogLevel } from '@microsoft/signalr';
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || '';
+/**
+ * Hook to manage a SignalR connection for real-time notifications.
+ *
+ * Connects to /hubs/notifications with companyId/userId as query params.
+ * Auto-reconnects with backoff: [0s, 2s, 5s, 10s, 30s].
+ * Uses ref pattern to avoid stale closure issues with the callback.
+ */
+export function useSignalR({ session, onReceiveNotification }) {
+    const connectionRef = useRef(null);
+    const onReceiveRef = useRef(onReceiveNotification);
+    // Keep callback ref current without re-connecting
+    useEffect(() => {
+        onReceiveRef.current = onReceiveNotification;
+    }, [onReceiveNotification]);
+    useEffect(() => {
+        if (!session?.user || !API_BASE_URL)
+            return;
+        const companyId = session.user.CompanyID || session.user.companyID;
+        const userId = session.user.UserID || session.user.userID;
+        if (!companyId || !userId)
+            return;
+        const hubUrl = `${API_BASE_URL}/hubs/notifications?companyId=${companyId}&userId=${userId}`;
+        const connection = new HubConnectionBuilder()
+            .withUrl(hubUrl)
+            .withAutomaticReconnect([0, 2000, 5000, 10000, 30000])
+            .configureLogging(LogLevel.None)
+            .build();
+        connection.on('ReceiveNotification', (data) => {
+            onReceiveRef.current(data);
+        });
+        connection.onreconnecting(() => { });
+        connection.onreconnected(() => { });
+        connection.onclose(() => { });
+        connection
+            .start()
+            .catch(() => {
+            // Silent fail — auto-reconnect will retry
+        });
+        connectionRef.current = connection;
+        return () => {
+            if (connection.state !== HubConnectionState.Disconnected) {
+                connection.stop();
+            }
+        };
+    }, [session?.user?.CompanyID, session?.user?.companyID, session?.user?.UserID, session?.user?.userID]);
+}

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,59 @@
+import type { Theme, ThemeVariant, ColorMode, CustomTheme, CustomThemeColors, ThemeContextValue, FontFamily, FontSize } from '../lib/theme/types.js';
+import { generateColorVariants } from '../lib/theme/utils.js';
+/**
+ * Hook for managing theme state
+ * This is the main interface for theme management in the application
+ */
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Low-level theme hook for internal use or when provider is not needed
+ * Most components should use useTheme() instead
+ */
+export declare function useThemeState(defaultTheme?: Theme, storageKey?: string, enableSystem?: boolean): {
+    theme: Theme;
+    setTheme: (newTheme: Theme) => Promise<void>;
+    setVariant: (variant: ThemeVariant) => void;
+    setMode: (mode: ColorMode) => void;
+    toggleMode: () => void;
+    setFontFamily: (fontFamily: FontFamily) => void;
+    setFontSize: (fontSize: FontSize) => void;
+    setFontScale: (scale: number) => void;
+    customTheme: CustomTheme;
+    setCustomTheme: (colors: CustomThemeColors, name?: string) => Promise<void>;
+    removeCustomTheme: () => Promise<void>;
+    isDark: boolean;
+    isSystemPreference: boolean;
+    availableThemes: ("orange" | "black" | "green" | "purple" | "red" | "default" | "custom")[];
+    currentThemeClass: string;
+};
+/**
+ * Hook for generating custom themes from a base color
+ */
+export declare function useCustomThemeGenerator(): {
+    generateFromColor: (baseColor: string, name?: string) => {
+        success: boolean;
+        variants: CustomThemeColors;
+        error?: undefined;
+    } | {
+        success: boolean;
+        error: string;
+        variants?: undefined;
+    };
+    validateColor: (colors: CustomThemeColors, mode?: ColorMode) => import("../lib/theme/types.js").ThemeValidationResult;
+    generateColorVariants: typeof generateColorVariants;
+};
+/**
+ * Hook for theme-aware animations
+ */
+export declare function useThemeTransitions(): {
+    isTransitioning: boolean;
+    transitionClass: string;
+};
+/**
+ * Hook for persisting theme across sessions (multi-tenant support)
+ */
+export declare function useThemePersistence(tenantId?: string): {
+    saveThemeForTenant: (theme: Theme) => Promise<void>;
+    loadThemeForTenant: () => Promise<Theme | null>;
+    currentStorageKey: string;
+};