@reactorui/datagrid 1.0.0

package/dist/components/DataGrid/DataGrid.d.ts

@@ -0,0 +1,5 @@
+import { DataGridProps } from '../../types';
+export declare const DataGrid: <T extends {
+    id?: string | number;
+} = any>({ data, endpoint, columns: columnsProp, enableSearch, enableSorting, enableFilters, enableSelection, pageSize, serverPageSize, pageSizeOptions, httpConfig, variant, size, className, onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, onSortChange, onFilterChange, onSearchChange, onTableRefresh, onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, ...rest }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataGrid.d.ts.map

package/dist/components/DataGrid/DataGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAU,MAAM,aAAa,CAAC;AAQpD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,GAAG,EAAE,obAkChE,aAAa,CAAC,CAAC,CAAC,4CAwLlB,CAAC"}

package/dist/components/DataGrid/DataGrid.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { useDataGrid } from '../../hooks';
+import { SearchInput } from '../Search';
+import { FilterControls } from '../Filter';
+import { TableHeader, TableBody } from '../Table';
+import { Pagination } from '../Pagination';
+import { getTheme } from '../../themes';
+export const DataGrid = ({ data, endpoint, columns: columnsProp = [], enableSearch = true, enableSorting = true, enableFilters = true, enableSelection = true, pageSize = 10, serverPageSize = 100, pageSizeOptions = [5, 10, 25, 50, 100], httpConfig, variant = 'default', size = 'md', className = '', 
+// Event callbacks (renamed to avoid HTML conflicts)
+onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, onSortChange, onFilterChange, onSearchChange, onTableRefresh, onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, ...rest }) => {
+    const theme = getTheme(variant);
+    // Use the data grid hook with all callbacks
+    const { data: sourceData, processedData, paginatedData, loading, error, searchTerm, activeFilters, sortConfig, selectedRows, currentPage, currentPageSize, setSearchTerm, setSort, setCurrentPage, setCurrentPageSize, addFilter, removeFilter, clearFilters, selectRow, selectAll, paginationInfo, selectedData, refresh, } = useDataGrid({
+        data,
+        endpoint,
+        httpConfig,
+        pageSize,
+        serverPageSize,
+        onDataLoad,
+        onDataError,
+        onLoadingStateChange,
+        onPageChange,
+        onPageSizeChange,
+        onSortChange,
+        onFilterChange,
+        onSearchChange,
+    });
+    // Auto-detect columns if not provided
+    const columns = useMemo(() => {
+        if (columnsProp.length > 0)
+            return columnsProp;
+        if (sourceData.length > 0) {
+            const firstRow = sourceData[0];
+            return Object.keys(firstRow).map(key => ({
+                key,
+                label: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
+                sortable: true,
+                filterable: true,
+                dataType: inferDataType(firstRow[key]),
+            }));
+        }
+        return [];
+    }, [columnsProp, sourceData]);
+    // Handle selection changes
+    React.useEffect(() => {
+        if (onSelectionChange) {
+            onSelectionChange(selectedData);
+        }
+    }, [selectedData, onSelectionChange]);
+    // Handle row selection with callback
+    const handleRowSelect = (rowId, selected) => {
+        selectRow(rowId, selected);
+        if (onRowSelect) {
+            const row = sourceData.find(r => String(r.id) === rowId);
+            if (row) {
+                onRowSelect(row, selected);
+            }
+        }
+    };
+    // Handle refresh
+    const handleRefresh = () => {
+        refresh();
+        onTableRefresh?.();
+    };
+    if (error) {
+        return (_jsx("div", { className: `${theme.container} ${className}`, ...rest, children: _jsxs("div", { className: "px-4 py-8 text-center", children: [_jsx("div", { className: "text-red-600 mb-2", children: "Error loading data" }), _jsx("div", { className: "text-sm text-gray-600 mb-4", children: error }), _jsx("button", { onClick: handleRefresh, className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700", children: "Try Again" })] }) }));
+    }
+    return (_jsxs("div", { className: `${theme.container} ${className}`, ...rest, children: [_jsxs("div", { className: "p-4 space-y-4", children: [enableFilters && (_jsx(FilterControls, { columns: columns, activeFilters: activeFilters, onAddFilter: addFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters })), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center", children: [enableSearch && (_jsx("div", { className: "w-full sm:w-64", children: _jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search...", disabled: loading }) })), _jsx("button", { onClick: handleRefresh, disabled: loading, className: "px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 disabled:opacity-50", children: loading ? 'Loading...' : 'Refresh' })] })] }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: theme.table, children: [_jsx(TableHeader, { columns: columns, sortConfig: sortConfig, onSort: enableSorting ? setSort : undefined, enableSelection: enableSelection, selectedCount: selectedRows.size, totalCount: paginatedData.length, onSelectAll: enableSelection ? selectAll : undefined }), _jsx(TableBody, { columns: columns, data: paginatedData, selectedRows: selectedRows, onSelectRow: enableSelection ? handleRowSelect : undefined, onRowClick: onTableRowClick, onRowDoubleClick: onTableRowDoubleClick, onRowHover: onTableRowHover, onCellClick: onCellClick, enableSelection: enableSelection, loading: loading })] }) }), _jsx(Pagination, { currentPage: currentPage, totalPages: paginationInfo.totalPages, pageSize: currentPageSize, pageSizeOptions: pageSizeOptions, totalRecords: processedData.length, displayStart: paginationInfo.start, displayEnd: paginationInfo.end, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, hasNext: paginationInfo.hasNext, hasPrevious: paginationInfo.hasPrevious })] }));
+};
+// Helper function to infer data type
+function inferDataType(value) {
+    if (value == null)
+        return 'string';
+    if (typeof value === 'boolean')
+        return 'boolean';
+    if (typeof value === 'number')
+        return 'number';
+    if (typeof value === 'string') {
+        // Try to detect dates
+        const dateValue = new Date(value);
+        if (!isNaN(dateValue.getTime()) && dateValue.getFullYear() > 1900) {
+            return value.includes('T') || value.includes(' ') ? 'datetime' : 'date';
+        }
+    }
+    return 'string';
+}

