@faststore/components 3.98.0-dev.3 → 3.98.0-dev.8

package/src/index.ts

@@ -12,16 +12,14 @@ export { default as Icon } from './atoms/Icon'
 export type { IconProps } from './atoms/Icon'
 export { default as Input } from './atoms/Input'
 export type { InputProps } from './atoms/Input'
-export { default as Textarea } from './atoms/Textarea'
-export type { TextareaProps } from './atoms/Textarea'
 export { default as Label } from './atoms/Label'
 export type { LabelProps } from './atoms/Label'
 export { default as Link } from './atoms/Link'
-export type { LinkProps, LinkElementType } from './atoms/Link'
-export { default as Loader } from './atoms/Loader'
-export type { LoaderProps } from './atoms/Loader'
+export type { LinkElementType, LinkProps } from './atoms/Link'
 export { default as List } from './atoms/List'
 export type { ListProps } from './atoms/List'
+export { default as Loader } from './atoms/Loader'
+export type { LoaderProps } from './atoms/Loader'
 export { default as Overlay } from './atoms/Overlay'
 export type { OverlayProps } from './atoms/Overlay'
 export { default as Price } from './atoms/Price'
@@ -30,45 +28,47 @@ export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
 export { default as RichText } from './atoms/RichText'
 export type { RichTextProps } from './atoms/RichText'
-export { default as Skeleton } from './atoms/Skeleton'
-export type { SkeletonProps } from './atoms/Skeleton'
 export { default as Select } from './atoms/Select'
 export type { SelectProps } from './atoms/Select'
+export { default as Skeleton } from './atoms/Skeleton'
+export type { SkeletonProps } from './atoms/Skeleton'
 export { default as Slider } from './atoms/Slider'
 export type { SliderProps } from './atoms/Slider'
 export { default as SROnly } from './atoms/SROnly'
+export { default as Textarea } from './atoms/Textarea'
+export type { TextareaProps } from './atoms/Textarea'
 
 // Molecules
 export {
   default as Accordion,
-  AccordionItem,
   AccordionButton,
+  AccordionItem,
   AccordionPanel,
 } from './molecules/Accordion'
 export type {
-  AccordionProps,
-  AccordionItemProps,
   AccordionButtonProps,
+  AccordionItemProps,
   AccordionPanelProps,
+  AccordionProps,
 } from './molecules/Accordion'
 export { default as Alert } from './molecules/Alert'
 export type { AlertProps } from './molecules/Alert'
-export { BreadcrumbPure, Breadcrumb } from './molecules/Breadcrumb'
+export { Breadcrumb, BreadcrumbPure } from './molecules/Breadcrumb'
 export type {
-  BreadcrumbPureProps,
   BreadcrumbProps,
+  BreadcrumbPureProps,
 } from './molecules/Breadcrumb'
 export { default as BuyButton } from './molecules/BuyButton'
 
 export {
   default as Carousel,
-  CarouselItem,
   CarouselBullets,
+  CarouselItem,
 } from './molecules/Carousel'
 export type {
-  CarouselProps,
-  CarouselItemProps,
   CarouselBulletsProps,
+  CarouselItemProps,
+  CarouselProps,
 } from './molecules/Carousel'
 
 export { default as Card } from './molecules/Card'
@@ -80,14 +80,12 @@ export {
   CartItemSummary,
 } from './molecules/CartItem'
 export type {
-  CartItemProps,
   CartItemImageProps,
+  CartItemProps,
   CartItemSummaryProps,
 } from './molecules/CartItem'
 export { default as CheckboxField } from './molecules/CheckboxField'
 export type { CheckboxFieldProps } from './molecules/CheckboxField'
