@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/lib/composables/usePopover.ts

@@ -0,0 +1,354 @@
+import { useState, useRef, useEffect, RefObject } from 'react';
+
+type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+type PopoverTrigger = 'click' | 'hover';
+
+interface UsePopoverProps {
+  position?: PopoverPosition | 'auto';
+  trigger?: PopoverTrigger;
+  offset?: number;
+  delay?: number;
+  defaultOpen?: boolean;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  closeOnClickOutside?: boolean;
+  closeOnEscape?: boolean;
+  id?: string;
+}
+
+interface UsePopoverResult {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  triggerRef: RefObject<HTMLElement>;
+  popoverRef: RefObject<HTMLDivElement>;
+  arrowRef: RefObject<HTMLDivElement>;
+  popoverId: string;
+  currentPosition: PopoverPosition;
+  updatePosition: () => void;
+}
+
+/**
+ * Hook for managing popover state and positioning logic
+ */
+export const usePopover = ({
+  position = 'top',
+  trigger = 'click',
+  offset = 12,
+  delay = 0,
+  defaultOpen = false,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  id,
+}: UsePopoverProps): UsePopoverResult => {
+  const [isOpen, setIsOpenState] = useState(defaultOpen);
+  const [currentPosition, setCurrentPosition] = useState<PopoverPosition>(
+    position === 'auto' ? 'top' : (position as PopoverPosition)
+  );
+  const triggerRef = useRef<HTMLElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const arrowRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const popoverId = id || `popover-${Math.random().toString(36).slice(2, 11)}`;
+
+  // Use controlled state if provided
+  const isControlled = controlledIsOpen !== undefined;
+  const isOpenState = isControlled ? controlledIsOpen : isOpen;
+
+  // Define setIsOpen function before using it in useEffect
+  const setIsOpen = (newIsOpen: boolean) => {
+    if (!isControlled) {
+      setIsOpenState(newIsOpen);
+    }
+    if (onOpenChange) {
+      onOpenChange(newIsOpen);
+    }
+  };
+
+  // Handle hover events if trigger is hover
+  useEffect(() => {
+    if (trigger !== 'hover' || !triggerRef.current || !popoverRef.current) return undefined;
+
+    const handleTriggerMouseEnter = () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+
+      if (delay > 0) {
+        timeoutRef.current = setTimeout(() => {
+          setIsOpen(true);
+        }, delay);
+      } else {
+        setIsOpen(true);
+      }
+    };
+
+    const handleTriggerMouseLeave = () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        if (!popoverRef.current?.matches(':hover')) {
+          setIsOpen(false);
+        }
+      }, 100);
+    };
+
+    const handlePopoverMouseEnter = () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+
+    const handlePopoverMouseLeave = () => {
+      setIsOpen(false);
+    };
+
+    // Add hover event listeners
+    triggerRef.current.addEventListener('mouseenter', handleTriggerMouseEnter);
+    triggerRef.current.addEventListener('mouseleave', handleTriggerMouseLeave);
+    popoverRef.current.addEventListener('mouseenter', handlePopoverMouseEnter);
+    popoverRef.current.addEventListener('mouseleave', handlePopoverMouseLeave);
+
+    return () => {
+      if (triggerRef.current) {
+        triggerRef.current.removeEventListener('mouseenter', handleTriggerMouseEnter);
+        triggerRef.current.removeEventListener('mouseleave', handleTriggerMouseLeave);
+      }
+      if (popoverRef.current) {
+        popoverRef.current.removeEventListener('mouseenter', handlePopoverMouseEnter);
+        popoverRef.current.removeEventListener('mouseleave', handlePopoverMouseLeave);
+      }
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [trigger, delay, isOpenState]);
+
+  const updatePosition = (event?: Event) => {
+    if (!triggerRef.current || !popoverRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popoverRect = popoverRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    // Check if the trigger is near viewport edges
+    const isNearViewportEdge =
+      triggerRect.top < 50 ||
+      triggerRect.bottom > viewportHeight - 50 ||
+      triggerRect.left < 50 ||
+      triggerRect.right > viewportWidth - 50;
+
+    // If this is a scroll update and trigger isn't near edges, skip repositioning
+    if (event?.type === 'scroll' && !isNearViewportEdge) {
+      return;
+    }
+
+    // Calculate space available in each direction
+    const spaceTop = triggerRect.top;
+    const spaceBottom = viewportHeight - triggerRect.bottom;
+    const spaceLeft = triggerRect.left;
+    const spaceRight = viewportWidth - triggerRect.right;
+
+    // Determine best position based on available space
+    let bestPosition: PopoverPosition = position === 'auto' ? 'top' : (position as PopoverPosition);
+
+    // If specified position is 'auto', find the position with most space
+    if (position === 'auto') {
+      const spaces = [
+        { position: 'top', space: spaceTop },
+        { position: 'right', space: spaceRight },
+        { position: 'bottom', space: spaceBottom },
+        { position: 'left', space: spaceLeft },
+      ];
+
+      // Sort by available space (descending)
+      spaces.sort((a, b) => b.space - a.space);
+
+      // Select position with most space
+      bestPosition = spaces[0].position as PopoverPosition;
+    } else {
+      // Check if the preferred position has enough space
+      const needsFlip =
+        (position === 'top' &&
+          spaceTop < popoverRect.height + offset &&
+          spaceBottom >= popoverRect.height + offset) ||
+        (position === 'bottom' &&
+          spaceBottom < popoverRect.height + offset &&
+          spaceTop >= popoverRect.height + offset) ||
+        (position === 'left' &&
+          spaceLeft < popoverRect.width + offset &&
+          spaceRight >= popoverRect.width + offset) ||
+        (position === 'right' &&
+          spaceRight < popoverRect.width + offset &&
+          spaceLeft >= popoverRect.width + offset);
+
+      if (needsFlip) {
+        // Flip to the opposite side
+        const oppositePositions: Record<PopoverPosition | 'auto', PopoverPosition> = {
+          top: 'bottom',
+          bottom: 'top',
+          left: 'right',
+          right: 'left',
+          auto: 'bottom',
+        };
+        bestPosition = oppositePositions[position as PopoverPosition | 'auto'];
+      }
+    }
+
+    setCurrentPosition(bestPosition);
+
+    // Calculate position based on the determined best position
+    let top = 0;
+    let left = 0;
+
+    // Calculate viewport-relative position
+    switch (bestPosition) {
+      case 'top':
+        top = triggerRect.top - popoverRect.height - offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case 'left':
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.left - popoverRect.width - offset;
+        break;
+      case 'right':
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.right + offset;
+        break;
+    }
+
+    // Constrain to viewport boundaries
+    if (left < 0) {
+      left = 5;
+    } else if (left + popoverRect.width > viewportWidth) {
+      left = viewportWidth - popoverRect.width - 5;
+    }
+
+    if (top < 0) {
+      top = 5;
+    } else if (top + popoverRect.height > viewportHeight) {
+      top = viewportHeight - popoverRect.height - 5;
+    }
+
+    // Add scroll position to convert viewport coordinates to absolute position
+    const absoluteTop = top + window.scrollY;
+    const absoluteLeft = left + window.scrollX;
+
+    // Apply position using absolute positioning to follow when scrolling
+    popoverRef.current.style.position = 'absolute';
+    popoverRef.current.style.top = `${absoluteTop}px`;
+    popoverRef.current.style.left = `${absoluteLeft}px`;
+  };
+
+  // Position the popover
+  useEffect(() => {
+    if (!isOpenState || !triggerRef.current || !popoverRef.current) return undefined;
+
+    // Initial positioning
+    updatePosition();
+
+    // Update position on resize
+    window.addEventListener('resize', updatePosition);
+
+    // Update position on scroll, but throttled for performance
+    let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+    const handleScroll = (e: Event) => {
+      if (scrollTimeout) {
+        return;
+      }
+
+      scrollTimeout = setTimeout(() => {
+        updatePosition(e);
+        scrollTimeout = null;
+      }, 100);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    // Update position less frequently to handle content changes
+    const intervalId: ReturnType<typeof setInterval> = setInterval(() => {
+      updatePosition();
+    }, 500);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', handleScroll);
+      if (scrollTimeout) {
+        clearTimeout(scrollTimeout);
+      }
+      clearInterval(intervalId);
+    };
+  }, [isOpenState, position, offset]);
+
+  // Handle click outside to close popover
+  useEffect(() => {
+    if (!isOpenState || !closeOnClickOutside) return undefined;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpenState, closeOnClickOutside]);
+
+  // Handle escape key to close popover
+  useEffect(() => {
+    if (!isOpenState || !closeOnEscape) return undefined;
+
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isOpenState, closeOnEscape]);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    isOpen: isOpenState,
+    setIsOpen,
+    triggerRef,
+    popoverRef,
+    arrowRef,
+    popoverId,
+    currentPosition,
+    updatePosition,
+  };
+};
+
+export default usePopover;

