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

package/src/components/ui/overlay/focus-manager.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+
+export interface FocusManagerProps {
+  children: React.ReactNode;
+  isActive: boolean;
+  onFocusChange?: (focused: boolean) => void;
+  trapFocus?: boolean;
+  restoreFocus?: boolean;
+  initialFocus?: React.RefObject<HTMLElement>;
+  className?: string;
+}
+
+export const FocusManager: React.FC<FocusManagerProps> = ({
+  children,
+  isActive,
+  onFocusChange,
+  trapFocus = true,
+  restoreFocus = true,
+  initialFocus,
+  className = ''
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+  const focusableElements = useRef<HTMLElement[]>([]);
+
+  // Get all focusable elements within the container
+  const getFocusableElements = useCallback(() => {
+    if (!containerRef.current) return [];
+    
+    const selector = [
+      'button:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      'textarea:not([disabled])',
+      'a[href]',
+      '[tabindex]:not([tabindex="-1"])',
+      '[contenteditable="true"]'
+    ].join(', ');
+    
+    return Array.from(containerRef.current.querySelectorAll(selector)) as HTMLElement[];
+  }, []);
+
+  // Store the previously focused element
+  useEffect(() => {
+    if (isActive && restoreFocus) {
+      previousActiveElement.current = document.activeElement as HTMLElement;
+    }
+  }, [isActive, restoreFocus]);
+
+  // Focus management when overlay becomes active
+  useEffect(() => {
+    if (!isActive) return;
+
+    // Get focusable elements
+    focusableElements.current = getFocusableElements();
+    
+    if (focusableElements.current.length === 0) return;
+
+    // Set initial focus
+    if (initialFocus?.current) {
+      initialFocus.current.focus();
+    } else {
+      // Focus the first focusable element
+      focusableElements.current[0].focus();
+    }
+
+    onFocusChange?.(true);
+  }, [isActive, initialFocus, onFocusChange, getFocusableElements]);
+
+  // Restore focus when overlay becomes inactive
+  useEffect(() => {
+    if (!isActive && restoreFocus && previousActiveElement.current) {
+      // Use setTimeout to ensure the overlay is fully removed
+      setTimeout(() => {
+        if (previousActiveElement.current && document.contains(previousActiveElement.current)) {
+          previousActiveElement.current.focus();
+        }
+      }, 0);
+      
+      onFocusChange?.(false);
+    }
+  }, [isActive, restoreFocus, onFocusChange]);
+
+  // Handle keyboard navigation for focus trapping
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (!isActive || !trapFocus || focusableElements.current.length === 0) return;
+
+    const { key, shiftKey } = event;
+    
+    if (key === 'Tab') {
+      event.preventDefault();
+      
+      const currentIndex = focusableElements.current.findIndex(
+        el => el === document.activeElement
+      );
+      
+      let nextIndex: number;
+      
+      if (shiftKey) {
+        // Shift + Tab: move backward
+        nextIndex = currentIndex <= 0 
+          ? focusableElements.current.length - 1 
+          : currentIndex - 1;
+      } else {
+        // Tab: move forward
+        nextIndex = currentIndex >= focusableElements.current.length - 1 
+          ? 0 
+          : currentIndex + 1;
+      }
+      
+      focusableElements.current[nextIndex]?.focus();
+    }
+  }, [isActive, trapFocus]);
+
+  // Add/remove keyboard event listeners
+  useEffect(() => {
+    if (isActive && trapFocus) {
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isActive, trapFocus, handleKeyDown]);
+
+  // Update focusable elements when children change
+  useEffect(() => {
+    if (isActive) {
+      focusableElements.current = getFocusableElements();
+    }
+  }, [isActive, getFocusableElements]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`focus-manager ${className}`}
+      tabIndex={-1} // Make container focusable for focus management
+    >
+      {children}
+    </div>
+  );
+};
+
+export default FocusManager;

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

@@ -0,0 +1,36 @@
+// Overlay Architecture Components
+export { Portal } from './portal';
+export { OverlayProvider, OverlayManager, useOverlayManager } from './overlay-manager';
+export { FocusManager } from './focus-manager';
+export { Backdrop } from './backdrop';
+
+// Overlay Components
+export { Modal, ModalHeader, ModalBody, ModalFooter } from './modal';
+export { Tooltip, TooltipContent } from './tooltip';
+export { Popover, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter } from './popover';
+
+// Types
+export type {
+  PortalProps,
+  OverlayManagerProps,
+  OverlayState,
+  OverlayAction,
+  FocusManagerProps,
+  BackdropProps
+} from './types';
+
+// Re-export types from the main types file
+export type {
+  OverlayBaseProps,
+  ModalProps,
+  ModalHeaderProps,
+  ModalBodyProps,
+  ModalFooterProps,
+  TooltipProps,
+  TooltipContentProps,
+  PopoverProps,
+  PopoverContentProps,
+  PopoverHeaderProps,
+  PopoverBodyProps,
+  PopoverFooterProps
+} from './types';

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

