@tulip-systems/drive 0.7.0

package/src/providers/local/components/upload-zone.client.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { toast } from "@tulip-systems/core/components/client";
+import { cn } from "@tulip-systems/core/lib";
+import { useAction } from "@tulip-systems/core/lib/client";
+import type { StorageAsset } from "@tulip-systems/core/storage";
+import { type ComponentProps, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { inferLocalDriveNodeSubtype } from "@/providers/local/lib/helpers";
+import type {
+  LocalDriveUploadFileRequest,
+  LocalDriveUploadHooks,
+  PrepareLocalDriveUploadInput,
+} from "@/providers/local/lib/upload.client";
+import type { LocalDriveFileNode, LocalDriveNodeWithAsset } from "@/providers/local/lib/validators";
+import {
+  LocalDriveUploadZoneContext,
+  type LocalDriveUploadZoneContextValue,
+} from "./upload-zone-context.client";
+
+export type LocalDriveUploadZoneProps = ComponentProps<"div"> &
+  Pick<LocalDriveUploadZoneContextValue, "optimistic" | "driveUploadClient" | "disabled"> & {
+    variables: Pick<
+      PrepareLocalDriveUploadInput,
+      "namespace" | "parentId" | "readonly" | "hidden" | "visibility"
+    >;
+    uploadHooks?: LocalDriveUploadHooks;
+
+    onUploadCompleted?: (node: LocalDriveFileNode) => Promise<void> | void;
+    onUploadFailed?: (error: unknown) => Promise<void> | void;
+  };
+
+export type DriveUploadZoneProps = LocalDriveUploadZoneProps;
+
+export function LocalDriveUploadZone({
+  variables,
+  optimistic,
+  driveUploadClient,
+  uploadHooks,
+  onUploadCompleted,
+  onUploadFailed,
+  disabled = false,
+  children,
+  className,
+  ...props
+}: LocalDriveUploadZoneProps) {
+  /**
+   * Delete mutation
+   */
+  const deleteMutation = useAction({
+    mutationFn: async (ids: string[]) => driveUploadClient.deleteFiles(ids),
+    onMutate: async (ids) => {
+      await optimistic?.cancel?.();
+      await optimistic?.remove?.(ids);
+    },
+    onError: async (error) => {
+      console.error("Delete failed upload error: ", error);
+      await onUploadFailed?.(error);
+    },
+    onSettled: () => {
+      optimistic?.invalidate?.();
+    },
+  });
+
+  /**
+   * Upload mutation
+   */
+  const uploadMutation = useAction({
+    mutationFn: async (params: LocalDriveUploadFileRequest) =>
+      driveUploadClient.upload(params, uploadHooks),
+    onMutate: async (variables) => {
+      await optimistic?.cancel?.();
+
+      // Generate a new node
+      const newNode = {
+        id: variables.uploadId,
+        provider: "local",
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        type: "file",
+        name: variables.file.name,
+        namespace: variables.namespace,
+        parentId: variables.parentId ?? null,
+        size: variables.file.size,
+        contentType: variables.file.type || "application/octet-stream",
+        readonly: variables.readonly ?? false,
+        hidden: variables.hidden ?? false,
+        archivedAt: null,
+        assetId: null,
+        subtype: inferLocalDriveNodeSubtype({
+          name: variables.file.name,
+          contentType: variables.file.type || "application/octet-stream",
+        }),
+        links: {
+          view: null,
+          download: null,
+          preview: null,
+          thumbnail: null,
+        },
+        availability: "pending",
+        asset: {
+          status: "pending",
+          name: variables.file.name,
+          contentType: variables.file.type || "application/octet-stream",
+          size: variables.file.size,
+          visibility: variables.visibility || "private",
+        } as StorageAsset,
+      } as LocalDriveNodeWithAsset;
+
+      await optimistic?.add?.(newNode);
+    },
+    onSuccess: async (data) => {
+      await onUploadCompleted?.(data);
+      toast.success(`Succesvol geupload: ${data.name}`);
+    },
+    onError: async (error) => {
+      await onUploadFailed?.(error);
+
+      console.error("Upload error: ", error);
+      toast.error("Bestand uploaden mislukt", {
+        description: error instanceof Error ? error.message : undefined,
+      });
+    },
+    onSettled: () => {
+      optimistic?.invalidate?.();
+    },
+  });
+
+  /**
+   * Upload file handler
+   */
+  const onUpload = useCallback(
+    async (file: File) => {
+      console.info("Uploading file", file);
+      const req = driveUploadClient.prepareUpload({ ...variables, file });
+      return await uploadMutation.mutateAsync(req);
+    },
+    [driveUploadClient, variables, uploadMutation],
+  );
+
+  /**
+   * 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,
+    disabled,
+  });
+
+  return (
+    <div {...props} {...getRootProps()} className={cn("relative z-0", className)}>
+      <input {...getInputProps()} />
+
+      {/* Show drag overlay when drag is active */}
+      {isDragActive && (
+        <div className="absolute inset-0 z-10 rounded-md bg-primary/20 opacity-70 backdrop-blur-3xl" />
+      )}
+
+      <LocalDriveUploadZoneContext
+        value={{
+          driveUploadClient,
+          onUpload,
+          onRemove: deleteMutation.mutateAsync,
+          optimistic,
+          disabled,
+        }}
+      >
+        {children}
+      </LocalDriveUploadZoneContext>
+    </div>
+  );
+}
+
+export const DriveUploadZone = LocalDriveUploadZone;

