@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/Countdown/scripts/index.ts

@@ -0,0 +1,238 @@
+// Atomix Vanilla TS Countdown Component (Standardized)
+
+import { COUNTDOWN } from '../../../lib/constants/components';
+
+/**
+ * CountdownShowPart type for the countdown component
+ */
+type CountdownShowPart = 'days' | 'hours' | 'minutes' | 'seconds';
+
+/**
+ * CountdownOptions interface for the vanilla JS implementation
+ */
+export interface CountdownOptions {
+  target?: Date | string;
+  show?: CountdownShowPart[];
+  separator?: string;
+  focused?: boolean;
+  className?: string;
+  onComplete?: (() => void) | null;
+}
+
+/**
+ * CountdownInstance interface
+ */
+export interface CountdownInstance {
+  destroy: () => void;
+}
+
+/**
+ * Default options for the Countdown component
+ */
+const DEFAULT_OPTIONS: CountdownOptions = {
+  target: new Date(Date.now() + 1000 * 60 * 60 * 24), // 1 day from now
+  show: COUNTDOWN.DEFAULTS.SHOW as CountdownShowPart[],
+  separator: COUNTDOWN.DEFAULTS.SEPARATOR,
+  focused: false,
+  className: '',
+  onComplete: null,
+};
+
+/**
+ * Time parts interface
+ */
+interface TimeParts {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+/**
+ * Countdown Class - Vanilla JS implementation
+ */
+export default class Countdown implements CountdownInstance {
+  // DOM element
+  private element: HTMLElement;
+
+  // Options and state
+  private options: CountdownOptions;
+  private completed: boolean = false;
+  private interval: number | null = null;
+
+  /**
+   * Constructor
+   * @param element - DOM element or selector
+   * @param options - Configuration options
+   */
+  constructor(element: string | HTMLElement, options: Partial<CountdownOptions> = {}) {
+    // Get element reference
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+    if (!this.element) {
+      throw new Error('Countdown: element not found');
+    }
+
+    // Merge default options with provided options
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+
+    // Initialize the component
+    this._initialize();
+  }
+
+  /**
+   * Calculate time parts based on millisecond difference
+   * @param diff - Millisecond difference between target and current time
+   * @returns Object containing days, hours, minutes, seconds
+   * @private
+   */
+  private _getTimeParts(diff: number): TimeParts {
+    const totalSeconds = Math.max(0, Math.floor(diff / 1000));
+    const days = Math.floor(totalSeconds / 86400);
+    const hours = Math.floor((totalSeconds % 86400) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    return { days, hours, minutes, seconds };
+  }
+
+  /**
+   * Render the countdown component
+   * @private
+   */
+  private _render(): void {
+    const now = new Date();
+    const targetDate =
+      this.options.target !== undefined
+        ? typeof this.options.target === 'string'
+          ? new Date(this.options.target)
+          : this.options.target
+        : (DEFAULT_OPTIONS.target as Date);
+
+    const diff = targetDate.getTime() - now.getTime();
+    const { days, hours, minutes, seconds } = this._getTimeParts(diff);
+    const show = this.options.show || DEFAULT_OPTIONS.show!;
+
+    const timeParts: { label: string; value: number }[] = [];
+    if (show.includes('days')) timeParts.push({ label: 'Days', value: days });
+    if (show.includes('hours')) timeParts.push({ label: 'Hours', value: hours });
+    if (show.includes('minutes')) timeParts.push({ label: 'Minutes', value: minutes });
+    if (show.includes('seconds')) timeParts.push({ label: 'Seconds', value: seconds });
+
+    // Build container class
+    const rootClass = `${COUNTDOWN.CLASSES.BASE}${
+      this.options.focused ? ' ' + COUNTDOWN.CLASSES.FOCUSED : ''
+    }${this.options.className ? ' ' + this.options.className : ''}`;
+
+    // Build HTML
+    let html = `<div class="${rootClass.trim()}">`;
+    timeParts.forEach((part, idx) => {
+      html += `
+        <div class="${COUNTDOWN.SELECTORS.TIME.substring(1)}">
+          <span class="${COUNTDOWN.SELECTORS.TIME_COUNT.substring(1)}">${String(part.value).padStart(2, '0')}</span>
+          <span class="${COUNTDOWN.SELECTORS.TIME_LABEL.substring(1)}">${part.label}</span>
+        </div>
+      `;
+      if (idx < timeParts.length - 1) {
+        html += `<span class="${COUNTDOWN.SELECTORS.SEPARATOR.substring(1)}">${this.options.separator}</span>`;
+      }
+    });
+    html += '</div>';
+
+    this.element.innerHTML = html;
+  }
+
+  /**
+   * Initialize the countdown component
+   * @private
+   */
+  private _initialize(): void {
+    this.completed = false;
+    this._render();
+    this._start();
+  }
+
+  /**
+   * Start the countdown interval
+   * @private
+   */
+  private _start(): void {
+    this.interval = window.setInterval(() => {
+      const now = new Date();
+      const targetDate =
+        this.options.target !== undefined
+          ? typeof this.options.target === 'string'
+            ? new Date(this.options.target)
+            : this.options.target
+          : (DEFAULT_OPTIONS.target as Date);
+
+      const diff = targetDate.getTime() - now.getTime();
+
+      if (diff <= 0 && !this.completed) {
+        this.completed = true;
+        if (this.interval !== null) clearInterval(this.interval);
+        this._render();
+        if (typeof this.options.onComplete === 'function') this.options.onComplete();
+      } else if (!this.completed) {
+        this._render();
+      }
+    }, 1000);
+
+    this._render();
+  }
+
+  /**
+   * Destroy the countdown component
+   * Clean up event listeners and DOM
+   */
+  public destroy(): void {
+    if (this.interval !== null) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+
+    this.element.innerHTML = '';
+  }
+
+  /**
+   * Initialize all Countdown components on the page
+   * @param selector - CSS selector for countdown elements
+   * @returns Array of Countdown instances
+   * @static
+   */
+  public static initializeAll(selector = '[data-component="countdown"]'): Countdown[] {
+    const elements = document.querySelectorAll(selector);
+    return Array.from(elements).map(element => {
+      // Try to get options from data attributes
+      const options: CountdownOptions = {};
+
+      // Get target date/time
+      const target = element.getAttribute('data-target');
+      if (target) options.target = target;
+
+      // Get show parts
+      const showAttr = element.getAttribute('data-show');
+      if (showAttr) {
+        try {
+          options.show = showAttr.split(',') as CountdownShowPart[];
+        } catch (e) {
+          console.error('Countdown: Error parsing show data attribute', e);
+        }
+      }
+
+      // Get separator
+      const separator = element.getAttribute('data-separator');
+      if (separator) options.separator = separator;
+
+      // Get focused state
+      const focused = element.getAttribute('data-focused');
+      options.focused = focused === 'true';
+
+      // Get className
+      const className = element.getAttribute('data-class-name');
+      if (className) options.className = className;
+
+      return new Countdown(element as HTMLElement, options);
+    });
+  }
+}

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

@@ -0,0 +1,249 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { DataTable } from './DataTable';
+import { DataTableColumn } from '../../lib/types/components';
+
+const meta: Meta<typeof DataTable> = {
+  title: 'Components/DataTable',
+  component: DataTable,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  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';