@shipstatic/drop 0.1.19 → 0.2.0

package/README.md

@@ -22,7 +22,8 @@ function Uploader() {
   const drop = useDrop({ ship });
 
   const handleUpload = async () => {
-    await ship.deployments.create(drop.validFiles.map(f => f.file));
+    const files = drop.getFilesForUpload();
+    await ship.deployments.create(files);
   };
 
   return (
@@ -42,7 +43,7 @@ function Uploader() {
 
       {drop.status && <p>{drop.status.title}: {drop.status.details}</p>}
 
-      <button onClick={handleUpload} disabled={drop.phase !== 'ready'}>
+      <button onClick={handleUpload} disabled={!drop.validFiles.length}>
         Upload {drop.validFiles.length} files
       </button>
     </div>
@@ -65,6 +66,16 @@ function Uploader() {
 idle → dragging → processing → ready/error
 ```
 
+Use semantic booleans for clean rendering:
+
+```tsx
+{drop.isProcessing && <Spinner />}
+{drop.hasError && <Error message={drop.status?.details} onRetry={drop.reset} />}
+{drop.isInteractive && <DropZone />}
+```
+
+Or use `phase` for switch-case logic:
+
 ```tsx
 switch (drop.phase) {
   case 'idle': return 'Drop files here';
@@ -96,22 +107,39 @@ interface DropReturn {
   phase: 'idle' | 'dragging' | 'processing' | 'ready' | 'error';
   isProcessing: boolean;
   isDragging: boolean;
+  isInteractive: boolean;  // true when idle, dragging, or ready
+  hasError: boolean;       // true when in error state
   files: ProcessedFile[];
   validFiles: ProcessedFile[];
-  status: { title: string; details: string } | null;
+  sourceName: string;
+  status: { title: string; details: string; errors?: string[] } | null;
 
   // Prop getters
-  getDropzoneProps: () => { onDragOver, onDragLeave, onDrop, onClick };
-  getInputProps: () => { ref, type, style, multiple, webkitdirectory, onChange };
+  getDropzoneProps: (options?: { clickable?: boolean }) => {...};
+  getInputProps: () => {...};
 
   // Actions
-  open: () => void;           // Trigger file picker
+  open: () => void;                              // Trigger file picker
   processFiles: (files: File[]) => Promise<void>;
-  clearAll: () => void;
-  updateFileStatus: (fileId: string, state: {...}) => void;
+  reset: () => void;                             // Clear all files and reset state
+
+  // Helpers
+  getFilesForUpload: () => File[];               // Get raw File objects for SDK
 }
 ```
 
+### Prop Getter Options
+
+```tsx
+// Default: clickable dropzone (click opens file picker)
+<div {...drop.getDropzoneProps()}>
+
+// Drag-only dropzone (no click behavior)
+<div {...drop.getDropzoneProps({ clickable: false })}>
+  <button onClick={drop.open}>Select folder</button>
+</div>
+```
+
 ## Ship SDK Integration
 
 Drop uses Ship SDK's validation automatically:
@@ -126,8 +154,8 @@ const drop = useDrop({ ship });
 Pass files to Ship SDK:
 
 ```tsx
-const filesToDeploy = drop.validFiles.map(f => f.file);
-await ship.deployments.create(filesToDeploy);
+const files = drop.getFilesForUpload();
+await ship.deployments.create(files);
 ```
 
 ## Requirements

package/dist/index.cjs

@@ -11702,7 +11702,7 @@ var require_mime_db = __commonJS({
   }
 });
 
-// node_modules/.pnpm/@shipstatic+types@0.4.5/node_modules/@shipstatic/types/dist/index.js
+// node_modules/.pnpm/@shipstatic+types@0.4.7/node_modules/@shipstatic/types/dist/index.js
 var ErrorType;
 (function(ErrorType2) {
   ErrorType2["Validation"] = "validation_failed";
@@ -11916,7 +11916,15 @@ function useDrop(options) {
   const inputRef = react.useRef(null);
   const isProcessing = react.useMemo(() => state.value === "processing", [state.value]);
   const isDragging = react.useMemo(() => state.value === "dragging", [state.value]);
+  const isInteractive = react.useMemo(
+    () => state.value === "idle" || state.value === "dragging" || state.value === "ready",
+    [state.value]
+  );
+  const hasError = react.useMemo(() => state.value === "error", [state.value]);
   const validFiles = react.useMemo(() => ship.getValidFiles(state.files), [state.files]);
+  const getFilesForUpload = react.useCallback(() => {
+    return validFiles.map((f) => f.file);
+  }, [validFiles]);
   const processFiles = react.useCallback(async (newFiles) => {
     if (isProcessingRef.current) {
       console.warn("File processing already in progress. Ignoring duplicate call.");
@@ -12027,18 +12035,10 @@ function useDrop(options) {
       isProcessingRef.current = false;
     }
   }, [ship$1, onValidationError, onFilesReady, stripPrefix]);
-  const clearAll = react.useCallback(() => {
+  const reset = react.useCallback(() => {
     setState(initialState);
     isProcessingRef.current = false;
   }, []);
-  const updateFileStatus = react.useCallback((fileId, fileState) => {
-    setState((prev) => ({
-      ...prev,
-      files: prev.files.map(
-        (file) => file.id === fileId ? { ...file, ...fileState } : file
-      )
-    }));
-  }, []);
   const handleDragOver = react.useCallback((e) => {
     e.preventDefault();
     setState((prev) => {
@@ -12121,12 +12121,15 @@ function useDrop(options) {
   const open = react.useCallback(() => {
     inputRef.current?.click();
   }, []);
-  const getDropzoneProps = react.useCallback(() => ({
-    onDragOver: handleDragOver,
-    onDragLeave: handleDragLeave,
-    onDrop: handleDrop,
-    onClick: open
-  }), [handleDragOver, handleDragLeave, handleDrop, open]);
+  const getDropzoneProps = react.useCallback((options2) => {
+    const { clickable = true } = options2 ?? {};
+    return {
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      ...clickable && { onClick: open }
+    };
+  }, [handleDragOver, handleDragLeave, handleDrop, open]);
   const getInputProps = react.useCallback(() => ({
     ref: inputRef,
     type: "file",
@@ -12136,11 +12139,12 @@ function useDrop(options) {
     onChange: handleInputChange
   }), [handleInputChange]);
   return {
-    // State machine
     // Convenience getters (computed from state)
     phase: state.value,
     isProcessing,
     isDragging,
+    isInteractive,
+    hasError,
     files: state.files,
     sourceName: state.sourceName,
     status: state.status,
@@ -12150,10 +12154,10 @@ function useDrop(options) {
     // Actions
     open,
     processFiles,
-    clearAll,
+    reset,
     // Helpers
     validFiles,
-    updateFileStatus
+    getFilesForUpload
   };
 }
 /*! Bundled license information: