@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/lib/composables/useDropdown.ts

@@ -0,0 +1,272 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { DROPDOWN } from '../constants/components';
+import type { DropdownPlacement, DropdownTrigger } from '../types/components';
+
+interface UseDropdownProps {
+  placement?: DropdownPlacement;
+  trigger?: DropdownTrigger;
+  offset?: number;
+  defaultOpen?: boolean;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  closeOnClickOutside?: boolean;
+  closeOnEscape?: boolean;
+  id?: string;
+}
+
+interface UseDropdownReturn {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  triggerRef: React.RefObject<HTMLElement>;
+  menuRef: React.RefObject<HTMLElement>;
+  dropdownId: string;
+  currentPlacement: DropdownPlacement;
+  updatePosition: () => void;
+}
+
+/**
+ * Hook for managing dropdown state and position
+ */
+export const useDropdown = ({
+  placement = DROPDOWN.DEFAULTS.PLACEMENT as DropdownPlacement,
+  trigger = DROPDOWN.DEFAULTS.TRIGGER as DropdownTrigger,
+  offset = DROPDOWN.DEFAULTS.OFFSET,
+  defaultOpen = false,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  id,
+}: UseDropdownProps): UseDropdownReturn => {
+  // Generate unique ID for the dropdown menu
+  const uniqueId = useRef(`dropdown-${id || Math.random().toString(36).substring(2, 9)}`);
+
+  // Setup controlled vs uncontrolled state
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);
+
+  // Use either controlled or uncontrolled state
+  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : uncontrolledIsOpen;
+
+  // Callback to update open state with notification to parent
+  const setIsOpen = useCallback(
+    (nextIsOpen: boolean) => {
+      if (controlledIsOpen === undefined) {
+        setUncontrolledIsOpen(nextIsOpen);
+      }
+
+      if (onOpenChange) {
+        onOpenChange(nextIsOpen);
+      }
+    },
+    [controlledIsOpen, onOpenChange]
+  );
+
+  // Refs for trigger and dropdown menu elements
+  const triggerRef = useRef<HTMLElement>(null);
+  const menuRef = useRef<HTMLElement>(null);
+
+  // Current placement state
+  const [currentPlacement, setCurrentPlacement] = useState(placement);
+
+  // Handle click outside
+  useEffect(() => {
+    if (!isOpen || !closeOnClickOutside) return undefined;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        menuRef.current &&
+        triggerRef.current &&
+        !menuRef.current.contains(event.target as Node) &&
+        !triggerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, closeOnClickOutside, setIsOpen]);
+
+  // Handle escape key
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return undefined;
+
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isOpen, closeOnEscape, setIsOpen]);
+
+  // Helper function to get the flipped placement if needed
+  const getFlippedPlacement = useCallback(
+    (
+      placement: DropdownPlacement,
+      triggerRect: DOMRect,
+      menuRect: DOMRect,
+      offset: number
+    ): DropdownPlacement => {
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Start with the requested placement
+      let newPlacement = placement;
+
+      // Flip vertical placement if needed
+      if (
+        placement.startsWith('bottom') &&
+        triggerRect.bottom + menuRect.height + offset > viewportHeight
+      ) {
+        newPlacement = placement.replace('bottom', 'top') as DropdownPlacement;
+      } else if (placement.startsWith('top') && triggerRect.top - menuRect.height - offset < 0) {
+        newPlacement = placement.replace('top', 'bottom') as DropdownPlacement;
+      }
+
+      // Flip horizontal placement if needed
+      if (placement.startsWith('left') && triggerRect.left - menuRect.width - offset < 0) {
+        newPlacement = placement.replace('left', 'right') as DropdownPlacement;
+      } else if (
+        placement.startsWith('right') &&
+        triggerRect.right + menuRect.width + offset > viewportWidth
+      ) {
+        newPlacement = placement.replace('right', 'left') as DropdownPlacement;
+      }
+
+      // Adjust alignment for top/bottom placements
+      if (newPlacement.startsWith('top') || newPlacement.startsWith('bottom')) {
+        if (newPlacement.endsWith('start') && triggerRect.left + menuRect.width > viewportWidth) {
+          newPlacement = newPlacement.replace('start', 'end') as DropdownPlacement;
+        } else if (newPlacement.endsWith('end') && triggerRect.right - menuRect.width < 0) {
+          newPlacement = newPlacement.replace('end', 'start') as DropdownPlacement;
+        }
+      }
+
+      return newPlacement;
+    },
+    []
+  );
+
+  // Helper function to calculate position based on placement
+  const calculatePosition = useCallback(
+    (
+      placement: DropdownPlacement,
+      triggerRect: DOMRect,
+      menuRect: DOMRect,
+      offset: number
+    ): { top: number; left: number } => {
+      let top = 0;
+      let left = 0;
+
+      // Vertical positioning
+      if (placement.startsWith('bottom')) {
+        top = triggerRect.height + offset;
+      } else if (placement.startsWith('top')) {
+        top = -menuRect.height - offset;
+      } else if (placement.startsWith('left') || placement.startsWith('right')) {
+        top = triggerRect.height / 2 - menuRect.height / 2;
+      }
+
+      // Horizontal positioning
+      if (placement.startsWith('left')) {
+        left = -menuRect.width - offset;
+      } else if (placement.startsWith('right')) {
+        left = triggerRect.width + offset;
+      } else if (placement.endsWith('start')) {
+        left = 0;
+      } else if (placement.endsWith('end')) {
+        left = triggerRect.width - menuRect.width;
+      } else {
+        left = triggerRect.width / 2 - menuRect.width / 2;
+      }
+
+      return { top, left };
+    },
+    []
+  );
+
+  // Calculate and update dropdown position
+  const updatePosition = useCallback(() => {
+    if (!isOpen || !triggerRef.current || !menuRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const menuRect = menuRef.current.getBoundingClientRect();
+
+    // Get the optimal placement
+    const newPlacement = getFlippedPlacement(placement, triggerRect, menuRect, offset);
+
+    // Calculate position based on the new placement
+    const { top, left } = calculatePosition(newPlacement, triggerRect, menuRect, offset);
+
+    // Apply position
+    menuRef.current.style.position = 'absolute';
+    menuRef.current.style.top = `${top}px`;
+    menuRef.current.style.left = `${left}px`;
+
+    // Update placement state if it changed
+    if (newPlacement !== currentPlacement) {
+      setCurrentPlacement(newPlacement);
+    }
+  }, [isOpen, offset, placement, currentPlacement, getFlippedPlacement, calculatePosition]);
+
+  // Update position when menu is opened
+  useEffect(() => {
+    if (!isOpen) return undefined;
+
+    // Initial position update
+    updatePosition();
+
+    // Use ResizeObserver to detect size changes in the menu
+    let resizeObserver: ResizeObserver | null = null;
+    if (menuRef.current && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(updatePosition);
+      });
+      resizeObserver.observe(menuRef.current);
+    }
+
+    // Update position on resize/scroll
+    const handleResize = () => {
+      requestAnimationFrame(updatePosition);
+    };
+
+    const handleScroll = () => {
+      requestAnimationFrame(updatePosition);
+    };
+
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    // Fallback for browsers without ResizeObserver or for dynamic content changes
+    // Use a less frequent interval (500ms instead of 200ms)
+    const intervalId = window.setInterval(updatePosition, 500);
+
+    return () => {
+      if (resizeObserver && menuRef.current) {
+        resizeObserver.unobserve(menuRef.current);
+        resizeObserver.disconnect();
+      }
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('scroll', handleScroll);
+      window.clearInterval(intervalId);
+    };
+  }, [isOpen, updatePosition]);
+
+  return {
+    isOpen,
+    setIsOpen,
+    triggerRef,
+    menuRef,
+    dropdownId: uniqueId.current,
+    currentPlacement,
+    updatePosition,
+  };
+};

