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

package/dist/molecules/Carousel/index.js

@@ -0,0 +1,4 @@
+export { default } from './Carousel';
+export { default as CarouselItem } from './CarouselItem';
+export { default as CarouselBullets } from './CarouselBullets';
+//# sourceMappingURL=index.js.map

package/dist/molecules/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAGpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.123-alpha.0",
+  "version": "2.0.128-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "1fa54ca9614dde12ba99a2870273e1797986ee16"
+  "gitHead": "45fb6de9e708a927326715d9de3b46a8030dc3bd"
 }

package/src/hooks/index.ts

@@ -3,3 +3,13 @@ export { useFadeEffect } from './useFadeEffect'
 export { useTrapFocus } from './useTrapFocus'
 export { useSearch } from './useSearch'
 export { useScrollDirection } from './useScrollDirection'
+export { useSlider } from './useSlider'
+export type {
+  UseSliderArgs,
+  SliderState,
+  SliderDispatch,
+  SlideDirection,
+} from './useSlider'
+export { useSlideVisibility } from './useSlideVisibility'
+
+

package/src/hooks/useSlideVisibility.ts

@@ -0,0 +1,59 @@
+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 const 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/hooks/useSlider.ts

@@ -0,0 +1,209 @@
+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 const 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,
+  }
+}

package/src/index.ts

@@ -55,6 +55,18 @@ export type {
   BreadcrumbProps,
 } from './molecules/Breadcrumb'
 export { default as BuyButton } from './molecules/BuyButton'
+
+export {
+  default as Carousel,
+  CarouselItem,
+  CarouselBullets,
+} from './molecules/Carousel'
+export type {
+  CarouselProps,
+  CarouselItemProps,
+  CarouselBulletsProps,
+} from './molecules/Carousel'
+
 export {
   default as CartItem,
   CartItemImage,