@times-components/ts-components 1.146.2-a0ffbb6bc2acbec91d140a39f6be06256e702094.5 → 1.146.2-c12ed7999a41984c2ba8c437357e7a5df1914881.48

package/src/components/carousel-component/hooks/useCarousel.ts

@@ -0,0 +1,229 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { UseCarouselOptions, UseCarouselReturn } from '../types';
+
+const DRAG_THRESHOLD = 30;
+
+export const useCarousel = (
+  totalItems: number,
+  options: UseCarouselOptions = {}
+): UseCarouselReturn => {
+  const { itemsPerPage = 2, onPageChange } = options;
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const isScrollingRef = useRef(false);
+  const isDraggingRef = useRef(false);
+  const startXRef = useRef(0);
+  const touchStartXRef = useRef<number | null>(null);
+  const isSwipingRef = useRef(false);
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const scrollToPage = useCallback(
+    (page: number) => {
+      if (carouselRef.current) {
+        const cardElements = carouselRef.current.children;
+
+        if (cardElements.length > 0) {
+          isScrollingRef.current = true;
+
+          const container = carouselRef.current;
+          const targetCardIndex = page * itemsPerPage;
+          const targetCard = cardElements[targetCardIndex] as HTMLElement;
+
+          if (targetCard) {
+            const targetScroll = targetCard.offsetLeft;
+
+            container.scrollTo({
+              left: targetScroll,
+              behavior: 'smooth'
+            });
+            setCurrentPage(page);
+
+            if (onPageChange) {
+              onPageChange(page);
+            }
+
+            setTimeout(() => {
+              isScrollingRef.current = false;
+            }, 400);
+          }
+        }
+      }
+    },
+    [itemsPerPage, onPageChange]
+  );
+
+  const handlePrevious = useCallback(
+    () => {
+      const newPage = Math.max(0, currentPage - 1);
+      scrollToPage(newPage);
+    },
+    [currentPage, scrollToPage]
+  );
+
+  const handleNext = useCallback(
+    () => {
+      const newPage = Math.min(totalPages - 1, currentPage + 1);
+      scrollToPage(newPage);
+    },
+    [currentPage, totalPages, scrollToPage]
+  );
+
+  const handleDragNavigation = useCallback(
+    (diff: number) => {
+      if (Math.abs(diff) > DRAG_THRESHOLD) {
+        if (diff > 0) {
+          handleNext();
+        } else {
+          handlePrevious();
+        }
+      }
+    },
+    [handleNext, handlePrevious]
+  );
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!carouselRef.current) {
+      return;
+    }
+    e.preventDefault();
+    isDraggingRef.current = true;
+    startXRef.current = e.pageX;
+    carouselRef.current.style.cursor = 'grabbing';
+  }, []);
+
+  const handleMouseUp = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDraggingRef.current) {
+        return;
+      }
+      isDraggingRef.current = false;
+
+      if (carouselRef.current) {
+        carouselRef.current.style.cursor = 'grab';
+
+        const endX = e.pageX;
+        const diff = startXRef.current - endX;
+
+        handleDragNavigation(diff);
+      }
+    },
+    [handleDragNavigation]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDraggingRef.current) {
+        return;
+      }
+      isDraggingRef.current = false;
+
+      if (carouselRef.current) {
+        carouselRef.current.style.cursor = 'grab';
+
+        const endX = e.pageX;
+        const diff = startXRef.current - endX;
+
+        handleDragNavigation(diff);
+      }
+    },
+    [handleDragNavigation]
+  );
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (!carouselRef.current) {
+      return;
+    }
+    touchStartXRef.current = e.touches[0].clientX;
+    isSwipingRef.current = false;
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (touchStartXRef.current === null || isSwipingRef.current) {
+      return;
+    }
+
+    const currentX = e.touches[0].clientX;
+    const diff = touchStartXRef.current - currentX;
+
+    if (Math.abs(diff) > DRAG_THRESHOLD) {
+      isSwipingRef.current = true;
+      handleDragNavigation(diff);
+    }
+  };
+
+  const handleTouchEnd = () => {
+    touchStartXRef.current = null;
+    isSwipingRef.current = false;
+  };
+
+  const handleScroll = useCallback(
+    () => {
+      if (isScrollingRef.current) {
+        return;
+      }
+
+      if (carouselRef.current) {
+        const container = carouselRef.current;
+        const children = container.children;
+        if (children.length === 0) {
+          return;
+        }
+
+        const scrollLeft = container.scrollLeft;
+
+        let closestPage = 0;
+        let closestDistance = Infinity;
+
+        for (let page = 0; page < totalPages; page++) {
+          const cardIndex = page * itemsPerPage;
+          if (cardIndex < children.length) {
+            const card = children[cardIndex] as HTMLElement;
+            const distance = Math.abs(card.offsetLeft - scrollLeft);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestPage = page;
+            }
+          }
+        }
+
+        if (closestPage !== currentPage) {
+          setCurrentPage(closestPage);
+          if (onPageChange) {
+            onPageChange(closestPage);
+          }
+        }
+      }
+    },
+    [totalPages, itemsPerPage, onPageChange]
+  );
+
+  useEffect(
+    () => {
+      const carousel = carouselRef.current;
+      if (carousel) {
+        carousel.addEventListener('scroll', handleScroll);
+        return () => carousel.removeEventListener('scroll', handleScroll);
+      }
+      return undefined;
+    },
+    [handleScroll]
+  );
+
+  return {
+    currentPage,
+    totalPages,
+    carouselRef,
+    isScrolling: isScrollingRef.current,
+    handlePrevious,
+    handleNext,
+    scrollToPage,
+    handleMouseDown,
+    handleMouseUp,
+    handleMouseLeave,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd
+  };
+};

