@faststore/components 2.0.53-alpha.0 → 2.0.56-alpha.0

package/src/hooks/useTrapFocus.ts

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react'
+import type { RefObject } from 'react'
+import type { FocusableElement } from 'tabbable'
+import { tabbable } from 'tabbable'
+
+interface TrapFocusParams {
+  beforeElementRef: RefObject<HTMLElement>
+  trapFocusRef: RefObject<HTMLElement>
+  afterElementRef: RefObject<HTMLElement>
+}
+
+/*
+ * Element that will maintain the focus inside trapFocusRef, focus the first element,
+ * and focus back on the element that was in focus when useTrapFocus was triggered.
+ *
+ * Inspired by Reakit useTrapFocus https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
+ */
+export const useTrapFocus = ({
+  trapFocusRef,
+  beforeElementRef,
+  afterElementRef,
+}: TrapFocusParams) => {
+  const tabbableNodesRef = useRef<FocusableElement[]>()
+  const nodeToRestoreRef = useRef<HTMLElement | null>(
+    document.hasFocus() ? (document.activeElement as HTMLElement) : null
+  )
+
+  // Focus back on the element that was focused when useTrapFocus is triggered.
+  useEffect(() => {
+    const nodeToRestore = nodeToRestoreRef.current
+
+    return () => {
+      nodeToRestore?.focus()
+    }
+  }, [nodeToRestoreRef])
+
+  // Set focus on first tabbable element
+  useEffect(() => {
+    if (!trapFocusRef.current) {
+      return
+    }
+
+    if (!tabbableNodesRef.current) {
+      tabbableNodesRef.current = tabbable(trapFocusRef.current)
+    }
+
+    const [firstTabbable] = tabbableNodesRef.current
+
+    if (!firstTabbable) {
+      trapFocusRef.current.focus()
+
+      return
+    }
+
+    firstTabbable.focus()
+  }, [trapFocusRef])
+
+  // Handle loop focus. Set keydown and focusin event listeners
+  useEffect(() => {
+    if (
+      !trapFocusRef.current ||
+      !beforeElementRef.current ||
+      !afterElementRef.current
+    ) {
+      return
+    }
+
+    const beforeElement = beforeElementRef.current
+    const afterElement = afterElementRef.current
+    const trapFocus = trapFocusRef.current
+
+    const handleLoopFocus = (nativeEvent: FocusEvent) => {
+      if (!document.hasFocus()) {
+        return
+      }
+
+      tabbableNodesRef.current = tabbable(trapFocusRef.current!)
+
+      if (!tabbableNodesRef.current.length) {
+        trapFocus.focus()
+      }
+
+      /*
+       * Handle loop focus from beforeElementRef. This node can only be focused if the user press shift tab.
+       * It will focus the last element of the trapFocusRef.
+       */
+      if (nativeEvent.target === beforeElement) {
+        tabbableNodesRef.current[tabbableNodesRef.current.length - 1]?.focus()
+      }
+
+      /*
+       * Handle loop focus from afterElementRef. This node can only be focused if the user press tab.
+       * It will focus the first element of the trapFocusRef.
+       */
+      if (nativeEvent.target === afterElement) {
+        tabbableNodesRef.current[0]?.focus()
+      }
+    }
+
+    beforeElement?.addEventListener('focusin', handleLoopFocus)
+    afterElement?.addEventListener('focusin', handleLoopFocus)
+
+    return () => {
+      beforeElement?.removeEventListener('focusin', handleLoopFocus)
+      afterElement?.removeEventListener('focusin', handleLoopFocus)
+    }
+  }, [tabbableNodesRef, afterElementRef, beforeElementRef, trapFocusRef])
+}

package/src/index.ts

@@ -1,6 +1,9 @@
 // Assets
 export * from './assets'
 
+// Hooks
+export * from './hooks'
+
 // Atoms
 export { default as Badge } from './atoms/Badge'
 export type { BadgeProps } from './atoms/Badge'
@@ -28,6 +31,8 @@ export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
 export { default as Select } from './atoms/Select'
 export type { SelectProps } from './atoms/Select'
+export { default as Slider } from './atoms/Slider'
+export type { SliderProps } from './atoms/Slider'
 export { default as SROnly } from './atoms/SROnly'
 
 // Molecules