package/src/lib/composables/useProgress.ts

@@ -0,0 +1,74 @@
+import { ThemeColor } from '../types/components';
+
+interface UseProgressProps {
+  /**
+   * Progress value from 0 to 100
+   */
+  value: number;
+
+  /**
+   * Optional color variant
+   */
+  variant?: ThemeColor;
+
+  /**
+   * Optional size
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Optional className for custom styling
+   */
+  className?: string;
+}
+
+interface UseProgressReturn {
+  /**
+   * Computed progress value clamped between 0 and 100
+   */
+  progressValue: number;
+
+  /**
+   * CSS properties for the progress component
+   */
+  progressStyle: React.CSSProperties;
+
+  /**
+   * CSS classes for the progress component
+   */
+  progressClasses: string;
+}
+
+/**
+ * Hook for managing Progress component state and behavior
+ */
+export const useProgress = ({
+  value,
+  variant = 'primary',
+  size = 'md',
+  className = '',
+}: UseProgressProps): UseProgressReturn => {
+  // Clamp value between 0 and 100
+  const progressValue = Math.min(Math.max(value, 0), 100);
+
+  // Create CSS custom properties
+  const progressStyle = {
+    '--atomix-progress-percentage': `${progressValue}%`,
+  } as React.CSSProperties;
+
+  // Generate class names
+  const baseClass = 'c-progress';
+  const variantClass = variant ? `${baseClass}--${variant}` : '';
+  const sizeClass = size ? `${baseClass}--${size}` : '';
+  const customClass = className || '';
+
+  const progressClasses = [baseClass, variantClass, sizeClass, customClass]
+    .filter(Boolean)
+    .join(' ');
+
+  return {
+    progressValue,
+    progressStyle,
+    progressClasses,
+  };
+};