package/dist/components/DataGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { DataGrid } from './DataGrid';
+export type { DataGridProps } from '../../types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DataGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/DataGrid/index.js

@@ -0,0 +1 @@
+export { DataGrid } from './DataGrid';

package/dist/components/Filter/FilterControls.d.ts

@@ -0,0 +1,11 @@
+import { Column, ActiveFilter } from '../../types';
+interface FilterControlsProps<T> {
+    columns: Column<T>[];
+    activeFilters: ActiveFilter[];
+    onAddFilter: (filter: Omit<ActiveFilter, 'label'>) => void;
+    onRemoveFilter: (index: number) => void;
+    onClearFilters: () => void;
+}
+export declare const FilterControls: <T>({ columns, activeFilters, onAddFilter, onRemoveFilter, onClearFilters, }: FilterControlsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterControls.d.ts.map

package/dist/components/Filter/FilterControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterControls.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/FilterControls.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEnD,UAAU,mBAAmB,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,WAAW,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,EAAG,0EAMhC,mBAAmB,CAAC,CAAC,CAAC,4CAsLxB,CAAC"}

package/dist/components/Filter/FilterControls.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export const FilterControls = ({ columns, activeFilters, onAddFilter, onRemoveFilter, onClearFilters, }) => {
+    const [filterColumn, setFilterColumn] = useState('');
+    const [filterOperator, setFilterOperator] = useState('eq');
+    const [filterValue, setFilterValue] = useState('');
+    const filterableColumns = columns.filter((col) => col.filterable !== false);
+    const selectedColumn = filterableColumns.find((col) => col.key === filterColumn);
+    const getOperatorOptions = () => {
+        if (!selectedColumn)
+            return [{ value: 'eq', label: 'equals' }];
+        switch (selectedColumn.dataType) {
+            case 'number':
+            case 'date':
+            case 'datetime':
+                return [
+                    { value: 'eq', label: 'equals' },
+                    { value: 'gt', label: 'greater than' },
+                    { value: 'gte', label: 'greater than or equal' },
+                    { value: 'lt', label: 'less than' },
+                    { value: 'lte', label: 'less than or equal' },
+                ];
+            case 'string':
+                return [
+                    { value: 'eq', label: 'equals' },
+                    { value: 'contains', label: 'contains' },
+                    { value: 'startsWith', label: 'starts with' },
+                    { value: 'endsWith', label: 'ends with' },
+                ];
+            case 'boolean':
+                return [{ value: 'eq', label: 'equals' }];
+            default:
+                return [{ value: 'eq', label: 'equals' }];
+        }
+    };
+    const renderFilterInput = () => {
+        if (!selectedColumn) {
+            return (_jsx("input", { type: "text", disabled: true, placeholder: "Select column first", className: "px-3 py-2 border border-gray-300 rounded-md text-sm bg-gray-50 cursor-not-allowed" }));
+        }
+        const baseProps = {
+            value: filterValue,
+            onChange: (e) => setFilterValue(e.target.value),
+            className: 'px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500',
+        };
+        switch (selectedColumn.dataType) {
+            case 'boolean':
+                return (_jsxs("select", { ...baseProps, children: [_jsx("option", { value: "", children: "Select value" }), _jsx("option", { value: "true", children: "True" }), _jsx("option", { value: "false", children: "False" })] }));
+            case 'date':
+                return _jsx("input", { ...baseProps, type: "date" });
+            case 'datetime':
+                return _jsx("input", { ...baseProps, type: "datetime-local" });
+            case 'number':
+                return _jsx("input", { ...baseProps, type: "number", placeholder: "Enter number" });
+            default:
+                return _jsx("input", { ...baseProps, type: "text", placeholder: "Enter value" });
+        }
+    };
+    const handleApplyFilter = () => {
+        if (!filterColumn || !filterValue.trim())
+            return;
+        onAddFilter({
+            column: filterColumn,
+            operator: filterOperator,
+            value: filterValue.trim(),
+            dataType: selectedColumn?.dataType || 'string',
+        });
+        // Reset form
+        setFilterColumn('');
+        setFilterOperator('eq');
+        setFilterValue('');
+    };
+    const canApplyFilter = filterColumn && filterValue.trim();
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-end", children: [_jsxs("div", { className: "min-w-40", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Column" }), _jsxs("select", { value: filterColumn, onChange: (e) => {
+                                    setFilterColumn(e.target.value);
+                                    setFilterOperator('eq');
+                                    setFilterValue('');
+                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "", children: "Select Column" }), filterableColumns.map((col) => (_jsx("option", { value: String(col.key), children: col.label }, String(col.key))))] })] }), _jsxs("div", { className: "min-w-32", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Operator" }), _jsx("select", { value: filterOperator, onChange: (e) => setFilterOperator(e.target.value), disabled: !filterColumn, className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-50 disabled:cursor-not-allowed", children: getOperatorOptions().map((op) => (_jsx("option", { value: op.value, children: op.label }, op.value))) })] }), _jsxs("div", { className: "min-w-40", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Value" }), renderFilterInput()] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: handleApplyFilter, disabled: !canApplyFilter, className: "px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed", children: "Apply Filter" }), _jsx("button", { onClick: onClearFilters, className: "px-4 py-2 bg-gray-100 text-gray-700 text-sm rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500", children: "Clear All" })] })] }), activeFilters.length > 0 && (_jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [_jsx("span", { className: "text-sm text-gray-600", children: "Active filters:" }), activeFilters.map((filter, index) => (_jsxs("span", { className: "inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm", children: [filter.label, _jsx("button", { onClick: () => onRemoveFilter(index), className: "ml-1 text-blue-600 hover:text-blue-800 focus:outline-none", children: "\u00D7" })] }, index)))] }))] }));
+};

package/dist/components/Filter/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterControls } from './FilterControls';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Filter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Filter/index.js

