@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/lib/composables/useSideMenu.ts

@@ -0,0 +1,197 @@
+import { useState, useEffect, useRef } from 'react';
+import { SideMenuProps, SideMenuItemProps } from '../types/components';
+import { SIDE_MENU } from '../constants/components';
+
+/**
+ * SideMenu state and functionality
+ * @param initialProps - Initial side menu properties
+ * @returns SideMenu state and methods
+ */
+export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
+  // Default side menu properties
+  const defaultProps: Partial<SideMenuProps> = {
+    collapsible: true,
+    isOpen: false,
+    ...initialProps,
+  };
+
+  // Local open state for when not controlled externally
+  const [isOpenState, setIsOpenState] = useState(defaultProps.isOpen || false);
+
+  // Refs for managing responsive behavior
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+
+  // Update local state when external state changes
+  useEffect(() => {
+    if (typeof defaultProps.isOpen !== 'undefined') {
+      setIsOpenState(defaultProps.isOpen);
+    }
+  }, [defaultProps.isOpen]);
+
+  // Handle responsive behavior - auto-open on desktop, controlled on mobile
+  useEffect(() => {
+    const handleResize = () => {
+      const isMobile = window.innerWidth < 768; // MD breakpoint
+
+      if (!isMobile && defaultProps.collapsible) {
+        // Auto-open on desktop
+        if (typeof defaultProps.onToggle === 'function') {
+          defaultProps.onToggle(true);
+        } else {
+          setIsOpenState(true);
+        }
+
+        // Reset wrapper height on desktop
+        if (wrapperRef.current) {
+          wrapperRef.current.style.height = 'auto';
+        }
+      } else if (isMobile && wrapperRef.current && innerRef.current) {
+        // Set proper height for mobile animation
+        const currentOpen =
+          typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+        if (currentOpen) {
+          wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+        } else {
+          wrapperRef.current.style.height = '0px';
+        }
+      }
+    };
+
+    handleResize(); // Initial call
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [defaultProps.collapsible, defaultProps.isOpen, defaultProps.onToggle, isOpenState]);
+
+  // Update wrapper height when open state changes on mobile
+  useEffect(() => {
+    const isMobile = window.innerWidth < 768;
+
+    if (isMobile && wrapperRef.current && innerRef.current && defaultProps.collapsible) {
+      const currentOpen =
+        typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+
+      if (currentOpen) {
+        wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+      } else {
+        wrapperRef.current.style.height = '0px';
+      }
+    }
+  }, [defaultProps.isOpen, isOpenState, defaultProps.collapsible]);
+
+  /**
+   * Generate side menu class based on properties
+   * @param props - Side menu properties
+   * @returns Class string
+   */
+  const generateSideMenuClass = (props: Partial<SideMenuProps & { isOpen?: boolean }>): string => {
+    const { className = '', isOpen = false } = props;
+
+    const openClass = isOpen ? SIDE_MENU.CLASSES.IS_OPEN : '';
+
+    return `${SIDE_MENU.CLASSES.BASE} ${openClass} ${className}`.trim();
+  };
+
+  /**
+   * Generate wrapper class
+   * @returns Class string
+   */
+  const generateWrapperClass = (): string => {
+    return SIDE_MENU.CLASSES.WRAPPER;
+  };
+
+  /**
+   * Handle toggle click
+   */
+  const handleToggle = () => {
+    if (defaultProps.disabled) return;
+
+    const newState =
+      typeof defaultProps.isOpen !== 'undefined' ? !defaultProps.isOpen : !isOpenState;
+
+    if (typeof defaultProps.onToggle === 'function') {
+      // Controlled component
+      defaultProps.onToggle(newState);
+    } else {
+      // Uncontrolled component
+      setIsOpenState(newState);
+    }
+  };
+
+  /**
+   * Get current open state
+   * @returns Current open state
+   */
+  const getCurrentOpenState = (): boolean => {
+    return typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+  };
+
+  return {
+    defaultProps,
+    isOpenState: getCurrentOpenState(),
+    wrapperRef,
+    innerRef,
+    generateSideMenuClass,
+    generateWrapperClass,
+    handleToggle,
+    getCurrentOpenState,
+  };
+}
+
+/**
+ * SideMenuItem state and functionality
+ * @param initialProps - Initial side menu item properties
+ * @returns SideMenuItem state and methods
+ */
+export function useSideMenuItem(initialProps?: Partial<SideMenuItemProps>) {
+  // Default side menu item properties
+  const defaultProps: Partial<SideMenuItemProps> = {
+    active: false,
+    disabled: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate side menu item class based on properties
+   * @returns Class string
+   */
+  const generateSideMenuItemClass = (): string => {
+    const {
+      active = defaultProps.active,
+      disabled = defaultProps.disabled,
+      className = '',
+    } = defaultProps;
+
+    const activeClass = active ? SIDE_MENU.CLASSES.ACTIVE : '';
+    const disabledClass = disabled ? SIDE_MENU.CLASSES.DISABLED : '';
+
+    return `${SIDE_MENU.CLASSES.LINK} ${activeClass} ${disabledClass} ${className}`.trim();
+  };
+
+  /**
+   * Handle side menu item click with disabled check
+   * @param handler - Click handler function
+   * @returns Function that respects disabled state
+   */
+  const handleClick = (handler?: (event: React.MouseEvent) => void) => {
+    return (e: React.MouseEvent) => {
+      if (defaultProps.disabled) {
+        e.preventDefault();
+        return;
+      }
+
+      if (handler) {
+        handler(e);
+      }
+    };
+  };
+
+  return {
+    defaultProps,
+    generateSideMenuItemClass,
+    handleClick,
+  };
+}

package/src/lib/composables/useSlider.ts

@@ -0,0 +1,339 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SliderProps, SliderSlide, SliderState } from '../types/components';
+
+export interface UseSliderOptions extends Omit<SliderProps, 'slides' | 'children'> {
+  slides: SliderSlide[];
+}
+
+export interface UseSliderReturn extends SliderState {
+  slideNext: () => void;
+  slidePrev: () => void;
+  goToSlide: (index: number) => void;
+  canSlideNext: boolean;
+  canSlidePrev: boolean;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  wrapperRef: React.RefObject<HTMLDivElement | null>;
+  handleTouchStart: (e: React.TouchEvent | React.MouseEvent) => void;
+  handleTouchMove: (e: React.TouchEvent | React.MouseEvent) => void;
+  handleTouchEnd: (e: React.TouchEvent | React.MouseEvent) => void;
+  allSlides: SliderSlide[];
+  translateValue: number;
+  slideWidth: number;
+  currentSlidesToShow: number;
+  loopedSlides: number;
+  repositioningRef: React.RefObject<boolean>;
+}
+
+export function useSlider(options: UseSliderOptions): UseSliderReturn {
+  const {
+    slides,
+    slidesToShow = 1,
+    spaceBetween = 0,
+    loop = false,
+    initialSlide = 0,
+    direction = 'horizontal',
+    speed = 300,
+    allowTouchMove = true,
+    threshold = 50,
+    onSlideChange,
+  } = options;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const repositioningRef = useRef(false);
+
+  const [realIndex, setRealIndex] = useState(initialSlide);
+  const [internalIndex, setInternalIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [containerSize, setContainerSize] = useState(0);
+  const [touching, setTouching] = useState(false);
+  const [touchStart, setTouchStart] = useState(0);
+  const [dragOffset, setDragOffset] = useState(0);
+
+  const slideWidth = useMemo(() => {
+    if (containerSize === 0) return 0;
+    return (containerSize - spaceBetween * (slidesToShow - 1)) / slidesToShow;
+  }, [containerSize, spaceBetween, slidesToShow]);
+
+  const allSlides = useMemo(() => {
+    if (!loop || slides.length === 0) return slides;
+
+    // Create unique keys for each set
+    const firstSet = slides.map((slide, i) => ({ ...slide, id: `set1-${slide.id || i}` }));
+    const secondSet = slides.map((slide, i) => ({ ...slide, id: `set2-${slide.id || i}` }));
+    const thirdSet = slides.map((slide, i) => ({ ...slide, id: `set3-${slide.id || i}` }));
+
+    return [...firstSet, ...secondSet, ...thirdSet];
+  }, [slides, loop]);
+
+  const loopedSlides = slides.length;
+
+  const translateValue = useMemo(() => {
+    if (slideWidth === 0) return 0;
+    return -(internalIndex * slideWidth) + dragOffset;
+  }, [slideWidth, internalIndex, dragOffset]);
+
+  // Initialize
+  useEffect(() => {
+    if (loop) {
+      setInternalIndex(slides.length + initialSlide); // Start in middle set
+    } else {
+      setInternalIndex(initialSlide);
+    }
+  }, [loop, slides.length, initialSlide]);
+
+  useEffect(() => {
+    const updateSize = () => {
+      if (containerRef.current) {
+        const size =
+          direction === 'horizontal'
+            ? containerRef.current.offsetWidth
+            : containerRef.current.offsetHeight;
+        setContainerSize(size);
+      }
+    };
+    updateSize();
+    window.addEventListener('resize', updateSize);
+    return () => window.removeEventListener('resize', updateSize);
+  }, [direction]);
+
+  const slideNext = useCallback(() => {
+    if (isTransitioning) return;
+
+    if (loop) {
+      const nextRealIndex = (realIndex + 1) % slides.length;
+      const nextInternalIndex = internalIndex + 1;
+
+      setRealIndex(nextRealIndex);
+      setInternalIndex(nextInternalIndex);
+      setIsTransitioning(true);
+      setDragOffset(0);
+
+      setTimeout(() => {
+        setIsTransitioning(false);
+        onSlideChange?.(nextRealIndex);
+
+        // Reposition after transition ends
+        if (nextInternalIndex >= slides.length * 2) {
+          repositioningRef.current = true;
+          setInternalIndex(slides.length + nextRealIndex);
+          setTimeout(() => {
+            repositioningRef.current = false;
+          }, 0);
+        }
+      }, speed);
+    } else {
+      const nextIndex = Math.min(realIndex + 1, slides.length - slidesToShow);
+      setRealIndex(nextIndex);
+      setInternalIndex(nextIndex);
+      setIsTransitioning(true);
+      setDragOffset(0);
+
+      setTimeout(() => {
+        setIsTransitioning(false);
+        onSlideChange?.(nextIndex);
+      }, speed);
+    }
+  }, [
+    realIndex,
+    internalIndex,
+    slides.length,
+    slidesToShow,
+    loop,
+    isTransitioning,
+    speed,
+    onSlideChange,
+    allSlides.length,
+    loopedSlides,
+  ]);
+
+  const slidePrev = useCallback(() => {
+    if (isTransitioning) return;
+
+    if (loop) {
+      const prevRealIndex = realIndex === 0 ? slides.length - 1 : realIndex - 1;
+      const prevInternalIndex = internalIndex - 1;
+
+      setRealIndex(prevRealIndex);
+      setInternalIndex(prevInternalIndex);
+      setIsTransitioning(true);
+      setDragOffset(0);
+
+      setTimeout(() => {
+        setIsTransitioning(false);
+        onSlideChange?.(prevRealIndex);
+
+        // Reposition after transition ends
+        if (prevInternalIndex < slides.length) {
+          repositioningRef.current = true;
+          setInternalIndex(slides.length + prevRealIndex);
+          setTimeout(() => {
+            repositioningRef.current = false;
+          }, 0);
+        }
+      }, speed);
+    } else {
+      const prevIndex = Math.max(realIndex - 1, 0);
+      setRealIndex(prevIndex);
+      setInternalIndex(prevIndex);
+      setIsTransitioning(true);
+      setDragOffset(0);
+
+      setTimeout(() => {
+        setIsTransitioning(false);
+        onSlideChange?.(prevIndex);
+      }, speed);
+    }
+  }, [
+    realIndex,
+    internalIndex,
+    slides.length,
+    loop,
+    isTransitioning,
+    speed,
+    onSlideChange,
+    allSlides.length,
+    loopedSlides,
+  ]);
+
+  const goToSlide = useCallback(
+    (index: number) => {
+      if (isTransitioning || index === realIndex) return;
+
+      setIsTransitioning(true);
+      setDragOffset(0);
+
+      setRealIndex(index);
+      setInternalIndex(loop ? slides.length + index : index);
+
+      setTimeout(() => {
+        setIsTransitioning(false);
+        onSlideChange?.(index);
+      }, speed);
+    },
+    [realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides]
+  );
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent | React.MouseEvent) => {
+      if (!allowTouchMove) return;
+
+      const client =
+        direction === 'horizontal'
+          ? 'touches' in e
+            ? e.touches[0]?.clientX || 0
+            : e.clientX
+          : 'touches' in e
+            ? e.touches[0]?.clientY || 0
+            : e.clientY;
+      setTouchStart(client);
+      setTouching(true);
+      setDragOffset(0);
+    },
+    [allowTouchMove, direction]
+  );
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent | React.MouseEvent) => {
+      if (!touching || !allowTouchMove) return;
+
+      const client =
+        direction === 'horizontal'
+          ? 'touches' in e
+            ? e.touches[0]?.clientX || 0
+            : e.clientX
+          : 'touches' in e
+            ? e.touches[0]?.clientY || 0
+            : e.clientY;
+      const diff = touchStart - client;
+
+      if (Math.abs(diff) > 10) {
+        e.preventDefault();
+        setDragOffset(-diff * 0.5);
+      }
+    },
+    [touching, touchStart, allowTouchMove, direction]
+  );
+
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent | React.MouseEvent) => {
+      if (!touching || !allowTouchMove) return;
+
+      const client =
+        direction === 'horizontal'
+          ? 'changedTouches' in e
+            ? e.changedTouches[0]?.clientX || 0
+            : e.clientX
+          : 'changedTouches' in e
+            ? e.changedTouches[0]?.clientY || 0
+            : e.clientY;
+      const diff = touchStart - client;
+
+      setTouching(false);
+      setDragOffset(0);
+
+      if (Math.abs(diff) > threshold) {
+        if (diff > 0) {
+          slideNext();
+        } else {
+          slidePrev();
+        }
+      }
+    },
+    [touching, touchStart, threshold, slideNext, slidePrev, allowTouchMove, direction]
+  );
+
+  const canSlideNext = loop || realIndex < slides.length - slidesToShow;
+  const canSlidePrev = loop || realIndex > 0;
+
+  return {
+    activeIndex: realIndex,
+    realIndex,
+    previousIndex: realIndex,
+    isBeginning: !loop && realIndex === 0,
+    isEnd: !loop && realIndex >= slides.length - slidesToShow,
+    progress: slides.length > 0 ? realIndex / (slides.length - 1) : 0,
+    autoplayRunning: false,
+    transitioning: isTransitioning,
+    touching,
+    translate: translateValue,
+    slidesPerView: slidesToShow,
+    slidesCount: slides.length,
+    isLocked: false,
+    destroyed: false,
+    size: containerSize,
+    touches: {
+      startX: 0,
+      startY: 0,
+      currentX: 0,
+      currentY: 0,
+      diff: 0,
+    },
+    allowSlideNext: canSlideNext,
+    allowSlidePrev: canSlidePrev,
+    allowTouchMove,
+    animating: isTransitioning,
+    enabled: true,
+    initialized: true,
+
+    slideNext,
+    slidePrev,
+    goToSlide,
+    canSlideNext,
+    canSlidePrev,
+
+    containerRef,
+    wrapperRef,
+
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+
+    allSlides,
+    translateValue,
+    slideWidth,
+    currentSlidesToShow: slidesToShow,
+    loopedSlides,
+    repositioningRef,
+  };
+}