package/src/providers/local/components/view.client.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import type { VisibilityState } from "@tanstack/react-table";
+import type { CommandDef } from "@tulip-systems/core/commands";
+import { FloatingCommandMenu } from "@tulip-systems/core/commands/client";
+import { type TableColumnDef, TableLayout, TableSkeleton } from "@tulip-systems/core/data-tables";
+import {
+  createTableConfig,
+  DataTable,
+  type InfiniteStrategyMeta,
+  TableConfigProvider,
+  type useInfiniteStrategy,
+  useTableConfigContext,
+} from "@tulip-systems/core/data-tables/client";
+import { type ComponentProps, useMemo } from "react";
+import {
+  DriveGrid,
+  DriveGridBottombar,
+  DriveGridEmpty,
+  DriveGridLoading,
+} from "@/components/grid.client";
+import { DriveGridCard, DriveGridCardSkeleton } from "@/components/grid-card.client";
+import { useDriveSelectionContext } from "@/components/selection.client";
+import { useDriveViewContext } from "@/components/view.client";
+import { localDriveColumns } from "../config/columns-data";
+import type { LocalDriveNodeWithAsset } from "../lib/validators";
+import { useLocalDriveContext } from "./provider.client";
+import { useLocalDriveUploadZone } from "./upload-zone-context.client";
+
+type LocalDriveViewProviderProps<TData extends LocalDriveNodeWithAsset = LocalDriveNodeWithAsset> =
+  ComponentProps<"div"> & {
+    queryData: TData[];
+    columns?: TableColumnDef<TData>[];
+    strategy: ReturnType<typeof useInfiniteStrategy>;
+    commands?: CommandDef<TData>[];
+    columnVisibility?: VisibilityState;
+  };
+
+export function LocalDriveViewProvider<
+  TData extends LocalDriveNodeWithAsset = LocalDriveNodeWithAsset,
+>({
+  queryData,
+  columns = localDriveColumns as TableColumnDef<TData>[],
+  strategy,
+  commands,
+  columnVisibility,
+  children,
+  ...props
+}: LocalDriveViewProviderProps<TData>) {
+  const { meta } = useLocalDriveContext();
+  const { selection } = useDriveSelectionContext();
+
+  const config = createTableConfig<TData>({
+    queryData,
+    columns,
+    strategy,
+    commands,
+    meta,
+    columnVisibility,
+    selection,
+  });
+
+  return (
+    <TableConfigProvider config={config}>
+      <TableLayout {...props}>{children}</TableLayout>
+    </TableConfigProvider>
+  );
+}
+
+export function LocalDriveView() {
+  const { view } = useDriveViewContext();
+
+  if (view === "grid") return <LocalDriveGrid />;
+  if (view === "list") return <LocalDriveList />;
+
+  return null;
+}
+
+function LocalDriveGrid(props: ComponentProps<"div">) {
+  const { queryData, strategy, commands, selection, meta } =
+    useTableConfigContext<LocalDriveNodeWithAsset>();
+  const { optimistic } = useLocalDriveUploadZone();
+  
+  const { rowCount, paginationState } = strategy;
+  const { isFetching, isFetchingNextPage, fetchNextPage } = strategy.meta as InfiniteStrategyMeta;
+
+  const hasNextPage = rowCount == null ? false : queryData.length < rowCount;
+
+  const selectedData = useMemo(
+    () => queryData.filter((node) => selection?.rowSelection?.[node.id] === true),
+    [queryData, selection?.rowSelection],
+  );
+
+  return (
+    <DriveGrid {...props}>
+      {queryData.length > 0 ? (
+        queryData
+          .filter((node) => !node.hidden)
+          .map((node) => <DriveGridCard key={node.id} node={node} commands={commands} />)
+      ) : (
+        <DriveGridEmpty title="Geen resultaten gevonden" />
+      )}
+
+      {isFetchingNextPage &&
+        Array.from({ length: paginationState?.pageSize ?? 0 }).map((_, index) => (
+          <DriveGridCardSkeleton key={index} />
+        ))}
+
+      <DriveGridBottombar
+        hasNextPage={hasNextPage}
+        fetchNextPage={fetchNextPage}
+        isFetching={isFetching}
+        isFetchingNextPage={isFetchingNextPage}
+      />
+
+      {commands && commands.length > 0 && (
+        <FloatingCommandMenu
+          data={selectedData as never}
+          commands={commands as never}
+          meta={meta}
+          state={selectedData.length > 0 ? "open" : "closed"}
+          onSuccess={() => {
+            selection?.setRowSelection?.({});
+            void optimistic?.invalidate?.();
+          }}
+        />
+      )}
+    </DriveGrid>
+  );
+}
+
+function LocalDriveList(props: ComponentProps<typeof DataTable>) {
+  return <DataTable {...props} />;
+}
+
+export function LocalDriveViewLoading({ ...props }: ComponentProps<"div">) {
+  const { view } = useDriveViewContext();
+
+  return (
+    <div {...props}>
+      {view === "grid" && <DriveGridLoading {...props} />}
+      {view === "list" && <TableSkeleton {...props} />}
+    </div>
+  );
+}

