@tulip-systems/core 0.4.1 → 0.5.0

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/{uploads/lib → storage/config}/filters.ts

@@ -1,10 +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 "./schema";
+import { nodeTypeEnum } from "../lib/schema";
 
 export const nodesTableFilters = createTableFilters({
-  nodeIds: parseFilterArray(z.array(z.string())),
   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/{uploads → storage}/entry.ts

@@ -1,5 +1,5 @@
+export * from "./config/filters";
 export * from "./lib/constants";
-export * from "./lib/filters";
 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>
+>;

package/src/modules/{uploads → storage}/lib/helpers.ts

@@ -1,5 +1,6 @@
-import { GetFileUrlInput } from "./proxy.server";
-import { FileNode, Node } from "./validators";
+import { ImageLoaderProps } from "next/image";
+import { ImageVariant } from "./constants";
+import { FileNode, GetFileURLSchema, Node } from "./validators";
 
 /**
  * Check if the node is a file
@@ -18,16 +19,29 @@ export function isFolder(node: Pick<Node, "type">): node is Node {
 /**
  * Get file url
  */
-export function getFileUrl(
-  id: string,
-  { variant, disposition }: Pick<GetFileUrlInput, "variant" | "disposition"> = {},
-) {
+export function getFileUrl(id: string, options: Partial<GetFileURLSchema> = {}) {
   const searchParams = new URLSearchParams();
   searchParams.set("id", id);
-  if (variant) searchParams.set("variant", variant);
-  if (disposition) searchParams.set("disposition", disposition);
+  if (options?.variant) searchParams.set("variant", options.variant);
+  if (options?.disposition) searchParams.set("disposition", options.disposition);
 
-  return `/api/drive/files?${searchParams.toString()}`;
+  return `/api/storage/files?${searchParams.toString()}`;
+}
+
+/**
+ * Image loader
+ */
+export function imageLoader({ src, width }: ImageLoaderProps) {
+  const url = new URL(src, window.location.origin);
+  url.searchParams.set("variant", `preview-${width}`);
+  return url.toString();
+}
+
+/**
+ * Generate object key
+ */
+export function getDriveBucketKey(id: string, variant: ImageVariant) {
+  return `storage/${id}/${variant}`;
 }
 
 /**

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

@@ -0,0 +1,63 @@
+import "server-cli-only";
+
+import { getSession } from "@/modules/auth/entry.server";
+import { TulipContext } from "@/modules/config/entry";
+import { eq } from "drizzle-orm";
+import { connection, NextRequest } from "next/server";
+import { DriveSchema, nodes } from "./schema";
+import { getFileURLSchema } from "./validators";
+
+type CreateDriveProxyRouteProps<TSchema extends DriveSchema> = {
+  context: TulipContext<TSchema>;
+};
+
+/**
+ * Create drive proxy route
+ */
+export function createDriveProxyRoute<TSchema extends DriveSchema>({
+  context,
+}: CreateDriveProxyRouteProps<TSchema>) {
+  /**
+   * GET: Drive node proxy
+   */
+  async function GET(request: NextRequest) {
+    // 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 });
+
+      console.info("Proxying file: ", id);
+
+      // 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 options
+      const options = getFileURLSchema.parse({ variant, disposition });
+
+      // Get the file url
+      const url = await context.storage.getSignedURL(node, options);
+
+      // Return the file
+      return Response.redirect(url, 307);
+    } catch (error) {
+      console.error("error", error);
+      return Response.json("Error", { status: 500 });
+    }
+  }
+
+  return { GET };
+}

package/src/modules/storage/lib/router.server.ts

@@ -0,0 +1,174 @@
+import { bulkActionSchema } from "@/modules/router/entry";
+import { ServerError } from "@/modules/router/entry.server";
+import { initRPC } from "@/modules/router/handler/init.server";
+import { and, eq, sql } from "drizzle-orm";
+import { z } from "zod";
+import { isFolder } from "./helpers";
+import { DriveSchema, nodes } from "./schema";
+import {
+  createFolderNodeSchema,
+  getFileURLSchema,
+  getNodesByParentIdSchema,
+  presignFileSchema,
+  selectNodeSchema,
+  selectNodeWithChildrenSchema,
+  updateNodeSchema,
+} from "./validators";
+
+/**
+ * Create Drive base procedures
+ */
+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(getNodesByParentIdSchema)
+      .output(z.array(selectNodeSchema))
+      .handler(async ({ context, input }) => context.storage.getNodesByParentId(input)),
+    /**
+     * 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 opening a file
+     */
+    getSignedURL: protectedProcedure
+      .input(getFileURLSchema.extend({ id: z.string() }))
+      .output(z.string().nullable())
+      .handler(async ({ context, input: { id, ...options } }) => {
+        const [node] = await context.db.select().from(nodes).where(eq(nodes.id, id));
+        if (!node) return null;
+
+        return await context.storage.getSignedURL(node, options);
+      }),
+
+    /**
+     * Get presigned url for uploading a file
+     */
+    presign: protectedProcedure
+      .input(presignFileSchema)
+      .handler(async ({ context, input }) => context.storage.presignUpload(input)),
+    /**
+     * Confirm the upload
+     */
+    confirm: protectedProcedure
+      .input(z.object({ id: z.string() }))
+      .output(selectNodeSchema)
+      .handler(async ({ context, input }) => context.storage.confirmUpload(input)),
+    /**
+     * Create a folder
+     */
+    createFolder: protectedProcedure
+      .input(createFolderNodeSchema)
+      .output(selectNodeSchema)
+      .handler(async ({ context, input }) => context.storage.createFolder(input)),
+    /**
+     * Update node
+     */
+    updateNode: protectedProcedure
+      .input(z.object({ id: z.string(), data: updateNodeSchema }))
+      .output(selectNodeSchema)
+      .handler(async ({ context, input }) => context.storage.updateNode(input)),
+    /**
+     * 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));
+      }),
+    /**
+     * Delete nodes
+     */
+    deleteNodes: protectedProcedure
+      .input(bulkActionSchema)
+      .output(z.void())
+      .handler(async ({ context, input }) => context.storage.deleteNodes(input)),
+  };
+}