package/src/lib/composables/useSpinner.ts

@@ -0,0 +1,42 @@
+import { SpinnerProps } from '../types/components';
+
+/**
+ * Spinner state and functionality
+ * @param initialProps - Initial spinner properties
+ * @returns Spinner state and methods
+ */
+export function useSpinner(initialProps?: Partial<SpinnerProps>) {
+  // Default spinner properties
+  const defaultProps: Partial<SpinnerProps> = {
+    variant: 'primary',
+    size: 'md',
+    fullscreen: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate spinner class based on properties
+   * @param props - Spinner properties
+   * @returns Class string
+   */
+  const generateSpinnerClass = (props: Partial<SpinnerProps>): string => {
+    const {
+      variant = defaultProps.variant,
+      size = defaultProps.size,
+      fullscreen = defaultProps.fullscreen,
+      className = '',
+    } = props;
+
+    const baseClass = 'c-spinner';
+    const variantClass = variant ? `${baseClass}--${variant}` : '';
+    const sizeClass = size !== 'md' ? `${baseClass}--${size}` : '';
+    const fullscreenClass = fullscreen ? `${baseClass}--fullscreen` : '';
+
+    return `${baseClass} ${variantClass} ${sizeClass} ${fullscreenClass} ${className}`.trim();
+  };
+
+  return {
+    defaultProps,
+    generateSpinnerClass,
+  };
+}

package/src/lib/composables/useTextarea.ts

@@ -0,0 +1,55 @@
+import { TextareaProps } from '../types/components';
+import { TEXTAREA } from '../constants/components';
+
+/**
+ * Textarea state and functionality
+ * @param initialProps - Initial textarea properties
+ * @returns Textarea state and methods
+ */
+export function useTextarea(initialProps?: Partial<TextareaProps>) {
+  // Default textarea properties
+  const defaultProps: Partial<TextareaProps> = {
+    size: 'md',
+    disabled: false,
+    invalid: false,
+    valid: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate textarea class based on properties
+   * @param props - Textarea properties
+   * @returns Class string
+   */
+  const generateTextareaClass = (props: Partial<TextareaProps>): string => {
+    const {
+      size = defaultProps.size,
+      variant = defaultProps.variant,
+      disabled = defaultProps.disabled,
+      invalid = defaultProps.invalid,
+      valid = defaultProps.valid,
+      className = '',
+    } = props;
+
+    const sizeClass =
+      size === 'md' ? '' : size === 'sm' ? TEXTAREA.CLASSES.SMALL : TEXTAREA.CLASSES.LARGE;
+
+    const variantClass = variant ? `c-input--${variant}` : '';
+
+    let validationClass = '';
+    if (invalid) {
+      validationClass = TEXTAREA.CLASSES.INVALID;
+    } else if (valid) {
+      validationClass = TEXTAREA.CLASSES.VALID;
+    }
+
+    const disabledClass = disabled ? TEXTAREA.CLASSES.DISABLED : '';
+
+    return `${TEXTAREA.CLASSES.BASE} ${sizeClass} ${variantClass} ${validationClass} ${disabledClass} ${className}`.trim();
+  };
+
+  return {
+    defaultProps,
+    generateTextareaClass,
+  };
+}