@tulip-systems/drive-local 0.11.1

package/dist/root/components/command-folder-create.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { createLocalDriveFolderInputSchema } from "../lib/validators.mjs";
+import { useDriveNavigation } from "@tulip-systems/drive/client";
+import { FolderPlus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { CommandFormDialog, CommandFormDialogCancel, CommandFormDialogContent, CommandFormDialogFields, CommandFormDialogFooter, CommandFormDialogHeader, CommandFormDialogSubmit, CommandFormDialogTitle, CommandFormDialogTrigger, CommandLabel } from "@tulip-systems/commands/client";
+import { Input } from "@tulip-systems/ui/input";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@tulip-systems/ui/react-hook-form";
+import { useForm } from "react-hook-form";
+//#region src/root/components/command-folder-create.tsx
+function LocalDriveFoldersCreateCommand({ defaultValues, variables, mutation }) {
+	const { parentId } = useDriveNavigation();
+	const form = useForm({
+		resolver: standardSchemaResolver(createLocalDriveFolderInputSchema),
+		defaultValues: {
+			...defaultValues,
+			parentId
+		}
+	});
+	return /* @__PURE__ */ jsx(Form, {
+		...form,
+		children: /* @__PURE__ */ jsxs(CommandFormDialog, { children: [/* @__PURE__ */ jsxs(CommandFormDialogTrigger, {
+			label: "Folder toevoegen",
+			hotkey: "mod+i",
+			children: [/* @__PURE__ */ jsx(FolderPlus, { className: "size-4" }), /* @__PURE__ */ jsx(CommandLabel, {})]
+		}), /* @__PURE__ */ jsxs(CommandFormDialogContent, {
+			variables,
+			mutation,
+			children: [
+				/* @__PURE__ */ jsx(CommandFormDialogHeader, { children: /* @__PURE__ */ jsx(CommandFormDialogTitle, { children: "Folder toevoegen" }) }),
+				/* @__PURE__ */ jsx(CommandFormDialogFields, { children: /* @__PURE__ */ jsx(FormField, {
+					control: form.control,
+					name: "name",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, { children: "Naam" }),
+						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+							...field,
+							value: field.value ?? ""
+						}) }),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
+				}) }),
+				/* @__PURE__ */ jsxs(CommandFormDialogFooter, { children: [/* @__PURE__ */ jsx(CommandFormDialogCancel, { children: "Annuleren" }), /* @__PURE__ */ jsx(CommandFormDialogSubmit, { children: "Toevoegen" })] })
+			]
+		})] })
+	});
+}
+//#endregion
+export { LocalDriveFoldersCreateCommand };

package/dist/root/components/command-folder-update.d.mts

@@ -0,0 +1,11 @@
+import { UpdateLocalDriveNodeInput } from "../lib/validators.mjs";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
+//#region src/root/components/command-folder-update.d.ts
+type LocalDriveFoldersUpdateCommandProps<TData = unknown, TError = DefaultError, TVariables = unknown, TOnMutateResult = unknown> = {
+  defaultValues: Partial<UpdateLocalDriveNodeInput>;
+  variables: (values: UpdateLocalDriveNodeInput) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+};
+declare function LocalDriveFoldersUpdateCommand<TData = unknown, TError = DefaultError, TVariables = unknown, TOnMutateResult = unknown>({ defaultValues, variables, mutation }: LocalDriveFoldersUpdateCommandProps<TData, TError, TVariables, TOnMutateResult>): import("react").JSX.Element;
+//#endregion
+export { LocalDriveFoldersUpdateCommand, LocalDriveFoldersUpdateCommandProps };

