@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/components/Modal/Modal.stories.tsx

@@ -1,16 +1,27 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import type { AtomixGlassProps } from '../../lib/types/components';
 import Modal from './Modal';
 
-const meta: Meta<typeof Modal> = {
+// Helper type for glass props in stories (without children requirement)
+type GlassProps = boolean | Omit<AtomixGlassProps, 'children'>;
+
+const meta = {
   title: 'Components/Modal',
   component: Modal,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Modal component displays content in a focused overlay dialog. It provides a way to present important information or actions that require user attention. Modals support various sizes, can include headers and footers, and support glass morphism effects.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     size: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['sm', 'md', 'lg', 'xl'],
       description: 'Size of the modal',
       defaultValue: 'md',
@@ -35,10 +46,10 @@ const meta: Meta<typeof Modal> = {
       description: 'Enable glass morphism effect',
     },
   },
-};
+} satisfies Meta<typeof Modal>;
 
 export default meta;
-type Story = StoryObj<typeof Modal>;
+type Story = StoryObj<typeof meta>;
 
 /**
  * Basic modal example with a button to trigger opening.
@@ -377,7 +388,7 @@ export const GlassModalCustom: Story = {
               aberrationIntensity: 2,
               cornerRadius: 20,
               mode: 'polar',
-            } as any
+            } as GlassProps
           }
           footer={
             <>

package/src/components/Navigation/Menu/Menu.stories.tsx

@@ -6,7 +6,14 @@ const meta = {
   component: Menu,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Menu component provides a vertical list of menu items, typically used in dropdowns, sidebars, or context menus. It supports dividers, icons, and can be nested. Menus are ideal for organizing navigation options, actions, or any hierarchical list of choices.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     disabled: {
       control: 'boolean',

package/src/components/Navigation/Nav/Nav.stories.tsx

@@ -9,7 +9,14 @@ const meta = {
   component: Nav,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Nav component provides a horizontal navigation bar for organizing links and menu items. It supports various alignment options, can include dropdowns, and provides a clean interface for site navigation. Nav components are essential for primary site navigation and work seamlessly with NavItem and NavDropdown components.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     alignment: {
       control: { type: 'select' },

package/src/components/Navigation/Navbar/Navbar.stories.tsx

@@ -71,6 +71,7 @@ The Navbar component provides a responsive navigation header with brand, navigat
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     position: {
       control: { type: 'select' },

package/src/components/Navigation/SideMenu/SideMenu.stories.tsx

@@ -138,7 +138,7 @@ The SideMenu component provides a collapsible navigation menu with title and men
 } satisfies Meta<typeof SideMenu>;
 
 export default meta;
-type Story = StoryObj<typeof SideMenu>;
+type Story = StoryObj<typeof meta>;
 
 // Default SideMenu
 export const Default: Story = {

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,38 +1,62 @@
 import React, { useState } from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Pagination } from './Pagination';
-import { PaginationProps } from '../../lib/types/components';
+import { SIZES } from '../../lib/constants/components';
 
-export default {
+const meta = {
   title: 'Components/Pagination',
   component: Pagination,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Pagination component provides navigation controls for moving through multiple pages of content. It displays page numbers, ellipsis for large page ranges, and optional first/last and previous/next buttons. Pagination supports keyboard navigation and is fully accessible.',
+      },
+    },
+  },
+  tags: ['autodocs'],
   argTypes: {
     currentPage: {
       control: 'number',
       description: 'Current active page',
+      defaultValue: 1,
     },
     totalPages: {
       control: 'number',
       description: 'Total number of pages',
+      defaultValue: 10,
     },
-
     siblingCount: {
       control: 'number',
       description: 'Number of page links to show before and after current page',
+      defaultValue: 1,
     },
     showFirstLastButtons: {
       control: 'boolean',
       description: 'Whether to show first/last page buttons',
+      defaultValue: true,
     },
     showPrevNextButtons: {
       control: 'boolean',
       description: 'Whether to show previous/next page buttons',
+      defaultValue: true,
+    },
+    showSearch: {
+      control: 'boolean',
+      description: 'Whether to show search input for jumping to a specific page',
+      defaultValue: false,
+    },
+    searchPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text for the search input',
+      defaultValue: 'Go to page',
     },
     size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+      options: SIZES,
       description: 'Size variant for pagination',
+      defaultValue: 'md',
     },
     ariaLabel: {
       control: 'text',
@@ -47,19 +71,14 @@ export default {
       description: 'Enable glass morphism effect',
     },
   },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'A Pagination component for navigating through pages of content with enhanced accessibility, configurable sizes, and icons for navigation buttons.',
-      },
-    },
-  },
-} as Meta<typeof Pagination>;
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-// Template with controlled state
-const ControlledTemplate: StoryFn<PaginationProps> = args => {
-  const [currentPage, setCurrentPage] = useState(args.currentPage);
+// Helper component for controlled pagination
+const ControlledPagination = (args: React.ComponentProps<typeof Pagination>) => {
+  const [currentPage, setCurrentPage] = useState(args.currentPage || 1);
 
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
@@ -69,129 +88,145 @@ const ControlledTemplate: StoryFn<PaginationProps> = args => {
   return <Pagination {...args} currentPage={currentPage} onPageChange={handlePageChange} />;
 };
 
-export const Default = ControlledTemplate.bind({});
-Default.args = {
-  currentPage: 1,
-  totalPages: 10,
-  siblingCount: 1,
-  showFirstLastButtons: true,
-  showPrevNextButtons: true,
-  size: 'md',
-  ariaLabel: 'Pagination',
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default pagination with first/last and previous/next navigation buttons using icons.',
+export const Default: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 1,
+    totalPages: 10,
+    siblingCount: 1,
+    showFirstLastButtons: true,
+    showPrevNextButtons: true,
+    size: 'md',
+    ariaLabel: 'Pagination',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default pagination with first/last and previous/next navigation buttons using icons.',
+      },
     },
   },
 };
 
-export const WithMorePages = ControlledTemplate.bind({});
-WithMorePages.args = {
-  currentPage: 25,
-  totalPages: 50,
-  siblingCount: 2,
-  size: 'md',
-};
-WithMorePages.parameters = {
-  docs: {
-    description: {
-      story: 'Pagination with many pages, showing the ellipsis (dots) for page ranges.',
+export const WithMorePages: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 25,
+    totalPages: 50,
+    siblingCount: 2,
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pagination with many pages, showing the ellipsis (dots) for page ranges.',
+      },
     },
   },
 };
 
-export const SmallSize = ControlledTemplate.bind({});
-SmallSize.args = {
-  currentPage: 4,
-  totalPages: 10,
-  siblingCount: 1,
-  size: 'sm',
-};
-SmallSize.parameters = {
-  docs: {
-    description: {
-      story: 'Small-sized pagination component with smaller icons and buttons.',
+export const SmallSize: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 4,
+    totalPages: 10,
+    siblingCount: 1,
+    size: 'sm',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small-sized pagination component with smaller icons and buttons.',
+      },
     },
   },
 };
 
-export const LargeSize = ControlledTemplate.bind({});
-LargeSize.args = {
-  currentPage: 4,
-  totalPages: 10,
-  siblingCount: 1,
-  size: 'lg',
-};
-LargeSize.parameters = {
-  docs: {
-    description: {
-      story: 'Large-sized pagination component with larger icons and buttons.',
+export const LargeSize: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 4,
+    totalPages: 10,
+    siblingCount: 1,
+    size: 'lg',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large-sized pagination component with larger icons and buttons.',
+      },
     },
   },
 };
 
-export const FewPages = ControlledTemplate.bind({});
-FewPages.args = {
-  currentPage: 2,
-  totalPages: 3,
-  siblingCount: 1,
-};
-FewPages.parameters = {
-  docs: {
-    description: {
-      story: 'Pagination with only a few pages, showing all page numbers without ellipsis.',
+export const FewPages: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 2,
+    totalPages: 3,
+    siblingCount: 1,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pagination with only a few pages, showing all page numbers without ellipsis.',
+      },
     },
   },
 };
 
-export const NoFirstLastButtons = ControlledTemplate.bind({});
-NoFirstLastButtons.args = {
-  currentPage: 5,
-  totalPages: 15,
-  showFirstLastButtons: false,
-  showPrevNextButtons: true,
-};
-NoFirstLastButtons.parameters = {
-  docs: {
-    description: {
-      story: 'Pagination with only previous/next navigation buttons (no skip to first/last).',
+export const NoFirstLastButtons: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 5,
+    totalPages: 15,
+    showFirstLastButtons: false,
+    showPrevNextButtons: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pagination with only previous/next navigation buttons (no skip to first/last).',
+      },
     },
   },
 };
 
-export const OnlyPageNumbers = ControlledTemplate.bind({});
-OnlyPageNumbers.args = {
-  currentPage: 5,
-  totalPages: 15,
-  showFirstLastButtons: false,
-  showPrevNextButtons: false,
-};
-OnlyPageNumbers.parameters = {
-  docs: {
-    description: {
-      story: 'Pagination with only page numbers, no navigation buttons.',
+export const OnlyPageNumbers: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 5,
+    totalPages: 15,
+    showFirstLastButtons: false,
+    showPrevNextButtons: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pagination with only page numbers, no navigation buttons.',
+      },
     },
   },
 };
 
-export const CustomStyling = ControlledTemplate.bind({});
-CustomStyling.args = {
-  currentPage: 5,
-  totalPages: 15,
-  className: 'custom-pagination-class',
-  showFirstLastButtons: false,
-};
-CustomStyling.parameters = {
-  docs: {
-    description: {
-      story: 'Pagination with custom CSS class for additional styling.',
+export const CustomStyling: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 5,
+    totalPages: 15,
+    className: 'custom-pagination-class',
+    showFirstLastButtons: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pagination with custom CSS class for additional styling.',
+      },
     },
   },
 };
 
-export const Glass = {
+export const Glass: Story = {
   args: {
     currentPage: 5,
     totalPages: 15,
@@ -233,7 +268,7 @@ export const Glass = {
   },
 };
 
-export const GlassCustom = {
+export const GlassCustom: Story = {
   args: {
     currentPage: 5,
     totalPages: 15,
@@ -294,3 +329,45 @@ export const GlassCustom = {
     },
   },
 };
+
+export const WithSearch: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 5,
+    totalPages: 50,
+    siblingCount: 2,
+    showFirstLastButtons: true,
+    showPrevNextButtons: true,
+    showSearch: true,
+    searchPlaceholder: 'Go to page',
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pagination with search functionality to quickly jump to a specific page. Users can type a page number and submit to navigate directly.',
+      },
+    },
+  },
+};
+
+export const WithSearchLargeDataset: Story = {
+  render: args => <ControlledPagination {...args} />,
+  args: {
+    currentPage: 250,
+    totalPages: 1000,
+    siblingCount: 2,
+    showFirstLastButtons: true,
+    showPrevNextButtons: true,
+    showSearch: true,
+    searchPlaceholder: 'Enter page number',
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pagination with search functionality for large datasets. The search feature is especially useful when dealing with many pages.',
+      },
+    },
+  },
+};

package/src/components/Pagination/Pagination.tsx

@@ -1,12 +1,10 @@
-import React, { memo } from 'react';
+import React, { memo, useState, FormEvent } from 'react';
 import { PaginationProps } from '../../lib/types/components';
 import { usePagination, DOTS } from '../../lib/composables/usePagination';
 import { PAGINATION_DEFAULTS } from '../../lib/constants/components';
 import { Icon, IconProps } from '../Icon/Icon';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-// @TODO: Add Search functionality for pagination
-
 /**
  * Navigation button types for pagination
  */