@@ -0,0 +1 @@
+export { FilterControls } from './FilterControls';

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    pageSize: number;
+    pageSizeOptions: number[];
+    totalRecords: number;
+    displayStart: number;
+    displayEnd: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    hasNext: boolean;
+    hasPrevious: boolean;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0EhD,CAAC"}

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export const Pagination = ({ currentPage, totalPages, pageSize, pageSizeOptions, totalRecords, displayStart, displayEnd, onPageChange, onPageSizeChange, hasNext, hasPrevious, }) => {
+    const handlePageChange = (page) => {
+        if (page >= 1 && page <= totalPages) {
+            onPageChange(page);
+        }
+    };
+    const handlePageSizeChange = (newSize) => {
+        onPageSizeChange(newSize);
+    };
+    return (_jsxs("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 px-4 py-3 bg-white border-t border-gray-200", children: [_jsxs("div", { className: "text-sm text-gray-700", children: ["Showing ", displayStart, "-", displayEnd, " of ", totalRecords, " records"] }), _jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-700", children: "Show:" }), _jsx("select", { value: pageSize, onChange: (e) => handlePageSizeChange(parseInt(e.target.value)), className: "px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) }), _jsx("span", { className: "text-sm text-gray-700", children: "entries" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: !hasPrevious, className: "px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-700", children: ["Page ", currentPage, " of ", totalPages] }), _jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: !hasNext, className: "px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed", children: "Next" })] })] })] }));
+};

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/Pagination/index.js

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/dist/components/Search/SearchInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const SearchInput: React.FC<SearchInputProps>;
+export {};
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/Search/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/Search/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuClD,CAAC"}

