@shipstatic/drop 0.1.4 → 0.1.6

package/dist/index.d.cts

@@ -72,9 +72,31 @@ interface DropReturn {
     statusText: string;
     /** Whether currently processing files (ZIP extraction, etc.) */
     isProcessing: boolean;
+    /** Whether user is currently dragging over the dropzone */
+    isDragging: boolean;
     /** Last validation error if any */
     validationError: ClientError | null;
-    /** Process files from drop (resets and replaces existing files) */
+    /** Get props to spread on dropzone element (handles drag & drop) */
+    getDropzoneProps: () => {
+        onDragOver: (e: React.DragEvent) => void;
+        onDragLeave: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+        onClick: () => void;
+    };
+    /** Get props to spread on hidden file input element */
+    getInputProps: () => {
+        ref: React.RefObject<HTMLInputElement | null>;
+        type: 'file';
+        style: {
+            display: string;
+        };
+        multiple: boolean;
+        webkitdirectory: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+    /** Programmatically trigger file picker */
+    open: () => void;
+    /** Manually process files (for advanced usage) */
     processFiles: (files: File[]) => Promise<void>;
     /** Clear all files and reset state */
     clearAll: () => void;
@@ -88,9 +110,19 @@ interface DropReturn {
     }) => void;
 }
 /**
- * Headless drop hook
- * Handles file processing, ZIP extraction, and validation
- * Does NOT handle uploading - that's the consumer's responsibility
+ * Headless drop hook for file upload workflows
+ *
+ * @example
+ * ```tsx
+ * const drop = useDrop({ ship });
+ *
+ * return (
+ *   <div {...drop.getDropzoneProps()} style={{...}}>
+ *     <input {...drop.getInputProps()} />
+ *     {drop.isDragging ? "📂 Drop" : "📁 Click"}
+ *   </div>
+ * );
+ * ```
  */
 declare function useDrop(options: DropOptions): DropReturn;
 
@@ -152,26 +184,9 @@ declare function extractZipToFiles(zipFile: File): Promise<ZipExtractionResult>;
  * normalizePath('/absolute/path.txt') → 'absolute/path.txt'
  */
 declare function normalizePath(path: string): string;
-/**
- * Check if a file path is a junk file that should be filtered out
- * Filters common system files like .DS_Store, Thumbs.db, desktop.ini,
- * and macOS resource fork metadata in __MACOSX directories
- *
- * Case-insensitive matching to handle files from different operating systems
- * (Windows file systems are case-insensitive, so Thumbs.db === THUMBS.DB)
- *
- * @example
- * isJunkFile('.DS_Store') → true
- * isJunkFile('.ds_store') → true (case-insensitive)
- * isJunkFile('THUMBS.DB') → true (case-insensitive)
- * isJunkFile('folder/.DS_Store') → true
- * isJunkFile('__MACOSX/file.txt') → true
- * isJunkFile('mydsstore.txt') → false
- */
-declare function isJunkFile(path: string): boolean;
 /**
  * Check if a file is a ZIP file based on MIME type or extension
  */
 declare function isZipFile(file: File): boolean;
 
-export { type ClientError, type DropOptions, type DropReturn, FILE_STATUSES, type FileStatus, type ProcessedFile, type ZipExtractionResult, createProcessedFile, extractZipToFiles, formatFileSize, getValidFiles, isJunkFile, isZipFile, normalizePath, stripCommonPrefix, useDrop };
+export { type ClientError, type DropOptions, type DropReturn, FILE_STATUSES, type FileStatus, type ProcessedFile, type ZipExtractionResult, createProcessedFile, extractZipToFiles, formatFileSize, getValidFiles, isZipFile, normalizePath, stripCommonPrefix, useDrop };

package/dist/index.d.ts