package/src/components/carousel-component/index.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useCarousel } from './hooks/useCarousel';
+import {
+  CarouselContainer,
+  CarouselWrapper,
+  CarouselContent,
+  CardsRow,
+  PageControl
+} from './styles';
+import { DefaultNavigationArrow } from './DefaultNavigationArrow';
+import { DefaultPageDot } from './DefaultPageDot';
+import { CarouselComponentProps } from './types';
+
+export const CarouselComponent: React.FC<CarouselComponentProps> = ({
+  items,
+  options,
+  showArrows = true,
+  showDots = true,
+  arrowComponent: CustomArrow,
+  dotComponent: CustomDot,
+  className
+}) => {
+  const {
+    currentPage,
+    totalPages,
+    carouselRef,
+    handlePrevious,
+    handleNext,
+    scrollToPage,
+    handleMouseDown,
+    handleMouseUp,
+    handleMouseLeave,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd
+  } = useCarousel(items.length, options);
+
+  const ArrowComponent = CustomArrow || DefaultNavigationArrow;
+  const DotComponent = CustomDot || DefaultPageDot;
+
+  return (
+    <CarouselContainer className={className}>
+      <CarouselWrapper>
+        {showArrows && (
+          <ArrowComponent
+            direction="left"
+            onClick={handlePrevious}
+            disabled={currentPage === 0}
+          />
+        )}
+
+        <CarouselContent>
+          <CardsRow
+            ref={carouselRef}
+            onMouseDown={handleMouseDown}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseLeave}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+          >
+            {items}
+          </CardsRow>
+        </CarouselContent>
+
+        {showArrows && (
+          <ArrowComponent
+            direction="right"
+            onClick={handleNext}
+            disabled={currentPage >= totalPages - 1}
+          />
+        )}
+      </CarouselWrapper>
+
+      {showDots &&
+        totalPages > 1 && (
+          <PageControl>
+            {Array.from({ length: totalPages }).map((_, pageIndex) => (
+              <DotComponent
+                key={pageIndex}
+                active={pageIndex === currentPage}
+                onClick={() => scrollToPage(pageIndex)}
+                index={pageIndex}
+              />
+            ))}
+          </PageControl>
+        )}
+    </CarouselContainer>
+  );
+};
+
+export { CarouselItem } from './CarouselItem';

package/src/components/carousel-component/styles.ts

