@tulip-systems/drive 0.7.0

package/src/components/navigation/header.client.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import {
+  Header,
+  HeaderTopbarBackButton,
+  HeaderTopbarMobileNavSwitcher,
+  Topbar,
+  TopbarTools,
+} from "@tulip-systems/core/components/client";
+import type { ComponentProps } from "react";
+import { type DriveBreadCrumbsProps, DriveBreadcrumbs } from "./breadcrumbs.client";
+
+/**
+ * Drive  Header
+ */
+export function DriveHeader({ children, ...props }: ComponentProps<"div">) {
+  return (
+    <Header {...props}>
+      <Topbar>{children}</Topbar>
+    </Header>
+  );
+}
+
+/**
+ * Drive Header Breadcrumbs
+ */
+export function DriveHeaderBreadcrumbs({ breadcrumbs }: DriveBreadCrumbsProps) {
+  return (
+    <div className="flex h-full items-center gap-4">
+      <div className="h-full">
+        <HeaderTopbarBackButton />
+        <HeaderTopbarMobileNavSwitcher />
+      </div>
+
+      <DriveBreadcrumbs breadcrumbs={breadcrumbs} />
+    </div>
+  );
+}
+
+/**
+ * Drive Header Tools
+ */
+export function DriveHeaderTools({ children, ...props }: ComponentProps<"div">) {
+  return <TopbarTools {...props}>{children}</TopbarTools>;
+}

