@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -54,7 +54,7 @@ interface TimeParts {
 export default class Countdown implements CountdownInstance {
   // DOM element
   private element: HTMLElement;
-  
+
   // Options and state
   private options: CountdownOptions;
   private completed: boolean = false;
@@ -67,17 +67,16 @@ export default class Countdown implements CountdownInstance {
    */
   constructor(element: string | HTMLElement, options: Partial<CountdownOptions> = {}) {
     // Get element reference
-    this.element = typeof element === 'string'
-      ? document.querySelector(element) as HTMLElement
-      : element;
-    
+    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();
   }
@@ -103,14 +102,17 @@ export default class Countdown implements CountdownInstance {
    */
   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 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 });
@@ -121,7 +123,7 @@ export default class Countdown implements CountdownInstance {
     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) => {
@@ -136,7 +138,7 @@ export default class Countdown implements CountdownInstance {
       }
     });
     html += '</div>';
-    
+
     this.element.innerHTML = html;
   }
 
@@ -157,12 +159,15 @@ export default class Countdown implements CountdownInstance {
   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 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);
@@ -172,7 +177,7 @@ export default class Countdown implements CountdownInstance {
         this._render();
       }
     }, 1000);
-    
+
     this._render();
   }
 
@@ -185,7 +190,7 @@ export default class Countdown implements CountdownInstance {
       clearInterval(this.interval);
       this.interval = null;
     }
-    
+
     this.element.innerHTML = '';
   }
 
@@ -200,11 +205,11 @@ export default class Countdown implements CountdownInstance {
     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) {
@@ -214,20 +219,20 @@ export default class Countdown implements CountdownInstance {
           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

@@ -32,13 +32,13 @@ type Story = StoryObj<typeof DataTable>;
 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)]
+    status: statuses[Math.floor(Math.random() * statuses.length)],
   }));
 };
 
@@ -67,9 +67,9 @@ const columns: DataTableColumn[] = [
   { key: 'name', title: 'Name', sortable: true },
   { key: 'email', title: 'Email', sortable: true },
   { key: 'role', title: 'Role', sortable: true },
-  { 
-    key: 'status', 
-    title: 'Status', 
+  {
+    key: 'status',
+    title: 'Status',
     sortable: true,
     render: (value, row) => {
       let color = '';
@@ -88,7 +88,7 @@ const columns: DataTableColumn[] = [
           break;
       }
       return <span style={{ color }}>{value}</span>;
-    }
+    },
   },
 ];
 
@@ -129,7 +129,7 @@ export const Paginated: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'A paginated table with standard pagination controls below the table.'
+        story: 'A paginated table with standard pagination controls below the table.',
       },
     },
   },
@@ -146,7 +146,8 @@ export const PaginatedLargeDataset: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Pagination with a large dataset (100 items) demonstrating first/last buttons and ellipsis.'
+        story:
+          'Pagination with a large dataset (100 items) demonstrating first/last buttons and ellipsis.',
       },
     },
   },
@@ -167,7 +168,7 @@ export const CompleteFeatures: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'A complete data table with sorting, filtering, and pagination enabled.'
+        story: 'A complete data table with sorting, filtering, and pagination enabled.',
       },
     },
   },
