indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/datagrid/controls/menu/import/import.js

@@ -0,0 +1,232 @@
+'use client';
+"use strict";
+// PapaParse and ExcelJS are loaded on demand so that rendering a DataGrid does not ship them.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.importFromCSV = importFromCSV;
+exports.importFromExcel = importFromExcel;
+exports.importFromJSON = importFromJSON;
+exports.importData = importData;
+/**
+ * Import data from CSV file
+ */
+async function importFromCSV(file, onProgress) {
+    const Papa = (await Promise.resolve().then(() => __importStar(require('papaparse')))).default;
+    return new Promise((resolve) => {
+        Papa.parse(file, {
+            header: true,
+            complete: (results) => {
+                onProgress?.(100);
+                const errors = [];
+                const warnings = [];
+                const validData = [];
+                results.data.forEach((row, index) => {
+                    try {
+                        // Basic validation - skip empty rows
+                        if (Object.values(row).every(value => !value)) {
+                            warnings.push(`Row ${index + 1}: Empty row skipped`);
+                            return;
+                        }
+                        validData.push(row);
+                    }
+                    catch (error) {
+                        errors.push(`Row ${index + 1}: ${error.message}`);
+                    }
+                });
+                resolve({
+                    success: errors.length === 0,
+                    data: validData,
+                    errors,
+                    warnings,
+                    totalRows: results.data.length,
+                    validRows: validData.length,
+                });
+            },
+            error: (error) => {
+                resolve({
+                    success: false,
+                    data: [],
+                    errors: [error.message],
+                    warnings: [],
+                    totalRows: 0,
+                    validRows: 0,
+                });
+            }
+        });
+    });
+}
+/**
+ * Import data from Excel file
+ */
+async function importFromExcel(file, onProgress) {
+    try {
+        const ExcelJS = (await Promise.resolve().then(() => __importStar(require('exceljs')))).default;
+        const workbook = new ExcelJS.Workbook();
+        const buffer = await file.arrayBuffer();
+        await workbook.xlsx.load(buffer);
+        onProgress?.(100);
+        const worksheet = workbook.getWorksheet(1); // Get first worksheet
+        const jsonData = [];
+        const errors = [];
+        const warnings = [];
+        const validData = [];
+        if (!worksheet) {
+            throw new Error('No worksheet found in Excel file');
+        }
+        // Get headers from first row
+        const headerRow = worksheet.getRow(1);
+        const headers = [];
+        headerRow.eachCell((cell, colNumber) => {
+            headers[colNumber - 1] = cell.value?.toString() || `Column${colNumber}`;
+        });
+        // Process data rows
+        worksheet.eachRow((row, rowNumber) => {
+            if (rowNumber === 1)
+                return; // Skip header row
+            const rowData = {};
+            let hasData = false;
+            row.eachCell((cell, colNumber) => {
+                const header = headers[colNumber - 1];
+                if (header) {
+                    rowData[header] = cell.value;
+                    if (cell.value)
+                        hasData = true;
+                }
+            });
+            if (hasData) {
+                jsonData.push(rowData);
+            }
+        });
+        jsonData.forEach((row, index) => {
+            try {
+                if (Object.values(row).every(value => !value)) {
+                    warnings.push(`Row ${index + 2}: Empty row skipped`); // +2 because index starts at 0 and we skip header
+                    return;
+                }
+                validData.push(row);
+            }
+            catch (error) {
+                errors.push(`Row ${index + 2}: ${error.message}`);
+            }
+        });
+        return {
+            success: errors.length === 0,
+            data: validData,
+            errors,
+            warnings,
+            totalRows: jsonData.length,
+            validRows: validData.length,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            data: [],
+            errors: [error.message],
+            warnings: [],
+            totalRows: 0,
+            validRows: 0,
+        };
+    }
+}
+/**
+ * Import data from JSON file
+ */
+function importFromJSON(file, onProgress) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                onProgress?.(100);
+                const jsonData = JSON.parse(e.target?.result);
+                const dataArray = Array.isArray(jsonData) ? jsonData : [jsonData];
+                const errors = [];
+                const warnings = [];
+                const validData = [];
+                dataArray.forEach((item, index) => {
+                    try {
+                        validData.push(item);
+                    }
+                    catch (error) {
+                        errors.push(`Item ${index + 1}: ${error.message}`);
+                    }
+                });
+                resolve({
+                    success: errors.length === 0,
+                    data: validData,
+                    errors,
+                    warnings,
+                    totalRows: dataArray.length,
+                    validRows: validData.length,
+                });
+            }
+            catch (error) {
+                resolve({
+                    success: false,
+                    data: [],
+                    errors: ['Invalid JSON format'],
+                    warnings: [],
+                    totalRows: 0,
+                    validRows: 0,
+                });
+            }
+        };
+        reader.readAsText(file);
+    });
+}
+/**
+ * Unified import function that handles all formats
+ */
+async function importData(file, onProgress) {
+    const fileExtension = file.name.split('.').pop()?.toLowerCase();
+    switch (fileExtension) {
+        case 'csv':
+            return await importFromCSV(file, onProgress);
+        case 'xlsx':
+        case 'xls':
+            return await importFromExcel(file, onProgress);
+        case 'json':
+            return await importFromJSON(file, onProgress);
+        default:
+            return {
+                success: false,
+                data: [],
+                errors: ['Unsupported file format. Please use CSV, Excel, or JSON files.'],
+                warnings: [],
+                totalRows: 0,
+                validRows: 0,
+            };
+    }
+}

