indas-ui 0.0.1 → 0.1.1

package/dist/cjs/components/datagrid/controls/menu/column/ColumnChooserModal.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnChooserModal = ColumnChooserModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("../../../../ui/index.js");
+const ui_2 = require("../../../../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+function ColumnChooserModal({ isOpen, onClose, table, frozenColumnsState, setFrozenColumnsState, enableColumnFreezing = false, autoResizeAllColumns }) {
+    const allColumns = table.getAllColumns().filter((column) => column.getCanHide());
+    const frozenColumns = allColumns.filter((column) => frozenColumnsState.has(column.id) && column.id !== 'select');
+    const availableColumns = allColumns.filter((column) => !frozenColumnsState.has(column.id));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: isOpen, onOpenChange: onClose, children: (0, jsx_runtime_1.jsxs)(ui_1.DialogContent, { className: "max-w-md", children: [(0, jsx_runtime_1.jsx)(ui_1.DialogHeader, { children: (0, jsx_runtime_1.jsx)(ui_1.DialogTitle, { children: "Manage Columns" }) }), (0, jsx_runtime_1.jsx)("div", { className: "max-h-96 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] -mx-6 rounded-t-lg", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))]", children: "Column Management" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-1", children: [frozenColumns.length > 0 && ((0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "ghost", size: "sm", className: "h-6 px-2 text-xs", onClick: () => setFrozenColumnsState(new Set()), "aria-label": "Unfreeze all columns", children: "Unfreeze All" })), (0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "ghost", size: "sm", className: "h-6 px-2 text-xs", onClick: () => autoResizeAllColumns?.(table), "aria-label": "Auto-size all columns to fit content", children: "Auto-size" })] })] }) }), enableColumnFreezing && frozenColumns.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "px-2 py-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-1 px-2", children: "Frozen Columns" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--color-primary-subtle)_/_0.1)] rounded-md p-1 space-y-0.5", children: frozenColumns.map((column) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-2 py-1.5 hover:bg-[rgb(var(--bg-hover))] rounded group", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2 flex-1", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: column.getIsVisible(), onChange: (e) => column.toggleVisibility(e.target.checked), className: "w-3 h-3 rounded border-[rgb(var(--bd-default))] text-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-default))] capitalize truncate", children: column.id })] }), (0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0 opacity-70 group-hover:opacity-100", onClick: () => {
+                                                        const newFrozen = new Set(frozenColumnsState);
+                                                        newFrozen.delete(column.id);
+                                                        setFrozenColumnsState(newFrozen);
+                                                    }, "aria-label": "Unfreeze this column", children: (0, jsx_runtime_1.jsx)(lucide_react_1.PinOff, { className: "h-4 w-4 text-[rgb(var(--color-primary))]" }) })] }, column.id))) })] })), availableColumns.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "px-2 py-2", children: [frozenColumns.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-1 px-2", children: "Available Columns" })), (0, jsx_runtime_1.jsx)("div", { className: "space-y-0.5", children: availableColumns.map((column) => {
+                                            const isSelectColumn = column.id === 'select';
+                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-2 py-1.5 hover:bg-[rgb(var(--bg-hover))] rounded group", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2 flex-1", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: column.getIsVisible(), onChange: (e) => column.toggleVisibility(e.target.checked), disabled: isSelectColumn, className: "w-3 h-3 rounded border-[rgb(var(--bd-default))] text-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-default))] capitalize truncate", children: column.id })] }), enableColumnFreezing && !isSelectColumn && ((0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0 opacity-0 group-hover:opacity-100", onClick: () => {
+                                                            const newFrozen = new Set(frozenColumnsState);
+                                                            newFrozen.add(column.id);
+                                                            setFrozenColumnsState(newFrozen);
+                                                        }, "aria-label": "Freeze this column", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pin, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" }) }))] }, column.id));
+                                        }) })] }))] }) })] }) }));
+}

package/dist/cjs/components/datagrid/controls/menu/column/ColumnSection.js

