fumadocs-openapi 11.4.3 → 12.0.0

package/dist/packages/shared-api/dist/components/playground/inputs.js

@@ -0,0 +1,439 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.js";
+import { anyFields, useFieldInfo, useResolvedSchema, useSchemaContext, useSchemaUtils } from "./schema.js";
+import { Input } from "../input.js";
+import { useState } from "react";
+import { stringify } from "@fumadocs/json-schema";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useArray, useDataEngine, useFieldValue, useObject } from "@fumari/stf";
+import { stringifyFieldKey } from "@fumari/stf/lib/utils";
+import { useTranslations } from "@fuma-translate/react";
+import { ChevronRight, Plus, Trash2, X } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+//#region ../shared-api/dist/components/playground/inputs.js
+const fieldLabelVariants = cva("w-full inline-flex items-center gap-0.5");
+function FieldLabelType(props) {
+	return /* @__PURE__ */ jsx("code", {
+		...props,
+		className: cn("text-xs text-fd-muted-foreground", props.className),
+		children: props.children
+	});
+}
+const labelClassName = "text-xs font-medium text-fd-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
+function ObjectInput({ field: _field, fieldName, ...props }) {
+	const { generateDefault } = useSchemaUtils();
+	const field = useResolvedSchema(_field);
+	const schemaPropKeys = field.properties ? Object.keys(field.properties) : [];
+	const { patternProperties = {}, additionalProperties, "x-playground-lazy": isLazy = schemaPropKeys.length > 100 } = field;
+	const isDynamic = Object.keys(patternProperties).length > 0 || additionalProperties;
+	const [nextName, setNextName] = useState("");
+	const { properties, onAppend, onDelete, _objectKeys } = useObject(fieldName, {
+		lazy: isLazy,
+		defaultValue: () => generateDefault(field),
+		properties: field.properties ?? {},
+		fallback: additionalProperties,
+		patternProperties
+	});
+	const hiddenProperties = isLazy ? schemaPropKeys.filter((key) => !_objectKeys.includes(key)) : [];
+	const t = useTranslations({ note: "playground" });
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("grid grid-cols-1 gap-4 @md:grid-cols-2 *:data-[collapsible=true]:order-last", props.className),
+		children: [
+			isLazy && hiddenProperties.length > 0 && /* @__PURE__ */ jsxs(Select, {
+				value: "",
+				onValueChange: (v) => v !== null && onAppend(v),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					className: "col-span-full",
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("Show Property") })
+				}), /* @__PURE__ */ jsx(SelectContent, { children: hiddenProperties.map((key) => /* @__PURE__ */ jsx(SelectItem, {
+					value: key,
+					children: key
+				}, key)) })]
+			}),
+			properties.map((child) => {
+				let toolbar = null;
+				if (child.kind === "pattern" || child.kind === "fallback") toolbar = /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": t("Remove Item", { note: "aria-label" }),
+					className: cn(buttonVariants({
+						variant: "outline",
+						size: "icon-xs"
+					})),
+					onClick: () => {
+						onDelete(child.key);
+					},
+					children: /* @__PURE__ */ jsx(Trash2, {})
+				});
+				return /* @__PURE__ */ jsx(FieldSet, {
+					name: child.key,
+					field: child.info,
+					fieldName: child.field,
+					isRequired: field.required?.includes(child.key),
+					toolbar
+				}, child.key);
+			}),
+			isDynamic && /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2 order-last col-span-full",
+				children: [/* @__PURE__ */ jsx(Input, {
+					value: nextName,
+					placeholder: t("Enter Property Name"),
+					onChange: (e) => setNextName(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "Enter") {
+							setNextName("");
+							onAppend(nextName);
+							e.preventDefault();
+						}
+					}
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cn(buttonVariants({
+						variant: "secondary",
+						size: "sm"
+					}), "px-4"),
+					onClick: () => {
+						onAppend(nextName);
+						setNextName("");
+					},
+					children: t("New")
+				})]
+			})
+		]
+	});
+}
+function JsonInput({ fieldName }) {
+	const engine = useDataEngine();
+	const [error, setError] = useState(null);
+	const [value, setValue] = useState(() => JSON.stringify(engine.init(fieldName, {}), null, 2));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col bg-fd-secondary text-fd-secondary-foreground overflow-hidden border rounded-lg",
+		children: [/* @__PURE__ */ jsx("textarea", {
+			value,
+			className: "p-2 h-[240px] text-sm font-mono resize-none focus-visible:outline-none",
+			onChange: (v) => {
+				setValue(v.target.value);
+				try {
+					engine.update(fieldName, JSON.parse(v.target.value));
+					setError(null);
+				} catch (e) {
+					if (e instanceof Error) setError(e.message);
+				}
+			}
+		}), /* @__PURE__ */ jsx("p", {
+			className: "p-2 text-xs font-mono border-t text-red-400 empty:hidden",
+			children: error
+		})]
+	});
+}
+function FieldInput({ field, fieldName, isRequired, ...props }) {
+	const [value, setValue] = useFieldValue(fieldName);
+	const id = stringifyFieldKey(fieldName);
+	const t = useTranslations({ note: "playground" });
+	if (field.type === "null") return;
+	if (field.type === "string" && field.format === "binary") return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("label", {
+		htmlFor: id,
+		className: cn(buttonVariants({
+			variant: "secondary",
+			className: "w-full h-9 gap-2 truncate"
+		})),
+		children: value instanceof File ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-fd-muted-foreground text-xs",
+			children: t("Selected")
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate w-0 flex-1 text-end",
+			children: value.name
+		})] }) : /* @__PURE__ */ jsx("span", {
+			className: "text-fd-muted-foreground",
+			children: t("Upload")
+		})
+	}), /* @__PURE__ */ jsx("input", {
+		id,
+		type: "file",
+		multiple: false,
+		onChange: (e) => {
+			if (!e.target.files || e.target.files.length === 0) return;
+			setValue(e.target.files.item(0));
+		},
+		hidden: true
+	})] });
+	if (field.enum && field.enum.length > 0) {
+		const idx = field.enum.indexOf(value);
+		const items = [...field.enum.map((item, i) => ({
+			value: String(i),
+			label: typeof item === "string" ? item : JSON.stringify(item, null, 2)
+		})), ...!isRequired ? [{
+			value: "-1",
+			label: /* @__PURE__ */ jsx("span", {
+				className: "text-fd-muted-foreground",
+				children: t("Unset")
+			})
+		}] : []];
+		return /* @__PURE__ */ jsxs(Select, {
+			items,
+			value: idx === -1 && isRequired ? "" : String(idx),
+			onValueChange: (v) => setValue(field.enum[Number(v)]),
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				id,
+				...props,
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("Select") })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+				value: item.value,
+				children: item.label
+			}, item.value)) })]
+		});
+	}
+	if (field.type === "boolean") {
+		const items = [
+			{
+				value: "true",
+				label: "True"
+			},
+			{
+				value: "false",
+				label: "False"
+			},
+			...!isRequired ? [{
+				value: "undefined",
+				label: /* @__PURE__ */ jsx("span", {
+					className: "text-fd-muted-foreground",
+					children: t("Unset")
+				})
+			}] : []
+		];
+		return /* @__PURE__ */ jsxs(Select, {
+			items,
+			value: value === void 0 && isRequired ? "" : String(value),
+			onValueChange: (value) => setValue(value === "undefined" ? void 0 : value === "true"),
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				id,
+				...props,
+				children: /* @__PURE__ */ jsx(SelectValue, {})
+			}), /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+				value: item.value,
+				children: item.label
+			}, item.value)) })]
+		});
+	}
+	const isNumber = field.type === "integer" || field.type === "number";
+	return /* @__PURE__ */ jsx(Input, {
+		id,
+		placeholder: t("Enter value"),
+		type: isNumber ? "number" : "text",
+		step: field.type === "integer" ? 1 : void 0,
+		value: String(value ?? ""),
+		onChange: (e) => {
+			if (isNumber) setValue(Number.isNaN(e.target.valueAsNumber) ? void 0 : e.target.valueAsNumber);
+			else if (!isNumber) setValue(e.target.value);
+		}
+	});
+}
+function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth = 0, slotType, collapsible = true, ...props }) {
+	const { readOnly, writeOnly } = useSchemaContext();
+	const { generateDefault } = useSchemaUtils();
+	const field = useResolvedSchema(_field);
+	const [show, setShow] = useState(!collapsible);
+	const { info, updateInfo } = useFieldInfo(fieldName, field, depth);
+	const id = stringifyFieldKey(fieldName);
+	const dataEngine = useDataEngine();
+	const [isDefined] = useFieldValue(fieldName, { compute(currentValue) {
+		return currentValue !== void 0;
+	} });
+	if (_field === false) return;
+	if (field.readOnly && !readOnly) return;
+	if (field.writeOnly && !writeOnly) return;
+	if (collapsible && !isDefined && show) setShow(false);
+	function renderLabelTrigger(schema = field) {
+		if (!collapsible) return renderLabelName();
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cn(labelClassName, "inline-flex items-center gap-1 font-mono me-auto"),
+			onClick: () => {
+				dataEngine.init(fieldName, generateDefault(schema));
+				setShow((prev) => !prev);
+			},
+			children: [
+				/* @__PURE__ */ jsx(ChevronRight, { className: cn("size-3.5 text-fd-muted-foreground", show && "rotate-90") }),
+				name,
+				isRequired && /* @__PURE__ */ jsx("span", {
+					className: "text-red-400/80",
+					children: "*"
+				})
+			]
+		});
+	}
+	function renderLabelName() {
+		return /* @__PURE__ */ jsxs("span", {
+			className: cn(labelClassName, "font-mono me-auto"),
+			children: [name, isRequired && /* @__PURE__ */ jsx("span", {
+				className: "text-red-400/80 mx-1",
+				children: "*"
+			})]
+		});
+	}
+	function renderUnsetButton() {
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => dataEngine.delete(fieldName),
+			className: "text-fd-muted-foreground hover:text-fd-accent-foreground",
+			children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+		});
+	}
+	if (info.unionField && field[info.unionField] && field[info.unionField].length > 0) {
+		const union = field[info.unionField];
+		const showSelect = union.length > 1;
+		return /* @__PURE__ */ jsx(FieldSet, {
+			...props,
+			name,
+			fieldName,
+			isRequired,
+			field: union[info.oneOf],
+			depth: depth + 1,
+			slotType: showSelect ? false : slotType,
+			collapsible,
+			toolbar: /* @__PURE__ */ jsxs(Fragment$1, { children: [showSelect && /* @__PURE__ */ jsx("select", {
+				className: "text-xs font-mono",
+				value: info.oneOf,
+				onChange: (e) => {
+					updateInfo({ oneOf: Number(e.target.value) });
+				},
+				children: union.map((item, i) => /* @__PURE__ */ jsx("option", {
+					value: i,
+					className: "bg-fd-popover text-fd-popover-foreground",
+					children: stringify(item, { alias: true })
+				}, i))
+			}), toolbar] })
+		});
+	}
+	if (Array.isArray(field.type)) {
+		const showSelect = field.type.length > 1;
+		return /* @__PURE__ */ jsx(FieldSet, {
+			...props,
+			name,
+			fieldName,
+			isRequired,
+			field: {
+				...field,
+				type: info.selectedType
+			},
+			collapsible,
+			depth: depth + 1,
+			slotType: showSelect ? false : slotType,
+			toolbar: /* @__PURE__ */ jsxs(Fragment$1, { children: [showSelect && /* @__PURE__ */ jsx("select", {
+				className: "text-xs font-mono",
+				value: info.selectedType,
+				onChange: (e) => {
+					updateInfo({ selectedType: e.target.value });
+				},
+				children: field.type.map((item) => /* @__PURE__ */ jsx("option", {
+					value: item,
+					className: "bg-fd-popover text-fd-popover-foreground",
+					children: item
+				}, item))
+			}), toolbar] })
+		});
+	}
+	if (field.type === "object") return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		"data-collapsible": collapsible,
+		className: cn("flex flex-col gap-1.5 col-span-full @container", props.className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: fieldLabelVariants(),
+			children: [
+				renderLabelTrigger(field),
+				slotType ?? /* @__PURE__ */ jsx(FieldLabelType, { children: stringify(field) }),
+				toolbar,
+				!isRequired && isDefined && renderUnsetButton()
+			]
+		}), show && /* @__PURE__ */ jsx(ObjectInput, {
+			field,
+			fieldName,
+			className: "rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm"
+		})]
+	});
+	if (field.type === "array") return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		"data-collapsible": collapsible,
+		className: cn("flex flex-col gap-1.5 col-span-full", props.className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: fieldLabelVariants(),
+			children: [
+				renderLabelTrigger(),
+				slotType ?? /* @__PURE__ */ jsx(FieldLabelType, { children: stringify(field) }),
+				toolbar,
+				!isRequired && isDefined && renderUnsetButton()
+			]
+		}), show && /* @__PURE__ */ jsx(ArrayInput, {
+			fieldName,
+			items: field.items ?? anyFields,
+			className: "rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm"
+		})]
+	});
+	return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		className: cn("flex flex-col gap-1.5", props.className),
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: fieldLabelVariants(),
+			htmlFor: id,
+			children: [
+				renderLabelName(),
+				slotType ?? /* @__PURE__ */ jsx(FieldLabelType, { children: stringify(field) }),
+				toolbar,
+				!isRequired && isDefined && renderUnsetButton()
+			]
+		}), /* @__PURE__ */ jsx(FieldInput, {
+			field,
+			fieldName,
+			isRequired
+		})]
+	});
+}
+function ArrayInput({ fieldName, items: itemSchema, ...props }) {
+	const name = fieldName.at(-1) ?? "";
+	const { generateDefault } = useSchemaUtils();
+	const { items, insertItem, removeItem } = useArray(fieldName);
+	const t = useTranslations({ note: "playground" });
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("flex flex-col gap-2", props.className),
+		children: [items.map((item) => /* @__PURE__ */ jsx(FieldSet, {
+			name: /* @__PURE__ */ jsxs("span", {
+				className: "text-fd-muted-foreground",
+				children: [
+					name,
+					"[",
+					item.index,
+					"]"
+				]
+			}),
+			field: itemSchema,
+			isRequired: true,
+			fieldName: item.field,
+			toolbar: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t("Remove Item", { note: "aria-label" }),
+				className: cn(buttonVariants({
+					variant: "outline",
+					size: "icon-xs"
+				})),
+				onClick: () => removeItem(item.index),
+				children: /* @__PURE__ */ jsx(Trash2, {})
+			})
+		}, item.index)), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cn(buttonVariants({
+				variant: "secondary",
+				className: "gap-1.5 py-2",
+				size: "sm"
+			})),
+			onClick: () => {
+				insertItem(generateDefault(itemSchema));
+			},
+			children: [/* @__PURE__ */ jsx(Plus, { className: "size-4" }), t("New Item")]
+		})]
+	});
+}
+//#endregion
+export { FieldInput, FieldSet, JsonInput, ObjectInput };

