@windstream/react-shared-components 0.1.27 → 0.1.28

package/src/contentful/blocks/carousel/helper.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   CarouselWithProductCards,
@@ -11,6 +9,7 @@ import { Button } from "@shared/components/button";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { ProductCard } from "@shared/contentful/blocks/cards/product-card";
 import { TestimonialCard } from "@shared/contentful/blocks/cards/testimonial-card";
+import { useCarouselSwipe } from "@shared/hooks/use-carousel-swipe";
 import { CheckPlansProps } from "@shared/types/micro-components";
 import { cx } from "@shared/utils";
 
@@ -212,109 +211,166 @@ export function ProductCardCarousel({
   );
 }
 
-export const TestimonialCarousel: React.FC<{
-  fields: CarouselWithTestimonialCards;
-}> = ({ fields }) => {
-  const testimonials = fields?.items?.items || [];
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const timeoutRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const nextSlide = useCallback(() => {
-    if (testimonials.length === 0) return;
-    setCurrentIndex(prev => (prev + 1) % testimonials.length);
-  }, [testimonials.length]);
+/**
+ * Individual slide component for the testimonial carousel
+ * Memoized to prevent unnecessary re-renders of inactive slides
+ */
+const TestimonialCarouselSlide = React.memo<{
+  item: any;
+  index: number;
+  currentIndex: number;
+  totalItems: number;
+  swipeOffset: number;
+  isSwiping: boolean;
+  isMobile: boolean;
+  containerWidth: number;
+  cardOffsetPercentage: number;
+}>(
+  ({
+    item,
+    index,
+    currentIndex,
+    totalItems,
+    swipeOffset,
+    isSwiping,
+    isMobile,
+    containerWidth,
+    cardOffsetPercentage,
+  }) => {
+    // Calculate circular offset for infinite carousel feel
+    let offset = index - currentIndex;
+    const len = totalItems;
+    if (offset > len / 2) offset -= len;
+    if (offset < -len / 2) offset += len;
+
+    const isActive = offset === 0;
+    const isAdjacent = Math.abs(offset) === 1;
+
+    // Calculate card position with smooth swipe following
+    // Base position is determined by card index offset (105% spacing between cards)
+    const baseTransform = offset * cardOffsetPercentage;
+    // Convert swipe pixels to percentage for smooth finger-following during swipe
+    const swipePercentage = (swipeOffset / containerWidth) * 100;
+    const totalTransform = baseTransform + swipePercentage;
+
+    // Mobile: Show adjacent cards during swipe for preview effect
+    // Desktop: Cards always visible (handled by opacity check below)
+    const showOnMobile = isSwiping ? isActive || isAdjacent : isActive;
+
+    // Determine opacity visibility (mobile-specific behavior)
+    const isVisible = isMobile ? showOnMobile : true;
 
-  const prevSlide = useCallback(() => {
-    if (testimonials.length === 0) return;
-    setCurrentIndex(prev => (prev === 0 ? testimonials.length - 1 : prev - 1));
-  }, [testimonials.length]);
-
-  // Auto-scroll logic
-  useEffect(() => {
-    if (testimonials.length === 0) return;
+    return (
+      <div
+        className={cx(
+          // Layout
+          "col-start-1 row-start-1 w-full md:max-w-[815px]",
+          // Performance: Hint browser to optimize transform and opacity animations
+          "will-change-[transform,opacity]",
+          // Z-index: Active slide on top
+          isActive ? "z-10" : "z-5",
+          // Visibility: Hide slides that are too far away (performance optimization)
+          Math.abs(offset) > 1 ? "invisible" : "visible",
+          // Opacity: Mobile fade effect for adjacent cards, desktop always visible
+          isVisible ? "opacity-100" : "opacity-0",
+          // Transitions: Faster during swipe, slower when snapping to position
+          isSwiping
+            ? "transition-opacity duration-200"
+            : "transition-[transform,opacity] duration-500 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]"
+        )}
+        style={{
+          // Use CSS variable for dynamic transform value (can't be done with Tailwind)
+          transform: `translateX(${totalTransform}%)`,
+        }}
+      >
+        <TestimonialCard {...item} isActive={isActive} className="h-full" />
+      </div>
+    );
+  }
+);
 
-    timeoutRef.current = setInterval(() => {
-      nextSlide();
-    }, 8000); // 5 seconds per slide
+TestimonialCarouselSlide.displayName = "TestimonialCarouselSlide";
 
-    return () => {
-      if (timeoutRef.current) clearInterval(timeoutRef.current);
-    };
-  }, [nextSlide, testimonials.length]);
+export const TestimonialCarousel: React.FC<{
+  fields: CarouselWithTestimonialCards;
+  autoScroll?: boolean;
+  autoScrollInterval?: number;
+}> = ({ fields, autoScroll = true, autoScrollInterval = 8000 }) => {
+  const testimonials = fields?.items?.items || [];
 
   if (!testimonials || testimonials.length === 0) {
     return null;
   }
 
+  // Use the generic carousel swipe hook
+  const carousel = useCarouselSwipe({
+    itemCount: testimonials.length,
+    cardOffsetPercentage: 105, // How far each card is offset (100% width + 5% gap)
+    swipeThreshold: 0.15, //  Need to swipe 15% of screen to change slide
+    mobileBreakpoint: 768, // Tailwind's md breakpoint, Mobile if width < 768px
+    autoScrollInterval: autoScrollInterval, // 8 seconds between slides transition
+    enableAutoScroll: autoScroll,
+  });
+
   return (
-    <div className="relative mx-auto max-w-[1280px] overflow-hidden md:px-24">
-      {/* Navigation Overlay - Left (Hidden on mobile) */}
-      <Button
-        onClick={prevSlide}
-        className="group absolute left-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
-        aria-label="Previous"
-      >
-        <MaterialIcon name="arrow_back" size={24} />
-      </Button>
-
-      {/* Slider Track Wrapper */}
-      <div className="grid grid-cols-1 justify-items-center">
-        {/* Slides */}
-        {testimonials.map((item, index) => {
-          let offset = index - currentIndex;
-          const len = testimonials.length;
-          if (offset > len / 2) offset -= len;
-          if (offset < -len / 2) offset += len;
-
-          const isActive = offset === 0;
-
-          return (
-            <div
-              key={index}
-              className={cx(
-                "col-start-1 row-start-1 w-full md:max-w-[815px]",
-                // Mobile: only show active card
-                isActive ? "opacity-100" : "opacity-0",
-                // Desktop: show active and peeking cards
-                "md:opacity-100"
-              )}
-              style={{
-                transform: `translateX(${isActive ? "0%" : offset * 105 + "%"})`,
-                zIndex: isActive ? 10 : 5,
-                visibility: Math.abs(offset) > 1 ? "hidden" : "visible",
-                transition: "all 0.5s ease-in-out",
-              }}
-            >
-              <TestimonialCard
-                {...item}
-                isActive={isActive}
-                className="h-full"
+    <div>
+      <div className="relative max-w-[1280px] md:px-11">
+        {/* Navigation Overlay - Left (Hidden on mobile) */}
+        <Button
+          onClick={carousel.prevSlide}
+          className="group absolute left-5 top-1/2 z-50 hidden h-13 w-13 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
+          aria-label="Previous"
+        >
+          <MaterialIcon name="arrow_back" size={24} />
+        </Button>
+
+        {/* Navigation Overlay - Right (Hidden on mobile) */}
+        <Button
+          onClick={carousel.nextSlide}
+          className="group absolute right-5 top-1/2 z-50 hidden h-13 w-13 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
+          aria-label="Next"
+        >
+          <MaterialIcon name="arrow_forward" size={24} />
+        </Button>
+
+        {/* Slider Track Wrapper */}
+        <div
+          ref={carousel.containerRef}
+          className="select-none overflow-hidden rounded-card-sm will-change-transform"
+          onTouchStart={carousel.handleTouchStart}
+          onTouchMove={carousel.handleTouchMove}
+          onTouchEnd={carousel.handleTouchEnd}
+        >
+          <div className="grid grid-cols-1 justify-items-center">
+            {/* Slides */}
+            {testimonials.map((item, index) => (
+              <TestimonialCarouselSlide
+                key={index}
+                item={item}
+                index={index}
+                currentIndex={carousel.currentIndex}
+                totalItems={testimonials.length}
+                swipeOffset={carousel.swipeOffset}
+                isSwiping={carousel.isSwiping}
+                isMobile={carousel.isMobile}
+                containerWidth={carousel.containerWidth}
+                cardOffsetPercentage={carousel.constants.CARD_OFFSET_PERCENTAGE}
               />
-            </div>
-          );
-        })}
+            ))}
+          </div>
+        </div>
       </div>
-
-      {/* Navigation Overlay - Right (Hidden on mobile) */}
-      <Button
-        onClick={nextSlide}
-        className="group absolute right-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
-        aria-label="Next"
-      >
-        <MaterialIcon name="arrow_forward" size={24} />
-      </Button>
-
       {/* Dots (Hidden on mobile) */}
-      <div className="mt-8 hidden justify-center gap-2 md:flex">
+      <div className="mt-5 flex justify-center gap-2 md:mt-10">
         {testimonials.map((_, idx) => (
           <button
             key={idx}
-            onClick={() => setCurrentIndex(idx)}
+            onClick={() => carousel.goToSlide(idx)}
             className={cx(
               "h-2 w-2 rounded-full transition-all duration-300",
-              currentIndex === idx
+              carousel.currentIndex === idx
                 ? "w-6 bg-white"
-                : "bg-white/40 hover:bg-white/60"
+                : "bg-bg-fill-inverse-disabled hover:bg-white/60"
             )}
             aria-label={`Go to slide ${idx + 1}`}
           />
@@ -330,27 +386,55 @@ export const TabSwitch: React.FC<TabSwitchProps> = ({
   onChange,
   className,
 }) => {
+  const activeIndex = tabs.indexOf(activeTab);
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 });
+
+  useEffect(() => {
+    const activeButton = buttonRefs.current[activeIndex];
+    if (activeButton) {
+      setIndicatorStyle({
+        width: activeButton.offsetWidth,
+        left: activeButton.offsetLeft,
+      });
+    }
+  }, [activeIndex, tabs]);
+
   return (
-    <div
-      className={cx(
-        "mx-auto flex w-fit rounded-2xl bg-bg-surface-active p-1",
-        className
-      )}
-    >
-      {tabs.map(tab => (
-        <button
-          key={tab}
-          onClick={() => onChange(tab)}
-          className={cx(
-            "min-w-[160px] whitespace-nowrap rounded-2xl bg-bg-surface-active px-4 py-2.5 text-label1 font-black transition-all duration-300",
-            activeTab === tab
-              ? "bg-bg-fill-brand text-white shadow-md"
-              : "text-text-info hover:bg-bg-surface-hover"
-          )}
-        >
-          {tab}
-        </button>
-      ))}
+    <div className="flex w-full justify-center">
+      <div
+        className={cx(
+          "relative flex w-fit gap-1 rounded-button-lg bg-bg-surface-active p-1 transition-all duration-200 ease-out",
+          className
+        )}
+      >
+        {/* Sliding background indicator */}
+        <div
+          className="absolute bottom-1 top-1 rounded-button bg-bg-fill-brand shadow-md transition-all duration-300 ease-out"
+          style={{
+            width: `${indicatorStyle.width}px`,
+            left: `${indicatorStyle.left}px`,
+          }}
+        />
+
+        {tabs.map((tab, index) => (
+          <button
+            key={tab}
+            ref={el => {
+              buttonRefs.current[index] = el;
+            }}
+            onClick={() => onChange(tab)}
+            className={cx(
+              "label1 relative z-10 flex min-w-[160px] items-center justify-center whitespace-nowrap rounded-button px-4 py-2.5 transition-colors duration-200 focus:outline-none active:bg-transparent",
+              activeTab === tab
+                ? "text-text-inverse"
+                : "text-text-disabled hover:bg-bg-surface-hover"
+            )}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
     </div>
   );
 };

package/src/contentful/blocks/carousel/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { TabSwitch } from "../carousel/helper";
 import { ProductCardCarousel, TestimonialCarousel } from "./helper";
@@ -22,22 +20,23 @@ export const Carousel: React.FC<CarouselProps> = ({
   tabs,
   onModalButtonClick,
   renderCheckPlans,
+  testimonialAutoScroll = true,
   showSwitch = false,
 }) => {
   return (
     <div
-      className={`${backgroundColor} mx-auto overflow-hidden py-9 md:px-5 md:py-20`}
+      className={`${backgroundColor} mx-auto overflow-hidden px-5 py-12 md:pb-16 md:pt-20`}
     >
-      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-12 overflow-visible">
+      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-8 overflow-visible md:gap-12">
         <div>
           <Text
             as="h2"
-            className="text-center text-4xl font-bold text-text md:text-5xl"
+            className="heading2 text-text md:heading1 md:text-center"
           >
             {fields?.title}
           </Text>
           {fields?.subTitle && (
-            <Text as="h3" className="body1 px-4 pt-4 text-center">
+            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
               {fields?.subTitle}
             </Text>
           )}
@@ -53,6 +52,8 @@ export const Carousel: React.FC<CarouselProps> = ({
         {hasTestimonialCards && (
           <TestimonialCarousel
             fields={fields as CarouselWithTestimonialCards}
+            autoScroll={testimonialAutoScroll}
+            autoScrollInterval={8000}
           />
         )}
         {hasProductCards && (
@@ -62,9 +63,14 @@ export const Carousel: React.FC<CarouselProps> = ({
             fields={fields as CarouselWithProductCards}
           />
         )}
-        <Text as="div" className="body1 mt-8 px-4 text-center text-neutral-600">
-          {disclaimerText}
-        </Text>
+        {disclaimerText && (
+          <Text
+            as="div"
+            className="body1 mt-8 px-4 text-center text-neutral-600"
+          >
+            {disclaimerText}
+          </Text>
+        )}
       </div>
     </div>
   );

package/src/contentful/blocks/carousel/types.ts

@@ -129,6 +129,7 @@ export type CarouselProps = {
   setActiveTab: (tab: string) => void;
   tabs: string[];
   showSwitch?: boolean;
+  testimonialAutoScroll?: boolean;
   onModalButtonClick?: (id?: string) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
 };

package/src/hooks/use-carousel-swipe.ts

@@ -0,0 +1,264 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+/**
+ * Configuration options for the carousel swipe behavior
+ */
+export interface CarouselSwipeConfig {
+  /** Total number of items in the carousel */
+  itemCount: number;
+  /** Percentage of card width to offset each slide (default: 105) */
+  cardOffsetPercentage?: number;
+  /** Percentage of container width needed to trigger slide change (default: 0.15) */
+  swipeThreshold?: number;
+  /** Mobile breakpoint in pixels (default: 768) */
+  mobileBreakpoint?: number;
+  /** Auto-scroll interval in milliseconds (default: 8000). Set to 0 to disable. */
+  autoScrollInterval?: number;
+  /** Enable auto-scroll (default: true) */
+  enableAutoScroll?: boolean;
+}
+
+/**
+ * Return value from the useCarouselSwipe hook
+ */
+export interface CarouselSwipeReturn {
+  /** Current active slide index */
+  currentIndex: number;
+  /** Current swipe offset in pixels */
+  swipeOffset: number;
+  /** Whether user is currently swiping */
+  isSwiping: boolean;
+  /** Whether viewport is mobile size */
+  isMobile: boolean;
+  /** Memoized container width */
+  containerWidth: number;
+  /** Ref to attach to the carousel container element */
+  containerRef: React.RefObject<HTMLDivElement>;
+  /** Navigate to next slide */
+  nextSlide: () => void;
+  /** Navigate to previous slide */
+  prevSlide: () => void;
+  /** Navigate to specific slide index */
+  goToSlide: (index: number) => void;
+  /** Touch start handler */
+  handleTouchStart: (e: React.TouchEvent) => void;
+  /** Touch move handler */
+  handleTouchMove: (e: React.TouchEvent) => void;
+  /** Touch end handler */
+  handleTouchEnd: () => void;
+  /** Constants used for calculations */
+  constants: {
+    CARD_OFFSET_PERCENTAGE: number;
+    SWIPE_THRESHOLD: number;
+    MOBILE_BREAKPOINT: number;
+    AUTO_SCROLL_INTERVAL: number;
+  };
+}
+
+/**
+ * Custom hook for implementing swipe/touch gestures in carousels
+ *
+ * Features:
+ * - Touch/swipe support with smooth finger-following
+ * - Auto-scroll with pause on interaction
+ * - Responsive mobile detection with resize listener
+ * - Performance optimized with memoization
+ * - Configurable thresholds and behavior
+ *
+ * @example
+ * ```tsx
+ * const carousel = useCarouselSwipe({
+ *   itemCount: items.length,
+ *   autoScrollInterval: 5000,
+ * });
+ *
+ * return (
+ *   <div
+ *     ref={carousel.containerRef}
+ *     onTouchStart={carousel.handleTouchStart}
+ *     onTouchMove={carousel.handleTouchMove}
+ *     onTouchEnd={carousel.handleTouchEnd}
+ *   >
+ *     {items.map((item, index) => (
+ *       <div
+ *         key={index}
+ *         style={{
+ *           transform: `translateX(${calculateTransform(index, carousel)})`,
+ *         }}
+ *       >
+ *         {item}
+ *       </div>
+ *     ))}
+ *   </div>
+ * );
+ * ```
+ */
+export function useCarouselSwipe(
+  config: CarouselSwipeConfig
+): CarouselSwipeReturn {
+  const {
+    itemCount,
+    cardOffsetPercentage = 105,
+    swipeThreshold = 0.15,
+    mobileBreakpoint = 768,
+    autoScrollInterval = 8000,
+    enableAutoScroll = true,
+  } = config;
+
+  // State
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [swipeOffset, setSwipeOffset] = useState(0);
+  const [isSwiping, setIsSwiping] = useState(false);
+  const [containerWidth, setContainerWidth] = useState(window.innerWidth);
+  // Performance: Store mobile state to avoid repeated window.innerWidth checks on every render
+  // This prevents expensive DOM queries during swipe operations
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Refs
+  const timeoutRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const touchStartX = useRef<number>(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Constants
+  const constants = {
+    CARD_OFFSET_PERCENTAGE: cardOffsetPercentage,
+    SWIPE_THRESHOLD: swipeThreshold,
+    MOBILE_BREAKPOINT: mobileBreakpoint,
+    AUTO_SCROLL_INTERVAL: autoScrollInterval,
+  };
+
+  // Performance: Memoize container width to prevent recalculation on every render
+  // This is especially important during swipe operations where the component re-renders
+  // frequently. Without memoization, it'd query the DOM on every frame while swiping.
+  useEffect(() => {
+    const updateWidth = () => {
+      setContainerWidth(containerRef.current?.offsetWidth || window.innerWidth);
+    };
+    updateWidth(); // Initial
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+
+  // Navigation functions
+  const nextSlide = useCallback(() => {
+    if (itemCount === 0) return;
+    setCurrentIndex(prev => (prev + 1) % itemCount);
+  }, [itemCount]);
+
+  const prevSlide = useCallback(() => {
+    if (itemCount === 0) return;
+    setCurrentIndex(prev => (prev === 0 ? itemCount - 1 : prev - 1));
+  }, [itemCount]);
+
+  const goToSlide = useCallback(
+    (index: number) => {
+      if (index < 0 || index >= itemCount) return;
+      setCurrentIndex(index);
+    },
+    [itemCount]
+  );
+
+  // Touch handlers for mobile swipe
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    touchStartX.current = e.touches[0].clientX;
+    setIsSwiping(true);
+    // Pause auto-scroll during user interaction
+    if (timeoutRef.current) {
+      clearInterval(timeoutRef.current);
+    }
+  }, []);
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!isSwiping) return;
+      const currentX = e.touches[0].clientX;
+      const diff = currentX - touchStartX.current;
+      setSwipeOffset(diff);
+    },
+    [isSwiping]
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    setIsSwiping(false);
+    // Use memoized containerWidth and constant threshold for performance
+    const threshold = containerWidth * swipeThreshold;
+
+    // Determine if swipe was strong enough to change slides
+    if (swipeOffset > threshold) {
+      prevSlide();
+    } else if (swipeOffset < -threshold) {
+      nextSlide();
+    }
+
+    // Reset swipe offset to return card to snapped position
+    setSwipeOffset(0);
+
+    // Restart auto-scroll after user interaction completes
+    if (enableAutoScroll && autoScrollInterval > 0) {
+      timeoutRef.current = setInterval(() => {
+        nextSlide();
+      }, autoScrollInterval);
+    }
+  }, [
+    swipeOffset,
+    containerWidth,
+    swipeThreshold,
+    prevSlide,
+    nextSlide,
+    enableAutoScroll,
+    autoScrollInterval,
+  ]);
+
+  // Performance: Detect mobile viewport and update on resize
+  // This replaces inline window.innerWidth checks that were running on every render.
+  // By using state and a resize listener, we only check when the viewport actually changes.
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < mobileBreakpoint);
+    };
+
+    // Check immediately on mount
+    checkMobile();
+
+    // Update when window is resized (e.g., device rotation, browser resize)
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, [mobileBreakpoint]);
+
+  // Auto-scroll logic
+  useEffect(() => {
+    if (!enableAutoScroll || itemCount === 0 || autoScrollInterval === 0) {
+      return;
+    }
+
+    timeoutRef.current = setInterval(() => {
+      nextSlide();
+    }, autoScrollInterval);
+
+    return () => {
+      if (timeoutRef.current) clearInterval(timeoutRef.current);
+    };
+  }, [nextSlide, itemCount, enableAutoScroll, autoScrollInterval]);
+
+  return {
+    currentIndex,
+    swipeOffset,
+    isSwiping,
+    isMobile,
+    containerWidth,
+    containerRef,
+    nextSlide,
+    prevSlide,
+    goToSlide,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    constants,
+  };
+}