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

package/src/hooks/useCSVParser.ts

@@ -0,0 +1,367 @@
+import Papa from 'papaparse'
+import { useCallback, useMemo, useState } from 'react'
+
+export interface WorkerCSVData {
+  data: Array<{ sku: string; quantity: number }>
+  fileName: string
+  totalRows: number
+  fileSize: number
+}
+
+export interface WorkerCSVOptions {
+  skuColumnNames?: string[]
+  quantityColumnNames?: string[]
+  delimiter?: string
+  skipEmptyLines?: boolean
+  chunkSize?: number
+  onProgress?: (progress: {
+    processed: number
+    total: number
+    percentage: number
+  }) => void
+}
+
+export type CSVData = WorkerCSVData
+export type CSVParserOptions = WorkerCSVOptions
+
+export type CSVParserError = {
+  message: string
+  type: 'PARSE_ERROR' | 'VALIDATION_ERROR' | 'FILE_ERROR'
+}
+
+const defaultOptions: CSVParserOptions = {}
+
+/**
+ * Hook to parse CSV files containing SKU and Quantity columns.
+ * Utilizes PapaParse's native Web Worker for efficient parsing of large files.
+ * Supports both comma (,) and semicolon (;) delimiters - automatically detects which one is used.
+ * @param options CSV parsing options
+ * @returns Object containing parsing state and functions
+ */
+export function useCSVParser(options?: CSVParserOptions) {
+  const [error, setError] = useState<CSVParserError | null>(null)
+  const [isParsing, setIsParsing] = useState(false)
+  const [isGeneratingTemplate, setIsGeneratingTemplate] = useState(false)
+
+  const mergedOptions = useMemo(
+    () => ({ ...defaultOptions, ...options }),
+    [options]
+  )
+
+  const onParseFile = useCallback(
+    async (file: File): Promise<CSVData | null> => {
+      try {
+        setError(null)
+        setIsParsing(true)
+
+        const result = await parseCSVFile(file, mergedOptions)
+        return result
+      } catch (err) {
+        const error: CSVParserError = {
+          message:
+            err instanceof Error ? err.message : 'Failed to parse CSV file',
+          type: 'PARSE_ERROR',
+        }
+        setError(error)
+        return null
+      } finally {
+        setIsParsing(false)
+      }
+    },
+    [mergedOptions]
+  )
+
+  const onGenerateTemplate = useCallback(async (): Promise<string | null> => {
+    try {
+      setIsGeneratingTemplate(true)
+      const csvContent = generateCSVTemplate()
+      return csvContent
+    } catch (err) {
+      const error: CSVParserError = {
+        message:
+          err instanceof Error ? err.message : 'Failed to generate template',
+        type: 'PARSE_ERROR',
+      }
+      setError(error)
+      return null
+    } finally {
+      setIsGeneratingTemplate(false)
+    }
+  }, [])
+
+  const onClearError = useCallback(() => {
+    setError(null)
+  }, [])
+
+  return {
+    error,
+    isParsing,
+    isGeneratingTemplate,
+    onParseFile,
+    onGenerateTemplate,
+    onClearError,
+  }
+}
+
+/**
+ * Parse CSV file using PapaParse's native Web Worker
+ */
+const parseCSVFile = (
+  file: File,
+  options: WorkerCSVOptions = {}
+): Promise<WorkerCSVData> => {
+  return new Promise(async (resolve, reject) => {
+    const defaultOptions = {
+      skuColumnNames: ['sku', 'id', 'product', 'productid', 'item'],
+      quantityColumnNames: ['quantity', 'qty', 'amount', 'count'],
+      delimiter: '',
+      skipEmptyLines: true,
+      chunkSize: 1024 * 1024,
+    }
+
+    const config = { ...defaultOptions, ...options }
+
+    const detectDelimiter = (): Promise<string> => {
+      if (config.delimiter) {
+        return Promise.resolve(config.delimiter)
+      }
+
+      return new Promise((resolveDelimiter) => {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          const text = e.target?.result as string
+          const firstLine = (text.split(/\r?\n/)[0] || '').replace(/\r$/, '')
+
+          const commaCount = (firstLine.match(/,/g) || []).length
+          const semicolonCount = (firstLine.match(/;/g) || []).length
+          const tabCount = (firstLine.match(/\t/g) || []).length
+
+          if (semicolonCount > 0 && semicolonCount >= commaCount) {
+            resolveDelimiter(';')
+          } else if (tabCount > commaCount && tabCount > semicolonCount) {
+            resolveDelimiter('\t')
+          } else {
+            resolveDelimiter(',')
+          }
+        }
+        reader.onerror = () => resolveDelimiter(',')
+        reader.readAsText(file.slice(0, 1024))
+      })
+    }
+
+    const detectedDelimiter = await detectDelimiter()
+
+    let headers: string[] = []
+    let skuIndex = -1
+    let quantityIndex = -1
+    let isHeaderProcessed = false
+
+    const transformedData: Array<{ sku: string; quantity: number }> = []
+    const errors: string[] = []
+    let processedRows = 0
+    let totalEstimatedRows = 0
+
+    const findColumnIndex = (
+      headers: string[],
+      columnNames: string[]
+    ): number => {
+      return headers.findIndex((header) =>
+        columnNames.some(
+          (name) => header.toLowerCase().trim() === name.toLowerCase()
+        )
+      )
+    }
+
+    const validateAndTransformRow = (row: unknown[], rowIndex: number) => {
+      try {
+        const sku = row[skuIndex]
+        const quantity = row[quantityIndex]
+
+        if (!sku || sku === '' || quantity === undefined || quantity === '') {
+          return null
+        }
+
+        const trimmedSku = String(sku).trim()
+        const numericQuantity = Number(quantity)
+
+        if (!trimmedSku) {
+          throw new Error('Empty SKU found')
+        }
+
+        if (Number.isNaN(numericQuantity) || numericQuantity < 0) {
+          throw new Error(
+            `Invalid quantity value: ${quantity} for SKU: ${trimmedSku}`
+          )
+        }
+
+        return {
+          sku: trimmedSku,
+          quantity: numericQuantity,
+        }
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Unknown error'
+        errors.push(`Row ${rowIndex + 2}: ${errorMessage}`)
+
+        if (errors.length > 1000) {
+          errors.splice(0, 500)
+        }
+
+        return null
+      }
+    }
+
+    const estimateRows = (fileSize: number) => {
+      const avgBytesPerRow = 50
+      return Math.floor(fileSize / avgBytesPerRow)
+    }
+
+    totalEstimatedRows = estimateRows(file.size)
+
+    Papa.parse(file, {
+      header: false,
+      dynamicTyping: false,
+      skipEmptyLines: config.skipEmptyLines,
+      delimiter: detectedDelimiter,
+
+      worker: true,
+
+      chunk: (
+        results: { data: unknown[][] },
+        parser: { abort: () => void }
+      ) => {
+        try {
+          let rows = results.data
+
+          if (!isHeaderProcessed && rows.length > 0) {
+            headers = rows[0] as string[]
+
+            skuIndex = findColumnIndex(headers, config.skuColumnNames)
+            quantityIndex = findColumnIndex(headers, config.quantityColumnNames)
+
+            if (skuIndex === -1) {
+              parser.abort()
+              reject(
+                new Error(
+                  `SKU column not found. Expected one of: ${config.skuColumnNames.join(', ')}`
+                )
+              )
+              return
+            }
+
+            if (quantityIndex === -1) {
+              parser.abort()
+              reject(
+                new Error(
+                  `Quantity column not found. Expected one of: ${config.quantityColumnNames.join(', ')}`
+                )
+              )
+              return
+            }
+
+            rows = rows.slice(1)
+            isHeaderProcessed = true
+          }
+
+          rows.forEach((row, index) => {
+            const globalRowIndex = processedRows + index
+            const transformedRow = validateAndTransformRow(row, globalRowIndex)
+
+            if (transformedRow) {
+              transformedData.push(transformedRow)
+            }
+          })
+
+          processedRows += rows.length
+
+          if (config.onProgress) {
+            const percentage = Math.min(
+              100,
+              Math.round((processedRows / totalEstimatedRows) * 100)
+            )
+            config.onProgress({
+              processed: processedRows,
+              total: totalEstimatedRows,
+              percentage,
+            })
+          }
+        } catch (err) {
+          parser.abort()
+          reject(err)
+        }
+      },
+
+      complete: () => {
+        try {
+          if (transformedData.length === 0) {
+            if (errors.length > 0) {
+              reject(
+                new Error(
+                  `No valid data found. First few errors:\n${errors.slice(0, 5).join('\n')}`
+                )
+              )
+            } else {
+              reject(new Error('No valid data found in file'))
+            }
+            return
+          }
+
+          if (errors.length > 0) {
+            console.warn(
+              `CSV parsing completed with ${errors.length} warnings. Sample:`,
+              errors.slice(0, 10)
+            )
+          }
+
+          if (config.onProgress) {
+            config.onProgress({
+              processed: processedRows,
+              total: processedRows,
+              percentage: 100,
+            })
+          }
+
+          resolve({
+            data: transformedData,
+            fileName: file.name,
+            totalRows: transformedData.length,
+            fileSize: file.size,
+          })
+        } catch (err) {
+          reject(err)
+        }
+      },
+
+      error: (error: unknown) => {
+        const errorMessage =
+          error instanceof Error ? error.message : 'Unknown parsing error'
+        reject(new Error(`PapaParse error: ${errorMessage}`))
+      },
+
+      fastMode: false,
+      chunkSize: config.chunkSize,
+      preview: 0,
+      encoding: 'UTF-8',
+    })
+  })
+}
+
+/**
+ * Generate CSV template with sample data
+ */
+const generateCSVTemplate = (): string => {
+  const templateData = [
+    { sku: 'PROD-001', quantity: 5 },
+    { sku: 'ITEM-234', quantity: 12 },
+    { sku: 'SKU789', quantity: 3 },
+    { sku: 'ABC-XYZ-456', quantity: 8 },
+    { sku: 'SAMPLE-100', quantity: 25 },
+  ]
+
+  return Papa.unparse(templateData, {
+    header: true,
+    delimiter: ',',
+    newline: '\n',
+    skipEmptyLines: true,
+  })
+}

package/src/hooks/useFileUpload.ts

@@ -0,0 +1,88 @@
+import { useCallback, useState } from 'react'
+import type { FileRejection } from 'react-dropzone'
+
+/**
+ * Error codes returned by react-dropzone when a file is rejected.
+ */
+export enum FileRejectionCode {
+  FileTooLarge = 'file-too-large',
+  FileInvalidType = 'file-invalid-type',
+  TooManyFiles = 'too-many-files',
+}
+
+export type FileUploadOptions = {
+  maxFiles?: number
+  maxSize?: number
+  acceptedTypes?: Record<string, string[]>
+}
+
+const MAX_FILES_DEFAULT = 1
+const MAX_SIZE_DEFAULT = 100 * 1024 * 1024 // 100MB
+const ACCEPTED_TYPES_DEFAULT = {
+  'text/csv': ['.csv'],
+}
+
+export const DEFAULT_FILE_UPLOAD_OPTIONS: Required<FileUploadOptions> = {
+  maxFiles: MAX_FILES_DEFAULT,
+  maxSize: MAX_SIZE_DEFAULT,
+  acceptedTypes: ACCEPTED_TYPES_DEFAULT,
+}
+
+/**
+ * Hook to manage file upload errors and rejections.
+ * @param options Configuration options for file upload.
+ * @returns An object containing upload error state and handlers.
+ */
+export function useFileUpload(options: FileUploadOptions = {}) {
+  const resolvedOptions = { ...DEFAULT_FILE_UPLOAD_OPTIONS, ...options }
+  const { maxFiles, maxSize, acceptedTypes } = resolvedOptions
+  const allowedExtensions = Object.values(acceptedTypes)
+    .flat()
+    .map((ext) => ext.replace('.', '').toUpperCase())
+    .join(', ')
+
+  const [uploadError, setUploadError] = useState<string | null>(null)
+
+  const getErrorMessage = useCallback(
+    (code: string) => {
+      switch (code) {
+        case FileRejectionCode.FileTooLarge: {
+          const sizeMB = Math.round(maxSize / (1024 * 1024))
+          return `File is too large. Maximum size is ${sizeMB}MB.`
+        }
+
+        case FileRejectionCode.FileInvalidType:
+          return `Invalid file type. Please upload a ${allowedExtensions} file.`
+
+        case FileRejectionCode.TooManyFiles:
+          return `Too many files. Please upload only ${maxFiles} file(s).`
+
+        default:
+          return 'Failed to upload file. Please try again.'
+      }
+    },
+    [maxFiles, maxSize, allowedExtensions]
+  )
+
+  const onFilesRejected = useCallback(
+    (fileRejections: FileRejection[]) => {
+      const firstError = fileRejections[0]?.errors[0]
+
+      if (firstError) {
+        const errorMessage = getErrorMessage(firstError.code)
+        setUploadError(errorMessage)
+      }
+    },
+    [getErrorMessage]
+  )
+
+  const onClearUploadError = useCallback(() => {
+    setUploadError(null)
+  }, [])
+
+  return {
+    uploadError,
+    onFilesRejected,
+    onClearUploadError,
+  }
+}