@btst/stack 1.7.0 → 1.9.0

package/src/plugins/cms/client/components/forms/content-form.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { useState, useMemo, useEffect } from "react";
+import { useState, useMemo, useEffect, useRef } from "react";
 import { z } from "zod";
-import { toast } from "sonner";
 import { SteppedAutoForm } from "@workspace/ui/components/auto-form/stepped-auto-form";
 import type {
 	FieldConfig,
@@ -15,10 +14,11 @@ import { Label } from "@workspace/ui/components/label";
 import { Badge } from "@workspace/ui/components/badge";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { CMSPluginOverrides } from "../../overrides";
-import type { SerializedContentType } from "../../../types";
+import type { SerializedContentType, RelationConfig } from "../../../types";
 import { slugify } from "../../../utils";
 import { CMS_LOCALIZATION } from "../../localization";
 import { CMSFileUpload } from "./file-upload";
+import { RelationField } from "./relation-field";
 
 interface ContentFormProps {
 	contentType: SerializedContentType;
@@ -43,6 +43,12 @@ interface ContentFormProps {
  * @param uploadImage - The uploadImage function from overrides (for file fields)
  * @param fieldComponents - Custom field components from overrides
  */
+interface JsonSchemaProperty {
+	fieldType?: string;
+	relation?: RelationConfig;
+	[key: string]: unknown;
+}
+
 function buildFieldConfigFromJsonSchema(
 	jsonSchema: Record<string, unknown>,
 	uploadImage?: (file: File) => Promise<string>,
@@ -54,17 +60,17 @@ function buildFieldConfigFromJsonSchema(
 	// Get base config from shared utility (handles fieldType from JSON Schema)
 	const baseConfig = buildFieldConfigBase(jsonSchema, fieldComponents);
 
-	// Apply CMS-specific handling for "file" fieldType ONLY if no custom component exists
+	// Apply CMS-specific handling for special fieldTypes ONLY if no custom component exists
 	// Custom fieldComponents take priority - don't override if user provided one
 	const properties = jsonSchema.properties as Record<
 		string,
-		{ fieldType?: string }
+		JsonSchemaProperty
 	>;
 
 	if (!properties) return baseConfig;
 
 	for (const [key, prop] of Object.entries(properties)) {
-		// Only handle "file" fieldType when there's NO custom component for "file"
+		// Handle "file" fieldType when there's NO custom component for "file"
 		if (prop.fieldType === "file" && !fieldComponents?.["file"]) {
 			// Use CMSFileUpload as the default file component
 			if (!uploadImage) {
@@ -87,6 +93,21 @@ function buildFieldConfigFromJsonSchema(
 				};
 			}
 		}
+
+		// Handle "relation" fieldType when there's NO custom component for "relation"
+		if (
+			prop.fieldType === "relation" &&
+			prop.relation &&
+			!fieldComponents?.["relation"]
+		) {
+			const relationConfig = prop.relation;
+			baseConfig[key] = {
+				...baseConfig[key],
+				fieldType: (props: AutoFormInputComponentProps) => (
+					<RelationField {...props} relation={relationConfig} />
+				),
+			};
+		}
 	}
 
 	return baseConfig;
@@ -139,14 +160,28 @@ export function ContentForm({
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [formData, setFormData] =
 		useState<Record<string, unknown>>(initialData);
+	const [slugError, setSlugError] = useState<string | null>(null);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+
+	// Track if we've already synced prefill data to avoid overwriting user input
+	const hasSyncedPrefillRef = useRef(false);
 
-	// Sync formData with initialData when it changes (e.g., when editing an existing item)
-	// This is necessary because useState only uses the initial value once on mount
+	// Sync formData with initialData when it changes
+	// This handles both:
+	// 1. Editing mode: always sync when item data is loaded (isEditing=true)
+	// 2. Create mode: only sync prefill data ONCE to avoid overwriting user input
+	// useState only uses the initial value on mount, so we need this effect for updates
 	useEffect(() => {
-		// Only sync when we're in editing mode and initialData has content
-		// This ensures we properly load existing item data into the form
-		if (isEditing && Object.keys(initialData).length > 0) {
+		const hasData = Object.keys(initialData).length > 0;
+		// In edit mode, always sync (user is loading existing data)
+		// In create mode, only sync prefill data once
+		const shouldSync = hasData && (isEditing || !hasSyncedPrefillRef.current);
+
+		if (shouldSync) {
 			setFormData(initialData);
+			if (!isEditing) {
+				hasSyncedPrefillRef.current = true;
+			}
 		}
 	}, [initialData, isEditing]);
 
@@ -204,23 +239,21 @@ export function ContentForm({
 
 	// Handle form submission
 	const handleSubmit = async (data: Record<string, unknown>) => {
+		setSlugError(null);
+		setSubmitError(null);
+
 		if (!slug.trim()) {
-			toast.error("Slug is required");
+			setSlugError("Slug is required");
 			return;
 		}
 
 		setIsSubmitting(true);
 		try {
 			await onSubmit({ slug, data });
-			toast.success(
-				isEditing
-					? localization.CMS_TOAST_UPDATE_SUCCESS
-					: localization.CMS_TOAST_CREATE_SUCCESS,
-			);
 		} catch (error) {
 			const message =
 				error instanceof Error ? error.message : localization.CMS_TOAST_ERROR;
-			toast.error(message);
+			setSubmitError(message);
 		} finally {
 			setIsSubmitting(false);
 		}
@@ -245,6 +278,7 @@ export function ContentForm({
 					value={slug}
 					onChange={(e) => {
 						setSlug(e.target.value);
+						setSlugError(null);
 						if (!isEditing) {
 							setSlugManuallyEdited(true);
 						}
@@ -256,11 +290,19 @@ export function ContentForm({
 							: "Enter slug..."
 					}
 				/>
+				{slugError && <p className="text-sm text-destructive">{slugError}</p>}
 				<p className="text-sm text-muted-foreground">
 					{localization.CMS_LABEL_SLUG_DESCRIPTION}
 				</p>
 			</div>
 
+			{/* Submit error message */}
+			{submitError && (
+				<div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
+					<p className="text-sm text-destructive">{submitError}</p>
+				</div>
+			)}
+
 			{/* Dynamic form from Zod schema */}
 			{/* Uses SteppedAutoForm which automatically handles both single-step and multi-step content types */}
 			<SteppedAutoForm

package/src/plugins/cms/client/components/forms/relation-field.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import { useState, useCallback, useMemo } from "react";
+import { useContent, useCreateContent } from "../../hooks";
+import MultipleSelector from "@workspace/ui/components/multi-select";
+import type { Option } from "@workspace/ui/components/multi-select";
+import { Button } from "@workspace/ui/components/button";
+import { Plus, X } from "lucide-react";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@workspace/ui/components/dialog";
+import { Input } from "@workspace/ui/components/input";
+import { Label } from "@workspace/ui/components/label";
+import { Textarea } from "@workspace/ui/components/textarea";
+import type { AutoFormInputComponentProps } from "@workspace/ui/components/auto-form/types";
+import type { RelationConfig } from "../../../types";
+
+interface RelationFieldProps extends AutoFormInputComponentProps {
+	relation: RelationConfig;
+}
+
+/**
+ * A form field component for handling CMS content relationships.
+ * Supports selecting existing items and optionally creating new items inline.
+ *
+ * Handles two value formats:
+ * - belongsTo: single object { id: string } or undefined
+ * - hasMany/manyToMany: array of { id: string }
+ */
+export function RelationField({
+	field,
+	fieldConfigItem,
+	label,
+	isRequired,
+	relation,
+}: RelationFieldProps) {
+	const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+	const [newItemName, setNewItemName] = useState("");
+	const [newItemDescription, setNewItemDescription] = useState("");
+	const [createError, setCreateError] = useState<string | null>(null);
+
+	// For belongsTo (single relation), we only allow one selection
+	const isSingleSelect = relation.type === "belongsTo";
+
+	// Fetch available items from the target content type
+	const { items: availableItems, isLoading } = useContent(relation.targetType, {
+		limit: 100, // Load a good chunk for the dropdown
+	});
+
+	// Mutation for creating new items
+	const createMutation = useCreateContent(relation.targetType);
+
+	// Normalize the field value to an array for internal use
+	// belongsTo stores as single object { id }, hasMany/manyToMany store as array
+	const normalizedValue = useMemo((): Array<{ id: string }> => {
+		if (!field.value) return [];
+
+		if (isSingleSelect) {
+			// belongsTo: value is { id: string } or undefined
+			const singleValue = field.value as { id?: string } | undefined;
+			if (singleValue && singleValue.id) {
+				return [{ id: singleValue.id }];
+			}
+			return [];
+		}
+
+		// hasMany/manyToMany: value is array
+		return (field.value as Array<{ id: string }>) || [];
+	}, [field.value, isSingleSelect]);
+
+	// Convert normalized value to Option[] for MultipleSelector
+	const selectedOptions: Option[] = normalizedValue
+		.map((v) => {
+			const item = availableItems.find((item) => item.id === v.id);
+			if (item) {
+				const displayValue =
+					(item.parsedData as Record<string, unknown>)?.[
+						relation.displayField
+					] || item.slug;
+				return {
+					value: item.id,
+					label: String(displayValue),
+				};
+			}
+			// Item not found in loaded items - show ID
+			return { value: v.id, label: `ID: ${v.id.slice(0, 8)}...` };
+		})
+		.filter(Boolean);
+
+	// Convert available items to options
+	const options: Option[] = availableItems.map((item) => {
+		const displayValue =
+			(item.parsedData as Record<string, unknown>)?.[relation.displayField] ||
+			item.slug;
+		return {
+			value: item.id,
+			label: String(displayValue),
+		};
+	});
+
+	// Handle selection change - convert back to appropriate format
+	const handleChange = useCallback(
+		(newOptions: Option[]) => {
+			if (isSingleSelect) {
+				// belongsTo: store as single object or undefined
+				if (newOptions.length > 0) {
+					field.onChange({ id: newOptions[0]!.value });
+				} else {
+					field.onChange(undefined);
+				}
+			} else {
+				// hasMany/manyToMany: store as array
+				const newValue = newOptions.map((opt) => ({ id: opt.value }));
+				field.onChange(newValue);
+			}
+		},
+		[field, isSingleSelect],
+	);
+
+	// Handle creating a new item
+	const handleCreateItem = async () => {
+		if (!newItemName.trim()) return;
+
+		setCreateError(null);
+		try {
+			const result = await createMutation.mutateAsync({
+				slug: newItemName.toLowerCase().replace(/\s+/g, "-"),
+				data: {
+					[relation.displayField]: newItemName,
+					description: newItemDescription || undefined,
+				} as Record<string, unknown>,
+			});
+
+			// Add the new item to the selection
+			if (isSingleSelect) {
+				// belongsTo: replace with new item
+				field.onChange({ id: result.id });
+			} else {
+				// hasMany/manyToMany: append to array
+				const newValue = [...normalizedValue, { id: result.id }];
+				field.onChange(newValue);
+			}
+
+			// Reset and close dialog
+			setNewItemName("");
+			setNewItemDescription("");
+			setIsCreateDialogOpen(false);
+		} catch (error) {
+			const message =
+				error instanceof Error
+					? error.message
+					: "Failed to create item. Please try again.";
+			setCreateError(message);
+		}
+	};
+
+	// Handle removing an item
+	const handleRemove = useCallback(
+		(idToRemove: string) => {
+			if (isSingleSelect) {
+				// belongsTo: clear the value
+				field.onChange(undefined);
+			} else {
+				// hasMany/manyToMany: filter out the item
+				const newValue = normalizedValue.filter((v) => v.id !== idToRemove);
+				field.onChange(newValue);
+			}
+		},
+		[normalizedValue, field, isSingleSelect],
+	);
+
+	return (
+		<div className="space-y-2">
+			<Label>
+				{label}
+				{isRequired && <span className="text-destructive ml-1">*</span>}
+			</Label>
+
+			<div className="flex gap-2">
+				<div className="flex-1">
+					<MultipleSelector
+						value={selectedOptions}
+						onChange={handleChange}
+						options={options}
+						placeholder={
+							isLoading
+								? "Loading..."
+								: `Select ${relation.targetType}${isSingleSelect ? "" : "(s)"}...`
+						}
+						disabled={isLoading}
+						hidePlaceholderWhenSelected
+						emptyIndicator={
+							<p className="text-center text-sm text-muted-foreground py-4">
+								No {relation.targetType} items found
+							</p>
+						}
+						maxSelected={isSingleSelect ? 1 : undefined}
+						className="min-h-10"
+					/>
+				</div>
+
+				{/* Create new item button/dialog */}
+				{relation.creatable && (
+					<Dialog
+						open={isCreateDialogOpen}
+						onOpenChange={setIsCreateDialogOpen}
+					>
+						<DialogTrigger asChild>
+							<Button type="button" variant="outline" size="icon">
+								<Plus className="h-4 w-4" />
+							</Button>
+						</DialogTrigger>
+						<DialogContent>
+							<DialogHeader>
+								<DialogTitle>Create New {relation.targetType}</DialogTitle>
+							</DialogHeader>
+							<div className="space-y-4 py-4">
+								{createError && (
+									<p className="text-sm text-destructive">{createError}</p>
+								)}
+								<div className="space-y-2">
+									<Label htmlFor="newItemName">
+										{relation.displayField.charAt(0).toUpperCase() +
+											relation.displayField.slice(1)}
+									</Label>
+									<Input
+										id="newItemName"
+										value={newItemName}
+										onChange={(e) => setNewItemName(e.target.value)}
+										placeholder={`Enter ${relation.displayField}...`}
+									/>
+								</div>
+								<div className="space-y-2">
+									<Label htmlFor="newItemDescription">
+										Description (optional)
+									</Label>
+									<Textarea
+										id="newItemDescription"
+										value={newItemDescription}
+										onChange={(e) => setNewItemDescription(e.target.value)}
+										placeholder="Enter description..."
+										rows={3}
+									/>
+								</div>
+								<div className="flex justify-end gap-2">
+									<Button
+										type="button"
+										variant="outline"
+										onClick={() => setIsCreateDialogOpen(false)}
+									>
+										Cancel
+									</Button>
+									<Button
+										type="button"
+										onClick={handleCreateItem}
+										disabled={!newItemName.trim() || createMutation.isPending}
+									>
+										{createMutation.isPending ? "Creating..." : "Create"}
+									</Button>
+								</div>
+							</div>
+						</DialogContent>
+					</Dialog>
+				)}
+			</div>
+
+			{/* Show selected items as removable badges */}
+			{selectedOptions.length > 0 && (
+				<div className="flex flex-wrap gap-1 mt-2">
+					{selectedOptions.map((opt) => (
+						<div
+							key={opt.value}
+							className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md bg-secondary text-secondary-foreground"
+						>
+							<span>{opt.label}</span>
+							<button
+								type="button"
+								onClick={() => handleRemove(opt.value)}
+								className="hover:text-destructive"
+							>
+								<X className="h-3 w-3" />
+							</button>
+						</div>
+					))}
+				</div>
+			)}
+
+			{fieldConfigItem?.description && (
+				<p className="text-sm text-muted-foreground">
+					{fieldConfigItem.description}
+				</p>
+			)}
+		</div>
+	);
+}