fumadocs-openapi/dist/playground/components/server-select.js

Generate MDX docs for your OpenAPI spec

'use client';

import { resolveServerUrl, withBase } from "../../utils/url.js";
import { useApiContext, useServerSelectContext } from "../../ui/contexts/api.js";
import { cn } from "../../utils/cn.js";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/components/select.js";
import { Input, labelVariants } from "../../ui/components/input.js";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../ui/components/dialog.js";
import { useEffect, useEffectEvent, useState } from "react";
import { FormProvider, useController, useForm } from "react-hook-form";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/playground/components/server-select.tsx
function ServerSelect(props) {
	const { servers } = useApiContext();
	const { server, setServer, setServerVariables } = useServerSelectContext();
	const [open, setOpen] = useState(false);
	const [isMounted, setIsMounted] = useState(false);
	useEffect(() => {
		setIsMounted(true);
	}, []);
	if (servers.length <= 0) return;
	const serverSchema = server ? servers.find((obj) => obj.url === server.url) : null;
	return /* @__PURE__ */ jsxs(Dialog, {
		open,
		onOpenChange: setOpen,
		children: [/* @__PURE__ */ jsx(DialogTrigger, {
			className: "text-xs p-3 py-2 bg-fd-muted text-fd-muted-foreground transition-colors truncate hover:bg-fd-accent hover:text-fd-accent-foreground focus-visible:outline-none",
			children: isMounted ? withBase(server ? resolveServerUrl(server.url, server.variables) : "/", window.location.origin) : "loading..."
		}), /* @__PURE__ */ jsxs(DialogContent, {
			...props,
			children: [
				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Server URL" }), /* @__PURE__ */ jsx(DialogDescription, { children: "The base URL of your API endpoint." })] }),
				/* @__PURE__ */ jsxs(Select, {
					value: server?.url,
					onValueChange: setServer,
					children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }), /* @__PURE__ */ jsx(SelectContent, { children: servers.map((item) => /* @__PURE__ */ jsxs(SelectItem, {
						value: item.url,
						children: [/* @__PURE__ */ jsx("code", {
							className: "text-[0.8125rem]",
							children: item.url
						}), /* @__PURE__ */ jsx("p", {
							className: "text-fd-muted-foreground",
							children: item.description
						})]
					}, item.url)) })]
				}),
				server?.variables && serverSchema?.variables && /* @__PURE__ */ jsx(ServerSelectContent, {
					defaultValues: server.variables,
					schema: serverSchema.variables,
					onChange: setServerVariables
				}, server.url)
			]
		})]
	});
}
function ServerSelectContent({ defaultValues, onChange, schema }) {
	const form = useForm({ defaultValues });
	const onChangeDebounced = useEffectEvent(onChange);
	useEffect(() => {
		let timer = null;
		return form.subscribe({
			formState: { values: true },
			callback({ values }) {
				if (timer !== null) window.clearTimeout(timer);
				timer = window.setTimeout(() => onChangeDebounced(values), 500);
			}
		});
	}, []);
	return /* @__PURE__ */ jsx(FormProvider, {
		...form,
		children: /* @__PURE__ */ jsx("div", {
			className: "flex flex-col gap-4",
			children: Object.entries(schema).map(([key, variable]) => {
				return /* @__PURE__ */ jsxs("fieldset", {
					className: "flex flex-col gap-1",
					children: [
						/* @__PURE__ */ jsx("label", {
							className: cn(labelVariants()),
							htmlFor: key,
							children: key
						}),
						/* @__PURE__ */ jsx("p", {
							className: "text-xs text-fd-muted-foreground empty:hidden",
							children: variable.description
						}),
						/* @__PURE__ */ jsx(Field, {
							fieldName: key,
							variable
						})
					]
				}, key);
			})
		})
	});
}
function Field({ fieldName, variable }) {
	const { field } = useController({ name: fieldName });
	if (variable.enum) return /* @__PURE__ */ jsxs(Select, {
		value: field.value,
		onValueChange: field.onChange,
		children: [/* @__PURE__ */ jsx(SelectTrigger, {
			id: fieldName,
			ref: field.ref,
			children: /* @__PURE__ */ jsx(SelectValue, {})
		}), /* @__PURE__ */ jsx(SelectContent, { children: variable.enum.map((value) => /* @__PURE__ */ jsx(SelectItem, {
			value,
			children: value
		}, value)) })]
	});
	return /* @__PURE__ */ jsx(Input, {
		id: fieldName,
		...field
	});
}

//#endregion
export { ServerSelect as default };
//# sourceMappingURL=server-select.js.map