package/dist/root/components/command-folder-update.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { updateLocalDriveNodeInputSchema } from "../lib/validators.mjs";
+import { FolderPen } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { CommandFormDialog, CommandFormDialogCancel, CommandFormDialogContent, CommandFormDialogFields, CommandFormDialogFooter, CommandFormDialogHeader, CommandFormDialogSubmit, CommandFormDialogTitle, CommandFormDialogTrigger, CommandLabel } from "@tulip-systems/commands/client";
+import { Input } from "@tulip-systems/ui/input";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@tulip-systems/ui/react-hook-form";
+import { useForm } from "react-hook-form";
+//#region src/root/components/command-folder-update.tsx
+function LocalDriveFoldersUpdateCommand({ defaultValues, variables, mutation }) {
+	const form = useForm({
+		resolver: standardSchemaResolver(updateLocalDriveNodeInputSchema),
+		defaultValues
+	});
+	return /* @__PURE__ */ jsx(Form, {
+		...form,
+		children: /* @__PURE__ */ jsxs(CommandFormDialog, { children: [/* @__PURE__ */ jsxs(CommandFormDialogTrigger, {
+			label: "Wijzigen",
+			children: [/* @__PURE__ */ jsx(FolderPen, { className: "size-4" }), /* @__PURE__ */ jsx(CommandLabel, {})]
+		}), /* @__PURE__ */ jsxs(CommandFormDialogContent, {
+			variables,
+			mutation,
+			children: [
+				/* @__PURE__ */ jsx(CommandFormDialogHeader, { children: /* @__PURE__ */ jsx(CommandFormDialogTitle, { children: "Folder wijzigen" }) }),
+				/* @__PURE__ */ jsx(CommandFormDialogFields, { children: /* @__PURE__ */ jsx(FormField, {
+					control: form.control,
+					name: "name",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+						/* @__PURE__ */ jsx(FormLabel, { children: "Naam" }),
+						/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+							...field,
+							value: field.value ?? ""
+						}) }),
+						/* @__PURE__ */ jsx(FormMessage, {})
+					] })
+				}) }),
+				/* @__PURE__ */ jsxs(CommandFormDialogFooter, { children: [/* @__PURE__ */ jsx(CommandFormDialogCancel, { children: "Annuleren" }), /* @__PURE__ */ jsx(CommandFormDialogSubmit, { children: "Opslaan" })] })
+			]
+		})] })
+	});
+}
+//#endregion
+export { LocalDriveFoldersUpdateCommand };

package/dist/root/components/content.client.d.mts

@@ -0,0 +1,5 @@
+import { DriveContent } from "@tulip-systems/drive/client";
+//#region src/root/components/content.client.d.ts
+declare const LocalDriveContent: typeof DriveContent;
+//#endregion
+export { LocalDriveContent };

package/dist/root/components/content.client.mjs

@@ -0,0 +1,5 @@
+import { DriveContent } from "@tulip-systems/drive/client";
+//#region src/root/components/content.client.tsx
+const LocalDriveContent = DriveContent;
+//#endregion
+export { LocalDriveContent };

package/dist/root/components/navigation.client.d.mts

@@ -0,0 +1,11 @@
+import { DriveBreadcrumb, DriveHeader, DriveHeaderBreadcrumbs, DriveHeaderTools, DriveToolbar, DriveToolbarTools, DriveViewSwitcher } from "@tulip-systems/drive/client";
+//#region src/root/components/navigation.client.d.ts
+declare const LocalDriveHeader: typeof DriveHeader;
+declare const LocalDriveHeaderBreadcrumbs: typeof DriveHeaderBreadcrumbs;
+declare const LocalDriveHeaderTools: typeof DriveHeaderTools;
+declare const LocalDriveToolbar: typeof DriveToolbar;
+declare const LocalDriveToolbarBreadcrumbs: typeof import("@tulip-systems/drive/client").DriveBreadcrumbs;
+declare const LocalDriveToolbarTools: typeof DriveToolbarTools;
+declare const LocalDriveViewSwitcher: typeof DriveViewSwitcher;
+//#endregion
+export { type DriveBreadcrumb, LocalDriveHeader, LocalDriveHeaderBreadcrumbs, LocalDriveHeaderTools, LocalDriveToolbar, LocalDriveToolbarBreadcrumbs, LocalDriveToolbarTools, LocalDriveViewSwitcher };

package/dist/root/components/navigation.client.mjs

