@shohojdhara/atomix 0.2.1 → 0.2.2

package/src/lib/composables/useFooter.ts

@@ -0,0 +1,85 @@
+import { FooterLayout, ThemeColor, Size, SocialLink } from '../types/components';
+import { FOOTER } from '../constants/components';
+
+export interface UseFooterOptions {
+  layout?: FooterLayout;
+  variant?: ThemeColor;
+  size?: Size;
+  sticky?: boolean;
+  showNewsletter?: boolean;
+  showBackToTop?: boolean;
+  socialLinks?: SocialLink[];
+  onNewsletterSubmit?: (email: string) => void | Promise<void>;
+  onBackToTop?: () => void;
+  className?: string;
+}
+
+
+
+export function useFooter(options: UseFooterOptions = {}) {
+  const {
+    layout = FOOTER.DEFAULTS.LAYOUT,
+    variant = FOOTER.DEFAULTS.VARIANT,
+    size = FOOTER.DEFAULTS.SIZE,
+    sticky = FOOTER.DEFAULTS.STICKY,
+    showNewsletter = FOOTER.DEFAULTS.SHOW_NEWSLETTER,
+    showBackToTop = FOOTER.DEFAULTS.SHOW_BACK_TO_TOP,
+    socialLinks = [],
+    onNewsletterSubmit,
+    onBackToTop,
+    className = '',
+  } = options;
+
+  // Generate footer classes
+  const footerClass = (() => {
+    const classes = [
+      FOOTER.CLASSES.BASE,
+      FOOTER.CLASSES[layout.toUpperCase() as keyof typeof FOOTER.CLASSES] || FOOTER.CLASSES.COLUMNS,
+      `c-footer--${variant}`,
+      FOOTER.CLASSES[size.toUpperCase() as keyof typeof FOOTER.CLASSES] || FOOTER.CLASSES.MD,
+      sticky && FOOTER.CLASSES.STICKY,
+      className,
+    ];
+    return classes.filter(Boolean).join(' ');
+  })();
+
+  const containerClass = FOOTER.CLASSES.CONTAINER;
+  const brandClass = FOOTER.CLASSES.BRAND;
+  const sectionsClass = (() => {
+    const classes = [
+      FOOTER.CLASSES.SECTIONS,
+      layout === 'columns' && 'c-footer__sections--columns',
+      layout === 'centered' && 'c-footer__sections--centered',
+      layout === 'stacked' && 'c-footer__sections--stacked',
+    ];
+    return classes.filter(Boolean).join(' ');
+  })();
+  const bottomClass = FOOTER.CLASSES.BOTTOM;
+
+  // Handle newsletter submission
+  const handleNewsletterSubmit = (email: string) => {
+    if (onNewsletterSubmit) {
+      onNewsletterSubmit(email);
+    }
+  };
+
+  // Handle back to top
+  const handleBackToTop = () => {
+    if (onBackToTop) {
+      onBackToTop();
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  return {
+    footerClass,
+    containerClass,
+    brandClass,
+    sectionsClass,
+    bottomClass,
+    handleNewsletterSubmit,
+    handleBackToTop,
+    socialLinks,
+  };
+}

package/src/lib/composables/useSlider.ts

@@ -35,12 +35,15 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     speed = 300,
     allowTouchMove = true,
     threshold = 50,
+    autoplay,
     onSlideChange,
   } = options;
 
   const containerRef = useRef<HTMLDivElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const repositioningRef = useRef(false);
+  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
+  const [autoplayRunning, setAutoplayRunning] = useState(false);
 
   const [realIndex, setRealIndex] = useState(initialSlide);
   const [internalIndex, setInternalIndex] = useState(0);
@@ -73,6 +76,160 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     return -(internalIndex * slideWidth) + dragOffset;
   }, [slideWidth, internalIndex, dragOffset]);
 