@@ -0,0 +1,10 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnSection = ColumnSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("../../../../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+function ColumnSection({ enableColumnVisibility = true, onOpenColumnChooser, enableAutoResize = true, onAutoResize }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [enableColumnVisibility && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: onOpenColumnChooser, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Columns3, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Manage Columns" })] })), enableAutoResize && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: onAutoResize, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Auto-resize All" })] }))] }));
+}

package/dist/cjs/components/datagrid/controls/menu/export/ExportSection.js

@@ -0,0 +1,19 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExportSection = ExportSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("../../../../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+const export_1 = require("./export.js");
+function ExportSection({ data, filename = 'data-export' }) {
+    const handleExport = async (format) => {
+        try {
+            await (0, export_1.exportData)(data, format, filename);
+        }
+        catch (error) {
+            console.error('❌ [DataGrid Export] Export failed:', error);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubTrigger, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Export to..." })] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubContent, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => handleExport('excel'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileSpreadsheet, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Excel (.xlsx)" })] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => handleExport('csv'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "CSV (.csv)" })] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => handleExport('pdf'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.File, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "PDF (.pdf)" })] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => handleExport('json'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileJson, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "JSON (.json)" })] })] })] }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {})] }));
+}

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

@@ -0,0 +1,227 @@
+'use client';
+"use strict";
+// Heavy libraries (ExcelJS, jsPDF, PapaParse, file-saver) are loaded on demand so that
+// rendering a DataGrid does not ship them; they download the first time a user exports.
+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.exportToCSV = exportToCSV;
+exports.exportToExcel = exportToExcel;
+exports.exportToPDF = exportToPDF;
+exports.exportToJSON = exportToJSON;
+exports.exportData = exportData;
+/** Format any cell value into a clean string. Avoids "[object Object]" and stray nulls. */
+function formatCellValue(value) {
+    if (value === null || value === undefined)
+        return '';
+    if (typeof value === 'boolean')
+        return value ? 'Yes' : 'No';
+    if (value instanceof Date)
+        return value.toLocaleString();
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? String(value) : '';
+    if (typeof value === 'object') {
+        try {
+            return JSON.stringify(value);
+        }
+        catch {
+            return '';
+        }
+    }
+    return String(value);
+}
+/**
+ * Build headers + rows for export. The DataGrid already hands us rows keyed by their
+ * visible column header labels (in display order), so the object keys ARE the headers.
+ */
+function buildExportRows(data) {
+    if (data.length === 0)
+        return { headers: [], keys: [], rows: [] };
+    const keys = Object.keys(data[0]);
+    const rows = data.map(item => keys.map(key => formatCellValue(item[key])));
+    return { headers: keys, keys, rows };
+}
+async function saveBlob(blob, name) {
+    const { saveAs } = await Promise.resolve().then(() => __importStar(require('file-saver')));
+    saveAs(blob, name);
+}
+/**
+ * Export data to CSV format
+ */
+async function exportToCSV(data, filename = 'data-export') {
+    try {
+        const Papa = (await Promise.resolve().then(() => __importStar(require('papaparse')))).default;
+        const { headers, rows } = buildExportRows(data);
+        const csv = Papa.unparse({ fields: headers, data: rows });
+        const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8' });
+        await saveBlob(blob, `${filename}.csv`);
+    }
+    catch (error) {
+        console.error('❌ [DataGrid Export] CSV export failed:', error);
+        throw error;
+    }
+}
+/**
+ * Export data to Excel format
+ */
+async function exportToExcel(data, filename = 'data-export') {
+    try {
+        const ExcelJS = (await Promise.resolve().then(() => __importStar(require('exceljs')))).default;
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet('Data');
+        const { headers, rows } = buildExportRows(data);
+        if (headers.length > 0) {
+            worksheet.addRow(headers);
+            const headerRow = worksheet.getRow(1);
+            headerRow.font = { bold: true, color: { argb: 'FFFFFFFF' } };
+            headerRow.fill = {
+                type: 'pattern',
+                pattern: 'solid',
+                fgColor: { argb: 'FF003366' } // brand primary (#003366)
+            };
+            rows.forEach(row => worksheet.addRow(row));
+            // Auto-size columns from header + cell content length
+            worksheet.columns.forEach((column, index) => {
+                let maxLength = headers[index]?.length || 10;
+                rows.forEach(row => {
+                    const cell = row[index];
+                    if (cell)
+                        maxLength = Math.max(maxLength, cell.length);
+                });
+                column.width = Math.min(maxLength + 2, 50);
+            });
+        }
+        const buffer = await workbook.xlsx.writeBuffer();
+        const blob = new Blob([buffer], {
+            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        });
+        await saveBlob(blob, `${filename}.xlsx`);
+    }
+    catch (error) {
+        console.error('❌ [DataGrid Export] Excel export failed:', error);
+        throw error;
+    }
+}
+/**
+ * Export data to PDF format.
+ * Landscape, auto-fit columns, line-wrapped cells, repeated headers, page numbers.
+ */
+async function exportToPDF(data, filename = 'data-export') {
+    try {
+        const [{ default: jsPDF }, { default: autoTable }] = await Promise.all([Promise.resolve().then(() => __importStar(require('jspdf'))), Promise.resolve().then(() => __importStar(require('jspdf-autotable')))]);
+        const { headers, rows } = buildExportRows(data);
+        // Landscape fits wide grids; switch to portrait only for very narrow tables.
+        const orientation = headers.length <= 4 ? 'portrait' : 'landscape';
+        const doc = new jsPDF({ orientation, unit: 'pt', format: 'a4' });
+        const pageWidth = doc.internal.pageSize.getWidth();
+        const title = filename.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        doc.setFontSize(14);
+        doc.text(title, 40, 40);
+        doc.setFontSize(9);
+        doc.setTextColor(120);
+        doc.text(`Date and Time: ${new Date().toLocaleString()}`, 40, 56);
+        doc.setTextColor(0);
+        if (headers.length > 0) {
+            autoTable(doc, {
+                head: [headers],
+                body: rows,
+                startY: 70,
+                theme: 'striped',
+                headStyles: {
+                    fillColor: [0, 51, 102], // brand primary (#003366)
+                    textColor: 255,
+                    fontStyle: 'bold',
+                    halign: 'left',
+                },
+                styles: {
+                    fontSize: 7,
+                    cellPadding: 3,
+                    overflow: 'linebreak', // wrap long cells instead of overflowing the page
+                    valign: 'middle',
+                },
+                // Let autoTable distribute width across the page, capping any single column.
+                tableWidth: 'auto',
+                margin: { top: 70, left: 40, right: 40, bottom: 40 },
+                didDrawPage: (hookData) => {
+                    const pageCount = doc.getNumberOfPages();
+                    const pageCurrent = hookData.pageNumber;
+                    doc.setFontSize(8);
+                    doc.setTextColor(120);
+                    doc.text(`Page ${pageCurrent} of ${pageCount}`, pageWidth - 40, doc.internal.pageSize.getHeight() - 20, { align: 'right' });
+                    doc.setTextColor(0);
+                },
+            });
+        }
+        else {
+            doc.setFontSize(11);
+            doc.text('No data to export.', 40, 80);
+        }
+        doc.save(`${filename}.pdf`);
+    }
+    catch (error) {
+        console.error('❌ [DataGrid Export] PDF export failed:', error);
+        throw error;
+    }
+}
+/**
+ * Export data to JSON format
+ */
+async function exportToJSON(data, filename = 'data-export') {
+    try {
+        const jsonString = JSON.stringify(data, null, 2);
+        const blob = new Blob([jsonString], { type: 'application/json' });
+        await saveBlob(blob, `${filename}.json`);
+    }
+    catch (error) {
+        console.error('❌ [DataGrid Export] JSON export failed:', error);
+        throw error;
+    }
+}
+/**
+ * Unified export function that handles all formats.
+ */
+async function exportData(data, format, filename = 'data-export') {
+    switch (format) {
+        case 'excel':
+            return await exportToExcel(data, filename);
+        case 'csv':
+            return await exportToCSV(data, filename);
+        case 'pdf':
+            return await exportToPDF(data, filename);
+        case 'json':
+            return await exportToJSON(data, filename);
+        default:
+            throw new Error(`Unsupported export format: ${format}`);
+    }
+}