fumadocs-openapi/dist/ui/operation/usage-tabs/client.js

Generate MDX docs for your OpenAPI spec

'use client';

import { joinURL, resolveRequestData, resolveServerUrl, withBase } from "../../../utils/url.js";
import { useApiContext, useServerSelectContext } from "../../contexts/api.js";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/select.js";
import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";

//#region src/ui/operation/usage-tabs/client.tsx
const Context = createContext(null);
function UsageTabsProvider({ route, examples, defaultExampleId, children }) {
	const [example, setExample] = useState(() => defaultExampleId ?? examples.at(0)?.id);
	const listeners = useRef([]);
	return /* @__PURE__ */ jsx(Context, {
		value: useMemo(() => ({
			example,
			route,
			setExample: (newKey) => {
				const example$1 = examples.find((example$2) => example$2.id === newKey);
				if (!example$1) return;
				setExample(newKey);
				for (const listener of listeners.current) listener(example$1.data, example$1.encoded);
			},
			examples,
			setExampleData(data, encoded) {
				for (const item of examples) if (item.id === example) {
					item.data = data;
					item.encoded = encoded;
					break;
				}
				for (const listener of listeners.current) listener(data, encoded);
			},
			removeListener(listener) {
				listeners.current = listeners.current.filter((item) => item !== listener);
			},
			addListener(listener) {
				const active = examples.find((item) => item.id === example);
				listener(active.data, active.encoded);
				listeners.current.push(listener);
			}
		}), [
			example,
			route,
			examples
		]),
		children
	});
}
function useExampleRequests() {
	return use(Context);
}
function UsageTabsSelector() {
	const { example: key, setExample: setKey, examples } = useExampleRequests();
	const { APIExampleSelector: Override } = useApiContext().client.operation ?? {};
	if (Override) return /* @__PURE__ */ jsx(Override, {
		items: examples,
		value: key,
		onValueChange: setKey
	});
	function renderItem(item) {
		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
			className: "font-medium text-sm",
			children: item.name
		}), /* @__PURE__ */ jsx("span", {
			className: "text-fd-muted-foreground",
			children: item.description
		})] });
	}
	if (examples.length === 1) return null;
	const selected = examples.find((item) => item.id === key);
	return /* @__PURE__ */ jsxs(Select, {
		value: key,
		onValueChange: setKey,
		children: [/* @__PURE__ */ jsx(SelectTrigger, {
			className: "not-prose mb-2",
			children: selected && /* @__PURE__ */ jsx(SelectValue, {
				asChild: true,
				children: renderItem(selected)
			})
		}), /* @__PURE__ */ jsx(SelectContent, { children: examples.map((item) => /* @__PURE__ */ jsx(SelectItem, {
			value: item.id,
			children: renderItem(item)
		}, item.id)) })]
	});
}
function UsageTab(sample) {
	const { shikiOptions, mediaAdapters } = useApiContext();
	const { examples, example: selectedExampleId, route, addListener, removeListener } = useExampleRequests();
	const { server } = useServerSelectContext();
	const [data, setData] = useState(() => examples.find((example) => example.id === selectedExampleId)?.encoded);
	useEffect(() => {
		const listener = (_, encoded) => setData(encoded);
		addListener(listener);
		return () => {
			removeListener(listener);
		};
	}, [addListener, removeListener]);
	const code = useMemo(() => {
		if (!sample.source || !data) return;
		if (typeof sample.source === "string") return sample.source;
		return sample.source(joinURL(withBase(server ? resolveServerUrl(server.url, server.variables) : "/", typeof window !== "undefined" ? window.location.origin : "https://loading"), resolveRequestData(route, data)), data, {
			server: sample.serverContext,
			mediaAdapters
		});
	}, [
		mediaAdapters,
		sample,
		server,
		route,
		data
	]);
	if (!code || !sample) return null;
	return /* @__PURE__ */ jsx(DynamicCodeBlock, {
		lang: sample.lang,
		code,
		options: shikiOptions
	});
}

//#endregion
export { UsageTab, UsageTabsProvider, UsageTabsSelector, useExampleRequests };
//# sourceMappingURL=client.js.map