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

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

@@ -0,0 +1,205 @@
+/**
+ * Tabs Component
+ * Provides comprehensive tab functionality with theme support and multiple variants
+ */
+
+import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { TabsProps, TabItem } from './types';
+
+// Simple icon components
+const PlusIcon: 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 4v16m8-8H4" />
+  </svg>
+);
+
+export const Tabs: React.FC<TabsProps> = ({
+  tabs,
+  activeTab,
+  defaultActiveTab,
+  onTabChange,
+  variant = 'default',
+  size = 'md',
+  orientation = 'horizontal',
+  fullWidth = false,
+  centered = false,
+  disabled = false,
+  loading = false,
+  closable = false,
+  onTabClose,
+  addable = false,
+  onTabAdd,
+  // TODO: Implement draggable functionality in future version
+  // draggable = false,
+  // onTabsReorder,
+  className = '',
+  'data-testid': testId = 'tabs',
+}) => {
+  const [internalActiveTab, setInternalActiveTab] = useState<string>(
+    activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id : '')
+  );
+
+  // Use controlled or uncontrolled active tab
+  const currentActiveTab = activeTab !== undefined ? activeTab : internalActiveTab;
+
+  const handleTabChange = useCallback((tabId: string) => {
+    if (disabled || loading) return;
+    
+    if (activeTab === undefined) {
+      setInternalActiveTab(tabId);
+    }
+    
+    if (onTabChange) {
+      onTabChange(tabId);
+    }
+  }, [activeTab, onTabChange, disabled, loading]);
+
+  const handleTabClose = useCallback((tabId: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (onTabClose) {
+      onTabClose(tabId);
+    }
+  }, [onTabClose]);
+
+  const handleTabAdd = useCallback(() => {
+    if (onTabAdd) {
+      onTabAdd();
+    }
+  }, [onTabAdd]);
+
+  // Memoize current tab content
+  const currentTabContent = useMemo(() => {
+    return tabs.find(tab => tab.id === currentActiveTab)?.content || null;
+  }, [tabs, currentActiveTab]);
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'tabs__item--small';
+      case 'lg':
+        return 'tabs__item--large';
+      default: // md
+        return 'tabs__item--medium';
+    }
+  };
+
+  const getVariantClasses = (isActive: boolean, isDisabled: boolean) => {
+    if (isDisabled) {
+      return 'tabs__item--disabled';
+    }
+
+    switch (variant) {
+      case 'pills':
+        return isActive ? 'tabs__item--pills tabs__item--active' : 'tabs__item--pills';
+      case 'underline':
+        return isActive ? 'tabs__item--underline tabs__item--active' : 'tabs__item--underline';
+      case 'cards':
+        return isActive ? 'tabs__item--cards tabs__item--active' : 'tabs__item--cards';
+      case 'minimal':
+        return isActive ? 'tabs__item--minimal tabs__item--active' : 'tabs__item--minimal';
+      default: // default
+        return isActive ? 'tabs__item--default tabs__item--active' : 'tabs__item--default';
+    }
+  };
+
+    const getTabListClasses = () => {
+    const baseClasses = 'tabs__list tabs__list--semantic';
+    
+    if (orientation === 'vertical') {
+      return `${baseClasses} tabs__list--vertical`;
+    }
+    
+    if (fullWidth) {
+      return `${baseClasses} tabs__list--full-width`;
+    }
+    
+    if (centered) {
+      return `${baseClasses} tabs__list--centered`;
+    }
+    
+    return baseClasses;
+  };
+
+  const getTabClasses = (tab: TabItem) => {
+    const isActive = tab.id === currentActiveTab;
+    const isDisabled = tab.disabled || disabled;
+    
+    const baseClasses = `tabs__item ${getSizeClasses()} ${getVariantClasses(isActive, isDisabled)}`;
+    
+    if (orientation === 'vertical') {
+      return `${baseClasses} tabs__item--vertical`;
+    }
+
+    if (fullWidth) {
+      return `${baseClasses} tabs__item--full-width`;
+    }
+
+    return baseClasses;
+  };
+
+  if (tabs.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`tabs ${orientation === 'vertical' ? 'tabs--vertical' : ''} ${className}`} data-testid={testId}>
+      {/* Tab List */}
+      <div className={getTabListClasses()}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => handleTabChange(tab.id)}
+            disabled={tab.disabled || disabled}
+            className={getTabClasses(tab)}
+            aria-selected={tab.id === currentActiveTab}
+            aria-controls={`panel-${tab.id}`}
+            role="tab"
+          >
+            {tab.icon && <span className="tabs__item-icon">{tab.icon}</span>}
+            <span className="tabs__item-label">{tab.label}</span>
+            {tab.badge && <span className="tabs__item-badge">{tab.badge}</span>}
+            {closable && tab.closable && (
+                              <button
+                  onClick={(e) => handleTabClose(tab.id, e)}
+                  className="tabs__close-button"
+                  aria-label={`Close ${tab.label} tab`}
+                >
+                  <XMarkIcon className="tabs__close-icon" />
+                </button>
+            )}
+          </button>
+        ))}
+        
+        {addable && (
+          <button
+            onClick={handleTabAdd}
+            disabled={disabled || loading}
+            className={`tabs__add-button ${getSizeClasses()}`}
+            aria-label="Add new tab"
+          >
+            <PlusIcon className="tabs__add-icon" />
+          </button>
+        )}
+      </div>
+
+      {/* Tab Panels */}
+      <div
+        className={`tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' : ''}`}
+        role="tabpanel"
+        aria-labelledby={`tab-${currentActiveTab}`}
+      >
+        {loading ? (
+          <div className="tabs__loading">
+            <div className="tabs__loading-spinner"></div>
+          </div>
+        ) : (
+          currentTabContent
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;

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

@@ -0,0 +1,299 @@
+/**
+ * Advanced Navigation Components - Type Definitions
+ * Provides comprehensive type definitions for all navigation components
+ */
+
+import { ReactNode } from 'react';
+
+// ============================================================================
+// COMMON NAVIGATION TYPES
+// ============================================================================
+
+export interface NavigationBaseProps {
+  className?: string;
+  'data-testid'?: string;
+  theme?: 'stan-design' | 'enterprise' | 'harvey';
+}
+
+export interface NavigationItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  active?: boolean;
+  children?: NavigationItem[];
+  onClick?: () => void;
+  badge?: ReactNode;
+  description?: string;
+}
+
+export interface NavigationGroup {
+  id: string;
+  title?: string;
+  items: NavigationItem[];
+  divider?: boolean;
+}
+
+// ============================================================================
+// BREADCRUMB COMPONENT TYPES
+// ============================================================================
+
+export interface BreadcrumbProps extends NavigationBaseProps {
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+  maxItems?: number;
+  showHome?: boolean;
+  homeIcon?: ReactNode;
+  onItemClick?: (item: BreadcrumbItem) => void;
+  truncate?: boolean;
+  responsive?: boolean;
+}
+
+export interface BreadcrumbItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+// ============================================================================
+// PAGINATION COMPONENT TYPES
+// ============================================================================
+
+export interface PaginationProps extends NavigationBaseProps {
+  currentPage: number;
+  totalPages: number;
+  totalItems?: number;
+  itemsPerPage?: number;
+  showFirstLast?: boolean;
+  showPrevNext?: boolean;
+  showPageNumbers?: boolean;
+  maxPageNumbers?: number;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outlined' | 'minimal';
+  onPageChange: (page: number) => void;
+  onItemsPerPageChange?: (itemsPerPage: number) => void;
+  itemsPerPageOptions?: number[];
+  showItemsPerPage?: boolean;
+  showTotal?: boolean;
+  totalLabel?: string;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export interface PaginationItem {
+  type: 'page' | 'ellipsis' | 'previous' | 'next' | 'first' | 'last';
+  page?: number;
+  disabled?: boolean;
+  active?: boolean;
+  label: string;
+  onClick?: () => void;
+}
+
+// ============================================================================
+// TABS COMPONENT TYPES
+// ============================================================================
+
+export interface TabsProps extends NavigationBaseProps {
+  tabs: TabItem[];
+  activeTab?: string;
+  defaultActiveTab?: string;
+  onTabChange?: (tabId: string) => void;
+  variant?: 'default' | 'pills' | 'underline' | 'cards' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  orientation?: 'horizontal' | 'vertical';
+  fullWidth?: boolean;
+  centered?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  closable?: boolean;
+  onTabClose?: (tabId: string) => void;
+  addable?: boolean;
+  onTabAdd?: () => void;
+  draggable?: boolean;
+  onTabsReorder?: (tabs: TabItem[]) => void;
+}
+
+export interface TabItem {
+  id: string;
+  label: string;
+  content: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+  closable?: boolean;
+  badge?: ReactNode;
+  description?: string;
+}
+
+// ============================================================================
+// STEPPER COMPONENT TYPES
+// ============================================================================
+
+export interface StepperProps extends NavigationBaseProps {
+  steps: StepItem[];
+  currentStep?: number;
+  defaultCurrentStep?: number;
+  onStepChange?: (stepIndex: number) => void;
+  variant?: 'default' | 'vertical' | 'horizontal' | 'wizard';
+  size?: 'sm' | 'md' | 'lg';
+  showStepNumbers?: boolean;
+  showStepLabels?: boolean;
+  showStepDescriptions?: boolean;
+  showStepIcons?: boolean;
+  allowStepClick?: boolean;
+  allowStepNavigation?: boolean;
+  showProgress?: boolean;
+  showStepStatus?: boolean;
+  onStepComplete?: (stepIndex: number) => void;
+  onStepError?: (stepIndex: number) => void;
+  onFinish?: () => void;
+  onCancel?: () => void;
+}
+
+export interface StepItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  status?: 'pending' | 'active' | 'completed' | 'error' | 'warning';
+  disabled?: boolean;
+  required?: boolean;
+  validation?: () => boolean | Promise<boolean>;
+  content?: ReactNode;
+  actions?: StepAction[];
+}
+
+export interface StepAction {
+  label: string;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  onClick: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+// ============================================================================
+// MENU COMPONENT TYPES
+// ============================================================================
+
+export interface MenuProps extends NavigationBaseProps {
+  items: NavigationItem[];
+  groups?: NavigationGroup[];
+  variant?: 'default' | 'dropdown' | 'context' | 'command';
+  size?: 'sm' | 'md' | 'lg';
+  orientation?: 'horizontal' | 'vertical';
+  trigger?: 'click' | 'hover' | 'focus';
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  offset?: number;
+  showArrow?: boolean;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  searchable?: boolean;
+  onSearch?: (query: string) => void;
+  filterable?: boolean;
+  onFilter?: (filter: string) => void;
+  selectable?: boolean;
+  multiSelect?: boolean;
+  selectedItems?: string[];
+  onSelectionChange?: (selectedItems: string[]) => void;
+}
+
+// ============================================================================
+// SIDEBAR COMPONENT TYPES
+// ============================================================================
+
+export interface SidebarProps extends NavigationBaseProps {
+  items: NavigationItem[];
+  groups?: NavigationGroup[];
+  variant?: 'default' | 'collapsible' | 'overlay' | 'drawer';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  position?: 'left' | 'right';
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapseChange?: (collapsed: boolean) => void;
+  collapsible?: boolean;
+  showToggle?: boolean;
+  toggleIcon?: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  overlay?: boolean;
+  overlayCloseOnClick?: boolean;
+  overlayCloseOnEscape?: boolean;
+  overlayCloseOnOutsideClick?: boolean;
+  responsive?: boolean;
+  breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
+  onItemClick?: (item: NavigationItem) => void;
+  onGroupToggle?: (groupId: string, expanded: boolean) => void;
+  expandedGroups?: string[];
+  defaultExpandedGroups?: string[];
+  showGroupIcons?: boolean;
+  showItemIcons?: boolean;
+  showItemBadges?: boolean;
+  showItemDescriptions?: boolean;
+  sticky?: boolean;
+  zIndex?: number;
+}
+
+// ============================================================================
+// NAVIGATION STATE TYPES
+// ============================================================================
+
+export interface NavigationState {
+  activeItem?: string;
+  expandedGroups: string[];
+  collapsed: boolean;
+  searchQuery: string;
+  filterValue: string;
+  selectedItems: string[];
+}
+
+export interface NavigationContextValue {
+  state: NavigationState;
+  dispatch: React.Dispatch<NavigationAction>;
+  theme: string;
+}
+
+export type NavigationAction =
+  | { type: 'SET_ACTIVE_ITEM'; payload: string }
+  | { type: 'TOGGLE_GROUP'; payload: string }
+  | { type: 'SET_COLLAPSED'; payload: boolean }
+  | { type: 'SET_SEARCH_QUERY'; payload: string }
+  | { type: 'SET_FILTER_VALUE'; payload: string }
+  | { type: 'SET_SELECTED_ITEMS'; payload: string[] }
+  | { type: 'RESET_STATE' };
+
+// ============================================================================
+// NAVIGATION UTILITY TYPES
+// ============================================================================
+
+export interface NavigationBreakpoint {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+}
+
+export interface NavigationSpacing {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+}
+
+export interface NavigationAnimation {
+  duration: string;
+  easing: string;
+  delay?: string;
+}
+
+export interface NavigationAccessibility {
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
+  role?: string;
+  tabIndex?: number;
+}

package/src/components/ui/overlay/backdrop.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+export interface BackdropProps {
+  isVisible: boolean;
+  onClick?: () => void;
+  className?: string;
+  blur?: boolean;
+  opacity?: number;
+  zIndex?: number;
+  children?: React.ReactNode;
+  theme?: 'light' | 'dark' | 'primary' | 'success' | 'warning' | 'error';
+  animation?: boolean;
+}
+
+export const Backdrop: React.FC<BackdropProps> = ({
+  isVisible,
+  onClick,
+  className = '',
+  blur = false,
+  opacity = 0.5,
+  zIndex = 1000,
+  children,
+  theme = 'dark',
+  animation = true
+}) => {
+  if (!isVisible) {
+    return null;
+  }
+
+  const handleClick = (event: React.MouseEvent) => {
+    // Only trigger onClick if clicking directly on the backdrop
+    if (event.target === event.currentTarget && onClick) {
+      onClick();
+    }
+  };
+
+  // Convert opacity to nearest 10% for CSS class
+  const getOpacityClass = () => {
+    const rounded = Math.round(opacity * 10) * 10;
+    return `backdrop__container--opacity-${rounded}`;
+  };
+
+  const getZIndexClass = () => {
+    if (zIndex >= 1040) return 'backdrop__container--z-toast';
+    if (zIndex >= 1030) return 'backdrop__container--z-tooltip';
+    if (zIndex >= 1020) return 'backdrop__container--z-popover';
+    if (zIndex >= 1010) return 'backdrop__container--z-dropdown';
+    return 'backdrop__container--z-modal';
+  };
+
+  const containerClasses = [
+    'backdrop__container',
+    blur ? 'backdrop__container--blur' : '',
+    theme ? `backdrop__container--theme-${theme}` : '',
+    getOpacityClass(),
+    getZIndexClass(),
+    animation ? 'backdrop__container--enter' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={containerClasses}
+      style={{
+        '--backdrop-z-index': zIndex,
+        '--backdrop-opacity': opacity
+      } as React.CSSProperties}
+      onClick={handleClick}
+      role="presentation"
+      aria-hidden="true"
+    >
+      {children && (
+        <div className="backdrop__content">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Backdrop;