@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/ColorModeToggle/ColorModeToggle.tsx

@@ -157,13 +157,25 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({
   const title = showTooltip ? `Switch to ${nextMode} mode` : undefined;
 
   const defaultLightIcon = (
-    <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} fill="currentColor" aria-hidden="true">
+    <svg
+      viewBox="0 0 24 24"
+      width={iconSize}
+      height={iconSize}
+      fill="currentColor"
+      aria-hidden="true"
+    >
       <path d="M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
     </svg>
   );
 
   const defaultDarkIcon = (
-    <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} fill="currentColor" aria-hidden="true">
+    <svg
+      viewBox="0 0 24 24"
+      width={iconSize}
+      height={iconSize}
+      fill="currentColor"
+      aria-hidden="true"
+    >
       <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z" />
     </svg>
   );
@@ -179,7 +191,7 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({
       title={title}
       style={style}
     >
-      {colorMode === 'light' ? (lightIcon || defaultLightIcon) : (darkIcon || defaultDarkIcon)}
+      {colorMode === 'light' ? lightIcon || defaultLightIcon : darkIcon || defaultDarkIcon}
     </button>
   );
 };

package/src/components/Countdown/Countdown.stories.tsx

@@ -66,8 +66,8 @@ The Countdown component displays a countdown timer to a specified target date. I
   },
   tags: ['autodocs'],
   argTypes: {
-    target: { 
-      control: 'date', 
+    target: {
+      control: 'date',
       description: 'Target date/time for the countdown',
       table: {
         type: { summary: 'Date | number | string' },
@@ -82,16 +82,16 @@ The Countdown component displays a countdown timer to a specified target date. I
         defaultValue: { summary: "['days', 'hours', 'minutes', 'seconds']" },
       },
     },
-    separator: { 
-      control: 'text', 
+    separator: {
+      control: 'text',
       description: 'Separator string',
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: ':' },
       },
     },
-    focused: { 
-      control: 'boolean', 
+    focused: {
+      control: 'boolean',
       description: 'Focused style',
       table: {
         type: { summary: 'boolean' },
@@ -150,4 +150,4 @@ export const CustomSeparator: Story = {
       },
     },
   },
-};
+};

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

