@parallelworks/ui 0.19.0 → 0.19.1

package/dist/file-explorer/helpers.js

@@ -0,0 +1,537 @@
+import { useNotify, useProvisionCorsRules, useStrings } from "../components/Provider.js";
+import { AlertIcon, CustomizeIcon, DiskIcon, DocumentIcon, FileIcon, FileTextIcon, FolderIcon, ImageIcon, PdfIcon, RefreshIcon, ShareIcon, SpreadsheetIcon, UserIcon, VideoIcon, ZipIcon } from "../icons.js";
+import { positionKeys } from "../components/keys.js";
+import Callout from "../components/Callout.js";
+import { ListSkeleton } from "../list/ListTable.js";
+import { formatFileSize, getFileExtension } from "./lib/utils.js";
+import { CorsError } from "./lib/errors.js";
+import cx from "classnames";
+import { useEffect, useState, useTransition } from "react";
+import { useLocalStorage } from "usehooks-ts";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Skeleton from "react-loading-skeleton";
+//#region src/file-explorer/helpers.tsx
+var SIDEBAR_WIDTH_STORAGE_KEY = "fileExplorerSidebarWidth";
+var contentTypeIconMap = [
+	{
+		pattern: /^image\//,
+		icon: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" })
+	},
+	{
+		pattern: /^video\//,
+		icon: /* @__PURE__ */ jsx(VideoIcon, { className: "h-4 w-4 text-purple-500" })
+	},
+	{
+		pattern: /^application\/pdf$/,
+		icon: /* @__PURE__ */ jsx(PdfIcon, { className: "h-4 w-4 text-red-500" })
+	},
+	{
+		pattern: /(spreadsheet|csv|excel)/,
+		icon: /* @__PURE__ */ jsx(SpreadsheetIcon, { className: "h-4 w-4 text-green-500" })
+	},
+	{
+		pattern: /(document|word)/,
+		icon: /* @__PURE__ */ jsx(DocumentIcon, { className: "h-4 w-4 text-blue-400" })
+	},
+	{
+		pattern: /(javascript|json|css|html)/,
+		icon: /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 text-yellow-500" })
+	},
+	{
+		pattern: /(zip|gzip|tar)/,
+		icon: /* @__PURE__ */ jsx(ZipIcon, { className: "h-4 w-4 text-purple-600" })
+	}
+];
+var extensionIconMap = [
+	{
+		pattern: /^(jpe?g|png|gif|svg|webp)$/i,
+		icon: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" })
+	},
+	{
+		pattern: /^(mp4|mov|avi|mkv)$/i,
+		icon: /* @__PURE__ */ jsx(VideoIcon, { className: "h-4 w-4 text-purple-500" })
+	},
+	{
+		pattern: /^pdf$/i,
+		icon: /* @__PURE__ */ jsx(PdfIcon, { className: "h-4 w-4 text-red-500" })
+	},
+	{
+		pattern: /^(xlsx?|csv|ods)$/i,
+		icon: /* @__PURE__ */ jsx(SpreadsheetIcon, { className: "h-4 w-4 text-green-500" })
+	},
+	{
+		pattern: /^(docx?|odt)$/i,
+		icon: /* @__PURE__ */ jsx(DocumentIcon, { className: "h-4 w-4 text-blue-400" })
+	},
+	{
+		pattern: /^(js|ts|json|css|html|md|txt)$/i,
+		icon: /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 text-yellow-500" })
+	},
+	{
+		pattern: /^(zip|gz|gzip|tar|rar)$/i,
+		icon: /* @__PURE__ */ jsx(ZipIcon, { className: "h-4 w-4 text-purple-600" })
+	}
+];
+function getNodeIcon(node, storageIconUrl, storageIconAlt = "Storage icon") {
+	const isUserNode = !node.storageId;
+	const isStorageNode = node.root;
+	if (isUserNode) return /* @__PURE__ */ jsx(UserIcon, { className: "h-3 w-3 mr-2" });
+	if (isStorageNode && node.storageType === "workspace") return /* @__PURE__ */ jsx(DiskIcon, { className: "h-4 w-4 mr-2" });
+	if (isStorageNode && node.storageNodeIcon) {
+		const storageNodeIcon = node.storageNodeIcon;
+		const fallbackSrc = storageIconUrl?.({ type: storageNodeIcon });
+		const iconSrc = node.storageImageUrl || fallbackSrc;
+		if (!iconSrc) return /* @__PURE__ */ jsx(DiskIcon, { className: "h-4 w-4 mr-2" });
+		return /* @__PURE__ */ jsx("img", {
+			className: "h-4 w-4 mr-2",
+			src: iconSrc,
+			alt: storageIconAlt,
+			onError: (e) => {
+				if (fallbackSrc) e.currentTarget.src = fallbackSrc;
+			}
+		});
+	}
+	if (!isStorageNode && !isUserNode && node.type === "directory") return null;
+	if (node.contentType) {
+		for (const { pattern, icon } of contentTypeIconMap) if (pattern.test(node.contentType)) return icon;
+	}
+	const ext = getFileExtension(node.name);
+	if (ext) {
+		for (const { pattern, icon } of extensionIconMap) if (pattern.test(ext)) return icon;
+	}
+	return /* @__PURE__ */ jsx(FileIcon, { className: "h-4 w-4 theme-muted-text" });
+}
+function renderUploadNodes(uploadNodes) {
+	const sorted = [...uploadNodes].sort((a, b) => a.relativePath.localeCompare(b.relativePath));
+	let lastFolders = [];
+	return sorted.map((node) => {
+		const parts = node.relativePath.split("/");
+		const folders = parts.slice(0, -1);
+		const fileName = parts[parts.length - 1];
+		let common = 0;
+		while (common < folders.length && common < lastFolders.length && folders[common] === lastFolders[common]) common++;
+		const folderElements = folders.slice(common).map((folder, i) => /* @__PURE__ */ jsxs("div", {
+			style: { marginLeft: (common + i) * 16 },
+			children: [/* @__PURE__ */ jsx(FolderIcon, { className: "inline h-3 w-3 mr-1" }), /* @__PURE__ */ jsxs("span", {
+				className: "font-semibold",
+				children: [folder, "/"]
+			})]
+		}, folders.slice(0, common + i + 1).join("/")));
+		lastFolders = folders;
+		return /* @__PURE__ */ jsxs("div", { children: [folderElements, /* @__PURE__ */ jsxs("div", {
+			style: { marginLeft: folders.length * 16 },
+			children: [
+				/* @__PURE__ */ jsx("span", { className: "inline-block w-3" }),
+				fileName,
+				node.file && /* @__PURE__ */ jsxs("span", {
+					className: "ml-2 text-xs theme-muted-text",
+					children: [
+						"(",
+						formatFileSize(node.file.size),
+						")"
+					]
+				})
+			]
+		})] }, node.relativePath);
+	});
+}
+function NoFileSelectedPreview() {
+	const t = useStrings().fileExplorer;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 flex items-center justify-center p-8",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center max-w-sm text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "inline-flex items-center justify-center w-14 h-14 rounded-full theme-muted-panel mb-4",
+					children: /* @__PURE__ */ jsx(DiskIcon, { className: "h-6 w-6 theme-muted-text" })
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-base font-semibold mb-1",
+					children: t.empty.nothingSelected
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm theme-muted-text",
+					children: t.empty.nothingSelectedHint
+				})
+			]
+		})
+	});
+}
+/** Shown instead of a skeleton that has nothing left to wait for. */
+function NotFoundPreview({ path, onRetry }) {
+	const t = useStrings().fileExplorer.notFound;
+	const name = path.replace(/\/$/, "").split("/").pop() || path;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 flex items-center justify-center p-8",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center max-w-sm text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "inline-flex items-center justify-center w-14 h-14 rounded-full theme-muted-panel mb-4",
+					children: /* @__PURE__ */ jsx(DiskIcon, { className: "h-6 w-6 theme-muted-text" })
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-base font-semibold mb-1",
+					children: t.title(name)
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm theme-muted-text mb-4",
+					children: t.description
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "btn btn-info gap-2",
+					onClick: onRetry,
+					children: [/* @__PURE__ */ jsx(RefreshIcon, { className: "h-4 w-4" }), t.retry]
+				})
+			]
+		})
+	});
+}
+function CorsIssuePreview({ selectedStorage, onRefresh }) {
+	const t = useStrings().fileExplorer.cors;
+	const messages = useStrings().fileExplorer.messages;
+	const notify = useNotify();
+	const provisionCorsRules = useProvisionCorsRules();
+	const [isPending, startTransition] = useTransition();
+	const handleAddCorsRules = () => {
+		if (!provisionCorsRules) return;
+		startTransition(async () => {
+			await addCorsRules({
+				provision: provisionCorsRules,
+				notify,
+				strings: messages,
+				csp: selectedStorage?.csp,
+				type: selectedStorage?.type,
+				username: selectedStorage?.user,
+				storageName: selectedStorage?.displayName,
+				onRefresh
+			});
+		});
+	};
+	if (isPending) return /* @__PURE__ */ jsx(CorsPropagatingPreview, {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center max-w-lg mx-auto",
+		children: [/* @__PURE__ */ jsxs(Callout, {
+			className: "text-left",
+			type: "info",
+			children: [
+				/* @__PURE__ */ jsx("h4", {
+					className: "font-semibold mb-2",
+					children: t.explanation.title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mb-2",
+					children: t.explanation.description
+				}),
+				/* @__PURE__ */ jsx("p", { children: t.explanation.action }),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-sm italic",
+					children: t.explanation.note
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-3 justify-center",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "btn btn-info cursor-pointer flex items-center",
+				onClick: onRefresh ? () => onRefresh() : void 0,
+				children: [/* @__PURE__ */ jsx(RefreshIcon, { className: "h-4 w-4 mr-2" }), t.actions.retry]
+			}), provisionCorsRules && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "btn btn-info cursor-pointer flex items-center",
+				onClick: handleAddCorsRules,
+				children: [/* @__PURE__ */ jsx(CustomizeIcon, { className: "h-4 w-4 mr-2" }), /* @__PURE__ */ jsx("span", { children: t.actions.addRules })]
+			})]
+		})]
+	});
+}
+var CORS_PROPAGATION_BUDGET_MS = 6e4;
+function CorsPropagatingPreview() {
+	const t = useStrings().fileExplorer.cors.propagating;
+	const [elapsedMs, setElapsedMs] = useState(0);
+	useEffect(() => {
+		const start = Date.now();
+		setElapsedMs(0);
+		const id = setInterval(() => {
+			setElapsedMs(Date.now() - start);
+		}, 500);
+		return () => clearInterval(id);
+	}, []);
+	const totalSeconds = Math.floor(elapsedMs / 1e3);
+	const mm = String(Math.floor(totalSeconds / 60)).padStart(2, "0");
+	const ss = String(totalSeconds % 60).padStart(2, "0");
+	const progressPct = Math.min(99, elapsedMs / CORS_PROPAGATION_BUDGET_MS * 100);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-live": "polite",
+		className: "flex flex-col items-center justify-center max-w-md mx-auto px-6 py-8 animate-[fadeInUp_400ms_ease-out]",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative w-28 h-28 mb-6 flex items-center justify-center",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "absolute inline-flex h-full w-full rounded-full bg-blue-400/30 animate-ping",
+						style: { animationDuration: "2.4s" }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "absolute inline-flex h-2/3 w-2/3 rounded-full bg-blue-500/40 animate-ping",
+						style: {
+							animationDuration: "2.4s",
+							animationDelay: "0.6s"
+						}
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "absolute inline-flex h-1/3 w-1/3 rounded-full bg-blue-500/60 animate-ping",
+						style: {
+							animationDuration: "2.4s",
+							animationDelay: "1.2s"
+						}
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "relative inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 shadow-[0_0_24px_rgba(59,130,246,0.55)]",
+						children: /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-2 w-2 rounded-full bg-white animate-pulse" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-lg font-semibold mb-1 tracking-tight",
+				children: t.title
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "theme-muted-text text-sm text-center mb-6 max-w-sm",
+				children: t.description
+			}),
+			/* @__PURE__ */ jsxs("ol", {
+				className: "flex items-center gap-2 mb-6",
+				children: [
+					/* @__PURE__ */ jsx(PropagationStage, {
+						status: "done",
+						label: t.stages.submitted
+					}),
+					/* @__PURE__ */ jsx(PropagationConnector, { active: true }),
+					/* @__PURE__ */ jsx(PropagationStage, {
+						status: "active",
+						label: t.stages.propagating
+					}),
+					/* @__PURE__ */ jsx(PropagationConnector, { active: false }),
+					/* @__PURE__ */ jsx(PropagationStage, {
+						status: "pending",
+						label: t.stages.verified
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "w-full max-w-xs mb-3",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "h-1 rounded-full theme-muted-panel overflow-hidden",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "h-full bg-blue-500 transition-[width] duration-500 ease-linear",
+						style: { width: `${progressPct}%` }
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 theme-muted-text text-xs font-mono tabular-nums",
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: [
+						mm,
+						":",
+						ss
+					] }),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "opacity-40",
+						children: "·"
+					}),
+					/* @__PURE__ */ jsx("span", { children: t.telemetry.probing })
+				]
+			})
+		]
+	});
+}
+function PropagationStage({ status, label }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex flex-col items-center gap-1.5",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cx("relative flex items-center justify-center w-6 h-6 rounded-full border transition-colors", status === "done" && "bg-green-500 border-green-500 text-white", status === "active" && "border-blue-500", status === "pending" && "theme-border"),
+			children: [
+				status === "done" && /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 16 16",
+					className: "h-3 w-3",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("polyline", { points: "3.5 8.5 6.5 11.5 12.5 5" })
+				}),
+				status === "active" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400/60" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-blue-500" })] }),
+				status === "pending" && /* @__PURE__ */ jsx("span", { className: "inline-flex h-1.5 w-1.5 rounded-full theme-muted-text opacity-60" })
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: cx("text-[11px] uppercase tracking-wider", status === "pending" ? "theme-muted-text opacity-60" : "theme-text"),
+			children: label
+		})]
+	});
+}
+function PropagationConnector({ active }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("h-px w-8 -mt-5 transition-colors", active ? "bg-blue-500" : "theme-border border-t")
+	});
+}
+function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionIssueMessage = null, className, canWrite = true }) {
+	const t = useStrings().fileExplorer;
+	if (error instanceof CorsError) return /* @__PURE__ */ jsx("div", {
+		className: cx("flex-1 flex items-center justify-center w-full text-center", className),
+		children: /* @__PURE__ */ jsx(CorsIssuePreview, {
+			selectedStorage,
+			onRefresh
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex-1 flex items-center justify-center w-full text-center", className),
+		children: !connectionIssueMessage ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center max-w-sm p-8",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "inline-flex items-center justify-center w-14 h-14 rounded-full theme-muted-panel mb-4",
+					children: /* @__PURE__ */ jsx(FileIcon, { className: "h-6 w-6 theme-muted-text" })
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-base font-semibold mb-1",
+					children: t.empty.folderEmpty
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm theme-muted-text",
+					children: canWrite ? t.empty.dropHint : t.empty.readOnlyHint
+				})
+			]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center max-w-md p-8",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "inline-flex items-center justify-center w-14 h-14 rounded-full bg-amber-500/10 mb-4",
+					children: /* @__PURE__ */ jsx(AlertIcon, { className: "h-6 w-6 text-amber-500" })
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-base font-semibold mb-1",
+					children: t.empty.connectionIssue
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm theme-muted-text mb-4",
+					children: connectionIssueMessage
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "btn btn-info cursor-pointer flex items-center gap-2",
+					onClick: onRefresh ? () => onRefresh() : void 0,
+					children: [/* @__PURE__ */ jsx(RefreshIcon, { className: "h-4 w-4" }), t.empty.tryAgain]
+				})
+			]
+		})
+	});
+}
+function SkeletonPreview() {
+	const [sidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_STORAGE_KEY, 300);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full h-full flex",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "h-full shrink-0",
+			style: { width: `${sidebarWidth}px` },
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "h-full flex flex-col border-r theme-border bg-(--theme-panel-bg)/60",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-end h-10 px-3 shrink-0 border-b theme-border",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-x-0.5",
+						children: [/* @__PURE__ */ jsx("div", { className: "h-7 w-7" }), /* @__PURE__ */ jsx("div", { className: "h-7 w-7" })]
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "overflow-auto flex-1 px-2 py-2 space-y-1.5",
+					children: positionKeys(6, "skeleton").map((key) => /* @__PURE__ */ jsx(Skeleton, { height: 14 }, key))
+				})]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "h-full flex flex-col flex-1 min-w-0",
+			children: [/* @__PURE__ */ jsx("div", { className: "h-12 shrink-0 border-b theme-border" }), /* @__PURE__ */ jsx(ListSkeleton, {})]
+		})]
+	});
+}
+function DragDropZone({ onDropFiles, children, className = "" }) {
+	const [isDragging, setIsDragging] = useState(false);
+	return /* @__PURE__ */ jsx("div", {
+		role: "none",
+		className: cx("transition-[box-shadow,background-color] duration-150", className, isDragging && "ring-1 ring-(--theme-link) ring-inset bg-(--theme-link)/5"),
+		onDragOver: (e) => {
+			e.preventDefault();
+			if (onDropFiles) setIsDragging(true);
+		},
+		onDragLeave: () => setIsDragging(false),
+		onDrop: (e) => {
+			e.preventDefault();
+			setIsDragging(false);
+			if (!onDropFiles) return;
+			onDropFiles(e.dataTransfer.items.length ? e.dataTransfer.items : e.dataTransfer.files);
+		},
+		children
+	});
+}
+function ShareFileButton({ node, onShare }) {
+	const t = useStrings().fileExplorer;
+	const [isPending, startTransition] = useTransition();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": t.preview.shareFile,
+		className: "btn btn-info cursor-pointer flex items-center justify-between",
+		onClick: () => {
+			startTransition(async () => {
+				await onShare(node);
+			});
+		},
+		disabled: isPending,
+		children: [/* @__PURE__ */ jsx(ShareIcon, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+			className: "hidden md:inline",
+			children: t.empty.shareThisFile
+		})]
+	});
+}
+async function addCorsRules({ provision, notify, strings, csp, type, username, storageName, onRefresh }) {
+	if (!storageName || !username || !csp) {
+		notify.error(strings.corsNoStorage);
+		return;
+	}
+	const res = await provision({
+		csp,
+		type,
+		username,
+		storageName
+	});
+	if (res.error) {
+		notify.error(res.error);
+		return;
+	}
+	if (!onRefresh) {
+		notify.success(strings.corsAdded);
+		return;
+	}
+	const pollBudgetMs = 9e4;
+	const pollIntervalMs = 3e3;
+	const deadline = Date.now() + pollBudgetMs;
+	await new Promise((resolve) => setTimeout(resolve, pollIntervalMs));
+	while (Date.now() < deadline) {
+		const result = await onRefresh({ silent: true });
+		if (!result || !result.corsError) {
+			await onRefresh();
+			notify.success(strings.corsAdded);
+			return;
+		}
+		await new Promise((resolve) => setTimeout(resolve, pollIntervalMs));
+	}
+	notify.warning(strings.corsPropagating);
+}
+//#endregion
+export { CorsIssuePreview, DragDropZone, NoDataAvailablePreview, NoFileSelectedPreview, NotFoundPreview, SIDEBAR_WIDTH_STORAGE_KEY, ShareFileButton, SkeletonPreview, getNodeIcon, renderUploadNodes };