@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,33 +1,184 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { useState } from 'react';
 import { DataTableColumn } from '../../lib/types/components';
 import { DataTable } from './DataTable';
 
-const meta = {
+const meta: Meta<typeof DataTable> = {
   title: 'Components/DataTable',
   component: DataTable,
   parameters: {
     layout: 'padded',
     docs: {
       description: {
-        component:
-          'The DataTable component provides a powerful and flexible way to display structured data in rows and columns. It supports sorting, filtering, pagination, selection, and various display options. DataTables are ideal for displaying large datasets, user lists, product catalogs, or any tabular information requiring advanced data manipulation.',
+        component: `
+# DataTable
+
+## Overview
+
+DataTable provides a powerful and flexible way to display structured data in rows and columns. It supports sorting, filtering, pagination, selection, and various display options. DataTables are ideal for displaying large datasets, user lists, product catalogs, or any tabular information requiring advanced data manipulation.
+
+## Features
+
+- Sorting capability for columns
+- Filtering functionality
+- Pagination with configurable page size
+- Row selection options
+- Custom cell rendering
+- Responsive design
+- Loading states
+- Empty state handling
+
+## Accessibility
+
+- Keyboard support: Navigate with arrow keys, select with Space/Enter
+- Screen reader: Table headers and data cells announced properly
+- ARIA support: Appropriate roles and properties for tables
+- Focus management: Maintains focus within the table controls
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<DataTable 
+  data={data} 
+  columns={columns} 
+/>
+\`\`\`
+
+### With Pagination
+
+\`\`\`tsx
+<DataTable 
+  data={data} 
+  columns={columns} 
+  paginated={true} 
+  pageSize={10}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| data | T[] | [] | Array of data objects to display |
+| columns | DataTableColumn[] | [] | Column definitions for the table |
+| sortable | boolean | false | Whether columns are sortable |
+| filterable | boolean | false | Whether the table is filterable |
+| paginated | boolean | false | Whether to enable pagination |
+| pageSize | number | 10 | Number of rows per page |
+| striped | boolean | false | Whether to apply striped row styling |
+| bordered | boolean | false | Whether to show table borders |
+| dense | boolean | false | Whether to use dense row spacing |
+| loading | boolean | false | Whether the table is in loading state |
+| emptyMessage | string | 'No records found' | Message to display when table is empty |
+| onRowClick | (row: T) => void | - | Callback when a row is clicked |
+| onSelectionChange | (selected: T[]) => void | - | Callback when selection changes |
+        `,
       },
     },
   },
   tags: ['autodocs'],
   argTypes: {
-    data: { control: 'object', description: 'Array of data objects to display' },
-    columns: { control: 'object', description: 'Column definitions for the table' },
-    sortable: { control: 'boolean', description: 'Whether columns are sortable' },
-    filterable: { control: 'boolean', description: 'Whether the table is filterable' },
-    paginated: { control: 'boolean', description: 'Whether to enable pagination' },
-    pageSize: { control: 'number', description: 'Number of rows per page' },
-    striped: { control: 'boolean', description: 'Whether to apply striped row styling' },
-    bordered: { control: 'boolean', description: 'Whether to show table borders' },
-    dense: { control: 'boolean', description: 'Whether to use dense row spacing' },
-    loading: { control: 'boolean', description: 'Whether the table is in loading state' },
-    emptyMessage: { control: 'text', description: 'Message to display when table is empty' },
+    data: {
+      control: 'object',
+      description: 'Array of data objects to display',
+      table: {
+        type: { summary: 'T[]' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    columns: {
+      control: 'object',
+      description: 'Column definitions for the table',
+      table: {
+        type: { summary: 'DataTableColumn[]' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    sortable: {
+      control: 'boolean',
+      description: 'Whether columns are sortable',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    filterable: {
+      control: 'boolean',
+      description: 'Whether the table is filterable',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    paginated: {
+      control: 'boolean',
+      description: 'Whether to enable pagination',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    pageSize: {
+      control: 'number',
+      description: 'Number of rows per page',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '10' },
+      },
+    },
+    striped: {
+      control: 'boolean',
+      description: 'Whether to apply striped row styling',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    bordered: {
+      control: 'boolean',
+      description: 'Whether to show table borders',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    dense: {
+      control: 'boolean',
+      description: 'Whether to use dense row spacing',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Whether the table is in loading state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    emptyMessage: {
+      control: 'text',
+      description: 'Message to display when table is empty',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'No records found' },
+      },
+    },
+    onRowClick: {
+      action: 'row clicked',
+      description: 'Callback when a row is clicked',
+    },
+    onSelectionChange: {
+      action: 'selection changed',
+      description: 'Callback when selection changes',
+    },
   },
 } satisfies Meta<typeof DataTable>;
 
@@ -78,170 +229,166 @@ const columns: DataTableColumn[] = [
     title: 'Status',
     sortable: true,
     render: (value, row) => {
-      let color = '';
+      let statusClass = '';
       switch (value) {
         case 'Active':
-          color = 'green';
+          statusClass = 'u-text-success';
           break;
         case 'Inactive':
-          color = 'red';
+          statusClass = 'u-text-error';
           break;
         case 'Pending':
-          color = 'orange';
+          statusClass = 'u-text-warning';
           break;
         case 'Suspended':
-          color = 'gray';
+          statusClass = 'u-text-gray';
           break;
+        default:
+          statusClass = 'u-text-gray';
       }
-      return <span style={{ color }}>{value}</span>;
+      return <span className={statusClass}>{value}</span>;
     },
   },
 ];
 
-// Basic example
-export const Basic: Story = {
+// ========================================
+// BASIC USAGE STORIES
+// ========================================
+
+export const BasicUsage: Story = {
   args: {
     data: users,
-    columns,
+    columns: columns,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic DataTable component with sample user data.',
+      },
+    },
   },
 };
 
-// Sortable example
-export const Sortable: Story = {
+// ========================================
+// VARIANTS & STATES STORIES
+// ========================================
+
+export const LoadingState: Story = {
   args: {
     data: users,
     columns,
-    sortable: true,
+    loading: true,
   },
 };
 
-// Filterable example
-export const Filterable: Story = {
+export const EmptyState: Story = {
   args: {
-    data: users,
+    data: [],
     columns,
-    filterable: true,
+    emptyMessage: 'No users found',
   },
 };
 
-// Paginated example
-export const Paginated: Story = {
+export const WithStripedRows: Story = {
   args: {
     data: users,
-    columns,
-    paginated: true,
-    pageSize: 5,
+    columns: columns,
+    striped: true,
   },
   parameters: {
     docs: {
       description: {
-        story: 'A paginated table with standard pagination controls below the table.',
+        story: 'DataTable with striped row styling for improved readability.',
       },
     },
   },
 };
 
-// Paginated with larger dataset
-export const PaginatedLargeDataset: Story = {
+export const WithBorderedTable: Story = {
   args: {
-    data: largeDataSet,
+    data: users,
     columns,
-    paginated: true,
-    pageSize: 10,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Pagination with a large dataset (100 items) demonstrating first/last buttons and ellipsis.',
-      },
-    },
+    bordered: true,
   },
 };
 
-// Complete example with all features
-export const CompleteFeatures: Story = {
+export const DenseSpacing: Story = {
   args: {
-    data: largeDataSet,
+    data: users,
     columns,
     sortable: true,
-    filterable: true,
-    paginated: true,
-    pageSize: 10,
-    striped: true,
-    bordered: true,
+    dense: true,
+  },
+};
+
+// ========================================
+// SORTING & FILTERING STORIES
+// ========================================
+
+export const WithSorting: Story = {
+  args: {
+    data: users,
+    columns: columns,
+    sortable: true,
   },
   parameters: {
     docs: {
       description: {
-        story: 'A complete data table with sorting, filtering, and pagination enabled.',
+        story: 'DataTable with column sorting functionality enabled.',
       },
     },
   },
 };
 
-// Styled example
-export const Styled: Story = {
+export const WithFiltering: Story = {
   args: {
     data: users,
     columns,
-    sortable: true,
-    striped: true,
-    bordered: true,
+    filterable: true,
   },
 };
 
-// Dense example
-export const Dense: Story = {
+export const WithColumnFilters: Story = {
   args: {
     data: users,
-    columns,
+    columns: columns.map(col => ({
+      ...col,
+      filterable: ['name', 'role', 'email'].includes(col.key),
+    })),
+    columnFilters: true,
     sortable: true,
-    dense: true,
   },
-};
-
-// Empty example
-export const Empty: Story = {
-  args: {
-    data: [],
-    columns,
-    emptyMessage: 'No users found',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'DataTable with column-specific filters. Each filterable column has its own filter input.',
+      },
+    },
   },
 };
 
-// Loading example
-export const Loading: Story = {
-  args: {
-    data: users,
-    columns,
-    loading: true,
-  },
-};
+// ========================================
+// ROW SELECTION STORIES
+// ========================================
 
-// Interactive example with row click handler
-export const Interactive: Story = {
+export const WithRowSelectionSingle: Story = {
   render: args => {
-    const [selectedUser, setSelectedUser] = useState<any>(null);
-
-    const handleRowClick = (row: any) => {
-      setSelectedUser(row);
-    };
+    const [selectedRow, setSelectedRow] = useState<any>(null);
 
     return (
       <div>
-        <DataTable {...args} onRowClick={handleRowClick} />
-        {selectedUser && (
-          <div
-            style={{
-              marginTop: '1rem',
-              padding: '1rem',
-              border: '1px solid #ccc',
-              borderRadius: '4px',
-            }}
-          >
-            <h3>Selected User:</h3>
-            <pre>{JSON.stringify(selectedUser, null, 2)}</pre>
+        <DataTable
+          {...args}
+          data={args.data || users}
+          columns={args.columns || columns}
+          selectionMode="single"
+          onSelectionChange={rows => setSelectedRow(rows[0] || null)}
+        />
+        {selectedRow && (
+          <div className="u-mt-4 u-p-4 u-bg-gray-100 u-rounded u-text-sm">
+            <strong>Selected:</strong>
+            <pre className="u-mt-2 u-text-xs">{JSON.stringify(selectedRow, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -252,10 +399,16 @@ export const Interactive: Story = {
     columns,
     sortable: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with single row selection enabled. Select a row using radio buttons.',
+      },
+    },
+  },
 };
 
-// Row selection - multiple
-export const RowSelectionMultiple: Story = {
+export const WithRowSelectionMultiple: Story = {
   render: args => {
     const [selectedRows, setSelectedRows] = useState<any[]>([]);
 
@@ -263,14 +416,20 @@ export const RowSelectionMultiple: Story = {
       <div>
         <DataTable
           {...args}
+          data={args.data || users}
+          columns={args.columns || columns}
           selectionMode="multiple"
           onSelectionChange={(rows, ids) => setSelectedRows(rows)}
         />
         {selectedRows.length > 0 && (
-          <div style={{ marginTop: '1rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
+          <div className="u-mt-4 u-p-4 u-bg-gray-100 u-rounded u-text-sm">
             <strong>Selected: {selectedRows.length} row(s)</strong>
-            <pre style={{ marginTop: '0.5rem', fontSize: '0.875rem' }}>
-              {JSON.stringify(selectedRows.map(r => r.name), null, 2)}
+            <pre className="u-mt-2 u-text-xs">
+              {JSON.stringify(
+                selectedRows.map(r => r.name),
+                null,
+                2
+              )}
             </pre>
           </div>
         )}
@@ -291,24 +450,30 @@ export const RowSelectionMultiple: Story = {
   },
 };
 
-// Row selection - single
-export const RowSelectionSingle: Story = {
+// ========================================
+// ADVANCED FEATURES STORIES
+// ========================================
+
+export const WithInteractiveRows: Story = {
   render: args => {
-    const [selectedRow, setSelectedRow] = useState<any>(null);
+    const [selectedUser, setSelectedUser] = useState<any>(null);
+
+    const handleRowClick = (row: any) => {
+      setSelectedUser(row);
+    };
 
     return (
       <div>
         <DataTable
           {...args}
-          selectionMode="single"
-          onSelectionChange={(rows) => setSelectedRow(rows[0] || null)}
+          data={args.data || users}
+          columns={args.columns || columns}
+          onRowClick={handleRowClick}
         />
-        {selectedRow && (
-          <div style={{ marginTop: '1rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
-            <strong>Selected:</strong>
-            <pre style={{ marginTop: '0.5rem', fontSize: '0.875rem' }}>
-              {JSON.stringify(selectedRow, null, 2)}
-            </pre>
+        {selectedUser && (
+          <div className="u-mt-4 u-p-4 u-border u-border-gray-300 u-rounded u-bg-white">
+            <h3 className="u-m-0">Selected User:</h3>
+            <pre className="u-m-0">{JSON.stringify(selectedUser, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -319,37 +484,50 @@ export const RowSelectionSingle: Story = {
     columns,
     sortable: true,
   },
+};
+
+// ========================================
+// PAGINATION STORIES
+// ========================================
+
+export const WithPagination: Story = {
+  args: {
+    data: largeDataSet,
+    columns: columns,
+    paginated: true,
+    pageSize: 5,
+  },
   parameters: {
     docs: {
       description: {
-        story: 'DataTable with single row selection enabled. Select a row using radio buttons.',
+        story: 'DataTable with pagination enabled to handle large datasets.',
       },
     },
   },
 };
 
-// Column-specific filtering
-export const ColumnFilters: Story = {
+export const WithPaginationLargeDataset: Story = {
   args: {
-    data: users,
-    columns: columns.map(col => ({
-      ...col,
-      filterable: ['name', 'role', 'email'].includes(col.key),
-    })),
-    columnFilters: true,
-    sortable: true,
+    data: largeDataSet,
+    columns,
+    paginated: true,
+    pageSize: 10,
   },
   parameters: {
     docs: {
       description: {
-        story: 'DataTable with column-specific filters. Each filterable column has its own filter input.',
+        story:
+          'Pagination with a large dataset (100 items) demonstrating first/last buttons and ellipsis.',
       },
     },
   },
 };
 
-// Column resizing
-export const ResizableColumns: Story = {
+// ========================================
+// COLUMN CONFIGURATION STORIES
+// ========================================
+
+export const WithResizableColumns: Story = {
   args: {
     data: users,
     columns: columns.map(col => ({
@@ -369,8 +547,7 @@ export const ResizableColumns: Story = {
   },
 };
 
-// Column reordering
-export const ReorderableColumns: Story = {
+export const WithReorderableColumns: Story = {
   args: {
     data: users,
     columns,
@@ -386,8 +563,7 @@ export const ReorderableColumns: Story = {
   },
 };
 
-// Column visibility toggle
-export const ColumnVisibility: Story = {
+export const WithColumnVisibilityToggle: Story = {
   args: {
     data: users,
     columns,
@@ -397,14 +573,18 @@ export const ColumnVisibility: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'DataTable with column visibility toggle. Use the Columns button to show/hide columns.',
+        story:
+          'DataTable with column visibility toggle. Use the Columns button to show/hide columns.',
       },
     },
   },
 };
 
-// Export functionality
-export const Exportable: Story = {
+// ========================================
+// EXPORT & CUSTOMIZATION STORIES
+// ========================================
+
+export const WithExportFunctionality: Story = {
   args: {
     data: users,
     columns,
@@ -422,8 +602,7 @@ export const Exportable: Story = {
   },
 };
 
-// Sticky headers
-export const StickyHeaders: Story = {
+export const WithStickyHeaders: Story = {
   args: {
     data: largeDataSet,
     columns,
@@ -442,7 +621,30 @@ export const StickyHeaders: Story = {
   },
 };
 
-// All advanced features
+// ========================================
+// COMPREHENSIVE EXAMPLES
+// ========================================
+
+export const CompleteFeatures: Story = {
+  args: {
+    data: largeDataSet,
+    columns,
+    sortable: true,
+    filterable: true,
+    paginated: true,
+    pageSize: 10,
+    striped: true,
+    bordered: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete data table with sorting, filtering, and pagination enabled.',
+      },
+    },
+  },
+};
+
 export const AllAdvancedFeatures: Story = {
   render: args => {
     const [selectedRows, setSelectedRows] = useState<any[]>([]);
@@ -451,11 +653,13 @@ export const AllAdvancedFeatures: Story = {
       <div>
         <DataTable
           {...args}
+          data={args.data || largeDataSet}
+          columns={args.columns || columns}
           selectionMode="multiple"
-          onSelectionChange={(rows) => setSelectedRows(rows)}
+          onSelectionChange={rows => setSelectedRows(rows)}
         />
         {selectedRows.length > 0 && (
-          <div style={{ marginTop: '1rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
+          <div className="u-mt-4 u-p-4 u-bg-gray-100 u-rounded">
             <strong>Selected: {selectedRows.length} row(s)</strong>
           </div>
         )}
@@ -486,7 +690,8 @@ export const AllAdvancedFeatures: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'DataTable with all advanced features enabled: selection, filtering, resizing, reordering, visibility toggle, export, and sticky headers.',
+        story:
+          'DataTable with all advanced features enabled: selection, filtering, resizing, reordering, visibility toggle, export, and sticky headers.',
       },
     },
   },