@@ -83,88 +83,88 @@ DataTable provides a powerful and flexible way to display structured data in row
   },
   tags: ['autodocs'],
   argTypes: {
-    data: { 
-      control: 'object', 
+    data: {
+      control: 'object',
       description: 'Array of data objects to display',
       table: {
         type: { summary: 'T[]' },
         defaultValue: { summary: '[]' },
       },
     },
-    columns: { 
-      control: 'object', 
+    columns: {
+      control: 'object',
       description: 'Column definitions for the table',
       table: {
         type: { summary: 'DataTableColumn[]' },
         defaultValue: { summary: '[]' },
       },
     },
-    sortable: { 
-      control: 'boolean', 
+    sortable: {
+      control: 'boolean',
       description: 'Whether columns are sortable',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    filterable: { 
-      control: 'boolean', 
+    filterable: {
+      control: 'boolean',
       description: 'Whether the table is filterable',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    paginated: { 
-      control: 'boolean', 
+    paginated: {
+      control: 'boolean',
       description: 'Whether to enable pagination',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    pageSize: { 
-      control: 'number', 
+    pageSize: {
+      control: 'number',
       description: 'Number of rows per page',
       table: {
         type: { summary: 'number' },
         defaultValue: { summary: '10' },
       },
     },
-    striped: { 
-      control: 'boolean', 
+    striped: {
+      control: 'boolean',
       description: 'Whether to apply striped row styling',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    bordered: { 
-      control: 'boolean', 
+    bordered: {
+      control: 'boolean',
       description: 'Whether to show table borders',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    dense: { 
-      control: 'boolean', 
+    dense: {
+      control: 'boolean',
       description: 'Whether to use dense row spacing',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    loading: { 
-      control: 'boolean', 
+    loading: {
+      control: 'boolean',
       description: 'Whether the table is in loading state',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    emptyMessage: { 
-      control: 'text', 
+    emptyMessage: {
+      control: 'text',
       description: 'Message to display when table is empty',
       table: {
         type: { summary: 'string' },
@@ -361,7 +361,8 @@ export const WithColumnFilters: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'DataTable with column-specific filters. Each filterable column has its own filter input.',
+        story:
+          'DataTable with column-specific filters. Each filterable column has its own filter input.',
       },
     },
   },
@@ -372,7 +373,7 @@ export const WithColumnFilters: Story = {
 // ========================================
 
 export const WithRowSelectionSingle: Story = {
-  render: (args) => {
+  render: args => {
     const [selectedRow, setSelectedRow] = useState<any>(null);
 
     return (
@@ -382,14 +383,12 @@ export const WithRowSelectionSingle: Story = {
           data={args.data || users}
           columns={args.columns || columns}
           selectionMode="single"
-          onSelectionChange={(rows) => setSelectedRow(rows[0] || null)}
+          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>
+            <pre className="u-mt-2 u-text-xs">{JSON.stringify(selectedRow, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -410,7 +409,7 @@ export const WithRowSelectionSingle: Story = {
 };
 
 export const WithRowSelectionMultiple: Story = {
-  render: (args) => {
+  render: args => {
     const [selectedRows, setSelectedRows] = useState<any[]>([]);
 
     return (
@@ -426,7 +425,11 @@ export const WithRowSelectionMultiple: Story = {
           <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 className="u-mt-2 u-text-xs">
-              {JSON.stringify(selectedRows.map(r => r.name), null, 2)}
+              {JSON.stringify(
+                selectedRows.map(r => r.name),
+                null,
+                2
+              )}
             </pre>
           </div>
         )}
@@ -452,7 +455,7 @@ export const WithRowSelectionMultiple: Story = {
 // ========================================
 
 export const WithInteractiveRows: Story = {
-  render: (args) => {
+  render: args => {
     const [selectedUser, setSelectedUser] = useState<any>(null);
 
     const handleRowClick = (row: any) => {
@@ -461,11 +464,11 @@ export const WithInteractiveRows: Story = {
 
     return (
       <div>
-        <DataTable 
-          {...args} 
+        <DataTable
+          {...args}
           data={args.data || users}
           columns={args.columns || columns}
-          onRowClick={handleRowClick} 
+          onRowClick={handleRowClick}
         />
         {selectedUser && (
           <div className="u-mt-4 u-p-4 u-border u-border-gray-300 u-rounded u-bg-white">
@@ -570,7 +573,8 @@ export const WithColumnVisibilityToggle: 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.',
       },
     },
   },
@@ -642,7 +646,7 @@ export const CompleteFeatures: Story = {
 };
 
 export const AllAdvancedFeatures: Story = {
-  render: (args) => {
+  render: args => {
     const [selectedRows, setSelectedRows] = useState<any[]>([]);
 
     return (
@@ -652,7 +656,7 @@ export const AllAdvancedFeatures: Story = {
           data={args.data || largeDataSet}
           columns={args.columns || columns}
           selectionMode="multiple"
-          onSelectionChange={(rows) => setSelectedRows(rows)}
+          onSelectionChange={rows => setSelectedRows(rows)}
         />
         {selectedRows.length > 0 && (
           <div className="u-mt-4 u-p-4 u-bg-gray-100 u-rounded">
@@ -686,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.',
       },
     },
   },

package/src/components/DataTable/DataTable.test.tsx

@@ -20,7 +20,9 @@ vi.mock('../Pagination/Pagination', () => ({
   Pagination: ({ currentPage, totalPages, onPageChange }: any) => (
     <div data-testid="pagination">
       <button onClick={() => onPageChange(currentPage - 1)}>Prev</button>
-      <span>{currentPage} / {totalPages}</span>
+      <span>
+        {currentPage} / {totalPages}
+      </span>
       <button onClick={() => onPageChange(currentPage + 1)}>Next</button>
     </div>
   ),
@@ -100,25 +102,13 @@ describe('DataTable Component', () => {
     });
 
     it('displays empty message when no data', () => {
-      render(
-        <DataTable
-          data={[]}
-          columns={sampleColumns}
-          emptyMessage="No records found"
-        />
-      );
+      render(<DataTable data={[]} columns={sampleColumns} emptyMessage="No records found" />);
 
       expect(screen.getByText('No records found')).toBeInTheDocument();
     });
 
     it('displays loading state', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          loading={true}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} loading={true} />);
 
       expect(screen.getByTestId('spinner')).toBeInTheDocument();
     });
@@ -126,13 +116,7 @@ describe('DataTable Component', () => {
 
   describe('Sorting', () => {
     it('renders sortable columns when sortable is enabled', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          sortable={true}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} sortable={true} />);
 
       const nameHeader = screen.getByText('Name').closest('th');
       expect(nameHeader).toHaveClass('c-data-table__header-cell--sortable');
@@ -141,12 +125,7 @@ describe('DataTable Component', () => {
     it('calls onSort when column header is clicked', () => {
       const handleSort = vi.fn();
       render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          sortable={true}
-          onSort={handleSort}
-        />
+        <DataTable data={sampleData} columns={sampleColumns} sortable={true} onSort={handleSort} />
       );
 
       const nameHeader = screen.getByText('Name').closest('th');
@@ -163,26 +142,14 @@ describe('DataTable Component', () => {
 
   describe('Filtering', () => {
     it('renders search input when filterable is enabled', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          filterable={true}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} filterable={true} />);
 
       const searchInput = screen.getByPlaceholderText('Search...');
       expect(searchInput).toBeInTheDocument();
     });
 
     it('filters data when search query is entered', async () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          filterable={true}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} filterable={true} />);
 
       const searchInput = screen.getByPlaceholderText('Search...');
       fireEvent.change(searchInput, { target: { value: 'John' } });
@@ -194,13 +161,7 @@ describe('DataTable Component', () => {
     });
 
     it('renders column filters when columnFilters is enabled', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          columnFilters={true}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} columnFilters={true} />);
 
       const columnFilters = screen.getAllByPlaceholderText('Filter...');
       expect(columnFilters.length).toBeGreaterThan(0);
@@ -209,26 +170,13 @@ describe('DataTable Component', () => {
 
   describe('Pagination', () => {
     it('renders pagination when paginated is enabled', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          paginated={true}
-          pageSize={2}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} paginated={true} pageSize={2} />);
 
       expect(screen.getByTestId('pagination')).toBeInTheDocument();
     });
 
     it('does not render pagination when paginated is false', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          paginated={false}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} paginated={false} />);
 
       expect(screen.queryByTestId('pagination')).not.toBeInTheDocument();
     });
@@ -236,26 +184,14 @@ describe('DataTable Component', () => {
 
   describe('Row Selection', () => {
     it('renders selection checkboxes when selectionMode is multiple', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          selectionMode="multiple"
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} selectionMode="multiple" />);
 
       const checkboxes = screen.getAllByTestId('checkbox');
       expect(checkboxes.length).toBeGreaterThan(0);
     });
 
     it('renders select all checkbox in header for multiple selection', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          selectionMode="multiple"
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} selectionMode="multiple" />);
 
       const checkboxes = screen.getAllByTestId('checkbox');
       // Should have at least one checkbox (select all)
@@ -285,13 +221,7 @@ describe('DataTable Component', () => {
   describe('Row Click', () => {
     it('calls onRowClick when row is clicked', () => {
       const handleRowClick = vi.fn();
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          onRowClick={handleRowClick}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} onRowClick={handleRowClick} />);
 
       const row = screen.getByText('John Doe').closest('tr');
       fireEvent.click(row!);
@@ -302,26 +232,14 @@ describe('DataTable Component', () => {
 
   describe('Export Functionality', () => {
     it('renders export dropdown when exportable is enabled', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          exportable={true}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} exportable={true} />);
 
       const exportButton = screen.getByText('Export');
       expect(exportButton).toBeInTheDocument();
     });
 
     it('does not render export when exportable is false', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          exportable={false}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} exportable={false} />);
 
       expect(screen.queryByText('Export')).not.toBeInTheDocument();
     });
@@ -329,13 +247,7 @@ describe('DataTable Component', () => {
 
   describe('Column Visibility', () => {
     it('renders column visibility dropdown when showColumnVisibility is enabled', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          showColumnVisibility={true}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} showColumnVisibility={true} />);
 
       const columnsButton = screen.getByText('Columns');
       expect(columnsButton).toBeInTheDocument();
@@ -345,11 +257,7 @@ describe('DataTable Component', () => {
   describe('Styling Variants', () => {
     it('applies striped class when striped is enabled', () => {
       const { container } = render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          striped={true}
-        />
+        <DataTable data={sampleData} columns={sampleColumns} striped={true} />
       );
 
       const table = container.querySelector('.c-data-table');
@@ -358,11 +266,7 @@ describe('DataTable Component', () => {
 
     it('applies bordered class when bordered is enabled', () => {
       const { container } = render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          bordered={true}
-        />
+        <DataTable data={sampleData} columns={sampleColumns} bordered={true} />
       );
 
       const table = container.querySelector('.c-data-table');
@@ -371,11 +275,7 @@ describe('DataTable Component', () => {
 
     it('applies dense class when dense is enabled', () => {
       const { container } = render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          dense={true}
-        />
+        <DataTable data={sampleData} columns={sampleColumns} dense={true} />
       );
 
       const table = container.querySelector('.c-data-table');
@@ -384,11 +284,7 @@ describe('DataTable Component', () => {
 
     it('applies sticky header class when stickyHeader is enabled', () => {
       const { container } = render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          stickyHeader={true}
-        />
+        <DataTable data={sampleData} columns={sampleColumns} stickyHeader={true} />
       );
 
       const table = container.querySelector('.c-data-table');
@@ -402,16 +298,11 @@ describe('DataTable Component', () => {
         {
           key: 'name',
           title: 'Name',
-          render: (value) => <strong>{value}</strong>,
+          render: value => <strong>{value}</strong>,
         },
       ];
 
-      render(
-        <DataTable
-          data={[{ name: 'John Doe' }]}
-          columns={columnsWithRender}
-        />
-      );
+      render(<DataTable data={[{ name: 'John Doe' }]} columns={columnsWithRender} />);
 
       const strongElement = screen.getByText('John Doe').closest('strong');
       expect(strongElement).toBeInTheDocument();
@@ -420,13 +311,7 @@ describe('DataTable Component', () => {
 
   describe('Accessibility', () => {
     it('applies correct ARIA attributes for sortable columns', () => {
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          sortable={true}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} sortable={true} />);
 
       const nameHeader = screen.getByText('Name').closest('th');
       expect(nameHeader).toHaveAttribute('aria-sort');
@@ -434,17 +319,10 @@ describe('DataTable Component', () => {
 
     it('applies role="button" to clickable rows', () => {
       const handleRowClick = vi.fn();
-      render(
-        <DataTable
-          data={sampleData}
-          columns={sampleColumns}
-          onRowClick={handleRowClick}
-        />
-      );
+      render(<DataTable data={sampleData} columns={sampleColumns} onRowClick={handleRowClick} />);
 
       const row = screen.getByText('John Doe').closest('tr');
       expect(row).toHaveAttribute('role', 'button');
     });
   });
 });
-