-export { default as IconButton } from './molecules/IconButton'
-export type { IconButtonProps } from './molecules/IconButton'
 export { default as DiscountBadge } from './molecules/DiscountBadge'
 export type { DiscountBadgeProps } from './molecules/DiscountBadge'
 export {
@@ -97,39 +95,47 @@ export {
   DropdownMenu,
 } from './molecules/Dropdown'
 export type {
-  DropdownProps,
   DropdownButtonProps,
   DropdownItemProps,
   DropdownMenuProps,
+  DropdownProps,
 } from './molecules/Dropdown'
+export { default as FileUploadCard } from './molecules/FileUploadCard'
+export type { FileUploadCardProps } from './molecules/FileUploadCard'
+export {
+  default as FileUploadStatus,
+  FileUploadErrorType,
+  FileUploadState,
+} from './molecules/FileUploadStatus'
+export type { FileUploadStatusProps } from './molecules/FileUploadStatus'
 export { default as Gift, GiftContent, GiftImage } from './molecules/Gift'
 export type {
-  GiftProps,
   GiftContentProps,
   GiftImageProps,
+  GiftProps,
 } from './molecules/Gift'
+export { default as IconButton } from './molecules/IconButton'
+export type { IconButtonProps } from './molecules/IconButton'
 export { default as InputField } from './molecules/InputField'
 export type { InputFieldProps } from './molecules/InputField'
-export { default as TextareaField } from './molecules/TextareaField'
-export type { TextareaFieldProps } from './molecules/TextareaField'
 export { default as LinkButton } from './molecules/LinkButton'
 export type { LinkButtonProps } from './molecules/LinkButton'
 export {
   default as Modal,
-  ModalHeader,
   ModalBody,
   ModalFooter,
+  ModalHeader,
 } from './molecules/Modal'
-export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
+export type { ModalHeaderProps, ModalProps } from './molecules/Modal'
 export {
   default as NavbarLinks,
   NavbarLinksList,
   NavbarLinksListItem,
 } from './molecules/NavbarLinks'
 export type {
-  NavbarLinksProps,
-  NavbarLinksListProps,
   NavbarLinksListItemProps,
+  NavbarLinksListProps,
+  NavbarLinksProps,
 } from './molecules/NavbarLinks'
 export { default as OrderSummary } from './molecules/OrderSummary'
 export type { OrderSummaryProps } from './molecules/OrderSummary'
@@ -137,13 +143,13 @@ export { default as Popover } from './molecules/Popover'
 export type { PopoverProps } from './molecules/Popover'
 export {
   default as ProductCard,
-  ProductCardImage,
   ProductCardContent,
+  ProductCardImage,
 } from './molecules/ProductCard'
 export type {
-  ProductCardProps,
-  ProductCardImageProps,
   ProductCardContentProps,
+  ProductCardImageProps,
+  ProductCardProps,
 } from './molecules/ProductCard'
 export { default as ProductPrice } from './molecules/ProductPrice'
 export type { ProductPriceProps } from './molecules/ProductPrice'
@@ -159,17 +165,16 @@ export { default as RatingField } from './molecules/RatingField'
 export type { RatingFieldProps } from './molecules/RatingField'
 export { default as RegionBar } from './molecules/RegionBar'
 export type { RegionBarProps } from './molecules/RegionBar'
+export { default as TextareaField } from './molecules/TextareaField'
+export type { TextareaFieldProps } from './molecules/TextareaField'
 export { default as Tooltip } from './molecules/Tooltip'
 export type { TooltipProps } from './molecules/Tooltip'
 
 export { default as SearchProvider } from './molecules/SearchProvider'
 export type { SearchProviderContextValue } from './molecules/SearchProvider'
 
-export { default as SearchInputField } from './molecules/SearchInputField'
-export type {
-  SearchInputFieldProps,
-  SearchInputFieldRef,
-} from './molecules/SearchInputField'
+export { default as QuantitySelector } from './molecules/QuantitySelector'
+export type { QuantitySelectorProps } from './molecules/QuantitySelector'
 export {
   default as SearchAutoComplete,
   SearchAutoCompleteTerm,
@@ -190,24 +195,29 @@ export type {
   SearchHistoryProps,
   SearchHistoryTermProps,
 } from './molecules/SearchHistory'
+export { default as SearchInputField } from './molecules/SearchInputField'
+export type {
+  SearchInputFieldProps,
+  SearchInputFieldRef,
+} from './molecules/SearchInputField'
 export {
-  default as SearchProducts,
   SearchProductItem,
-  SearchProductItemImage,
   SearchProductItemContent,
+  SearchProductItemImage,
+  default as SearchProducts,
 } from './molecules/SearchProducts'
 export type {
-  SearchProductsProps,
-  SearchProductItemProps,
-  SearchProductItemImageProps,
   SearchProductItemContentProps,
+  SearchProductItemImageProps,
+  SearchProductItemProps,
+  SearchProductsProps,
 } from './molecules/SearchProducts'
 export { default as SearchTop, SearchTopTerm } from './molecules/SearchTop'
 export type { SearchTopProps, SearchTopTermProps } from './molecules/SearchTop'
 export { default as SelectField } from './molecules/SelectField'
 export type { SelectFieldProps } from './molecules/SelectField'
 export { default as SkuSelector } from './molecules/SkuSelector'
-export type { SkuSelectorProps, SkuOption } from './molecules/SkuSelector'
+export type { SkuOption, SkuSelectorProps } from './molecules/SkuSelector'
 export {
   Table,
   TableBody,
@@ -217,11 +227,11 @@ export {
   TableRow,
 } from './molecules/Table'
 export type {
-  TableProps,
   TableBodyProps,
   TableCellProps,
   TableFooterProps,
   TableHeadProps,
+  TableProps,
   TableRowProps,
 } from './molecules/Table'
 export { default as Tag } from './molecules/Tag'
@@ -231,8 +241,6 @@ export { default as Toggle } from './molecules/Toggle'
 export type { ToggleProps } from './molecules/Toggle'
 export { default as ToggleField } from './molecules/ToggleField'
 export type { ToggleFieldProps } from './molecules/ToggleField'
-export { default as QuantitySelector } from './molecules/QuantitySelector'
-export type { QuantitySelectorProps } from './molecules/QuantitySelector'
 
 // Organisms
 export {
@@ -240,14 +248,14 @@ export {
   BannerTextContent,
 } from './organisms/BannerText'
 export type {
-  BannerTextProps,
   BannerTextContentProps,
+  BannerTextProps,
 } from './organisms/BannerText'
 
 export {
   default as CartSidebar,
-  CartSidebarList,
   CartSidebarFooter,
+  CartSidebarList,
 } from './organisms/CartSidebar'
 export type { CartSidebarProps } from './organisms/CartSidebar'
 
@@ -270,11 +278,11 @@ export type {
   FilterSliderProps,
 } from './organisms/Filter'
 
-export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero'
+export { default as Hero, HeroHeader, HeroImage } from './organisms/Hero'
 export type {
-  HeroProps,
-  HeroImageProps,
   HeroHeaderProps,
+  HeroImageProps,
+  HeroProps,
 } from './organisms/Hero'
 
 export {
@@ -291,28 +299,28 @@ export type {
 
 export {
   default as Navbar,
+  NavbarButtons,
   NavbarHeader,
   NavbarRow,
-  NavbarButtons,
 } from './organisms/Navbar'
 export type {
-  NavbarProps,
+  NavbarButtonsProps,
   NavbarHeaderProps,
+  NavbarProps,
   NavbarRowProps,
-  NavbarButtonsProps,
 } from './organisms/Navbar'
 
 export {
   default as NavbarSlider,
-  NavbarSliderHeader,
   NavbarSliderContent,
   NavbarSliderFooter,
+  NavbarSliderHeader,
 } from './organisms/NavbarSlider'
 export type {
-  NavbarSliderProps,
-  NavbarSliderHeaderProps,
   NavbarSliderContentProps,
   NavbarSliderFooterProps,
+  NavbarSliderHeaderProps,
+  NavbarSliderProps,
 } from './organisms/NavbarSlider'
 
 export {
@@ -323,11 +331,11 @@ export {
   NewsletterHeader,
 } from './organisms/Newsletter'
 export type {
-  NewsletterProps,
   NewsletterAddendumProps,
   NewsletterContentProps,
   NewsletterFormProps,
   NewsletterHeaderProps,
+  NewsletterProps,
 } from './organisms/Newsletter'
 
 export { default as OutOfStock } from './organisms/OutOfStock'
@@ -341,16 +349,16 @@ export type { PriceRangeProps } from './organisms/PriceRange'
 
 export {
   default as ProductComparison,
-  ProductComparisonTrigger,
-  ProductComparisonToolbar,
   ProductComparisonSidebar,
+  ProductComparisonToolbar,
+  ProductComparisonTrigger,
 } from './organisms/ProductComparison'
 export type {
   IProductComparison,
   ProductComparisonProps,
-  ProductComparisonTriggerProps,
-  ProductComparisonToolbarProps,
   ProductComparisonSidebarProps,
+  ProductComparisonToolbarProps,
+  ProductComparisonTriggerProps,
 } from './organisms/ProductComparison'
 
 export {
@@ -358,19 +366,19 @@ export {
   ProductGridItem,
 } from './organisms/ProductGrid'
 export type {
-  ProductGridProps,
   ProductGridItemProps,
+  ProductGridProps,
 } from './organisms/ProductGrid'
 
 export {
   default as ProductShelf,
-  ProductShelfItems,
   ProductShelfItem,
+  ProductShelfItems,
 } from './organisms/ProductShelf'
 export type {
-  ProductShelfProps,
-  ProductShelfItemsProps,
   ProductShelfItemProps,
+  ProductShelfItemsProps,
+  ProductShelfProps,
 } from './organisms/ProductShelf'
 
 export { default as RegionModal } from './organisms/RegionModal'
@@ -384,17 +392,40 @@ export type { ShippingSimulationProps } from './organisms/ShippingSimulation'
 
 export { default as SlideOver, SlideOverHeader } from './organisms/SlideOver'
 export type {
-  SlideOverProps,
   SlideOverHeaderProps,
+  SlideOverProps,
 } from './organisms/SlideOver'
 
 export {
   default as SKUMatrix,
-  SKUMatrixTrigger,
   SKUMatrixSidebar,
+  SKUMatrixTrigger,
 } from './organisms/SKUMatrix'
+
 export type {
   SKUMatrixProps,
-  SKUMatrixTriggerProps,
   SKUMatrixSidebarProps,
+  SKUMatrixTriggerProps,
 } from './organisms/SKUMatrix'
+
+export {
+  default as QuickOrderDrawer,
+  QuickOrderDrawerFooter,
+  QuickOrderDrawerHeader,
+  QuickOrderDrawerProducts,
+  useQuickOrderDrawer,
+} from './organisms/QuickOrderDrawer'
+
+export type {
+  AlertMessages,
+  Product,
+  QuickOrderDrawerFooterProps,
+  QuickOrderDrawerHeaderProps,
+  QuickOrderDrawerProductsProps,
+  QuickOrderDrawerProps,
+  QuickOrderDrawerProviderProps,
+  VariationProductColumn,
+} from './organisms/QuickOrderDrawer'
+
+export { default as Dropzone } from './molecules/Dropzone'
+export type { DropzoneProps, DropzoneState } from './molecules/Dropzone'

package/src/molecules/Accordion/AccordionItem.tsx

@@ -40,9 +40,10 @@ type AccordionItemComponent = <C extends ElementType = 'div'>(
   props: AccordionItemProps<C>
 ) => ReactElement | null
 
-const AccordionItem = forwardRef(function AccordionItem<
-  C extends ElementType = 'div',
->(
+const AccordionItem = forwardRef<
+  HTMLDivElement,
+  Omit<AccordionItemProps<'div'>, 'ref'>
+>(function AccordionItem<C extends ElementType = 'div'>(
   {
     prefixId = '',
     index = 0,

package/src/molecules/Dropzone/Dropzone.tsx

@@ -0,0 +1,248 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import React, { forwardRef, useCallback } from 'react'
+import { useDropzone, type Accept, type FileRejection } from 'react-dropzone'
+
+/**
+ * Merges multiple refs (object refs and callback refs) into a single callback ref.
+ */
+function mergeRefs<T>(
+  ...refs: Array<React.Ref<T> | undefined>
+): React.RefCallback<T> {
+  return (instance: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(instance)
+      } else if (ref && typeof ref === 'object') {
+        ;(ref as React.MutableRefObject<T | null>).current = instance
+      }
+    }
+  }
+}
+
+export interface DropzoneProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon?: ReactNode
+  /**
+   * Callback function called when files are accepted.
+   */
+  onFilesAccepted?: (files: File[]) => void
+  /**
+   * Callback function called when files are rejected.
+   */
+  onFilesRejected?: (fileRejections: FileRejection[]) => void
+  /**
+   * Maximum number of files that can be selected.
+   */
+  maxFiles?: number
+  /**
+   * Maximum file size in bytes.
+   */
+  maxSize?: number
+  /**
+   * Minimum file size in bytes.
+   */
+  minSize?: number
+  /**
+   * Accepted file types.
+   */
+  accept?: Accept
+  /**
+   * Whether multiple files can be selected.
+   */
+  multiple?: boolean
+  /**
+   * Whether the dropzone is disabled.
+   */
+  disabled?: boolean
+  /**
+   * Custom text to display when dragging files over the dropzone.
+   */
+  dragActiveText?: string
+  /**
+   * Custom text to display in the dropzone.
+   */
+  text?: string
+  /**
+   * Whether to disable opening the file dialog on click.
+   */
+  noClick?: boolean
+  /**
+   * Whether to disable opening the file dialog via keyboard.
+   */
+  noKeyboard?: boolean
+  /**
+   * Whether to disable drag-and-drop on the drop zone.
+   */
+  noDrag?: boolean
+  /**
+   * Custom content for the select files button.
+   */
+  selectFilesButton?: ReactNode
+  /**
+   * Accessible label for the dropzone root element.
+   * When disabled, `aria-disabled` is also set so assistive tech
+   * can still identify the dropzone and its state.
+   */
+  ariaLabel?: string
+}
+
+export interface DropzoneState {
+  acceptedFiles: File[]
+  fileRejections: FileRejection[]
+}
+
+export interface DropzoneState {
+  acceptedFiles: File[]
+  fileRejections: FileRejection[]
+}
+
+const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(function Dropzone(
+  {
+    icon,
+    testId = 'fs-dropzone',
+    children,
+    onFilesAccepted,
+    onFilesRejected,
+    maxFiles = 0,
+    maxSize,
+    minSize,
+    accept,
+    multiple = true,
+    disabled = false,
+    dragActiveText,
+    text,
+    noClick = false,
+    noKeyboard = false,
+    noDrag = false,
+    selectFilesButton = null,
+    ariaLabel,
+    ...otherProps
+  },
+  ref
+) {
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (onFilesAccepted && acceptedFiles.length > 0) {
+        onFilesAccepted(acceptedFiles)
+      }
+    },
+    [onFilesAccepted]
+  )
+
+  const onDropRejected = useCallback(
+    (fileRejections: FileRejection[]) => {
+      if (onFilesRejected && fileRejections.length > 0) {
+        onFilesRejected(fileRejections)
+      }
+    },
+    [onFilesRejected]
+  )
+
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    acceptedFiles,
+    fileRejections,
+  } = useDropzone({
+    onDrop,
+    onDropRejected,
+    accept,
+    maxFiles,
+    maxSize,
+    minSize,
+    multiple,
+    disabled,
+    noClick,
+    noKeyboard,
+    noDrag,
+  })
+
+  const rootProps = getRootProps()
+  const mergedRef = mergeRefs(ref, rootProps.ref as React.Ref<HTMLDivElement>)
+
+  const accessibilityProps = ariaLabel
+    ? disabled
+      ? {
+          role: 'button' as const,
+          'aria-label': ariaLabel,
+          'aria-disabled': true as const,
+        }
+      : {
+          role: 'button' as const,
+          'aria-label': ariaLabel,
+        }
+    : {}
+
+  return (
+    <div
+      data-fs-dropzone
+      data-fs-dropzone-drag-active={isDragActive}
+      data-fs-dropzone-drag-accept={isDragAccept}
+      data-fs-dropzone-drag-reject={isDragReject}
+      data-fs-dropzone-disabled={disabled}
+      data-testid={testId}
+      {...rootProps}
+      {...accessibilityProps}
+      {...otherProps}
+      ref={mergedRef}
+    >
+      <input {...getInputProps()} />
+
+      {icon && <div data-fs-dropzone-icon>{icon}</div>}
+
+      <div data-fs-dropzone-content>
+        {isDragActive ? (
+          <p data-fs-dropzone-text>{dragActiveText}</p>
+        ) : (
+          <>{children || <p data-fs-dropzone-text>{text}</p>}</>
+        )}
+
+        {selectFilesButton && !noClick && !disabled && selectFilesButton}
+      </div>
+
+      {acceptedFiles.length > 0 && (
+        <div data-fs-dropzone-files>
+          <ul>
+            {acceptedFiles.map((file: File, index: number) => (
+              <li key={index} data-fs-dropzone-file>
+                {file.name} - {file.size} bytes
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {fileRejections.length > 0 && (
+        <div data-fs-dropzone-errors>
+          <ul>
+            {fileRejections.map(
+              (fileRejection: FileRejection, index: number) => {
+                const { file, errors } = fileRejection
+                return (
+                  <li key={index} data-fs-dropzone-error>
+                    {file.name} -{' '}
+                    {errors
+                      .map((e: { message: string }) => e.message)
+                      .join(', ')}
+                  </li>
+                )
+              }
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+})
+
+export default Dropzone

package/src/molecules/Dropzone/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Dropzone'
+export type { DropzoneProps, DropzoneState } from './Dropzone'