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

package/dist/molecules/Carousel/CarouselBullets.js

@@ -0,0 +1,12 @@
+import React, { forwardRef, useMemo } from 'react';
+import { Button } from '../..';
+const defaultAriaLabel = (idx, isActive) => isActive ? 'Current page' : `Go to page ${idx + 1}`;
+const CarouselBullets = forwardRef(function Bullets({ totalQuantity, activeBullet, onClick, testId = 'fs-carousel-bullets', ariaLabelGenerator = defaultAriaLabel, ariaControlsGenerator, ...otherProps }, ref) {
+    const bulletIndexes = useMemo(() => Array(totalQuantity).fill(0), [totalQuantity]);
+    return (React.createElement("div", { ref: ref, "data-fs-carousel-bullets": true, "data-testid": testId, role: "tablist", ...otherProps }, bulletIndexes.map((_, idx) => {
+        const isActive = activeBullet === idx;
+        return (React.createElement(Button, { key: idx, role: "tab", tabIndex: -1, "data-fs-carousel-bullet": true, testId: `${testId}-bullet`, onClick: (e) => onClick(e, idx), "aria-label": ariaLabelGenerator(idx, isActive), "aria-controls": ariaControlsGenerator?.(idx), "aria-selected": isActive }));
+    })));
+});
+export default CarouselBullets;
+//# sourceMappingURL=CarouselBullets.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselBullets.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/CarouselBullets.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAmC9B,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAE,QAAiB,EAAE,EAAE,CAC1D,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,GAAG,GAAG,CAAC,EAAE,CAAA;AAErD,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,OAAO,CACd,EACE,aAAa,EACb,YAAY,EACZ,OAAO,EACP,MAAM,GAAG,qBAAqB,EAC9B,kBAAkB,GAAG,gBAAgB,EACrC,qBAAqB,EACrB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAClC,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,mDAEK,MAAM,EACnB,IAAI,EAAC,SAAS,KACV,UAAU,IAEb,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;QAC5B,MAAM,QAAQ,GAAG,YAAY,KAAK,GAAG,CAAA;QAErC,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,mCAEZ,MAAM,EAAE,GAAG,MAAM,SAAS,EAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,gBACnB,kBAAkB,CAAC,GAAG,EAAE,QAAQ,CAAC,mBAC9B,qBAAqB,EAAE,CAAC,GAAG,CAAC,mBAC5B,QAAQ,GACvB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/molecules/Carousel/CarouselItem.d.ts

@@ -0,0 +1,11 @@
+import type { PropsWithChildren, HTMLAttributes } from 'react';
+import { SliderState } from '../../hooks';
+export interface CarouselItemProps extends HTMLAttributes<HTMLLIElement> {
+    index: number;
+    totalItems: number;
+    state: SliderState;
+    infiniteMode: boolean;
+    isScrollCarousel: boolean;
+}
+declare function CarouselItem({ index, state, children, totalItems, infiniteMode, isScrollCarousel, }: PropsWithChildren<CarouselItemProps>): JSX.Element;
+export default CarouselItem;

package/dist/molecules/Carousel/CarouselItem.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useSlideVisibility } from '../../hooks';
+function CarouselItem({ index, state, children, totalItems, infiniteMode, isScrollCarousel, }) {
+    const { isItemVisible, shouldRenderItem } = useSlideVisibility({
+        totalItems,
+        currentSlide: state.currentItem,
+        itemsPerPage: state.itemsPerPage,
+    });
+    const style = (!isScrollCarousel && { width: '100%' }) ||
+        (isScrollCarousel && {
+            maxWidth: '60%',
+            display: 'inline-block',
+        });
+    const shouldDisplayItem = isScrollCarousel || shouldRenderItem(index - Number(infiniteMode));
+    return (React.createElement("li", { style: style, "data-fs-carousel-item": true, "aria-roledescription": "slide", id: `carousel-item-${index}`, "data-fs-carousel-item-visible": isItemVisible(index - Number(infiniteMode)) || undefined }, shouldDisplayItem ? children : null));
+}
+export default CarouselItem;
+//# sourceMappingURL=CarouselItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselItem.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,kBAAkB,EAAe,MAAM,aAAa,CAAA;AAU7D,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,gBAAgB,GACqB;IACrC,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,CAAC;QAC7D,UAAU;QACV,YAAY,EAAE,KAAK,CAAC,WAAW;QAC/B,YAAY,EAAE,KAAK,CAAC,YAAY;KACjC,CAAC,CAAA;IAEF,MAAM,KAAK,GACR,CAAC,CAAC,gBAAgB,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAmB;QAC1D,CAAC,gBAAgB,IAAI;YACpB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,cAAc;SACxB,CAAmB,CAAA;IAEtB,MAAM,iBAAiB,GACrB,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAA;IAEpE,OAAO,CACL,4BACE,KAAK,EAAE,KAAK,yDAES,OAAO,EAC5B,EAAE,EAAE,iBAAiB,KAAK,EAAE,mCAE1B,aAAa,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,SAAS,IAGzD,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACjC,CACN,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}

package/dist/molecules/Carousel/index.d.ts

@@ -0,0 +1,6 @@
+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';

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.122-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": "253c09ebb08354e8c7fead371d64e97cdf0b204b"
+  "gitHead": "45fb6de9e708a927326715d9de3b46a8030dc3bd"
 }

package/src/atoms/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import type { SVGProps } from 'react'
-import React, { forwardRef } from "react"
+import React, { forwardRef } from 'react'
 
 type IconWeight = 'thin' | 'light' | 'regular' | 'bold'
 
@@ -27,13 +27,25 @@ export interface IconProps extends SVGProps<SVGSVGElement> {
    * @default 'regular'
    */
   weight?: IconWeight
+  /**
+   * SVG width.
+   *
+   * @default '24'
+   */
+  width?: number
+  /**
+   * SVG height.
+   *
+   * @default '24'
+   */
+  height?: number
 }
 
 const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
   { testId = 'fs-icon', name, weight = 'regular', ...otherProps }: IconProps,
   ref
 ) {
-  const {width, height} = otherProps
+  const { width, height } = otherProps
   return (
     <svg
       ref={ref}

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,