package/dist/cjs/components/datagrid/controls/menu/index.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdvancedFilterModal = exports.ColumnChooserModal = exports.ChartView = exports.CardView = exports.FilterSection = exports.ColumnSection = exports.ImportSection = exports.ExportSection = exports.ViewSection = exports.ActionsMenu = void 0;
+var ActionsMenu_1 = require("./ActionsMenu.js");
+Object.defineProperty(exports, "ActionsMenu", { enumerable: true, get: function () { return ActionsMenu_1.ActionsMenu; } });
+var ViewSection_1 = require("./view/ViewSection.js");
+Object.defineProperty(exports, "ViewSection", { enumerable: true, get: function () { return ViewSection_1.ViewSection; } });
+var ExportSection_1 = require("./export/ExportSection.js");
+Object.defineProperty(exports, "ExportSection", { enumerable: true, get: function () { return ExportSection_1.ExportSection; } });
+var ImportSection_1 = require("./import/ImportSection.js");
+Object.defineProperty(exports, "ImportSection", { enumerable: true, get: function () { return ImportSection_1.ImportSection; } });
+var ColumnSection_1 = require("./column/ColumnSection.js");
+Object.defineProperty(exports, "ColumnSection", { enumerable: true, get: function () { return ColumnSection_1.ColumnSection; } });
+var FilterSection_1 = require("./filter/FilterSection.js");
+Object.defineProperty(exports, "FilterSection", { enumerable: true, get: function () { return FilterSection_1.FilterSection; } });
+var CardView_1 = require("./view/CardView.js");
+Object.defineProperty(exports, "CardView", { enumerable: true, get: function () { return CardView_1.CardView; } });
+var ChartView_1 = require("./view/ChartView.js");
+Object.defineProperty(exports, "ChartView", { enumerable: true, get: function () { return ChartView_1.ChartView; } });
+var ColumnChooserModal_1 = require("./column/ColumnChooserModal.js");
+Object.defineProperty(exports, "ColumnChooserModal", { enumerable: true, get: function () { return ColumnChooserModal_1.ColumnChooserModal; } });
+var AdvancedFilterModal_1 = require("./filter/AdvancedFilterModal.js");
+Object.defineProperty(exports, "AdvancedFilterModal", { enumerable: true, get: function () { return AdvancedFilterModal_1.AdvancedFilterModal; } });

package/dist/cjs/components/datagrid/controls/menu/view/CardView.js