package/src/lib/composables/useRadio.ts

@@ -0,0 +1,47 @@
+import { RadioProps } from '../types/components';
+import { RADIO } from '../constants/components';
+
+/**
+ * Radio state and functionality
+ * @param initialProps - Initial radio properties
+ * @returns Radio state and methods
+ */
+export function useRadio(initialProps?: Partial<RadioProps>) {
+  // Default radio properties
+  const defaultProps: Partial<RadioProps> = {
+    disabled: false,
+    invalid: false,
+    valid: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate radio class based on properties
+   * @param props - Radio properties
+   * @returns Class string
+   */
+  const generateRadioClass = (props: Partial<RadioProps>): string => {
+    const {
+      disabled = defaultProps.disabled,
+      invalid = defaultProps.invalid,
+      valid = defaultProps.valid,
+      className = '',
+    } = props;
+
+    let validationClass = '';
+    if (invalid) {
+      validationClass = RADIO.CLASSES.INVALID;
+    } else if (valid) {
+      validationClass = RADIO.CLASSES.VALID;
+    }
+
+    const disabledClass = disabled ? RADIO.CLASSES.DISABLED : '';
+
+    return `${RADIO.CLASSES.BASE} ${validationClass} ${disabledClass} ${className}`.trim();
+  };
+
+  return {
+    defaultProps,
+    generateRadioClass,
+  };
+}

package/src/lib/composables/useRating.ts

@@ -0,0 +1,174 @@
+import { useState, useCallback } from 'react';
+import type { RatingProps } from '../types/components';
+
+/**
+ * Props for the useRating hook
+ */
+export type UseRatingProps = Pick<
+  RatingProps,
+  'value' | 'maxValue' | 'allowHalf' | 'readOnly' | 'onChange'
+>;
+
+export interface UseRatingReturn {
+  /**
+   * Current rating value (controlled or uncontrolled)
+   */
+  currentValue: number;
+
+  /**
+   * Value being hovered over
+   */
+  hoverValue: number | null;
+
+  /**
+   * Currently focused star index
+   */
+  focusedIndex: number | null;
+
+  /**
+   * Handle mouse enter on a star
+   */
+  handleMouseEnter: (starValue: number) => void;
+
+  /**
+   * Handle mouse leave from rating component
+   */
+  handleMouseLeave: () => void;
+
+  /**
+   * Handle click on a star
+   */
+  handleClick: (newValue: number) => void;
+
+  /**
+   * Handle keyboard navigation
+   */
+  handleKeyDown: (e: React.KeyboardEvent, index: number) => void;
+
+  /**
+   * Set focus on a specific star
+   */
+  setFocused: (index: number | null) => void;
+
+  /**
+   * Set hover value directly
+   */
+  setHoverValue: (value: number | null) => void;
+
+  /**
+   * Whether the component is in controlled mode
+   */
+  isControlled: boolean;
+}
+
+/**
+ * Hook for managing rating component state and interactions
+ */
+export const useRating = ({
+  value = 0,
+  maxValue = 5,
+  allowHalf = false,
+  readOnly = false,
+  onChange,
+}: UseRatingProps): UseRatingReturn => {
+  // Determine if component is in controlled mode
+  const isControlled = typeof onChange !== 'undefined';
+
+  // Internal state for uncontrolled mode
+  const [internalValue, setInternalValue] = useState<number>(value);
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+  // Use controlled or uncontrolled value
+  const currentValue = isControlled ? value : internalValue;
+
+  // Handle mouse enter on star
+  const handleMouseEnter = useCallback(
+    (starValue: number) => {
+      if (readOnly) return;
+      setHoverValue(starValue);
+    },
+    [readOnly]
+  );
+
+  // Handle mouse leave from rating component
+  const handleMouseLeave = useCallback(() => {
+    if (readOnly) return;
+    setHoverValue(null);
+  }, [readOnly]);
+
+  // Handle click on star
+  const handleClick = useCallback(
+    (newValue: number) => {
+      if (readOnly) return;
+
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+
+      onChange?.(newValue);
+    },
+    [readOnly, onChange, isControlled]
+  );
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent, index: number) => {
+      if (readOnly) return;
+
+      const step = allowHalf ? 0.5 : 1;
+      let newValue = currentValue;
+
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          newValue = Math.min(maxValue, currentValue + step);
+          e.preventDefault();
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          newValue = Math.max(0, currentValue - step);
+          e.preventDefault();
+          break;
+        case 'Home':
+          newValue = 0;
+          e.preventDefault();
+          break;
+        case 'End':
+          newValue = maxValue;
+          e.preventDefault();
+          break;
+        case ' ':
+        case 'Enter':
+          newValue = index;
+          e.preventDefault();
+          break;
+        default:
+          return;
+      }
+
+      if (newValue !== currentValue) {
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+      }
+    },
+    [currentValue, maxValue, allowHalf, readOnly, onChange, isControlled]
+  );
+
+  return {
+    currentValue,
+    hoverValue,
+    focusedIndex,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    setFocused: setFocusedIndex,
+    setHoverValue,
+    isControlled,
+  };
+};
+
+export default useRating;