@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

package/dist/components/ui/navigation/pagination.d.ts

@@ -0,0 +1,261 @@
+
+// Simple icon components
+const ChevronDoubleLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+  </svg>
+);
+
+const ChevronDoubleRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7m-8-14l7 7-7 7" />
+  </svg>
+);
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage = 1,
+  totalPages = 1,
+  totalItems,
+  itemsPerPage = 10,
+  showFirstLast = true,
+  showPrevNext = true,
+  showPageNumbers = true,
+  maxPageNumbers = 5,
+  size = 'md',
+  variant = 'default',
+  onPageChange,
+  onItemsPerPageChange,
+  itemsPerPageOptions = [10, 25, 50, 100],
+  showItemsPerPage = false,
+  showTotal = false,
+  totalLabel = 'Total',
+  disabled = false,
+  loading = false,
+  className = '',
+  'data-testid': testId = 'pagination',
+}) => {
+  // Memoize pagination items to avoid unnecessary recalculations
+  const paginationItems = useMemo((): PaginationItem[] => {
+    const items: PaginationItem[] = [];
+
+    if (showFirstLast) {
+      items.push({
+        type: 'first',
+        page: 1,
+        disabled: currentPage === 1 || disabled,
+        label: 'First',
+        onClick: () => onPageChange(1),
+      });
+    }
+
+    if (showPrevNext) {
+      items.push({
+        type: 'previous',
+        page: currentPage - 1,
+        disabled: currentPage === 1 || disabled,
+        label: 'Previous',
+        onClick: () => onPageChange(currentPage - 1),
+      });
+    }
+
+    if (showPageNumbers) {
+      const pageNumbers = generatePageNumbers(currentPage, totalPages, maxPageNumbers);
+
+      pageNumbers.forEach((pageNum) => {
+        if (pageNum === 'ellipsis') {
+          items.push({
+            type: 'ellipsis',
+            label: '...',
+            disabled: true,
+          });
+        } else {
+          items.push({
+            type: 'page',
+            page: pageNum as number,
+            active: pageNum === currentPage,
+            disabled: disabled,
+            label: pageNum.toString(),
+            onClick: () => onPageChange(pageNum as number),
+          });
+        }
+      });
+    }
+
+    if (showPrevNext) {
+      items.push({
+        type: 'next',
+        page: currentPage + 1,
+        disabled: currentPage === totalPages || disabled,
+        label: 'Next',
+        onClick: () => onPageChange(currentPage + 1),
+      });
+    }
+
+    if (showFirstLast) {
+      items.push({
+        type: 'last',
+        page: totalPages,
+        disabled: currentPage === totalPages || disabled,
+        label: 'Last',
+        onClick: () => onPageChange(totalPages),
+      });
+    }
+
+    return items;
+  }, [currentPage, totalPages, maxPageNumbers, showFirstLast, showPrevNext, showPageNumbers, disabled, onPageChange]);
+
+  function generatePageNumbers(current: number, total: number, max: number): (number | 'ellipsis')[] {
+    if (total <= max) {
+      return Array.from({ length: total }, (_, i) => i + 1);
+    }
+
+    const half = Math.floor(max / 2);
+    const start = Math.max(1, current - half);
+    const end = Math.min(total, start + max - 1);
+
+    const numbers: (number | 'ellipsis')[] = [];
+
+    if (start > 1) {
+      numbers.push(1);
+      if (start > 2) numbers.push('ellipsis');
+    }
+
+    for (let i = start; i <= end; i++) {
+      numbers.push(i);
+    }
+
+    if (end < total) {
+      if (end < total - 1) numbers.push('ellipsis');
+      numbers.push(total);
+    }
+
+    return numbers;
+  }
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'pagination__button--sm';
+      case 'lg':
+        return 'pagination__button--lg';
+      default: // md
+        return 'pagination__button--md';
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'outlined':
+        return 'pagination__button--outlined';
+      case 'minimal':
+        return 'pagination__button--minimal';
+      default: // default
+        return 'pagination__button--default';
+    }
+  };
+
+  const getThemeClasses = () => {
+    return 'pagination pagination--stan-design';
+  };
+
+  const getButtonClasses = (item: PaginationItem) => {
+    let classes = `pagination__button ${getSizeClasses()} ${getVariantClasses()}`;
+
+    if (item.disabled) {
+      classes += ' pagination__button--disabled';
+    } else if (item.active) {
+      classes += ' pagination__button--active';
+    } else {
+      classes += ' pagination__button--inactive';
+    }
+
+    return classes;
+  };
+
+  const handleItemsPerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newItemsPerPage = parseInt(event.target.value, 10);
+    if (onItemsPerPageChange) {
+      onItemsPerPageChange(newItemsPerPage);
+    }
+  };
+
+  if (totalPages <= 1 && !showItemsPerPage && !showTotal) {
+    return null;
+  }
+
+  return (
+    <div className={`pagination__container ${getThemeClasses()} ${className}`} data-testid={testId}>
+      {/* Left side - Items per page and total */}
+      <div className="pagination__info">
+        {showItemsPerPage && (
+          <div className="pagination__items-per-page">
+            <label htmlFor="items-per-page" className="pagination__label">
+              Items per page:
+            </label>
+            <select
+              id="items-per-page"
+              value={itemsPerPage}
+              onChange={handleItemsPerPageChange}
+              disabled={disabled || loading}
+              className="pagination__select"
+            >
+              {itemsPerPageOptions.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {showTotal && totalItems !== undefined && (
+          <div className="pagination__total">
+            {totalLabel}: <span className="pagination__total-count">{totalItems.toLocaleString()}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Center - Page numbers */}
+      <div className="pagination__navigation">
+        {paginationItems.map((item, index) => {
+          if (item.type === 'ellipsis') {
+            return (
+              <span
+                key={`ellipsis-${index}`}
+                className="pagination__ellipsis"
+                aria-hidden="true"
+              >
+                {item.label}
+              </span>
+            );
+          }
+
+          const icon = item.type === 'first' ? <ChevronDoubleLeftIcon className="pagination__button-icon" /> :
+                      item.type === 'previous' ? <ChevronLeftIcon className="pagination__button-icon" /> :
+                      item.type === 'next' ? <ChevronRightIcon className="pagination__button-icon" /> :
+                      item.type === 'last' ? <ChevronDoubleRightIcon className="pagination__button-icon" /> : null;
+
+          return (
+            <button
+              key={`${item.type}-${item.page || index}`}
+              onClick={item.onClick}
+              disabled={item.disabled}
+              className={getButtonClasses(item)}
+              aria-label={item.label}
+              aria-current={item.active ? 'page' : undefined}
+            >
+              {icon || item.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Right side - Page info */}
+      <div className="pagination__status">
+        {`Page ${currentPage} of ${totalPages}`}
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

package/dist/components/ui/navigation/pagination.esm.js

@@ -0,0 +1,260 @@
+/**
+ * Pagination Component
+ * Provides comprehensive pagination with theme support and responsive design
+ */
+
+import * as React from 'react';
+import { useMemo } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { PaginationProps, PaginationItem } from './types';
+
+// Simple icon components
+const ChevronDoubleLeftIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+  </svg>
+);
+
+const ChevronDoubleRightIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7m-8-14l7 7-7 7" />
+  </svg>
+);
+
+export const Pagination= ({
+  currentPage = 1,
+  totalPages = 1,
+  totalItems,
+  itemsPerPage = 10,
+  showFirstLast = true,
+  showPrevNext = true,
+  showPageNumbers = true,
+  maxPageNumbers = 5,
+  size = 'md',
+  variant = 'default',
+  onPageChange,
+  onItemsPerPageChange,
+  itemsPerPageOptions = [10, 25, 50, 100],
+  showItemsPerPage = false,
+  showTotal = false,
+  totalLabel = 'Total',
+  disabled = false,
+  loading = false,
+  className = '',
+  'data-testid'= 'pagination',
+}) => {
+  // Memoize pagination items to avoid unnecessary recalculations
+  const paginationItems = useMemo(()] => {
+    const items] = [];
+
+    if (showFirstLast) {
+      items.push({
+        type,
+        page,
+        disabled=== 1 || disabled,
+        label,
+        onClick) => onPageChange(1),
+      });
+    }
+
+    if (showPrevNext) {
+      items.push({
+        type,
+        page,
+        disabled=== 1 || disabled,
+        label,
+        onClick) => onPageChange(currentPage - 1),
+      });
+    }
+
+    if (showPageNumbers) {
+      const pageNumbers = generatePageNumbers(currentPage, totalPages, maxPageNumbers);
+      
+      pageNumbers.forEach((pageNum) => {
+        if (pageNum === 'ellipsis') {
+          items.push({
+            type,
+            label,
+            disabled,
+          });
+        } else {
+          items.push({
+            type,
+            page,
+            active=== currentPage,
+            disabled,
+            label),
+            onClick) => onPageChange(pageNum as number),
+          });
+        }
+      });
+    }
+
+    if (showPrevNext) {
+      items.push({
+        type,
+        page,
+        disabled=== totalPages || disabled,
+        label,
+        onClick) => onPageChange(currentPage + 1),
+      });
+    }
+
+    if (showFirstLast) {
+      items.push({
+        type,
+        page,
+        disabled=== totalPages || disabled,
+        label,
+        onClick) => onPageChange(totalPages),
+      });
+    }
+
+    return items;
+  }, [currentPage, totalPages, maxPageNumbers, showFirstLast, showPrevNext, showPageNumbers, disabled, onPageChange]);
+
+
+
+  function generatePageNumbers(current, total, max))[] {
+    if (total <= max) {
+      return Array.from({ length}, (_, i) => i + 1);
+    }
+
+    const half = Math.floor(max / 2);
+    const start = Math.max(1, current - half);
+    const end = Math.min(total, start + max - 1);
+
+    const numbers)[] = [];
+
+    if (start > 1) {
+      numbers.push(1);
+      if (start > 2) numbers.push('ellipsis');
+    }
+
+    for (let i = start; i <= end; i++) {
+      numbers.push(i);
+    }
+
+    if (end < total) {
+      if (end < total - 1) numbers.push('ellipsis');
+      numbers.push(total);
+    }
+
+    return numbers;
+  }
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm';
+      case 'lg';
+      default;
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'outlined';
+      case 'minimal';
+      default;
+    }
+  };
+
+  const getThemeClasses = () => {
+    return 'pagination pagination--stan-design';
+  };
+
+  const getButtonClasses = (item) => {
+    let classes = `pagination__button ${getSizeClasses()} ${getVariantClasses()}`;
+
+    if (item.disabled) {
+      classes += ' pagination__button--disabled';
+    } else if (item.active) {
+      classes += ' pagination__button--active';
+    } else {
+      classes += ' pagination__button--inactive';
+    }
+
+    return classes;
+  };
+
+  const handleItemsPerPageChange = (event) => {
+    const newItemsPerPage = parseInt(event.target.value, 10);
+    if (onItemsPerPageChange) {
+      onItemsPerPageChange(newItemsPerPage);
+    }
+  };
+
+  if (totalPages <= 1 && !showItemsPerPage && !showTotal) {
+    return null;
+  }
+
+  return (
+    <div className={`pagination__container ${getThemeClasses()} ${className}`} data-testid={testId}>
+      {/* Left side - Items per page and total */}
+      <div className="pagination__info">
+        {showItemsPerPage && (
+          <div className="pagination__items-per-page">
+            <label htmlFor="items-per-page" className="pagination__label">
+              Items per page="items-per-page"
+              value={itemsPerPage}
+              onChange={handleItemsPerPageChange}
+              disabled={disabled || loading}
+              className="pagination__select"
+            >
+              {itemsPerPageOptions.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {showTotal && totalItems !== undefined && (
+          <div className="pagination__total">
+            {totalLabel}="pagination__total-count">{totalItems.toLocaleString()}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Center - Page numbers */}
+      <div className="pagination__navigation">
+        {paginationItems.map((item, index) => {
+          if (item.type === 'ellipsis') {
+            return (
+              <span
+                key={`ellipsis-${index}`}
+                className="pagination__ellipsis"
+                aria-hidden="true"
+              >
+                {item.label}
+              </span>
+            );
+          }
+
+          const icon = item.type === 'first' ? <ChevronDoubleLeftIcon className="pagination__button-icon" /> === 'previous' ? <ChevronLeftIcon className="pagination__button-icon" /> === 'next' ? <ChevronRightIcon className="pagination__button-icon" /> === 'last' ? <ChevronDoubleRightIcon className="pagination__button-icon" /> ;
+
+          return (
+            <button
+              key={`${item.type}-${item.page || index}`}
+              onClick={item.onClick}
+              disabled={item.disabled}
+              className={getButtonClasses(item)}
+              aria-label={item.label}
+              aria-current={item.active ? 'page' }
+            >
+              {icon || item.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Right side - Page info */}
+      <div className="pagination__status">
+        {`Page ${currentPage} of ${totalPages}`}
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;