@faststore/components 2.0.123-alpha.0 → 2.0.128-alpha.0

package/src/molecules/Carousel/Carousel.tsx

@@ -0,0 +1,396 @@
+import type {
+  UIEvent,
+  ReactNode,
+  CSSProperties,
+  KeyboardEvent,
+  PropsWithChildren,
+} from 'react'
+import React, { useMemo, useRef } from 'react'
+import type { SwipeableProps } from 'react-swipeable'
+
+import CarouselItem from './CarouselItem'
+import { useSlider } from '../../hooks'
+import CarouselBullets from './CarouselBullets'
+import { IconButton, Icon } from '../..'
+
+const createTransformValues = (infinite: boolean, totalItems: number) => {
+  const transformMap: Record<number, number> = {}
+  const slideWidth = 100 / totalItems
+
+  for (let idx = 0; idx < totalItems; ++idx) {
+    const currIdx = infinite ? idx - 1 : idx
+    const transformValue = -(slideWidth * idx)
+
+    transformMap[currIdx] = transformValue
+  }
+
+  return transformMap
+}
+
+export interface CarouselProps extends SwipeableProps {
+  /**
+   * ID of the current instance of the component.
+   */
+  id?: string
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Returns the value of element's class content attribute.
+   */
+  className?: string
+  /**
+   * Whether or not the Carousel is infinite slide/scroll. Only for the `slide` variant.
+   * @default true
+   */
+  infiniteMode?: boolean
+  /**
+   * Specifies which navigation elements should be visible.
+   * @default complete
+   */
+  controls?: 'complete' | 'navigationArrows' | 'paginationBullets'
+  /**
+   * Specifies the slide transition. Only for the `slide` variant
+   */
+  transition?: {
+    duration: number
+    property: string
+    delay?: number
+    timing?: string
+  }
+  /**
+   * Specifies the number of items per page.
+   * @default 1
+   */
+  itemsPerPage?: number
+  /**
+   * Specifies the Carousel track variant.
+   * @default slide
+   */
+  variant?: 'slide' | 'scroll'
+  /**
+   * Specifies the navigation icons.
+   */
+  navigationIcons?: {
+    left?: ReactNode
+    right?: ReactNode
+  }
+}
+
+function Carousel({
+  infiniteMode = true,
+  controls = 'complete',
+  testId = 'fs-carousel',
+  transition = {
+    duration: 400,
+    property: 'transform',
+  },
+  children,
+  className,
+  id = 'fs-carousel',
+  variant = 'slide',
+  itemsPerPage = 1,
+  navigationIcons = undefined,
+  ...swipeableConfigOverrides
+}: PropsWithChildren<CarouselProps>) {
+  const carouselTrackRef = useRef<HTMLUListElement>(null)
+  const isSlideCarousel = variant === 'slide'
+  const isScrollCarousel = variant === 'scroll'
+  const childrenArray = React.Children.toArray(children)
+  const childrenCount = childrenArray.length
+  const numberOfSlides = infiniteMode ? childrenCount + 2 : childrenCount
+  const slidingTransition = `${transition.property} ${transition.duration}ms ${
+    transition.timing ?? ''
+  } ${transition.delay ?? ''}`
+
+  const { handlers, slide, sliderState, sliderDispatch } = useSlider({
+    itemsPerPage,
+    infiniteMode,
+    totalItems: childrenCount,
+    shouldSlideOnSwipe: isSlideCarousel,
+    ...swipeableConfigOverrides,
+  })
+
+  const pagesCount = Math.ceil(childrenCount / sliderState.itemsPerPage)
+
+  const showNavigationArrows =
+    pagesCount !== 1 &&
+    (controls === 'complete' || controls === 'navigationArrows')
+
+  const showPaginationBullets =
+    pagesCount !== 1 &&
+    (controls === 'complete' || controls === 'paginationBullets')
+
+  const transformValues = useMemo(
+    () => createTransformValues(infiniteMode, numberOfSlides),
+    [numberOfSlides, infiniteMode]
+  )
+
+  const postRenderedSlides =
+    infiniteMode && children ? childrenArray.slice(0, 1) : []
+
+  const preRenderedSlides =
+    infiniteMode && children ? childrenArray.slice(childrenCount - 1) : []
+
+  const slides = preRenderedSlides.concat(
+    (children as any) ?? [],
+    postRenderedSlides
+  )
+
+  const slideCarouselTrackStyle: CSSProperties = useMemo(
+    () => ({
+      display: 'flex',
+      width: `${numberOfSlides * 100}%`,
+      transition: sliderState.sliding ? slidingTransition : undefined,
+      transform: `translate3d(${
+        transformValues[sliderState.currentPage]
+      }%, 0, 0)`,
+    }),
+    [
+      numberOfSlides,
+      transformValues,
+      slidingTransition,
+      sliderState.sliding,
+      sliderState.currentPage,
+    ]
+  )
+
+  const scrollCarouselTrackStyle: CSSProperties = useMemo(
+    () => ({
+      width: '100%',
+      display: 'block',
+      overflowX: 'scroll',
+      whiteSpace: 'nowrap',
+    }),
+    []
+  )
+
+  const carouselTrackStyle =
+    ((isSlideCarousel && slideCarouselTrackStyle) as CSSProperties) ||
+    ((isScrollCarousel && scrollCarouselTrackStyle) as CSSProperties)
+
+  const slidePrevious = () => {
+    if (
+      sliderState.sliding ||
+      (!infiniteMode && sliderState.currentPage === 0)
+    ) {
+      return
+    }
+
+    slide('previous', sliderDispatch)
+  }
+
+  const slideNext = () => {
+    if (
+      sliderState.sliding ||
+      (!infiniteMode && sliderState.currentPage === childrenCount - 1)
+    ) {
+      return
+    }
+
+    slide('next', sliderDispatch)
+  }
+
+  const onScrollTrack = (event: UIEvent) => {
+    if (isSlideCarousel || itemsPerPage > 1) {
+      return
+    }
+
+    const itemWidth = Number(event.currentTarget.firstElementChild?.scrollWidth)
+    const scrollOffset = event.currentTarget?.scrollLeft
+    const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor
+    const page = formatter(scrollOffset / itemWidth)
+
+    slide(page, sliderDispatch)
+  }
+
+  const onTransitionTrackEnd = () => {
+    sliderDispatch({
+      type: 'STOP_SLIDE',
+    })
+
+    if (infiniteMode && sliderState.currentItem >= childrenCount) {
+      sliderDispatch({
+        type: 'GO_TO_PAGE',
+        payload: {
+          pageIndex: 0,
+          shouldSlide: false,
+        },
+      })
+    }
+
+    if (infiniteMode && sliderState.currentItem < 0) {
+      sliderDispatch({
+        type: 'GO_TO_PAGE',
+        payload: {
+          pageIndex: sliderState.totalPages - 1,
+          shouldSlide: false,
+        },
+      })
+    }
+  }
+
+  const onScrollPagination = async (
+    index: number,
+    slideDirection?: 'previous' | 'next'
+  ) => {
+    if (slideDirection === 'previous' && sliderState.currentPage === 0) {
+      return
+    }
+
+    if (
+      slideDirection === 'next' &&
+      sliderState.currentPage === sliderState.totalPages - 1
+    ) {
+      return
+    }
+
+    let scrollOffset
+    const carouselItemsWidth = Number(
+      carouselTrackRef.current?.firstElementChild?.clientWidth
+    )
+
+    if (itemsPerPage > 1) {
+      scrollOffset = index * carouselItemsWidth * itemsPerPage
+    } else {
+      scrollOffset = index * carouselItemsWidth - carouselItemsWidth * 0.125
+    }
+
+    carouselTrackRef.current?.scrollTo({
+      left: scrollOffset,
+      behavior: 'smooth',
+    })
+
+    slide(index, sliderDispatch)
+  }
+
+  // accessible behavior for tablist
+  const handleBulletsKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'ArrowLeft': {
+        isSlideCarousel && slidePrevious()
+        isScrollCarousel &&
+          onScrollPagination(sliderState.currentPage - 1, 'previous')
+        break
+      }
+
+      case 'ArrowRight': {
+        isSlideCarousel && slideNext()
+        isScrollCarousel &&
+          onScrollPagination(sliderState.currentPage + 1, 'next')
+        break
+      }
+
+      case 'Home': {
+        slide(0, sliderDispatch)
+        break
+      }
+
+      case 'End': {
+        slide(childrenCount - 1, sliderDispatch)
+        break
+      }
+
+      default:
+    }
+  }
+
+  return (
+    <section
+      id={id}
+      data-fs-carousel
+      className={className}
+      data-testid={testId}
+      aria-label="carousel"
+      aria-roledescription="carousel"
+    >
+      <div
+        data-fs-carousel-track-container
+        style={{
+          width: '100%',
+          overflow: 'hidden',
+          display: isScrollCarousel ? 'block' : undefined,
+        }}
+        {...handlers}
+      >
+        <ul
+          aria-live="polite"
+          ref={carouselTrackRef}
+          style={carouselTrackStyle}
+          data-fs-carousel-track
+          onScroll={onScrollTrack}
+          onTransitionEnd={onTransitionTrackEnd}
+        >
+          {slides.map((currentSlide, idx) => (
+            <CarouselItem
+              index={idx}
+              key={String(idx)}
+              state={sliderState}
+              totalItems={childrenCount}
+              infiniteMode={infiniteMode}
+              isScrollCarousel={isScrollCarousel}
+            >
+              {currentSlide}
+            </CarouselItem>
+          ))}
+        </ul>
+      </div>
+
+      {showNavigationArrows && (
+        <div data-fs-carousel-controls>
+          <IconButton
+            data-fs-carousel-control="left"
+            aria-controls={id}
+            aria-label="previous"
+            icon={
+              navigationIcons?.left ?? (
+                <Icon name="ArrowLeft" width={20} height={20} weight="bold" />
+              )
+            }
+            onClick={() => {
+              isSlideCarousel && slidePrevious()
+              isScrollCarousel &&
+                onScrollPagination(sliderState.currentPage - 1, 'previous')
+            }}
+          />
+          <IconButton
+            data-fs-carousel-control="right"
+            aria-controls={id}
+            aria-label="next"
+            icon={
+              navigationIcons?.right ?? (
+                <Icon name="ArrowRight" width={20} height={20} weight="bold" />
+              )
+            }
+            onClick={() => {
+              isSlideCarousel && slideNext()
+              isScrollCarousel &&
+                onScrollPagination(sliderState.currentPage + 1, 'next')
+            }}
+          />
+        </div>
+      )}
+
+      {showPaginationBullets && (
+        <CarouselBullets
+          tabIndex={0}
+          activeBullet={sliderState.currentPage}
+          totalQuantity={pagesCount}
+          onKeyDown={handleBulletsKeyDown}
+          onClick={async (_, idx) => {
+            isSlideCarousel &&
+              !sliderState.sliding &&
+              slide(idx, sliderDispatch)
+
+            isScrollCarousel && onScrollPagination(idx)
+          }}
+          onFocus={(event) => event.currentTarget.focus()}
+          ariaControlsGenerator={(idx) => `carousel-item-${idx}`}
+        />
+      )}
+    </section>
+  )
+}
+
+export default Carousel

