@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/components/ui/navigation/breadcrumb.tsx

@@ -0,0 +1,158 @@
+/**
+ * Breadcrumb Component
+ * Provides navigation breadcrumbs with theme support and responsive design
+ */
+
+import * as React from 'react';
+import { useState, useMemo } from 'react';
+import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
+import { BreadcrumbProps, BreadcrumbItem } from './types';
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  separator = <ChevronRightIcon className="w-4 h-4" />,
+  maxItems = 5,
+  showHome = true,
+  homeIcon = <HomeIcon className="w-4 h-4" />,
+  onItemClick,
+  truncate = true,
+  responsive = true,
+  className = '',
+  'data-testid': testId = 'breadcrumb',
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Memoize processed items to avoid unnecessary recalculations
+  const processedItems = useMemo(() => {
+    if (!truncate || items.length <= maxItems) {
+      return items;
+    }
+
+    if (isExpanded) {
+      return items;
+    }
+
+    // Show first, last, and ellipsis in the middle
+    const firstItems = items.slice(0, 2);
+    const lastItems = items.slice(-2);
+    
+    return [
+      ...firstItems,
+      { id: 'ellipsis', label: '...', disabled: true },
+      ...lastItems,
+    ];
+  }, [items, maxItems, truncate, isExpanded]);
+
+  const handleItemClick = (item: BreadcrumbItem) => {
+    if (item.disabled || item.id === 'ellipsis') return;
+    
+    if (onItemClick) {
+      onItemClick(item);
+    }
+  };
+
+  const handleExpandToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const getThemeClasses = () => {
+    return 'breadcrumb breadcrumb--stan-design';
+  };
+
+  const getItemClasses = (item: BreadcrumbItem, isLast: boolean) => {
+    const baseClasses = 'breadcrumb__item-button';
+    
+    if (item.disabled) {
+      return `${baseClasses} breadcrumb__item-button--disabled`;
+    }
+
+    if (isLast) {
+      return `${baseClasses} breadcrumb__item-button--active`;
+    }
+
+    return baseClasses;
+  };
+
+  const getSeparatorClasses = () => {
+    return 'breadcrumb__separator breadcrumb__separator--semantic';
+  };
+
+  return (
+    <nav
+      className={`${getThemeClasses()} ${className}`}
+      aria-label="Breadcrumb"
+      data-testid={testId}
+    >
+      {showHome && (
+        <>
+          <button
+            onClick={() => handleItemClick({ id: 'home', label: 'Home', href: '/' })}
+            className={`breadcrumb__home-button ${getItemClasses({ id: 'home', label: 'Home' } as BreadcrumbItem, false)}`}
+            aria-label="Go to home page"
+          >
+            <span className="breadcrumb__icon">{homeIcon}</span>
+          </button>
+          {separator && (
+            <span className={getSeparatorClasses()} aria-hidden="true">
+              {separator}
+            </span>
+          )}
+        </>
+      )}
+
+      <ol className="breadcrumb__list">
+        {processedItems.map((item, index) => {
+          const isLast = index === processedItems.length - 1;
+          const isEllipsis = item.id === 'ellipsis';
+
+          return (
+            <li key={item.id} className="breadcrumb__item">
+              {index > 0 && separator && (
+                <span className={getSeparatorClasses()} aria-hidden="true">
+                  {separator}
+                </span>
+              )}
+              
+              {isEllipsis ? (
+                <button
+                  onClick={handleExpandToggle}
+                  className="breadcrumb__ellipsis"
+                  aria-label={isExpanded ? 'Collapse breadcrumbs' : 'Expand breadcrumbs'}
+                >
+                  {item.label}
+                </button>
+              ) : (
+                <button
+                  onClick={() => handleItemClick(item)}
+                  className={getItemClasses(item, isLast)}
+                  disabled={item.disabled}
+                  aria-current={isLast ? 'page' : undefined}
+                  aria-label={item.href ? `Navigate to ${item.label}` : item.label}
+                >
+                  {item.icon && <span className="breadcrumb__icon">{item.icon}</span>}
+                  {responsive && window.innerWidth < 640 ? (
+                    <span className="breadcrumb__item-label">{item.label}</span>
+                  ) : (
+                    <span className="breadcrumb__item-label">{item.label}</span>
+                  )}
+                </button>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+
+      {truncate && items.length > maxItems && (
+        <button
+          onClick={handleExpandToggle}
+          className={`breadcrumb__expand-toggle breadcrumb__expand-toggle--semantic`}
+          aria-label={isExpanded ? 'Show fewer breadcrumbs' : 'Show all breadcrumbs'}
+        >
+          {isExpanded ? 'Show Less' : 'Show All'}
+        </button>
+      )}
+    </nav>
+  );
+};
+
+export default Breadcrumb;

package/src/components/ui/navigation/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Navigation Components Index
+ * Exports all navigation components for easy importing
+ */
+
+export { Breadcrumb } from './breadcrumb';
+export { Pagination } from './pagination';
+export { Tabs } from './tabs';
+export { Stepper } from './stepper';
+export { Menu } from './menu';
+export { Sidebar } from './sidebar';
+
+// Export types
+export type {
+  NavigationBaseProps,
+  NavigationItem,
+  NavigationGroup,
+  BreadcrumbProps,
+  BreadcrumbItem,
+  PaginationProps,
+  PaginationItem,
+  TabsProps,
+  TabItem,
+  StepperProps,
+  StepItem,
+  StepAction,
+  MenuProps,
+  SidebarProps,
+  NavigationState,
+  NavigationContextValue,
+  NavigationAction,
+  NavigationBreakpoint,
+  NavigationSpacing,
+  NavigationAnimation,
+  NavigationAccessibility,
+} from './types';

package/src/components/ui/navigation/menu.tsx

@@ -0,0 +1,374 @@
+/**
+ * Menu Component
+ * Provides comprehensive menu functionality with theme support and multiple variants
+ */
+
+import * as React from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { MenuProps, NavigationItem, NavigationGroup } from './types';
+
+// Simple icon components
+const ChevronDownIcon: 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="M19 9l-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>
+);
+
+const MagnifyingGlassIcon: 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+  </svg>
+);
+
+const FunnelIcon: 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="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
+  </svg>
+);
+
+export const Menu: React.FC<MenuProps> = ({
+  items = [],
+  groups,
+  variant = 'dropdown',
+  size = 'md',
+  // TODO: Implement orientation, trigger, showArrow, and fullWidth in future version
+  // orientation = 'horizontal',
+  // trigger = 'click',
+  placement = 'bottom',
+  offset = 8,
+  // showArrow = false,
+  // fullWidth = false,
+  disabled = false,
+  loading = false,
+  searchable = false,
+  onSearch,
+  filterable = false,
+  onFilter,
+  selectable = false,
+  multiSelect = false,
+  selectedItems = [],
+  onSelectionChange,
+  className = '',
+  'data-testid': testId = 'menu',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterValue, setFilterValue] = useState('');
+  const [internalSelectedItems, setInternalSelectedItems] = useState<string[]>(selectedItems || []);
+  // TODO: Implement group expansion functionality in future version
+  // const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
+  
+  const menuRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  // Use controlled or uncontrolled selected items
+  const currentSelectedItems = selectedItems !== undefined ? selectedItems : internalSelectedItems;
+
+  // Handle click outside to close menu
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node) &&
+          triggerRef.current && !triggerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle escape key to close menu
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const handleToggle = useCallback(() => {
+    if (disabled || loading) return;
+    setIsOpen(!isOpen);
+  }, [disabled, loading, isOpen]);
+
+  const handleItemClick = useCallback((item: NavigationItem) => {
+    if (item.disabled) return;
+
+    if (selectable) {
+      let newSelectedItems: string[];
+      
+      if (multiSelect) {
+        if (currentSelectedItems.includes(item.id)) {
+          newSelectedItems = currentSelectedItems.filter(id => id !== item.id);
+        } else {
+          newSelectedItems = [...currentSelectedItems, item.id];
+        }
+      } else {
+        newSelectedItems = [item.id];
+      }
+
+      if (selectedItems === undefined) {
+        setInternalSelectedItems(newSelectedItems);
+      }
+
+      if (onSelectionChange) {
+        onSelectionChange(newSelectedItems);
+      }
+    }
+
+    if (item.onClick) {
+      item.onClick();
+    }
+
+    // Close menu for single select or non-selectable menus
+    if (!multiSelect || !selectable) {
+      setIsOpen(false);
+    }
+  }, [selectable, multiSelect, currentSelectedItems, selectedItems, onSelectionChange]);
+
+  // TODO: Implement group toggle functionality in future version
+  // const handleGroupToggle = useCallback((groupId: string) => {
+  //   setExpandedGroups(prev => 
+  //     prev.includes(groupId) 
+  //       ? prev.filter(id => id !== groupId)
+  //       : [...prev, groupId]
+  //   );
+  // }, []);
+
+  const handleSearch = useCallback((query: string) => {
+    setSearchQuery(query);
+    if (onSearch) {
+      onSearch(query);
+    }
+  }, [onSearch]);
+
+  const handleFilter = useCallback((filter: string) => {
+    setFilterValue(filter);
+    if (onFilter) {
+      onFilter(filter);
+    }
+  }, [onFilter]);
+
+  // Filter items based on search and filter
+  const filteredItems = useMemo(() => {
+    let filtered = items;
+
+    if (searchQuery) {
+      filtered = filtered.filter(item => 
+        item.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.description?.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    if (filterValue) {
+      filtered = filtered.filter(item => 
+        item.label.toLowerCase().includes(filterValue.toLowerCase())
+      );
+    }
+
+    return filtered;
+  }, [items, searchQuery, filterValue]);
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'menu__trigger--sm';
+      case 'lg':
+        return 'menu__trigger--lg';
+      default: // md
+        return 'menu__trigger--md';
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'dropdown':
+        return 'menu__content--dropdown';
+      case 'context':
+        return 'menu__content--context';
+      case 'command':
+        return 'menu__content--command';
+      default: // default
+        return 'menu__content--default';
+    }
+  };
+
+  const getThemeClasses = () => {
+    return 'menu menu--stan-design';
+  };
+
+  const getItemClasses = (item: NavigationItem) => {
+    let classes = `menu__item ${getSizeClasses()}`;
+
+    if (item.disabled) {
+      classes += ' menu__item--disabled';
+    } else if (selectable && currentSelectedItems.includes(item.id)) {
+      classes += ' menu__item--selected';
+    } else {
+      classes += ' menu__item--default';
+    }
+
+    return classes;
+  };
+
+  const getPlacementClasses = () => {
+    switch (placement) {
+      case 'top':
+        return 'menu__content--placement-top';
+      case 'bottom':
+        return 'menu__content--placement-bottom';
+      case 'left':
+        return 'menu__content--placement-left';
+      case 'right':
+        return 'menu__content--placement-right';
+      default:
+        return 'menu__content--placement-bottom';
+    }
+  };
+
+  const renderMenuItem = (item: NavigationItem) => (
+    <button
+      key={item.id}
+      onClick={() => handleItemClick(item)}
+      disabled={item.disabled}
+      className={getItemClasses(item)}
+    >
+      <div className="menu__item-content">
+        {item.icon && <span className="menu__item-icon">{item.icon}</span>}
+        <div className="menu__item-text">
+          <div className="menu__item-label">{item.label}</div>
+          {item.description && (
+            <div className="menu__item-description">{item.description}</div>
+          )}
+        </div>
+      </div>
+      {item.badge && <span className="menu__item-badge">{item.badge}</span>}
+      {item.children && item.children.length > 0 && (
+        <ChevronRightIcon className="menu__item-arrow" />
+      )}
+    </button>
+  );
+
+  const renderMenuGroup = (group: NavigationGroup) => (
+    <div key={group.id} className="menu__group">
+      {group.title && (
+        <div className="menu__group-title">
+          {group.title}
+        </div>
+      )}
+      {group.items.map(renderMenuItem)}
+    </div>
+  );
+
+  return (
+    <div className={`menu__container ${getThemeClasses()}`} data-testid={testId}>
+      {/* Trigger Button */}
+      <button
+        ref={triggerRef}
+        onClick={handleToggle}
+        disabled={disabled || loading}
+        className={`menu__trigger ${getSizeClasses()} ${className}`}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        Menu
+        <ChevronDownIcon className="menu__trigger-icon" />
+      </button>
+
+      {/* Menu Dropdown */}
+      {isOpen && (
+        <div
+          ref={menuRef}
+          role="menu"
+          className={`menu__content ${getVariantClasses()} ${getPlacementClasses()}`}
+          style={{ marginTop: placement === 'bottom' ? offset : undefined }}
+        >
+          {/* Search Bar */}
+          {searchable && (
+            <div className="menu__search">
+              <div className="menu__search-container">
+                <MagnifyingGlassIcon className="menu__search-icon" />
+                <input
+                  type="text"
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => handleSearch(e.target.value)}
+                  className="menu__search-input"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Filter Bar */}
+          {filterable && (
+            <div className="menu__filter">
+              <div className="menu__filter-container">
+                <FunnelIcon className="menu__filter-icon" />
+                <select
+                  value={filterValue}
+                  onChange={(e) => handleFilter(e.target.value)}
+                  className="menu__filter-select"
+                >
+                  <option value="">All</option>
+                  <option value="featured">Featured</option>
+                  <option value="recent">Recent</option>
+                </select>
+              </div>
+            </div>
+          )}
+
+          {/* Menu Items */}
+          <div className="menu__items">
+            {groups ? groups.map(renderMenuGroup) : filteredItems.map(renderMenuItem)}
+          </div>
+
+          {/* Selection Actions */}
+          {selectable && multiSelect && currentSelectedItems.length > 0 && (
+            <div className="menu__selection-actions">
+              <div className="menu__selection-info">
+                <span className="menu__selection-count">
+                  {currentSelectedItems.length} selected
+                </span>
+                <button
+                  onClick={() => {
+                    const newSelectedItems: string[] = [];
+                    if (selectedItems === undefined) {
+                      setInternalSelectedItems(newSelectedItems);
+                    }
+                    if (onSelectionChange) {
+                      onSelectionChange(newSelectedItems);
+                    }
+                  }}
+                  className="menu__selection-clear"
+                >
+                  Clear
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Menu;