package/src/modules/{uploads → storage}/lib/schema.ts

@@ -21,7 +21,7 @@ export const nodes = pgTable("nodes", (t) => ({
   size: t.integer().default(0),
   contentType: t.varchar({ length: 255 }),
   readonly: boolean().default(false),
-  createdBy: t.text().references(() => users.id, { onDelete: "set null" }),
+  createdBy: t.uuid().references(() => users.id, { onDelete: "set null" }),
   isPending: t.boolean().default(false).notNull(),
   isDeleted: t.boolean().default(false).notNull(),
   parentId: t.uuid().references((): AnyPgColumn => nodes.id, { onDelete: "cascade" }),
@@ -37,6 +37,28 @@ export const nodesRelations = relations(nodes, ({ one, many }) => ({
     relationName: "parent",
   }),
   urls: many(nodePresignedUrls),
+  variants: many(nodeVariants),
+}));
+
+/**
+ * Node variants table
+ */
+export const nodeVariants = pgTable("node_variants", (t) => ({
+  ...baseColumns,
+  nodeId: t
+    .uuid()
+    .notNull()
+    .references(() => nodes.id, { onDelete: "cascade" }),
+  variant: t.text({ enum: imageVariants }).notNull(),
+  width: t.integer().notNull(),
+}));
+
+export const nodeVariantsRelations = relations(nodeVariants, ({ one }) => ({
+  node: one(nodes, {
+    fields: [nodeVariants.nodeId],
+    references: [nodes.id],
+    relationName: "node",
+  }),
 }));
 
 /**
@@ -54,6 +76,7 @@ export const nodePresignedUrls = pgTable(
       .uuid()
       .notNull()
       .references(() => nodes.id, { onDelete: "cascade" }),
+    variantId: t.uuid().references(() => nodeVariants.id, { onDelete: "set null" }),
   }),
   (t) => [unique("node_presigned_url_unique").on(t.nodeId, t.variant, t.disposition)],
 );
@@ -67,16 +90,14 @@ export const nodePresignedUrlsRelations = relations(nodePresignedUrls, ({ one })
 }));
 
 /**
- * @deprecated
- */
-export const assets = pgTable("assets", (t) => ({
-  ...baseColumns,
-  name: t.text().notNull(),
-  pathname: t.text().notNull(),
-  url: t.text().notNull().unique(),
-  size: t.integer().default(0),
-  contentType: t.varchar({ length: 255 }),
-}));
-
-const driveSchema = { nodes, nodesRelations };
+ * Drive schema
+ **/
+const driveSchema = {
+  nodes,
+  nodesRelations,
+  nodeVariants,
+  nodeVariantsRelations,
+  nodePresignedUrls,
+  nodePresignedUrlsRelations,
+};
 export type DriveSchema = typeof driveSchema;