@@ -0,0 +1,176 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardView = CardView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+const lucide_react_1 = require("lucide-react");
+const ui_1 = require("../../../../ui/index.js");
+const SelectionCell_1 = require("../../../cells/SelectionCell.js");
+const skeleton_1 = require("../../../../ui/feedback/skeleton.js");
+const LanguageContext_1 = require("../../../../../contexts/LanguageContext.js");
+const sizeConfig = {
+    compact: {
+        grid: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+        gap: 'gap-2.5',
+        pad: 'p-2.5',
+        fields: 5,
+        titleText: 'text-sm',
+        subtitleText: 'text-xs',
+        valueText: 'text-xs',
+    },
+    normal: {
+        grid: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+        gap: 'gap-3',
+        pad: 'p-3',
+        fields: 6,
+        titleText: 'text-sm',
+        subtitleText: 'text-xs',
+        valueText: 'text-xs',
+    },
+    expanded: {
+        grid: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+        gap: 'gap-4',
+        pad: 'p-4',
+        fields: 8,
+        titleText: 'text-base',
+        subtitleText: 'text-sm',
+        valueText: 'text-sm',
+    },
+};
+function CardSkeleton({ size = 'normal' }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] overflow-hidden", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-3.5 space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-4 w-4 rounded flex-shrink-0" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-4 w-2/5" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-3 w-1/4" })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2 pt-1.5 border-t border-[rgb(var(--bd-default))]/30", children: Array.from({ length: size === 'expanded' ? 4 : 3 }).map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-2.5 w-14" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-3 w-20 ml-auto" })] }, i))) })] }) }));
+}
+function CardView({ data, columns, onRowClick, selectedRows, onRowSelect, isLoading = false, cardSize = 'normal', circularCheckboxes = false, getCardClassName, }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const cfg = sizeConfig[cardSize];
+    const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(-1);
+    const containerRef = (0, react_1.useRef)(null);
+    const cardRefs = (0, react_1.useRef)([]);
+    const isSelected = (0, react_1.useCallback)((item) => {
+        return selectedRows.some(selected => selected.id === item.id);
+    }, [selectedRows]);
+    const handleCardClick = (0, react_1.useCallback)((item) => {
+        onRowClick?.(item);
+    }, [onRowClick]);
+    const handleCheckboxChange = (0, react_1.useCallback)((item, checked) => {
+        onRowSelect?.(item, checked);
+    }, [onRowSelect]);
+    // Keyboard navigation
+    const getGridColumns = (0, react_1.useCallback)(() => {
+        if (typeof window === 'undefined')
+            return 4;
+        const w = window.innerWidth;
+        if (cardSize === 'expanded') {
+            if (w >= 1024)
+                return 3;
+            if (w >= 768)
+                return 2;
+            return 1;
+        }
+        if (w >= 1280)
+            return 4;
+        if (w >= 1024)
+            return 3;
+        if (w >= 640)
+            return 2;
+        return 1;
+    }, [cardSize]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (data.length === 0)
+            return;
+        const cols = getGridColumns();
+        switch (e.key) {
+            case 'ArrowRight':
+                e.preventDefault();
+                setFocusedIndex(prev => Math.min(prev + 1, data.length - 1));
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                setFocusedIndex(prev => Math.max(prev - 1, 0));
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                setFocusedIndex(prev => Math.min(prev + cols, data.length - 1));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setFocusedIndex(prev => Math.max(prev - cols, 0));
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (focusedIndex >= 0 && focusedIndex < data.length)
+                    handleCardClick(data[focusedIndex]);
+                break;
+            case ' ':
+                e.preventDefault();
+                if (focusedIndex >= 0 && focusedIndex < data.length) {
+                    const item = data[focusedIndex];
+                    handleCheckboxChange(item, !isSelected(item));
+                }
+                break;
+            case 'Home':
+                e.preventDefault();
+                setFocusedIndex(0);
+                break;
+            case 'End':
+                e.preventDefault();
+                setFocusedIndex(data.length - 1);
+                break;
+        }
+    }, [data, focusedIndex, getGridColumns, handleCardClick, handleCheckboxChange, isSelected]);
+    (0, react_1.useEffect)(() => {
+        if (focusedIndex >= 0 && cardRefs.current[focusedIndex]) {
+            cardRefs.current[focusedIndex]?.focus();
+        }
+    }, [focusedIndex]);
+    const getDisplayValue = (0, react_1.useCallback)((item, columnKey) => {
+        const value = item[columnKey];
+        if (typeof value === 'boolean') {
+            return value ? ((0, jsx_runtime_1.jsx)(ui_1.Badge, { variant: "default", className: "h-4.5 text-[0.6rem] px-1.5 py-0 bg-[rgb(var(--color-success))]/10 text-[rgb(var(--color-success))] border-0 font-medium", children: t('Yes') })) : ((0, jsx_runtime_1.jsx)(ui_1.Badge, { variant: "secondary", className: "h-4.5 text-[0.6rem] px-1.5 py-0 bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))] border-0 font-medium", children: t('No') }));
+        }
+        if (typeof value === 'number')
+            return value.toLocaleString();
+        return value?.toString() || '—';
+    }, [t]);
+    const getFieldLabel = (0, react_1.useCallback)((column) => {
+        if (typeof column.header === 'string')
+            return t(column.header);
+        return column.accessorKey || column.id || t('Field');
+    }, [t]);
+    // Extract the actions column (has id='actions') — we'll render its cell in card
+    const actionsColumn = (0, react_1.useMemo)(() => columns.find(col => col.id === 'actions'), [columns]);
+    // Display columns — exclude select and actions
+    const displayColumns = (0, react_1.useMemo)(() => columns.filter(col => col.id !== 'select' &&
+        col.id !== 'actions' &&
+        col.accessorKey !== 'actions').slice(0, cfg.fields), [columns, cfg.fields]);
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: cfg.pad, children: (0, jsx_runtime_1.jsx)("div", { className: `grid ${cfg.grid} ${cfg.gap}`, children: Array.from({ length: 8 }).map((_, i) => ((0, jsx_runtime_1.jsx)(CardSkeleton, { size: cardSize }, i))) }) }));
+    }
+    if (data.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-64", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "h-10 w-10 mx-auto mb-3 opacity-40" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium", children: t('No Data Available') }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs mt-1 opacity-70", children: t('No records to display') })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: "outline-none", tabIndex: 0, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)("div", { className: cfg.pad, children: (0, jsx_runtime_1.jsx)("div", { className: `grid ${cfg.grid} ${cfg.gap}`, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: false, children: data.map((item, index) => {
+                            const isFocused = focusedIndex === index;
+                            const itemSelected = isSelected(item);
+                            return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: (el) => { cardRefs.current[index] = el; }, initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.12, delay: Math.min(index * 0.015, 0.15) }, className: "group/card outline-none", tabIndex: -1, onClick: () => setFocusedIndex(index), onDoubleClick: () => handleCardClick(item), children: (0, jsx_runtime_1.jsxs)("div", { className: `
+                    relative rounded-lg border bg-[rgb(var(--bg-surface))] overflow-hidden h-full
+                    transition-all duration-150
+                    ${itemSelected
+                                        ? 'border-[rgb(var(--color-primary))] shadow-sm'
+                                        : 'border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))]/40 hover:shadow-sm'}
+                    ${isFocused ? 'ring-2 ring-[rgb(var(--color-primary))]/30 ring-offset-1' : ''}
+                    ${getCardClassName?.(item) ?? ''}
+                  `, children: [(0, jsx_runtime_1.jsx)("div", { className: `absolute left-0 top-0 bottom-0 w-[2px] transition-colors duration-150 ${itemSelected ? 'bg-[rgb(var(--color-primary))]' : 'bg-transparent group-hover/card:bg-[rgb(var(--color-primary))]/30'}` }), (0, jsx_runtime_1.jsxs)("div", { className: "pl-3 pr-2.5 py-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [onRowSelect && ((0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(SelectionCell_1.SelectionCheckbox, { checked: itemSelected, onChange: (checked) => handleCheckboxChange(item, checked), circular: circularCheckboxes, mode: "checkbox" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0 flex items-baseline gap-1.5", children: [(0, jsx_runtime_1.jsx)("p", { className: `${cfg.titleText} font-semibold text-[rgb(var(--fg-default))] truncate leading-tight`, children: displayColumns.length > 0 && getDisplayValue(item, displayColumns[0].accessorKey) }), displayColumns.length > 1 && ((0, jsx_runtime_1.jsx)("p", { className: `${cfg.subtitleText} text-[rgb(var(--color-primary))] font-medium truncate flex-shrink-0`, children: getDisplayValue(item, displayColumns[1].accessorKey) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 opacity-0 group-hover/card:opacity-100 transition-opacity duration-150", onClick: (e) => e.stopPropagation(), children: actionsColumn && actionsColumn.cell?.({
+                                                                row: { original: item },
+                                                                getValue: () => null,
+                                                                renderValue: () => null,
+                                                            }) })] }), displayColumns.length > 2 && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 pt-2 border-t border-[rgb(var(--bd-default))]/40 space-y-1", children: displayColumns.slice(2).map((column) => {
+                                                        const fieldKey = column.accessorKey;
+                                                        const fieldValue = getDisplayValue(item, fieldKey);
+                                                        const fieldLabel = getFieldLabel(column);
+                                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] truncate flex-shrink-0 max-w-[40%]", children: fieldLabel }), (0, jsx_runtime_1.jsx)("span", { className: `${cfg.valueText} font-medium text-[rgb(var(--fg-default))] text-right truncate`, children: fieldValue })] }, fieldKey));
+                                                    }) }))] })] }) }, item.id || index));
+                        }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "hidden md:flex items-center justify-center gap-4 py-2 text-[0.65rem] text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "px-1 py-0.5 bg-[rgb(var(--bg-subtle))] rounded border border-[rgb(var(--bd-default))] text-[0.6rem]", children: "\u2190\u2192\u2191\u2193" }), " ", t('Navigate')] }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "px-1 py-0.5 bg-[rgb(var(--bg-subtle))] rounded border border-[rgb(var(--bd-default))] text-[0.6rem]", children: "Enter" }), " ", t('Open')] }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "px-1 py-0.5 bg-[rgb(var(--bg-subtle))] rounded border border-[rgb(var(--bd-default))] text-[0.6rem]", children: "Space" }), " ", t('Select')] })] })] }));
+}