@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.30 → 0.2.32

package/src/components/ui/navigation/user-menu-types.ts

@@ -0,0 +1,308 @@
+/**
+ * UserMenu Component Types
+ * Comprehensive type definitions for the UserMenu component
+ */
+
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button.js';
+
+// ============================================================================
+// CORE USER MENU TYPES
+// ============================================================================
+
+export interface UserMenuUser {
+  fullName?: string;
+  firstName?: string;
+  email?: string;
+  avatar?: string;
+}
+
+export interface UserMenuSubscription {
+  tier: 'free' | 'pro' | 'enterprise';
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface UserMenuItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  href?: string; // For navigation
+  onClick?: () => void; // For actions
+  disabled?: boolean;
+  variant?: 'default' | 'danger'; // For sign out styling
+  badge?: ReactNode;
+  description?: string;
+}
+
+export interface UserMenuGroup {
+  id: string;
+  title?: string; // Optional group title
+  divider?: boolean; // Show divider above group
+  items: UserMenuItem[];
+}
+
+// ============================================================================
+// MAIN COMPONENT PROPS
+// ============================================================================
+
+export interface UserMenuProps {
+  // User Information
+  user: UserMenuUser;
+
+  // Subscription/Plan Information
+  subscription?: UserMenuSubscription;
+
+  // Custom Trigger Support
+  trigger?: ReactNode; // Custom trigger element
+  triggerProps?: ButtonProps; // Default trigger customization
+
+  // Menu Configuration
+  groups: UserMenuGroup[];
+
+  // Header Configuration
+  showHeader?: boolean; // Show user header section
+  headerCustom?: ReactNode; // Custom header override
+
+  // Positioning & Behavior
+  placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+  offset?: number;
+  width?: number | string;
+  maxHeight?: number | string;
+
+  // Interaction Callbacks
+  onItemClick?: (item: UserMenuItem) => void;
+  onSignOut?: () => void;
+
+  // State Management
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+
+  // Styling
+  className?: string;
+  headerClassName?: string;
+  dropdownClassName?: string;
+
+  // Accessibility
+  'aria-label'?: string;
+  'data-testid'?: string;
+}
+
+// ============================================================================
+// COMPONENT STATE TYPES
+// ============================================================================
+
+export interface UserMenuState {
+  isOpen: boolean;
+  focusedIndex: number;
+  searchQuery: string;
+}
+
+export type UserMenuAction =
+  | { type: 'TOGGLE_MENU' }
+  | { type: 'OPEN_MENU' }
+  | { type: 'CLOSE_MENU' }
+  | { type: 'SET_FOCUSED_INDEX'; payload: number }
+  | { type: 'SET_SEARCH_QUERY'; payload: string }
+  | { type: 'RESET_FOCUS' };
+
+// ============================================================================
+// SUB-COMPONENT PROPS
+// ============================================================================
+
+export interface UserMenuTriggerProps {
+  user: UserMenuUser;
+  subscription?: UserMenuSubscription;
+  isOpen: boolean;
+  onToggle: () => void;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface UserMenuDropdownProps {
+  user: UserMenuUser;
+  subscription?: UserMenuSubscription;
+  groups: UserMenuGroup[];
+  showHeader?: boolean;
+  headerCustom?: ReactNode;
+  placement: string;
+  width?: number | string;
+  maxHeight?: number | string;
+  onItemClick?: (item: UserMenuItem) => void;
+  onClose: () => void;
+  className?: string;
+  headerClassName?: string;
+}
+
+export interface UserMenuHeaderProps {
+  user: UserMenuUser;
+  subscription?: UserMenuSubscription;
+  className?: string;
+  custom?: ReactNode;
+}
+
+export interface UserMenuSectionProps {
+  group: UserMenuGroup;
+  onItemClick?: (item: UserMenuItem) => void;
+  focusedIndex?: number;
+  sectionIndex: number;
+}
+
+export interface UserMenuItemProps {
+  item: UserMenuItem;
+  onItemClick?: (item: UserMenuItem) => void;
+  focused?: boolean;
+  itemIndex: number;
+}
+
+// ============================================================================
+// AVATAR COMPONENT TYPES
+// ============================================================================
+
+export interface UserAvatarProps {
+  user: UserMenuUser;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  fallbackClassName?: string;
+}
+
+// ============================================================================
+// SUBSCRIPTION BADGE TYPES
+// ============================================================================
+
+export interface SubscriptionBadgeProps {
+  subscription: UserMenuSubscription;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline';
+  showIcon?: boolean;
+  className?: string;
+}
+
+// ============================================================================
+// UTILITY TYPES
+// ============================================================================
+
+export interface UserMenuPlacement {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+  transform?: string;
+}
+
+export interface UserMenuDimensions {
+  width: number;
+  height: number;
+  triggerRect: DOMRect;
+  dropdownRect: DOMRect;
+  viewportWidth: number;
+  viewportHeight: number;
+}
+
+export interface UserMenuAccessibility {
+  role: string;
+  'aria-expanded': boolean;
+  'aria-haspopup': boolean;
+  'aria-label': string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  tabIndex: number;
+}
+
+// ============================================================================
+// ANIMATION TYPES
+// ============================================================================
+
+export interface UserMenuAnimationConfig {
+  enter: {
+    duration: number;
+    easing: string;
+    from: Record<string, any>;
+    to: Record<string, any>;
+  };
+  exit: {
+    duration: number;
+    easing: string;
+    from: Record<string, any>;
+    to: Record<string, any>;
+  };
+}
+
+// ============================================================================
+// RESPONSIVE TYPES
+// ============================================================================
+
+export interface UserMenuBreakpoints {
+  mobile: number;
+  tablet: number;
+  desktop: number;
+}
+
+export interface UserMenuResponsiveConfig {
+  mobile: Partial<UserMenuProps>;
+  tablet: Partial<UserMenuProps>;
+  desktop: Partial<UserMenuProps>;
+}
+
+// ============================================================================
+// TESTING TYPES
+// ============================================================================
+
+export interface UserMenuTestProps {
+  'data-testid'?: string;
+  'data-test-trigger'?: string;
+  'data-test-dropdown'?: string;
+  'data-test-header'?: string;
+  'data-test-section'?: string;
+  'data-test-item'?: string;
+}
+
+// ============================================================================
+// THEME INTEGRATION TYPES
+// ============================================================================
+
+export interface UserMenuThemeConfig {
+  colors: {
+    background: string;
+    border: string;
+    text: string;
+    textMuted: string;
+    hover: string;
+    focus: string;
+    danger: string;
+  };
+  spacing: {
+    padding: string;
+    gap: string;
+    offset: string;
+  };
+  typography: {
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+  };
+  shadows: {
+    dropdown: string;
+    focus: string;
+  };
+  transitions: {
+    duration: string;
+    easing: string;
+  };
+}
+
+// ============================================================================
+// EXPORT ALL TYPES
+// ============================================================================
+
+export type {
+  UserMenuUser as User,
+  UserMenuSubscription as Subscription,
+  UserMenuItem as MenuItem,
+  UserMenuGroup as MenuGroup,
+  UserMenuProps as Props,
+  UserMenuState as State,
+  UserMenuAction as Action,
+};

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

@@ -0,0 +1,354 @@
+/**
+ * UserMenu Component
+ * Comprehensive user menu with custom trigger, user header, and grouped menu items
+ */
+
+'use client'
+
+import * as React from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { UserMenuProps, UserMenuItem, UserMenuGroup } from './user-menu-types.js';
+import { Button } from '../button.js';
+import { UserAvatar } from './user-avatar.js';
+import { SubscriptionBadge } from './subscription-badge.js';
+
+// Icons
+const ChevronDownIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <polyline points="6,9 12,15 18,9"/>
+  </svg>
+);
+
+// Sub-components
+const UserMenuHeader: React.FC<{
+  user: UserMenuProps['user'];
+  subscription?: UserMenuProps['subscription'];
+  className?: string;
+  custom?: React.ReactNode;
+}> = ({ user, subscription, className = '', custom }) => {
+  if (custom) {
+    return <div className={`user-menu__header ${className}`}>{custom}</div>;
+  }
+
+  return (
+    <div className={`user-menu__header ${className}`}>
+      <div className="user-menu__header-avatar">
+        <UserAvatar user={user} size="lg" />
+      </div>
+      <div className="user-menu__header-info">
+        <div className="user-menu__header-name">
+          {user.fullName || user.firstName || 'User'}
+        </div>
+        {user.email && (
+          <div className="user-menu__header-email">
+            {user.email}
+          </div>
+        )}
+        {subscription && (
+          <div className="user-menu__header-subscription">
+            <SubscriptionBadge subscription={subscription} size="sm" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const UserMenuSection: React.FC<{
+  group: UserMenuGroup;
+  onItemClick?: (item: UserMenuItem) => void;
+  sectionIndex: number;
+}> = ({ group, onItemClick }) => {
+  const handleItemClick = useCallback((item: UserMenuItem) => {
+    if (item.disabled) return;
+
+    // Handle navigation or action
+    if (item.href && !item.onClick) {
+      // Pure navigation - let default behavior handle it
+      window.location.href = item.href;
+    } else if (item.onClick) {
+      // Function call
+      item.onClick();
+    }
+
+    // Call external handler
+    if (onItemClick) {
+      onItemClick(item);
+    }
+  }, [onItemClick]);
+
+  return (
+    <div className={`user-menu__section ${group.divider ? 'user-menu__section--bordered' : ''}`}>
+      {group.title && (
+        <div className="user-menu__section-title">
+          {group.title}
+        </div>
+      )}
+      <div className="user-menu__section-items">
+        {group.items.map((item) => {
+          const Element = item.href ? 'a' : 'button';
+          const elementProps = item.href ? { href: item.href } : { type: 'button' as const };
+
+          return (
+            <Element
+              key={item.id}
+              onClick={() => handleItemClick(item)}
+              disabled={item.disabled}
+              className={`user-menu__item ${item.variant === 'danger' ? 'user-menu__item--danger' : ''} ${item.disabled ? 'user-menu__item--disabled' : ''}`}
+              data-testid={`user-menu-item-${item.id}`}
+              {...elementProps}
+            >
+              <div className="user-menu__item-content">
+                {item.icon && (
+                  <span className="user-menu__item-icon">
+                    {item.icon}
+                  </span>
+                )}
+                <div className="user-menu__item-text">
+                  <span className="user-menu__item-label">
+                    {item.label}
+                  </span>
+                  {item.description && (
+                    <span className="user-menu__item-description">
+                      {item.description}
+                    </span>
+                  )}
+                </div>
+              </div>
+              {item.badge && (
+                <span className="user-menu__item-badge">
+                  {item.badge}
+                </span>
+              )}
+            </Element>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export const UserMenu: React.FC<UserMenuProps> = ({
+  user,
+  subscription,
+  trigger,
+  triggerProps,
+  groups,
+  showHeader = true,
+  headerCustom,
+  placement = 'bottom-right',
+  offset = 8,
+  width = 288,
+  maxHeight = 400,
+  onItemClick,
+  onSignOut,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className = '',
+  headerClassName = '',
+  dropdownClassName = '',
+  'aria-label': ariaLabel = 'User menu',
+  'data-testid': testId = 'user-menu'
+}) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  // const [focusedIndex, setFocusedIndex] = useState(-1);
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Use controlled or uncontrolled state
+  const isOpen = open !== undefined ? open : internalOpen;
+
+  const handleToggle = useCallback(() => {
+    const newOpen = !isOpen;
+
+    if (open === undefined) {
+      setInternalOpen(newOpen);
+    }
+
+    if (onOpenChange) {
+      onOpenChange(newOpen);
+    }
+
+    // Reset focus when opening
+    // if (newOpen) {
+    //   setFocusedIndex(-1);
+    // }
+  }, [isOpen, open, onOpenChange]);
+
+  const handleClose = useCallback(() => {
+    if (open === undefined) {
+      setInternalOpen(false);
+    }
+
+    if (onOpenChange) {
+      onOpenChange(false);
+    }
+
+    // Return focus to trigger
+    if (triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [open, onOpenChange]);
+
+  const handleItemClick = useCallback((item: UserMenuItem) => {
+    // Handle sign out specially
+    if (item.variant === 'danger' && onSignOut) {
+      onSignOut();
+    }
+
+    // Call external handler
+    if (onItemClick) {
+      onItemClick(item);
+    }
+
+    // Close menu after item click
+    handleClose();
+  }, [onItemClick, onSignOut, handleClose]);
+
+  // Click outside handler
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        isOpen &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node)
+      ) {
+        handleClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, handleClose]);
+
+  // Escape key handler
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        handleClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, handleClose]);
+
+  // Get placement classes
+  const getPlacementClasses = () => {
+    switch (placement) {
+      case 'bottom-left':
+        return 'user-menu__dropdown--bottom-left';
+      case 'bottom-right':
+        return 'user-menu__dropdown--bottom-right';
+      case 'top-left':
+        return 'user-menu__dropdown--top-left';
+      case 'top-right':
+        return 'user-menu__dropdown--top-right';
+      default:
+        return 'user-menu__dropdown--bottom-right';
+    }
+  };
+
+  // Default trigger
+  const defaultTrigger = (
+    <Button
+      ref={triggerRef}
+      variant="ghost"
+      className="user-menu__trigger-default"
+      {...triggerProps}
+    >
+      <UserAvatar user={user} size="sm" />
+      <span className="user-menu__trigger-name">
+        {user.firstName || user.fullName || 'Account'}
+      </span>
+      {subscription && (
+        <SubscriptionBadge subscription={subscription} size="sm" />
+      )}
+      <ChevronDownIcon />
+    </Button>
+  );
+
+  // Custom trigger with added props
+  const customTrigger = trigger ? (
+    React.cloneElement(trigger as React.ReactElement, {
+      ref: triggerRef,
+      onClick: handleToggle,
+      'aria-expanded': isOpen,
+      'aria-haspopup': 'true',
+      'aria-label': ariaLabel,
+      className: `${(trigger as React.ReactElement).props.className || ''} user-menu__trigger`.trim()
+    })
+  ) : null;
+
+  return (
+    <div className={`user-menu ${className}`} data-testid={testId}>
+      {/* Trigger */}
+      {customTrigger || (
+        <button
+          ref={triggerRef}
+          onClick={handleToggle}
+          className="user-menu__trigger"
+          aria-expanded={isOpen}
+          aria-haspopup="true"
+          aria-label={ariaLabel}
+        >
+          {defaultTrigger}
+        </button>
+      )}
+
+      {/* Dropdown */}
+      {isOpen && (
+        <div
+          ref={dropdownRef}
+          className={`user-menu__dropdown ${getPlacementClasses()} ${dropdownClassName}`}
+          role="menu"
+          aria-label={ariaLabel}
+          style={{
+            width: typeof width === 'number' ? `${width}px` : width,
+            maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+            marginTop: placement.includes('bottom') ? `${offset}px` : undefined,
+            marginBottom: placement.includes('top') ? `${offset}px` : undefined
+          }}
+        >
+          {/* User Header */}
+          {showHeader && (
+            <UserMenuHeader
+              user={user}
+              subscription={subscription}
+              className={headerClassName}
+              custom={headerCustom}
+            />
+          )}
+
+          {/* Menu Sections */}
+          <div className="user-menu__sections">
+            {groups.map((group, sectionIndex) => (
+              <UserMenuSection
+                key={group.id}
+                group={group}
+                onItemClick={handleItemClick}
+                sectionIndex={sectionIndex}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserMenu;

package/src/index.ts

@@ -3,7 +3,7 @@
  * Production-ready design system package with stan-design theme
  *
  * Auto-generated exports for:
- * - 85 UI components
+ * - 89 UI components
  * - 67 custom hooks
  * - 6 utility functions
  * - 29 theme system components
@@ -59,7 +59,11 @@ export { Menu } from './components/ui/navigation/menu.js';
 export { Pagination } from './components/ui/navigation/pagination.js';
 export { Sidebar } from './components/ui/navigation/sidebar.js';
 export { Stepper } from './components/ui/navigation/stepper.js';
+export { SubscriptionBadge } from './components/ui/navigation/subscription-badge.js';
 export { Tabs } from './components/ui/navigation/tabs.js';
+export { UserAvatar } from './components/ui/navigation/user-avatar.js';
+export { UserMenuExamples } from './components/ui/navigation/user-menu-examples.js';
+export { UserMenu } from './components/ui/navigation/user-menu.js';
 export { Chart } from './components/ui/data-display/chart.js';
 export { DataGridSimple } from './components/ui/data-display/data-grid-simple.js';
 export { DataGrid } from './components/ui/data-display/data-grid.js';