package/src/providers/local/config/columns-data.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { findStatus } from "@tulip-systems/core/components";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@tulip-systems/core/components/client";
+import { type TableColumnDef, TableColumnHeader } from "@tulip-systems/core/data-tables";
+import { createTableSelectCell, TableTextCell } from "@tulip-systems/core/data-tables/client";
+import { FolderIcon } from "lucide-react";
+import Link from "next/link";
+import { createSerializer, useQueryStates } from "nuqs";
+import { nodeSubtypeConfig, nodeSubtypeVariants } from "@/config/types";
+import { driveTreeSearchParams } from "@/lib/search-params";
+import type { LocalDriveNodeWithAsset } from "../lib/validators";
+
+export const localDriveColumns: TableColumnDef<LocalDriveNodeWithAsset>[] = [
+  createTableSelectCell(),
+  {
+    id: "icon",
+    accessorKey: "icon",
+    header: () => null,
+    cell: ({ row }) => {
+      if (row.original.type === "file") {
+        const subtype = findStatus(nodeSubtypeConfig, row.original.subtype);
+        if (!subtype) return null;
+
+        return (
+          <TableTextCell className="w-4">
+            <Tooltip>
+              <TooltipTrigger>
+                <subtype.icon
+                  className={nodeSubtypeVariants({
+                    status: row.original.subtype,
+                    className: "size-4",
+                  })}
+                />
+              </TooltipTrigger>
+
+              <TooltipContent>{subtype.label}</TooltipContent>
+            </Tooltip>
+          </TableTextCell>
+        );
+      }
+
+      if (row.original.type === "folder") {
+        return (
+          <TableTextCell className="w-4">
+            <FolderIcon className="w-4 min-w-4" />
+          </TableTextCell>
+        );
+      }
+
+      return null;
+    },
+    enableSorting: false,
+  },
+  {
+    id: "name",
+    accessorKey: "name",
+    header: ({ column }) => <TableColumnHeader column={column} title="Naam" />,
+    cell: ({ row }) => {
+      const [query] = useQueryStates(driveTreeSearchParams);
+      const serialize = createSerializer(driveTreeSearchParams);
+
+      return (
+        <TableTextCell className="w-full min-w-64">
+          <Link
+            href={
+              row.original.type === "file"
+                ? ((row.original.links.view as string) ?? "#")
+                : serialize({ ...query, parentId: row.original.id })
+            }
+            className="truncate hover:underline"
+            target={row.original.type === "file" ? "_blank" : "_self"}
+          >
+            {row.getValue("name")}
+          </Link>
+        </TableTextCell>
+      );
+    },
+    enableSorting: false,
+  },
+];

package/src/providers/local/config/filters.ts

@@ -0,0 +1,14 @@
+import {
+  createTableFilters,
+  parseFilterArray,
+  parseFilterBoolean,
+} from "@tulip-systems/core/data-tables";
+import z from "zod";
+import { driveTreeFilters } from "@/config/filters";
+import { nodeSubtypes } from "../lib/constants";
+
+export const localDriveFilters = createTableFilters({
+  ...driveTreeFilters,
+  subtypes: parseFilterArray(z.array(z.enum(nodeSubtypes))),
+  hidden: parseFilterBoolean(z.boolean()),
+});

package/src/providers/local/entry.client.ts

@@ -0,0 +1,18 @@
+/**
+ * Components
+ */
+
+export * from "./components/command-file-update";
+export * from "./components/command-file-upload";
+export * from "./components/command-folder-create";
+export * from "./components/command-folder-update";
+export * from "./components/content.client";
+export * from "./components/navigation.client";
+export * from "./components/provider.client";
+export * from "./components/upload-zone.client";
+export * from "./components/upload-zone-context.client";
+export * from "./components/view.client";
+/**
+ * Lib
+ */
+export * from "./lib/upload.client";