package/dist/components/Search/SearchInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SearchInput = ({ value, onChange, placeholder = 'Search...', disabled = false, className = '', }) => {
+    return (_jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, className: `
+          w-full px-3 py-2 pl-10 border border-gray-300 rounded-md text-sm
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          disabled:bg-gray-50 disabled:text-gray-500
+          ${className}
+        ` }), _jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: _jsx("svg", { className: "h-4 w-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })] }));
+};

package/dist/components/Search/index.d.ts

@@ -0,0 +1,2 @@
+export { SearchInput } from './SearchInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Search/index.js

@@ -0,0 +1 @@
+export { SearchInput } from './SearchInput';

package/dist/components/Table/TableBody.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Column } from '../../types';
+interface TableBodyProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    selectedRows: Set<string>;
+    onSelectRow?: (rowId: string, selected: boolean) => void;
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    onRowDoubleClick?: (row: T, event: React.MouseEvent) => void;
+    onRowHover?: (row: T | null, event: React.MouseEvent) => void;
+    onCellClick?: (value: any, row: T, column: Column<T>, event: React.MouseEvent) => void;
+    enableSelection: boolean;
+    loading: boolean;
+    emptyMessage?: string;
+}
+export declare const TableBody: <T extends {
+    id?: string | number;
+}>({ columns, data, selectedRows, onSelectRow, onRowClick, onRowDoubleClick, onRowHover, onCellClick, enableSelection, loading, emptyMessage, }: TableBodyProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableBody.d.ts.map

package/dist/components/Table/TableBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,UAAU,cAAc,CAAC,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvF,eAAe,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,8IAY3D,cAAc,CAAC,CAAC,CAAC,4CAmInB,CAAC"}

package/dist/components/Table/TableBody.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TableBody = ({ columns, data, selectedRows, onSelectRow, onRowClick, onRowDoubleClick, onRowHover, onCellClick, enableSelection, loading, emptyMessage = 'No data available', }) => {
+    const renderCell = (row, column) => {
+        const value = row[column.key];
+        if (column.render) {
+            return column.render(value, row, 0);
+        }
+        return value?.toString() || '';
+    };
+    const getRowId = (row) => {
+        return String(row.id || Math.random());
+    };
+    const handleRowClick = (row, event) => {
+        // Don't trigger if clicking on interactive elements
+        if (event.target instanceof HTMLInputElement ||
+            event.target instanceof HTMLButtonElement ||
+            event.target.closest('button, input, a')) {
+            return;
+        }
+        onRowClick?.(row, event);
+        // Also handle selection if enabled
+        if (enableSelection && onSelectRow) {
+            const rowId = getRowId(row);
+            const isSelected = selectedRows.has(rowId);
+            onSelectRow(rowId, !isSelected);
+        }
+    };
+    const handleCellClick = (row, column, event) => {
+        if (onCellClick) {
+            const value = row[column.key];
+            onCellClick(value, row, column, event);
+        }
+    };
+    if (loading && data.length === 0) {
+        return (_jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => (_jsxs("tr", { className: "animate-pulse", children: [enableSelection && (_jsx("td", { className: "px-4 py-3", children: _jsx("div", { className: "w-4 h-4 bg-gray-200 rounded" }) })), columns.map((column) => (_jsx("td", { className: "px-4 py-3", children: _jsx("div", { className: "h-4 bg-gray-200 rounded" }) }, String(column.key))))] }, index))) }));
+    }
+    if (data.length === 0 && !loading) {
+        return (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { colSpan: columns.length + (enableSelection ? 1 : 0), className: "px-4 py-8 text-center text-gray-500", children: emptyMessage }) }) }));
+    }
+    return (_jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: data.map((row) => {
+            const rowId = getRowId(row);
+            const isSelected = selectedRows.has(rowId);
+            return (_jsxs("tr", { className: `transition-colors duration-150 cursor-pointer ${isSelected ? 'bg-blue-50 hover:bg-blue-100' : 'hover:bg-gray-50'}`, onClick: (e) => handleRowClick(row, e), onDoubleClick: (e) => onRowDoubleClick?.(row, e), onMouseEnter: (e) => onRowHover?.(row, e), onMouseLeave: (e) => onRowHover?.(null, e), children: [enableSelection && (_jsx("td", { className: "px-4 py-3", children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: (e) => {
+                                e.stopPropagation();
+                                onSelectRow?.(rowId, e.target.checked);
+                            }, className: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" }) })), columns.map((column) => (_jsx("td", { className: "px-4 py-3 text-sm text-gray-900", style: {
+                            width: column.width,
+                            minWidth: column.minWidth,
+                            maxWidth: column.maxWidth,
+                            textAlign: column.align || 'left',
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            handleCellClick(row, column, e);
+                        }, children: renderCell(row, column) }, String(column.key))))] }, rowId));
+        }) }));
+};

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,13 @@
+import { Column, SortConfig } from '../../types';
+interface TableHeaderProps<T> {
+    columns: Column<T>[];
+    sortConfig: SortConfig;
+    onSort?: (column: string) => void;
+    enableSelection: boolean;
+    selectedCount: number;
+    totalCount: number;
+    onSelectAll?: (selected: boolean) => void;
+}
+export declare const TableHeader: <T>({ columns, sortConfig, onSort, enableSelection, selectedCount, totalCount, onSelectAll, }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/components/Table/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEjD,UAAU,gBAAgB,CAAC,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,EAAG,2FAQ7B,gBAAgB,CAAC,CAAC,CAAC,4CA8ErB,CAAC"}

package/dist/components/Table/TableHeader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TableHeader = ({ columns, sortConfig, onSort, enableSelection, selectedCount, totalCount, onSelectAll, }) => {
+    const getSortIcon = (columnKey) => {
+        if (sortConfig.column !== columnKey) {
+            return (_jsx("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) }));
+        }
+        if (sortConfig.direction === 'asc') {
+            return (_jsx("svg", { className: "w-4 h-4 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) }));
+        }
+        return (_jsx("svg", { className: "w-4 h-4 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }));
+    };
+    return (_jsx("thead", { className: "bg-gray-50 border-b border-gray-200", children: _jsxs("tr", { children: [enableSelection && (_jsx("th", { className: "w-12 px-4 py-3 text-left", role: "columnheader", "aria-label": "Select all rows", children: _jsx("input", { type: "checkbox", checked: selectedCount > 0 && selectedCount === totalCount, ref: (el) => {
+                            if (el) {
+                                el.indeterminate = selectedCount > 0 && selectedCount < totalCount;
+                            }
+                        }, onChange: (e) => onSelectAll?.(e.target.checked), className: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500", "aria-label": "Select all rows" }) })), columns.map((column) => (_jsx("th", { role: "columnheader", className: `px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${column.sortable && onSort ? 'cursor-pointer hover:bg-gray-100 select-none' : ''}`, onClick: () => column.sortable && onSort && onSort(String(column.key)), style: {
+                        width: column.width,
+                        minWidth: column.minWidth,
+                        maxWidth: column.maxWidth,
+                        textAlign: column.align || 'left',
+                    }, "aria-sort": sortConfig.column === String(column.key)
+                        ? sortConfig.direction === 'asc' ? 'ascending' : 'descending'
+                        : 'none', "aria-label": `Sort by ${column.label}`, children: _jsxs("div", { className: "flex items-center gap-2", children: [column.label, column.sortable && onSort && getSortIcon(String(column.key))] }) }, String(column.key))))] }) }));
+};

package/dist/components/Table/index.d.ts

@@ -0,0 +1,3 @@
+export { TableHeader } from './TableHeader';
+export { TableBody } from './TableBody';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/Table/index.js

@@ -0,0 +1,2 @@
+export { TableHeader } from './TableHeader';
+export { TableBody } from './TableBody';

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useDataGrid } from './useDataGrid';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export { useDataGrid } from './useDataGrid';

package/dist/hooks/useDataGrid.d.ts

@@ -0,0 +1,49 @@
+import { BaseRowData, ServerResponse, ActiveFilter, SortConfig, HttpConfig, PaginationInfo } from '../types';
+interface UseDataGridProps<T> {
+    data?: T[];
+    endpoint?: string;
+    httpConfig?: HttpConfig;
+    pageSize?: number;
+    serverPageSize?: number;
+    onDataLoad?: (data: ServerResponse<T>) => void;
+    onDataError?: (error: Error, context: string) => void;
+    onLoadingStateChange?: (loading: boolean, context: string) => void;
+    onPageChange?: (page: number, paginationInfo: PaginationInfo) => void;
+    onPageSizeChange?: (pageSize: number, paginationInfo: PaginationInfo) => void;
+    onSortChange?: (sortConfig: SortConfig) => void;
+    onFilterChange?: (filters: ActiveFilter[]) => void;
+    onSearchChange?: (searchTerm: string) => void;
+}
+export declare const useDataGrid: <T extends BaseRowData>({ data: staticData, endpoint, httpConfig, pageSize, serverPageSize, onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, onSortChange, onFilterChange, onSearchChange, }: UseDataGridProps<T>) => {
+    data: T[];
+    processedData: T[];
+    paginatedData: T[];
+    loading: boolean;
+    error: string | null;
+    searchTerm: string;
+    activeFilters: ActiveFilter[];
+    sortConfig: SortConfig;
+    selectedRows: Set<string>;
+    currentPage: number;
+    currentPageSize: number;
+    totalRecords: number;
+    hasMore: boolean;
+    continuationToken: string | undefined;
+    setSearchTerm: (term: string) => void;
+    setSort: (column: string) => void;
+    setCurrentPage: (page: number) => void;
+    setCurrentPageSize: (newPageSize: number) => void;
+    navigateNext: () => void;
+    navigatePrevious: () => void;
+    addFilter: (filter: Omit<ActiveFilter, "label">) => void;
+    removeFilter: (index: number) => void;
+    clearFilters: () => void;
+    selectRow: (rowId: string, selected: boolean) => void;
+    selectAll: (selected: boolean) => void;
+    refresh: () => void;
+    paginationInfo: PaginationInfo;
+    selectedData: T[];
+    hasSelection: boolean;
+};
+export {};
+//# sourceMappingURL=useDataGrid.d.ts.map

package/dist/hooks/useDataGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGrid.d.ts","sourceRoot":"","sources":["../../src/hooks/useDataGrid.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EAEX,cAAc,EACd,YAAY,EACZ,UAAU,EACV,UAAU,EACV,cAAc,EACf,MAAM,UAAU,CAAC;AAGlB,UAAU,gBAAgB,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9E,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EAAE,oMAchD,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;0BAsSX,MAAM;sBArFJ,MAAM;2BAkBR,MAAM;sCA2CC,MAAM;;;wBAuCX,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;0BAqB5B,MAAM;;uBA2BsB,MAAM,YAAY,OAAO;0BAalD,OAAO;;;;;CA6DrB,CAAC"}