@faststore/ui 2.0.122-alpha.0 → 2.0.128-alpha.0

package/src/components/molecules/Carousel/Carousel.tsx

@@ -1,387 +0,0 @@
-import type {
-  UIEvent,
-  ReactNode,
-  CSSProperties,
-  KeyboardEvent,
-  PropsWithChildren,
-} from 'react'
-import React, { useMemo, useRef } from 'react'
-import type { SwipeableProps } from 'react-swipeable'
-
-import { RightArrowIcon, LeftArrowIcon } from './Arrows'
-import CarouselItem from './CarouselItem'
-import useSlider from '../../../hooks/useSlider/useSlider'
-import Bullets from '../Bullets'
-import { IconButton } 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 = 'store-carousel',
-  transition = {
-    duration: 400,
-    property: 'transform',
-  },
-  children,
-  className,
-  id = 'store-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 showNavigationArrows =
-    controls === 'complete' || controls === 'navigationArrows'
-
-  const showPaginationBullets =
-    controls === 'complete' || controls === 'paginationBullets'
-
-  const transformValues = useMemo(
-    () => createTransformValues(infiniteMode, numberOfSlides),
-    [numberOfSlides, infiniteMode]
-  )
-
-  const { handlers, slide, sliderState, sliderDispatch } = useSlider({
-    itemsPerPage,
-    infiniteMode,
-    totalItems: childrenCount,
-    shouldSlideOnSwipe: isSlideCarousel,
-    ...swipeableConfigOverrides,
-  })
-
-  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 ?? <LeftArrowIcon />}
-            onClick={() => {
-              isSlideCarousel && slidePrevious()
-              isScrollCarousel &&
-                onScrollPagination(sliderState.currentPage - 1, 'previous')
-            }}
-          />
-          <IconButton
-            data-fs-carousel-control="right"
-            aria-controls={id}
-            aria-label="next"
-            icon={navigationIcons?.right ?? <RightArrowIcon />}
-            onClick={() => {
-              isSlideCarousel && slideNext()
-              isScrollCarousel &&
-                onScrollPagination(sliderState.currentPage + 1, 'next')
-            }}
-          />
-        </div>
-      )}
-
-      {showPaginationBullets && (
-        <div data-fs-carousel-bullets>
-          <Bullets
-            tabIndex={0}
-            activeBullet={sliderState.currentPage}
-            totalQuantity={Math.ceil(childrenCount / sliderState.itemsPerPage)}
-            onKeyDown={handleBulletsKeyDown}
-            onClick={async (_, idx) => {
-              isSlideCarousel &&
-                !sliderState.sliding &&
-                slide(idx, sliderDispatch)
-
-              isScrollCarousel && onScrollPagination(idx)
-            }}
-            onFocus={(event) => event.currentTarget.focus()}
-            ariaControlsGenerator={(idx) => `carousel-item-${idx}`}
-          />
-        </div>
-      )}
-    </section>
-  )
-}
-
-export default Carousel

package/src/components/molecules/Carousel/CarouselItem.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import type { CSSProperties, PropsWithChildren, HTMLAttributes } from 'react'
-import type { SliderState } from '../../../hooks/useSlider/useSlider'
-
-import useSlideVisibility from './hooks/useSlideVisibility'
-
-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: '80%',
-      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/components/molecules/Carousel/hooks/useSlideVisibility.ts

