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

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

@@ -0,0 +1,462 @@
+import React, { useState, useRef, useEffect, useCallback, cloneElement } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { Portal } from './portal';
+import { FocusManager } from './focus-manager';
+import { 
+  PopoverProps, 
+  PopoverContentProps, 
+  PopoverHeaderProps, 
+  PopoverBodyProps, 
+  PopoverFooterProps 
+} from './types';
+
+// SVG Icons
+const XMarkIcon: React.FC<{ className?: string }> = ({ className = 'w-5 h-5' }) => (
+  <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' }
+});
+
+// Position calculations utility (similar to tooltip but adjusted for larger content)
+const calculatePosition = (
+  triggerRect: DOMRect,
+  popoverRect: DOMRect,
+  position: PopoverProps['position'] = 'bottom',
+  offset: number = 8
+) => {
+  const scrollX = window.scrollX || document.documentElement.scrollLeft;
+  const scrollY = window.scrollY || document.documentElement.scrollTop;
+  
+  let top = 0;
+  let left = 0;
+  
+  // Base calculations
+  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+  const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+  
+  switch (position) {
+    case 'top':
+      top = triggerRect.top - popoverRect.height - offset;
+      left = triggerCenterX - popoverRect.width / 2;
+      break;
+    case 'top-start':
+      top = triggerRect.top - popoverRect.height - offset;
+      left = triggerRect.left;
+      break;
+    case 'top-end':
+      top = triggerRect.top - popoverRect.height - offset;
+      left = triggerRect.right - popoverRect.width;
+      break;
+    case 'bottom':
+      top = triggerRect.bottom + offset;
+      left = triggerCenterX - popoverRect.width / 2;
+      break;
+    case 'bottom-start':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.left;
+      break;
+    case 'bottom-end':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.right - popoverRect.width;
+      break;
+    case 'left':
+      top = triggerCenterY - popoverRect.height / 2;
+      left = triggerRect.left - popoverRect.width - offset;
+      break;
+    case 'left-start':
+      top = triggerRect.top;
+      left = triggerRect.left - popoverRect.width - offset;
+      break;
+    case 'left-end':
+      top = triggerRect.bottom - popoverRect.height;
+      left = triggerRect.left - popoverRect.width - offset;
+      break;
+    case 'right':
+      top = triggerCenterY - popoverRect.height / 2;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-start':
+      top = triggerRect.top;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-end':
+      top = triggerRect.bottom - popoverRect.height;
+      left = triggerRect.right + offset;
+      break;
+  }
+  
+  // Adjust for viewport boundaries
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  
+  // Horizontal boundary checks
+  if (left < offset) {
+    left = offset;
+  } else if (left + popoverRect.width > viewportWidth - offset) {
+    left = viewportWidth - popoverRect.width - offset;
+  }
+  
+  // Vertical boundary checks
+  if (top < offset) {
+    top = offset;
+  } else if (top + popoverRect.height > viewportHeight - offset) {
+    top = viewportHeight - popoverRect.height - offset;
+  }
+  
+  return {
+    top: top + scrollY,
+    left: left + scrollX
+  };
+};
+
+// Arrow component for popovers
+const PopoverArrow: React.FC<{
+  position: PopoverProps['position'];
+  colors: any;
+  className?: string;
+}> = ({ className = '' }) => {
+  return (
+    <div className={`popover__arrow ${className}`} />
+  );
+};
+
+// Popover Content Component
+export const PopoverContent: React.FC<PopoverContentProps> = ({
+  children,
+  className = '',
+  style = {}
+}) => {
+  return (
+    <div className={`popover__content ${className}`} style={style}>
+      {children}
+    </div>
+  );
+};
+
+// Popover Header Component
+export const PopoverHeader: React.FC<PopoverHeaderProps> = ({
+  title,
+  subtitle,
+  onClose,
+  showCloseButton = true,
+  closeButtonLabel = 'Close',
+  className = '',
+  borderless = false,
+  noPadding = false,
+  children
+}) => {
+  const headerClasses = [
+    'popover__header',
+    borderless ? 'popover__header--borderless' : '',
+    noPadding ? 'popover__header--no-padding' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={headerClasses}>
+      <div>
+        {title && (
+          <h3 className="popover__title">
+            {title}
+          </h3>
+        )}
+        {subtitle && (
+          <p className="popover__subtitle">
+            {subtitle}
+          </p>
+        )}
+        {children}
+      </div>
+
+      {showCloseButton && onClose && (
+        <button
+          type="button"
+          className="popover__close"
+          onClick={onClose}
+          aria-label={closeButtonLabel}
+        >
+          <XMarkIcon />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Popover Body Component
+export const PopoverBody: React.FC<PopoverBodyProps> = ({
+  children,
+  className = '',
+  padding = 'md',
+  scrollable = true,
+  maxHeight = '60vh'
+}) => {
+  const bodyClasses = [
+    'popover__body',
+    padding === 'none' ? 'popover__body--no-padding' : '',
+    padding === 'sm' ? 'popover__body--compact' : '',
+    padding === 'lg' ? 'popover__body--spacious' : '',
+    scrollable ? 'popover__body--scrollable' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={bodyClasses}
+      style={{ maxHeight: scrollable ? maxHeight : undefined }}
+    >
+      {children}
+    </div>
+  );
+};
+
+// Popover Footer Component
+export const PopoverFooter: React.FC<PopoverFooterProps> = ({
+  children,
+  className = '',
+  justify = 'end',
+  padding = 'md',
+  borderTop = true
+}) => {
+  const footerClasses = [
+    'popover__footer',
+    !borderTop ? 'popover__footer--borderless' : '',
+    padding === 'none' ? 'popover__footer--no-padding' : '',
+    justify === 'start' ? 'popover__footer--start' : '',
+    justify === 'center' ? 'popover__footer--center' : '',
+    justify === 'between' ? 'popover__footer--space-between' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={footerClasses}>
+      {children}
+    </div>
+  );
+};
+
+// Main Popover Component
+export const Popover: React.FC<PopoverProps> = ({
+  trigger,
+  children,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  position = 'bottom',
+  triggerType = 'click',
+  delay = 0,
+  offset = 8,
+  size = 'md',
+  variant = 'default',
+  showArrow = true,
+  maxWidth = 400,
+  zIndex = 1000,
+  animation = 'fade',
+  closeOnBlur = true,
+  closeOnEscape = true,
+  className = '',
+  theme = 'stan-design'
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+  
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });
+  
+  const triggerRef = useRef<HTMLElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  
+  const isOpen = controlledIsOpen ?? internalIsOpen;
+  
+  // Handle open/close state changes
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (controlledIsOpen === undefined) {
+      setInternalIsOpen(open);
+    }
+    onOpenChange?.(open);
+  }, [controlledIsOpen, onOpenChange]);
+
+  // Show popover with delay
+  const showPopover = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => {
+        handleOpenChange(true);
+      }, delay);
+    } else {
+      handleOpenChange(true);
+    }
+  }, [delay, handleOpenChange]);
+
+  // Hide popover
+  const hidePopover = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  // Position calculation
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !popoverRef.current || !isOpen) return;
+    
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popoverRect = popoverRef.current.getBoundingClientRect();
+    
+    const newPosition = calculatePosition(triggerRect, popoverRect, position, offset);
+    setPopoverPosition(newPosition);
+  }, [isOpen, position, offset]);
+
+  // Handle escape key
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        hidePopover();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, closeOnEscape, hidePopover]);
+
+  // Handle click outside
+  useEffect(() => {
+    if (!isOpen || !closeOnBlur) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      
+      if (
+        triggerRef.current && !triggerRef.current.contains(target) &&
+        popoverRef.current && !popoverRef.current.contains(target)
+      ) {
+        hidePopover();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, closeOnBlur, hidePopover]);
+
+  // Update position when popover opens or on scroll/resize
+  useEffect(() => {
+    if (isOpen) {
+      // Small delay to ensure DOM is updated
+      setTimeout(updatePosition, 0);
+      
+      const handleResize = () => updatePosition();
+      const handleScroll = () => updatePosition();
+      
+      window.addEventListener('resize', handleResize);
+      window.addEventListener('scroll', handleScroll, true);
+      
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('scroll', handleScroll, true);
+      };
+    }
+  }, [isOpen, updatePosition]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Get popover content classes
+  const getContentClasses = () => {
+    const classes = [
+      'popover__content',
+      size ? `popover__content--size-${size}` : '',
+      variant ? `popover__content--variant-${variant}` : '',
+      position ? `popover__content--position-${position}` : '',
+      className
+    ];
+
+    // Add animation class
+    if (animation !== 'none' && isOpen) {
+      classes.push(`popover__content--${animation}-enter`);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  };
+
+  // Create trigger event handlers
+  const getTriggerProps = () => {
+    const props: any = {};
+    
+    if (triggerType === 'hover') {
+      props.onMouseEnter = showPopover;
+      props.onMouseLeave = hidePopover;
+    } else if (triggerType === 'click') {
+      props.onClick = () => handleOpenChange(!isOpen);
+    } else if (triggerType === 'focus') {
+      props.onFocus = showPopover;
+      props.onBlur = hidePopover;
+    }
+    
+    return props;
+  };
+
+  // Clone trigger element with event handlers
+  const triggerElement = cloneElement(trigger, {
+    ...getTriggerProps(),
+    ref: triggerRef
+  });
+
+  return (
+    <>
+      {triggerElement}
+      
+      {isOpen && (
+        <Portal>
+          <FocusManager
+            isActive={isOpen}
+            trapFocus={false} // Don't trap focus for popovers by default
+            restoreFocus={true}
+          >
+            <div
+              ref={popoverRef}
+              role="dialog"
+              aria-modal="false"
+              className={getContentClasses()}
+              style={{
+                ...popoverPosition,
+                maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+                zIndex,
+                backgroundColor: colors.surface.background,
+                borderColor: colors.surface.border,
+                color: colors.text.primary
+              }}
+            >
+              {children}
+
+              {showArrow && (
+                <PopoverArrow position={position} colors={colors} />
+              )}
+            </div>
+          </FocusManager>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default Popover;

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

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { PortalProps } from './types';
+
+export const Portal: React.FC<PortalProps> = ({
+  children,
+  container,
+  className = '',
+  style = {},
+  onMount,
+  onUnmount,
+  variant = 'default',
+  position = 'fixed',
+  zIndex = 'modal',
+  debug = false
+}) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    
+    if (onMount) {
+      onMount();
+    }
+
+    return () => {
+      if (onUnmount) {
+        onUnmount();
+      }
+    };
+  }, [onMount, onUnmount]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  // Determine the container to render into
+  let targetContainer: Element | null = null;
+  
+  if (container) {
+    if (typeof container === 'function') {
+      targetContainer = container();
+    } else {
+      targetContainer = container;
+    }
+  }
+
+  // Fallback to document.body if no container specified
+  if (!targetContainer) {
+    targetContainer = document.body;
+  }
+
+  // Ensure the container exists
+  if (!targetContainer) {
+    console.warn('Portal: Target container not found');
+    return null;
+  }
+
+  // Build container classes
+  const containerClasses = [
+    'portal__container',
+    variant !== 'default' ? `portal__container--${variant}` : '',
+    position ? `portal__container--${position}` : '',
+    zIndex ? `portal__container--${zIndex}` : '',
+    debug ? 'portal__container--debug' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return createPortal(
+    <div className={containerClasses} style={style}>
+      <div className="portal__content">
+        {children}
+      </div>
+    </div>,
+    targetContainer
+  );
+};
+
+export default Portal;