@btst/stack 2.8.1 → 2.9.1

package/src/plugins/cms/client/components/forms/file-upload.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { useState, useCallback, useEffect, type ChangeEvent } from "react";
+import {
+	useState,
+	useCallback,
+	useEffect,
+	type ChangeEvent,
+	type ComponentType,
+} from "react";
 import { toast } from "sonner";
 import type { AutoFormInputComponentProps } from "@workspace/ui/components/auto-form/types";
 import { Input } from "@workspace/ui/components/input";
@@ -23,6 +29,20 @@ export interface CMSFileUploadProps extends AutoFormInputComponentProps {
 	 * This is required - consumers must provide an upload implementation.
 	 */
 	uploadImage: (file: File) => Promise<string>;
+	/**
+	 * Optional custom component for the image field.
+	 * When provided, it replaces the default file-upload input entirely.
+	 */
+	imageInputField?: ComponentType<{
+		value: string;
+		onChange: (value: string) => void;
+		isRequired?: boolean;
+	}>;
+	/**
+	 * Optional trigger component for a media picker.
+	 * When provided, it is rendered as a "Browse media" option.
+	 */
+	imagePicker?: ComponentType<{ onSelect: (url: string) => void }>;
 }
 
 /**
@@ -54,6 +74,8 @@ export function CMSFileUpload({
 	fieldProps,
 	field,
 	uploadImage,
+	imageInputField: ImageInputField,
+	imagePicker: ImagePickerTrigger,
 }: CMSFileUploadProps) {
 	// Exclude showLabel and value from props spread
 	// File inputs cannot have their value set programmatically (browser security)
@@ -63,6 +85,8 @@ export function CMSFileUpload({
 		...safeFieldProps
 	} = fieldProps;
 	const showLabel = _showLabel === undefined ? true : _showLabel;
+
+	// All hooks must be called unconditionally before any early return.
 	const [isUploading, setIsUploading] = useState(false);
 	const [previewUrl, setPreviewUrl] = useState<string | null>(
 		field.value || null,
@@ -80,7 +104,6 @@ export function CMSFileUpload({
 			const file = e.target.files?.[0];
 			if (!file) return;
 
-			// Check if it's an image
 			if (!file.type.startsWith("image/")) {
 				toast.error("Please select an image file");
 				return;
@@ -106,6 +129,29 @@ export function CMSFileUpload({
 		field.onChange("");
 	}, [field]);
 
+	// When a custom imageInputField component is provided via overrides, delegate to it.
+	if (ImageInputField) {
+		return (
+			<FormItem>
+				{showLabel && (
+					<AutoFormLabel
+						label={fieldConfigItem?.label || label}
+						isRequired={isRequired}
+					/>
+				)}
+				<FormControl>
+					<ImageInputField
+						value={field.value || ""}
+						onChange={field.onChange}
+						isRequired={isRequired}
+					/>
+				</FormControl>
+				<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
+				<FormMessage />
+			</FormItem>
+		);
+	}
+
 	return (
 		<FormItem>
 			{showLabel && (
@@ -116,19 +162,31 @@ export function CMSFileUpload({
 			)}
 			{!previewUrl && (
 				<FormControl>
-					<div className="relative">
-						<Input
-							type="file"
-							accept="image/*"
-							{...safeFieldProps}
-							onChange={handleFileChange}
-							disabled={isUploading}
-							className="cursor-pointer"
-							data-testid="image-upload-input"
-						/>
-						{isUploading && (
-							<div className="absolute inset-0 flex items-center justify-center bg-background/80">
-								<Loader2 className="h-4 w-4 animate-spin" />
+					<div className="space-y-2">
+						<div className="relative">
+							<Input
+								type="file"
+								accept="image/*"
+								{...safeFieldProps}
+								onChange={handleFileChange}
+								disabled={isUploading}
+								className="cursor-pointer"
+								data-testid="image-upload-input"
+							/>
+							{isUploading && (
+								<div className="absolute inset-0 flex items-center justify-center bg-background/80">
+									<Loader2 className="h-4 w-4 animate-spin" />
+								</div>
+							)}
+						</div>
+						{ImagePickerTrigger && (
+							<div data-testid="image-picker-trigger">
+								<ImagePickerTrigger
+									onSelect={(url: string) => {
+										setPreviewUrl(url);
+										field.onChange(url);
+									}}
+								/>
 							</div>
 						)}
 					</div>

package/src/plugins/cms/client/overrides.ts

@@ -2,6 +2,18 @@ import type { ComponentType } from "react";
 import type { CMSLocalization } from "./localization";
 import type { AutoFormInputComponentProps } from "@workspace/ui/components/auto-form/types";
 
+/**
+ * Props for the overridable CMS image input field component.
+ */
+export interface CmsImageInputFieldProps {
+	/** Current image URL value */
+	value: string;
+	/** Called when the image URL changes */
+	onChange: (value: string) => void;
+	/** Whether the field is required */
+	isRequired?: boolean;
+}
+
 /**
  * Context passed to lifecycle hooks
  */