@@ -0,0 +1,12 @@
+"use client";
+import { DriveHeader, DriveHeaderBreadcrumbs, DriveHeaderTools, DriveToolbar, DriveToolbarBreadcrumbs, DriveToolbarTools, DriveViewSwitcher } from "@tulip-systems/drive/client";
+//#region src/root/components/navigation.client.tsx
+const LocalDriveHeader = DriveHeader;
+const LocalDriveHeaderBreadcrumbs = DriveHeaderBreadcrumbs;
+const LocalDriveHeaderTools = DriveHeaderTools;
+const LocalDriveToolbar = DriveToolbar;
+const LocalDriveToolbarBreadcrumbs = DriveToolbarBreadcrumbs;
+const LocalDriveToolbarTools = DriveToolbarTools;
+const LocalDriveViewSwitcher = DriveViewSwitcher;
+//#endregion
+export { LocalDriveHeader, LocalDriveHeaderBreadcrumbs, LocalDriveHeaderTools, LocalDriveToolbar, LocalDriveToolbarBreadcrumbs, LocalDriveToolbarTools, LocalDriveViewSwitcher };

package/dist/root/components/provider.client.d.mts

@@ -0,0 +1,16 @@
+import { LocalDriveUploadZoneProps } from "./upload-zone.client.mjs";
+import { DriveContextValue, DriveDragDropProviderProps, DriveNavigationConfig, DriveSelectionContextValue, DriveViewProviderProps } from "@tulip-systems/drive/client";
+import { PropsWithChildren } from "react";
+//#region src/root/components/provider.client.d.ts
+type LocalDriveContextValue = DriveContextValue & {
+  readonly?: boolean;
+};
+declare const LocalDriveContext: import("react").Context<LocalDriveContextValue>;
+declare function useLocalDriveContext(): LocalDriveContextValue;
+type LocalDriveProviderProps = PropsWithChildren<LocalDriveContextValue & Partial<DriveSelectionContextValue> & Pick<DriveViewProviderProps, "defaultView"> & Pick<DriveDragDropProviderProps, "onMove"> & Pick<LocalDriveUploadZoneProps, "driveUploadClient" | "uploadHooks" | "onUploadCompleted" | "onUploadFailed" | "optimistic" | "disabled" | "className"> & {
+  parentId: string | null;
+  navigation: DriveNavigationConfig;
+}>;
+declare function LocalDriveProvider({ defaultView, namespace, parentId, permission, meta, readonly, selection, selectionConditions, onMove, driveUploadClient, uploadHooks, onUploadCompleted, onUploadFailed, optimistic, disabled, className, navigation, children }: LocalDriveProviderProps): import("react").JSX.Element;
+//#endregion
+export { LocalDriveContext, LocalDriveContextValue, LocalDriveProvider, LocalDriveProviderProps, useLocalDriveContext };