package/src/providers/local/entry.server.ts

@@ -0,0 +1,7 @@
+/**
+ * Lib
+ */
+
+export * from "./lib/route-handler.server";
+export * from "./lib/router.server";
+export * from "./lib/service.server";

package/src/providers/local/entry.ts

@@ -0,0 +1,14 @@
+/**
+ * Config
+ */
+export * from "./config/columns-data";
+export * from "./config/filters";
+
+/**
+ * Lib
+ */
+export * from "./lib/constants";
+export * from "./lib/helpers";
+export * from "./lib/schema";
+export * from "./lib/search-params";
+export * from "./lib/validators";

package/src/providers/local/lib/constants.ts

@@ -0,0 +1,23 @@
+// 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];
+
+/**
+ * Node subtype
+ */
+export const nodeSubtypes = [
+  "image",
+  "document",
+  "spreadsheet",
+  "video",
+  "audio",
+  "archive",
+  "other",
+] as const;

package/src/providers/local/lib/helpers.ts

@@ -0,0 +1,105 @@
+import type { ImageLoaderProps } from "next/image";
+import type { nodeSubtypes } from "./constants";
+import type { GetLocalFileURLSchema, LocalDriveNode, LocalNode } from "./validators";
+
+/**
+ * Convert a LocalNode to LocalDriveNode by adding provider and links
+ * @param node The LocalNode to convert
+ * @returns The converted LocalDriveNode
+ */
+export function toLocalDriveNode<TNode extends LocalNode>(node: TNode): LocalDriveNode {
+  return {
+    ...node,
+    type: node.type as LocalDriveNode["type"],
+    readonly: node.readonly ?? false,
+    hidden: node.hidden ?? false,
+    provider: "local" as const,
+    links: {
+      view: node.type === "file" ? getLocalDriveFileUrl(node.id, { disposition: "inline" }) : null,
+      download:
+        node.type === "file" ? getLocalDriveFileUrl(node.id, { disposition: "attachment" }) : null,
+      preview: node.type === "file" ? getLocalDriveFileUrl(node.id) : null,
+      thumbnail:
+        node.type === "file" ? getLocalDriveFileUrl(node.id, { variant: "preview-256" }) : null,
+    },
+    availability: "ready" as const,
+  } satisfies LocalDriveNode;
+}
+
+/**
+ * Check if the node is a file
+ */
+export function isLocalDriveFile(node: Pick<LocalNode, "type">): node is LocalNode {
+  return node.type === "file";
+}
+
+/**
+ * Check if the node is a folder
+ */
+export function isLocalDriveFolder(node: Pick<LocalNode, "type">): node is LocalNode {
+  return node.type === "folder";
+}
+
+/**
+ * Get file url
+ */
+export function getLocalDriveFileUrl(id: string, options: Partial<GetLocalFileURLSchema> = {}) {
+  const searchParams = new URLSearchParams();
+  if (options?.variant) searchParams.set("variant", options.variant);
+  if (options?.disposition) searchParams.set("disposition", options.disposition);
+
+  const queryString = searchParams.toString();
+  return `/api/drive/files/${id}${queryString ? `?${queryString}` : ""}`;
+}
+
+/**
+ * Image loader
+ */
+export function localDriveImageLoader({ src, width }: ImageLoaderProps) {
+  const url = new URL(src, window.location.origin);
+  url.searchParams.set("variant", `preview-${width}`);
+  return url.toString();
+}
+
+/**
+ * Node subtype inference
+ */
+export type LocalDriveNodeSubtype = (typeof nodeSubtypes)[number];
+
+export function inferLocalDriveNodeSubtype({
+  name,
+  contentType,
+}: Partial<Pick<LocalDriveNode, "name" | "contentType">>): LocalDriveNodeSubtype {
+  if (!contentType) return "other";
+  if (contentType?.startsWith("image/")) return "image";
+  if (contentType === "application/pdf") return "document";
+  if (contentType?.includes("spreadsheet")) return "spreadsheet";
+  if (contentType?.startsWith("video/")) return "video";
+  if (contentType?.startsWith("audio/")) return "audio";
+  if (contentType?.includes("zip") || contentType?.includes("archive")) return "archive";
+
+  const ext = name?.split(".").pop()?.toLowerCase();
+  if (["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(ext ?? "")) return "image";
+  if (["pdf", "doc", "docx", "txt"].includes(ext ?? "")) return "document";
+  if (["xls", "xlsx", "ods"].includes(ext ?? "")) return "spreadsheet";
+  if (["zip", "rar", "7z"].includes(ext ?? "")) return "archive";
+
+  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]}`;
+}