@@ -78,6 +83,8 @@ export { default as InputField } from './molecules/InputField'
 export type { InputFieldProps } from './molecules/InputField'
 export { default as LinkButton } from './molecules/LinkButton'
 export type { LinkButtonProps } from './molecules/LinkButton'
+export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal'
+export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
 export { default as RadioField } from './molecules/RadioField'
 export type { RadioFieldProps } from './molecules/RadioField'
 export {
@@ -124,3 +131,6 @@ export type {
   HeroImageProps,
   HeroHeadingProps,
 } from './organisms/Hero'
+
+export { default as PriceRange } from './organisms/PriceRange'
+export type { PriceRangeProps } from './organisms/PriceRange'

package/src/molecules/Modal/Modal.tsx

@@ -0,0 +1,106 @@
+import type {
+  AriaAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react'
+import React from 'react'
+import { createPortal } from 'react-dom'
+
+import { Overlay } from '../..'
+import { useFadeEffect, useUI } from '../../hooks'
+import type { ModalContentProps } from './ModalContent'
+import ModalContent from './ModalContent'
+
+export type ModalChildrenProps = {
+  fade: 'in' | 'out'
+  fadeOut: () => void
+  fadeIn: () => void
+}
+
+type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode
+
+export interface ModalProps extends Omit<ModalContentProps, 'children'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
+   */
+  'aria-labelledby'?: AriaAttributes['aria-label']
+  /**
+   * A boolean value that represents the state of the Modal
+   */
+  isOpen?: boolean
+  /**
+   * Event emitted when the modal is closed
+   */
+  onDismiss?: () => void
+  /**
+   * Children or function as a children
+   */
+  children: ModalChildrenFunction | ReactNode
+}
+
+/*
+ * This component is based on @reach/dialog.
+ * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
+ * https://reach.tech/dialog
+ */
+
+const Modal = ({
+  children,
+  testId = 'fs-modal',
+  isOpen = true,
+  onDismiss,
+  ...otherProps
+}: ModalProps) => {
+  const { closeModal } = useUI()
+  const { fade, fadeOut, fadeIn } = useFadeEffect()
+
+  const handleBackdropClick = (event: MouseEvent) => {
+    if (event.defaultPrevented) {
+      return
+    }
+
+    event.stopPropagation()
+    fadeOut?.()
+    onDismiss?.()
+  }
+
+  const handleBackdropKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || event.defaultPrevented) {
+      return
+    }
+
+    event.stopPropagation()
+    fadeOut?.()
+    onDismiss?.()
+  }
+
+  return isOpen
+    ? createPortal(
+        <Overlay
+          onClick={handleBackdropClick}
+          onKeyDown={handleBackdropKeyDown}
+        >
+          <ModalContent
+            onTransitionEnd={() => fade === 'out' && closeModal()}
+            data-fs-modal
+            data-fs-modal-state={fade}
+            testId={testId}
+            {...otherProps}
+          >
+            {typeof children === 'function'
+              ? children({ fade, fadeOut, fadeIn })
+              : children}
+          </ModalContent>
+        </Overlay>,
+        document.body
+      )
+    : null
+}
+
+export default Modal

package/src/molecules/Modal/ModalBody.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode, HTMLAttributes } from 'react'
+
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+const ModalBody = ({ children, ...otherProps }: ModalBodyProps) => (
+  <div data-fs-modal-body {...otherProps}>
+    {children}
+  </div>
+)
+
+export default ModalBody

package/src/molecules/Modal/ModalContent.tsx

