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

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'

package/src/molecules/FileUploadCard/FileUploadCard.tsx

@@ -0,0 +1,406 @@
+import type { ChangeEvent, DragEvent, HTMLAttributes } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+
+import { Button, Card, Icon, Input } from '../..'
+import { useOnClickOutside } from '../../hooks'
+import FileUploadStatus, {
+  FileUploadErrorType,
+  FileUploadState,
+} from '../FileUploadStatus/FileUploadStatus'
+
+export interface FileUploadCardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onDrop'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Controls whether the component is visible.
+   */
+  isOpen: boolean
+  /**
+   * Callback function when the component should be closed.
+   */
+  onDismiss?: () => void
+  /**
+   * Callback function when a file is selected.
+   */
+  onFileSelect?: (files: File[]) => void
+  /**
+   * Callback function when download template is clicked.
+   */
+  onDownloadTemplate?: () => void
+  /**
+   * Callback function when search button is clicked after file upload.
+   */
+  onSearch?: (file: File) => void
+  /**
+   * Accepted file types.
+   * @default '.csv'
+   */
+  accept?: string
+  /**
+   * Allow multiple file selection.
+   * @default false
+   */
+  multiple?: boolean
+  /**
+   * Card title (e.g. from CMS).
+   */
+  title: string
+  /**
+   * Aria-label for the file input (e.g. from CMS).
+   */
+  fileInputAriaLabel: string
+  /**
+   * Aria-label for the dropzone region (e.g. from CMS).
+   */
+  dropzoneAriaLabel: string
+  /**
+   * Dropzone title text (e.g. from CMS).
+   */
+  dropzoneTitle: string
+  /**
+   * Label for the select file button (e.g. from CMS).
+   */
+  selectFileButtonLabel: string
+  /**
+   * Label for the download template button (e.g. from CMS).
+   */
+  downloadTemplateButtonLabel: string
+  /**
+   * Aria-label for the remove button in FileUploadStatus (e.g. from CMS).
+   */
+  removeButtonAriaLabel: string
+  /**
+   * Label for the search button in FileUploadStatus (e.g. from CMS).
+   */
+  searchButtonLabel: string
+  /**
+   * Status text when uploading in FileUploadStatus (e.g. from CMS).
+   */
+  uploadingStatusText: string
+  /**
+   * Status text when completed in FileUploadStatus (e.g. from CMS). Receives file size in bytes.
+   */
+  getCompletedStatusText: (fileSize: number) => string
+  /**
+   * Error messages per error type for FileUploadStatus (e.g. from CMS).
+   */
+  errorMessages: Partial<
+    Record<FileUploadErrorType, { title: string; description: string }>
+  >
+  /**
+   * Formatter for file size display.
+   */
+  formatterFileSize?: (size: number) => string
+  /**
+   * Formatter for file name display.
+   */
+  formatterFileName?: (name: string) => string
+  /**
+   * Indicates if the file is being uploaded.
+   */
+  isUploading?: boolean
+  /**
+   * Indicates if there was an error during file upload.
+   */
+  hasError?: boolean
+  /**
+   * Type of error when hasError is true.
+   */
+  errorType?: FileUploadErrorType
+  /**
+   * Custom error message to display when hasError is true.
+   */
+  errorMessage?: string
+}
+
+const FileUploadCard = ({
+  testId = 'fs-file-upload-card',
+  isOpen,
+  onDismiss,
+  onFileSelect,
+  onDownloadTemplate,
+  onSearch,
+  accept = '.csv',
+  multiple = false,
+  title,
+  fileInputAriaLabel,
+  dropzoneAriaLabel,
+  dropzoneTitle,
+  selectFileButtonLabel,
+  downloadTemplateButtonLabel,
+  removeButtonAriaLabel,
+  searchButtonLabel,
+  uploadingStatusText,
+  getCompletedStatusText,
+  errorMessages,
+  formatterFileSize,
+  formatterFileName,
+  isUploading = false,
+  hasError = false,
+  errorType: errorTypeProp,
+  errorMessage,
+  ...otherProps
+}: FileUploadCardProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [dragActive, setDragActive] = useState(false)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [uploadState, setUploadState] = useState<FileUploadState>(
+    FileUploadState.Uploading
+  )
+  const [errorType, setErrorType] = useState<FileUploadErrorType | undefined>(
+    undefined
+  )
+
+  useOnClickOutside(isOpen ? containerRef : undefined, () => {
+    if (isOpen) {
+      onDismiss?.()
+    }
+  })
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onDismiss?.()
+      }
+    }
+
+    window.addEventListener('keydown', handleEscape)
+    return () => window.removeEventListener('keydown', handleEscape)
+  }, [isOpen, onDismiss])
+
+  useEffect(() => {
+    if (!selectedFile) return
+
+    if (hasError) {
+      setUploadState(FileUploadState.Error)
+      setErrorType(errorTypeProp ?? FileUploadErrorType.InvalidStructure)
+      return
+    }
+
+    if (isUploading) {
+      setUploadState(FileUploadState.Uploading)
+      setErrorType(undefined)
+      return
+    }
+
+    setUploadState(FileUploadState.Completed)
+    setErrorType(undefined)
+  }, [hasError, selectedFile, isUploading, errorTypeProp])
+
+  const isValidFileType = (file: File): boolean => {
+    const fileName = file.name.toLowerCase()
+    const acceptedTypes = accept
+      .split(',')
+      .map((value) => value.trim().toLowerCase())
+      .filter(Boolean)
+
+    if (acceptedTypes.length === 0) {
+      return fileName.endsWith('.csv')
+    }
+
+    return acceptedTypes.some((value) =>
+      value.startsWith('.')
+        ? fileName.endsWith(value)
+        : file.type.toLowerCase() === value
+    )
+  }
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || [])
+    if (files.length > 0) {
+      const file = files[0]
+      setSelectedFile(file)
+
+      if (!isValidFileType(file)) {
+        setUploadState(FileUploadState.Error)
+        setErrorType(FileUploadErrorType.Unsupported)
+        return
+      }
+
+      setErrorType(undefined)
+
+      if (isUploading) {
+        setUploadState(FileUploadState.Uploading)
+      } else {
+        setUploadState(FileUploadState.Completed)
+      }
+
+      if (onFileSelect) {
+        onFileSelect(files)
+      }
+    }
+  }
+
+  const handleDrag = (e: DragEvent<HTMLDivElement>) => {
+    if (!isOpen) return
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive(true)
+    } else if (e.type === 'dragleave') {
+      setDragActive(false)
+    }
+  }
+
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    if (!isOpen) return
+    e.preventDefault()
+    e.stopPropagation()
+    setDragActive(false)
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      const files = Array.from(e.dataTransfer.files)
+      const file = files[0]
+      setSelectedFile(file)
+
+      if (!isValidFileType(file)) {
+        setUploadState(FileUploadState.Error)
+        setErrorType(FileUploadErrorType.Unsupported)
+        return
+      }
+
+      setErrorType(undefined)
+
+      if (isUploading) {
+        setUploadState(FileUploadState.Uploading)
+      } else {
+        setUploadState(FileUploadState.Completed)
+      }
+
+      if (onFileSelect) {
+        onFileSelect(files)
+      }
+    }
+  }
+
+  const triggerFileInput = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+    fileInputRef.current?.click()
+  }
+
+  const handleDownloadTemplate = () => {
+    if (onDownloadTemplate) {
+      onDownloadTemplate()
+    } else {
+      const csvContent = 'SKU,Quantity\nAB001,2\nAB100,5\nAB999,49'
+      const blob = new Blob([csvContent], { type: 'text/csv' })
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'template.csv'
+      a.click()
+      window.URL.revokeObjectURL(url)
+    }
+  }
+
+  const handleRemoveFile = () => {
+    setSelectedFile(null)
+    setUploadState(FileUploadState.Uploading)
+    setErrorType(undefined)
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  const handleSearch = () => {
+    if (selectedFile && onSearch) {
+      onSearch(selectedFile)
+    }
+  }
+
+  return (
+    <Card
+      ref={containerRef}
+      title={title}
+      data-fs-file-upload-card
+      data-fs-file-upload-card-open={isOpen}
+      data-fs-file-upload-card-has-file={selectedFile !== null}
+      testId={testId}
+      aria-hidden={!isOpen}
+      {...otherProps}
+    >
+      <Input
+        ref={fileInputRef}
+        type="file"
+        onChange={handleFileChange}
+        accept={accept}
+        multiple={multiple}
+        style={{ display: 'none' }}
+        aria-label={fileInputAriaLabel}
+      />
+
+      {selectedFile ? (
+        <FileUploadStatus
+          file={selectedFile}
+          state={uploadState}
+          errorType={errorTypeProp ?? errorType}
+          errorMessages={errorMessages}
+          errorMessage={errorMessage}
+          onRemove={handleRemoveFile}
+          onSearch={handleSearch}
+          onDownloadTemplate={handleDownloadTemplate}
+          onSelectFile={triggerFileInput}
+          removeButtonAriaLabel={removeButtonAriaLabel}
+          searchButtonLabel={searchButtonLabel}
+          downloadTemplateButtonLabel={downloadTemplateButtonLabel}
+          selectFileButtonLabel={selectFileButtonLabel}
+          uploadingStatusText={uploadingStatusText}
+          completedStatusText={getCompletedStatusText(selectedFile.size)}
+          fileName={
+            formatterFileName
+              ? formatterFileName(selectedFile.name)
+              : selectedFile.name
+          }
+        />
+      ) : (
+        <div
+          data-fs-file-upload-card-dropzone
+          data-fs-file-upload-card-dragging={dragActive}
+          onDragEnter={handleDrag}
+          onDragLeave={handleDrag}
+          onDragOver={handleDrag}
+          onDrop={handleDrop}
+          role="region"
+          aria-label={dropzoneAriaLabel}
+        >
+          <div data-fs-file-upload-card-icon>
+            <div data-fs-file-upload-card-icon-shadow />
+            <div data-fs-file-upload-card-icon-wrapper>
+              <Icon name="Paperclip" width={24} height={32} />
+            </div>
+            <div data-fs-file-upload-card-icon-badge>
+              <Icon name="Plus" width={16} height={16} />
+            </div>
+          </div>
+
+          <p data-fs-file-upload-card-title>{dropzoneTitle}</p>
+
+          <Button
+            variant="secondary"
+            size="regular"
+            onClick={triggerFileInput}
+            data-fs-file-upload-card-select-button
+          >
+            {selectFileButtonLabel}
+          </Button>
+
+          <Button
+            type="button"
+            onClick={handleDownloadTemplate}
+            data-fs-file-upload-card-template-link
+          >
+            {downloadTemplateButtonLabel}
+          </Button>
+        </div>
+      )}
+    </Card>
+  )
+}
+
+export default FileUploadCard

package/src/molecules/FileUploadCard/index.tsx

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