package/src/components/navigation/toolbar.client.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { cn } from "@tulip-systems/core/lib";
+import type { ComponentProps } from "react";
+import { DriveBreadcrumbs } from "./breadcrumbs.client";
+
+/**
+ * Drive Page Topbar
+ */
+export function DriveToolbar({ className, children, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      {...props}
+      className={cn("flex items-center justify-between overflow-x-auto pt-3", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Drive Toolbar Breadcrumbs
+ */
+export const DriveToolbarBreadcrumbs = DriveBreadcrumbs;
+
+/**
+ * Drive Header Tools
+ */
+export function DriveToolbarTools({ children, className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("flex h-full items-center justify-end gap-4", className)}>
+      {children}
+    </div>
+  );
+}

package/src/components/navigation/view-switcher.client.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ToggleGroup, ToggleGroupItem } from "@tulip-systems/core/components/client";
+import { LayoutGridIcon, StretchVerticalIcon } from "lucide-react";
+import { type DriveViewMode, useDriveViewContext } from "../view.client";
+
+/**
+ * Drive view switcher
+ */
+export function DriveViewSwitcher() {
+  const { view, onViewChange } = useDriveViewContext();
+
+  return (
+    <ToggleGroup
+      type="single"
+      variant="outline"
+      value={view}
+      onValueChange={(value) => {
+        console.log("DriveViewSwitcher: Changing view to", value);
+        onViewChange(value ? (value as DriveViewMode) : "grid");
+      }}
+    >
+      <ToggleGroupItem value="grid" aria-label="Toggle grid view">
+        <LayoutGridIcon />
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="list" aria-label="Toggle list view">
+        <StretchVerticalIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}

package/src/components/selection.client.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import type { Selection } from "@tulip-systems/core/data-tables";
+import { createContext, type PropsWithChildren, use, useMemo, useState } from "react";
+import type { DriveNode } from "@/lib/dto";
+
+/**
+ * DriveSelectionContextValue
+ */
+export type DriveSelectionContextValue = {
+  selection?: Selection;
+  selectionConditions?: (node: DriveNode) => boolean | boolean[];
+};
+
+const DriveSelectionContext = createContext<DriveSelectionContextValue | null>(null);
+
+/**
+ * useDriveSelectionContext
+ */
+export function useDriveSelectionContext() {
+  const context = use(DriveSelectionContext);
+  if (!context) throw new Error("DriveSelectionContext not found!");
+  return context;
+}
+
+/**
+ * DriveSelectionProvider
+ */
+export function DriveSelectionProvider({
+  selection,
+  selectionConditions,
+  children,
+}: PropsWithChildren<DriveSelectionContextValue>) {
+  const [_rowSelection, _setRowSelection] = useState({});
+
+  const value = useMemo(
+    () => ({
+      selection: {
+        rowSelection: selection?.rowSelection ?? _rowSelection,
+        setRowSelection: selection?.setRowSelection ?? _setRowSelection,
+      },
+      selectionConditions: selectionConditions,
+    }),
+    [selection, selectionConditions, _rowSelection],
+  );
+
+  return <DriveSelectionContext value={value}>{children}</DriveSelectionContext>;
+}

package/src/components/view.client.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { createContext, type PropsWithChildren, use, useCallback, useState } from "react";
+import { DRIVE_VIEW_COOKIE, DRIVE_VIEW_COOKIE_MAX_AGE } from "@/lib/constants";
+
+export type DriveViewMode = "grid" | "list";
+
+/**
+ * DriveViewContextValue
+ */
+export type DriveViewContextValue = {
+  view: DriveViewMode;
+  onViewChange: (view: DriveViewMode) => void;
+};
+
+const DriveViewContext = createContext<DriveViewContextValue | null>(null);
+
+/**
+ * useDriveViewContext
+ */
+export function useDriveViewContext() {
+  const context = use(DriveViewContext);
+
+  if (!context) {
+    console.warn("DriveViewContext not found!");
+    return {
+      view: "grid" as DriveViewMode,
+      onViewChange: () => {
+        throw new Error("DriveViewContext not found!");
+      },
+    };
+  }
+
+  return context;
+}
+
+/**
+ * DriveViewProvider
+ */
+
+export type DriveViewProviderProps = PropsWithChildren<Partial<DriveViewContextValue>> & {
+  initialView?: DriveViewMode;
+};
+
+export function DriveViewProvider(props: DriveViewProviderProps) {
+  const [_view, _setView] = useState<DriveViewMode>(props.view ?? props.initialView ?? "grid");
+  const view = props.view ?? _view;
+
+  const onViewChange = useCallback(
+    (value: DriveViewMode | ((value: DriveViewMode) => DriveViewMode)) => {
+      const viewState = typeof value === "function" ? value(view) : value;
+
+      if (props.onViewChange) {
+        props.onViewChange(viewState);
+      } else {
+        _setView(viewState);
+      }
+
+      // This sets the cookie to keep the view state.
+      // biome-ignore lint/suspicious/noDocumentCookie: This is needed to persist the sidebar state across page reloads.
+      document.cookie = `${DRIVE_VIEW_COOKIE}=${viewState}; path=/; max-age=${DRIVE_VIEW_COOKIE_MAX_AGE}`;
+    },
+    [props.onViewChange, view],
+  );
+
+  return <DriveViewContext value={{ view, onViewChange }}>{props.children}</DriveViewContext>;
+}

package/src/config/filters.ts

@@ -0,0 +1,14 @@
+import {
+  createTableFilters,
+  parseFilterArray,
+  parseFilterBoolean,
+} from "@tulip-systems/core/data-tables";
+import z from "zod";
+import { DRIVE_NODE_TYPES } from "@/lib/constants";
+
+export const driveTreeFilters = createTableFilters({
+  types: parseFilterArray(z.array(z.enum(DRIVE_NODE_TYPES))),
+  contentTypes: parseFilterArray(z.array(z.string())),
+  nodeIds: parseFilterArray(z.array(z.string())),
+  isArchived: parseFilterBoolean(z.boolean()),
+});

package/src/config/types.tsx

@@ -0,0 +1,90 @@
+import {
+  createStatusConfig,
+  createStatusVariants,
+  StatusBadge,
+  StatusField,
+} from "@tulip-systems/core/components";
+import { cva } from "class-variance-authority";
+import {
+  FileArchiveIcon,
+  FileAudioIcon,
+  FileIcon,
+  FileImageIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoIcon,
+} from "lucide-react";
+import type { DriveNodeSubtype } from "@/lib/validators";
+
+/**
+ * Node subtype config
+ */
+export const nodeSubtypeConfig = createStatusConfig<DriveNodeSubtype>([
+  {
+    value: "image",
+    label: "Afbeelding",
+    icon: FileImageIcon,
+    className: "stroke-blue-500",
+  },
+  {
+    value: "document",
+    label: "Document",
+    icon: FileTextIcon,
+    className: "stroke-red-600",
+  },
+  {
+    value: "archive",
+    label: "Archief",
+    icon: FileArchiveIcon,
+    className: "stroke-yellow-500",
+  },
+  {
+    value: "audio",
+    label: "Audio",
+    icon: FileAudioIcon,
+    className: "stroke-pink-500",
+  },
+  {
+    value: "video",
+    label: "Video",
+    icon: FileVideoIcon,
+    className: "stroke-purple-500",
+  },
+  {
+    value: "spreadsheet",
+    label: "Tabel",
+    icon: FileSpreadsheetIcon,
+    className: "stroke-green-600",
+  },
+  {
+    value: "other",
+    label: "Bestand",
+    icon: FileIcon,
+    className: "stroke-gray-400",
+  },
+]);
+
+/**
+ * Node subtype variants
+ */
+export const nodeSubtypeVariants = cva("", {
+  variants: { status: createStatusVariants(nodeSubtypeConfig) },
+});
+
+/**
+ * Node subtype badge
+ */
+export function NodeSubtypeBadge(props: { subtype: DriveNodeSubtype }) {
+  return (
+    <StatusBadge config={nodeSubtypeConfig} variants={nodeSubtypeVariants} status={props.subtype} />
+  );
+}
+
+/**
+ * Node subtype field
+ */
+export function NodeSubtypeField(props: { subtype: DriveNodeSubtype }) {
+  return (
+    <StatusField config={nodeSubtypeConfig} variants={nodeSubtypeVariants} status={props.subtype} />
+  );
+}

package/src/entry.client.ts

@@ -0,0 +1,7 @@
+export * from "@/components/grid.client";
+export * from "@/components/grid-card.client";
+/**
+ * Components
+ */
+export * from "@/components/selection.client";
+export * from "@/components/view.client";

package/src/entry.server.ts

@@ -0,0 +1,4 @@
+/**
+ * Lib
+ */
+export * from "./lib/helpers.server";

package/src/entry.ts

@@ -0,0 +1,10 @@
+/**
+ * Lib
+ */
+
+export * from "./lib/constants";
+export * from "./lib/contracts";
+export * from "./lib/dto";
+export * from "./lib/helpers";
+export * from "./lib/search-params";
+export * from "./lib/validators";

package/src/lib/constants.ts

@@ -0,0 +1,19 @@
+export const DRIVE_PROVIDERS = ["local", "google"] as const;
+
+export const DRIVE_NODE_TYPES = ["folder", "file"] as const;
+
+export const DRIVE_NODE_SUBTYPES = [
+  "image",
+  "document",
+  "spreadsheet",
+  "video",
+  "audio",
+  "archive",
+  "other",
+] as const;
+
+/**
+ * The cookie name for storing the drive view mode (grid or list).
+ */
+export const DRIVE_VIEW_COOKIE = "tulip.drive_view_mode" as const;
+export const DRIVE_VIEW_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;

package/src/lib/contracts.ts

@@ -0,0 +1,121 @@
+import type { TableQueryResponse } from "@tulip-systems/core/data-tables/server";
+import type {
+  DriveFolderParent,
+  DriveNode,
+  DriveNodeBase,
+  DriveNodeChild,
+  DriveNodeWithChildren,
+} from "./dto";
+import type {
+  CreateDriveFolderInput,
+  GetDriveNodesByParentIdInput,
+  ListDriveTreeInput,
+  PresignDriveFileInput,
+  UpdateDriveNodeInput,
+  UploadDriveFileInput,
+} from "./validators";
+
+export type DrivePresignedUploadResult<TNode extends DriveNodeBase = DriveNode> = {
+  uploadId: string;
+  presignedUrl: string;
+  node: TNode;
+};
+
+/**
+ * Read-only drive operations every provider should be able to support.
+ * This is the base contract for provider-agnostic consumers and intentionally
+ * excludes storage, upload, preview generation, readonly, and soft-delete
+ * behavior because those are provider capabilities, not universal drive reads.
+ */
+export interface DriveReader<
+  TNode extends DriveNodeBase = DriveNodeBase,
+  TNodeWithChildren extends DriveNodeWithChildren<TNode> = DriveNodeWithChildren<TNode>,
+  TNodeChild extends DriveNodeChild<TNode> = DriveNodeChild<TNode>,
+> {
+  getNodeById(id: string): Promise<TNode | null>;
+
+  getNodeWithChildren(input: { id: string; namespace: string }): Promise<TNodeWithChildren | null>;
+
+  getNodesByParentId(input: GetDriveNodesByParentIdInput): Promise<TNode[]>;
+
+  listTree(input: ListDriveTreeInput): Promise<TableQueryResponse<TNode>>;
+
+  getFolderParents(input: {
+    id: string | null;
+    namespace: string;
+  }): Promise<Array<DriveFolderParent<TNode>>>;
+
+  getNodeChildren(ids: string[]): Promise<TNodeChild[]>;
+}
+
+/**
+ * Optional capability for providers that can mutate the node tree.
+ * Providers that are read-only, remote-index-only, or permission-limited should
+ * not implement this contract.
+ */
+export interface DriveNodeMutations<TNode extends DriveNodeBase = DriveNodeBase> {
+  createFolder(input: CreateDriveFolderInput): Promise<TNode>;
+  updateNode(id: string, data: UpdateDriveNodeInput): Promise<TNode>;
+  moveNode(input: { id: string; parentId: string | null }): Promise<TNode>;
+  deleteNode(id: string): Promise<void>;
+  deleteNodes(ids: string[]): Promise<void>;
+}
+
+/**
+ * Optional capability for providers that accept a file body directly.
+ * The body type is provider-specific so the base contracts do not depend on any
+ * storage package or runtime upload representation.
+ */
+export interface DriveDirectUpload<TNode extends DriveNodeBase = DriveNodeBase, TBody = unknown> {
+  uploadFile(input: UploadDriveFileInput & { body: TBody }): Promise<TNode>;
+}
+
+/**
+ * Optional capability for providers that create upload sessions/URLs.
+ * The returned metadata is provider-specific; local/object-storage providers can
+ * expose asset metadata here without leaking storage concepts into the base Drive
+ * contract.
+ */
+export interface DrivePresignedUpload<
+  TNode extends DriveNodeBase = DriveNodeBase,
+  TResult extends DrivePresignedUploadResult<TNode> = DrivePresignedUploadResult<TNode>,
+> {
+  presignUpload(input: PresignDriveFileInput): Promise<TResult>;
+
+  confirmUpload(uploadId: string): Promise<TNode>;
+}
+
+/**
+ * Optional capability for providers that generate and persist preview variants.
+ * This is useful for local/object-storage providers. Providers with native
+ * previews, such as Google Drive, should not implement this just as a no-op.
+ */
+export interface DrivePreviewGenerator {
+  generatePreviews(input: { id: string }): Promise<void>;
+}
+
+/**
+ * Optional capability for providers that can lock/unlock nodes.
+ * Google Drive maps this to `contentRestrictions.readOnly`; local drive maps it
+ * to its readonly flag. This is intentionally not part of the base reader
+ * contract because not every provider can honestly enforce it.
+ */
+export interface DriveReadonly<TNode extends DriveNodeBase = DriveNodeBase> {
+  setReadonly(ids: string[], readonly: boolean): Promise<TNode[]>;
+}
+
+/**
+ * Optional capability for providers that support soft removal.
+ * Local drive maps this to archive state; Google Drive maps this to trash.
+ */
+export interface DriveArchive<TNode extends DriveNodeBase = DriveNodeBase> {
+  archiveNodes(ids: string[]): Promise<TNode[]>;
+  restoreNodes(ids: string[]): Promise<TNode[]>;
+}
+
+/**
+ * Base provider-agnostic Drive contract.
+ * Additional behavior should be composed by intersecting optional capability
+ * contracts, for example `Drive<TNode> & DriveNodeMutations<TNode>`.
+ */
+export type Drive<TNode extends DriveNodeBase = DriveNodeBase> = DriveReader<TNode>;

package/src/lib/dto.ts

@@ -0,0 +1,83 @@
+import { z } from "zod";
+import { DRIVE_NODE_SUBTYPES, DRIVE_NODE_TYPES, DRIVE_PROVIDERS } from "./constants";
+
+/**
+ * Drive node provider
+ */
+export const driveNodeProviderSchema = z.enum(DRIVE_PROVIDERS);
+export type DriveNodeProvider = z.infer<typeof driveNodeProviderSchema>;
+
+/**
+ * Drive node type
+ */
+export const driveNodeTypeSchema = z.enum(DRIVE_NODE_TYPES);
+export type DriveNodeType = z.infer<typeof driveNodeTypeSchema>;
+
+/**
+ * Drive node subtype
+ */
+export const driveNodeSubtypeSchema = z.enum(DRIVE_NODE_SUBTYPES);
+export type DriveNodeSubtype = z.infer<typeof driveNodeSubtypeSchema>;
+
+/**
+ * Node availability
+ */
+export const driveNodeAvailabilitySchema = z.enum(["ready", "pending", "failed"]);
+export type DriveNodeAvailability = z.infer<typeof driveNodeAvailabilitySchema>;
+
+/**
+ * Node links
+ */
+export const driveNodeLinksSchema = z.object({
+  view: z.string().nullable(),
+  download: z.string().nullable(),
+  preview: z.string().nullable(),
+  thumbnail: z.string().nullable(),
+});
+export type DriveNodeLinks = z.infer<typeof driveNodeLinksSchema>;
+
+/**
+ * Node
+ */
+export const driveNodeSchema = z.object({
+  id: z.string(),
+  provider: driveNodeProviderSchema,
+  createdAt: z.date(),
+  updatedAt: z.date(),
+  name: z.string(),
+  namespace: z.string(),
+  type: driveNodeTypeSchema,
+  subtype: driveNodeSubtypeSchema,
+  size: z.number().nullable(),
+  contentType: z.string().nullable(),
+  readonly: z.boolean(),
+  hidden: z.boolean(),
+  archivedAt: z.date().nullable(),
+  parentId: z.string().nullable(),
+  links: driveNodeLinksSchema,
+  availability: driveNodeAvailabilitySchema,
+});
+export type DriveNode = z.infer<typeof driveNodeSchema>;
+export type DriveNodeBase = Omit<DriveNode, "provider">;
+
+/**
+ * Node with children
+ */
+export type DriveNodeWithChildren<TNode extends DriveNodeBase = DriveNode> = TNode & {
+  children: TNode[];
+};
+
+/**
+ * Node parent and child types
+ */
+export type DriveFolderParent<TNode extends DriveNodeBase = DriveNode> = Pick<
+  TNode,
+  "id" | "name" | "parentId"
+> & {
+  depth: number;
+};
+
+/**
+ * Node child type
+ */
+export type DriveNodeChild<TNode extends DriveNodeBase = DriveNode> = TNode & { depth: number };

package/src/lib/helpers.server.ts

@@ -0,0 +1,14 @@
+import "server-cli-only";
+
+import type { cookies } from "next/headers";
+import type { DriveViewMode } from "@/components/view.client";
+import { DRIVE_VIEW_COOKIE } from "./constants";
+
+/**
+ * Helper function to get the drive view mode from cookies
+ * @param cookiesStore - The cookies store from Next.js headers
+ * @returns The drive view mode ("grid" or "list") or undefined if not set
+ */
+export function getDriveViewModeFromCookies(cookiesStore: Awaited<ReturnType<typeof cookies>>) {
+  return cookiesStore.get(DRIVE_VIEW_COOKIE)?.value as DriveViewMode | undefined;
+}

package/src/lib/helpers.ts

@@ -0,0 +1,32 @@
+import type { DriveNode } from "./dto";
+
+/**
+ * Check if the node is a file
+ */
+export function isFile(node: Pick<DriveNode, "type">): node is DriveNode {
+  return node.type === "file";
+}
+
+/**
+ * Check if the node is a folder
+ */
+export function isFolder(node: Pick<DriveNode, "type">): node is DriveNode {
+  return node.type === "folder";
+}
+
+/**
+ * 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/lib/search-params.ts

@@ -0,0 +1,5 @@
+import { parseAsString } from "nuqs/server";
+
+export const driveTreeSearchParams = {
+  parentId: parseAsString,
+};