@@ -1,59 +0,0 @@
-import { useRef, useEffect } from 'react'
-
-export interface UseSlideVisibilityArgs {
-  currentSlide: number
-  itemsPerPage: number
-  totalItems: number
-}
-
-interface IsSlideVisibleArgs {
-  itemsPerPage: number
-  currentSlide: number
-  slideIdx: number
-  totalItems: number
-}
-
-function isSlideVisible({
-  itemsPerPage,
-  currentSlide,
-  slideIdx,
-  totalItems,
-}: IsSlideVisibleArgs) {
-  const isClonedSlide = currentSlide < 0 || currentSlide >= totalItems
-  const isVisible =
-    slideIdx >= currentSlide && slideIdx < currentSlide + itemsPerPage
-
-  return isClonedSlide || isVisible
-}
-
-export default function useSlideVisibility({
-  currentSlide,
-  itemsPerPage,
-  totalItems,
-}: UseSlideVisibilityArgs) {
-  /** Keeps track of slides that have been visualized before.
-   * We want to keep rendering them because the issue is mostly rendering
-   * slides that might never be viewed; On the other hand, hiding slides
-   * that were visible causes visual glitches */
-  const visitedSlides = useRef<Set<number>>(new Set())
-
-  useEffect(() => {
-    for (let i = 0; i < itemsPerPage; i++) {
-      visitedSlides.current.add(currentSlide + i)
-    }
-  }, [currentSlide, itemsPerPage])
-
-  const isItemVisible = (index: number) =>
-    isSlideVisible({
-      slideIdx: index,
-      currentSlide,
-      itemsPerPage,
-      totalItems,
-    })
-
-  const shouldRenderItem = (index: number) => {
-    return visitedSlides.current.has(index) || isItemVisible(index)
-  }
-
-  return { shouldRenderItem, isItemVisible }
-}

package/src/components/molecules/Carousel/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Carousel'
-export * from './Carousel'

package/src/hooks/useSlider/index.ts

@@ -1,2 +0,0 @@
-export { default } from './useSlider'
-export * from './useSlider'

package/src/hooks/useSlider/useSlider.ts