package/src/molecules/Carousel/CarouselBullets.tsx

@@ -0,0 +1,90 @@
+import type { HTMLAttributes, MouseEvent } from 'react'
+import React, { forwardRef, useMemo } from 'react'
+
+import { Button } from '../..'
+
+export interface CarouselBulletsProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role'> {
+  /**
+   * Number of bullets that should be rendered.
+   */
+  totalQuantity: number
+  /**
+   * The currently active bullet (zero-indexed).
+   */
+  activeBullet: number
+  /**
+   * Event handler for clicks on each bullet. The handler will be called with
+   * the index of the bullet that received the click.
+   */
+  onClick: (e: MouseEvent, bulletIdx: number) => void
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Function that should be used to generate the aria-label attribute added
+   * to each bullet that is inactive. It receives the bullet index as an
+   * argument so that it can be interpolated in the generated string.
+   */
+  ariaLabelGenerator?: (index: number, isActive: boolean) => string
+  /**
+   * Function that should be used to generate the aria-controls attribute added
+   * to each bullet. It receives the bullet index as argument and should return a string.
+   */
+  ariaControlsGenerator?: (index: number) => string
+}
+
+const defaultAriaLabel = (idx: number, isActive: boolean) =>
+  isActive ? 'Current page' : `Go to page ${idx + 1}`
+
+const CarouselBullets = forwardRef<HTMLDivElement, CarouselBulletsProps>(
+  function Bullets(
+    {
+      totalQuantity,
+      activeBullet,
+      onClick,
+      testId = 'fs-carousel-bullets',
+      ariaLabelGenerator = defaultAriaLabel,
+      ariaControlsGenerator,
+      ...otherProps
+    },
+    ref
+  ) {
+    const bulletIndexes = useMemo(
+      () => Array(totalQuantity).fill(0),
+      [totalQuantity]
+    )
+
+    return (
+      <div
+        ref={ref}
+        data-fs-carousel-bullets
+        data-testid={testId}
+        role="tablist"
+        {...otherProps}
+      >
+        {bulletIndexes.map((_, idx) => {
+          const isActive = activeBullet === idx
+
+          return (
+            <Button
+              key={idx}
+              role="tab"
+              tabIndex={-1}
+              data-fs-carousel-bullet
+              testId={`${testId}-bullet`}
+              onClick={(e) => onClick(e, idx)}
+              aria-label={ariaLabelGenerator(idx, isActive)}
+              aria-controls={ariaControlsGenerator?.(idx)}
+              aria-selected={isActive}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+export default CarouselBullets

package/src/molecules/Carousel/CarouselItem.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import type { CSSProperties, PropsWithChildren, HTMLAttributes } from 'react'
+import { useSlideVisibility, SliderState } from '../../hooks'
+
+export interface CarouselItemProps extends HTMLAttributes<HTMLLIElement> {
+  index: number
+  totalItems: number
+  state: SliderState
+  infiniteMode: boolean
+  isScrollCarousel: boolean
+}
+
+function CarouselItem({
+  index,
+  state,
+  children,
+  totalItems,
+  infiniteMode,
+  isScrollCarousel,
+}: PropsWithChildren<CarouselItemProps>) {
+  const { isItemVisible, shouldRenderItem } = useSlideVisibility({
+    totalItems,
+    currentSlide: state.currentItem,
+    itemsPerPage: state.itemsPerPage,
+  })
+
+  const style =
+    ((!isScrollCarousel && { width: '100%' }) as CSSProperties) ||
+    ((isScrollCarousel && {
+      maxWidth: '60%',
+      display: 'inline-block',
+    }) as CSSProperties)
+
+  const shouldDisplayItem =
+    isScrollCarousel || shouldRenderItem(index - Number(infiniteMode))
+
+  return (
+    <li
+      style={style}
+      data-fs-carousel-item
+      aria-roledescription="slide"
+      id={`carousel-item-${index}`}
+      data-fs-carousel-item-visible={
+        isItemVisible(index - Number(infiniteMode)) || undefined
+      }
+    >
+      {shouldDisplayItem ? children : null}
+    </li>
+  )
+}
+
+export default CarouselItem

package/src/molecules/Carousel/index.ts

@@ -0,0 +1,8 @@
+export { default } from './Carousel'
+export type { CarouselProps } from './Carousel'
+
+export { default as CarouselItem } from './CarouselItem'
+export type { CarouselItemProps } from './CarouselItem'
+
+export { default as CarouselBullets } from './CarouselBullets'
+export type { CarouselBulletsProps } from './CarouselBullets'