@btst/stack 2.11.4 → 2.11.6

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

@@ -63,63 +63,109 @@ function buildFieldConfigFromJsonSchema(
 		isRequired?: boolean;
 	}>,
 ): FieldConfig<Record<string, unknown>> {
-	// Get base config from shared utility (handles fieldType from JSON Schema)
+	// Get base config from shared utility (handles fieldType from JSON Schema,
+	// including per-item configs for arrays of objects).
 	const baseConfig = buildFieldConfigBase(jsonSchema, fieldComponents);
 
-	// 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,
-		JsonSchemaProperty
-	>;
+	const properties = jsonSchema.properties as
+		| Record<string, JsonSchemaProperty>
+		| undefined;
 
 	if (!properties) return baseConfig;
 
-	for (const [key, prop] of Object.entries(properties)) {
-		// 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 && !imageInputField) {
-				// Show a clear error message if neither uploadImage nor imageInputField is provided
-				baseConfig[key] = {
-					...baseConfig[key],
-					fieldType: () => (
-						<div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
-							File upload requires an <code>uploadImage</code> or{" "}
-							<code>imageInputField</code> function in CMS overrides.
-						</div>
-					),
-				};
-			} else {
-				baseConfig[key] = {
-					...baseConfig[key],
-					fieldType: (props: AutoFormInputComponentProps) => (
-						<CMSFileUpload
-							{...props}
-							uploadImage={uploadImage ?? (() => Promise.resolve(""))}
-							imageInputField={imageInputField}
-							imagePicker={imagePicker}
-						/>
+	// Recursively walk the JSON Schema properties and inject CMS-specific custom
+	// components (file upload, relation picker) for any field with a matching
+	// fieldType, regardless of nesting depth. Targets:
+	//   - top-level fields
+	//   - properties of nested object fields
+	//   - properties of array items (e.g. `components: z.array(z.object({...}))`)
+	//
+	// `targetConfig` is the FieldConfigObject slot to mutate for the property at
+	// `key`. The recursion mirrors how AutoFormObject + AutoFormArray look up
+	// per-property configs: nested object/array per-item configs live as keys
+	// alongside their parent's meta on the same FieldConfigObject.
+	const injectCustomFieldTypes = (
+		props: Record<string, JsonSchemaProperty>,
+		targetConfig: Record<string, unknown>,
+	) => {
+		for (const [key, prop] of Object.entries(props)) {
+			// Ensure a slot exists so we can mutate it whether or not the base
+			// helper produced an entry for this key.
+			const existing =
+				(targetConfig[key] as Record<string, unknown> | undefined) ?? {};
+
+			let updated = existing;
+
+			// Handle "file" fieldType when there's NO custom component for "file"
+			if (prop.fieldType === "file" && !fieldComponents?.["file"]) {
+				if (!uploadImage && !imageInputField) {
+					updated = {
+						...updated,
+						fieldType: () => (
+							<div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+								File upload requires an <code>uploadImage</code> or{" "}
+								<code>imageInputField</code> function in CMS overrides.
+							</div>
+						),
+					};
+				} else {
+					updated = {
+						...updated,
+						fieldType: (componentProps: AutoFormInputComponentProps) => (
+							<CMSFileUpload
+								{...componentProps}
+								uploadImage={uploadImage ?? (() => Promise.resolve(""))}
+								imageInputField={imageInputField}
+								imagePicker={imagePicker}
+							/>
+						),
+					};
+				}
+			}
+
+			// Handle "relation" fieldType when there's NO custom component for "relation"
+			if (
+				prop.fieldType === "relation" &&
+				prop.relation &&
+				!fieldComponents?.["relation"]
+			) {
+				const relationConfig = prop.relation;
+				updated = {
+					...updated,
+					fieldType: (componentProps: AutoFormInputComponentProps) => (
+						<RelationField {...componentProps} relation={relationConfig} />
 					),
 				};
 			}
-		}
 
-		// 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} />
-				),
-			};
+			// Recurse into nested objects — their per-property configs live as
+			// keys on the same parent FieldConfigObject.
+			if (prop.properties) {
+				injectCustomFieldTypes(
+					prop.properties as Record<string, JsonSchemaProperty>,
+					updated,
+				);
+			}
+
+			// Recurse into array items — same convention as nested objects.
+			const items = prop.items as JsonSchemaProperty | undefined;
+			if (items?.properties) {
+				injectCustomFieldTypes(
+					items.properties as Record<string, JsonSchemaProperty>,
+					updated,
+				);
+			}
+
+			if (Object.keys(updated).length > 0) {
+				targetConfig[key] = updated;
+			}
 		}
-	}
+	};
+
+	injectCustomFieldTypes(
+		properties,
+		baseConfig as unknown as Record<string, unknown>,
+	);
 
 	return baseConfig;
 }

