@heliux-org/design-system-core 0.0.481-AG-Test-07 → 0.0.484-ag-icons-fix

package/src/components/AGTable/__stories__/AGTable.stories.tsx

@@ -1,10 +1,21 @@
 // BasicTable.stories.js
-import React from 'react';
+import React, { useMemo, useRef } from 'react';
 import AGTable from '../AGTable';
-import { ColDef } from 'ag-grid-community';
+import { ColDef, GetDetailRowDataParams, IDetailCellRendererParams, SelectionChangedEvent } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import '../ag-grid-theme.scss';
+
+type Employee = {
+    id: number;
+    name: string;
+    position: string;
+    department: string;
+    salary: number;
+    startDate: string;
+};
 
 // Sample data for the stories
-const sampleEmployeeData = [
+const sampleEmployeeData: Employee[] = [
     { id: 1, name: 'John Doe', position: 'Developer', department: 'Engineering', salary: 75000, startDate: '2022-01-15' },
     { id: 2, name: 'Jane Smith', position: 'Designer', department: 'Design', salary: 68000, startDate: '2021-11-20' },
     { id: 3, name: 'Mike Johnson', position: 'Manager', department: 'Engineering', salary: 95000, startDate: '2020-03-10' },
@@ -15,25 +26,25 @@ const sampleEmployeeData = [
     { id: 8, name: 'Emma Taylor', position: 'HR Specialist', department: 'Human Resources', salary: 58000, startDate: '2022-06-25' },
 ];
 
-const basicColumnDefs = [
-    { field: 'id', headerName: 'ID', width: 70 },
-    { field: 'name', headerName: 'Name', width: 150, editable: true },
-    { field: 'position', headerName: 'Position', width: 150, editable: true },
-    { field: 'department', headerName: 'Department', width: 150, editable: true },
+const columnDefs: ColDef<Employee>[] = [
+    { field: 'id', headerName: 'ID' },
+    { field: 'name', headerName: 'Name', editable: true },
+    { field: 'position', headerName: 'Position', editable: true },
+    { field: 'department', headerName: 'Department', editable: true },
     {
         field: 'salary',
         headerName: 'Salary',
-        width: 120,
         valueFormatter: params => `$${params.value.toLocaleString()}`
     },
     {
         field: 'startDate',
         headerName: 'Start Date',
-        width: 120,
         valueFormatter: params => new Date(params.value).toLocaleDateString()
     },
 ];
 
+const defaultColDef = { cellStyle: { display: 'flex', alignItems: 'center' }, sortable: true, filter: true, resizable: true, flex: 1 };
+
 export default {
     title: 'Components/AGTable',
     component: AGTable,
@@ -86,10 +97,12 @@ export default {
 
 // Basic table story
 export const Basic = {
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '400px',
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact className='ag-grid' rowData={sampleEmployeeData} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+            </div>
+        );
     },
     parameters: {
         docs: {
@@ -100,54 +113,64 @@ export const Basic = {
     },
 };
 
-// Table with pagination
-export const WithPagination = {
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        pagination: true,
-        paginationPageSize: 5,
-        height: '400px',
+// Compact table
+export const Compact = {
+    render: () => {
+        return (
+            <div style={{ height: '300px', width: "100%" }}>
+                <AgGridReact className='ag-grid' rowData={sampleEmployeeData} columnDefs={columnDefs} defaultColDef={defaultColDef} headerHeight={35} rowHeight={30} />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'Table with pagination enabled, showing 5 rows per page.',
+                story: 'Compact table with reduced row and header heights.',
             },
         },
     },
 };
 
-// Compact table
-export const Compact = {
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '300px',
-        headerHeight: 35,
-        rowHeight: 30,
+// Empty state
+export const EmptyState = {
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact className='ag-grid' rowData={[]} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'Compact table with reduced row and header heights.',
+                story: 'Table showing empty state when no data is provided.',
             },
         },
     },
 };
 
-// Empty state
-export const EmptyState = {
-    args: {
-        rowData: [],
-        columnDefs: basicColumnDefs,
-        height: '400px',
-        overlayNoRowsTemplate: '<span style="padding: 20px; font-size: 16px;">No data available</span>',
+// Table with pagination
+export const WithPagination = {
+    render: () => {
+        // data with 500 rows
+        const data = Array.from({ length: 500 }, (_, index) => ({
+            id: index + 1,
+            name: `Employee ${index + 1}`,
+            position: `Position ${index + 1}`,
+            department: `Department ${index + 1}`,
+            salary: 75000 + index * 1000,
+            startDate: `2022-01-15`
+        }));
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact className='ag-grid' rowData={data} columnDefs={columnDefs} defaultColDef={defaultColDef} pagination={true} />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'Table showing empty state when no data is provided.',
+                story: 'Table with pagination enabled, showing 5 rows per page.',
             },
         },
     },
@@ -155,52 +178,59 @@ export const EmptyState = {
 
 // Editable table with string, dropdown, and date picker
 export const Editable = {
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: [
-            {
-                field: 'name',
-                headerName: 'Name',
-                editable: true,
-            },
-            {
-                field: 'position',
-                headerName: 'Position',
-                editable: true,
-                cellEditor: 'agSelectCellEditor',
-                cellEditorParams: {
-                    values: ['Developer', 'Designer', 'Manager', 'Analyst', 'Marketing Lead', 'Sales Rep', 'HR Specialist']
-                },
-            },
-            {
-                field: 'startDate',
-                headerName: 'Start Date',
-                editable: true,
-                valueFormatter: params => new Date(params.value).toLocaleDateString(),
-            },
-            {
-                field: 'department',
-                headerName: 'Department',
-                editable: true,
-            },
-            {
-                field: 'salary',
-                headerName: 'Salary',
-                editable: true,
-                valueFormatter: params => `$${params.value.toLocaleString()}`,
-            },
-        ],
-        height: '500px',
-        undoRedoCellEditing: true,
-        undoRedoCellEditingLimit: 20,
-        onCellValueChanged: event => {
-            console.log('Cell changed:', {
-                field: event.colDef.field,
-                oldValue: event.oldValue,
-                newValue: event.newValue,
-                rowData: event.data,
-            });
-        },
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={[
+                        {
+                            field: 'name',
+                            headerName: 'Name',
+                            editable: true,
+                        },
+                        {
+                            field: 'position',
+                            headerName: 'Position',
+                            editable: true,
+                            cellEditor: 'agSelectCellEditor',
+                            cellEditorParams: {
+                                values: ['Developer', 'Designer', 'Manager', 'Analyst', 'Marketing Lead', 'Sales Rep', 'HR Specialist']
+                            },
+                        },
+                        {
+                            field: 'startDate',
+                            headerName: 'Start Date',
+                            editable: true,
+                            valueFormatter: params => new Date(params.value).toLocaleDateString(),
+                        },
+                        {
+                            field: 'department',
+                            headerName: 'Department',
+                            editable: true,
+                        },
+                        {
+                            field: 'salary',
+                            headerName: 'Salary',
+                            editable: true,
+                            valueFormatter: params => `$${params.value.toLocaleString()}`,
+                        },
+                    ]}
+                    defaultColDef={defaultColDef}
+                    undoRedoCellEditing={true}
+                    undoRedoCellEditingLimit={20}
+                    onCellValueChanged={event => {
+                        console.log('Cell changed:', {
+                            field: event.colDef.field,
+                            oldValue: event.oldValue,
+                            newValue: event.newValue,
+                            rowData: event.data,
+                        });
+                    }}
+                />
+            </div>
+        );
     },
     parameters: {
         docs: {
@@ -211,137 +241,184 @@ export const Editable = {
     },
 };
 
-const cellSelection = {
-    handle: {
-        mode: 'fill' as const,
-    },
-};
+// Single row selection
+export const SingleRowSelection = {
 
-// Range Seection story
-export const RangeSelection = {
-
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '400px',
-        cellSelection,
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={columnDefs}
+                    defaultColDef={defaultColDef}
+                    rowSelection="single"
+                    onSelectionChanged={(event) => {
+                        console.log('Selected:', event.api.getSelectedRows());
+                    }}
+                />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'A basic table with range selection.',
+                story: 'A basic table with single selection.',
             },
         },
     },
 };
 
-// with sticky columns
-export const StickyColumns = {
-    args: {
-        rowData: sampleEmployeeData,
-        cellSelection,
-        columnDefs: [
-            { field: 'id', headerName: 'ID', width: 70, pinned: 'left' },
-            { field: 'name', headerName: 'Name', minWidth: 150, pinned: 'left', editable: true },
-            { field: 'position', headerName: 'Position', minWidth: 350 },
-            { field: 'department', headerName: 'Department', minWidth: 350 },
-            {
-                field: 'salary',
-                headerName: 'Salary',
-                minWidth: 350,
-                valueFormatter: params => `$${params.value.toLocaleString()}`
-            },
-            {
-                field: 'startDate',
-                headerName: 'Start Date',
-                width: 420,
-                pinned: 'right',
-                editable: true,
-                valueFormatter: params => new Date(params.value).toLocaleDateString(),
-                valueParser: params => {
-                    const dateValue = params.newValue;
-
-                    // If it's already in ISO format, return as is
-                    if (typeof dateValue === 'string' && dateValue.match(/^\d{4}-\d{2}-\d{2}/)) {
-                        return dateValue;
-                    }
-
-                    // If it's a formatted date string (like "6/24/2025"), parse it
-                    try {
-                        const parsedDate = new Date(dateValue);
-                        if (!isNaN(parsedDate.getTime())) {
-                            // Use local timezone offset to avoid date shifting
-                            const year = parsedDate.getFullYear();
-                            const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
-                            const day = String(parsedDate.getDate()).padStart(2, '0');
-
-                            // Return in ISO format (YYYY-MM-DD) using local date components
-                            return `${year}-${month}-${day}`;
-                        }
-                    } catch (error) {
-                        console.warn('Failed to parse date:', dateValue);
-                    }
-
-                    // Fallback to original value
-                    return params.oldValue || dateValue;
-                },
-            },
-        ],
-        // Handle cell value changes to see the fill operation
-        onCellValueChanged: (event) => {
-            console.log('Cell value changed:', {
-                field: event.colDef.field,
-                oldValue: event.oldValue,
-                newValue: event.newValue,
-                rowIndex: event.rowIndex
-            });
-        },
+// Multi row selection
+export const MultiRowsSelection = {
+    render: () => {
+        const rowSelection = useMemo(() => {
+            return {
+                mode: 'multiRow' as const,
+            };
+        }, []);
 
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={columnDefs}
+                    defaultColDef={defaultColDef}
+                    rowSelection={rowSelection}
+                    onSelectionChanged={(event) => {
+                        console.log('Selected:', event.api.getSelectedRows());
+                    }}
+                />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'Table with sticky columns on the left side.',
+                story: 'A basic table with multi selection.',
             },
         },
     },
 };
 
-export const SingleSelect = {
-
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '400px',
-        allowSingleSelect: true,
-        onRowSelectionChanged: (selectedRows) => {
-            console.log('Selected:', selectedRows);
-        }
+// with sticky columns
+export const StickyColumns = {
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "1200px" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={[
+                        { field: 'id', headerName: 'ID', width: 70, pinned: 'left' },
+                        { field: 'name', headerName: 'Name', minWidth: 150, pinned: 'left' },
+                        { field: 'position', headerName: 'Position', minWidth: 350 },
+                        { field: 'department', headerName: 'Department', minWidth: 350 },
+                        {
+                            field: 'salary',
+                            headerName: 'Salary',
+                            minWidth: 350,
+                            valueFormatter: params => `$${params.value.toLocaleString()}`
+                        },
+                        {
+                            field: 'startDate',
+                            headerName: 'Start Date',
+                            minWidth: 320,
+                            pinned: 'right',
+                            valueFormatter: params => new Date(params.value).toLocaleDateString(),
+                        },
+                    ]}
+                // defaultColDef={defaultColDef}
+                />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'A basic table with single selection.',
+                story: 'Table with sticky columns on the left side.',
             },
         },
     },
 };
 
-export const MultiSelect = {
+const cellSelection = {
+    handle: {
+        mode: 'fill' as const,
+    },
+};
 
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '800px',
-        allowMultiSelect: true,
-        onRowSelectionChanged: (selectedRows) => {
-            console.log('Selected:', selectedRows);
-        }
+// with Range Seection
+export const RangeSelection = {
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={[
+                        { field: 'id', headerName: 'ID', width: 70 },
+                        { field: 'name', headerName: 'Name', editable: true },
+                        { field: 'position', headerName: 'Position' },
+                        { field: 'department', headerName: 'Department' },
+                        {
+                            field: 'salary',
+                            headerName: 'Salary',
+                            valueFormatter: params => `$${params.value.toLocaleString()}`
+                        },
+                        {
+                            field: 'startDate',
+                            headerName: 'Start Date',
+                            editable: true,
+                            valueFormatter: params => new Date(params.value).toLocaleDateString(),
+                            valueParser: params => {
+                                const dateValue = params.newValue;
+
+                                // If it's already in ISO format, return as is
+                                if (typeof dateValue === 'string' && dateValue.match(/^\d{4}-\d{2}-\d{2}/)) {
+                                    return dateValue;
+                                }
+
+                                // If it's a formatted date string (like "6/24/2025"), parse it
+                                try {
+                                    const parsedDate = new Date(dateValue);
+                                    if (!isNaN(parsedDate.getTime())) {
+                                        // Use local timezone offset to avoid date shifting
+                                        const year = parsedDate.getFullYear();
+                                        const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
+                                        const day = String(parsedDate.getDate()).padStart(2, '0');
+
+                                        // Return in ISO format (YYYY-MM-DD) using local date components
+                                        return `${year}-${month}-${day}`;
+                                    }
+                                } catch (error) {
+                                    console.warn('Failed to parse date:', dateValue);
+                                }
+
+                                // Fallback to original value
+                                return params.oldValue || dateValue;
+                            },
+                        },
+                    ]}
+                    defaultColDef={defaultColDef}
+                    cellSelection={cellSelection}
+                    onCellValueChanged={(event) => {
+                        console.log('Cell value changed:', {
+                            field: event.colDef.field,
+                            oldValue: event.oldValue,
+                            newValue: event.newValue,
+                            rowIndex: event.rowIndex
+                        });
+                    }}
+                />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'A basic table with multi selection.',
+                story: 'A basic table with range selection ans copy paste feature.',
             },
         },
     },
