fumadocs-openapi 11.4.3 → 12.0.0

package/dist/ui/operation/response-tabs.js

@@ -1,68 +1,24 @@
 "use client";
-import { getPreferredType } from "../../utils/schema.js";
-import { useRenderContext } from "../contexts/api.js";
-import { ClientCodeBlock } from "../components/codeblock.js";
+import { useRenderContext } from "../../utils/create-page.js";
+import { useResponseExamples } from "../../operation.js";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "../../packages/shared-api/dist/components/accordion.js";
 import { Markdown } from "../components/markdown.js";
-import { getRaw } from "@scalar/json-magic/magic-proxy";
-import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ClientCodeBlock } from "../components/codeblock.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslations } from "@fuma-translate/react";
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "@fumadocs/api-docs/components/accordion";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-import { sample } from "@fumadocs/api-docs/schema/sample";
 //#region src/ui/operation/response-tabs.tsx
-function ResponseTabs({ operation }) {
+function ResponseTabs() {
 	const ctx = useRenderContext();
-	const { resolve } = ctx.schema;
-	const t = useTranslations({ note: "operation page" });
-	const tabs = useMemo(() => {
-		const tabs = [];
-		if (!operation.responses) return tabs;
-		for (const [code, item] of Object.entries(operation.responses)) {
-			const response = resolve(item);
-			const media = response.content ? getPreferredType(response.content) : null;
-			const responseOfType = media ? resolve(response.content?.[media]) : null;
-			const tab = {
-				code,
-				response,
-				mediaType: media
-			};
-			if (responseOfType?.examples) {
-				tab.examples ??= [];
-				for (const [key, item] of Object.entries(responseOfType.examples)) {
-					const example = resolve(item);
-					tab.examples.push({
-						label: example?.summary ?? t("Example {key}", { variables: { key } }),
-						sample: getRaw(example.value),
-						description: example?.description
-					});
-				}
-			} else if (responseOfType?.example || responseOfType?.schema) {
-				tab.examples ??= [];
-				tab.examples.push({
-					label: t("Example"),
-					sample: getRaw(responseOfType.example) ?? sample(responseOfType.schema)
-				});
-			}
-			tabs.push(tab);
-		}
-		return tabs;
-	}, [
-		operation.responses,
-		resolve,
-		t
-	]);
+	const tabs = useResponseExamples();
 	if (tabs.length === 0) return null;
-	const { renderResponseTabs = renderResponseTabsDefault } = ctx.content ?? {};
-	return renderResponseTabs({ tabs }, ctx);
-}
-function renderResponseTabsDefault({ tabs }) {
+	if (ctx.content?.renderResponseTabs) return ctx.content.renderResponseTabs({ tabs }, ctx);
 	return /* @__PURE__ */ jsx(ResponseTabsDefaultContent, { tabs });
 }
 function ResponseTabsDefaultContent({ tabs }) {
 	const t = useTranslations({ note: "operation page" });
 	function renderExampleContent(example) {
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [example.description && /* @__PURE__ */ jsx(Markdown, { md: example.description }), /* @__PURE__ */ jsx(ClientCodeBlock, {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [example.description && /* @__PURE__ */ jsx(Markdown, { md: example.description }), /* @__PURE__ */ jsx(ClientCodeBlock, {
 			lang: "json",
 			code: JSON.stringify(example.sample, null, 2)
 		})] });

package/dist/ui/operation/usage-tabs.js

@@ -1,38 +1,26 @@
 "use client";
-import { useRenderContext, useServerContext } from "../contexts/api.js";
+import { useRenderContext } from "../../utils/create-page.js";
+import { useCodeUsage, useExampleRequests, useOperation } from "../../operation.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../packages/shared-api/dist/components/select.js";
 import { ClientCodeBlock } from "../components/codeblock.js";
-import { createCodeUsageGeneratorRegistry, pathnameFromRequest } from "../../requests/generators/index.js";
-import { useOperationContext } from "./context.js";
 import { ResponseTabs } from "./response-tabs.js";
-import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@fumadocs/api-docs/components/select";
-import { joinURL, resolveServerUrl } from "@fumadocs/api-docs/utils/url";
 import { CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger } from "fumadocs-ui/components/codeblock";
 //#region src/ui/operation/usage-tabs.tsx
-function UsageTabs({ path, method, operation, pathItem }) {
+function UsageTabs() {
 	const ctx = useRenderContext();
-	let { renderAPIExampleUsageTabs, renderAPIExampleLayout } = ctx.content ?? {};
-	renderAPIExampleLayout ??= (slots) => {
-		return /* @__PURE__ */ jsxs("div", {
-			className: "prose-no-margin",
-			children: [
-				slots.selector,
-				slots.usageTabs,
-				slots.responseTabs
-			]
-		});
-	};
-	renderAPIExampleUsageTabs ??= (registry) => {
-		const map = Array.from(registry.map().entries());
-		if (map.length === 0) return null;
-		return /* @__PURE__ */ jsxs(CodeBlockTabs, {
+	const { operation, codeUsages } = useOperation();
+	let usageTabs;
+	if (ctx.content?.renderAPIExampleUsageTabs) usageTabs = ctx.content.renderAPIExampleUsageTabs(codeUsages, ctx);
+	else {
+		const items = Array.from(codeUsages.map());
+		usageTabs = items.length > 0 && /* @__PURE__ */ jsxs(CodeBlockTabs, {
 			groupId: "fumadocs_openapi_requests",
-			defaultValue: map[0][0],
-			children: [/* @__PURE__ */ jsx(CodeBlockTabsList, { children: map.map(([id, item]) => /* @__PURE__ */ jsx(CodeBlockTabsTrigger, {
+			defaultValue: items[0][0],
+			children: [/* @__PURE__ */ jsx(CodeBlockTabsList, { children: items.map(([id, item]) => /* @__PURE__ */ jsx(CodeBlockTabsTrigger, {
 				value: id,
 				children: item.label ?? item.lang
-			}, id)) }), map.map(([id, item]) => /* @__PURE__ */ jsx(CodeBlockTab, {
+			}, id)) }), items.map(([id, item]) => /* @__PURE__ */ jsx(CodeBlockTab, {
 				value: id,
 				children: /* @__PURE__ */ jsx(UsageTab, {
 					id,
@@ -40,38 +28,24 @@ function UsageTabs({ path, method, operation, pathItem }) {
 				})
 			}, id))]
 		});
-	};
-	const registry = useMemo(() => {
-		const registry = createCodeUsageGeneratorRegistry(ctx.codeUsages);
-		if (ctx.generateCodeSamples) for (const gen of ctx.generateCodeSamples({
-			path,
-			operation,
-			method,
-			pathItem
-		})) registry.addInline(gen);
-		if (operation["x-codeSamples"]) for (const sample of operation["x-codeSamples"]) registry.addInline(sample);
-		return registry;
-	}, [
-		ctx,
-		path,
-		operation,
-		method,
-		pathItem
-	]);
-	return renderAPIExampleLayout({
+	}
+	const slots = {
 		selector: operation["x-exclusiveCodeSample"] ? null : /* @__PURE__ */ jsx(UsageTabsSelector, {}),
-		usageTabs: renderAPIExampleUsageTabs(registry, ctx),
-		responseTabs: /* @__PURE__ */ jsx(ResponseTabs, { operation })
-	}, ctx);
+		usageTabs,
+		responseTabs: /* @__PURE__ */ jsx(ResponseTabs, {})
+	};
+	if (ctx.content?.renderAPIExampleLayout) return ctx.content.renderAPIExampleLayout(slots, ctx);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "prose-no-margin",
+		children: [
+			slots.selector,
+			slots.usageTabs,
+			slots.responseTabs
+		]
+	});
 }
 function UsageTabsSelector() {
-	const { example: key, setExample: setKey, examples } = useOperationContext();
-	const { APIExampleSelector: Override } = useRenderContext().operation ?? {};
-	if (Override) return /* @__PURE__ */ jsx(Override, {
-		items: examples,
-		value: key,
-		onValueChange: setKey
-	});
+	const { items, selected, select } = useExampleRequests();
 	function renderItem(item) {
 		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 			className: "font-medium text-sm",
@@ -81,58 +55,26 @@ function UsageTabsSelector() {
 			children: item.description
 		})] });
 	}
-	if (examples.length === 1) return null;
-	const items = examples.map((item) => ({
+	if (items.length === 1) return null;
+	const options = items.map((item) => ({
 		value: item.id,
 		label: renderItem(item)
 	}));
 	return /* @__PURE__ */ jsxs(Select, {
-		items,
-		value: key,
-		onValueChange: (v) => v !== null && setKey(v),
+		items: options,
+		value: selected,
+		onValueChange: (v) => v !== null && select(v),
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
 			className: "not-prose mb-2",
 			children: /* @__PURE__ */ jsx(SelectValue, {})
-		}), /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+		}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((item) => /* @__PURE__ */ jsx(SelectItem, {
 			value: item.value,
 			children: item.label
 		}, item.value)) })]
 	});
 }
 function UsageTab({ id, lang }) {
-	const { mediaAdapters, codeUsages } = useRenderContext();
-	const { examples, example: selectedExampleId, route, addListener, removeListener } = useOperationContext();
-	const { server } = useServerContext();
-	const codegen = codeUsages.get(id);
-	const [mounted, setMounted] = useState(false);
-	const [data, setData] = useState(() => examples.find((example) => example.id === selectedExampleId)?.encoded);
-	useEffect(() => {
-		const listener = (_, encoded) => setData(encoded);
-		addListener(listener);
-		setMounted(true);
-		return () => {
-			removeListener(listener);
-		};
-	}, [addListener, removeListener]);
-	const code = useMemo(() => {
-		if (!data) return;
-		const url = joinURL(server && mounted ? new URL(resolveServerUrl(server.url, server.variables), window.location.origin).href : "https://example.com", pathnameFromRequest(route, data));
-		if (!codegen) return;
-		return codegen.generate({
-			...data,
-			url
-		}, {
-			mediaAdapters,
-			custom: null
-		});
-	}, [
-		data,
-		server,
-		route,
-		mounted,
-		codegen,
-		mediaAdapters
-	]);
+	const code = useCodeUsage(id);
 	if (!code) return null;
 	return /* @__PURE__ */ jsx(ClientCodeBlock, {
 		lang,

package/dist/{playground → ui/playground}/client.d.ts

@@ -1,11 +1,12 @@
-import { BrowserFetcherOptions } from "./fetcher.js";
+import { ParameterObject } from "../../types.js";
+import { BrowserFetcherOptions } from "../../playground/fetcher.js";
 import { DefaultResultDisplay, ResultDisplayProps } from "./components/result-display.js";
-import { ParsedSchema } from "../utils/schema.js";
-import { HttpMethods, OperationObject, ParameterObject, PathItemObject } from "../types.js";
+import { Collapsible } from "../../packages/shared-api/dist/components/collapsible.js";
+import { AuthField } from "../../playground/auth.js";
 import { ComponentProps, FC, ReactNode } from "react";
-import { Collapsible } from "@fumadocs/api-docs/components/collapsible";
+import { JsonSchema } from "@fumadocs/json-schema";
 import { FieldKey } from "@fumari/stf";
-//#region src/playground/client.d.ts
+//#region src/ui/playground/client.d.ts
 export interface FormValues extends Record<string, unknown> {
   path: Record<string, unknown>;
   query: Record<string, unknown>;
@@ -13,11 +14,7 @@ export interface FormValues extends Record<string, unknown> {
   cookie: Record<string, unknown>;
   body: unknown;
 }
-export interface PlaygroundClientProps extends Omit<ComponentProps<'form'>, 'method'> {
-  route: string;
-  method: HttpMethods;
-  operation: OperationObject;
-  pathItem: PathItemObject;
+export interface PlaygroundClientProps extends Omit<ComponentProps<'form'>, 'method'>, PlaygroundClientOptions {
   writeOnly: boolean;
   readOnly: boolean;
 }
@@ -39,7 +36,7 @@ export interface PlaygroundClientOptions {
    * render the parameter inputs of API endpoint.
    *
    * for updating values, use:
-   * - the `Custom.useController()` from `fumadocs-openapi/playground/client`.
+   * - the `Custom.useController()` from `fumadocs-openapi/ui/playground/client`.
    *
    * Recommended types packages: `json-schema-typed`.
    */
@@ -52,20 +49,12 @@ export interface PlaygroundClientOptions {
   renderBodyField?: (fieldName: 'body', info: RequestBodyInfo) => ReactNode;
 }
 interface RequestBodyInfo {
-  schema: ParsedSchema;
+  schema: JsonSchema;
   mediaType: string;
 }
-export default function PlaygroundClient({ route, method, operation, pathItem, writeOnly, readOnly, ...rest }: PlaygroundClientProps): import("react").JSX.Element;
+export default function PlaygroundClient({ writeOnly, readOnly, transformAuthInputs, fetchOptions, components, renderParameterField, renderBodyField, ...rest }: PlaygroundClientProps): import("react").JSX.Element;
 declare const ParamTypes: readonly ['path', 'header', 'cookie', 'query'];
 type ParamType = (typeof ParamTypes)[number];
-export interface AuthField {
-  fieldName: FieldKey;
-  schemeId: string;
-  storageKey: string;
-  defaultValue: unknown;
-  children: ReactNode;
-  mapOutput?: (values: unknown) => unknown;
-}
 export declare function DefaultCollapsiblePanel({ title, children, ...props }: CollapsiblePanelProps): import("react").JSX.Element;
 export declare const Custom: {
   useController(fieldName: FieldKey, options?: {