package/dist/packages/shared-api/dist/components/playground/schema.js

@@ -0,0 +1,112 @@
+import { createContext, use, useMemo } from "react";
+import { dereference, matches, matchesType, mergeAllOf, sample } from "@fumadocs/json-schema";
+import { jsx } from "react/jsx-runtime";
+import { useDataEngine, useFieldValue, useNamespace } from "@fumari/stf";
+import { stringifyFieldKey } from "@fumari/stf/lib/utils";
+//#region ../shared-api/dist/components/playground/schema.js
+const SchemaContext = createContext(void 0);
+const anyFields = {
+	type: [
+		"string",
+		"number",
+		"boolean",
+		"array",
+		"object"
+	],
+	items: true,
+	additionalProperties: true
+};
+function SchemaProvider({ readOnly, writeOnly, docRoot, children }) {
+	return /* @__PURE__ */ jsx(SchemaContext.Provider, {
+		value: useMemo(() => ({
+			readOnly,
+			writeOnly,
+			docRoot
+		}), [
+			docRoot,
+			readOnly,
+			writeOnly
+		]),
+		children
+	});
+}
+function useSchemaContext() {
+	return use(SchemaContext);
+}
+/**
+* A hook to store dynamic info of a field, such as selected schema of `oneOf`.
+*
+* @param fieldName - field name of form.
+* @param schema - The **resolved** JSON Schema to generate initial values.
+* @param depth - The depth to avoid duplicated field name with same schema (e.g. nested `oneOf`).
+*/
+function useFieldInfo(fieldName, schema, depth = 0) {
+	const engine = useDataEngine();
+	const { generateDefault } = useSchemaUtils();
+	const fieldData = useNamespace({
+		namespace: `field-info:${depth}:${stringifyFieldKey(fieldName)}`,
+		initial() {
+			const value = engine.get(fieldName);
+			const out = { oneOf: -1 };
+			const union = getUnion(schema);
+			if (union) {
+				const [members, field] = union;
+				out.oneOf = members.findIndex((item) => typeof item === "object" && matches(item, value));
+				if (out.oneOf === -1) out.oneOf = 0;
+				out.unionField = field;
+			}
+			if (Array.isArray(schema.type)) {
+				const types = schema.type;
+				out.selectedType = types.find((type) => matchesType(value, type)) ?? types[0];
+			}
+			return out;
+		}
+	});
+	const [info, setInfo] = useFieldValue([], { stf: fieldData });
+	return {
+		info,
+		schema,
+		updateInfo(value) {
+			const updated = {
+				...info,
+				...value
+			};
+			if (updated.oneOf === info.oneOf && updated.selectedType === info.selectedType) return;
+			setInfo(updated);
+			let valueSchema = schema;
+			if (updated.unionField) valueSchema = schema[updated.unionField][updated.oneOf];
+			else if (updated.selectedType) valueSchema = {
+				...schema,
+				type: updated.selectedType,
+				examples: void 0
+			};
+			engine.update(fieldName, generateDefault(valueSchema));
+		}
+	};
+}
+function useSchemaUtils() {
+	const { readOnly } = useSchemaContext();
+	return { generateDefault(schema) {
+		return sample(schema, {
+			skipNonRequired: true,
+			skipReadOnly: !readOnly,
+			quiet: true
+		});
+	} };
+}
+/**
+* dereference & merge `allOf`.
+*/
+function useResolvedSchema(raw) {
+	return useMemo(() => {
+		let out = dereference(raw);
+		if (typeof out === "object" && out.allOf) out = mergeAllOf(out);
+		return typeof out === "boolean" ? anyFields : out;
+	}, [raw]);
+}
+function getUnion(schema) {
+	if (schema.anyOf) return [schema.anyOf, "anyOf"];
+	if (schema.oneOf) return [schema.oneOf, "oneOf"];
+}
+//#endregion
+export { SchemaProvider, anyFields, useFieldInfo, useResolvedSchema, useSchemaContext, useSchemaUtils };

package/dist/packages/shared-api/dist/components/popover.js

@@ -0,0 +1,23 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region ../shared-api/dist/components/popover.js
+const Popover$1 = Popover.Root;
+const PopoverTrigger = Popover.Trigger;
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		side: "bottom",
+		sideOffset,
+		className: "z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			className: (s) => cn("z-50 origin-(--transform-origin) overflow-y-auto max-h-(--available-height) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[closed]:animate-fd-popover-out data-[open]:animate-fd-popover-in", typeof className === "function" ? className(s) : className),
+			...props
+		})
+	}) });
+}
+Popover.Close;
+//#endregion
+export { Popover$1 as Popover, PopoverContent, PopoverTrigger };

package/dist/packages/shared-api/dist/components/schema/client.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { SchemaUIGeneratedData } from "@fumadocs/json-schema/react";
+//#region ../shared-api/dist/components/schema/client.d.ts
+export interface SchemaUIProps {
+  /** anchor ID of the root schema, links to a property are resolved against it */
+  rootId: string;
+  name: string;
+  required?: boolean;
+  as?: 'property' | 'body';
+  generated: SchemaUIGeneratedData;
+}
+//#endregion