@shohojdhara/atomix 0.2.6 → 0.2.8

package/src/lib/composables/useHeroBackgroundSlider.ts

@@ -0,0 +1,228 @@
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { HeroBackgroundSliderConfig } from '../types/components';
+
+/**
+ * Hook result interface for hero background slider
+ */
+export interface UseHeroBackgroundSliderResult {
+  /**
+   * Current active slide index
+   */
+  currentIndex: number;
+
+  /**
+   * Whether a transition is currently in progress
+   */
+  isTransitioning: boolean;
+
+  /**
+   * Array of refs for slide container elements
+   */
+  slideRefs: React.RefObject<HTMLDivElement>[];
+
+  /**
+   * Array of refs for video elements
+   */
+  videoRefs: React.RefObject<HTMLVideoElement>[];
+
+  /**
+   * Handle slide transition to next index
+   */
+  handleSlideTransition: (nextIndex: number) => void;
+
+  /**
+   * Pause autoplay
+   */
+  pauseAutoplay: () => void;
+
+  /**
+   * Resume autoplay
+   */
+  resumeAutoplay: () => void;
+}
+
+/**
+ * Hook for Hero background slider functionality
+ * @param config - Background slider configuration
+ * @returns Slider state and methods
+ */
+export function useHeroBackgroundSlider(
+  config: HeroBackgroundSliderConfig
+): UseHeroBackgroundSliderResult {
+  const {
+    slides,
+    autoplay,
+    loop = true,
+    transition = 'fade',
+    transitionDuration = 1000,
+  } = config;
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
+  const isPausedRef = useRef(false);
+
+  // Create refs for slide containers
+  const slideRefs = useMemo(
+    () => slides.map(() => React.createRef<HTMLDivElement>()),
+    [slides.length]
+  );
+
+  // Create refs for video elements
+  const videoRefs = useMemo(
+    () => slides.map(() => React.createRef<HTMLVideoElement>()),
+    [slides.length]
+  );
+
+  /**
+   * Handle slide transition
+   */
+  const handleSlideTransition = useCallback(
+    (nextIndex: number) => {
+      if (nextIndex === currentIndex || isTransitioning) return;
+      if (nextIndex < 0 || nextIndex >= slides.length) return;
+
+      setIsTransitioning(true);
+
+      // Update current index
+      setCurrentIndex(nextIndex);
+
+      // Play video if it's a video slide
+      const currentVideo = videoRefs[nextIndex]?.current;
+      if (currentVideo && slides[nextIndex].type === 'video') {
+        const videoOptions = slides[nextIndex].videoOptions || {};
+        if (videoOptions.autoplay !== false) {
+          currentVideo.play().catch(() => {
+            // Ignore autoplay errors
+          });
+        }
+      }
+
+      // Pause previous video if it exists
+      const prevVideo = videoRefs[currentIndex]?.current;
+      if (prevVideo && slides[currentIndex].type === 'video') {
+        prevVideo.pause();
+      }
+
+      // Reset transitioning state after transition duration
+      setTimeout(() => {
+        setIsTransitioning(false);
+      }, transitionDuration);
+    },
+    [currentIndex, isTransitioning, slides, videoRefs, transitionDuration]
+  );
+
+  /**
+   * Move to next slide
+   */
+  const nextSlide = useCallback(() => {
+    if (slides.length === 0) return;
+
+    let nextIndex: number;
+    if (loop) {
+      nextIndex = (currentIndex + 1) % slides.length;
+    } else {
+      nextIndex = Math.min(currentIndex + 1, slides.length - 1);
+    }
+
+    handleSlideTransition(nextIndex);
+  }, [currentIndex, slides.length, loop, handleSlideTransition]);
+
+  /**
+   * Pause autoplay
+   */
+  const pauseAutoplay = useCallback(() => {
+    isPausedRef.current = true;
+    if (autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+      autoplayRef.current = null;
+    }
+  }, []);
+
+  /**
+   * Resume autoplay
+   */
+  const resumeAutoplay = useCallback(() => {
+    if (isPausedRef.current && autoplay && slides.length > 1) {
+      isPausedRef.current = false;
+      const delay = typeof autoplay === 'object' ? autoplay.delay : 3000;
+      
+      // Restart autoplay
+      if (!autoplayRef.current) {
+        autoplayRef.current = setInterval(() => {
+          if (!isPausedRef.current && !isTransitioning) {
+            nextSlide();
+          }
+        }, delay);
+      }
+    }
+  }, [autoplay, slides.length, nextSlide, isTransitioning]);
+
+  // Autoplay effect
+  useEffect(() => {
+    if (!autoplay || slides.length <= 1) {
+      return;
+    }
+
+    const delay = typeof autoplay === 'object' ? autoplay.delay : 3000;
+    const pauseOnHover = typeof autoplay === 'object' ? autoplay.pauseOnHover : false;
+
+    // Clear any existing interval
+    if (autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+      autoplayRef.current = null;
+    }
+
+    // Start autoplay if not paused
+    if (!isPausedRef.current) {
+      autoplayRef.current = setInterval(() => {
+        if (!isPausedRef.current && !isTransitioning) {
+          nextSlide();
+        }
+      }, delay);
+    }
+
+    return () => {
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+      }
+    };
+  }, [autoplay, slides.length, nextSlide, isTransitioning]);
+
+  // Initialize first video if needed
+  useEffect(() => {
+    if (slides.length > 0 && slides[currentIndex]?.type === 'video') {
+      const video = videoRefs[currentIndex]?.current;
+      if (video) {
+        const videoOptions = slides[currentIndex].videoOptions || {};
+        if (videoOptions.autoplay !== false) {
+          video.play().catch(() => {
+            // Ignore autoplay errors
+          });
+        }
+      }
+    }
+  }, [currentIndex, slides, videoRefs]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+      }
+    };
+  }, []);
+
+  return {
+    currentIndex,
+    isTransitioning,
+    slideRefs,
+    videoRefs,
+    handleSlideTransition,
+    pauseAutoplay,
+    resumeAutoplay,
+  };
+}
+