package/src/lib/composables/useEdgePanel.ts

@@ -0,0 +1,261 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { EdgePanelProps } from '../types/components';
+import { EDGE_PANEL } from '../constants/components';
+
+/**
+ * EdgePanel state and functionality
+ * @param initialProps - Initial EdgePanel properties
+ * @returns EdgePanel state and methods
+ */
+export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
+  // Default EdgePanel properties
+  const defaultProps: Partial<EdgePanelProps> = {
+    position: 'start',
+    mode: 'slide',
+    isOpen: false,
+    backdrop: true,
+    closeOnBackdropClick: true,
+    closeOnEscape: true,
+    ...initialProps,
+  };
+
+  const [isOpen, setIsOpen] = useState(defaultProps.isOpen || false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const backdropRef = useRef<HTMLDivElement>(null);
+
+  /**
+   * Generate EdgePanel class based on properties
+   * @param props - EdgePanel properties
+   * @returns Class string
+   */
+  const generateEdgePanelClass = (props: Partial<EdgePanelProps>): string => {
+    const { position = defaultProps.position, className = '', isOpen: propIsOpen } = props;
+
+    const baseClass = EDGE_PANEL.CLASSES.BASE;
+    const positionClass = position ? `${baseClass}--${position}` : '';
+    const openClass = (propIsOpen ?? isOpen) ? EDGE_PANEL.CLASSES.IS_OPEN : '';
+
+    return `${baseClass} ${positionClass} ${openClass} ${className}`.trim();
+  };
+
+  /**
+   * Adjust body padding in push mode
+   */
+  const adjustBodyPadding = useCallback(() => {
+    if (!containerRef.current || defaultProps.mode !== 'push') return;
+
+    const { position } = defaultProps;
+    const size =
+      position === 'top' || position === 'bottom'
+        ? containerRef.current.clientHeight
+        : containerRef.current.clientWidth;
+
+    // Map position to CSS padding property
+    let paddingProperty: string;
+    switch (position) {
+      case 'start':
+        paddingProperty = 'paddingLeft';
+        break;
+      case 'end':
+        paddingProperty = 'paddingRight';
+        break;
+      default:
+        // For top/bottom, capitalize first letter
+        paddingProperty = `padding${position!.charAt(0).toUpperCase() + position!.slice(1)}`;
+    }
+
+    document.body.style[paddingProperty as any] = `${size}px`;
+    document.body.classList.add('is-pushed');
+  }, [defaultProps.mode, defaultProps.position]);
+
+  /**
+   * Reset body padding
+   */
+  const resetBodyPadding = useCallback(() => {
+    if (defaultProps.mode !== 'push') return;
+
+    const { position } = defaultProps;
+
+    // Map position to CSS padding property
+    let paddingProperty: string;
+    switch (position) {
+      case 'start':
+        paddingProperty = 'paddingLeft';
+        break;
+      case 'end':
+        paddingProperty = 'paddingRight';
+        break;
+      default:
+        // For top/bottom, capitalize first letter
+        paddingProperty = `padding${position!.charAt(0).toUpperCase() + position!.slice(1)}`;
+    }
+
+    document.body.style[paddingProperty as any] = '';
+    document.body.classList.remove('is-pushed');
+  }, [defaultProps.mode, defaultProps.position]);
+
+  /**
+   * Open the panel
+   */
+  const openPanel = useCallback(() => {
+    setIsOpen(true);
+    document.body.classList.add('is-edgepanel-open');
+
+    if (containerRef.current) {
+      const { mode } = defaultProps;
+
+      // Only add animation if not in 'none' mode
+      if (mode !== 'none') {
+        // Add animation class first
+        containerRef.current.classList.add('is-animating');
+
+        // Force a reflow before starting the animation
+        void containerRef.current.offsetHeight;
+
+        // Remove animation class after animation completes
+        const container = containerRef.current;
+        setTimeout(() => {
+          if (container) {
+            container.classList.remove('is-animating');
+          }
+        }, EDGE_PANEL.ANIMATION_DURATION);
+      }
+
+      // Then set transform
+      containerRef.current.style.transform = 'translate(0)';
+
+      // If push mode, adjust body padding
+      if (defaultProps.mode === 'push') {
+        adjustBodyPadding();
+      }
+    }
+
+    if (defaultProps.onOpenChange) {
+      defaultProps.onOpenChange(true);
+    }
+  }, [defaultProps, adjustBodyPadding]);
+
+  /**
+   * Close the panel
+   */
+  const closePanel = useCallback(() => {
+    if (containerRef.current) {
+      const { position, mode } = defaultProps;
+
+      // Only add animation if not in 'none' mode
+      if (mode !== 'none') {
+        // Add animation class first
+        containerRef.current.classList.add('is-animating-out');
+
+        // Capture container for setTimeout
+        const container = containerRef.current;
+
+        setTimeout(() => {
+          if (container) {
+            container.classList.remove('is-animating-out');
+          }
+        }, EDGE_PANEL.ANIMATION_DURATION);
+      }
+
+      // Then set transform
+      containerRef.current.style.transform = position ? EDGE_PANEL.TRANSFORM_VALUES[position] : '';
+
+      // Reset body padding if push mode
+      if (defaultProps.mode === 'push') {
+        resetBodyPadding();
+      }
+
+      // Wait for animation to complete before hiding
+      const hideDelay = mode === 'none' ? 0 : EDGE_PANEL.ANIMATION_DURATION;
+
+      setTimeout(() => {
+        setIsOpen(false);
+        document.body.classList.remove('is-edgepanel-open');
+
+        if (defaultProps.onOpenChange) {
+          defaultProps.onOpenChange(false);
+        }
+      }, hideDelay);
+    } else {
+      setIsOpen(false);
+      document.body.classList.remove('is-edgepanel-open');
+
+      if (defaultProps.onOpenChange) {
+        defaultProps.onOpenChange(false);
+      }
+    }
+  }, [defaultProps, resetBodyPadding]);
+
+  /**
+   * Handle Escape key press
+   */
+  const handleEscapeKey = useCallback(
+    (event: KeyboardEvent) => {
+      if (defaultProps.closeOnEscape && event.key === 'Escape' && isOpen) {
+        closePanel();
+      }
+    },
+    [closePanel, defaultProps.closeOnEscape, isOpen]
+  );
+
+  /**
+   * Handle backdrop click
+   */
+  const handleBackdropClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (defaultProps.closeOnBackdropClick && event.target === event.currentTarget) {
+        closePanel();
+      }
+    },
+    [closePanel, defaultProps.closeOnBackdropClick]
+  );
+
+  /**
+   * Set up event listeners for keyboard events
+   */
+  useEffect(() => {
+    if (isOpen && defaultProps.closeOnEscape) {
+      document.addEventListener('keydown', handleEscapeKey);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isOpen, handleEscapeKey, defaultProps.closeOnEscape]);
+
+  /**
+   * Set initial transform values
+   */
+  useEffect(() => {
+    if (containerRef.current) {
+      const { position, mode } = defaultProps;
+
+      if (!isOpen && (mode === 'slide' || mode === 'push') && position) {
+        containerRef.current.style.transform = EDGE_PANEL.TRANSFORM_VALUES[position];
+      }
+    }
+  }, [defaultProps.mode, defaultProps.position, isOpen]);
+
+  /**
+   * Sync with prop changes
+   */
+  useEffect(() => {
+    if (defaultProps.isOpen !== undefined && defaultProps.isOpen !== isOpen) {
+      if (defaultProps.isOpen) {
+        openPanel();
+      } else {
+        closePanel();
+      }
+    }
+  }, [defaultProps.isOpen, closePanel, isOpen, openPanel]);
+
+  return {
+    isOpen,
+    containerRef,
+    backdropRef,
+    generateEdgePanelClass,
+    openPanel,
+    closePanel,
+    handleBackdropClick,
+  };
+}