@@ -0,0 +1,90 @@
+import type {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  MouseEvent,
+  RefObject,
+} from 'react'
+import React, { useRef } from 'react'
+
+import { useTrapFocus } from '../../hooks'
+
+interface ModalContentPureProps
+  extends Omit<
+    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    'ref'
+  > {
+  beforeElementRef: RefObject<HTMLDivElement>
+  trapFocusRef: RefObject<HTMLDivElement>
+  afterElementRef: RefObject<HTMLDivElement>
+  testId?: string
+}
+
+const ModalContentPure = ({
+  beforeElementRef,
+  trapFocusRef,
+  afterElementRef,
+  testId = 'store-modal-content',
+  children,
+  ...otherProps
+}: ModalContentPureProps) => {
+  return (
+    <>
+      <div
+        ref={beforeElementRef}
+        data-testid="beforeElement"
+        tabIndex={0}
+        aria-hidden="true"
+      />
+      <div
+        data-fs-modal-content
+        data-testid={testId}
+        ref={trapFocusRef}
+        aria-modal="true"
+        role="dialog"
+        tabIndex={-1}
+        {...otherProps}
+      >
+        {children}
+      </div>
+      <div
+        ref={afterElementRef}
+        data-testid="afterElement"
+        tabIndex={0}
+        aria-hidden="true"
+      />
+    </>
+  )
+}
+
+export type ModalContentProps = Omit<
+  ModalContentPureProps,
+  'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'
+>
+
+const ModalContent = ({ children, ...otherProps }: ModalContentProps) => {
+  const trapFocusRef = useRef<HTMLDivElement>(null)
+  const beforeElementRef = useRef<HTMLDivElement>(null)
+  const afterElementRef = useRef<HTMLDivElement>(null)
+
+  useTrapFocus({
+    beforeElementRef,
+    trapFocusRef,
+    afterElementRef,
+  })
+
+  return (
+    <ModalContentPure
+      {...otherProps}
+      trapFocusRef={trapFocusRef}
+      beforeElementRef={beforeElementRef}
+      afterElementRef={afterElementRef}
+      onClick={(event: MouseEvent) => {
+        event.stopPropagation()
+      }}
+    >
+      {children}
+    </ModalContentPure>
+  )
+}
+
+export default ModalContent

package/src/molecules/Modal/ModalHeader.tsx

@@ -0,0 +1,47 @@
+import React, { HTMLAttributes } from 'react'
+import { X } from '../../assets'
+import IconButton, { IconButtonProps } from '../IconButton'
+
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Title for header modal.
+   */
+  title: string
+
+  /**
+   * Description for header modal.
+   */
+  description?: string
+
+  /**
+   * Props for the Close Button component.
+   */
+  closeButtonProps?: Partial<Omit<IconButtonProps, 'onClick'>>
+
+  onClose?: () => void
+}
+
+const ModalHeader = ({
+  onClose,
+  title,
+  closeButtonProps = {},
+  description,
+}: ModalHeaderProps) => {
+  return (
+    <header data-fs-modal-header>
+      {onClose && (
+        <IconButton
+          onClick={() => onClose?.()}
+          data-fs-modal-header-close-button
+          icon={<X />}
+          aria-label="Close modal"
+          {...closeButtonProps}
+        />
+      )}
+      <p data-fs-modal-header-title>{title}</p>
+      {description && <p data-fs-modal-header-description>{description}</p>}
+    </header>
+  )
+}
+
+export default ModalHeader

package/src/molecules/Modal/index.tsx

@@ -0,0 +1,5 @@
+export { default } from './Modal'
+export { default as ModalHeader } from './ModalHeader'
+export { default as ModalBody } from './ModalBody'
+export type { ModalProps } from './Modal'
+export type { ModalHeaderProps } from './ModalHeader'

package/src/organisms/PriceRange/PriceRange.tsx

