@tulip-systems/core 0.3.0 → 0.4.1

package/src/modules/uploads/components/dropzone/context.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { createContext, use } from "react";
+import { DropzoneOptions } from "react-dropzone";
+
+type DropzoneContextType = {
+  src?: File[];
+  accept?: DropzoneOptions["accept"];
+  maxSize?: DropzoneOptions["maxSize"];
+  minSize?: DropzoneOptions["minSize"];
+  maxFiles?: DropzoneOptions["maxFiles"];
+};
+
+export const DropzoneContext = createContext<DropzoneContextType | undefined>(undefined);
+
+/**
+ * Dropzone context hook
+ */
+export function useDropzoneContext() {
+  const context = use(DropzoneContext);
+  if (!context) throw new Error("useDropzoneContext must be used within a Dropzone");
+  return context;
+}

package/src/modules/uploads/components/dropzone/index.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils/cn";
+import { UploadIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import type { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone";
+import { useDropzone } from "react-dropzone";
+import { renderBytes } from "../../lib/helpers";
+import { DropzoneContext, useDropzoneContext } from "./context";
+
+/**
+ * Dropzone
+ */
+export type DropzoneProps = Omit<DropzoneOptions, "onDrop"> & {
+  src?: File[];
+  className?: string;
+  onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => void;
+  children?: ReactNode;
+};
+
+export function Dropzone({
+  accept,
+  maxFiles = 1,
+  maxSize,
+  minSize,
+  onDrop,
+  onError,
+  disabled,
+  src,
+  className,
+  children,
+  ...props
+}: DropzoneProps) {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept,
+    maxFiles,
+    maxSize,
+    minSize,
+    onError,
+    disabled,
+    onDrop: (acceptedFiles, fileRejections, event) => {
+      if (fileRejections.length > 0) {
+        const message = fileRejections.at(0)?.errors.at(0)?.message;
+        onError?.(new Error(message));
+        return;
+      }
+      onDrop?.(acceptedFiles, fileRejections, event);
+    },
+    ...props,
+  });
+
+  return (
+    <DropzoneContext key={JSON.stringify(src)} value={{ src, accept, maxSize, minSize, maxFiles }}>
+      <Button
+        className={cn(
+          "relative h-auto w-full flex-col overflow-hidden p-8",
+          isDragActive && "ring-ring outline-none ring-1",
+          className,
+        )}
+        disabled={disabled}
+        type="button"
+        variant="outline"
+        {...getRootProps()}
+      >
+        <input {...getInputProps()} disabled={disabled} />
+        {children}
+      </Button>
+    </DropzoneContext>
+  );
+}
+
+/**
+ * DropzoneContent
+ */
+export type DropzoneContentProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+const maxLabelItems = 3;
+
+export function DropzoneContent({ children, className }: DropzoneContentProps) {
+  const { src } = useDropzoneContext();
+  if (!src) return null;
+
+  if (children) return children;
+
+  return (
+    <div className={cn("flex flex-col items-center justify-center", className)}>
+      <div className="bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md">
+        <UploadIcon size={16} />
+      </div>
+
+      <p className="my-2 w-full truncate text-sm font-medium">
+        {src.length > maxLabelItems
+          ? `${new Intl.ListFormat("en").format(
+              src.slice(0, maxLabelItems).map((file) => file.name),
+            )} and ${src.length - maxLabelItems} more`
+          : new Intl.ListFormat("en").format(src.map((file) => file.name))}
+      </p>
+
+      <p className="text-muted-foreground w-full text-wrap text-xs">
+        Drag and drop or click to replace
+      </p>
+    </div>
+  );
+}
+
+/**
+ * DropzoneEmptyState
+ */
+export type DropzoneEmptyStateProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export function DropzoneEmptyState({ children, className }: DropzoneEmptyStateProps) {
+  const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();
+  if (src) {
+    return null;
+  }
+  if (children) {
+    return children;
+  }
+  let caption = "";
+  if (accept) {
+    caption += "Accepts ";
+    caption += new Intl.ListFormat("en").format(Object.keys(accept));
+  }
+  if (minSize && maxSize) {
+    caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;
+  } else if (minSize) {
+    caption += ` at least ${renderBytes(minSize)}`;
+  } else if (maxSize) {
+    caption += ` less than ${renderBytes(maxSize)}`;
+  }
+  return (
+    <div className={cn("flex flex-col items-center justify-center", className)}>
+      <div className="bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md">
+        <UploadIcon size={16} />
+      </div>
+      <p className="my-2 w-full truncate text-wrap text-sm font-medium">
+        Upload {maxFiles === 1 ? "a file" : "files"}
+      </p>
+      <p className="text-muted-foreground w-full truncate text-wrap text-xs">
+        Drag and drop or click to upload
+      </p>
+      {caption && <p className="text-muted-foreground text-wrap text-xs">{caption}.</p>}
+    </div>
+  );
+}

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

