@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

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

@@ -9,19 +9,19 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { PaginationProps, PaginationItem } from './types';
 
 // Simple icon components
-const ChevronDoubleLeftIcon}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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= ({
+export const Pagination: React.FC<PaginationProps> = ({
   currentPage = 1,
   totalPages = 1,
   totalItems,
@@ -41,29 +41,29 @@ export const Pagination= ({
   disabled = false,
   loading = false,
   className = '',
-  'data-testid'= 'pagination',
+  'data-testid': testId = 'pagination',
 }) => {
   // Memoize pagination items to avoid unnecessary recalculations
-  const paginationItems = useMemo(()] => {
-    const items] = [];
+  const paginationItems = useMemo((): PaginationItem[] => {
+    const items: PaginationItem[] = [];
 
     if (showFirstLast) {
       items.push({
-        type,
-        page,
-        disabled=== 1 || disabled,
-        label,
-        onClick) => onPageChange(1),
+        type: 'first',
+        page: 1,
+        disabled: currentPage === 1 || disabled,
+        label: 'First',
+        onClick: () => onPageChange(1),
       });
     }
 
     if (showPrevNext) {
       items.push({
-        type,
-        page,
-        disabled=== 1 || disabled,
-        label,
-        onClick) => onPageChange(currentPage - 1),
+        type: 'previous',
+        page: currentPage - 1,
+        disabled: currentPage === 1 || disabled,
+        label: 'Previous',
+        onClick: () => onPageChange(currentPage - 1),
       });
     }
 
@@ -73,18 +73,18 @@ export const Pagination= ({
       pageNumbers.forEach((pageNum) => {
         if (pageNum === 'ellipsis') {
           items.push({
-            type,
-            label,
-            disabled,
+            type: 'ellipsis',
+            label: '...',
+            disabled: true,
           });
         } else {
           items.push({
-            type,
-            page,
-            active=== currentPage,
-            disabled,
-            label),
-            onClick) => onPageChange(pageNum as number),
+            type: 'page',
+            page: pageNum as number,
+            active: pageNum === currentPage,
+            disabled: disabled,
+            label: pageNum.toString(),
+            onClick: () => onPageChange(pageNum as number),
           });
         }
       });
@@ -92,21 +92,21 @@ export const Pagination= ({
 
     if (showPrevNext) {
       items.push({
-        type,
-        page,
-        disabled=== totalPages || disabled,
-        label,
-        onClick) => onPageChange(currentPage + 1),
+        type: 'next',
+        page: currentPage + 1,
+        disabled: currentPage === totalPages || disabled,
+        label: 'Next',
+        onClick: () => onPageChange(currentPage + 1),
       });
     }
 
     if (showFirstLast) {
       items.push({
-        type,
-        page,
-        disabled=== totalPages || disabled,
-        label,
-        onClick) => onPageChange(totalPages),
+        type: 'last',
+        page: totalPages,
+        disabled: currentPage === totalPages || disabled,
+        label: 'Last',
+        onClick: () => onPageChange(totalPages),
       });
     }
 
@@ -115,16 +115,16 @@ export const Pagination= ({
 
 
 
-  function generatePageNumbers(current, total, max))[] {
+  function generatePageNumbers(current: number, total: number, max: number): (number | 'ellipsis')[] {
     if (total <= max) {
-      return Array.from({ length}, (_, i) => i + 1);
+      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)[] = [];
+    const numbers: (number | 'ellipsis')[] = [];
 
     if (start > 1) {
       numbers.push(1);
@@ -145,17 +145,23 @@ export const Pagination= ({
 
   const getSizeClasses = () => {
     switch (size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm':
+        return 'pagination__button--sm';
+      case 'lg':
+        return 'pagination__button--lg';
+      default: // md
+        return 'pagination__button--md';
     }
   };
 
   const getVariantClasses = () => {
     switch (variant) {
-      case 'outlined';
-      case 'minimal';
-      default;
+      case 'outlined':
+        return 'pagination__button--outlined';
+      case 'minimal':
+        return 'pagination__button--minimal';
+      default: // default
+        return 'pagination__button--default';
     }
   };
 
@@ -163,7 +169,7 @@ export const Pagination= ({
     return 'pagination pagination--stan-design';
   };
 
-  const getButtonClasses = (item) => {
+  const getButtonClasses = (item: PaginationItem) => {
     let classes = `pagination__button ${getSizeClasses()} ${getVariantClasses()}`;
 
     if (item.disabled) {
@@ -177,7 +183,7 @@ export const Pagination= ({
     return classes;
   };
 
-  const handleItemsPerPageChange = (event) => {
+  const handleItemsPerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newItemsPerPage = parseInt(event.target.value, 10);
     if (onItemsPerPageChange) {
       onItemsPerPageChange(newItemsPerPage);
@@ -195,7 +201,10 @@ export const Pagination= ({
         {showItemsPerPage && (
           <div className="pagination__items-per-page">
             <label htmlFor="items-per-page" className="pagination__label">
-              Items per page="items-per-page"
+              Items per page:
+            </label>
+            <select
+              id="items-per-page"
               value={itemsPerPage}
               onChange={handleItemsPerPageChange}
               disabled={disabled || loading}
@@ -212,7 +221,7 @@ export const Pagination= ({
 
         {showTotal && totalItems !== undefined && (
           <div className="pagination__total">
-            {totalLabel}="pagination__total-count">{totalItems.toLocaleString()}</span>
+            {totalLabel}: <span className="pagination__total-count">{totalItems.toLocaleString()}</span>
           </div>
         )}
       </div>
@@ -232,7 +241,10 @@ export const Pagination= ({
             );
           }
 
-          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" /> ;
+          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
@@ -241,7 +253,7 @@ export const Pagination= ({
               disabled={item.disabled}
               className={getButtonClasses(item)}
               aria-label={item.label}
-              aria-current={item.active ? 'page' }
+              aria-current={item.active ? 'page' : undefined}
             >
               {icon || item.label}
             </button>

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

@@ -9,19 +9,19 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { PaginationProps, PaginationItem } from './types';
 
 // Simple icon components
-const ChevronDoubleLeftIcon}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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= ({
+export const Pagination: React.FC<PaginationProps> = ({
   currentPage = 1,
   totalPages = 1,
   totalItems,
@@ -41,29 +41,29 @@ export const Pagination= ({
   disabled = false,
   loading = false,
   className = '',
-  'data-testid'= 'pagination',
+  'data-testid': testId = 'pagination',
 }) => {
   // Memoize pagination items to avoid unnecessary recalculations
-  const paginationItems = useMemo(()] => {
-    const items] = [];
+  const paginationItems = useMemo((): PaginationItem[] => {
+    const items: PaginationItem[] = [];
 
     if (showFirstLast) {
       items.push({
-        type,
-        page,
-        disabled=== 1 || disabled,
-        label,
-        onClick) => onPageChange(1),
+        type: 'first',
+        page: 1,
+        disabled: currentPage === 1 || disabled,
+        label: 'First',
+        onClick: () => onPageChange(1),
       });
     }
 
     if (showPrevNext) {
       items.push({
-        type,
-        page,
-        disabled=== 1 || disabled,
-        label,
-        onClick) => onPageChange(currentPage - 1),
+        type: 'previous',
+        page: currentPage - 1,
+        disabled: currentPage === 1 || disabled,
+        label: 'Previous',
+        onClick: () => onPageChange(currentPage - 1),
       });
     }
 
@@ -73,18 +73,18 @@ export const Pagination= ({
       pageNumbers.forEach((pageNum) => {
         if (pageNum === 'ellipsis') {
           items.push({
-            type,
-            label,
-            disabled,
+            type: 'ellipsis',
+            label: '...',
+            disabled: true,
           });
         } else {
           items.push({
-            type,
-            page,
-            active=== currentPage,
-            disabled,
-            label),
-            onClick) => onPageChange(pageNum as number),
+            type: 'page',
+            page: pageNum as number,
+            active: pageNum === currentPage,
+            disabled: disabled,
+            label: pageNum.toString(),
+            onClick: () => onPageChange(pageNum as number),
           });
         }
       });
@@ -92,21 +92,21 @@ export const Pagination= ({
 
     if (showPrevNext) {
       items.push({
-        type,
-        page,
-        disabled=== totalPages || disabled,
-        label,
-        onClick) => onPageChange(currentPage + 1),
+        type: 'next',
+        page: currentPage + 1,
+        disabled: currentPage === totalPages || disabled,
+        label: 'Next',
+        onClick: () => onPageChange(currentPage + 1),
       });
     }
 
     if (showFirstLast) {
       items.push({
-        type,
-        page,
-        disabled=== totalPages || disabled,
-        label,
-        onClick) => onPageChange(totalPages),
+        type: 'last',
+        page: totalPages,
+        disabled: currentPage === totalPages || disabled,
+        label: 'Last',
+        onClick: () => onPageChange(totalPages),
       });
     }
 
@@ -115,16 +115,16 @@ export const Pagination= ({
 
 
 
-  function generatePageNumbers(current, total, max))[] {
+  function generatePageNumbers(current: number, total: number, max: number): (number | 'ellipsis')[] {
     if (total <= max) {
-      return Array.from({ length}, (_, i) => i + 1);
+      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)[] = [];
+    const numbers: (number | 'ellipsis')[] = [];
 
     if (start > 1) {
       numbers.push(1);
@@ -145,17 +145,23 @@ export const Pagination= ({
 
   const getSizeClasses = () => {
     switch (size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm':
+        return 'pagination__button--sm';
+      case 'lg':
+        return 'pagination__button--lg';
+      default: // md
+        return 'pagination__button--md';
     }
   };
 
   const getVariantClasses = () => {
     switch (variant) {
-      case 'outlined';
-      case 'minimal';
-      default;
+      case 'outlined':
+        return 'pagination__button--outlined';
+      case 'minimal':
+        return 'pagination__button--minimal';
+      default: // default
+        return 'pagination__button--default';
     }
   };
 
@@ -163,7 +169,7 @@ export const Pagination= ({
     return 'pagination pagination--stan-design';
   };
 
-  const getButtonClasses = (item) => {
+  const getButtonClasses = (item: PaginationItem) => {
     let classes = `pagination__button ${getSizeClasses()} ${getVariantClasses()}`;
 
     if (item.disabled) {
@@ -177,7 +183,7 @@ export const Pagination= ({
     return classes;
   };
 
-  const handleItemsPerPageChange = (event) => {
+  const handleItemsPerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newItemsPerPage = parseInt(event.target.value, 10);
     if (onItemsPerPageChange) {
       onItemsPerPageChange(newItemsPerPage);
@@ -195,7 +201,10 @@ export const Pagination= ({
         {showItemsPerPage && (
           <div className="pagination__items-per-page">
             <label htmlFor="items-per-page" className="pagination__label">
-              Items per page="items-per-page"
+              Items per page:
+            </label>
+            <select
+              id="items-per-page"
               value={itemsPerPage}
               onChange={handleItemsPerPageChange}
               disabled={disabled || loading}
@@ -212,7 +221,7 @@ export const Pagination= ({
 
         {showTotal && totalItems !== undefined && (
           <div className="pagination__total">
-            {totalLabel}="pagination__total-count">{totalItems.toLocaleString()}</span>
+            {totalLabel}: <span className="pagination__total-count">{totalItems.toLocaleString()}</span>
           </div>
         )}
       </div>
@@ -232,7 +241,10 @@ export const Pagination= ({
             );
           }
 
-          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" /> ;
+          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
@@ -241,7 +253,7 @@ export const Pagination= ({
               disabled={item.disabled}
               className={getButtonClasses(item)}
               aria-label={item.label}
-              aria-current={item.active ? 'page' }
+              aria-current={item.active ? 'page' : undefined}
             >
               {icon || item.label}
             </button>