package/dist/root/components/provider.client.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { LocalDriveUploadZone } from "./upload-zone.client.mjs";
+import { DriveDragDropProvider, DriveNavigationProvider, DriveSelectionProvider, DriveViewProvider } from "@tulip-systems/drive/client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@tulip-systems/ui/cn";
+import { createContext, use, useMemo } from "react";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+//#region src/root/components/provider.client.tsx
+const LocalDriveContext = createContext({});
+function useLocalDriveContext() {
+	const context = use(LocalDriveContext);
+	if (!context) throw new Error("LocalDriveContext not found!");
+	return context;
+}
+function LocalDriveProvider({ defaultView, namespace, parentId, permission, meta, readonly = false, selection, selectionConditions, onMove, driveUploadClient, uploadHooks, onUploadCompleted, onUploadFailed, optimistic, disabled, className, navigation, children }) {
+	const isDisabled = disabled ?? readonly;
+	const context = useMemo(() => ({
+		namespace,
+		permission,
+		meta,
+		readonly
+	}), [
+		namespace,
+		permission,
+		meta,
+		readonly
+	]);
+	return /* @__PURE__ */ jsx(DriveNavigationProvider, {
+		parentId,
+		navigation,
+		children: /* @__PURE__ */ jsx(Allowed, {
+			permission,
+			children: /* @__PURE__ */ jsx(DriveSelectionProvider, {
+				selection,
+				selectionConditions,
+				children: /* @__PURE__ */ jsx(DriveViewProvider, {
+					defaultView,
+					children: /* @__PURE__ */ jsx(DriveDragDropProvider, {
+						disabled: isDisabled,
+						onMove,
+						children: /* @__PURE__ */ jsx(LocalDriveContext, {
+							value: context,
+							children: /* @__PURE__ */ jsx(LocalDriveUploadZone, {
+								disabled: isDisabled,
+								className: cn("flex min-h-dvh flex-col", className),
+								variables: {
+									namespace,
+									parentId
+								},
+								driveUploadClient,
+								uploadHooks,
+								onUploadCompleted,
+								onUploadFailed,
+								optimistic,
+								children
+							})
+						})
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { LocalDriveContext, LocalDriveProvider, useLocalDriveContext };

package/dist/root/components/upload-zone-context.client.d.mts

@@ -0,0 +1,36 @@
+import { LocalDriveFileNode, LocalDriveNodeWithAsset } from "../lib/validators.mjs";
+import { LocalDriveUploadClient } from "../lib/upload.client.mjs";
+import React from "react";
+//#region src/root/components/upload-zone-context.client.d.ts
+/**
+ * Upload Zone Context Value
+ */
+type LocalDriveUploadZoneContextValue = {
+  driveUploadClient: LocalDriveUploadClient;
+  onUpload: (file: File) => Promise<LocalDriveFileNode>;
+  onRemove: (ids: string[]) => Promise<void>;
+  optimistic?: {
+    add?: (newValue: LocalDriveNodeWithAsset) => Promise<void> | void;
+    replace?: (input: {
+      id: string;
+      newValue: LocalDriveNodeWithAsset;
+    }) => Promise<void> | void;
+    remove?: (ids: string[]) => Promise<void> | void;
+    invalidate?: () => Promise<void> | void;
+    cancel?: () => Promise<void> | void;
+  };
+  disabled?: boolean;
+};
+/**
+ * Upload Zone Context
+ */
+declare const LocalDriveUploadZoneContext: React.Context<LocalDriveUploadZoneContextValue | null>;
+type DriveUploadZoneContextValue = LocalDriveUploadZoneContextValue;
+declare const DriveUploadZoneContext: React.Context<LocalDriveUploadZoneContextValue | null>;
+/**
+ * Upload Zone Hook
+ */
+declare function useLocalDriveUploadZone(): LocalDriveUploadZoneContextValue;
+declare const useDriveUploadZone: typeof useLocalDriveUploadZone;
+//#endregion
+export { DriveUploadZoneContext, DriveUploadZoneContextValue, LocalDriveUploadZoneContext, LocalDriveUploadZoneContextValue, useDriveUploadZone, useLocalDriveUploadZone };

package/dist/root/components/upload-zone-context.client.mjs

@@ -0,0 +1,19 @@
+"use client";
+import React from "react";
+//#region src/root/components/upload-zone-context.client.tsx
+/**
+* Upload Zone Context
+*/
+const LocalDriveUploadZoneContext = React.createContext(null);
+const DriveUploadZoneContext = LocalDriveUploadZoneContext;
+/**
+* Upload Zone Hook
+*/
+function useLocalDriveUploadZone() {
+	const context = React.useContext(LocalDriveUploadZoneContext);
+	if (!context) throw new Error("useUploadZone must be used within an UploadZoneContext provider");
+	return context;
+}
+const useDriveUploadZone = useLocalDriveUploadZone;
+//#endregion
+export { DriveUploadZoneContext, LocalDriveUploadZoneContext, useDriveUploadZone, useLocalDriveUploadZone };

package/dist/root/components/upload-zone.client.d.mts

@@ -0,0 +1,16 @@
+import { LocalDriveFileNode } from "../lib/validators.mjs";
+import { LocalDriveUploadHooks, PrepareLocalDriveUploadInput } from "../lib/upload.client.mjs";
+import { LocalDriveUploadZoneContextValue } from "./upload-zone-context.client.mjs";
+import { ComponentProps } from "react";
+//#region src/root/components/upload-zone.client.d.ts
+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;
+};
+type DriveUploadZoneProps = LocalDriveUploadZoneProps;
+declare function LocalDriveUploadZone({ variables, optimistic, driveUploadClient, uploadHooks, onUploadCompleted, onUploadFailed, disabled, children, className, ...props }: LocalDriveUploadZoneProps): import("react").JSX.Element;
+declare const DriveUploadZone: typeof LocalDriveUploadZone;
+//#endregion
+export { DriveUploadZone, DriveUploadZoneProps, LocalDriveUploadZone, LocalDriveUploadZoneProps };

package/dist/root/components/upload-zone.client.mjs

@@ -0,0 +1,147 @@
+"use client";
+import { inferLocalDriveNodeSubtype } from "../lib/helpers.mjs";
+import { LocalDriveUploadZoneContext } from "./upload-zone-context.client.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@tulip-systems/ui/cn";
+import { useCallback } from "react";
+import { useAction } from "@tulip-systems/core/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { useDropzone } from "react-dropzone";
+//#region src/root/components/upload-zone.client.tsx
+function LocalDriveUploadZone({ variables, optimistic, driveUploadClient, uploadHooks, onUploadCompleted, onUploadFailed, disabled = false, children, className, ...props }) {
+	/**
+	* Delete mutation
+	*/
+	const deleteMutation = useAction({
+		mutationFn: async (ids) => 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) => driveUploadClient.upload(params, uploadHooks),
+		onMutate: async (variables) => {
+			await optimistic?.cancel?.();
+			const newNode = {
+				id: variables.uploadId,
+				provider: "local",
+				createdAt: /* @__PURE__ */ new Date(),
+				updatedAt: /* @__PURE__ */ 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"
+				}
+			};
+			await optimistic?.add?.(newNode);
+		},
+		onSuccess: async (data, variables) => {
+			await optimistic?.replace?.({
+				id: variables.uploadId ?? "",
+				newValue: {
+					...data,
+					asset: {
+						status: "ready",
+						name: data.name,
+						contentType: data.contentType,
+						size: data.size,
+						visibility: variables.visibility || "private"
+					}
+				}
+			});
+			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 : void 0 });
+		},
+		onSettled: () => {
+			optimistic?.invalidate?.();
+		}
+	});
+	/**
+	* Upload file handler
+	*/
+	const onUpload = useCallback(async (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) => {
+		if (acceptedFiles.length === 0) return;
+		await Promise.allSettled(acceptedFiles.map(onUpload));
+	}, [onUpload]);
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop,
+		noClick: true,
+		disabled
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		...getRootProps(),
+		className: cn("relative z-0", className),
+		children: [
+			/* @__PURE__ */ jsx("input", { ...getInputProps() }),
+			isDragActive && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 rounded-md bg-primary/20 opacity-70 backdrop-blur-3xl" }),
+			/* @__PURE__ */ jsx(LocalDriveUploadZoneContext, {
+				value: {
+					driveUploadClient,
+					onUpload,
+					onRemove: deleteMutation.mutateAsync,
+					optimistic,
+					disabled
+				},
+				children
+			})
+		]
+	});
+}
+const DriveUploadZone = LocalDriveUploadZone;
+//#endregion
+export { DriveUploadZone, LocalDriveUploadZone };

package/dist/root/components/view.client.d.mts

@@ -0,0 +1,20 @@
+import { LocalDriveNodeWithAsset } from "../lib/validators.mjs";
+import { TableColumnDef } from "@tulip-systems/data-tables";
+import { useInfiniteStrategy } from "@tulip-systems/data-tables/client";
+import { DriveViewCommands, createDriveViewConfig } from "@tulip-systems/drive/client";
+import { ComponentProps } from "react";
+import { VisibilityState } from "@tanstack/react-table";
+//#region src/root/components/view.client.d.ts
+type LocalDriveViewProviderProps<TData extends LocalDriveNodeWithAsset = LocalDriveNodeWithAsset> = ComponentProps<"div"> & {
+  queryData: TData[];
+  columns?: TableColumnDef<TData>[];
+  strategy: ReturnType<typeof useInfiniteStrategy>;
+  commands?: DriveViewCommands<TData>;
+  columnVisibility?: VisibilityState;
+  sorting?: Parameters<typeof createDriveViewConfig<TData>>[0]["sorting"];
+};
+declare function LocalDriveViewProvider<TData extends LocalDriveNodeWithAsset = LocalDriveNodeWithAsset>({ queryData, columns, strategy, commands, columnVisibility, sorting, children, ...props }: LocalDriveViewProviderProps<TData>): import("react").JSX.Element;
+declare function LocalDriveView(): import("react").JSX.Element | null;
+declare function LocalDriveViewLoading({ ...props }: ComponentProps<"div">): import("react").JSX.Element;
+//#endregion
+export { LocalDriveView, LocalDriveViewLoading, LocalDriveViewProvider };

package/dist/root/components/view.client.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { localDriveColumns } from "../config/columns-data.mjs";
+import { localDriveImageLoader } from "../lib/helpers.mjs";
+import { useLocalDriveUploadZone } from "./upload-zone-context.client.mjs";
+import { useLocalDriveContext } from "./provider.client.mjs";
+import { TableLayout, TableSkeleton } from "@tulip-systems/data-tables";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { DriveGrid, DriveGridBottombar, DriveGridCard, DriveGridCardSkeleton, DriveGridEmpty, DriveGridLoading, DriveViewConfigProvider, createDriveViewConfig, useDriveSelectionContext, useDriveViewConfig, useDriveViewContext } from "@tulip-systems/drive/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FloatingCommandMenu } from "@tulip-systems/commands/client";
+import { useMemo } from "react";
+//#region src/root/components/view.client.tsx
+function LocalDriveViewProvider({ queryData, columns = localDriveColumns, strategy, commands, columnVisibility, sorting, children, ...props }) {
+	const { meta } = useLocalDriveContext();
+	const selectionContext = useDriveSelectionContext();
+	const config = createDriveViewConfig({
+		queryData,
+		columns,
+		strategy,
+		commands,
+		meta,
+		columnVisibility,
+		selection: selectionContext?.selection,
+		sorting
+	});
+	return /* @__PURE__ */ jsx(DriveViewConfigProvider, {
+		config,
+		children: /* @__PURE__ */ jsx(TableLayout, {
+			...props,
+			children
+		})
+	});
+}
+function LocalDriveView() {
+	const { view } = useDriveViewContext();
+	if (view === "grid") return /* @__PURE__ */ jsx(LocalDriveGrid, {});
+	if (view === "list") return /* @__PURE__ */ jsx(LocalDriveList, {});
+	return null;
+}
+function LocalDriveGrid(props) {
+	const { queryData, strategy, commands, selection, meta } = useDriveViewConfig();
+	const { optimistic } = useLocalDriveUploadZone();
+	const { rowCount, paginationState } = strategy;
+	const { isFetching, isFetchingNextPage, fetchNextPage } = strategy.meta;
+	const hasNextPage = rowCount == null ? false : queryData.length < rowCount;
+	const selectedData = useMemo(() => queryData.filter((node) => selection?.rowSelection?.[node.id] === true), [queryData, selection?.rowSelection]);
+	return /* @__PURE__ */ jsxs(DriveGrid, {
+		...props,
+		children: [
+			queryData.length > 0 ? queryData.filter((node) => !node.hidden).map((node) => /* @__PURE__ */ jsx(DriveGridCard, {
+				node,
+				commands: commands?.node,
+				imageLoader: localDriveImageLoader
+			}, node.id)) : /* @__PURE__ */ jsx(DriveGridEmpty, { title: "Geen resultaten gevonden" }),
+			isFetchingNextPage && Array.from({ length: paginationState?.pageSize ?? 0 }).map((_, index) => /* @__PURE__ */ jsx(DriveGridCardSkeleton, {}, index)),
+			/* @__PURE__ */ jsx(DriveGridBottombar, {
+				hasNextPage,
+				fetchNextPage,
+				isFetching,
+				isFetchingNextPage
+			}),
+			commands?.selectedNodes && commands?.selectedNodes.length > 0 && /* @__PURE__ */ jsx(FloatingCommandMenu, {
+				data: selectedData,
+				commands: commands.selectedNodes,
+				meta,
+				state: selectedData.length > 0 ? "open" : "closed",
+				onSuccess: () => {
+					selection?.setRowSelection?.({});
+					optimistic?.invalidate?.();
+				}
+			})
+		]
+	});
+}
+function LocalDriveList(props) {
+	return /* @__PURE__ */ jsx(DataTable, { ...props });
+}
+function LocalDriveViewLoading({ ...props }) {
+	const { view } = useDriveViewContext();
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		children: [view === "grid" && /* @__PURE__ */ jsx(DriveGridLoading, { ...props }), view === "list" && /* @__PURE__ */ jsx(TableSkeleton, { ...props })]
+	});
+}
+//#endregion
+export { LocalDriveView, LocalDriveViewLoading, LocalDriveViewProvider };

package/dist/root/config/columns-data.d.mts

@@ -0,0 +1,6 @@
+import { LocalDriveNodeWithAsset } from "../lib/validators.mjs";
+import { TableColumnDef } from "@tulip-systems/data-tables";
+//#region src/root/config/columns-data.d.ts
+declare const localDriveColumns: TableColumnDef<LocalDriveNodeWithAsset>[];
+//#endregion
+export { localDriveColumns };

package/dist/root/config/columns-data.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { TableColumnHeader } from "@tulip-systems/data-tables";
+import { TableTextCell, createTableSelectCell } from "@tulip-systems/data-tables/client";
+import { nodeSubtypeConfig, nodeSubtypeVariants } from "@tulip-systems/drive";
+import { useDriveNavigation } from "@tulip-systems/drive/client";
+import { findStatus } from "@tulip-systems/ui/status";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@tulip-systems/ui/tooltip";
+import { FolderIcon } from "lucide-react";
+import Link from "next/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/root/config/columns-data.tsx
+const localDriveColumns = [
+	createTableSelectCell(),
+	{
+		id: "icon",
+		accessorKey: "icon",
+		header: () => null,
+		cell: ({ row }) => {
+			if (row.original.type === "file") {
+				const subtype = findStatus(nodeSubtypeConfig, row.original.subtype);
+				const Icon = subtype?.icon;
+				if (!subtype || !Icon) return null;
+				return /* @__PURE__ */ jsx(TableTextCell, {
+					className: "w-4",
+					children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Icon, { className: nodeSubtypeVariants({
+						status: row.original.subtype,
+						className: "size-4"
+					}) }) }), /* @__PURE__ */ jsx(TooltipContent, { children: subtype.label })] })
+				});
+			}
+			if (row.original.type === "folder") return /* @__PURE__ */ jsx(TableTextCell, {
+				className: "w-4",
+				children: /* @__PURE__ */ jsx(FolderIcon, { className: "w-4 min-w-4" })
+			});
+			return null;
+		},
+		enableSorting: false
+	},
+	{
+		id: "name",
+		accessorKey: "name",
+		header: ({ column }) => /* @__PURE__ */ jsx(TableColumnHeader, {
+			column,
+			title: "Naam"
+		}),
+		cell: ({ row }) => /* @__PURE__ */ jsx(LocalDriveNameCell, { row })
+	}
+];
+function LocalDriveNameCell({ row }) {
+	const navigation = useDriveNavigation();
+	return /* @__PURE__ */ jsx(TableTextCell, {
+		className: "w-full min-w-64",
+		children: /* @__PURE__ */ jsx(Link, {
+			href: row.original.type === "file" ? row.original.links.view ?? "#" : navigation.getFolderHref(row.original.id),
+			className: "truncate hover:underline",
+			target: row.original.type === "file" ? "_blank" : "_self",
+			children: row.getValue("name")
+		})
+	});
+}
+//#endregion
+export { localDriveColumns };