+  // Autoplay effect
+  useEffect(() => {
+    if (!autoplay) {
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+      }
+      setAutoplayRunning(false);
+      return;
+    }
+
+    const autoplayParams = typeof autoplay === 'boolean' ? { delay: 3000 } : autoplay;
+    const { delay = 3000, pauseOnMouseEnter = false, disableOnInteraction = false, reverseDirection = false } = autoplayParams;
+
+    // Clear any existing interval
+    if (autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+    }
+
+    // Create new interval
+    autoplayRef.current = setInterval(() => {
+      // We need to use a functional update to get the latest values
+      setRealIndex(prevRealIndex => {
+        if (isTransitioning) return prevRealIndex;
+        
+        // Stop autoplay on interaction if disableOnInteraction is true
+        if (disableOnInteraction && autoplayRef.current) {
+          clearInterval(autoplayRef.current);
+          autoplayRef.current = null;
+          setAutoplayRunning(false);
+        }
+
+        let nextIndex;
+        if (loop) {
+          nextIndex = (prevRealIndex + 1) % slides.length;
+        } else {
+          nextIndex = Math.min(prevRealIndex + 1, slides.length - slidesToShow);
+        }
+        
+        // Trigger the slide change
+        if (reverseDirection) {
+          // For reverse direction, we would go to previous slide
+          const prevIndex = loop ? (prevRealIndex === 0 ? slides.length - 1 : prevRealIndex - 1) : Math.max(prevRealIndex - 1, 0);
+          setInternalIndex(loop ? slides.length + prevIndex : prevIndex);
+          setIsTransitioning(true);
+          setDragOffset(0);
+
+          setTimeout(() => {
+            setIsTransitioning(false);
+            onSlideChange?.(prevIndex);
+          }, speed);
+          
+          return prevIndex;
+        } else {
+          // Normal direction
+          setInternalIndex(loop ? slides.length + nextIndex : nextIndex);
+          setIsTransitioning(true);
+          setDragOffset(0);
+
+          setTimeout(() => {
+            setIsTransitioning(false);
+            onSlideChange?.(nextIndex);
+            
+            // Reposition after transition ends for looped sliders
+            if (loop && nextIndex >= slides.length * 2) {
+              repositioningRef.current = true;
+              setInternalIndex(slides.length + nextIndex);
+              setTimeout(() => {
+                repositioningRef.current = false;
+              }, 0);
+            }
+          }, speed);
+          
+          return nextIndex;
+        }
+      });
+    }, delay);
+    
+    setAutoplayRunning(true);
+
+    // Handle pause on mouse enter/leave if enabled
+    let containerElement: HTMLDivElement | null = null;
+    const handleMouseEnter = () => {
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+        setAutoplayRunning(false);
+      }
+    };
+    
+    const handleMouseLeave = () => {
+      // Restart autoplay
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+      }
+      
+      autoplayRef.current = setInterval(() => {
+        setRealIndex(prevRealIndex => {
+          if (isTransitioning) return prevRealIndex;
+          
+          let nextIndex;
+          if (loop) {
+            nextIndex = (prevRealIndex + 1) % slides.length;
+          } else {
+            nextIndex = Math.min(prevRealIndex + 1, slides.length - slidesToShow);
+          }
+          
+          setInternalIndex(loop ? slides.length + nextIndex : nextIndex);
+          setIsTransitioning(true);
+          setDragOffset(0);
+
+          setTimeout(() => {
+            setIsTransitioning(false);
+            onSlideChange?.(nextIndex);
+            
+            if (loop) {
+              // Reposition after transition ends
+              if (nextIndex >= slides.length * 2) {
+                repositioningRef.current = true;
+                setInternalIndex(slides.length + nextIndex);
+                setTimeout(() => {
+                  repositioningRef.current = false;
+                }, 0);
+              }
+            }
+          }, speed);
+          
+          return nextIndex;
+        });
+      }, delay);
+      
+      setAutoplayRunning(true);
+    };
+
+    if (pauseOnMouseEnter && containerRef.current) {
+      containerElement = containerRef.current;
+      containerElement.addEventListener('mouseenter', handleMouseEnter);
+      containerElement.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    // Cleanup
+    return () => {
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+      }
+      if (containerElement) {
+        containerElement.removeEventListener('mouseenter', handleMouseEnter);
+        containerElement.removeEventListener('mouseleave', handleMouseLeave);
+      }
+      setAutoplayRunning(false);
+    };
+  }, [autoplay, slides.length, loop, slidesToShow, isTransitioning, speed, onSlideChange, repositioningRef]);
+
   // Initialize
   useEffect(() => {
     if (loop) {
@@ -100,6 +257,13 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
   const slideNext = useCallback(() => {
     if (isTransitioning) return;
 
+    // Stop autoplay on interaction if disableOnInteraction is true
+    if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+      autoplayRef.current = null;
+      setAutoplayRunning(false);
+    }
+
     if (loop) {
       const nextRealIndex = (realIndex + 1) % slides.length;
       const nextInternalIndex = internalIndex + 1;
@@ -145,11 +309,19 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
     allSlides.length,
     loopedSlides,
+    autoplay
   ]);
 
   const slidePrev = useCallback(() => {
     if (isTransitioning) return;
 
+    // Stop autoplay on interaction if disableOnInteraction is true
+    if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+      autoplayRef.current = null;
+      setAutoplayRunning(false);
+    }
+
     if (loop) {
       const prevRealIndex = realIndex === 0 ? slides.length - 1 : realIndex - 1;
       const prevInternalIndex = internalIndex - 1;
@@ -194,12 +366,20 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
     allSlides.length,
     loopedSlides,
+    autoplay
   ]);
 
   const goToSlide = useCallback(
     (index: number) => {
       if (isTransitioning || index === realIndex) return;
 
+      // Stop autoplay on interaction if disableOnInteraction is true
+      if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+        setAutoplayRunning(false);
+      }
+
       setIsTransitioning(true);
       setDragOffset(0);
 
@@ -211,13 +391,20 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
         onSlideChange?.(index);
       }, speed);
     },
-    [realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides]
+    [realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides, autoplay]
   );
 
   const handleTouchStart = useCallback(
     (e: React.TouchEvent | React.MouseEvent) => {
       if (!allowTouchMove) return;
 
+      // Stop autoplay on interaction if disableOnInteraction is true
+      if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+        setAutoplayRunning(false);
+      }
+
       const client =
         direction === 'horizontal'
           ? 'touches' in e
@@ -230,7 +417,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
       setTouching(true);
       setDragOffset(0);
     },