@@ -59,6 +57,8 @@ export const Pagination: React.FC<PaginationProps> = memo(({
   siblingCount = PAGINATION_DEFAULTS.siblingCount,
   showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons,
   showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons,
+  showSearch = false,
+  searchPlaceholder = 'Go to page',
   size = PAGINATION_DEFAULTS.size,
   className = '',
   style,
@@ -72,11 +72,48 @@ export const Pagination: React.FC<PaginationProps> = memo(({
     onPageChange,
   });
 
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchError, setSearchError] = useState<string>('');
+
   // Don't render pagination with a single page or no pages
   if (currentPage === 0 || paginationRange.length < 2) {
     return null;
   }
 
+  const handleSearchSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setSearchError('');
+
+    const pageNumber = parseInt(searchValue, 10);
+
+    if (isNaN(pageNumber)) {
+      setSearchError('Please enter a valid page number');
+      return;
+    }
+
+    if (pageNumber < 1 || pageNumber > totalPages) {
+      setSearchError(`Page must be between 1 and ${totalPages}`);
+      return;
+    }
+
+    if (pageNumber === currentPage) {
+      setSearchError('You are already on this page');
+      return;
+    }
+
+    goToPage(pageNumber);
+    setSearchValue('');
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    // Only allow numbers
+    if (value === '' || /^\d+$/.test(value)) {
+      setSearchValue(value);
+      setSearchError('');
+    }
+  };
+
   const paginationContent = (
     <nav
       className={`c-pagination c-pagination--${size} ${className}`}
@@ -158,6 +195,49 @@ export const Pagination: React.FC<PaginationProps> = memo(({
           />
         )}
       </ul>
+
+      {showSearch && (
+        <form
+          className="c-pagination__search"
+          onSubmit={handleSearchSubmit}
+          aria-label="Jump to page"
+        >
+          <div className="c-pagination__search-wrapper">
+            <label htmlFor={`pagination-search-${currentPage}`} className="c-pagination__search-label">
+              <span className="c-pagination__search-label-text">Go to page:</span>
+              <input
+                id={`pagination-search-${currentPage}`}
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                className={`c-pagination__search-input ${searchError ? 'is-error' : ''}`}
+                placeholder={searchPlaceholder}
+                value={searchValue}
+                onChange={handleSearchChange}
+                aria-label="Page number"
+                aria-invalid={searchError ? 'true' : 'false'}
+                aria-describedby={searchError ? `pagination-error-${currentPage}` : undefined}
+              />
+            </label>
+            <button
+              type="submit"
+              className="c-pagination__search-button"
+              aria-label="Go to page"
+            >
+              <Icon name="ArrowRight" size="sm" aria-hidden="true" />
+            </button>
+          </div>
+          {searchError && (
+            <div
+              id={`pagination-error-${currentPage}`}
+              className="c-pagination__search-error"
+              role="alert"
+            >
+              {searchError}
+            </div>
+          )}
+        </form>
+      )}
     </nav>
   );
 

package/src/components/PhotoViewer/PhotoViewer.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { ImageType } from '../../lib/types/components';
 import { Badge } from '../Badge/Badge';
 import { Button } from '../Button/Button';
 import { PhotoViewer } from './PhotoViewer';
 
-const meta: Meta<typeof PhotoViewer> = {
+const meta = {
   title: 'Components/PhotoViewer',
   component: PhotoViewer,
   parameters: {
@@ -13,29 +13,34 @@ const meta: Meta<typeof PhotoViewer> = {
     docs: {
       description: {
         component:
-          'A modern, fully-featured photo viewer component with zoom, pan, navigation, and metadata display capabilities.',
+          'The PhotoViewer component provides a modern, fully-featured image viewing experience with zoom, pan, navigation, and metadata display. It supports image galleries, keyboard navigation, touch gestures, and fullscreen mode. Ideal for photo galleries, media libraries, or any application requiring detailed image viewing capabilities.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     thumbnailPosition: {
       control: 'select',
       options: ['bottom', 'top', 'left', 'right', 'none'],
+      description: 'Position of the thumbnail navigation',
     },
     enableKeyboardNavigation: {
       control: 'boolean',
+      description: 'Whether to enable keyboard navigation',
     },
     enableGestures: {
       control: 'boolean',
+      description: 'Whether to enable touch gestures',
     },
     enableFullscreen: {
       control: 'boolean',
+      description: 'Whether to enable fullscreen mode',
     },
   },
-};
+} satisfies Meta<typeof PhotoViewer>;
 
 export default meta;
-type Story = StoryObj<typeof PhotoViewer>;
+type Story = StoryObj<typeof meta>;
 
 // Sample images with rich metadata
 const sampleImages: ImageType[] = [