@btst/stack 2.8.1 → 2.9.0

package/src/plugins/media/client/components/media-picker/folder-tree.tsx

@@ -0,0 +1,188 @@
+import { useState } from "react";
+import {
+	useFolders,
+	useCreateFolder,
+	useDeleteFolder,
+} from "../../hooks/use-media";
+import type { SerializedFolder } from "../../../types";
+import { FolderPlus } from "lucide-react";
+import { Input } from "@workspace/ui/components/input";
+import { Check, Folder, Trash2, ChevronRight, FolderOpen } from "lucide-react";
+import { cn } from "@workspace/ui/lib/utils";
+
+export function FolderTree({
+	selectedId,
+	onSelect,
+}: {
+	selectedId: string | null;
+	onSelect: (id: string | null) => void;
+}) {
+	const { data: rootFoldersRaw = [] } = useFolders(null);
+	const rootFolders =
+		rootFoldersRaw as import("../../../types").SerializedFolder[];
+	const [newFolderName, setNewFolderName] = useState("");
+	const [isCreating, setIsCreating] = useState(false);
+	const { mutateAsync: createFolder } = useCreateFolder();
+	const { mutateAsync: deleteFolder } = useDeleteFolder();
+
+	const handleCreateFolder = async () => {
+		const name = newFolderName.trim();
+		if (!name) return;
+		try {
+			await createFolder({ name, parentId: selectedId ?? undefined });
+			setNewFolderName("");
+			setIsCreating(false);
+		} catch (err) {
+			console.error("[btst/media] Failed to create folder", err);
+		}
+	};
+
+	return (
+		<div className="flex h-full min-h-0 flex-col">
+			<div className="flex items-center justify-between px-2 py-2">
+				<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+					Folders
+				</span>
+				<button
+					type="button"
+					title="New folder"
+					onClick={() => setIsCreating((v) => !v)}
+					className="rounded p-0.5 hover:bg-muted"
+				>
+					<FolderPlus className="size-3.5 text-muted-foreground" />
+				</button>
+			</div>
+
+			{isCreating && (
+				<div className="flex gap-1 px-2 pb-1">
+					<Input
+						autoFocus
+						value={newFolderName}
+						onChange={(e) => setNewFolderName(e.target.value)}
+						placeholder="Folder name"
+						className="h-6 text-xs"
+						onKeyDown={(e) => {
+							if (e.key === "Enter") void handleCreateFolder();
+							if (e.key === "Escape") setIsCreating(false);
+						}}
+					/>
+					<button
+						type="button"
+						onClick={handleCreateFolder}
+						className="rounded px-1 py-0.5 text-xs hover:bg-muted"
+					>
+						<Check className="size-3" />
+					</button>
+				</div>
+			)}
+
+			<div className="flex-1 overflow-y-auto overscroll-contain">
+				{/* All assets (root) */}
+				<button
+					type="button"
+					onClick={() => onSelect(null)}
+					className={cn(
+						"flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-sm hover:bg-muted",
+						selectedId === null && "bg-muted font-medium",
+					)}
+				>
+					<span className="size-3" />
+					<Folder className="size-3.5 shrink-0 text-muted-foreground" />
+					<span className="truncate">All files</span>
+				</button>
+
+				{rootFolders.map((folder) => (
+					<FolderTreeItem
+						key={folder.id}
+						folder={folder}
+						selectedId={selectedId}
+						onSelect={onSelect}
+					/>
+				))}
+			</div>
+
+			{selectedId && (
+				<div className="border-t px-2 py-1">
+					<button
+						type="button"
+						onClick={async () => {
+							if (
+								confirm("Delete this folder? Assets inside will be unaffected.")
+							) {
+								try {
+									await deleteFolder(selectedId);
+									onSelect(null);
+								} catch (err) {
+									console.error("[btst/media] Failed to delete folder", err);
+								}
+							}
+						}}
+						className="flex items-center gap-1 text-xs text-destructive hover:underline"
+					>
+						<Trash2 className="size-3" />
+						Delete folder
+					</button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export function FolderTreeItem({
+	folder,
+	selectedId,
+	onSelect,
+	depth = 0,
+}: {
+	folder: SerializedFolder;
+	selectedId: string | null;
+	onSelect: (id: string | null) => void;
+	depth?: number;
+}) {
+	const [expanded, setExpanded] = useState(false);
+	const { data: children = [] } = useFolders(folder.id);
+
+	return (
+		<div>
+			<button
+				type="button"
+				onClick={() => {
+					onSelect(folder.id);
+					setExpanded((v) => !v);
+				}}
+				className={cn(
+					"flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-sm hover:bg-muted",
+					selectedId === folder.id && "bg-muted font-medium",
+				)}
+				style={{ paddingLeft: `${8 + depth * 12}px` }}
+			>
+				{children.length > 0 ? (
+					<ChevronRight
+						className={cn(
+							"size-3 shrink-0 transition-transform",
+							expanded && "rotate-90",
+						)}
+					/>
+				) : (
+					<span className="size-3" />
+				)}
+				{expanded ? (
+					<FolderOpen className="size-3.5 shrink-0 text-amber-500" />
+				) : (
+					<Folder className="size-3.5 shrink-0 text-amber-500" />
+				)}
+				<span className="truncate">{folder.name}</span>
+			</button>
+			{expanded &&
+				children.map((child) => (
+					<FolderTreeItem
+						key={child.id}
+						folder={child}
+						selectedId={selectedId}
+						onSelect={onSelect}
+						depth={depth + 1}
+					/>
+				))}
+		</div>
+	);
+}

package/src/plugins/media/client/components/media-picker/index.tsx

@@ -0,0 +1,347 @@
+"use client";
+import { useState, type ReactNode } from "react";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@workspace/ui/components/popover";
+import { Button } from "@workspace/ui/components/button";
+import {
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@workspace/ui/components/tabs";
+import { Image, Upload, Link, X } from "lucide-react";
+import type { SerializedAsset } from "../../../types";
+import { FolderTree } from "./folder-tree";
+import { BrowseTab } from "./browse-tab";
+import { UploadTab } from "./upload-tab";
+import { UrlTab } from "./url-tab";
+import type { MediaPluginOverrides } from "../../overrides";
+import { usePluginOverrides } from "@btst/stack/context";
+
+export interface MediaPickerProps {
+	/**
+	 * Element that triggers opening the picker. Required.
+	 */
+	trigger: ReactNode;
+	/**
+	 * Called when the user confirms their selection.
+	 */
+	onSelect: (assets: SerializedAsset[]) => void;
+	/**
+	 * Allow multiple selection.
+	 * @default false
+	 */
+	multiple?: boolean;
+	/**
+	 * Filter displayed assets by MIME type prefix (e.g. "image/").
+	 */
+	accept?: string[];
+}
+
+/**
+ * MediaPicker — a Popover-based media browser.
+ *
+ * Reads API config from the `media` plugin overrides context (set up in StackProvider).
+ * Must be rendered inside a `StackProvider` that includes media overrides.
+ *
+ * @example
+ * ```tsx
+ * <MediaPicker
+ *   trigger={<Button size="sm">Browse media</Button>}
+ *   accept={["image/*"]}
+ *   onSelect={(assets) => form.setValue("image", assets[0].url)}
+ * />
+ * ```
+ */
+export function MediaPicker({
+	trigger,
+	onSelect,
+	multiple = false,
+	accept,
+}: MediaPickerProps) {
+	const [open, setOpen] = useState(false);
+	const [selectedFolder, setSelectedFolder] = useState<string | null>(null);
+	const [selectedAssets, setSelectedAssets] = useState<SerializedAsset[]>([]);
+	const [activeTab, setActiveTab] = useState<"browse" | "upload" | "url">(
+		"browse",
+	);
+
+	const handleClose = () => {
+		setOpen(false);
+		setSelectedAssets([]);
+	};
+
+	const handleConfirm = () => {
+		if (selectedAssets.length === 0) return;
+		// Copy selection before clearing; defer onSelect so the popover has time
+		// to start its close animation before any parent state updates that might
+		// unmount this component (e.g. CMSFileUpload hiding when previewUrl is set).
+		const toSelect = [...selectedAssets];
+		handleClose();
+		setTimeout(() => onSelect(toSelect), 0);
+	};
+
+	const handleToggleAsset = (asset: SerializedAsset) => {
+		if (multiple) {
+			setSelectedAssets((prev) =>
+				prev.some((a) => a.id === asset.id)
+					? prev.filter((a) => a.id !== asset.id)
+					: [...prev, asset],
+			);
+		} else {
+			setSelectedAssets([asset]);
+		}
+	};
+
+	const handleUploaded = (asset: SerializedAsset) => {
+		if (multiple) {
+			setSelectedAssets((prev) => [...prev, asset]);
+		} else {
+			setSelectedAssets([asset]);
+			setActiveTab("browse");
+		}
+	};
+
+	const handleUrlRegistered = (asset: SerializedAsset) => {
+		// Close the popover first, then notify parent — same deferral as handleConfirm.
+		const toSelect = asset;
+		handleClose();
+		setTimeout(() => onSelect([toSelect]), 0);
+	};
+
+	return (
+		<Popover
+			open={open}
+			onOpenChange={(v) => {
+				if (!v) handleClose();
+				else setOpen(true);
+			}}
+		>
+			<PopoverTrigger asChild>{trigger}</PopoverTrigger>
+			<PopoverContent
+				className="w-[calc(100vw-1rem)] max-w-[calc(100vw-1rem)] overflow-hidden p-0 sm:w-[820px]"
+				align="start"
+				sideOffset={8}
+				collisionPadding={8}
+				style={{
+					maxWidth: "min(820px, calc(100vw - 1rem))",
+					height: "min(640px, calc(100dvh - 2rem))",
+				}}
+			>
+				<div className="flex h-full flex-col overflow-hidden rounded-md">
+					{/* Header */}
+					<div className="flex items-center justify-between border-b px-3 py-2">
+						<span className="text-sm font-semibold">Media Library</span>
+						<button
+							type="button"
+							onClick={handleClose}
+							className="rounded p-0.5 hover:bg-muted"
+						>
+							<X className="size-4" />
+						</button>
+					</div>
+
+					{/* Body */}
+					<div className="flex min-h-0 flex-1 flex-col md:flex-row">
+						{/* Folder sidebar */}
+						<div className="max-h-40 w-full shrink-0 overflow-hidden border-b bg-muted/20 md:max-h-none md:w-44 md:border-b-0 md:border-r">
+							<FolderTree
+								selectedId={selectedFolder}
+								onSelect={setSelectedFolder}
+							/>
+						</div>
+
+						{/* Main panel */}
+						<div className="flex min-w-0 flex-1 flex-col p-3 overflow-y-hidden">
+							<Tabs
+								value={activeTab}
+								onValueChange={(v) => setActiveTab(v as any)}
+								className="flex flex-1 flex-col min-h-0"
+							>
+								<TabsList className="grid h-auto w-full shrink-0 grid-cols-3 md:flex md:w-fit">
+									<TabsTrigger
+										value="browse"
+										className="h-8 px-2 text-xs md:h-6 md:px-3"
+									>
+										<Image className="mr-1 size-3" />
+										Browse
+									</TabsTrigger>
+									<TabsTrigger
+										value="upload"
+										className="h-8 px-2 text-xs md:h-6 md:px-3"
+									>
+										<Upload className="mr-1 size-3" />
+										Upload
+									</TabsTrigger>
+									<TabsTrigger
+										value="url"
+										className="h-8 px-2 text-xs md:h-6 md:px-3"
+									>
+										<Link className="mr-1 size-3" />
+										URL
+									</TabsTrigger>
+								</TabsList>
+
+								<div className="mt-2 min-h-0 flex-1">
+									<TabsContent
+										value="browse"
+										className="m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col"
+									>
+										<BrowseTab
+											folderId={selectedFolder}
+											selected={selectedAssets}
+											accept={accept}
+											onToggle={handleToggleAsset}
+										/>
+									</TabsContent>
+									<TabsContent
+										value="upload"
+										className="m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col"
+									>
+										<UploadTab
+											folderId={selectedFolder}
+											accept={accept}
+											onUploaded={handleUploaded}
+										/>
+									</TabsContent>
+									<TabsContent
+										value="url"
+										className="m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col"
+									>
+										<UrlTab
+											folderId={selectedFolder}
+											onRegistered={handleUrlRegistered}
+										/>
+									</TabsContent>
+								</div>
+							</Tabs>
+						</div>
+					</div>
+
+					{/* Footer */}
+					<div className="flex flex-col gap-2 border-t px-3 py-2 sm:flex-row sm:items-center sm:justify-between">
+						<span className="text-xs text-muted-foreground">
+							{selectedAssets.length > 0
+								? `${selectedAssets.length} selected`
+								: "Click a file to select it"}
+						</span>
+						<div className="flex w-full gap-2 sm:w-auto">
+							<Button
+								type="button"
+								variant="ghost"
+								size="sm"
+								onClick={handleClose}
+								className="flex-1 sm:flex-none"
+							>
+								Cancel
+							</Button>
+							<Button
+								type="button"
+								size="sm"
+								data-testid="media-select-button"
+								onClick={handleConfirm}
+								disabled={selectedAssets.length === 0}
+								className="flex-1 sm:flex-none"
+							>
+								{multiple
+									? `Select ${selectedAssets.length > 0 ? `(${selectedAssets.length})` : ""}`
+									: "Select"}
+							</Button>
+						</div>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+/**
+ * ImageInputField — displays an image preview with change/remove actions, or a
+ * "Browse Media" button that opens the full MediaPicker popover (Browse / Upload / URL tabs).
+ *
+ * Upload mode, folder selection, and multi-mode cloud support are all handled inside
+ * the MediaPicker's UploadTab — this component is purely a thin wrapper.
+ */
+export function ImageInputField({
+	value,
+	onChange,
+}: {
+	value: string;
+	onChange: (v: string) => void;
+}) {
+	const { Image: ImageComponent } = usePluginOverrides<
+		MediaPluginOverrides,
+		Partial<MediaPluginOverrides>
+	>("media", {});
+
+	if (value) {
+		return (
+			<div className="space-y-2">
+				{ImageComponent ? (
+					<ImageComponent
+						src={value}
+						alt="Featured image preview"
+						className="h-auto w-full max-w-xs rounded-md border object-cover"
+						width={400}
+						height={300}
+						data-testid="image-preview"
+					/>
+				) : (
+					<img
+						src={value}
+						alt="Featured image preview"
+						className="h-auto w-full max-w-xs rounded-md border object-cover"
+						data-testid="image-preview"
+					/>
+				)}
+				<div className="flex gap-2">
+					<MediaPicker
+						trigger={
+							<Button
+								variant="outline"
+								size="sm"
+								type="button"
+								data-testid="open-media-picker"
+							>
+								Change Image
+							</Button>
+						}
+						accept={["image/*"]}
+						onSelect={(assets) => onChange(assets[0]?.url ?? "")}
+					/>
+					<Button
+						type="button"
+						variant="destructive"
+						size="sm"
+						data-testid="remove-image-button"
+						onClick={() => onChange("")}
+					>
+						Remove
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-wrap gap-2 items-center">
+			<MediaPicker
+				trigger={
+					<Button
+						variant="outline"
+						size="sm"
+						type="button"
+						data-testid="open-media-picker"
+					>
+						Browse Media
+					</Button>
+				}
+				accept={["image/*"]}
+				onSelect={(assets) => onChange(assets[0]?.url ?? "")}
+			/>
+		</div>
+	);
+}

package/src/plugins/media/client/components/media-picker/upload-tab.tsx

@@ -0,0 +1,108 @@
+import { useState, useCallback, useRef } from "react";
+import { useUploadAsset } from "../../hooks/use-media";
+import type { SerializedAsset } from "../../../types";
+import { Button } from "@workspace/ui/components/button";
+import { Loader2, Upload } from "lucide-react";
+import { cn } from "@workspace/ui/lib/utils";
+import { matchesAccept } from "./utils";
+
+export function UploadTab({
+	folderId,
+	accept,
+	onUploaded,
+}: {
+	folderId: string | null;
+	accept?: string[];
+	onUploaded: (asset: SerializedAsset) => void;
+}) {
+	const [dragging, setDragging] = useState(false);
+	const [uploading, setUploading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const { mutateAsync: uploadAsset } = useUploadAsset();
+
+	const acceptAttr = accept?.join(",") ?? undefined;
+
+	const handleFiles = useCallback(
+		async (files: FileList | File[]) => {
+			const fileArr = Array.from(files);
+			if (fileArr.length === 0) return;
+			setError(null);
+			setUploading(true);
+			try {
+				for (const file of fileArr) {
+					if (accept && !matchesAccept(file.type, accept)) {
+						setError(`File type ${file.type} is not accepted.`);
+						continue;
+					}
+					const asset = await uploadAsset({
+						file,
+						folderId: folderId ?? undefined,
+					});
+					onUploaded(asset);
+				}
+			} catch (err) {
+				setError(err instanceof Error ? err.message : "Upload failed");
+			} finally {
+				setUploading(false);
+			}
+		},
+		[accept, folderId, uploadAsset, onUploaded],
+	);
+
+	return (
+		<div className="flex h-full flex-col gap-3">
+			<div
+				onDragOver={(e) => {
+					e.preventDefault();
+					setDragging(true);
+				}}
+				onDragLeave={() => setDragging(false)}
+				onDrop={(e) => {
+					e.preventDefault();
+					setDragging(false);
+					void handleFiles(e.dataTransfer.files);
+				}}
+				className={cn(
+					"flex flex-1 flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-4 py-6 text-center transition-colors sm:px-6",
+					dragging ? "border-ring bg-ring/5" : "border-muted-foreground/30",
+				)}
+			>
+				{uploading ? (
+					<>
+						<Loader2 className="size-8 animate-spin text-muted-foreground" />
+						<p className="text-sm text-muted-foreground">Uploading…</p>
+					</>
+				) : (
+					<>
+						<Upload className="size-8 text-muted-foreground" />
+						<div className="text-center">
+							<p className="text-sm font-medium">Drop files here</p>
+							<p className="text-xs text-muted-foreground">
+								or click to browse
+							</p>
+						</div>
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							onClick={() => fileInputRef.current?.click()}
+						>
+							Choose files
+						</Button>
+					</>
+				)}
+			</div>
+			{error && <p className="text-sm text-destructive">{error}</p>}
+			<input
+				ref={fileInputRef}
+				type="file"
+				accept={acceptAttr}
+				multiple
+				className="hidden"
+				data-testid="media-upload-input"
+				onChange={(e) => e.target.files && handleFiles(e.target.files)}
+			/>
+		</div>
+	);
+}

package/src/plugins/media/client/components/media-picker/url-tab.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { useRegisterAsset } from "../../hooks/use-media";
+import type { SerializedAsset } from "../../../types";
+import { Input } from "@workspace/ui/components/input";
+import { Button } from "@workspace/ui/components/button";
+import { Loader2, Check } from "lucide-react";
+
+export function UrlTab({
+	folderId,
+	onRegistered,
+}: {
+	folderId: string | null;
+	onRegistered: (asset: SerializedAsset) => void;
+}) {
+	const [url, setUrl] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const { mutateAsync: registerAsset, isPending } = useRegisterAsset();
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setError(null);
+		const trimmed = url.trim();
+		if (!trimmed) return;
+		try {
+			const filename = trimmed.split("/").pop() ?? "asset";
+			const asset = await registerAsset({
+				url: trimmed,
+				filename,
+				folderId: folderId ?? undefined,
+			});
+			setUrl("");
+			onRegistered(asset);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to register URL");
+		}
+	};
+
+	return (
+		<div className="flex h-full flex-col gap-3 pt-2">
+			<p className="text-sm text-muted-foreground">
+				Paste a public URL to register it as an asset without uploading a file.
+			</p>
+			<form onSubmit={handleSubmit} className="flex flex-col gap-2">
+				<div className="flex flex-col gap-2 sm:flex-row">
+					<Input
+						type="url"
+						value={url}
+						onChange={(e) => setUrl(e.target.value)}
+						placeholder="https://example.com/image.png"
+						className="flex-1"
+						data-testid="media-url-input"
+						autoFocus
+					/>
+					<Button
+						type="submit"
+						size="sm"
+						disabled={isPending || !url.trim()}
+						className="w-full sm:w-auto"
+					>
+						{isPending ? (
+							<Loader2 className="mr-1 size-4 animate-spin" />
+						) : (
+							<Check className="mr-1 size-4" />
+						)}
+						Use URL
+					</Button>
+				</div>
+				{error && <p className="text-sm text-destructive">{error}</p>}
+			</form>
+		</div>
+	);
+}