package/src/plugins/cms/client/components/inverse-relations-panel.tsx

@@ -95,6 +95,19 @@ export function InverseRelationsPanel({
 		return null;
 	}
 
+	// When a single source content type has multiple belongsTo fields pointing
+	// at this target type (e.g. StackSynergy has both compoundAId and
+	// compoundBId → compound), the section title alone ("Stack Synergy") is
+	// ambiguous — two cards would render with identical headings. Mark those
+	// relations so we can disambiguate them by field name.
+	const sourceTypeCounts = new Map<string, number>();
+	for (const rel of inverseRelations) {
+		sourceTypeCounts.set(
+			rel.sourceType,
+			(sourceTypeCounts.get(rel.sourceType) ?? 0) + 1,
+		);
+	}
+
 	return (
 		<div className="space-y-4">
 			<h3 className="text-lg font-semibold">Related Items</h3>
@@ -109,12 +122,32 @@ export function InverseRelationsPanel({
 					Link={Link}
 					client={client}
 					headers={headers}
+					ambiguous={(sourceTypeCounts.get(relation.sourceType) ?? 0) > 1}
 				/>
 			))}
 		</div>
 	);
 }
 
+/**
+ * Turn a relation field name like `compoundAId` / `categoryIds` into a
+ * friendlier label like `Compound A` / `Category` for display in the
+ * inverse-relations panel when two sections would otherwise share a title.
+ *
+ * Strips a trailing `Id` or `Ids`, splits camelCase boundaries, and
+ * title-cases the result. Leaves unrecognised shapes as-is so we never
+ * produce an empty string.
+ */
+function humanizeFieldName(fieldName: string): string {
+	const stripped = fieldName.replace(/Ids?$/, "") || fieldName;
+	const words = stripped
+		.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+		.replace(/[_-]+/g, " ")
+		.trim()
+		.split(/\s+/);
+	return words.map((w) => (w ? w[0]!.toUpperCase() + w.slice(1) : w)).join(" ");
+}
+
 interface InverseRelationSectionProps {
 	relation: InverseRelation;
 	contentTypeSlug: string;
@@ -128,6 +161,12 @@ interface InverseRelationSectionProps {
 	}>;
 	client: ReturnType<typeof createApiClient<CMSApiRouter>>;
 	headers?: HeadersInit;
+	/**
+	 * True when another inverse relation from the same `sourceType` is also
+	 * being rendered — in which case the field-name suffix is shown so the
+	 * user can tell the two cards apart.
+	 */
+	ambiguous: boolean;
 }
 
 function InverseRelationSection({
@@ -139,6 +178,7 @@ function InverseRelationSection({
 	Link,
 	client,
 	headers,
+	ambiguous,
 }: InverseRelationSectionProps) {
 	const [isExpanded, setIsExpanded] = useState(true);
 	const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
@@ -205,6 +245,7 @@ function InverseRelationSection({
 	};
 
 	const LinkComponent = Link ?? "a";
+	const fieldLabel = ambiguous ? humanizeFieldName(relation.fieldName) : null;
 
 	return (
 		<Card>
@@ -220,7 +261,13 @@ function InverseRelationSection({
 						) : (
 							<ChevronRight className="h-4 w-4" />
 						)}
-						{relation.sourceTypeName} ({total})
+						<span>{relation.sourceTypeName}</span>
+						{fieldLabel && (
+							<span className="font-normal text-muted-foreground">
+								· {fieldLabel}
+							</span>
+						)}
+						<span className="font-normal text-muted-foreground">({total})</span>
 					</CardTitle>
 				</button>
 			</CardHeader>
@@ -269,6 +316,7 @@ function InverseRelationSection({
 						>
 							<Plus className="h-4 w-4 mr-2" />
 							Add {relation.sourceTypeName}
+							{fieldLabel ? ` (${fieldLabel})` : ""}
 						</Button>
 					</div>
 				</CardContent>

package/src/plugins/form-builder/__tests__/schema-utils.test.ts

@@ -0,0 +1,362 @@
+/**
+ * Tests for the JSON Schema ↔ FormBuilderField conversion utilities.
+ *
+ * The form-builder ecosystem accepts two flavours of multi-step encoding:
+ *  - **Path A**: per-property `stepGroup` on each field (what the visual
+ *    FormBuilder writes on save — canonical wire format).
+ *  - **Path B**: root-level `stepGroupMap` (what `zodToFormSchema(schema, {
+ *    steps, stepGroupMap })` produces and what `SteppedAutoForm` reads).
+ *
+ * Both must be accepted on read so a Zod-seeded form opens with all fields
+ * correctly assigned to their step tabs in the admin canvas. Without Path B
+ * support, every field in a Zod-seeded multi-step form collapses onto step 0.
+ *
+ * @see packages/ui/src/components/form-builder/schema-utils.ts
+ * @see packages/ui/src/lib/schema-converter.ts
+ */
+
+import { describe, it, expect } from "vitest";
+import {
+	fieldsToJSONSchema,
+	jsonSchemaToFieldsAndSteps,
+} from "@workspace/ui/components/form-builder/schema-utils";
+import { defaultComponents } from "@workspace/ui/components/form-builder";
+import type {
+	JSONSchema,
+	FormStep,
+} from "@workspace/ui/components/form-builder/types";
+
+const STEPS: FormStep[] = [
+	{ id: "goals", title: "Your goals" },
+	{ id: "experience", title: "Experience" },
+	{ id: "constraints", title: "Constraints" },
+];
+
+describe("jsonSchemaToFieldsAndSteps", () => {
+	describe("core usage", () => {
+		it("returns empty result for null/undefined schema", () => {
+			expect(jsonSchemaToFieldsAndSteps(null, defaultComponents)).toEqual({
+				fields: [],
+				steps: [],
+			});
+			expect(jsonSchemaToFieldsAndSteps(undefined, defaultComponents)).toEqual({
+				fields: [],
+				steps: [],
+			});
+		});
+
+		it("returns empty result when schema has no properties", () => {
+			const schema = { type: "object", properties: {} } as JSONSchema;
+			expect(jsonSchemaToFieldsAndSteps(schema, defaultComponents)).toEqual({
+				fields: [],
+				steps: [],
+			});
+		});
+
+		it("parses a flat single-step schema with mixed field types", () => {
+			const schema: JSONSchema = {
+				type: "object",
+				properties: {
+					name: { type: "string", label: "Full Name" },
+					email: { type: "string", format: "email", label: "Email" },
+					age: { type: "number", label: "Age", minimum: 0 },
+				},
+				required: ["name", "email"],
+			};
+
+			const { fields, steps } = jsonSchemaToFieldsAndSteps(
+				schema,
+				defaultComponents,
+			);
+
+			expect(steps).toEqual([]);
+			expect(fields).toHaveLength(3);
+
+			const [name, email, age] = fields;
+			expect(name).toMatchObject({
+				id: "name",
+				type: "text",
+				props: { label: "Full Name", required: true },
+			});
+			expect(email).toMatchObject({
+				id: "email",
+				type: "email",
+				props: { label: "Email", required: true },
+			});
+			expect(age).toMatchObject({
+				id: "age",
+				type: "number",
+				props: { label: "Age", required: false },
+			});
+			expect(name?.stepGroup).toBeUndefined();
+			expect(email?.stepGroup).toBeUndefined();
+			expect(age?.stepGroup).toBeUndefined();
+		});
+
+		it("preserves the steps array on the output", () => {
+			const schema: JSONSchema = {
+				type: "object",
+				properties: {
+					name: { type: "string", label: "Name", stepGroup: 0 },
+				},
+				steps: STEPS,
+			};
+
+			const { steps } = jsonSchemaToFieldsAndSteps(schema, defaultComponents);
+			expect(steps).toEqual(STEPS);
+		});
+	});
+
+	describe("multi-step: Path A — per-property stepGroup", () => {
+		// Canonical format written by the visual FormBuilder when saving.
+		const schema: JSONSchema = {
+			type: "object",
+			properties: {
+				name: { type: "string", label: "Name", stepGroup: 0 },
+				email: {
+					type: "string",
+					format: "email",
+					label: "Email",
+					stepGroup: 0,
+				},
+				experience: {
+					type: "string",
+					enum: ["beginner", "advanced"],
+					label: "Experience",
+					stepGroup: 1,
+				},
+				agree: {
+					type: "boolean",
+					fieldType: "switch",
+					label: "I agree",
+					stepGroup: 2,
+				},
+			},
+			steps: STEPS,
+		};
+
+		it("assigns each field to the step encoded on its property", () => {
+			const { fields } = jsonSchemaToFieldsAndSteps(schema, defaultComponents);
+
+			expect(fields).toHaveLength(4);
+			const byId = new Map(fields.map((f) => [f.id, f]));
+			expect(byId.get("name")?.stepGroup).toBe(0);
+			expect(byId.get("email")?.stepGroup).toBe(0);
+			expect(byId.get("experience")?.stepGroup).toBe(1);
+			expect(byId.get("agree")?.stepGroup).toBe(2);
+		});
+	});
+
+	describe("multi-step: Path B — root-level stepGroupMap (regression)", () => {
+		// What `zodToFormSchema(LooksmaxQuizSchema, { steps, stepGroupMap })` writes.
+		// Before the fix, every field collapsed onto step 0 because the parser
+		// only consulted per-property `stepGroup`.
+		const schema: JSONSchema = {
+			type: "object",
+			properties: {
+				primaryGoal: {
+					type: "string",
+					enum: ["skin", "hair", "jaw", "lean", "all"],
+					label: "Primary goal",
+					fieldType: "radio",
+				},
+				experience: {
+					type: "string",
+					enum: ["none", "some-peptides", "full-cycle-history"],
+					label: "Experience",
+					fieldType: "radio",
+				},
+				riskTolerance: {
+					type: "string",
+					enum: ["low", "moderate", "high"],
+					label: "Risk tolerance",
+					fieldType: "radio",
+				},
+				noInjections: {
+					type: "boolean",
+					fieldType: "switch",
+					label: "No injections",
+				},
+				email: {
+					type: "string",
+					format: "email",
+					label: "Email",
+				},
+			},
+			steps: STEPS,
+			stepGroupMap: {
+				primaryGoal: 0,
+				experience: 1,
+				riskTolerance: 1,
+				noInjections: 2,
+				email: 2,
+			},
+		};
+
+		it("assigns step from root-level stepGroupMap when properties omit stepGroup", () => {
+			const { fields, steps } = jsonSchemaToFieldsAndSteps(
+				schema,
+				defaultComponents,
+			);
+
+			expect(steps).toEqual(STEPS);
+			expect(fields).toHaveLength(5);
+
+			const byId = new Map(fields.map((f) => [f.id, f]));
+			expect(byId.get("primaryGoal")?.stepGroup).toBe(0);
+			expect(byId.get("experience")?.stepGroup).toBe(1);
+			expect(byId.get("riskTolerance")?.stepGroup).toBe(1);
+			expect(byId.get("noInjections")?.stepGroup).toBe(2);
+			expect(byId.get("email")?.stepGroup).toBe(2);
+		});
+
+		it("works for fields that fall back to the generic text component", () => {
+			// Fields with unknown shapes fall through to the fallback `text` field
+			// in propertiesToFields. The fix must apply there too.
+			const schemaWithUnknown: JSONSchema = {
+				type: "object",
+				properties: {
+					mystery: {
+						// no `type` → no component matches → fallback to text
+						label: "Mystery field",
+					} as JSONSchema["properties"][string],
+				},
+				steps: STEPS,
+				stepGroupMap: { mystery: 2 },
+			};
+
+			const { fields } = jsonSchemaToFieldsAndSteps(
+				schemaWithUnknown,
+				defaultComponents,
+			);
+
+			expect(fields).toHaveLength(1);
+			expect(fields[0]?.id).toBe("mystery");
+			expect(fields[0]?.stepGroup).toBe(2);
+		});
+	});
+
+	describe("multi-step: precedence when both encodings are present", () => {
+		it("per-property stepGroup wins over stepGroupMap", () => {
+			const schema: JSONSchema = {
+				type: "object",
+				properties: {
+					primary: {
+						type: "string",
+						label: "Primary",
+						stepGroup: 0, // per-property says step 0
+					},
+					secondary: {
+						type: "string",
+						label: "Secondary",
+						stepGroup: 1, // per-property says step 1
+					},
+					tertiary: {
+						type: "string",
+						label: "Tertiary",
+						// no per-property — should use map
+					},
+				},
+				steps: STEPS,
+				stepGroupMap: {
+					primary: 99, // map disagrees, but per-property wins
+					secondary: 99,
+					tertiary: 2, // map applies
+				},
+			};
+
+			const { fields } = jsonSchemaToFieldsAndSteps(schema, defaultComponents);
+
+			const byId = new Map(fields.map((f) => [f.id, f]));
+			expect(byId.get("primary")?.stepGroup).toBe(0);
+			expect(byId.get("secondary")?.stepGroup).toBe(1);
+			expect(byId.get("tertiary")?.stepGroup).toBe(2);
+		});
+
+		it("missing entries in stepGroupMap leave stepGroup undefined", () => {
+			const schema: JSONSchema = {
+				type: "object",
+				properties: {
+					mapped: { type: "string", label: "Mapped" },
+					unmapped: { type: "string", label: "Unmapped" },
+				},
+				steps: STEPS,
+				stepGroupMap: { mapped: 1 },
+			};
+
+			const { fields } = jsonSchemaToFieldsAndSteps(schema, defaultComponents);
+			const byId = new Map(fields.map((f) => [f.id, f]));
+			expect(byId.get("mapped")?.stepGroup).toBe(1);
+			expect(byId.get("unmapped")?.stepGroup).toBeUndefined();
+		});
+	});
+});
+
+describe("fieldsToJSONSchema → jsonSchemaToFieldsAndSteps round-trip", () => {
+	it("normalises Path B (stepGroupMap) input to Path A (per-property) output", () => {
+		// This is the workflow that breaks the original bug: open a Zod-seeded
+		// form (Path B), save without changes — the FormBuilder writes Path A.
+		const inputSchema: JSONSchema = {
+			type: "object",
+			properties: {
+				goal: { type: "string", label: "Goal" },
+				risk: { type: "string", label: "Risk" },
+			},
+			steps: STEPS.slice(0, 2),
+			stepGroupMap: { goal: 0, risk: 1 },
+		};
+
+		const { fields, steps } = jsonSchemaToFieldsAndSteps(
+			inputSchema,
+			defaultComponents,
+		);
+
+		// Re-serialise with the same steps array
+		const roundTripped = fieldsToJSONSchema(fields, defaultComponents, steps);
+
+		// Output uses Path A (per-property stepGroup) and drops the root-level map
+		expect(roundTripped.properties.goal?.stepGroup).toBe(0);
+		expect(roundTripped.properties.risk?.stepGroup).toBe(1);
+		expect(roundTripped.steps).toEqual(STEPS.slice(0, 2));
+		expect(
+			(roundTripped as JSONSchema & { stepGroupMap?: unknown }).stepGroupMap,
+		).toBeUndefined();
+
+		// And re-parsing the normalised output produces the same field shape
+		const reparsed = jsonSchemaToFieldsAndSteps(
+			roundTripped,
+			defaultComponents,
+		);
+		const byIdOriginal = new Map(fields.map((f) => [f.id, f.stepGroup]));
+		const byIdRoundTrip = new Map(
+			reparsed.fields.map((f) => [f.id, f.stepGroup]),
+		);
+		expect(byIdRoundTrip).toEqual(byIdOriginal);
+	});
+
+	it("preserves Path A through a full round-trip", () => {
+		const inputSchema: JSONSchema = {
+			type: "object",
+			properties: {
+				name: { type: "string", label: "Name", stepGroup: 0 },
+				email: {
+					type: "string",
+					format: "email",
+					label: "Email",
+					stepGroup: 1,
+				},
+			},
+			steps: STEPS.slice(0, 2),
+		};
+
+		const { fields, steps } = jsonSchemaToFieldsAndSteps(
+			inputSchema,
+			defaultComponents,
+		);
+		const roundTripped = fieldsToJSONSchema(fields, defaultComponents, steps);
+
+		expect(roundTripped.properties.name?.stepGroup).toBe(0);
+		expect(roundTripped.properties.email?.stepGroup).toBe(1);
+		expect(roundTripped.steps).toEqual(STEPS.slice(0, 2));
+	});
+});