@tulip-systems/core 0.5.9 → 0.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tulip-systems/core",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

package/src/modules/storage/components/image-grid.client.tsx

@@ -14,7 +14,6 @@ import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog.cli
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useAction } from "@/lib/entry.client";
-import { arrayMove } from "@/lib/utils/array-move";
 import { cn } from "@/lib/utils/cn";
 import {
   closestCenter,
@@ -47,10 +46,13 @@ type ImageGridProps = ComponentProps<"div"> & {
   nodes: FileNode[];
   disabled?: boolean;
   moveAction: (params: { fromIndex: number; toIndex: number }) => Promise<void>;
+  optimistic?: {
+    move?: (params: { fromIndex: number; toIndex: number }) => Promise<void> | void;
+  };
 };
 
-export function ImageGrid({ nodes, moveAction, disabled, ...props }: ImageGridProps) {
-  const { onUpload, updateData, invalidateQuery } = useUploadZone();
+export function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }: ImageGridProps) {
+  const uploadZone = useUploadZone();
 
   const images = nodes.flatMap((node) => ({ ...node, url: getFileUrl(node.id) }));
 
@@ -75,12 +77,12 @@ export function ImageGrid({ nodes, moveAction, disabled, ...props }: ImageGridPr
       const fromIndex = images.findIndex((image) => image.id === activeId);
       const toIndex = images.findIndex((image) => image.id === overId);
 
-      await updateData((prev) => arrayMove(prev, { fromIndex, toIndex }));
+      await optimistic?.move?.({ fromIndex, toIndex });
       await moveAction({ fromIndex, toIndex });
     },
     onSuccess: async () => {
       setCurrent(0);
-      await invalidateQuery();
+      await uploadZone.optimistic?.invalidate?.();
     },
     onError: (error) => {
       console.error("Error moving image:", error);
@@ -113,7 +115,7 @@ export function ImageGrid({ nodes, moveAction, disabled, ...props }: ImageGridPr
                   multiple
                   onChange={(e) => {
                     if (!e.target.files) return;
-                    return Array.from(e.target.files).map(onUpload);
+                    return Array.from(e.target.files).map(uploadZone.onUpload);
                   }}
                 />
               </label>
@@ -156,7 +158,7 @@ type ImageGridItemProps = {
 };
 
 function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
-  const { uploadClient } = useUploadZone();
+  const uploadZone = useUploadZone();
 
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });
 
@@ -198,7 +200,7 @@ function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
             type="button"
             variant="destructive"
             size="icon"
-            onClick={() => uploadClient.deleteFiles([node.id])}
+            onClick={() => uploadZone.onRemove([node.id])}
             className="absolute left-2 top-2 hidden p-1 group-hover:flex"
           >
             <Icons.trash className="size-4" />

package/src/modules/storage/components/upload-zone-context.client.tsx

@@ -9,9 +9,16 @@ import { FileNode, Node } from "../lib/validators";
  */
 export type UploadZoneContextValue = {
   uploadClient: UploadClient;
-  updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;
-  invalidateQuery: () => Promise<void> | void;
   onUpload: (file: File) => Promise<Node>;
+  onRemove: (ids: string[]) => Promise<void>;
+  optimistic?: {
+    add?: (newValue: FileNode) => Promise<void> | void;
+    remove?: (ids: string[]) => Promise<void> | void;
+    invalidate?: () => Promise<void> | void;
+    cancel?: () => Promise<void> | void;
+  };
+  // updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;
+  // invalidateQuery: () => Promise<void> | void;
 };
 
 /**

package/src/modules/storage/components/upload-zone.client.tsx

@@ -1,74 +1,49 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/sonner.client";
-import { cn } from "@/lib/entry";
 import { useAction } from "@/lib/hooks/use-action";
-import { useQueryClient } from "@tanstack/react-query";
-import { ComponentProps, useCallback, useState } from "react";
-import { UploadClient, UploadFileRequest, UploadHooks } from "../lib/create-upload.client";
+import { cn } from "@/lib/utils/cn";
+import { ComponentProps, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { UploadFileRequest, UploadHooks } from "../lib/create-upload.client";
 import { FileNode, Node, UploadFileSchema } from "../lib/validators";
-import { UploadZoneContext } from "./upload-zone-context.client";
+import { UploadZoneContext, UploadZoneContextValue } from "./upload-zone-context.client";
 
-export type UploadZoneProps = ComponentProps<"div"> & {
-  queryKey: readonly unknown[];
+export type UploadZoneProps = ComponentProps<"div"> &
+  Pick<UploadZoneContextValue, "optimistic" | "uploadClient"> & {
+    variables: Pick<UploadFileSchema, "namespace" | "parentId" | "mode" | "hidden" | "readonly">;
+    uploadHooks?: UploadHooks;
 
-  variables: Pick<UploadFileSchema, "namespace" | "parentId" | "mode" | "hidden" | "readonly">;
-  uploadClient: UploadClient;
-  uploadHooks?: UploadHooks;
-
-  onUploadCompleted?: (node: Node) => Promise<void> | void;
-  onUploadFailed?: (error: unknown) => Promise<void> | void;
-};
+    onUploadCompleted?: (node: Node) => Promise<void> | void;
+    onUploadFailed?: (error: unknown) => Promise<void> | void;
+  };
 
 export function UploadZone({
   variables,
-  queryKey,
+  optimistic,
   uploadClient,
   uploadHooks,
   onUploadCompleted,
   onUploadFailed,
   children,
   className,
-  onDragOver,
-  onDragLeave,
   ...props
 }: UploadZoneProps) {
-  const queryClient = useQueryClient();
-  const [isDragging, setIsDragging] = useState(false);
-
-  /**
-   * Optimisticly update the data
-   */
-  const updateData = useCallback(
-    async (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => {
-      await queryClient.cancelQueries({ queryKey });
-      await queryClient.setQueryData(queryKey, newValue);
-    },
-    [queryClient, queryKey],
-  );
-
-  /**
-   * Invalidate the query
-   */
-  const invalidateQuery = useCallback(async () => {
-    await queryClient.invalidateQueries({ queryKey });
-  }, [queryClient, queryKey]);
-
   /**
    * Delete mutation
    */
   const deleteMutation = useAction({
-    mutationFn: async (params: { ids: string[] }) => uploadClient.deleteFiles(params.ids),
-    onMutate: async (variables) => {
-      await updateData((prev) => prev.filter((node) => !variables.ids.includes(node.id)));
-    },
-    onSuccess: async () => {
-      await invalidateQuery();
+    mutationFn: async (ids: string[]) => uploadClient.deleteFiles(ids),
+    onMutate: async (ids) => {
+      await optimistic?.cancel?.();
+      await optimistic?.remove?.(ids);
     },
     onError: async (error) => {
-      await onUploadFailed?.(error);
       console.error("Delete failed upload error: ", error);
+      await onUploadFailed?.(error);
+    },
+    onSettled: () => {
+      optimistic?.invalidate?.();
     },
   });
 
@@ -85,7 +60,8 @@ export function UploadZone({
         isPending: true,
       } as FileNode;
 
-      await updateData((prev) => [...(prev ?? []), newNode]);
+      await optimistic?.cancel?.();
+      await optimistic?.add?.(newNode);
     },
     onSuccess: async (data) => {
       await onUploadCompleted?.(data);
@@ -100,10 +76,10 @@ export function UploadZone({
       });
 
       console.info("Deleting failed upload");
-      await deleteMutation.mutateAsync({ ids: [variables.id] });
+      await deleteMutation.mutateAsync([variables.id]);
     },
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey });
+      optimistic?.invalidate?.();
     },
   });
 