package/src/lib/composables/useInput.ts

@@ -6,7 +6,14 @@ import { INPUT } from '../constants/components';
  * @param initialProps - Initial input properties
  * @returns Input state and methods
  */
-export function useInput(initialProps?: Partial<InputProps>) {
+export function useInput(initialProps?: Partial<InputProps> & {
+  prefixIcon?: boolean;
+  suffixIcon?: boolean;
+  clearable?: boolean;
+  showCounter?: boolean;
+  showPasswordToggle?: boolean;
+  fullWidth?: boolean;
+}) {
   // Default input properties
   const defaultProps: Partial<InputProps> = {
     size: 'md',
@@ -51,8 +58,39 @@ export function useInput(initialProps?: Partial<InputProps>) {
     return `${INPUT.CLASSES.BASE} ${sizeClass} ${variantClass} ${textareaClass} ${validationClass} ${disabledClass} ${className}`.trim();
   };
 
+  /**
+   * Generate wrapper class based on properties
+   * @param props - Wrapper properties
+   * @returns Class string
+   */
+  const generateWrapperClass = (props: { className?: string }): string => {
+    const { className = '' } = props;
+    const {
+      prefixIcon = false,
+      suffixIcon = false,
+      clearable = false,
+      showCounter = false,
+      showPasswordToggle = false,
+      fullWidth = false,
+    } = initialProps || {};
+
+    const classes = [INPUT.ELEMENTS.WRAPPER];
+
+    if (prefixIcon) classes.push(INPUT.CLASSES.PREFIX_ICON);
+    if (suffixIcon || clearable || showPasswordToggle) classes.push(INPUT.CLASSES.SUFFIX_ICON);
+    if (clearable) classes.push(INPUT.CLASSES.CLEARABLE);
+    if (showCounter) classes.push(INPUT.CLASSES.WITH_COUNTER);
+    if (showPasswordToggle) classes.push(INPUT.CLASSES.PASSWORD_TOGGLE);
+    if (fullWidth) classes.push(INPUT.CLASSES.FULL_WIDTH);
+
+    if (className) classes.push(className);
+
+    return classes.filter(Boolean).join(' ');
+  };
+
   return {
     defaultProps,
     generateInputClass,
+    generateWrapperClass,
   };
 }

package/src/lib/constants/components.ts

@@ -35,7 +35,17 @@ export const CLASS_PREFIX = {
 export const BUTTON = {
   BASE_CLASS: 'c-btn',
   ICON_CLASS: 'c-btn__icon',
+  LABEL_CLASS: 'c-btn__label',
+  SPINNER_CLASS: 'c-btn__spinner',
   VARIANT_PREFIX: 'c-btn--',
+  CLASSES: {
+    BASE: 'c-btn',
+    LOADING: 'c-btn--loading',
+    FULL_WIDTH: 'c-btn--full-width',
+    BLOCK: 'c-btn--block',
+    ACTIVE: 'c-btn--active',
+    SELECTED: 'c-btn--selected',
+  },
 };
 
 /**
@@ -177,12 +187,18 @@ export const HERO = {
     BG_IMAGE: '.c-hero__bg-image',
     OVERLAY: '.c-hero__overlay',
     IMAGE_WRAPPER: '.c-hero__image-wrapper',
+    SLIDER: '.c-hero__slider',
+    SLIDER_ITEM: '.c-hero__slider-item',
   },
   CLASSES: {
     CENTER: 'c-hero--center',
     RIGHT: 'c-hero--right',
     LEFT: 'c-hero--left',
     FULL_VH: 'c-hero--full-vh',
+    SLIDER_FADE: 'c-hero__slider--fade',
+    SLIDER_SLIDE: 'c-hero__slider--slide',
+    SLIDER_CUSTOM: 'c-hero__slider--custom',
+    SLIDER_ITEM_ACTIVE: 'c-hero__slider-item--active',
   },
 };
 
@@ -724,6 +740,22 @@ export const INPUT = {
     INVALID: 'is-invalid',
     VALID: 'is-valid',
     DISABLED: 'is-disabled',
+    FULL_WIDTH: 'c-input--full-width',
+    PREFIX_ICON: 'c-input--prefix-icon',
+    SUFFIX_ICON: 'c-input--suffix-icon',
+    CLEARABLE: 'c-input--clearable',
+    WITH_COUNTER: 'c-input--with-counter',
+    PASSWORD_TOGGLE: 'c-input--password-toggle',
+  },
+  ELEMENTS: {
+    WRAPPER: 'c-input-wrapper',
+    PREFIX: 'c-input__prefix',
+    SUFFIX: 'c-input__suffix',
+    CLEAR_BUTTON: 'c-input__clear',
+    PASSWORD_TOGGLE: 'c-input__password-toggle',
+    COUNTER: 'c-input__counter',
+    ERROR_MESSAGE: 'c-input__error',
+    HELPER_TEXT: 'c-input__helper',
   },
 };
 
@@ -766,15 +798,42 @@ export const CARD = {
   },
   CLASSES: {
     BASE: 'c-card',
+    // Size modifiers
+    SM: 'c-card--sm',
+    MD: 'c-card--md',
+    LG: 'c-card--lg',
+    // Layout modifiers
     ROW: 'c-card--row',
     FLAT: 'c-card--flat',
+    // Appearance modifiers
+    FILLED: 'c-card--filled',
+    OUTLINED: 'c-card--outlined',
+    GHOST: 'c-card--ghost',
+    ELEVATED: 'c-card--elevated',
+    // Elevation modifiers
+    ELEVATION_NONE: 'c-card--elevation-none',
+    ELEVATION_SM: 'c-card--elevation-sm',
+    ELEVATION_MD: 'c-card--elevation-md',
+    ELEVATION_LG: 'c-card--elevation-lg',
+    ELEVATION_XL: 'c-card--elevation-xl',
+    // State modifiers
     ACTIVE: 'is-active',
+    DISABLED: 'c-card--disabled',
+    LOADING: 'c-card--loading',
+    SELECTED: 'c-card--selected',
+    INTERACTIVE: 'c-card--interactive',
+    // Other modifiers
     FLIPPED: 'is-flipped',
     FOCUSED: 'is-focused',
     CLICKABLE: 'is-clickable',
+    GLASS: 'c-card--glass',
   },
   DEFAULTS: {
     HOVER: true,
+    SIZE: 'md',
+    VARIANT: 'primary',
+    APPEARANCE: 'filled',
+    ELEVATION: 'none',
   },
 };