@@ -546,31 +623,118 @@ const detailColumnDefs: ColDef<LineItem>[] = [
     }
 ];
 
-const NestedTable = () => {
+const NestedTableComponent = () => {
+    const selectedRowsRef = useRef<PurchaseRequest[]>([]);
+    const suppressMasterEventRef = useRef(false);
+
+    const defaultColDef = {
+        cellStyle: { display: 'flex', alignItems: 'center' },
+        sortable: true,
+        filter: true,
+        resizable: true,
+        flex: 1
+    };
+
+    const detailCellRendererParams = useMemo(() => (masterGridParams: IDetailCellRendererParams) => ({
+        detailGridOptions: {
+            columnDefs: detailColumnDefs,
+            defaultColDef: { sortable: true, filter: true, resizable: true, flex: 1 },
+            rowSelection: { mode: 'multiRow', masterSelects: 'detail' },
+            context: {
+                masterGrid: {
+                    node: masterGridParams.node,
+                    data: masterGridParams.data
+                }
+            },
+            onSelectionChanged: (ev: SelectionChangedEvent) => {
+                const selDetail = ev.api.getSelectedRows();
+                const masterData = ev.context.masterGrid.data;
+
+                if (selDetail.length) {
+                    suppressMasterEventRef.current = true;
+
+                    const prev = selectedRowsRef.current;
+                    const updatedRow = { ...masterData, lineItems: selDetail };
+                    const idx = prev.findIndex(r => r.id === masterData.id);
+                    if (idx > -1) prev[idx] = updatedRow;
+                    else prev.push(updatedRow);
+
+                    console.log('Selected rows updated:', selectedRowsRef.current);
+                } else if (selDetail.length === 0) {
+                    const idx = selectedRowsRef.current.findIndex(r => r.id === masterData.id);
+                    if (idx > -1) selectedRowsRef.current.splice(idx, 1);
+                    console.log('Selected rows updated:', selectedRowsRef.current);
+                }
+            }
+        },
+        getDetailRowData: (params: GetDetailRowDataParams) => {
+            params.successCallback(params.data.lineItems);
+        },
+    }), []);
+
+    const handleSelectionChanged = (ev: any) => {
+        if (suppressMasterEventRef.current) {
+            suppressMasterEventRef.current = false;
+            return; // skip redundant master event
+        }
+
+        const sel = ev.api.getSelectedRows();
+        selectedRowsRef.current = sel;
+        console.log('Master selection changed:', selectedRowsRef.current);
+    };
+
+    const handleRowSelected = (event: any) => {
+        if (event.source === "uiSelectAll") {
+            const allMastersSelected = selectedRowsRef.current.length === purchaseRequestData.length;
+
+            const allChildrenMatch = selectedRowsRef.current.every((selectedRow) => {
+                const originalRow = purchaseRequestData.find((r) => r.id === selectedRow.id);
+
+                if (!originalRow) return false;
+
+                const selectedChild = selectedRow.lineItems;
+                const originalChild = originalRow.lineItems;
+
+                return (
+                    Array.isArray(selectedChild) &&
+                    Array.isArray(originalChild) &&
+                    selectedChild.length === originalChild.length
+                );
+            });
+
+            if (allMastersSelected && allChildrenMatch) {
+                selectedRowsRef.current = []
+                suppressMasterEventRef.current = false;
+            }
+        }
+    };
+
     return (
-        <AGTable
-            rowData={purchaseRequestData}
-            columnDefs={masterColumnDefs}
-            detailColumnDefs={detailColumnDefs}
-            height="600px"
-            nestedTable={true}
-            allowMultiSelect={true}
-            onRowSelectionChanged={(selectedRows) => {
-                console.log('Selected:', selectedRows);
-            }}
-            childDataKey="lineItems"
-        />
+        <div style={{ height: '90vh', width: "100%" }}>
+            <AgGridReact
+                className='ag-grid'
+                rowData={purchaseRequestData}
+                columnDefs={masterColumnDefs}
+                defaultColDef={defaultColDef}
+                rowSelection={{ mode: 'multiRow', masterSelects: 'detail' }}
+                animateRows={true}
+                masterDetail={true}
+                detailCellRendererParams={detailCellRendererParams}
+                onSelectionChanged={handleSelectionChanged}
+                onRowSelected={handleRowSelected}
+            />
+        </div>
     );
 };
 
-// Storybook story
+// nested tables story
 export const NestedTables = {
-    render: () => <NestedTable />,
+    render: () => <NestedTableComponent />,
     parameters: {
         docs: {
             description: {
-                story: 'A master-detail table showing account holders with expandable call records. Features multi-row selection where selecting a master row also selects its detail rows.',
+                story: 'A master-detail table showing purchase requests with expandable line items. Features multi-row selection where selecting a master row also selects its detail rows, and selecting detail rows updates the master selection accordingly.',
             },
         },
     },
-};
+};