-    [allowTouchMove, direction]
+    [allowTouchMove, direction, autoplay]
   );
 
   const handleTouchMove = useCallback(
@@ -293,7 +480,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     isBeginning: !loop && realIndex === 0,
     isEnd: !loop && realIndex >= slides.length - slidesToShow,
     progress: slides.length > 0 ? realIndex / (slides.length - 1) : 0,
-    autoplayRunning: false,
+    autoplayRunning,
     transitioning: isTransitioning,
     touching,
     translate: translateValue,
@@ -336,4 +523,4 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     loopedSlides,
     repositioningRef,
   };
-}
+}

package/src/lib/constants/components.ts

@@ -1431,3 +1431,88 @@ export const BLOCK = {
     DEFAULT: 'md' as const,
   },
 };
+
+/**
+ * Footer-specific constants
+ */
+export const FOOTER = {
+  SELECTORS: {
+    FOOTER: '.c-footer',
+    CONTAINER: '.c-footer__container',
+    SECTIONS: '.c-footer__sections',
+    BRAND: '.c-footer__brand',
+    BRAND_LOGO: '.c-footer__brand-logo',
+    BRAND_NAME: '.c-footer__brand-name',
+    BRAND_DESCRIPTION: '.c-footer__brand-description',
+    SECTION: '.c-footer__section',
+    SECTION_HEADER: '.c-footer__section-header',
+    SECTION_TITLE: '.c-footer__section-title',
+    SECTION_CONTENT: '.c-footer__section-content',
+    SECTION_TOGGLE: '.c-footer__section-toggle',
+    LINK: '.c-footer__link',
+    SOCIAL: '.c-footer__social',
+    SOCIAL_LINK: '.c-footer__social-link',
+    NEWSLETTER: '.c-footer__newsletter',
+    NEWSLETTER_FORM: '.c-footer__newsletter-form',
+    NEWSLETTER_INPUT: '.c-footer__newsletter-input',
+    NEWSLETTER_BUTTON: '.c-footer__newsletter-button',
+    BOTTOM: '.c-footer__bottom',
+    COPYRIGHT: '.c-footer__copyright',
+    BACK_TO_TOP: '.c-footer__back-to-top',
+    DIVIDER: '.c-footer__divider',
+  },
+  CLASSES: {
+    BASE: 'c-footer',
+    CONTAINER: 'c-footer__container',
+    SECTIONS: 'c-footer__sections',
+    BRAND: 'c-footer__brand',
+    BRAND_LOGO: 'c-footer__brand-logo',
+    BRAND_NAME: 'c-footer__brand-name',
+    BRAND_DESCRIPTION: 'c-footer__brand-description',
+    SECTION: 'c-footer__section',
+    SECTION_HEADER: 'c-footer__section-header',
+    SECTION_TITLE: 'c-footer__section-title',
+    SECTION_CONTENT: 'c-footer__section-content',
+    SECTION_TOGGLE: 'c-footer__section-toggle',
+    SECTION_COLLAPSIBLE: 'c-footer__section--collapsible',
+    SECTION_COLLAPSED: 'c-footer__section--collapsed',
+    LINK: 'c-footer__link',
+    LINK_ACTIVE: 'c-footer__link--active',
+    LINK_DISABLED: 'c-footer__link--disabled',
+    SOCIAL: 'c-footer__social',
+    SOCIAL_LINK: 'c-footer__social-link',
+    NEWSLETTER: 'c-footer__newsletter',
+    NEWSLETTER_FORM: 'c-footer__newsletter-form',
+    NEWSLETTER_INPUT: 'c-footer__newsletter-input',
+    NEWSLETTER_BUTTON: 'c-footer__newsletter-button',
+    BOTTOM: 'c-footer__bottom',
+    COPYRIGHT: 'c-footer__copyright',
+    BACK_TO_TOP: 'c-footer__back-to-top',
+    DIVIDER: 'c-footer__divider',
+    // Layout variants
+    COLUMNS: 'c-footer--columns',
+    CENTERED: 'c-footer--centered',
+    MINIMAL: 'c-footer--minimal',
+    STACKED: 'c-footer--stacked',
+    // Size variants
+    SM: 'c-footer--sm',
+    MD: 'c-footer--md',
+    LG: 'c-footer--lg',
+    // State modifiers
+    STICKY: 'c-footer--sticky',
+  },
+  DEFAULTS: {
+    LAYOUT: 'columns',
+    VARIANT: 'primary',
+    SIZE: 'md',
+    SHOW_NEWSLETTER: false,
+    SHOW_BACK_TO_TOP: false,
+    SHOW_DIVIDER: true,
+    STICKY: false,
+    NEWSLETTER_TITLE: 'Stay Updated',
+    NEWSLETTER_DESCRIPTION: 'Subscribe to our newsletter for the latest updates.',
+    NEWSLETTER_PLACEHOLDER: 'Enter your email',
+    NEWSLETTER_BUTTON_TEXT: 'Subscribe',
+    BACK_TO_TOP_TEXT: 'Back to Top',
+  },
+};