@tulip-systems/core 0.4.0 → 0.5.0

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

@@ -0,0 +1,225 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog.client";
+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,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripIcon, UploadIcon } from "lucide-react";
+import Image from "next/image";
+import React, { ComponentProps } from "react";
+import { getFileUrl, imageLoader } from "../lib/helpers";
+import { FileNode } from "../lib/validators";
+import { useUploadZone } from "./upload-zone-context.client";
+
+/**
+ * Image Grid
+ */
+type ImageGridProps = ComponentProps<"div"> & {
+  nodes: FileNode[];
+  disabled?: boolean;
+  moveAction: (params: { fromIndex: number; toIndex: number }) => Promise<void>;
+};
+
+export function ImageGrid({ nodes, moveAction, disabled, ...props }: ImageGridProps) {
+  const { onUpload, updateData, invalidateQuery } = useUploadZone();
+
+  const images = nodes.flatMap((node) => ({ ...node, url: getFileUrl(node.id) }));
+
+  const [current, setCurrent] = React.useState<number>(0);
+
+  const { setNodeRef } = useDroppable({ id: "image-grid" });
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const moveMuration = useAction({
+    mutationFn: async ({ active, over }: DragEndEvent) => {
+      if (!moveAction) return Promise.resolve();
+
+      const activeId = active.id;
+      const overId = over?.id;
+      if (!activeId || !overId || activeId === overId) return Promise.resolve();
+
+      const fromIndex = images.findIndex((image) => image.id === activeId);
+      const toIndex = images.findIndex((image) => image.id === overId);
+
+      await updateData((prev) => arrayMove(prev, { fromIndex, toIndex }));
+      await moveAction({ fromIndex, toIndex });
+    },
+    onSuccess: async () => {
+      setCurrent(0);
+      await invalidateQuery();
+    },
+    onError: (error) => {
+      console.error("Error moving image:", error);
+    },
+  });
+
+  return (
+    <Dialog {...props}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={moveMuration.mutate}
+      >
+        <div
+          ref={setNodeRef}
+          className="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5"
+        >
+          <SortableContext items={images.map((image) => image.id)} strategy={rectSortingStrategy}>
+            {images.map((node, index) => (
+              <ImageGridItem key={node.id} node={node} index={index} setCurrent={setCurrent} />
+            ))}
+
+            {!disabled && (
+              <label className="border-muted-foreground bg-muted hover:border-primary relative flex aspect-square w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed">
+                <UploadIcon className="h-8 w-8" />
+                <Input
+                  type="file"
+                  accept="image/jpeg, image/png, image/webp, image/gif"
+                  className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
+                  multiple
+                  onChange={(e) => {
+                    if (!e.target.files) return;
+                    return Array.from(e.target.files).map(onUpload);
+                  }}
+                />
+              </label>
+            )}
+          </SortableContext>
+        </div>
+      </DndContext>
+
+      <Carousel className="w-full" opts={{ startIndex: current }}>
+        <DialogContent className="border-none bg-transparent p-0 shadow-none md:max-w-[80vw] xl:max-w-[60vw]">
+          <CarouselContent className="md:max-h-[80vh]">
+            {images.map(({ id, url }) => (
+              <CarouselItem key={id} className="overflow-hidden rounded-xl">
+                <Image
+                  src={url}
+                  alt="Image Preview"
+                  width={1920}
+                  height={1080}
+                  className="h-full w-full rounded-xl object-contain"
+                  loader={imageLoader}
+                />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </DialogContent>
+      </Carousel>
+    </Dialog>
+  );
+}
+
+/**
+ * Image Grid Item
+ */
+type ImageGridItemProps = {
+  node: FileNode & { url: string };
+  index: number;
+  setCurrent: React.Dispatch<React.SetStateAction<number>>;
+};
+
+function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
+  const { deleteMutation } = useUploadZone();
+
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });
+
+  return (
+    <Card
+      id={node.id}
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      className={cn("group relative aspect-square w-full", node.isPending && "opacity-30")}
+    >
+      {!node.isPending ? (
+        <>
+          <DialogTrigger onClick={() => setCurrent(index)}>
+            <Image
+              src={node.url}
+              alt="Image Preview"
+              width={100}
+              height={100}
+              className="bg-muted absolute inset-0 h-full w-full cursor-pointer rounded-lg object-contain"
+              loader={imageLoader}
+            />
+          </DialogTrigger>
+
+          <Button
+            {...attributes}
+            {...listeners}
+            type="button"
+            variant="secondary"
+            size="icon"
+            className="absolute right-2 top-2 hidden p-1 group-hover:flex"
+          >
+            <GripIcon className="size-4" />
+          </Button>
+
+          <Button
+            type="button"
+            variant="destructive"
+            size="icon"
+            onClick={() => deleteMutation({ ids: [node.id] })}
+            className="absolute left-2 top-2 hidden p-1 group-hover:flex"
+          >
+            <Icons.trash className="size-4" />
+          </Button>
+        </>
+      ) : (
+        <Skeleton className="absolute inset-0 h-full w-full rounded-lg" />
+      )}
+    </Card>
+  );
+}
+
+export function ImageGridSkeleton(props: ComponentProps<"div">) {
+  return (
+    <div
+      {...props}
+      className={cn("grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5", props.className)}
+    >
+      {Array.from({ length: 12 }).map((_, index) => (
+        <Skeleton key={index} className="aspect-square w-full rounded-lg" />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils/cn";
+import { UploadIcon } from "lucide-react";
+import { ComponentProps } from "react";
+import { useUploadZone } from "./upload-zone-context.client";
+
+export function UploadButton({ className, ...props }: ComponentProps<typeof Button>) {
+  const { onUpload } = useUploadZone();
+
+  return (
+    <Button {...props} className={cn("relative gap-2", className)}>
+      <UploadIcon className="h-3 w-3" />
+      <span>Upload</span>
+
+      <Input
+        type="file"
+        className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
+        multiple
+        onChange={(e) => {
+          if (!e.target.files) return;
+          Array.from(e.target.files).forEach(onUpload);
+        }}
+      />
+    </Button>
+  );
+}

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

@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import { FileNode, Node, PresignFileSchema } from "../lib/validators";
+
+/**
+ * Upload Zone Context Value
+ */
+export type UploadZoneContextValue = {
+  presignMutation: (params: PresignFileSchema) => Promise<{ id: string; presignedUrl: string }>;
+  confirmMutation: (params: { id: string }) => Promise<Node>;
+  deleteMutation: (params: { ids: string[] }) => Promise<unknown>;
+  updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;
+  invalidateQuery: () => Promise<void> | void;
+  onUpload: (file: File) => Promise<Node>;
+};
+
+/**
+ * Upload Zone Context
+ */
+export const UploadZoneContext = React.createContext({} as UploadZoneContextValue);
+
+/**
+ * Upload Zone Hook
+ */
+export function useUploadZone() {
+  const context = React.useContext(UploadZoneContext);
+  if (!context) {
+    throw new Error("useUploadZone must be used within an UploadZoneProvider");
+  }
+  return context;
+}

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

@@ -0,0 +1,258 @@
+"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 { generateDefaultUUID } from "@/modules/config/entry";
+import { useQueryClient } from "@tanstack/react-query";
+import { ComponentProps, useCallback, useState } from "react";
+import { FileNode, Node, PresignFileSchema } from "../lib/validators";
+import { UploadZoneContext } from "./upload-zone-context.client";
+
+export type UploadZoneProps = ComponentProps<"div"> & {
+  namespace: string;
+  parentId: string | null;
+
+  queryKey: readonly unknown[];
+
+  presignAction: (params: PresignFileSchema) => Promise<{ id: string; presignedUrl: string }>;
+  onPresignStarted?: (file: PresignFileSchema) => Promise<void> | void;
+  onPresignCompleted?: (data: { id: string; presignedUrl: string }) => Promise<void> | void;
+
+  confirmAction: (params: { id: string }) => Promise<Node>;
+  onConfirmStarted?: (id: string) => Promise<void> | void;
+  onConfirmCompleted?: (node: Node) => Promise<void> | void;
+
+  deleteAction: (params: { ids: string[] }) => Promise<unknown>;
+
+  onUploadCompleted?: (node: Node) => Promise<void> | void;
+  onUploadFailed?: (error: unknown) => Promise<void> | void;
+};
+
+export function UploadZone({
+  namespace,
+  parentId,
+  queryKey,
+  presignAction,
+  confirmAction,
+  deleteAction,
+  onPresignStarted,
+  onPresignCompleted,
+  onConfirmStarted,
+  onConfirmCompleted,
+  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: deleteAction,
+    onMutate: async (variables) => {
+      await updateData((prev) => prev.filter((node) => !variables.ids.includes(node.id)));
+    },
+    onSuccess: async () => {
+      await invalidateQuery();
+    },
+    onError: async (error) => {
+      await onUploadFailed?.(error);
+      console.error("Delete failed upload error: ", error);
+    },
+  });
+
+  /**
+   * Presign upload mutation
+   */
+  const presignMutation = useAction({
+    mutationFn: async (params: PresignFileSchema) => {
+      await onPresignStarted?.(params);
+      const data = await presignAction(params);
+      await onPresignCompleted?.(data);
+      return data;
+    },
+    onMutate: async (variables) => {
+      // Generate a new node
+      const newNode = {
+        ...variables,
+        type: "file",
+        isPending: true,
+      } as FileNode;
+
+      await updateData((prev) => [...(prev ?? []), newNode]);
+    },
+    onError: async (error, variables) => {
+      await onUploadFailed?.(error);
+
+      console.error("Presign error: ", error);
+      toast.error("Bestand uploaden mislukt", {
+        description: error instanceof Error ? error.message : undefined,
+      });
+
+      console.info("Deleting failed upload");
+      await deleteMutation.mutateAsync({ ids: [variables.id] });
+    },
+  });
+
+  /**
+   * Upload mutation
+   */
+  const uploadMutation = useAction({
+    mutationFn: async (input: { id: string; presignedUrl: string; file: File }) => {
+      /**
+       * Upload the file
+       */
+      const uploadResponse = await fetch(input.presignedUrl, {
+        method: "PUT",
+        headers: { "Content-Type": input.file.type },
+        body: input.file,
+      });
+
+      if (!uploadResponse.ok) {
+        const message = await uploadResponse.text();
+        throw new Error(`Upload failed: ${message}`);
+      }
+    },
+    onError: async (error, variables) => {
+      await onUploadFailed?.(error);
+
+      console.error("Upload error: ", error);
+      toast.error("Bestand uploaden mislukt", {
+        description: error instanceof Error ? error.message : undefined,
+      });
+
+      console.info("Deleting failed upload");
+      await deleteMutation.mutateAsync({ ids: [variables.id] });
+    },
+  });
+
+  /**
+   * Confirm upload mutation
+   */
+  const confirmMutation = useAction({
+    mutationFn: async (params: { id: string }) => {
+      await onConfirmStarted?.(params.id);
+      const data = await confirmAction(params);
+      await onConfirmCompleted?.(data);
+      return data;
+    },
+    onSuccess: async (data) => {
+      await onUploadCompleted?.(data);
+      toast.success(`Succesvol geupload: ${data.name}`);
+    },
+    onError: async (error, variables) => {
+      await onUploadFailed?.(error);
+
+      console.error("Confirm error: ", error);
+      toast.error("Bestand uploaden mislukt", {
+        description: error instanceof Error ? error.message : undefined,
+      });
+
+      console.info("Deleting failed upload");
+      await deleteMutation.mutateAsync({ ids: [variables.id] });
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+
+  /**
+   * Upload file handler
+   */
+  const onUpload = useCallback(
+    async (file: File) => {
+      /**
+       * Send the presign request
+       */
+      const { id, presignedUrl } = await presignMutation.mutateAsync({
+        id: generateDefaultUUID(),
+        name: file.name,
+        size: file.size,
+        contentType: file.type,
+        namespace,
+        parentId,
+      });
+
+      /**
+       * Uploading the file
+       */
+      await uploadMutation.mutateAsync({ id, presignedUrl, file });
+
+      /**
+       * Confirming the upload
+       */
+      return await confirmMutation.mutateAsync({ id });
+    },
+    [presignMutation, uploadMutation, confirmMutation, namespace, parentId],
+  );
+
+  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);
+
+              if (!e.target.files) return;
+
+              await Promise.allSettled(Array.from(e.target.files).map(onUpload));
+            }}
+          />
+        </div>
+      )}
+      <UploadZoneContext
+        value={{
+          presignMutation: (params) => presignMutation.mutateAsync(params),
+          confirmMutation: (params) => confirmMutation.mutateAsync(params),
+          deleteMutation: (params) => deleteMutation.mutateAsync(params),
+          onUpload,
+          updateData,
+          invalidateQuery,
+        }}
+      >
+        {children}
+      </UploadZoneContext>
+    </div>
+  );
+}

package/src/modules/storage/config/filters.ts

@@ -0,0 +1,10 @@
+import { createTableFilters } from "@/modules/data-tables/lib/filters/config";
+import { parseFilterArray, parseFilterBoolean } from "@/modules/data-tables/lib/filters/parsers";
+import z from "zod";
+import { nodeTypeEnum } from "../lib/schema";
+
+export const nodesTableFilters = createTableFilters({
+  types: parseFilterArray(z.array(z.enum(nodeTypeEnum.enumValues))),
+  nodeIds: parseFilterArray(z.array(z.string())),
+  isDeleted: parseFilterBoolean(z.boolean()),
+});

package/src/modules/storage/entry.client.ts

@@ -0,0 +1,12 @@
+/**
+ * Components
+ */
+export * from "./components/dropzone-context.client";
+export * from "./components/dropzone.client";
+export * from "./components/image-grid.client";
+export * from "./components/upload-zone-context.client";
+export * from "./components/upload-zone.client";
+
+/**
+ * Hooks
+ */

package/src/modules/storage/entry.server.ts

@@ -0,0 +1,6 @@
+/**
+ * Lib
+ */
+export * from "./lib/create-client.server";
+export * from "./lib/proxy.server";
+export * from "./lib/router.server";

package/src/modules/storage/entry.ts

@@ -0,0 +1,5 @@
+export * from "./config/filters";
+export * from "./lib/constants";
+export * from "./lib/helpers";
+export * from "./lib/schema";
+export * from "./lib/validators";

package/src/modules/storage/lib/constants.ts

@@ -0,0 +1,14 @@
+// Device sizes
+export const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+export const imageSizes = deviceSizes;
+
+// Image variants
+export const imageVariants = [
+  "main",
+  ...deviceSizes.map((size) => `preview-${size}` as const),
+] as const;
+export type ImageVariant = (typeof imageVariants)[number];
+
+// Image dispositions
+export const imageDispositions = ["inline", "attachment"] as const;
+export type ImageDisposition = (typeof imageDispositions)[number];

package/src/modules/storage/lib/create-client.server.ts

@@ -0,0 +1,14 @@
+import "server-cli-only";
+
+import { TDatabaseSchema } from "@/modules/config/entry";
+import { StorageService, StorageServiceConfig } from "./service.server";
+
+export function createStorageClient<TSchema extends TDatabaseSchema>(
+  props: StorageServiceConfig<TSchema>,
+) {
+  return new StorageService(props);
+}
+
+export type StorageClient<TSchema extends TDatabaseSchema> = ReturnType<
+  typeof createStorageClient<TSchema>
+>;