package/src/lib/composables/useForm.ts

@@ -0,0 +1,62 @@
+import { FormProps } from '../types/components';
+import { FORM } from '../constants/components';
+
+/**
+ * Form state and functionality
+ * @param initialProps - Initial form properties
+ * @returns Form state and methods
+ */
+export function useForm(initialProps?: Partial<FormProps>) {
+  // Default form properties
+  const defaultProps: Partial<FormProps> = {
+    disabled: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate form class based on properties
+   * @param props - Form properties
+   * @returns Class string
+   */
+  const generateFormClass = (props: Partial<FormProps>): string => {
+    const { disabled = defaultProps.disabled, className = '' } = props;
+
+    const disabledClass = disabled ? FORM.CLASSES.DISABLED : '';
+
+    return `${FORM.CLASSES.BASE} ${disabledClass} ${className}`.trim();
+  };
+
+  /**
+   * Handle form submission with disabled check
+   * @param handler - Submit handler function
+   * @returns Function that respects disabled state
+   */
+  const handleSubmit = (handler?: (event: React.FormEvent<HTMLFormElement>) => void) => {
+    return (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (!defaultProps.disabled && handler) {
+        handler(event);
+      }
+    };
+  };
+
+  /**
+   * Handle form reset with disabled check
+   * @param handler - Reset handler function
+   * @returns Function that respects disabled state
+   */
+  const handleReset = (handler?: (event: React.FormEvent<HTMLFormElement>) => void) => {
+    return (event: React.FormEvent<HTMLFormElement>) => {
+      if (!defaultProps.disabled && handler) {
+        handler(event);
+      }
+    };
+  };
+
+  return {
+    defaultProps,
+    generateFormClass,
+    handleSubmit,
+    handleReset,
+  };
+}

package/src/lib/composables/useFormGroup.ts

@@ -0,0 +1,51 @@
+import { FormGroupProps } from '../types/components';
+import { FORM_GROUP } from '../constants/components';
+
+/**
+ * Form Group state and functionality
+ * @param initialProps - Initial form group properties
+ * @returns Form Group state and methods
+ */
+export function useFormGroup(initialProps?: Partial<FormGroupProps>) {
+  // Default form group properties
+  const defaultProps: Partial<FormGroupProps> = {
+    size: 'md',
+    disabled: false,
+    invalid: false,
+    valid: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate form group class based on properties
+   * @param props - Form group properties
+   * @returns Class string
+   */
+  const generateFormGroupClass = (props: Partial<FormGroupProps>): string => {
+    const {
+      size = defaultProps.size,
+      disabled = defaultProps.disabled,
+      invalid = defaultProps.invalid,
+      valid = defaultProps.valid,
+      className = '',
+    } = props;
+
+    const sizeClass =
+      size === 'md' ? '' : size === 'sm' ? FORM_GROUP.CLASSES.SMALL : FORM_GROUP.CLASSES.LARGE;
+
+    const validationClass = invalid
+      ? FORM_GROUP.CLASSES.INVALID
+      : valid
+        ? FORM_GROUP.CLASSES.VALID
+        : '';
+
+    const disabledClass = disabled ? FORM_GROUP.CLASSES.DISABLED : '';
+
+    return `${FORM_GROUP.CLASSES.BASE} ${sizeClass} ${validationClass} ${disabledClass} ${className}`.trim();
+  };
+
+  return {
+    defaultProps,
+    generateFormGroupClass,
+  };
+}