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

package/dist/components/ui/navigation/pagination.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;

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

@@ -0,0 +1,375 @@
+
+// Simple icon components
+const ChevronLeftIcon: 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="M15 19l-7-7 7-7" />
+  </svg>
+);
+
+const ChevronRightIcon: 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="M9 5l7 7-7 7" />
+  </svg>
+);
+
+// TODO: Implement close icon functionality in future version
+// const XMarkIcon: 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="M6 18L18 6M6 6l12 12" />
+//   </svg>
+// );
+
+export const Sidebar: React.FC<SidebarProps> = ({
+  items = [],
+  groups = [],
+  variant = 'default',
+  size = 'md',
+  position = 'left',
+  collapsed = false,
+  defaultCollapsed = false,
+  onCollapseChange,
+  collapsible = true,
+  showToggle = true,
+  toggleIcon,
+  header,
+  footer,
+  overlay = false,
+  overlayCloseOnClick = true,
+  overlayCloseOnEscape = true,
+  overlayCloseOnOutsideClick = true,
+  responsive = true,
+  breakpoint = 'lg',
+  onItemClick,
+  onGroupToggle,
+  expandedGroups = [],
+  defaultExpandedGroups = [],
+  // TODO: Implement group icons in future version
+  // showGroupIcons = true,
+  showItemIcons = true,
+  showItemBadges = true,
+  showItemDescriptions = true,
+  sticky = false,
+  zIndex = 1000,
+  className = '',
+  'data-testid': testId = 'sidebar',
+}) => {
+  const [internalCollapsed, setInternalCollapsed] = useState<boolean>(
+    collapsed !== undefined ? collapsed : defaultCollapsed
+  );
+  const [internalExpandedGroups, setInternalExpandedGroups] = useState<string[]>(
+    expandedGroups !== undefined ? expandedGroups : defaultExpandedGroups
+  );
+  const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  const sidebarRef = useRef<HTMLDivElement>(null);
+
+  // Use controlled or uncontrolled collapsed state
+  const currentCollapsed = collapsed !== undefined ? collapsed : internalCollapsed;
+  const currentExpandedGroups = expandedGroups !== undefined ? expandedGroups : internalExpandedGroups;
+
+  // Handle responsive behavior
+  useEffect(() => {
+    const handleResize = () => {
+      const breakpointWidth = breakpoint === 'sm' ? 640 : breakpoint === 'md' ? 768 : breakpoint === 'lg' ? 1024 : 1280;
+      setIsMobile(window.innerWidth < breakpointWidth);
+    };
+
+    if (responsive) {
+      handleResize();
+      window.addEventListener('resize', handleResize);
+    }
+
+    return () => {
+      if (responsive) {
+        window.removeEventListener('resize', handleResize);
+      }
+    };
+  }, [responsive, breakpoint]);
+
+  // Handle escape key for overlay
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOverlayOpen && overlayCloseOnEscape) {
+        setIsOverlayOpen(false);
+      }
+    };
+
+    if (isOverlayOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOverlayOpen, overlayCloseOnEscape]);
+
+  const handleCollapseToggle = useCallback(() => {
+    if (!collapsible) return;
+
+    const newCollapsed = !currentCollapsed;
+
+    if (collapsed === undefined) {
+      setInternalCollapsed(newCollapsed);
+    }
+
+    if (onCollapseChange) {
+      onCollapseChange(newCollapsed);
+    }
+  }, [collapsed, currentCollapsed, collapsible, onCollapseChange]);
+
+  const handleGroupToggle = useCallback((groupId: string) => {
+    const newExpandedGroups = currentExpandedGroups.includes(groupId)
+      ? currentExpandedGroups.filter(id => id !== groupId)
+      : [...currentExpandedGroups, groupId];
+
+    if (expandedGroups === undefined) {
+      setInternalExpandedGroups(newExpandedGroups);
+    }
+
+    if (onGroupToggle) {
+      onGroupToggle(groupId, newExpandedGroups.includes(groupId));
+    }
+  }, [currentExpandedGroups, expandedGroups, onGroupToggle]);
+
+  const handleItemClick = useCallback((item: NavigationItem) => {
+    if (item.disabled) return;
+
+    if (onItemClick) {
+      onItemClick(item);
+    }
+
+    if (item.onClick) {
+      item.onClick();
+    }
+
+    // Close overlay on mobile after item click
+    if (isMobile && overlay && overlayCloseOnClick) {
+      setIsOverlayOpen(false);
+    }
+  }, [onItemClick, isMobile, overlay, overlayCloseOnClick]);
+
+  const handleOverlayClose = useCallback(() => {
+    setIsOverlayOpen(false);
+  }, []);
+
+  const getSizeClasses = () => {
+    if (currentCollapsed) return 'sidebar--collapsed';
+
+    switch (size) {
+      case 'sm':
+        return 'sidebar--size-sm';
+      case 'lg':
+        return 'sidebar--size-lg';
+      case 'xl':
+        return 'sidebar--size-xl';
+      default: // md
+        return 'sidebar--size-md';
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'collapsible':
+        return 'sidebar--collapsible';
+      case 'overlay':
+        return 'sidebar--overlay';
+      case 'drawer':
+        return 'sidebar--drawer';
+      default: // default
+        return 'sidebar--default';
+    }
+  };
+
+  const getThemeClasses = () => {
+    return 'sidebar sidebar--stan-design';
+  };
+
+  const getPositionClasses = () => {
+    if (variant === 'overlay' || variant === 'drawer') {
+      return position === 'right' ? 'sidebar--position-right' : 'sidebar--position-left';
+    }
+    return '';
+  };
+
+  const getTransformClasses = () => {
+    if (variant === 'overlay' || variant === 'drawer' || (isMobile && overlay)) {
+      if (position === 'right') {
+        return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-right';
+      }
+      return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-left';
+    }
+    return '';
+  };
+
+  const getItemClasses = (item: NavigationItem) => {
+    let classes = `sidebar__item ${
+      currentCollapsed ? 'sidebar__item--collapsed' : 'sidebar__item--expanded'
+    }`;
+
+    if (item.disabled) {
+      classes += ' sidebar__item--disabled';
+    } else if (item.active) {
+      classes += ' sidebar__item--active';
+    } else {
+      classes += ' sidebar__item--default';
+    }
+
+    return classes;
+  };
+
+  const getGroupClasses = (groupId: string) => {
+    const isExpanded = currentExpandedGroups.includes(groupId);
+    let classes = 'sidebar__group';
+
+    if (isExpanded) {
+      classes += ' sidebar__group--expanded';
+    } else {
+      classes += ' sidebar__group--collapsed';
+    }
+
+    return classes;
+  };
+
+  const renderMenuItem = (item: NavigationItem) => (
+    <button
+      key={item.id}
+      onClick={() => handleItemClick(item)}
+      disabled={item.disabled}
+      className={getItemClasses(item)}
+      title={currentCollapsed ? item.label : undefined}
+    >
+      {showItemIcons && item.icon && (
+        <span className={`sidebar__item-icon ${currentCollapsed ? 'sidebar__item-icon--collapsed' : 'sidebar__item-icon--expanded'}`}>
+          {item.icon}
+        </span>
+      )}
+
+      {!currentCollapsed && (
+        <div className="sidebar__item-content">
+          <div className="sidebar__item-label">{item.label}</div>
+          {showItemDescriptions && item.description && (
+            <div className="sidebar__item-description">{item.description}</div>
+          )}
+        </div>
+      )}
+
+      {!currentCollapsed && showItemBadges && item.badge && (
+        <span className="sidebar__item-badge">{item.badge}</span>
+      )}
+    </button>
+  );
+
+  const renderMenuGroup = (group: NavigationGroup) => (
+    <div key={group.id}>
+      <button
+        onClick={() => handleGroupToggle(group.id)}
+        className={getGroupClasses(group.id)}
+        title={currentCollapsed ? group.title : undefined}
+      >
+        {/* TODO: Add icon support to NavigationGroup in future version */}
+        {/* {showGroupIcons && group.icon && (
+          <span className={currentCollapsed ? '' : 'mr-3'}>
+            {group.icon}
+          </span>
+        )} */}
+
+        {!currentCollapsed && (
+          <>
+            <div className="sidebar__group-title">{group.title}</div>
+            <ChevronRightIcon
+              className={`sidebar__group-arrow ${
+                currentExpandedGroups.includes(group.id) ? 'sidebar__group-arrow--expanded' : ''
+              }`}
+            />
+          </>
+        )}
+      </button>
+
+      {!currentCollapsed && currentExpandedGroups.includes(group.id) && (
+        <div className="sidebar__group-items">
+          {group.items.map(renderMenuItem)}
+        </div>
+      )}
+    </div>
+  );
+
+  const sidebarContent = (
+    <div
+      ref={sidebarRef}
+      className={`${getSizeClasses()} ${getVariantClasses()} ${getThemeClasses()} ${getPositionClasses()} ${getTransformClasses()} ${className}`}
+      data-testid={testId}
+      style={{ zIndex }}
+    >
+      {/* Header */}
+      {header && (
+        <div className="sidebar__header">
+          {header}
+        </div>
+      )}
+
+      {/* Toggle Button */}
+      {showToggle && collapsible && (
+        <div className="sidebar__toggle-container">
+          <button
+            onClick={handleCollapseToggle}
+            className="sidebar__toggle-button"
+            aria-label={currentCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            {toggleIcon || (currentCollapsed ? <ChevronRightIcon className="sidebar__toggle-icon" /> : <ChevronLeftIcon className="sidebar__toggle-icon" />)}
+          </button>
+        </div>
+      )}
+
+      {/* Navigation Items */}
+      <nav className="sidebar__navigation">
+        {groups && groups.length > 0 ? groups.map(renderMenuGroup) : items.map(renderMenuItem)}
+      </nav>
+
+      {/* Footer */}
+      {footer && (
+        <div className="sidebar__footer">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+
+  // Mobile overlay
+  if (isMobile && overlay) {
+    return (
+      <>
+        {/* Overlay Backdrop */}
+        {isOverlayOpen && (
+          <div
+            className="sidebar__overlay-backdrop"
+            onClick={overlayCloseOnOutsideClick ? handleOverlayClose : undefined}
+          />
+        )}
+
+        {/* Sidebar */}
+        {sidebarContent}
+
+        {/* Mobile Toggle Button */}
+        <button
+          onClick={() => setIsOverlayOpen(!isOverlayOpen)}
+          className="sidebar__mobile-toggle"
+          aria-label="Toggle sidebar"
+        >
+          <svg className="sidebar__mobile-toggle-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
+      </>
+    );
+  }
+
+  // Desktop sidebar
+  return (
+    <div className={`sidebar__wrapper ${sticky ? 'sidebar__wrapper--sticky' : ''}`}>
+      {sidebarContent}
+    </div>
+  );
+};
+
+export default Sidebar;