@@ -0,0 +1,270 @@
+import React, { useEffect, useRef, useId } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { Portal } from './portal';
+import { Backdrop } from './backdrop';
+import { FocusManager } from './focus-manager';
+import { useOverlayManager } from './overlay-manager';
+import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './types';
+
+// SVG Icons
+const XMarkIcon: React.FC<{ className?: string }> = ({ className = 'w-6 h-6' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+// Default color fallbacks
+const getDefaultColors = () => ({
+  surface: { background: '#ffffff', surface: '#f9fafb', border: '#e5e7eb', divider: '#e5e7eb' },
+  text: { primary: '#111827', secondary: '#6b7280', muted: '#9ca3af', inverse: '#ffffff' },
+  interactive: { hover: '#f3f4f6', active: '#e5e7eb', focus: '#3b82f6', disabled: '#d1d5db' },
+  primary: { 500: '#3b82f6', 600: '#2563eb' },
+  semantic: { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }
+});
+
+// Modal Header Component
+export const ModalHeader: React.FC<ModalHeaderProps> = ({
+  title,
+  subtitle,
+  onClose,
+  showCloseButton = true,
+  closeButtonLabel = 'Close',
+  className = '',
+  borderless = false,
+  noPadding = false,
+  children
+}) => {
+  const headerClasses = [
+    'modal__header',
+    borderless ? 'modal__header--borderless' : '',
+    noPadding ? 'modal__header--no-padding' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={headerClasses}>
+      <div>
+        {title && (
+          <h2 className="modal__title">
+            {title}
+          </h2>
+        )}
+        {subtitle && (
+          <p className="modal__subtitle">
+            {subtitle}
+          </p>
+        )}
+        {children}
+      </div>
+
+      {showCloseButton && onClose && (
+        <button
+          type="button"
+          className="modal__close"
+          onClick={onClose}
+          aria-label={closeButtonLabel}
+        >
+          <XMarkIcon />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Modal Body Component
+export const ModalBody: React.FC<ModalBodyProps> = ({
+  children,
+  className = '',
+  padding = 'md',
+  scrollable = true,
+  maxHeight = '70vh'
+}) => {
+  const bodyClasses = [
+    'modal__body',
+    padding === 'none' ? 'modal__body--no-padding' : '',
+    padding === 'sm' ? 'modal__body--compact' : '',
+    padding === 'lg' ? 'modal__body--spacious' : '',
+    scrollable ? 'modal__body--scrollable' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={bodyClasses}
+      style={{ maxHeight: scrollable ? maxHeight : undefined }}
+    >
+      {children}
+    </div>
+  );
+};
+
+// Modal Footer Component
+export const ModalFooter: React.FC<ModalFooterProps> = ({
+  children,
+  className = '',
+  justify = 'end',
+  padding = 'md',
+  borderTop = true
+}) => {
+  const footerClasses = [
+    'modal__footer',
+    !borderTop ? 'modal__footer--borderless' : '',
+    padding === 'none' ? 'modal__footer--no-padding' : '',
+    justify === 'start' ? 'modal__footer--start' : '',
+    justify === 'center' ? 'modal__footer--center' : '',
+    justify === 'between' ? 'modal__footer--space-between' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={footerClasses}>
+      {children}
+    </div>
+  );
+};
+
+// Main Modal Component
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = 'md',
+  variant = 'default',
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  showBackdrop = true,
+  backdropBlur = false,
+  backdropOpacity = 0.5,
+  trapFocus = true,
+  restoreFocus = true,
+  initialFocus,
+  zIndex = 1000,
+  animation = 'fade',
+  className = '',
+  theme = 'stan-design',
+  loading = false
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+  
+  const modalId = useId();
+  const modalRef = useRef<HTMLDivElement>(null);
+  const { addOverlay, removeOverlay, getTopZIndex } = useOverlayManager();
+
+  // Modal container classes
+  const getContainerClasses = () => {
+    const classes = [
+      'modal__container',
+      size ? `modal__container--size-${size}` : '',
+      variant ? `modal__container--variant-${variant}` : '',
+      loading ? 'modal__container--loading' : '',
+      className
+    ];
+
+    // Add animation class
+    if (animation !== 'none' && isOpen) {
+      classes.push(`modal__container--${animation}-enter`);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  };
+
+  // Handle escape key
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+
+  // Manage overlay registration
+  useEffect(() => {
+    if (isOpen) {
+      const currentZIndex = zIndex || getTopZIndex();
+      addOverlay(modalId, currentZIndex);
+      
+      return () => {
+        removeOverlay(modalId);
+      };
+    }
+  }, [isOpen, modalId, addOverlay, removeOverlay, zIndex, getTopZIndex]);
+
+  // Handle backdrop click
+  const handleBackdropClick = () => {
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const modalStyle: React.CSSProperties = {
+    backgroundColor: colors.surface.background,
+    borderColor: colors.surface.border,
+    color: colors.text.primary,
+    zIndex: zIndex || getTopZIndex()
+  };
+
+  return (
+    <Portal>
+      {showBackdrop && (
+        <Backdrop
+          isVisible={isOpen}
+          onClick={handleBackdropClick}
+          blur={backdropBlur}
+          opacity={backdropOpacity}
+          zIndex={(zIndex || getTopZIndex()) - 1}
+        />
+      )}
+
+      <div className="modal__overlay" style={{ zIndex: zIndex || getTopZIndex() }}>
+        <FocusManager
+          isActive={isOpen}
+          trapFocus={trapFocus}
+          restoreFocus={restoreFocus}
+          initialFocus={initialFocus}
+        >
+          <div
+            ref={modalRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? `${modalId}-title` : undefined}
+            className={getContainerClasses()}
+            style={modalStyle}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Render children or default layout */}
+            {React.Children.count(children) > 0 ? (
+              children
+            ) : (
+              <>
+                {title && (
+                  <ModalHeader
+                    title={title}
+                    onClose={onClose}
+                  />
+                )}
+                <ModalBody>
+                  {/* Default empty content */}
+                  <p>Modal content goes here...</p>
+                </ModalBody>
+              </>
+            )}
+          </div>
+        </FocusManager>
+      </div>
+    </Portal>
+  );
+};
+
+export default Modal;

package/src/components/ui/overlay/overlay-manager.tsx

@@ -0,0 +1,110 @@
+import React, { createContext, useContext, useReducer, useCallback, ReactNode } from 'react';
+import { OverlayManagerProps, OverlayState, OverlayAction } from './types';
+
+// Overlay context for managing global overlay state
+interface OverlayContextType {
+  overlays: OverlayState[];
+  addOverlay: (id: string, zIndex: number) => void;
+  removeOverlay: (id: string) => void;
+  getTopZIndex: () => number;
+  isOverlayActive: (id: string) => boolean;
+}
+
+const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
+
+// Custom hook to use overlay context
+export const useOverlayManager = () => {
+  const context = useContext(OverlayContext);
+  if (!context) {
+    throw new Error('useOverlayManager must be used within an OverlayProvider');
+  }
+  return context;
+};
+
+// Overlay reducer for state management
+const overlayReducer = (state: OverlayState[], action: OverlayAction): OverlayState[] => {
+  switch (action.type) {
+    case 'ADD_OVERLAY':
+      return [...state, { id: action.payload.id, zIndex: action.payload.zIndex || 1000 }];
+    
+    case 'REMOVE_OVERLAY':
+      return state.filter(overlay => overlay.id !== action.payload.id);
+    
+    case 'UPDATE_Z_INDEX':
+      return state.map(overlay =>
+        overlay.id === action.payload.id
+          ? { ...overlay, zIndex: action.payload.zIndex || overlay.zIndex }
+          : overlay
+      );
+    
+    default:
+      return state;
+  }
+};
+
+// Overlay provider component
+export const OverlayProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [overlays, dispatch] = useReducer(overlayReducer, []);
+
+  const addOverlay = useCallback((id: string, zIndex: number) => {
+    dispatch({ type: 'ADD_OVERLAY', payload: { id, zIndex } });
+  }, []);
+
+  const removeOverlay = useCallback((id: string) => {
+    dispatch({ type: 'REMOVE_OVERLAY', payload: { id } });
+  }, []);
+
+  const getTopZIndex = useCallback(() => {
+    if (overlays.length === 0) return 1000; // Base z-index
+    return Math.max(...overlays.map(o => o.zIndex)) + 1;
+  }, [overlays]);
+
+  const isOverlayActive = useCallback((id: string) => {
+    return overlays.some(overlay => overlay.id === id);
+  }, [overlays]);
+
+  const value: OverlayContextType = {
+    overlays,
+    addOverlay,
+    removeOverlay,
+    getTopZIndex,
+    isOverlayActive
+  };
+
+  return (
+    <OverlayContext.Provider value={value}>
+      {children}
+    </OverlayContext.Provider>
+  );
+};
+
+// Overlay manager component for direct usage
+export const OverlayManager: React.FC<OverlayManagerProps> = ({
+  children,
+  maxOverlays = 10,
+  onOverlayChange
+}) => {
+  const { overlays } = useOverlayManager();
+
+  // Notify parent of overlay changes
+  React.useEffect(() => {
+    if (onOverlayChange) {
+      onOverlayChange(overlays);
+    }
+  }, [overlays, onOverlayChange]);
+
+  // Enforce maximum overlay limit
+  React.useEffect(() => {
+    if (overlays.length > maxOverlays) {
+      console.warn(`Maximum overlay limit (${maxOverlays}) exceeded`);
+    }
+  }, [overlays.length, maxOverlays]);
+
+  return (
+    <div className="overlay-manager">
+      {children}
+    </div>
+  );
+};
+
+export default OverlayManager;