@@ -46,11 +58,54 @@ export interface CMSPluginOverrides {
 	>;
 
 	/**
-	 * Function used to upload an image and return its URL.
-	 * Used by the default "file" field component.
+	 * Function used to upload a new image file and return its URL.
+	 * Used by the default "file" field component when not selecting an existing
+	 * asset via `imagePicker` or `imageInputField`.
 	 */
 	uploadImage?: (file: File) => Promise<string>;
 
+	/**
+	 * Optional custom component for image fields (fieldType: "file").
+	 *
+	 * When provided it replaces the default file-upload input entirely.
+	 * The component receives `value` (current URL string) and `onChange` (setter).
+	 *
+	 * @example
+	 * ```tsx
+	 * imageInputField: ({ value, onChange }) =>
+	 *   value ? (
+	 *     <div>
+	 *       <img src={value} alt="Preview" />
+	 *       <MediaPicker trigger={<button>Change</button>} accept={["image/*"]}
+	 *         onSelect={(assets) => onChange(assets[0].url)} />
+	 *     </div>
+	 *   ) : (
+	 *     <MediaPicker trigger={<button>Browse media</button>} accept={["image/*"]}
+	 *       onSelect={(assets) => onChange(assets[0].url)} />
+	 *   )
+	 * ```
+	 */
+	imageInputField?: ComponentType<CmsImageInputFieldProps>;
+
+	/**
+	 * Optional trigger component for a media picker.
+	 * When provided, it is rendered inside the default "file" field component as a
+	 * "Browse media" option, letting users select a previously uploaded asset.
+	 * Receives `onSelect(url)` — the URL is set as the field value.
+	 *
+	 * @example
+	 * ```tsx
+	 * imagePicker: ({ onSelect }) => (
+	 *   <MediaPicker
+	 *     trigger={<Button size="sm" variant="outline">Browse media</Button>}
+	 *     accept={["image/*"]}
+	 *     onSelect={(assets) => onSelect(assets[0].url)}
+	 *   />
+	 * )
+	 * ```
+	 */
+	imagePicker?: ComponentType<{ onSelect: (url: string) => void }>;
+
 	/**
 	 * Custom field components for AutoForm fields.
 	 *

package/src/plugins/kanban/client/components/forms/board-form.tsx

@@ -50,7 +50,7 @@ export function BoardForm({ board, onClose, onSuccess }: BoardFormProps) {
 	};
 
 	return (
-		<form onSubmit={handleSubmit} className="space-y-4">
+		<form onSubmit={handleSubmit} className="space-y-4 overflow-x-hidden">
 			<div className="space-y-2">
 				<Label htmlFor="name">Name *</Label>
 				<Input

package/src/plugins/kanban/client/components/forms/task-form.tsx

@@ -14,7 +14,9 @@ import {
 } from "@workspace/ui/components/select";
 import { MinimalTiptapEditor } from "@workspace/ui/components/minimal-tiptap";
 import SearchSelect from "@workspace/ui/components/search-select";
+import { usePluginOverrides } from "@btst/stack/context";
 import { useTaskMutations, useSearchUsers } from "../../hooks/kanban-hooks";
+import type { KanbanPluginOverrides } from "../../overrides";
 import { PRIORITY_OPTIONS } from "../../../utils";
 import type {
 	SerializedColumn,
@@ -44,6 +46,8 @@ export function TaskForm({
 	onDelete,
 }: TaskFormProps) {
 	const isEditing = !!taskId;
+	const { uploadImage, imagePicker: imagePickerTrigger } =
+		usePluginOverrides<KanbanPluginOverrides>("kanban");
 	const {
 		createTask,
 		updateTask,
@@ -155,7 +159,7 @@ export function TaskForm({
 	};
 
 	return (
-		<form onSubmit={handleSubmit} className="space-y-4">
+		<form onSubmit={handleSubmit} className="space-y-4 overflow-x-hidden">
 			<div className="space-y-2">
 				<Label htmlFor="title">Title *</Label>
 				<Input
@@ -227,6 +231,8 @@ export function TaskForm({
 					output="markdown"
 					placeholder="Describe the task..."
 					className="min-h-[150px]"
+					uploader={uploadImage}
+					imagePickerTrigger={imagePickerTrigger}
 				/>
 			</div>
 

package/src/plugins/kanban/client/overrides.ts

@@ -73,6 +73,31 @@ export interface KanbanPluginOverrides {
 	 */
 	headers?: HeadersInit;
 
+	/**
+	 * Function used to upload a new image file from the task description editor
+	 * and return its URL. This is separate from `imagePicker`, which selects an
+	 * existing asset URL.
+	 */
+	uploadImage?: (file: File) => Promise<string>;
+
+	/**
+	 * Optional trigger component for a media picker.
+	 * When provided, it appears inside the image insertion dialog of the task description editor,
+	 * letting users browse and select previously uploaded assets.
+	 *
+	 * @example
+	 * ```tsx
+	 * imagePicker: ({ onSelect }) => (
+	 *   <MediaPicker
+	 *     trigger={<Button size="sm" variant="outline">Browse media</Button>}
+	 *     accept={["image/*"]}
+	 *     onSelect={(assets) => onSelect(assets[0].url)}
+	 *   />
+	 * )
+	 * ```
+	 */
+	imagePicker?: ComponentType<{ onSelect: (url: string) => void }>;
+
 	// ============ User Resolution (required for assignee features) ============
 
 	/**

package/src/plugins/media/__tests__/__stubs__/vercel-blob-server.ts

@@ -0,0 +1,9 @@
+/**
+ * Stub for @vercel/blob/server — used in tests only.
+ * The real module is an optional peer dependency.
+ */
+export async function handleUpload(_options: unknown): Promise<unknown> {
+	throw new Error(
+		"handleUpload is not available in the installed @vercel/blob version. BTST requires a version that exports @vercel/blob/server.",
+	);
+}

package/src/plugins/media/__tests__/getters.test.ts

@@ -0,0 +1,274 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createMemoryAdapter } from "@btst/adapter-memory";
+import { defineDb } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
+import { mediaSchema } from "../db";
+import {
+	listAssets,
+	getAssetById,
+	listFolders,
+	getFolderById,
+} from "../api/getters";
+
+const createTestAdapter = (): Adapter => {
+	const db = defineDb({}).use(mediaSchema);
+	return createMemoryAdapter(db)({});
+};
+
+const makeAsset = (
+	overrides: Partial<{
+		filename: string;
+		originalName: string;
+		mimeType: string;
+		size: number;
+		url: string;
+		folderId: string | undefined;
+		alt: string | undefined;
+	}> = {},
+) => ({
+	filename: "image.jpg",
+	originalName: "My Image.jpg",
+	mimeType: "image/jpeg",
+	size: 1024,
+	url: "https://example.com/image.jpg",
+	folderId: undefined,
+	alt: undefined,
+	createdAt: new Date(),
+	...overrides,
+});
+
+const makeFolder = (
+	overrides: Partial<{
+		name: string;
+		parentId: string | undefined;
+	}> = {},
+) => ({
+	name: "My Folder",
+	parentId: undefined,
+	createdAt: new Date(),
+	...overrides,
+});
+
+describe("media getters", () => {
+	let adapter: Adapter;
+
+	beforeEach(() => {
+		adapter = createTestAdapter();
+	});
+
+	// ── listAssets ────────────────────────────────────────────────────────────
+
+	describe("listAssets", () => {
+		it("returns empty result when no assets exist", async () => {
+			const result = await listAssets(adapter);
+			expect(result.items).toEqual([]);
+			expect(result.total).toBe(0);
+		});
+
+		it("returns all assets with correct fields", async () => {
+			await adapter.create({
+				model: "mediaAsset",
+				data: makeAsset({
+					filename: "photo.jpg",
+					url: "https://example.com/photo.jpg",
+				}),
+			});
+
+			const result = await listAssets(adapter);
+			expect(result.items).toHaveLength(1);
+			expect(result.total).toBe(1);
+			expect(result.items[0]!.filename).toBe("photo.jpg");
+			expect(result.items[0]!.mimeType).toBe("image/jpeg");
+		});
+
+		it("filters assets by folderId", async () => {
+			await adapter.create({
+				model: "mediaFolder",
+				data: makeFolder({ name: "Photos" }),
+			});
+			const folder = await adapter.findOne<{ id: string }>({
+				model: "mediaFolder",
+				where: [{ field: "name", value: "Photos", operator: "eq" }],
+			});
+
+			await adapter.create({
+				model: "mediaAsset",
+				data: makeAsset({ filename: "in-folder.jpg", folderId: folder!.id }),
+			});
+			await adapter.create({
+				model: "mediaAsset",
+				data: makeAsset({ filename: "no-folder.jpg" }),
+			});
+
+			const result = await listAssets(adapter, { folderId: folder!.id });
+			expect(result.items).toHaveLength(1);
+			expect(result.items[0]!.filename).toBe("in-folder.jpg");
+		});
+
+		it("filters assets by mimeType", async () => {
+			await adapter.create({
+				model: "mediaAsset",
+				data: makeAsset({ filename: "image.jpg", mimeType: "image/jpeg" }),
+			});
+			await adapter.create({
+				model: "mediaAsset",
+				data: makeAsset({ filename: "doc.pdf", mimeType: "application/pdf" }),
+			});
+
+			const images = await listAssets(adapter, { mimeType: "image/jpeg" });
+			expect(images.items).toHaveLength(1);
+			expect(images.items[0]!.filename).toBe("image.jpg");
+
+			const pdfs = await listAssets(adapter, { mimeType: "application/pdf" });
+			expect(pdfs.items).toHaveLength(1);
+			expect(pdfs.items[0]!.filename).toBe("doc.pdf");
+		});
+
+		it("searches assets by query string across filename, originalName, and alt", async () => {
+			await adapter.create({
+				model: "mediaAsset",
+				data: makeAsset({
+					filename: "holiday-photo.jpg",
+					originalName: "Holiday Photo.jpg",
+					alt: "Beach sunset",
+				}),
+			});
+			await adapter.create({
+				model: "mediaAsset",
+				data: makeAsset({
+					filename: "logo.png",
+					originalName: "Company Logo.png",
+					alt: "Brand logo",
+				}),
+			});
+
+			const holidayResult = await listAssets(adapter, { query: "holiday" });
+			expect(holidayResult.items).toHaveLength(1);
+			expect(holidayResult.items[0]!.filename).toBe("holiday-photo.jpg");
+
+			// "beach" matches only the alt text of the first asset
+			const beachResult = await listAssets(adapter, { query: "beach" });
+			expect(beachResult.items).toHaveLength(1);
+			expect(beachResult.items[0]!.alt).toBe("Beach sunset");
+
+			// "logo" matches only the second asset (filename, originalName, alt)
+			const logoResult = await listAssets(adapter, { query: "logo" });
+			expect(logoResult.items).toHaveLength(1);
+			expect(logoResult.items[0]!.filename).toBe("logo.png");
+
+			// "photo" matches only the first asset via filename and originalName
+			const photoResult = await listAssets(adapter, { query: "photo" });
+			expect(photoResult.items).toHaveLength(1);
+			expect(photoResult.items[0]!.filename).toBe("holiday-photo.jpg");
+		});
+
+		it("paginates results with limit and offset", async () => {
+			for (let i = 0; i < 5; i++) {
+				await adapter.create({
+					model: "mediaAsset",
+					data: makeAsset({
+						filename: `asset-${i}.jpg`,
+						url: `https://example.com/${i}.jpg`,
+					}),
+				});
+			}
+
+			const page1 = await listAssets(adapter, { limit: 2, offset: 0 });
+			expect(page1.items).toHaveLength(2);
+			expect(page1.total).toBe(5);
+
+			const page2 = await listAssets(adapter, { limit: 2, offset: 2 });
+			expect(page2.items).toHaveLength(2);
+			expect(page2.total).toBe(5);
+
+			const page3 = await listAssets(adapter, { limit: 2, offset: 4 });
+			expect(page3.items).toHaveLength(1);
+			expect(page3.total).toBe(5);
+		});
+	});
+
+	// ── getAssetById ─────────────────────────────────────────────────────────
+
+	describe("getAssetById", () => {
+		it("returns null when asset does not exist", async () => {
+			const result = await getAssetById(adapter, "nonexistent-id");
+			expect(result).toBeNull();
+		});
+
+		it("returns the asset by ID", async () => {
+			const created = await adapter.create<{ id: string }>({
+				model: "mediaAsset",
+				data: makeAsset({ filename: "found.jpg" }),
+			});
+
+			const result = await getAssetById(adapter, created.id);
+			expect(result).not.toBeNull();
+			expect(result!.filename).toBe("found.jpg");
+		});
+	});
+
+	// ── listFolders ───────────────────────────────────────────────────────────
+
+	describe("listFolders", () => {
+		it("returns empty array when no folders exist", async () => {
+			const result = await listFolders(adapter);
+			expect(result).toEqual([]);
+		});
+
+		it("returns all folders sorted by name", async () => {
+			await adapter.create({
+				model: "mediaFolder",
+				data: makeFolder({ name: "Zeta" }),
+			});
+			await adapter.create({
+				model: "mediaFolder",
+				data: makeFolder({ name: "Alpha" }),
+			});
+
+			const result = await listFolders(adapter);
+			expect(result).toHaveLength(2);
+			expect(result[0]!.name).toBe("Alpha");
+			expect(result[1]!.name).toBe("Zeta");
+		});
+
+		it("filters folders by parentId", async () => {
+			const root = await adapter.create<{ id: string }>({
+				model: "mediaFolder",
+				data: makeFolder({ name: "Root" }),
+			});
+			await adapter.create({
+				model: "mediaFolder",
+				data: makeFolder({ name: "Child", parentId: root.id }),
+			});
+
+			// No params — returns ALL folders
+			const allFolders = await listFolders(adapter);
+			expect(allFolders).toHaveLength(2);
+
+			// Filter children of root
+			const childFolders = await listFolders(adapter, { parentId: root.id });
+			expect(childFolders).toHaveLength(1);
+			expect(childFolders[0]!.name).toBe("Child");
+		});
+	});
+
+	// ── getFolderById ─────────────────────────────────────────────────────────
+
+	describe("getFolderById", () => {
+		it("returns null when folder does not exist", async () => {
+			const result = await getFolderById(adapter, "nonexistent-id");
+			expect(result).toBeNull();
+		});
+
+		it("returns the folder by ID", async () => {
+			const created = await adapter.create<{ id: string }>({
+				model: "mediaFolder",
+				data: makeFolder({ name: "Test Folder" }),
+			});
+
+			const result = await getFolderById(adapter, created.id);
+			expect(result).not.toBeNull();
+			expect(result!.name).toBe("Test Folder");
+		});
+	});
+});