@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

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

@@ -0,0 +1,383 @@
+/**
+ * Sidebar Component
+ * Provides comprehensive sidebar functionality with theme support and multiple variants
+ */
+
+import * as React from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { SidebarProps, NavigationItem, NavigationGroup } from './types';
+
+// 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;

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

@@ -0,0 +1,303 @@
+/**
+ * Stepper Component
+ * Provides comprehensive stepper functionality with theme support and multiple variants
+ */
+
+import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { StepperProps, StepItem } from './types';
+
+// Simple icon components
+const ExclamationCircleIcon: 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+);
+
+export const Stepper: React.FC<StepperProps> = ({
+  steps,
+  currentStep = 0,
+  defaultCurrentStep = 0,
+  onStepChange,
+  variant = 'default',
+  size = 'md',
+  showStepNumbers = true,
+  showStepLabels = true,
+  showStepDescriptions = true,
+  showStepIcons = true,
+  allowStepClick = true,
+  allowStepNavigation = true,
+  showProgress = true,
+  // TODO: Implement step status display in future version
+  // showStepStatus = true,
+  onStepComplete,
+  onStepError,
+  onFinish,
+  onCancel,
+  className = '',
+  'data-testid': testId = 'stepper',
+}) => {
+  const [internalCurrentStep, setInternalCurrentStep] = useState<number>(
+    currentStep !== undefined ? currentStep : defaultCurrentStep
+  );
+
+  // Use controlled or uncontrolled current step
+  const currentStepIndex = currentStep !== undefined ? currentStep : internalCurrentStep;
+
+  const handleStepClick = useCallback((stepIndex: number) => {
+    if (!allowStepClick || !allowStepNavigation) return;
+    
+    const step = steps[stepIndex];
+    if (step.disabled) return;
+    
+    if (currentStep === undefined) {
+      setInternalCurrentStep(stepIndex);
+    }
+    
+    if (onStepChange) {
+      onStepChange(stepIndex);
+    }
+  }, [currentStep, onStepChange, allowStepClick, allowStepNavigation, steps]);
+
+  const handleStepComplete = useCallback(async (stepIndex: number) => {
+    const step = steps[stepIndex];
+    if (!step.validation) return;
+
+    try {
+      const isValid = await step.validation();
+      if (isValid) {
+        if (onStepComplete) {
+          onStepComplete(stepIndex);
+        }
+        // Move to next step if available
+        if (stepIndex < steps.length - 1) {
+          handleStepClick(stepIndex + 1);
+        } else if (onFinish) {
+          onFinish();
+        }
+      }
+    } catch (error) {
+      if (onStepError) {
+        onStepError(stepIndex);
+      }
+    }
+  }, [steps, onStepComplete, onStepError, onFinish, handleStepClick]);
+
+  const handleFinish = useCallback(() => {
+    if (onFinish) {
+      onFinish();
+    }
+  }, [onFinish]);
+
+  const handleCancel = useCallback(() => {
+    if (onCancel) {
+      onCancel();
+    }
+  }, [onCancel]);
+
+  // Calculate progress percentage
+  const progressPercentage = useMemo(() => {
+    return ((currentStepIndex + 1) / steps.length) * 100;
+  }, [currentStepIndex, steps.length]);
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'stepper--size-sm';
+      case 'lg':
+        return 'stepper--size-lg';
+      default: // md
+        return 'stepper--size-md';
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'vertical':
+        return 'stepper--vertical';
+      case 'horizontal':
+        return 'stepper--horizontal';
+      case 'wizard':
+        return 'stepper--wizard';
+      default:
+        return 'stepper--default';
+    }
+  };
+
+  const getThemeClasses = () => {
+    return 'stepper stepper--stan-design';
+  };
+
+  const getStepStatusIcon = (step: StepItem, stepIndex: number) => {
+    if (!showStepIcons) return null;
+
+    if (step.status === 'completed') {
+      return <CheckIcon className="stepper__step-icon stepper__step-icon--completed" />;
+    }
+
+    if (step.status === 'error') {
+      return <ExclamationCircleIcon className="stepper__step-icon stepper__step-icon--error" />;
+    }
+
+    if (step.status === 'warning') {
+      return <ExclamationTriangleIcon className="stepper__step-icon stepper__step-icon--warning" />;
+    }
+
+    if (stepIndex === currentStepIndex) {
+      return <div className="stepper__step-number stepper__step-number--current">
+        {stepIndex + 1}
+      </div>;
+    }
+
+    if (showStepNumbers) {
+      return <div className="stepper__step-number stepper__step-number--default">
+        {stepIndex + 1}
+      </div>;
+    }
+
+    return null;
+  };
+
+  const getStepClasses = (step: StepItem, stepIndex: number) => {
+    let classes = 'stepper__step';
+
+    if (step.disabled) {
+      classes += ' stepper__step--disabled';
+    } else if (stepIndex === currentStepIndex) {
+      classes += ' stepper__step--current';
+    } else if (step.status === 'completed') {
+      classes += ' stepper__step--completed';
+    } else if (step.status === 'error') {
+      classes += ' stepper__step--error';
+    } else if (step.status === 'warning') {
+      classes += ' stepper__step--warning';
+    } else {
+      classes += ' stepper__step--default';
+    }
+
+    return classes;
+  };
+
+  if (steps.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`stepper__container ${getThemeClasses()} ${getSizeClasses()} ${className}`} data-testid={testId}>
+      {/* Progress Bar */}
+      {showProgress && (
+        <div className="stepper__progress">
+          <div className="stepper__progress-header">
+            <span className="stepper__progress-label">Progress</span>
+            <span className="stepper__progress-percentage">{Math.round(progressPercentage)}%</span>
+          </div>
+          <div className="stepper__progress-track">
+            <div
+              className="stepper__progress-bar"
+              style={{
+                width: `${progressPercentage}%`
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Steps */}
+      <div className={`stepper__steps ${getVariantClasses()}`}>
+        {steps.map((step, stepIndex) => (
+          <div
+            key={step.id}
+            className={`stepper__step-container ${variant === 'vertical' ? 'stepper__step-container--vertical' : ''}`}
+          >
+            <div
+              className={`${getStepClasses(step, stepIndex)} ${variant === 'vertical' ? 'stepper__step--vertical' : ''}`}
+              onClick={() => handleStepClick(stepIndex)}
+            >
+              {getStepStatusIcon(step, stepIndex)}
+              
+              <div className={`stepper__step-content ${variant === 'vertical' ? 'stepper__step-content--vertical' : ''}`}>
+                {showStepLabels && (
+                  <div className="stepper__step-label">
+                    {step.label}
+                    {step.required && <span className="stepper__step-required">*</span>}
+                  </div>
+                )}
+
+                {showStepDescriptions && step.description && (
+                  <div className="stepper__step-description">
+                    {step.description}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Step Content for Wizard variant */}
+            {variant === 'wizard' && stepIndex === currentStepIndex && step.content && (
+              <div className="stepper__step-panel">
+                {step.content}
+
+                {/* Step Actions */}
+                {step.actions && (
+                  <div className="stepper__step-actions">
+                    {step.actions.map((action, actionIndex) => (
+                      <button
+                        key={actionIndex}
+                        onClick={action.onClick}
+                        disabled={action.disabled}
+                        className={`stepper__action stepper__action--${
+                          action.variant || 'default'
+                        }`}
+                      >
+                        {action.loading ? 'Loading...' : action.label}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Global Actions */}
+      <div className="stepper__navigation">
+        <button
+          onClick={handleCancel}
+          className="stepper__nav-button stepper__nav-button--cancel"
+        >
+          Cancel
+        </button>
+
+        <div className="stepper__nav-actions">
+          {currentStepIndex > 0 && (
+            <button
+              onClick={() => handleStepClick(currentStepIndex - 1)}
+              className="stepper__nav-button stepper__nav-button--previous"
+            >
+              Previous
+            </button>
+          )}
+
+          {currentStepIndex < steps.length - 1 && !steps.slice(currentStepIndex + 1).every(step => step.disabled) ? (
+            <button
+              onClick={() => handleStepComplete(currentStepIndex)}
+              className="stepper__nav-button stepper__nav-button--next"
+            >
+              Next
+            </button>
+          ) : (
+            <button
+              onClick={handleFinish}
+              className="stepper__nav-button stepper__nav-button--finish"
+            >
+              Finish
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Stepper;