@@ -112,47 +88,43 @@ export function UploadZone({
    */
   const onUpload = useCallback(
     async (file: File) => {
+      console.info("Uploading file", file);
       const req = uploadClient.prepareUpload({ ...variables, file });
       return await uploadMutation.mutateAsync(req);
     },
     [uploadClient, variables, uploadMutation],
   );
 
-  return (
-    <div
-      {...props}
-      className={cn("relative z-0 flex-1 space-y-6", className)}
-      onDragOver={(...args) => {
-        setIsDragging(true);
-        return onDragOver?.(...args);
-      }}
-      onDragLeave={(...args) => {
-        setIsDragging(false);
-        return onDragLeave?.(...args);
-      }}
-    >
-      {isDragging && (
-        <div className="border-primary bg-primary/20 absolute -inset-5 z-10 rounded-md border opacity-70 backdrop-blur-3xl">
-          <Input
-            multiple
-            type="file"
-            className="h-full w-full opacity-0"
-            onChange={async (e) => {
-              setIsDragging(false);
+  /**
+   * Drop handler
+   */
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      if (acceptedFiles.length === 0) return;
+      await Promise.allSettled(acceptedFiles.map(onUpload));
+    },
+    [onUpload],
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, noClick: true });
 
-              if (!e.target.files) return;
+  console.log("isDragActive", isDragActive);
 
-              await Promise.allSettled(Array.from(e.target.files).map(onUpload));
-            }}
-          />
-        </div>
+  return (
+    <div {...props} {...getRootProps()} className={cn("relative z-0", className)}>
+      <input {...getInputProps()} />
+
+      {/* Show drag overlay when drag is active */}
+      {isDragActive && (
+        <div className="bg-primary/20 border-primary absolute inset-0 z-10 rounded-md border opacity-70 backdrop-blur-3xl" />
       )}
+
       <UploadZoneContext
         value={{
           uploadClient,
           onUpload,
-          updateData,
-          invalidateQuery,
+          onRemove: deleteMutation.mutateAsync,
+          optimistic,
         }}
       >
         {children}