@@ -72,9 +72,31 @@ interface DropReturn {
     statusText: string;
     /** Whether currently processing files (ZIP extraction, etc.) */
     isProcessing: boolean;
+    /** Whether user is currently dragging over the dropzone */
+    isDragging: boolean;
     /** Last validation error if any */
     validationError: ClientError | null;
-    /** Process files from drop (resets and replaces existing files) */
+    /** Get props to spread on dropzone element (handles drag & drop) */
+    getDropzoneProps: () => {
+        onDragOver: (e: React.DragEvent) => void;
+        onDragLeave: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+        onClick: () => void;
+    };
+    /** Get props to spread on hidden file input element */
+    getInputProps: () => {
+        ref: React.RefObject<HTMLInputElement | null>;
+        type: 'file';
+        style: {
+            display: string;
+        };
+        multiple: boolean;
+        webkitdirectory: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+    /** Programmatically trigger file picker */
+    open: () => void;
+    /** Manually process files (for advanced usage) */
     processFiles: (files: File[]) => Promise<void>;
     /** Clear all files and reset state */
     clearAll: () => void;
@@ -88,9 +110,19 @@ interface DropReturn {
     }) => void;
 }
 /**
- * Headless drop hook
- * Handles file processing, ZIP extraction, and validation
- * Does NOT handle uploading - that's the consumer's responsibility
+ * Headless drop hook for file upload workflows
+ *
+ * @example
+ * ```tsx
+ * const drop = useDrop({ ship });
+ *
+ * return (
+ *   <div {...drop.getDropzoneProps()} style={{...}}>
+ *     <input {...drop.getInputProps()} />
+ *     {drop.isDragging ? "📂 Drop" : "📁 Click"}
+ *   </div>
+ * );
+ * ```
  */
 declare function useDrop(options: DropOptions): DropReturn;
 
@@ -152,26 +184,9 @@ declare function extractZipToFiles(zipFile: File): Promise<ZipExtractionResult>;
  * normalizePath('/absolute/path.txt') → 'absolute/path.txt'
  */
 declare function normalizePath(path: string): string;
-/**
- * Check if a file path is a junk file that should be filtered out
- * Filters common system files like .DS_Store, Thumbs.db, desktop.ini,
- * and macOS resource fork metadata in __MACOSX directories
- *
- * Case-insensitive matching to handle files from different operating systems
- * (Windows file systems are case-insensitive, so Thumbs.db === THUMBS.DB)
- *
- * @example
- * isJunkFile('.DS_Store') → true
- * isJunkFile('.ds_store') → true (case-insensitive)
- * isJunkFile('THUMBS.DB') → true (case-insensitive)
- * isJunkFile('folder/.DS_Store') → true
- * isJunkFile('__MACOSX/file.txt') → true
- * isJunkFile('mydsstore.txt') → false
- */
-declare function isJunkFile(path: string): boolean;
 /**
  * Check if a file is a ZIP file based on MIME type or extension
  */
 declare function isZipFile(file: File): boolean;
 
-export { type ClientError, type DropOptions, type DropReturn, FILE_STATUSES, type FileStatus, type ProcessedFile, type ZipExtractionResult, createProcessedFile, extractZipToFiles, formatFileSize, getValidFiles, isJunkFile, isZipFile, normalizePath, stripCommonPrefix, useDrop };
+export { type ClientError, type DropOptions, type DropReturn, FILE_STATUSES, type FileStatus, type ProcessedFile, type ZipExtractionResult, createProcessedFile, extractZipToFiles, formatFileSize, getValidFiles, isZipFile, normalizePath, stripCommonPrefix, useDrop };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useState, useRef, useCallback } from 'react';
-import { formatFileSize as formatFileSize$1, getValidFiles as getValidFiles$1, validateFiles } from '@shipstatic/ship';
+import { formatFileSize as formatFileSize$1, getValidFiles as getValidFiles$1, filterJunk, validateFiles } from '@shipstatic/ship';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -11735,7 +11735,6 @@ async function extractZipToFiles(zipFile) {
         errors.push(`Skipped invalid path: ${path}`);
         continue;
       }
-      if (isJunkFile(sanitizedPath)) continue;
       try {
         const content = await entry.async("blob");
         const mimeType = getMimeType(sanitizedPath);
@@ -11773,11 +11772,6 @@ function normalizePath(path) {
   }
   return normalized.join("/");
 }
-function isJunkFile(path) {
-  const basename = (path.split("/").pop() || "").toLowerCase();
-  const junkFiles = [".ds_store", "thumbs.db", "desktop.ini", "._.ds_store"];
-  return path.toLowerCase().startsWith("__macosx/") || junkFiles.includes(basename);
-}
 function isZipFile(file) {
   return file.type === "application/zip" || file.type === "application/x-zip-compressed" || file.name.toLowerCase().endsWith(".zip");
 }
@@ -11838,6 +11832,38 @@ function stripCommonPrefix(files) {
     path: f.path.startsWith(prefix) ? f.path.slice(prefix.length) : f.path
   }));
 }
