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

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

@@ -0,0 +1,303 @@
+import React, { useState, useRef, useEffect, useCallback, cloneElement } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { Portal } from './portal';
+import { TooltipProps, TooltipContentProps } from './types';
+
+// Default color fallbacks
+const getDefaultColors = () => ({
+  surface: { background: '#1f2937', surface: '#374151', border: '#4b5563' },
+  text: { primary: '#ffffff', secondary: '#d1d5db', inverse: '#111827' },
+  interactive: { hover: '#4b5563', focus: '#3b82f6' },
+  primary: { 500: '#3b82f6' }
+});
+
+// Position calculations utility
+const calculatePosition = (
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  position: TooltipProps['position'] = 'top',
+  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 - tooltipRect.height - offset;
+      left = triggerCenterX - tooltipRect.width / 2;
+      break;
+    case 'top-start':
+      top = triggerRect.top - tooltipRect.height - offset;
+      left = triggerRect.left;
+      break;
+    case 'top-end':
+      top = triggerRect.top - tooltipRect.height - offset;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case 'bottom':
+      top = triggerRect.bottom + offset;
+      left = triggerCenterX - tooltipRect.width / 2;
+      break;
+    case 'bottom-start':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.left;
+      break;
+    case 'bottom-end':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case 'left':
+      top = triggerCenterY - tooltipRect.height / 2;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case 'left-start':
+      top = triggerRect.top;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case 'left-end':
+      top = triggerRect.bottom - tooltipRect.height;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case 'right':
+      top = triggerCenterY - tooltipRect.height / 2;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-start':
+      top = triggerRect.top;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-end':
+      top = triggerRect.bottom - tooltipRect.height;
+      left = triggerRect.right + offset;
+      break;
+  }
+  
+  // Adjust for viewport boundaries
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  
+  // Horizontal boundary checks
+  if (left < 0) {
+    left = offset;
+  } else if (left + tooltipRect.width > viewportWidth) {
+    left = viewportWidth - tooltipRect.width - offset;
+  }
+  
+  // Vertical boundary checks
+  if (top < 0) {
+    top = offset;
+  } else if (top + tooltipRect.height > viewportHeight) {
+    top = viewportHeight - tooltipRect.height - offset;
+  }
+  
+  return {
+    top: top + scrollY,
+    left: left + scrollX
+  };
+};
+
+// Arrow component for tooltips
+const TooltipArrow: React.FC<{
+  position: TooltipProps['position'];
+  className?: string;
+}> = ({ className = '' }) => {
+  return (
+    <div className={`tooltip__arrow ${className}`} />
+  );
+};
+
+// Tooltip Content Component
+export const TooltipContent: React.FC<TooltipContentProps> = ({
+  children,
+  className = '',
+  style = {}
+}) => {
+  return (
+    <div className={`tooltip__content ${className}`} style={style}>
+      {children}
+    </div>
+  );
+};
+
+// Main Tooltip Component
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  position = 'top',
+  trigger = 'hover',
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  delay = 200,
+  offset = 8,
+  size = 'md',
+  variant = 'default',
+  showArrow = true,
+  maxWidth = 320,
+  zIndex = 1000,
+  animation = 'fade',
+  className = '',
+  theme = 'stan-design'
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+  
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  
+  const triggerRef = useRef<HTMLElement>(null);
+  const tooltipRef = 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 tooltip with delay
+  const showTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => {
+        handleOpenChange(true);
+      }, delay);
+    } else {
+      handleOpenChange(true);
+    }
+  }, [delay, handleOpenChange]);
+
+  // Hide tooltip
+  const hideTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  // Position calculation
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current || !isOpen) return;
+    
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    
+    const newPosition = calculatePosition(triggerRect, tooltipRect, position, offset);
+    setTooltipPosition(newPosition);
+  }, [isOpen, position, offset]);
+
+  // Update position when tooltip opens or on scroll/resize
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+      
+      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 tooltip content classes
+  const getContentClasses = () => {
+    const classes = [
+      'tooltip__content',
+      size ? `tooltip__content--size-${size}` : '',
+      variant ? `tooltip__content--variant-${variant}` : '',
+      position ? `tooltip__content--position-${position}` : '',
+      className
+    ];
+
+    // Add animation class
+    if (animation !== 'none' && isOpen) {
+      classes.push(`tooltip__content--${animation}-enter`);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  };
+
+  // Create trigger event handlers
+  const getTriggerProps = () => {
+    const props: any = {};
+    
+    if (trigger === 'hover') {
+      props.onMouseEnter = showTooltip;
+      props.onMouseLeave = hideTooltip;
+    } else if (trigger === 'click') {
+      props.onClick = () => handleOpenChange(!isOpen);
+    } else if (trigger === 'focus') {
+      props.onFocus = showTooltip;
+      props.onBlur = hideTooltip;
+    }
+    
+    return props;
+  };
+
+  // Clone trigger element with event handlers
+  const triggerElement = cloneElement(children, {
+    ...getTriggerProps(),
+    ref: triggerRef,
+    className: `tooltip__trigger ${children.props.className || ''}`
+  });
+
+  return (
+    <>
+      {triggerElement}
+      
+      {isOpen && (
+        <Portal>
+          <div
+            ref={tooltipRef}
+            role="tooltip"
+            className={getContentClasses()}
+            style={{
+              ...tooltipPosition,
+              maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+              zIndex,
+              backgroundColor: colors.surface.background,
+              color: colors.text.primary,
+              borderColor: colors.surface.border
+            }}
+          >
+            {content}
+
+            {showArrow && (
+              <TooltipArrow position={position} />
+            )}
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default Tooltip;

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

@@ -0,0 +1,196 @@
+import React from 'react';
+
+// Base overlay properties
+export interface OverlayBaseProps {
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
+  onClose?: () => void;
+}
+
+// Portal Component Types
+export interface PortalProps {
+  children: React.ReactNode;
+  container?: Element | (() => Element | null);
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: 'default' | 'modal' | 'popover' | 'tooltip' | 'toast' | 'dropdown';
+  position?: 'fixed' | 'absolute' | 'relative';
+  zIndex?: 'modal' | 'popover' | 'tooltip' | 'toast' | 'dropdown';
+  debug?: boolean;
+  onMount?: () => void;
+  onUnmount?: () => void;
+}
+
+// Overlay Manager Types
+export interface OverlayState {
+  id: string;
+  zIndex: number;
+}
+
+export interface OverlayAction {
+  type: 'ADD_OVERLAY' | 'REMOVE_OVERLAY' | 'UPDATE_Z_INDEX';
+  payload: {
+    id: string;
+    zIndex?: number;
+  };
+}
+
+export interface OverlayManagerProps {
+  children: React.ReactNode;
+  baseZIndex?: number;
+  maxOverlays?: number;
+  onOverlayChange?: (overlays: OverlayState[]) => void;
+}
+
+// Focus Manager Types
+export interface FocusManagerProps {
+  children: React.ReactNode;
+  isActive: boolean;
+  onFocusChange?: (focused: boolean) => void;
+  trapFocus?: boolean;
+  restoreFocus?: boolean;
+  initialFocus?: React.RefObject<HTMLElement>;
+  className?: string;
+}
+
+// Backdrop Types
+export interface BackdropProps {
+  isVisible: boolean;
+  onClick?: () => void;
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
+  blur?: boolean;
+  opacity?: number;
+  zIndex?: number;
+  children?: React.ReactNode;
+}
+
+// Modal Component Types
+export interface ModalProps extends OverlayBaseProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  variant?: 'default' | 'borderless' | 'elevated' | 'centered';
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+  showBackdrop?: boolean;
+  backdropBlur?: boolean;
+  backdropOpacity?: number;
+  trapFocus?: boolean;
+  restoreFocus?: boolean;
+  initialFocus?: React.RefObject<HTMLElement>;
+  zIndex?: number;
+  animation?: 'fade' | 'slide' | 'scale' | 'none';
+  duration?: number;
+  loading?: boolean;
+}
+
+export interface ModalHeaderProps {
+  title?: string;
+  subtitle?: string;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  closeButtonLabel?: string;
+  className?: string;
+  borderless?: boolean;
+  noPadding?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface ModalBodyProps {
+  children: React.ReactNode;
+  className?: string;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  scrollable?: boolean;
+  maxHeight?: string | number;
+}
+
+export interface ModalFooterProps {
+  children: React.ReactNode;
+  className?: string;
+  justify?: 'start' | 'center' | 'end' | 'between';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  borderTop?: boolean;
+}
+
+// Tooltip Component Types
+export interface TooltipProps extends OverlayBaseProps {
+  content: React.ReactNode;
+  children: React.ReactElement;
+  position?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+  trigger?: 'hover' | 'click' | 'focus' | 'manual';
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  delay?: number;
+  offset?: number;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'filled' | 'outlined';
+  showArrow?: boolean;
+  maxWidth?: string | number;
+  zIndex?: number;
+  animation?: 'fade' | 'slide' | 'scale' | 'none';
+  duration?: number;
+}
+
+export interface TooltipContentProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+// Popover Component Types
+export interface PopoverProps extends OverlayBaseProps {
+  trigger: React.ReactElement;
+  children: React.ReactNode;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  position?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+  triggerType?: 'hover' | 'click' | 'focus' | 'manual';
+  delay?: number;
+  offset?: number;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'filled' | 'outlined';
+  showArrow?: boolean;
+  maxWidth?: string | number;
+  zIndex?: number;
+  animation?: 'fade' | 'slide' | 'scale' | 'none';
+  duration?: number;
+  closeOnBlur?: boolean;
+  closeOnEscape?: boolean;
+}
+
+export interface PopoverContentProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface PopoverHeaderProps {
+  title?: string;
+  subtitle?: string;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  closeButtonLabel?: string;
+  className?: string;
+  borderless?: boolean;
+  noPadding?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface PopoverBodyProps {
+  children: React.ReactNode;
+  className?: string;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  scrollable?: boolean;
+  maxHeight?: string | number;
+}
+
+export interface PopoverFooterProps {
+  children: React.ReactNode;
+  className?: string;
+  justify?: 'start' | 'center' | 'end' | 'between';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  borderTop?: boolean;
+}