@shohojdhara/atomix 0.1.30 → 0.2.2

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

@@ -0,0 +1,248 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { DataTableColumn } from '../../lib/types/components';
+import { DataTable } from './DataTable';
+
+const meta: Meta<typeof DataTable> = {
+  title: 'Components/DataTable',
+  component: DataTable,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    data: { control: 'object' },
+    columns: { control: 'object' },
+    sortable: { control: 'boolean' },
+    filterable: { control: 'boolean' },
+    paginated: { control: 'boolean' },
+    pageSize: { control: 'number' },
+    striped: { control: 'boolean' },
+    bordered: { control: 'boolean' },
+    dense: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    emptyMessage: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTable>;
+
+// Generate more sample data for better pagination testing
+const generateUsers = (count: number) => {
+  const roles = ['Admin', 'User', 'Editor', 'Manager', 'Guest'];
+  const statuses = ['Active', 'Inactive', 'Pending', 'Suspended'];
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    role: roles[Math.floor(Math.random() * roles.length)],
+    status: statuses[Math.floor(Math.random() * statuses.length)],
+  }));
+};
+
+// Sample data
+const users = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' },
+  { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'Editor', status: 'Active' },
+  { id: 5, name: 'Charlie Davis', email: 'charlie@example.com', role: 'User', status: 'Pending' },
+  { id: 6, name: 'Eva Wilson', email: 'eva@example.com', role: 'Admin', status: 'Active' },
+  { id: 7, name: 'Frank Miller', email: 'frank@example.com', role: 'User', status: 'Inactive' },
+  { id: 8, name: 'Grace Lee', email: 'grace@example.com', role: 'Editor', status: 'Active' },
+  { id: 9, name: 'Henry Clark', email: 'henry@example.com', role: 'User', status: 'Pending' },
+  { id: 10, name: 'Ivy Martin', email: 'ivy@example.com', role: 'Admin', status: 'Active' },
+  { id: 11, name: 'Jack Wilson', email: 'jack@example.com', role: 'User', status: 'Inactive' },
+  { id: 12, name: 'Karen Brown', email: 'karen@example.com', role: 'Editor', status: 'Active' },
+];
+
+// Large data set for pagination examples
+const largeDataSet = generateUsers(100);
+
+// Column definitions
+const columns: DataTableColumn[] = [
+  { key: 'id', title: 'ID', width: '80px' },
+  { key: 'name', title: 'Name', sortable: true },
+  { key: 'email', title: 'Email', sortable: true },
+  { key: 'role', title: 'Role', sortable: true },
+  {
+    key: 'status',
+    title: 'Status',
+    sortable: true,
+    render: (value, row) => {
+      let color = '';
+      switch (value) {
+        case 'Active':
+          color = 'green';
+          break;
+        case 'Inactive':
+          color = 'red';
+          break;
+        case 'Pending':
+          color = 'orange';
+          break;
+        case 'Suspended':
+          color = 'gray';
+          break;
+      }
+      return <span style={{ color }}>{value}</span>;
+    },
+  },
+];
+
+// Basic example
+export const Basic: Story = {
+  args: {
+    data: users,
+    columns,
+  },
+};
+
+// Sortable example
+export const Sortable: Story = {
+  args: {
+    data: users,
+    columns,
+    sortable: true,
+  },
+};
+
+// Filterable example
+export const Filterable: Story = {
+  args: {
+    data: users,
+    columns,
+    filterable: true,
+  },
+};
+
+// Paginated example
+export const Paginated: Story = {
+  args: {
+    data: users,
+    columns,
+    paginated: true,
+    pageSize: 5,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A paginated table with standard pagination controls below the table.',
+      },
+    },
+  },
+};
+
+// Paginated with larger dataset
+export const PaginatedLargeDataset: Story = {
+  args: {
+    data: largeDataSet,
+    columns,
+    paginated: true,
+    pageSize: 10,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Pagination with a large dataset (100 items) demonstrating first/last buttons and ellipsis.',
+      },
+    },
+  },
+};
+
+// Complete example with all features
+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.',
+      },
+    },
+  },
+};
+
+// Styled example
+export const Styled: Story = {
+  args: {
+    data: users,
+    columns,
+    sortable: true,
+    striped: true,
+    bordered: true,
+  },
+};
+
+// Dense example
+export const Dense: Story = {
+  args: {
+    data: users,
+    columns,
+    sortable: true,
+    dense: true,
+  },
+};
+
+// Empty example
+export const Empty: Story = {
+  args: {
+    data: [],
+    columns,
+    emptyMessage: 'No users found',
+  },
+};
+
+// Loading example
+export const Loading: Story = {
+  args: {
+    data: users,
+    columns,
+    loading: true,
+  },
+};
+
+// Interactive example with row click handler
+export const Interactive: Story = {
+  render: args => {
+    const [selectedUser, setSelectedUser] = useState<any>(null);
+
+    const handleRowClick = (row: any) => {
+      setSelectedUser(row);
+    };
+
+    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>
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    data: users,
+    columns,
+    sortable: true,
+  },
+};

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,213 @@
+import React, { useRef } from 'react';
+import { DataTableProps } from '../../lib/types/components';
+import { useDataTable } from '../../lib/composables/useDataTable';
+import { DATA_TABLE_CLASSES } from '../../lib/constants/components';
+import { Spinner } from '../Spinner/Spinner';
+import { Icon } from '../Icon/Icon';
+import { Pagination } from '../Pagination/Pagination';
+
+/**
+ * DataTable - A flexible and accessible data table component
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   sortable={true}
+ *   onRowClick={handleRowClick}
+ * />
+ * ```
+ */
+export const DataTable: React.FC<DataTableProps> = ({
+  data,
+  columns,
+  className,
+  sortable = false,
+  filterable = false,
+  paginated = false,
+  pageSize = 10,
+  striped = false,
+  bordered = false,
+  dense = false,
+  loading = false,
+  emptyMessage = 'No data available',
+  onRowClick,
+  onSort,
+  ...props
+}) => {
+  const tableRef = useRef<HTMLTableElement>(null);
+
+  const {
+    displayData,
+    sortConfig,
+    currentPage,
+    totalPages,
+    handleSort,
+    handlePageChange,
+    handleSearch,
+  } = useDataTable({
+    data,
+    columns,
+    sortable,
+    paginated,
+    pageSize,
+    onSort,
+  });
+
+  // Generate component classes
+  const tableClass = [
+    DATA_TABLE_CLASSES.base,
+    striped && DATA_TABLE_CLASSES.striped,
+    bordered && DATA_TABLE_CLASSES.bordered,
+    dense && DATA_TABLE_CLASSES.dense,
+    loading && DATA_TABLE_CLASSES.loading,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const renderHeader = () => {
+    return (
+      <thead className={DATA_TABLE_CLASSES.header}>
+        <tr>
+          {columns.map((column, index) => (
+            <th
+              key={`header-${index}`}
+              className={`${DATA_TABLE_CLASSES.headerCell} ${column.sortable !== false && sortable ? DATA_TABLE_CLASSES.sortable : ''}`}
+              onClick={() =>
+                column.sortable !== false && sortable ? handleSort(column.key) : null
+              }
+              aria-sort={
+                sortConfig?.key === column.key
+                  ? sortConfig.direction === 'asc'
+                    ? 'ascending'
+                    : 'descending'
+                  : undefined
+              }
+            >
+              <div className={DATA_TABLE_CLASSES.headerContent}>
+                <span>{column.title}</span>
+                {column.sortable !== false && sortable && (
+                  <span className={DATA_TABLE_CLASSES.sortIcon}>
+                    {sortConfig?.key === column.key ? (
+                      sortConfig.direction === 'asc' ? (
+                        <Icon name="CaretUp" size="sm" />
+                      ) : (
+                        <Icon name="CaretDown" size="sm" />
+                      )
+                    ) : null}
+                  </span>
+                )}
+              </div>
+            </th>
+          ))}
+        </tr>
+      </thead>
+    );
+  };
+
+  const renderBody = () => {
+    if (loading) {
+      return (
+        <tbody>
+          <tr>
+            <td colSpan={columns.length} className={DATA_TABLE_CLASSES.loadingCell}>
+              <div className={DATA_TABLE_CLASSES.loadingIndicator}>
+                <Spinner size="md" variant="primary" />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      );
+    }
+
+    if (displayData.length === 0) {
+      return (
+        <tbody>
+          <tr>
+            <td colSpan={columns.length} className={DATA_TABLE_CLASSES.emptyCell}>
+              {emptyMessage}
+            </td>
+          </tr>
+        </tbody>
+      );
+    }
+
+    return (
+      <tbody>
+        {displayData.map((row: any, rowIndex: number) => (
+          <tr
+            key={`row-${rowIndex}`}
+            className={DATA_TABLE_CLASSES.row}
+            onClick={onRowClick ? () => onRowClick(row) : undefined}
+            tabIndex={onRowClick ? 0 : undefined}
+            role={onRowClick ? 'button' : undefined}
+          >
+            {columns.map((column, colIndex) => (
+              <td key={`cell-${rowIndex}-${colIndex}`} className={DATA_TABLE_CLASSES.cell}>
+                {column.render ? column.render(row[column.key], row) : row[column.key]}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    );
+  };
+
+  const renderPagination = () => {
+    if (!paginated || totalPages <= 1) return null;
+
+    return (
+      <div className={DATA_TABLE_CLASSES.pagination}>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+          showFirstLastButtons={true}
+          showPrevNextButtons={true}
+          size="sm"
+          ariaLabel="Data table pagination"
+          className="c-data-table__pagination"
+        />
+      </div>
+    );
+  };
+
+  const renderToolbar = () => {
+    if (!filterable) return null;
+
+    return (
+      <div className={DATA_TABLE_CLASSES.toolbar}>
+        <div className={DATA_TABLE_CLASSES.search}>
+          <input
+            type="text"
+            placeholder="Search..."
+            className={`${DATA_TABLE_CLASSES.searchInput} c-input`}
+            onChange={e => handleSearch(e.target.value)}
+            aria-label="Search table"
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={DATA_TABLE_CLASSES.container} {...props}>
+      {renderToolbar()}
+      <div className={DATA_TABLE_CLASSES.tableWrapper}>
+        <table ref={tableRef} className={tableClass}>
+          {renderHeader()}
+          {renderBody()}
+        </table>
+      </div>
+      {renderPagination()}
+    </div>
+  );
+};
+
+export type { DataTableProps };
+
+DataTable.displayName = 'DataTable';
+
+export default DataTable;

package/src/components/DataTable/index.ts

@@ -0,0 +1,3 @@
+export { DataTable } from './DataTable';
+export { default } from './DataTable';
+export type { DataTableProps } from './DataTable';