@@ -214,21 +215,25 @@ export const Loading: Story = {
 
 // Interactive example with row click handler
 export const Interactive: Story = {
-  render: (args) => {
+  render: args => {
     const [selectedUser, setSelectedUser] = useState<any>(null);
-    
+
     const handleRowClick = (row: any) => {
       setSelectedUser(row);
     };
-    
+
     return (
       <div>
-        <DataTable
-          {...args}
-          onRowClick={handleRowClick}
-        />
+        <DataTable {...args} onRowClick={handleRowClick} />
         {selectedUser && (
-          <div style={{ marginTop: '1rem', padding: '1rem', border: '1px solid #ccc', borderRadius: '4px' }}>
+          <div
+            style={{
+              marginTop: '1rem',
+              padding: '1rem',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+            }}
+          >
             <h3>Selected User:</h3>
             <pre>{JSON.stringify(selectedUser, null, 2)}</pre>
           </div>
@@ -241,4 +246,4 @@ export const Interactive: Story = {
     columns,
     sortable: true,
   },
-};
+};

package/src/components/DataTable/DataTable.tsx

@@ -8,10 +8,10 @@ import { Pagination } from '../Pagination/Pagination';
 
 /**
  * DataTable - A flexible and accessible data table component
- * 
+ *
  * @example
  * ```tsx
- * <DataTable 
+ * <DataTable
  *   data={users}
  *   columns={columns}
  *   sortable={true}
@@ -37,7 +37,7 @@ export const DataTable: React.FC<DataTableProps> = ({
   ...props
 }) => {
   const tableRef = useRef<HTMLTableElement>(null);
-  
+
   const {
     displayData,
     sortConfig,
@@ -54,7 +54,7 @@ export const DataTable: React.FC<DataTableProps> = ({
     pageSize,
     onSort,
   });
-  
+
   // Generate component classes
   const tableClass = [
     DATA_TABLE_CLASSES.base,
@@ -62,28 +62,40 @@ export const DataTable: React.FC<DataTableProps> = ({
     bordered && DATA_TABLE_CLASSES.bordered,
     dense && DATA_TABLE_CLASSES.dense,
     loading && DATA_TABLE_CLASSES.loading,
-    className
-  ].filter(Boolean).join(' ');
-  
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   const renderHeader = () => {
     return (
       <thead className={DATA_TABLE_CLASSES.header}>
         <tr>
           {columns.map((column, index) => (
-            <th 
+            <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}
+              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" /> : 
+                      sortConfig.direction === 'asc' ? (
+                        <Icon name="CaretUp" size="sm" />
+                      ) : (
                         <Icon name="CaretDown" size="sm" />
+                      )
                     ) : null}
                   </span>
                 )}
@@ -94,16 +106,13 @@ export const DataTable: React.FC<DataTableProps> = ({
       </thead>
     );
   };
-  
+
   const renderBody = () => {
     if (loading) {
       return (
         <tbody>
           <tr>
-            <td 
-              colSpan={columns.length} 
-              className={DATA_TABLE_CLASSES.loadingCell}
-            >
+            <td colSpan={columns.length} className={DATA_TABLE_CLASSES.loadingCell}>
               <div className={DATA_TABLE_CLASSES.loadingIndicator}>
                 <Spinner size="md" variant="primary" />
               </div>
@@ -112,26 +121,23 @@ export const DataTable: React.FC<DataTableProps> = ({
         </tbody>
       );
     }
-    
+
     if (displayData.length === 0) {
       return (
         <tbody>
           <tr>
-            <td 
-              colSpan={columns.length} 
-              className={DATA_TABLE_CLASSES.emptyCell}
-            >
+            <td colSpan={columns.length} className={DATA_TABLE_CLASSES.emptyCell}>
               {emptyMessage}
             </td>
           </tr>
         </tbody>
       );
     }
-    
+
     return (
       <tbody>
         {displayData.map((row: any, rowIndex: number) => (
-          <tr 
+          <tr
             key={`row-${rowIndex}`}
             className={DATA_TABLE_CLASSES.row}
             onClick={onRowClick ? () => onRowClick(row) : undefined}
@@ -139,10 +145,7 @@ export const DataTable: React.FC<DataTableProps> = ({
             role={onRowClick ? 'button' : undefined}
           >
             {columns.map((column, colIndex) => (
-              <td 
-                key={`cell-${rowIndex}-${colIndex}`}
-                className={DATA_TABLE_CLASSES.cell}
-              >
+              <td key={`cell-${rowIndex}-${colIndex}`} className={DATA_TABLE_CLASSES.cell}>
                 {column.render ? column.render(row[column.key], row) : row[column.key]}
               </td>
             ))}
@@ -151,10 +154,10 @@ export const DataTable: React.FC<DataTableProps> = ({
       </tbody>
     );
   };
-  
+
   const renderPagination = () => {
     if (!paginated || totalPages <= 1) return null;
-    
+
     return (
       <div className={DATA_TABLE_CLASSES.pagination}>
         <Pagination
@@ -170,10 +173,10 @@ export const DataTable: React.FC<DataTableProps> = ({
       </div>
     );
   };
-  
+
   const renderToolbar = () => {
     if (!filterable) return null;
-    
+
     return (
       <div className={DATA_TABLE_CLASSES.toolbar}>
         <div className={DATA_TABLE_CLASSES.search}>
@@ -181,22 +184,19 @@ export const DataTable: React.FC<DataTableProps> = ({
             type="text"
             placeholder="Search..."
             className={`${DATA_TABLE_CLASSES.searchInput} c-input`}
-            onChange={(e) => handleSearch(e.target.value)}
+            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}
-        >
+        <table ref={tableRef} className={tableClass}>
           {renderHeader()}
           {renderBody()}
         </table>
@@ -210,4 +210,4 @@ export type { DataTableProps };
 
 DataTable.displayName = 'DataTable';
 
-export default DataTable;
+export default DataTable;

package/src/components/DataTable/index.ts

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

package/src/components/DataTable/scripts/bundle.ts

@@ -7,9 +7,14 @@ window.Atomix = window.Atomix || {};
 window.Atomix.DataTable = {
   DataTable,
   initializeAll: DataTable.initializeAll,
-  create: (element: string | HTMLElement, data: any[] = [], columns: DataTableColumn[] = [], options: DataTableOptions = {}) => {
+  create: (
+    element: string | HTMLElement,
+    data: any[] = [],
+    columns: DataTableColumn[] = [],
+    options: DataTableOptions = {}
+  ) => {
     return new DataTable(element, data, columns, options);
-  }
+  },
 };
 
-export default DataTable; 
+export default DataTable;