@shohojdhara/atomix 0.1.26 → 0.1.28

package/src/lib/composables/useDropdown.ts

@@ -1,272 +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,261 +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,62 +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,51 +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,
-  };
-}