@@ -0,0 +1,188 @@
+import React, { useRef, useState, useImperativeHandle, forwardRef } from 'react'
+import type { AriaAttributes } from 'react'
+
+import { Price, Slider, InputField } from '../../index'
+import type { PriceProps, SliderProps } from '../../index'
+
+export type PriceRangeProps = Omit<SliderProps, 'absoluteValuesLabel'> & {
+  /**
+   * The current use case variant for prices.
+   */
+  variant?: PriceProps['variant']
+  /**
+   * Formatter function that transforms the raw price value and render the result.
+   */
+  formatter: PriceProps['formatter']
+  /**
+   * Defines a string value that labels the current element.
+   */
+  'aria-label'?: AriaAttributes['aria-label']
+}
+
+type PriceRangeRefType = {
+  setPriceRangeValues: (values: { min: number; max: number }) => void
+}
+
+const PriceRange = forwardRef<PriceRangeRefType | undefined, PriceRangeProps>(
+  function PriceRange(
+    {
+      formatter,
+      max,
+      min,
+      step = 1,
+      onChange,
+      onEnd,
+      testId = 'fs-price-range',
+      variant,
+      'aria-label': ariaLabel,
+      ...otherProps
+    },
+    ref
+  ) {
+    const sliderRef = useRef<{
+      setSliderValues: (values: { min: number; max: number }) => void
+    }>()
+
+    useImperativeHandle(ref, () => ({
+      setPriceRangeValues: (values: { min: number; max: number }) => {
+        onChange?.(values)
+        sliderRef.current?.setSliderValues(values)
+      },
+    }))
+
+    const inputMinRef = useRef<HTMLInputElement>(null)
+    const inputMaxRef = useRef<HTMLInputElement>(null)
+
+    const [inputMinError, setInputMinError] = useState<string>()
+    const [inputMaxError, setInputMaxError] = useState<string>()
+    const [priceRange, setPriceRange] = useState<{ min: number; max: number }>({
+      min: Math.floor(min.selected),
+      max: Math.round(max.selected),
+    })
+
+    function onChangePriceRange(value: { min: number; max: number }) {
+      setInputMinError(undefined)
+      setInputMaxError(undefined)
+      setPriceRange({ min: value.min, max: value.max })
+
+      if (inputMinRef.current?.value) {
+        inputMinRef.current.value = String(value.min)
+      }
+
+      if (inputMaxRef.current?.value) {
+        inputMaxRef.current.value = String(value.max)
+      }
+    }
+
+    function onChangeInputMin(value: string) {
+      setInputMinError(undefined)
+
+      if (Number(value) < Math.floor(min.absolute)) {
+        return
+      }
+
+      if (Number(value) > Math.floor(priceRange.max)) {
+        setInputMinError(`Min price can't be greater than max`)
+      }
+
+      setPriceRange({ ...priceRange, min: Number(value) })
+      sliderRef.current?.setSliderValues({
+        ...priceRange,
+        min: Number(value),
+      })
+    }
+
+    function onChangeInputMax(value: string) {
+      setInputMaxError(undefined)
+
+      if (Number(value) > Math.round(max.absolute)) {
+        return
+      }
+
+      if (Number(value) < Math.round(priceRange.min)) {
+        setInputMaxError(`Max price can't be smaller than min`)
+      }
+
+      setPriceRange({ ...priceRange, max: Number(value) })
+      sliderRef.current?.setSliderValues({
+        ...priceRange,
+        max: Number(value),
+      })
+    }
+
+    return (
+      <div data-fs-price-range data-testid={testId} {...otherProps}>
+        <Slider
+          ref={sliderRef}
+          min={min}
+          max={max}
+          step={step}
+          onEnd={(value) => {
+            onEnd?.(value)
+            onChangePriceRange(value)
+          }}
+          aria-label={ariaLabel}
+          onChange={(value) => onChange?.(value)}
+          absoluteValuesLabel={{
+            min: (
+              <Price
+                value={Math.floor(min.absolute)}
+                variant={variant}
+                formatter={formatter}
+              />
+            ),
+            max: (
+              <Price
+                value={Math.round(max.absolute)}
+                variant={variant}
+                formatter={formatter}
+              />
+            ),
+          }}
+          minValueLabelComponent={(minValue) => {
+            return (
+              <Price value={minValue} variant={variant} formatter={formatter} />
+            )
+          }}
+          maxValueLabelComponent={(maxValue) => {
+            return (
+              <Price value={maxValue} variant={variant} formatter={formatter} />
+            )
+          }}
+        />
+        <div data-fs-price-range-inputs>
+          <InputField
+            id="price-range-min"
+            step={step}
+            label="Min"
+            type="number"
+            inputMode="numeric"
+            error={inputMinError}
+            inputRef={inputMinRef}
+            min={Math.floor(min.absolute)}
+            max={priceRange.max}
+            value={priceRange.min}
+            onChange={(e) => onChangeInputMin(e.target.value)}
+            onBlur={() => !inputMinError && onEnd?.(priceRange)}
+          />
+          <InputField
+            id="price-range-max"
+            label="Max"
+            step={step}
+            type="number"
+            inputMode="numeric"
+            error={inputMaxError}
+            inputRef={inputMaxRef}
+            max={Math.round(max.absolute)}
+            min={priceRange.min}
+            value={priceRange.max}
+            onChange={(e) => onChangeInputMax(e.target.value)}
+            onBlur={() => !inputMaxError && onEnd?.(priceRange)}
+          />
+        </div>
+      </div>
+    )
+  }
+)
+
+export default PriceRange

package/src/organisms/PriceRange/index.ts

@@ -0,0 +1,2 @@
+export { default } from './PriceRange'
+export type { PriceRangeProps } from './PriceRange'