@@ -1,209 +0,0 @@
-import type { Dispatch } from 'react'
-import { useReducer } from 'react'
-import type { SwipeableProps } from 'react-swipeable'
-import { useSwipeable } from 'react-swipeable'
-
-export type SlideDirection = 'next' | 'previous'
-
-interface NextPageAction {
-  type: 'NEXT_PAGE'
-}
-
-interface PreviousPageAction {
-  type: 'PREVIOUS_PAGE'
-}
-
-interface GoToPageAction {
-  type: 'GO_TO_PAGE'
-  payload: {
-    pageIndex: number
-    shouldSlide: boolean
-  }
-}
-
-interface StopSlideAction {
-  type: 'STOP_SLIDE'
-}
-
-export type Action =
-  | NextPageAction
-  | PreviousPageAction
-  | StopSlideAction
-  | GoToPageAction
-
-export type SliderDispatch = Dispatch<Action>
-
-export interface SliderState {
-  /**
-   * The `currentItem` in a Slider with multiple items in a single page is
-   * always **the one with the lowest index** in the current page.
-   */
-  currentItem: number
-  /** Currently active page */
-  currentPage: number
-  /**
-   * Whether or not the Slider is currently sliding. This is useful to
-   * manipulate the `transition` property in a component.
-   */
-  sliding: boolean
-  /** The direction in which the Slider is sliding. */
-  slideDirection: SlideDirection
-  /** The total number of unique items in the slider. */
-  totalItems: number
-  /** The number of items in a single page. */
-  itemsPerPage: number
-  /** The total number of pages in the slider. */
-  totalPages: number
-  /** Whether or not the slider is infinite. */
-  infinite: boolean
-}
-
-export const nextPage = (current: number, total: number) =>
-  (current + 1) % total
-
-export const previousPage = (current: number, total: number) =>
-  (total - ((total - current + 1) % total)) % total
-
-function reducer(state: SliderState, action: Action): SliderState {
-  switch (action.type) {
-    case 'NEXT_PAGE': {
-      // If `state.infinite` is true, we need to take into account an extra
-      // page in the calculation. This extra page is a clone of the first page.
-      const adjustedTotalPages = state.infinite
-        ? state.totalPages + 1
-        : state.totalPages
-
-      const nextPageIndex = nextPage(state.currentPage, adjustedTotalPages)
-
-      const nextItemIndex =
-        (nextPageIndex % adjustedTotalPages) * state.itemsPerPage
-
-      return {
-        ...state,
-        sliding: true,
-        slideDirection: 'next',
-        currentItem: nextItemIndex,
-        currentPage: nextPageIndex,
-      }
-    }
-
-    case 'PREVIOUS_PAGE': {
-      // If `state.infinite` is true, we need to take into account an extra
-      // page in the calculation. This extra page is a clone of the first page.
-      const adjustedTotalPages = state.infinite
-        ? state.totalPages + 1
-        : state.totalPages
-
-      // If `state.infinite` is true and we're currently on page 0, we need to
-      // let the slider go to page -1. This -1 page is a clone of the last page.
-      const shouldGoToClone = state.infinite && state.currentPage === 0
-      const previousPageIndex = shouldGoToClone
-        ? -1
-        : previousPage(state.currentPage, state.totalPages)
-
-      return {
-        ...state,
-        sliding: true,
-        slideDirection: 'previous',
-        currentItem:
-          (previousPageIndex % adjustedTotalPages) * state.itemsPerPage,
-        currentPage: previousPageIndex,
-      }
-    }
-
-    case 'GO_TO_PAGE': {
-      if (action.payload.pageIndex === state.currentPage) {
-        return state
-      }
-
-      return {
-        ...state,
-        sliding: action.payload.shouldSlide,
-        slideDirection:
-          action.payload.pageIndex > state.currentPage ? 'next' : 'previous',
-        currentItem:
-          (action.payload.pageIndex % state.totalPages) * state.itemsPerPage,
-        currentPage: action.payload.pageIndex,
-      }
-    }
-
-    case 'STOP_SLIDE':
-      return { ...state, sliding: false }
-
-    default:
-      return state
-  }
-}
-
-const defaultSliderState = (
-  totalItems: number,
-  itemsPerPage: number,
-  infinite: boolean
-): SliderState => ({
-  currentItem: 0,
-  currentPage: 0,
-  sliding: false,
-  slideDirection: 'next',
-  totalItems,
-  itemsPerPage,
-  totalPages: Math.ceil(totalItems / itemsPerPage),
-  infinite,
-})
-
-const slide = (page: SlideDirection | number, dispatch: Dispatch<Action>) => {
-  if (page === 'next') {
-    dispatch({ type: 'NEXT_PAGE' })
-  }
-
-  if (page === 'previous') {
-    dispatch({ type: 'PREVIOUS_PAGE' })
-  }
-
-  if (typeof page === 'number') {
-    dispatch({
-      type: 'GO_TO_PAGE',
-      payload: {
-        pageIndex: page,
-        shouldSlide: true,
-      },
-    })
-  }
-}
-
-export interface UseSliderArgs extends SwipeableProps {
-  /** The total number of unique items in the slider. */
-  totalItems: number
-  /** The number of items in a single slider page. */
-  itemsPerPage?: number
-  /** Whether or not the slider is infinite. */
-  infiniteMode?: boolean
-  /**  Whether or not slide after swiping left/right. */
-  shouldSlideOnSwipe?: boolean
-}
-
-export default function useSlider({
-  totalItems,
-  itemsPerPage = 1,
-  infiniteMode = false,
-  shouldSlideOnSwipe = true,
-  ...swipeableConfigOverrides
-}: UseSliderArgs) {
-  const [sliderState, sliderDispatch] = useReducer(reducer, undefined, () =>
-    defaultSliderState(totalItems, itemsPerPage, infiniteMode)
-  )
-
-  const handlers = useSwipeable({
-    onSwipedRight: () =>
-      shouldSlideOnSwipe && slide('previous', sliderDispatch),
-    onSwipedLeft: () => shouldSlideOnSwipe && slide('next', sliderDispatch),
-    trackMouse: true,
-    ...swipeableConfigOverrides,
-  })
-
-  return {
-    handlers,
-    slide,
-    sliderState,
-    sliderDispatch,
-  }
-}