@faststore/components 3.98.0-dev.3 → 3.98.0

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'

package/src/molecules/FileUploadStatus/FileUploadStatus.tsx

@@ -0,0 +1,258 @@
+import type { HTMLAttributes } from 'react'
+import React from 'react'
+
+import { Button, Icon } from '../..'
+
+export enum FileUploadState {
+  Uploading = 'uploading',
+  Completed = 'completed',
+  Error = 'error',
+}
+
+export enum FileUploadErrorType {
+  Unexpected = 'unexpected',
+  Unsupported = 'unsupported',
+  Unreadable = 'unreadable',
+  InvalidStructure = 'invalid-structure',
+  Empty = 'empty',
+  TooLarge = 'too-large',
+  NoProductsFound = 'no-products-found',
+}
+
+export interface FileUploadStatusProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * The file being uploaded.
+   */
+  file: File
+  /**
+   * Current upload state.
+   * @default 'uploading'
+   */
+  state?: FileUploadState
+  /**
+   * Type of error when state is 'error'.
+   */
+  errorType?: FileUploadErrorType
+  /**
+   * Custom error message. If provided, overrides the default error message for the errorType.
+   */
+  errorMessage?: string
+  /**
+   * Callback when the remove/cancel button is clicked.
+   */
+  onRemove?: () => void
+  /**
+   * Callback when the search button is clicked (only shown when state is 'completed').
+   */
+  onSearch?: () => void
+  /**
+   * Callback when download template is clicked (only shown when state is 'error').
+   */
+  onDownloadTemplate?: () => void
+  /**
+   * Callback when select file is clicked (only shown when state is 'error').
+   */
+  onSelectFile?: () => void
+  /**
+   * Aria-label for the remove button (e.g. from CMS).
+   */
+  removeButtonAriaLabel: string
+  /**
+   * Label for the search button when state is 'completed' (e.g. from CMS).
+   */
+  searchButtonLabel: string
+  /**
+   * Label for the download template button (e.g. from CMS).
+   */
+  downloadTemplateButtonLabel: string
+  /**
+   * Label for the select file button (e.g. from CMS).
+   */
+  selectFileButtonLabel: string
+  /**
+   * Error messages per error type (e.g. from CMS). Required when state is Error to show messages.
+   */
+  errorMessages: Partial<
+    Record<FileUploadErrorType, { title: string; description: string }>
+  >
+  /**
+   * Status text when state is Uploading (e.g. from CMS).
+   */
+  uploadingStatusText: string
+  /**
+   * Status text when state is Completed (e.g. from CMS). May include file size.
+   */
+  completedStatusText: string
+  /**
+   * Custom file name display (optional).
+   */
+  fileName?: string
+}
+
+const FileUploadStatus = ({
+  testId = 'fs-file-upload-status',
+  file,
+  state = FileUploadState.Uploading,
+  errorType,
+  errorMessage,
+  onRemove,
+  onSearch,
+  onDownloadTemplate,
+  onSelectFile,
+  removeButtonAriaLabel,
+  searchButtonLabel,
+  downloadTemplateButtonLabel,
+  selectFileButtonLabel,
+  errorMessages,
+  uploadingStatusText,
+  completedStatusText,
+  fileName,
+  ...otherProps
+}: FileUploadStatusProps) => {
+  const getErrorMessage = (): { title: string; description: string } => {
+    if (errorMessage) {
+      return { title: errorMessage, description: '' }
+    }
+
+    if (errorType && errorMessages?.[errorType]) {
+      return errorMessages[errorType]!
+    }
+
+    return (
+      errorMessages?.[FileUploadErrorType.Unexpected] ?? {
+        title: '',
+        description: '',
+      }
+    )
+  }
+
+  const getStatusText = (): string => {
+    switch (state) {
+      case FileUploadState.Uploading:
+        return uploadingStatusText
+      case FileUploadState.Completed:
+        return completedStatusText
+      default:
+        return ''
+    }
+  }
+
+  const getIcon = () => {
+    switch (state) {
+      case FileUploadState.Uploading:
+        return (
+          <div data-fs-file-upload-status-icon-loading>
+            <Icon name="CircleNotch" width={24} height={24} strokeWidth={5} />
+          </div>
+        )
+      case FileUploadState.Completed:
+        return (
+          <div data-fs-file-upload-status-icon-completed>
+            <Icon name="Table" width={24} height={24} strokeWidth={5} />
+          </div>
+        )
+      case FileUploadState.Error:
+        return (
+          <div data-fs-file-upload-status-icon-error>
+            <Icon
+              name="WarningOctagon"
+              width={24}
+              height={24}
+              strokeWidth={5}
+            />
+          </div>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div
+      data-fs-file-upload-status
+      data-fs-file-upload-status-state={state}
+      data-testid={testId}
+      {...otherProps}
+    >
+      <div
+        data-fs-file-upload-status-file-info
+        data-fs-file-upload-state={state}
+      >
+        <div data-fs-file-upload-status-icon>{getIcon()}</div>
+
+        <div data-fs-file-upload-status-details>
+          {state === FileUploadState.Error ? (
+            <>
+              <p data-fs-file-upload-status-text-error>
+                {getErrorMessage().title}
+              </p>
+              <p data-fs-file-upload-status-text-error>
+                {getErrorMessage().description}
+              </p>
+            </>
+          ) : (
+            <>
+              <p data-fs-file-upload-status-filename>{fileName ?? file.name}</p>
+              <p data-fs-file-upload-status-text>{getStatusText()}</p>
+            </>
+          )}
+        </div>
+
+        {onRemove && (
+          <Button
+            type="button"
+            onClick={onRemove}
+            data-fs-file-upload-status-remove
+            aria-label={removeButtonAriaLabel}
+          >
+            <Icon name="X" width={16} height={16} />
+          </Button>
+        )}
+      </div>
+      {state === FileUploadState.Completed && onSearch && (
+        <Button
+          type="button"
+          variant="primary"
+          size="regular"
+          onClick={onSearch}
+          data-fs-file-upload-status-search-button
+        >
+          {searchButtonLabel}
+        </Button>
+      )}
+
+      {state === FileUploadState.Error && (
+        <div data-fs-file-upload-status-error-actions>
+          {onDownloadTemplate && (
+            <Button
+              type="button"
+              variant="secondary"
+              size="regular"
+              onClick={onDownloadTemplate}
+              data-fs-file-upload-status-download-button
+            >
+              {downloadTemplateButtonLabel}
+            </Button>
+          )}
+          {onSelectFile && (
+            <Button
+              type="button"
+              variant="primary"
+              size="regular"
+              onClick={onSelectFile}
+              data-fs-file-upload-status-select-button
+            >
+              {selectFileButtonLabel}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default FileUploadStatus

package/src/molecules/FileUploadStatus/index.tsx

@@ -0,0 +1,6 @@
+export {
+  default,
+  FileUploadState,
+  FileUploadErrorType,
+} from './FileUploadStatus'
+export type { FileUploadStatusProps } from './FileUploadStatus'