@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/lib/composables/useDropdown.ts

@@ -1,257 +0,0 @@
-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

@@ -1,258 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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,
-  };
-}