@shohojdhara/atomix 0.3.5 → 0.3.6

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[] = [