@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Pagination/Pagination.tsx

@@ -24,241 +24,238 @@ interface PaginationNavButtonProps {
 /**
  * PaginationNavButton component for rendering first, previous, next, and last buttons
  */
-export const PaginationNavButton: React.FC<PaginationNavButtonProps> = memo(({
-  type,
-  onClick,
-  disabled,
-  label,
-  iconName,
-}) => (
-  <li
-    className={`c-pagination__item c-pagination__item--${type} ${disabled ? 'is-disabled' : ''}`}
-    aria-disabled={disabled}
-  >
-    <button
-      type="button"
-      className="c-pagination__link"
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={label}
+export const PaginationNavButton: React.FC<PaginationNavButtonProps> = memo(
+  ({ type, onClick, disabled, label, iconName }) => (
+    <li
+      className={`c-pagination__item c-pagination__item--${type} ${disabled ? 'is-disabled' : ''}`}
+      aria-disabled={disabled}
     >
-      <Icon name={iconName} size="sm" aria-hidden="true" />
-    </button>
-  </li>
-));
+      <button
+        type="button"
+        className="c-pagination__link"
+        onClick={onClick}
+        disabled={disabled}
+        aria-label={label}
+      >
+        <Icon name={iconName} size="sm" aria-hidden="true" />
+      </button>
+    </li>
+  )
+);
 
 /**
  * Pagination component
  */
-export const Pagination: React.FC<PaginationProps> = memo(({
-  currentPage = PAGINATION_DEFAULTS.currentPage,
-  totalPages = PAGINATION_DEFAULTS.totalPages,
-  onPageChange,
-  siblingCount = PAGINATION_DEFAULTS.siblingCount,
-  showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons,
-  showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons,
-  showSearch = false,
-  searchPlaceholder = 'Go to page',
-  size = PAGINATION_DEFAULTS.size,
-  className = '',
-  style,
-  'aria-label': ariaLabel = 'Pagination',
-  glass,
-}) => {
-  const { paginationRange, goToPage, nextPage, prevPage, firstPage, lastPage } = usePagination({
-    currentPage,
-    totalPages,
-    siblingCount,
+export const Pagination: React.FC<PaginationProps> = memo(
+  ({
+    currentPage = PAGINATION_DEFAULTS.currentPage,
+    totalPages = PAGINATION_DEFAULTS.totalPages,
     onPageChange,
-  });
+    siblingCount = PAGINATION_DEFAULTS.siblingCount,
+    showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons,
+    showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons,
+    showSearch = false,
+    searchPlaceholder = 'Go to page',
+    size = PAGINATION_DEFAULTS.size,
+    className = '',
+    style,
+    'aria-label': ariaLabel = 'Pagination',
+    glass,
+  }) => {
+    const { paginationRange, goToPage, nextPage, prevPage, firstPage, lastPage } = usePagination({
+      currentPage,
+      totalPages,
+      siblingCount,
+      onPageChange,
+    });
 
-  const [searchValue, setSearchValue] = useState<string>('');
-  const [searchError, setSearchError] = useState<string>('');
+    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;
-  }
+    // 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 handleSearchSubmit = (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setSearchError('');
 
-    const pageNumber = parseInt(searchValue, 10);
+      const pageNumber = parseInt(searchValue, 10);
 
-    if (isNaN(pageNumber)) {
-      setSearchError('Please enter a valid page number');
-      return;
-    }
+      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 < 1 || pageNumber > totalPages) {
+        setSearchError(`Page must be between 1 and ${totalPages}`);
+        return;
+      }
 
-    if (pageNumber === currentPage) {
-      setSearchError('You are already on this page');
-      return;
-    }
+      if (pageNumber === currentPage) {
+        setSearchError('You are already on this page');
+        return;
+      }
 
-    goToPage(pageNumber);
-    setSearchValue('');
-  };
+      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 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}`}
-      style={style}
-      aria-label={ariaLabel}
-    >
-      <ul className="c-pagination__items">
-        {showFirstLastButtons && (
-          <PaginationNavButton
-            type="first"
-            onClick={firstPage}
-            disabled={currentPage === 1}
-            label="Go to first page"
-            iconName="SkipBack"
-          />
-        )}
+    const paginationContent = (
+      <nav
+        className={`c-pagination c-pagination--${size} ${className}`}
+        style={style}
+        aria-label={ariaLabel}
+      >
+        <ul className="c-pagination__items">
+          {showFirstLastButtons && (
+            <PaginationNavButton
+              type="first"
+              onClick={firstPage}
+              disabled={currentPage === 1}
+              label="Go to first page"
+              iconName="SkipBack"
+            />
+          )}
 
-        {showPrevNextButtons && (
-          <PaginationNavButton
-            type="prev"
-            onClick={prevPage}
-            disabled={currentPage === 1}
-            label="Go to previous page"
-            iconName="CaretLeft"
-          />
-        )}
+          {showPrevNextButtons && (
+            <PaginationNavButton
+              type="prev"
+              onClick={prevPage}
+              disabled={currentPage === 1}
+              label="Go to previous page"
+              iconName="CaretLeft"
+            />
+          )}
+
+          {paginationRange.map((pageNumber, index) => {
+            if (pageNumber === DOTS) {
+              return (
+                <li
+                  key={`dots-${index}`}
+                  className="c-pagination__item c-pagination__item--dots"
+                  aria-hidden="true"
+                >
+                  &#8230;
+                </li>
+              );
+            }
+
+            const isActive = pageNumber === currentPage;
 
-        {paginationRange.map((pageNumber, index) => {
-          if (pageNumber === DOTS) {
             return (
               <li
-                key={`dots-${index}`}
-                className="c-pagination__item c-pagination__item--dots"
-                aria-hidden="true"
+                key={pageNumber}
+                className={`c-pagination__item ${isActive ? 'is-active' : ''}`}
+                aria-current={isActive ? 'page' : undefined}
               >
-                &#8230;
+                <button
+                  type="button"
+                  className="c-pagination__link"
+                  onClick={() => goToPage(pageNumber as number)}
+                  aria-label={`Page ${pageNumber}`}
+                  aria-current={isActive ? 'page' : undefined}
+                >
+                  {pageNumber}
+                </button>
               </li>
             );
-          }
+          })}
 
-          const isActive = pageNumber === currentPage;
+          {showPrevNextButtons && (
+            <PaginationNavButton
+              type="next"
+              onClick={nextPage}
+              disabled={currentPage === totalPages}
+              label="Go to next page"
+              iconName="CaretRight"
+            />
+          )}
 
-          return (
-            <li
-              key={pageNumber}
-              className={`c-pagination__item ${isActive ? 'is-active' : ''}`}
-              aria-current={isActive ? 'page' : undefined}
-            >
-              <button
-                type="button"
-                className="c-pagination__link"
-                onClick={() => goToPage(pageNumber as number)}
-                aria-label={`Page ${pageNumber}`}
-                aria-current={isActive ? 'page' : undefined}
+          {showFirstLastButtons && (
+            <PaginationNavButton
+              type="last"
+              onClick={lastPage}
+              disabled={currentPage === totalPages}
+              label="Go to last page"
+              iconName="SkipForward"
+            />
+          )}
+        </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"
               >
-                {pageNumber}
+                <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>
-            </li>
-          );
-        })}
-
-        {showPrevNextButtons && (
-          <PaginationNavButton
-            type="next"
-            onClick={nextPage}
-            disabled={currentPage === totalPages}
-            label="Go to next page"
-            iconName="CaretRight"
-          />
-        )}
-
-        {showFirstLastButtons && (
-          <PaginationNavButton
-            type="last"
-            onClick={lastPage}
-            disabled={currentPage === totalPages}
-            label="Go to last page"
-            iconName="SkipForward"
-          />
+            </div>
+            {searchError && (
+              <div
+                id={`pagination-error-${currentPage}`}
+                className="c-pagination__search-error"
+                role="alert"
+              >
+                {searchError}
+              </div>
+            )}
+          </form>
         )}
-      </ul>
+      </nav>
+    );
 
-      {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>
-  );
+    if (glass) {
+      // Default glass settings for pagination
+      const defaultGlassProps = {
+        displacementScale: 60,
+        blurAmount: 1,
+        saturation: 160,
+        aberrationIntensity: 0.5,
+        cornerRadius: 8,
+        mode: 'shader' as const,
+      };
 
-  if (glass) {
-    // Default glass settings for pagination
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      cornerRadius: 8,
-      mode: 'shader' as const,
-    };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      return <AtomixGlass {...glassProps}>{paginationContent}</AtomixGlass>;
+    }
 
-    return <AtomixGlass {...glassProps}>{paginationContent}</AtomixGlass>;
+    return paginationContent;
   }
-
-  return paginationContent;
-});
+);
 
 export type { PaginationProps };
 

package/src/components/PhotoViewer/PhotoViewer.tsx

@@ -111,7 +111,10 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
 
     const link = document.createElement('a');
     link.href = currentImage.src;
-    const sanitizedTitle = (currentImage.title || `image-${currentIndex + 1}`).replace(/[^a-zA-Z0-9.-]/g, '_');
+    const sanitizedTitle = (currentImage.title || `image-${currentIndex + 1}`).replace(
+      /[^a-zA-Z0-9.-]/g,
+      '_'
+    );
     link.download = sanitizedTitle;
     document.body.appendChild(link);
     link.click();