@@ -0,0 +1,188 @@
+import styled, { css } from 'styled-components';
+import { ResponsiveConfig } from './types';
+export const breakpoints = {
+  xs: '0px',
+  sm: '520px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1320px'
+};
+
+export const colors = {
+  primary: '#005C8A',
+  white: '#FFFFFF'
+};
+
+export const ItemContainer = styled.div<{
+  widthItemConfig?: ResponsiveConfig;
+  maxWidthItemConfig?: ResponsiveConfig;
+}>`
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  ${props => {
+    if (!props.widthItemConfig) {
+      return '';
+    }
+    const { xs, mobile, tablet, desktop, xl } = props.widthItemConfig;
+    return css`
+      ${xs && `flex: 0 0 ${xs};`}
+      ${mobile &&
+        `
+        @media (min-width: ${breakpoints.sm}) {
+          flex: 0 0 ${mobile};
+        }
+      `}
+      ${tablet &&
+        `
+        @media (min-width: ${breakpoints.md}) {
+          flex: 0 0 ${tablet};
+        }
+      `}
+      ${desktop &&
+        `
+        @media (min-width: ${breakpoints.lg}) {
+          flex: 0 0 ${desktop};
+        }
+      `}
+      ${xl &&
+        `
+        @media (min-width: ${breakpoints.xl}) {
+          flex: 0 0 ${xl};
+        }
+      `}
+    `;
+  }} ${props => {
+    if (!props.maxWidthItemConfig) {
+      return '';
+    }
+    const { xs, mobile, tablet, desktop, xl } = props.maxWidthItemConfig;
+    return css`
+      ${xs && `max-width: ${xs};`}
+      ${mobile &&
+        `
+        @media (min-width: ${breakpoints.sm}) {
+          max-width: ${mobile};
+        }
+      `}
+      ${tablet &&
+        `
+        @media (min-width: ${breakpoints.md}) {
+          max-width: ${tablet};
+        }
+      `}
+      ${desktop &&
+        `
+        @media (min-width: ${breakpoints.lg}) {
+          max-width: ${desktop};
+        }
+      `}
+      ${xl &&
+        `
+        @media (min-width: ${breakpoints.xl}) {
+          max-width: ${xl};
+        }
+      `}
+    `;
+  }};
+`;
+
+export const CarouselContainer = styled.div`
+  width: 100%;
+`;
+
+export const CarouselWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const CarouselContent = styled.div`
+  overflow: hidden;
+`;
+
+export const CardsRow = styled.div`
+  display: flex;
+  gap: 20px;
+  overflow-x: hidden;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 0;
+  scroll-behavior: smooth;
+  cursor: grab;
+  user-select: none;
+  align-items: stretch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+
+export const PageControl = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  background: ${colors.white};
+`;
+
+export const NavigationArrowButton = styled.button<{
+  direction: 'left' | 'right';
+  disabled?: boolean;
+}>`
+  display: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  ${({ direction }) =>
+    direction === 'left' ? 'left: -68px;' : 'right: -68px;'} z-index: 10;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 50%;
+  background: ${({ disabled }) => (disabled ? '#CCCCCC' : colors.primary)};
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  svg path {
+    stroke: ${colors.white};
+  }
+
+  &:hover:not(:disabled) {
+    background: #004a6e;
+  }
+
+  @media (min-width: ${breakpoints.lg}) {
+    display: flex;
+  }
+`;
+
+export const PageDotButton = styled.button<{ active: boolean }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 1000px;
+  border: none;
+  padding: 0;
+  background: ${({ active }) => (active ? '#01000D' : '#AAAAAA')};
+  cursor: pointer;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: #01000d;
+  }
+`;

package/src/components/carousel-component/types.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+
+export interface ResponsiveConfig {
+  xs?: string;
+  mobile?: string;
+  tablet?: string;
+  desktop?: string;
+  xl?: string;
+}
+
+export type ResponsiveConfigNoXs = Omit<ResponsiveConfig, 'xs'>;
+
+export interface ArrowComponentProps {
+  direction: 'left' | 'right';
+  onClick: () => void;
+  disabled: boolean;
+}
+
+export interface DotComponentProps {
+  active: boolean;
+  onClick: () => void;
+  index: number;
+}
+
+export interface CarouselComponentProps {
+  items: ReactNode[];
+  options?: UseCarouselOptions;
+  showArrows?: boolean;
+  showDots?: boolean;
+  arrowComponent?: React.ComponentType<ArrowComponentProps>;
+  dotComponent?: React.ComponentType<DotComponentProps>;
+  className?: string;
+}
+
+export interface CarouselItemProps {
+  children: ReactNode;
+  widthItemConfig?: ResponsiveConfig;
+  maxWidthItemConfig?: ResponsiveConfig;
+  className?: string;
+}
+
+// Carousel Hook Types
+export interface UseCarouselOptions {
+  itemsPerPage?: number;
+  onPageChange?: (page: number) => void;
+}
+
+export interface UseCarouselReturn {
+  currentPage: number;
+  totalPages: number;
+  carouselRef: React.RefObject<HTMLDivElement>;
+  isScrolling: boolean;
+  handlePrevious: () => void;
+  handleNext: () => void;
+  scrollToPage: (page: number) => void;
+  handleMouseDown: (e: React.MouseEvent) => void;
+  handleMouseUp: (e: React.MouseEvent) => void;
+  handleMouseLeave: (e: React.MouseEvent<Element, MouseEvent>) => void;
+  handleTouchStart: (e: React.TouchEvent) => void;
+  handleTouchMove: (e: React.TouchEvent) => void;
+  handleTouchEnd: () => void;
+}

package/src/components/social-embed/SocialMediaEmbed.tsx

@@ -1,4 +1,4 @@
-/* import React, { FC, useEffect } from 'react';
+import React, { FC, useEffect } from 'react';
 import { BlockedEmbedMessage } from './BlockedEmbedMessage';
 import { checkVendorConsent } from './helpers/vendorConsent';
 import { eventStatus } from './constants';
@@ -74,113 +74,3 @@ export const SocialMediaEmbed: FC<SocialMediaEmbedProps> = ({
     <BlockedEmbedMessage vendorName={vendorName} />
   );
 };
- */
-
-import React, { FC, useEffect } from 'react';
-import { BlockedEmbedMessage } from './BlockedEmbedMessage';
-import { checkVendorConsent } from './helpers/vendorConsent';
-import { eventStatus } from './constants';
-import { TcData, VendorName } from './types';
-import { useSocialEmbedsContext } from '../../contexts/SocialEmbedsProvider';
-import { Vendor } from './SocialVendor';
-
-declare global {
-  interface Window {
-    __tcfapi?: (
-      command: string,
-      version: number,
-      callback: (data: TcData, success: boolean) => void,
-      listenerId?: number
-    ) => void;
-    twttr?: {
-      widgets: {
-        load: (element?: HTMLElement) => void;
-      };
-    };
-    instgrm?: {
-      Embeds?: {
-        process: () => void;
-      };
-    };
-  }
-}
-
-export type SocialMediaEmbedProps = {
-  element?: any;
-  url: string;
-  vendorName: VendorName;
-  id: string;
-};
-
-export const SocialMediaEmbed: FC<SocialMediaEmbedProps> = ({
-  id,
-  url,
-  vendorName
-}) => {
-  const {
-    setIsSocialEmbedAllowed,
-    isAllowedOnce,
-    isSocialEmbedAllowed
-  } = useSocialEmbedsContext();
-
-  useEffect(() => {
-  if (!window.__tcfapi) return;
-
-  // ✅ 1. READ CURRENT CONSENT IMMEDIATELY
-  const initialConsent = checkVendorConsent(vendorName);
-  setIsSocialEmbedAllowed(prev => ({
-    ...prev,
-    [vendorName]: initialConsent
-  }));
-
-  // ✅ 2. LISTEN FOR FUTURE CHANGES
-  window.__tcfapi('addEventListener', 2, (tcData, success) => {
-    if (
-      success &&
-      (tcData.eventStatus === eventStatus.tcLoaded ||
-        tcData.eventStatus === eventStatus.userActionComplete)
-    ) {
-      const consent = checkVendorConsent(vendorName);
-      setIsSocialEmbedAllowed(prev => ({
-        ...prev,
-        [vendorName]: consent
-      }));
-    }
-  });
-}, [vendorName, setIsSocialEmbedAllowed]);
-
-
- /*  useEffect(() => {
-    if (!window.__tcfapi) return;
-
-    // Listen to CMP consent updates
-    window.__tcfapi('addEventListener', 2, (_tcData: TcData, success: boolean) => {
-      if (
-        !success ||
-        _tcData.eventStatus === eventStatus.tcLoaded ||
-        _tcData.eventStatus === eventStatus.userActionComplete
-      ) {
-        // Use old checkVendorConsent function
-        const consent = checkVendorConsent(vendorName);
-
-        setIsSocialEmbedAllowed(prev => ({
-          ...prev,
-          [vendorName]: consent
-        }));
-      }
-    });
-  }, [vendorName, setIsSocialEmbedAllowed]); */
-
-  // Only render the social component if consent or allowed once
-  const allowed =
-    isSocialEmbedAllowed[vendorName] === true ||
-    isAllowedOnce[vendorName] === true;
-
-  return allowed ? (
-    <div id={id}>
-      <Vendor vendorName={vendorName} url={url} />
-    </div>
-  ) : (
-    <BlockedEmbedMessage vendorName={vendorName} />
-  );
-};