@@ -2,6 +2,8 @@
  * Components
  */
 export * from "./components/button.client";
+export * from "./components/dropzone/context";
+export * from "./components/dropzone/index";
 export * from "./components/images/grid.client";
 export * from "./components/images/input.client";
 export * from "./components/preview-dialog.client";

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

@@ -1,6 +1,6 @@
 /**
  * Lib
  */
-export * from "./lib/route.server";
-export * from "./lib/router.server";
+export * from "./lib/procedures.server";
 export * from "./lib/proxy.server";
+export * from "./lib/route.server";

package/src/modules/uploads/lib/filters.ts

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

package/src/modules/uploads/lib/helpers.ts

@@ -64,3 +64,20 @@ export function inferNodeSubtype({
 
   return "other";
 }
+
+/**
+ * Render bytes
+ */
+export function renderBytes(bytes: number) {
+  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+
+  let size = bytes;
+  let unitIndex = 0;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+
+  return `${size.toFixed(2)}${units[unitIndex]}`;
+}

package/src/modules/uploads/lib/procedures.server.ts

@@ -0,0 +1,332 @@
+import { BUCKET_NAME } from "@/lib/config/constants";
+import { initRPC } from "@/modules/router/handler/init.server";
+import { ServerError } from "@/modules/router/lib/error.server";
+import { bulkActionSchema } from "@/modules/router/lib/validators";
+import { DeleteObjectsCommand, GetObjectCommand, PutObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { and, eq, inArray, isNull, sql } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import { after } from "next/server";
+import { z } from "zod";
+import { deviceSizes } from "./constants";
+import { inferNodeSubtype, isFile, isFolder } from "./helpers";
+import { getFileUrl, getFileUrlInput } from "./proxy.server";
+import { DriveSchema, nodes } from "./schema";
+import {
+  createNodeSchema,
+  Node,
+  nodesTableFiltersSchema,
+  selectNodeSchema,
+  selectNodeWithChildrenSchema,
+} from "./validators";
+
+export function createDriveBaseProcedures() {
+  const { protectedProcedure } = initRPC<DriveSchema>();
+
+  return {
+    /**
+     * Get node and its children
+     */
+    getNodeById: protectedProcedure
+      .input(z.object({ id: z.string(), namespace: z.string() }))
+      .output(selectNodeWithChildrenSchema.optional())
+      .handler(async ({ context, input }) =>
+        context.db.query.nodes.findFirst({
+          where: and(eq(nodes.id, input.id), eq(nodes.namespace, input.namespace)),
+          with: { children: true },
+        }),
+      ),
+    /**
+     * Get folders by parent id
+     */
+    getNodesByParentId: protectedProcedure
+      .input(
+        z.object({
+          parentId: z.string().nullable(),
+          namespace: z.string(),
+          filters: nodesTableFiltersSchema,
+        }),
+      )
+      .output(z.array(selectNodeSchema))
+      .handler(async ({ context, input }) =>
+        context.db.query.nodes.findMany({
+          where: and(
+            input.parentId ? eq(nodes.parentId, input.parentId) : isNull(nodes.parentId),
+            input.filters.nodeIds ? inArray(nodes.id, input.filters.nodeIds) : undefined,
+            input.filters.types ? inArray(nodes.type, input.filters.types) : undefined,
+            eq(nodes.namespace, input.namespace),
+            eq(nodes.isDeleted, input.filters.isDeleted),
+          ),
+        }),
+      ),
+    /**
+     * Get parents of a folder
+     */
+    getFolderParents: protectedProcedure
+      .input(z.object({ id: z.string().nullable(), namespace: z.string() }))
+      .handler(async ({ context, input }) => {
+        if (!input.id) return [];
+
+        const startNodeQuery = context.db
+          .select({
+            id: nodes.id,
+            name: nodes.name,
+            parentId: nodes.parentId,
+            depth: sql<number>`0`.as("depth"),
+          })
+          .from(nodes)
+          .where(and(eq(nodes.id, input.id), eq(nodes.namespace, input.namespace)));
+
+        const alias = "parent_nodes";
+        const parentNodesQueryAlias = startNodeQuery.as(alias);
+        const recursiveQueryName = sql.raw(`"${alias}"`);
+
+        const recursiveQuery = startNodeQuery.unionAll(
+          context.db
+            .select({
+              id: nodes.id,
+              name: nodes.name,
+              parentId: nodes.parentId,
+              depth: sql<number>`${parentNodesQueryAlias.depth} + 1`,
+            })
+            .from(nodes)
+            .innerJoin(recursiveQueryName, eq(nodes.id, parentNodesQueryAlias.parentId)),
+        );
+
+        const result = (await context.db.execute(
+          sql`WITH RECURSIVE ${recursiveQueryName} AS ${recursiveQuery}
+          SELECT * FROM ${recursiveQueryName}`,
+        )) as Awaited<ReturnType<(typeof recursiveQuery)["execute"]>>;
+
+        return result.toSorted((a, b) => Number(b.depth) - Number(a.depth));
+      }),
+    /**
+     * Get presigned url for uploading a file
+     */
+    presign: protectedProcedure
+      .input(
+        z.object({
+          id: z.string(),
+          name: z.string().min(1),
+          namespace: z.string(),
+          parentId: z.uuid().nullable(),
+          size: z.number().optional().default(0),
+          contentType: z.string().optional().default(""),
+        }),
+      )
+      .handler(async ({ context, input }) => {
+        // Generate the put command
+        const putCommand = new PutObjectCommand({
+          Bucket: BUCKET_NAME,
+          Key: `${input.id}/main`,
+          ContentType: input.contentType,
+        });
+
+        // Generate the presigned url
+        const presignedUrl = await getSignedUrl(context.blob, putCommand, { expiresIn: 3600 });
+
+        const [node] = await context.db
+          .insert(nodes)
+          .values({
+            ...input,
+            subtype: inferNodeSubtype(input),
+            isPending: true,
+            type: "file",
+          })
+          .returning();
+
+        // Return the result
+        return { node, presignedUrl };
+      }),
+    /**
+     * Confirm the upload
+     */
+    confirm: protectedProcedure
+      .input(z.object({ id: z.string() }))
+      .output(selectNodeSchema)
+      .handler(async ({ context, input }) => {
+        const [result] = await context.db
+          .update(nodes)
+          .set({ isPending: false })
+          .where(eq(nodes.id, input.id))
+          .returning();
+
+        if (!result) {
+          throw new ServerError("NOT_FOUND", { message: "File not found" });
+        }
+
+        /**
+         * Generate the preview version of the file
+         */
+        after(async () => {
+          if (!result.contentType || !result.contentType?.startsWith("image/")) return;
+
+          const getCommand = new GetObjectCommand({
+            Bucket: BUCKET_NAME,
+            Key: `${input.id}/main`,
+          });
+
+          const response = await context.blob.send(getCommand);
+          const contentType = response.ContentType;
+          if (!response.Body) {
+            throw new ServerError("INTERNAL_SERVER_ERROR", {
+              message: "Oep! Er is iets fout gegaan",
+            });
+          }
+
+          const byteArray = await response.Body.transformToByteArray();
+          const buffer = Buffer.from(byteArray);
+
+          if (contentType?.startsWith("image/")) {
+            const sharp = await import("sharp");
+
+            await Promise.allSettled(
+              deviceSizes.flatMap(async (width) => {
+                const preview = await sharp.default(buffer).resize({ width }).webp().toBuffer();
+
+                const putCommand = new PutObjectCommand({
+                  Bucket: BUCKET_NAME,
+                  Key: `${input.id}/preview-${width}`,
+                  ContentType: "image/webp",
+                  Body: preview,
+                });
+
+                await context.blob.send(putCommand);
+              }),
+            );
+          }
+        });
+
+        return result;
+      }),
+    /**
+     * Get presigned url for opening a file
+     */
+    getFileUrl: protectedProcedure
+      .input(getFileUrlInput)
+      .output(z.string())
+      .handler(async ({ context, input }) => await getFileUrl(context, input)),
+    /**
+     * Create a folder
+     */
+    createFolder: protectedProcedure
+      .input(createNodeSchema)
+      .output(selectNodeSchema)
+      .handler(async ({ context, input }) => {
+        const parent =
+          input.parentId &&
+          (await context.db.query.nodes.findFirst({
+            where: eq(nodes.id, input.parentId),
+          }));
+
+        /**
+         * Validate
+         */
+        if (input.parentId && !parent) {
+          throw new ServerError("BAD_REQUEST", { message: "Parent not found" });
+        }
+
+        if (parent && !isFolder(parent)) {
+          throw new ServerError("BAD_REQUEST", { message: "Parent is not a folder" });
+        }
+
+        if (parent && parent.namespace !== input.namespace) {
+          throw new ServerError("BAD_REQUEST", {
+            message: "Parent is not in the same namespace",
+          });
+        }
+
+        /**
+         * Create the folder
+         */
+        const [result] = await context.db
+          .insert(nodes)
+          .values({ ...input, type: "folder" } as Node)
+          .returning();
+
+        if (!result) {
+          throw new ServerError("INTERNAL_SERVER_ERROR", {
+            message: "Folder kon niet worden aangemaakt",
+          });
+        }
+
+        return result;
+      }),
+    /**
+     * Delete nodes
+     */
+    deleteNodes: protectedProcedure
+      .input(bulkActionSchema)
+      .output(z.void())
+      .handler(async ({ context, input }) => {
+        const items = await context.db
+          .select({ id: nodes.id, type: nodes.type })
+          .from(nodes)
+          .where(inArray(nodes.id, input.ids));
+
+        // Split the nodes into folders and files
+        const folders = items.filter(isFolder).map((folder) => folder.id);
+        const files = items.filter(isFile).map((file) => file.id);
+
+        // Delete command for S3
+        const deleteCommand = new DeleteObjectsCommand({
+          Bucket: BUCKET_NAME,
+          Delete: {
+            Objects: files.map((id) => ({ Key: id })),
+          },
+        });
+
+        /**
+         * Delete files
+         */
+        await Promise.allSettled([
+          context.db.delete(nodes).where(inArray(nodes.id, folders)),
+          context.db.delete(nodes).where(inArray(nodes.id, files)),
+          context.blob.send(deleteCommand),
+        ]);
+      }),
+    /**
+     * Change node parent
+     */
+    changeParent: protectedProcedure
+      .input(z.object({ id: z.string(), parentId: z.string().nullish() }))
+      .handler(async ({ context, input }) => {
+        const [parent, node] = await Promise.all([
+          input.parentId &&
+            (await context.db.query.nodes.findFirst({
+              where: eq(nodes.id, input.parentId),
+            })),
+          context.db.query.nodes.findFirst({
+            where: eq(nodes.id, input.id),
+          }),
+        ]);
+
+        /**
+         * Validate
+         */
+        if (input.parentId && !parent)
+          throw new ServerError("BAD_REQUEST", { message: "Parent not found" });
+        if (!node) throw new ServerError("BAD_REQUEST", { message: "Node not found" });
+
+        if (parent && !isFolder(parent)) {
+          throw new ServerError("BAD_REQUEST", { message: "Parent is not a folder" });
+        }
+
+        if (parent && parent.namespace !== node.namespace) {
+          throw new ServerError("BAD_REQUEST", {
+            message: "Parent is not in the same namespace",
+          });
+        }
+
+        /**
+         * Update the parent
+         */
+        await context.db
+          .update(nodes)
+          .set({ parentId: input.parentId })
+          .where(eq(nodes.id, input.id));
+
+        revalidatePath("/drive", "page");
+      }),
+  };
+}

package/src/modules/uploads/lib/proxy.server.ts

@@ -2,22 +2,21 @@ import "server-cli-only";
 
 import { BUCKET_NAME } from "@/lib/config/constants";
 import { getSession } from "@/modules/auth/entry.server";
-import { ServerError } from "@/modules/config/entry.server";
-import { getTulip, GetTulipParams, GetTulipReturn } from "@/modules/config/lib/resolve.server";
+import { TulipContext } from "@/modules/config/entry";
 import { GetObjectCommand } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 import { addSeconds } from "date-fns";
 import { and, eq } from "drizzle-orm";
-import { after, NextRequest } from "next/server";
+import { after, connection, NextRequest } from "next/server";
 import { z } from "zod";
 import { imageDispositions, imageVariants } from "./constants";
 import { DriveSchema, nodePresignedUrls, nodes } from "./schema";
+import { Node } from "./validators";
 
 /**
  * Get file url schema
  */
 export const getFileUrlInput = z.object({
-  id: z.string(),
   variant: z.enum(imageVariants).optional().default("main"),
   disposition: z.enum(imageDispositions).optional().default("inline"),
 });
@@ -29,13 +28,14 @@ export type GetFileUrlSchema = z.infer<typeof getFileUrlInput>;
  * Get file url
  */
 export async function getFileUrl<TSchema extends DriveSchema>(
-  ctx: GetTulipReturn<TSchema>,
-  input: GetFileUrlSchema,
+  ctx: TulipContext<TSchema>,
+  { input, node }: { input: GetFileUrlSchema; node: Node },
+  // input: GetFileUrlSchema,
 ) {
-  const [node] = await ctx.db.select().from(nodes).where(eq(nodes.id, input.id));
-  if (!node) {
-    throw new ServerError("NOT_FOUND", { message: "Bestand kon niet worden gevonden" });
-  }
+  // const [node] = await ctx.db.select().from(nodes).where(eq(nodes.id, input.id));
+  // if (!node) {
+  //   throw new ServerError("NOT_FOUND", { message: "Bestand kon niet worden gevonden" });
+  // }
 
   const [presignedUrl] = await ctx.db
     .select({ url: nodePresignedUrls.url, expiresAt: nodePresignedUrls.expiresAt })
@@ -91,33 +91,41 @@ export async function getFileUrl<TSchema extends DriveSchema>(
  * Create drive proxy route
  */
 export function createDriveProxyRoute<TSchema extends DriveSchema>({
-  config,
-}: GetTulipParams<TSchema>) {
+  context,
+}: {
+  context: TulipContext<TSchema>;
+}) {
   /**
    * GET: Drive node proxy
    */
   async function GET(request: NextRequest) {
-    try {
-      // Get tulip
-      const tulip = await getTulip({ config });
-
-      // Check if the user is authenticated
-      const session = await getSession(tulip);
-      if (!session) return Response.json("Unauthorized", { status: 401 });
+    // Make endpoint dynamic
+    await connection();
 
+    try {
       // Get the params
       const searchParams = request.nextUrl.searchParams;
       const id = searchParams.get("id");
       if (!id) return Response.json("Missing id", { status: 400 });
 
+      // Get the node
+      const [node] = await context.db.select().from(nodes).where(eq(nodes.id, id));
+      if (!node) return Response.json("Bestand kon niet worden gevonden", { status: 404 });
+
+      // If the node is private check if the user is authenticated
+      if (node.mode === "private") {
+        const session = await getSession(context);
+        if (!session) return Response.json("Unauthorized", { status: 401 });
+      }
+
       const variant = searchParams.get("variant") ?? undefined;
       const disposition = searchParams.get("disposition") ?? undefined;
 
       // Parse the input
-      const input = getFileUrlInput.parse({ id, variant, disposition });
+      const input = getFileUrlInput.parse({ variant, disposition });
 
       // Get the file url
-      const url = await getFileUrl(tulip, input);
+      const url = await getFileUrl(context, { input, node });
 
       // Return the file
       return Response.redirect(url, 307);