+async function traverseFileTree(entry, files, currentPath = "") {
+  if (entry.isFile) {
+    const file = await new Promise((resolve, reject) => {
+      entry.file(resolve, reject);
+    });
+    const relativePath = currentPath ? `${currentPath}/${file.name}` : file.name;
+    Object.defineProperty(file, "webkitRelativePath", {
+      value: relativePath,
+      writable: false
+    });
+    files.push(file);
+  } else if (entry.isDirectory) {
+    const dirReader = entry.createReader();
+    let allEntries = [];
+    const readEntriesBatch = async () => {
+      const batch = await new Promise(
+        (resolve, reject) => {
+          dirReader.readEntries(resolve, reject);
+        }
+      );
+      if (batch.length > 0) {
+        allEntries = allEntries.concat(batch);
+        await readEntriesBatch();
+      }
+    };
+    await readEntriesBatch();
+    for (const childEntry of allEntries) {
+      const entryPath = childEntry.isDirectory ? currentPath ? `${currentPath}/${childEntry.name}` : childEntry.name : currentPath;
+      await traverseFileTree(childEntry, files, entryPath);
+    }
+  }
+}
 function useDrop(options) {
   const {
     ship,
@@ -11849,8 +11875,10 @@ function useDrop(options) {
   const [sourceName, setSourceName] = useState("");
   const [statusText, setStatusText] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   const [validationError, setValidationError] = useState(null);
   const isProcessingRef = useRef(false);
+  const inputRef = useRef(null);
   const processFiles = useCallback(async (newFiles) => {
     if (isProcessingRef.current) {
       console.warn("File processing already in progress. Ignoring duplicate call.");
@@ -11891,9 +11919,16 @@ function useDrop(options) {
       } else {
         allFiles.push(...newFiles);
       }
+      const getFilePath = (f) => {
+        const webkitPath = f.webkitRelativePath;
+        return webkitPath && webkitPath.trim() ? webkitPath : f.name;
+      };
+      const filePaths = allFiles.map(getFilePath);
+      const validPaths = new Set(filterJunk(filePaths));
+      const cleanFiles = allFiles.filter((f) => validPaths.has(getFilePath(f)));
       setStatusText("Processing files...");
       const processedFiles = await Promise.all(
-        allFiles.map((file) => createProcessedFile(file))
+        cleanFiles.map((file) => createProcessedFile(file))
       );
       const finalFiles = stripPrefix ? stripCommonPrefix(processedFiles) : processedFiles;
       const config = await ship.getConfig();
@@ -11935,6 +11970,7 @@ function useDrop(options) {
     setSourceName("");
     setStatusText("");
     setValidationError(null);
+    setIsDragging(false);
     isProcessingRef.current = false;
     setIsProcessing(false);
   }, []);
@@ -11946,14 +11982,79 @@ function useDrop(options) {
       (file) => file.id === fileId ? { ...file, ...state } : file
     ));
   }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+  const handleDrop = useCallback(async (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const items = Array.from(e.dataTransfer.items);
+    const files2 = [];
+    let hasEntries = false;
+    for (const item of items) {
+      if (item.kind === "file") {
+        const entry = item.webkitGetAsEntry?.();
+        if (entry) {
+          hasEntries = true;
+          await traverseFileTree(
+            entry,
+            files2,
+            entry.isDirectory ? entry.name : ""
+          );
+        }
+      }
+    }
+    if (!hasEntries && e.dataTransfer.files.length > 0) {
+      files2.push(...Array.from(e.dataTransfer.files));
+    }
+    if (files2.length > 0) {
+      await processFiles(files2);
+    }
+  }, [processFiles]);
+  const handleInputChange = useCallback((e) => {
+    const files2 = Array.from(e.target.files || []);
+    if (files2.length > 0) {
+      processFiles(files2);
+    }
+  }, [processFiles]);
+  const open = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+  const getDropzoneProps = useCallback(() => ({
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+    onClick: open
+  }), [handleDragOver, handleDragLeave, handleDrop, open]);
+  const getInputProps = useCallback(() => ({
+    ref: inputRef,
+    type: "file",
+    style: { display: "none" },
+    multiple: true,
+    webkitdirectory: "",
+    onChange: handleInputChange
+  }), [handleInputChange]);
   return {
+    // State
     files,
     sourceName,
     statusText,
     isProcessing,
+    isDragging,
     validationError,
+    // Primary API: Prop getters
+    getDropzoneProps,
+    getInputProps,
+    // Actions
+    open,
     processFiles,
     clearAll,
+    // Helpers
     getValidFiles: getValidFilesCallback,
     updateFileStatus
   };
@@ -11982,6 +12083,6 @@ mime-db/index.js:
    *)
 */
 
-export { FILE_STATUSES, createProcessedFile, extractZipToFiles, formatFileSize, getValidFiles, isJunkFile, isZipFile, normalizePath, stripCommonPrefix, useDrop };
+export { FILE_STATUSES, createProcessedFile, extractZipToFiles, formatFileSize, getValidFiles, isZipFile, normalizePath, stripCommonPrefix, useDrop };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map