@shohojdhara/atomix 0.1.26 → 0.1.28

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

@@ -1,238 +0,0 @@
-// 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

@@ -1,249 +0,0 @@
-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

@@ -1,213 +0,0 @@
-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

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