fumadocs-openapi 10.4.1 → 10.6.0

package/dist/ui/create-client.js

@@ -0,0 +1,132 @@
+import { defaultAdapters } from "../requests/media/adapter.js";
+import { ClientCodeBlock, ClientCodeBlockProvider } from "./components/codeblock.js";
+import { dereferenceSync } from "../utils/schema/dereference.js";
+import { APIPage } from "./api-page.js";
+import { slug } from "github-slugger";
+import { Children, useMemo } from "react";
+import * as JsxRuntime from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Heading } from "fumadocs-ui/components/heading";
+import { remarkGfm } from "fumadocs-core/mdx-plugins/remark-gfm";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { remark } from "remark";
+import remarkRehype from "remark-rehype";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { compile } from "@fumari/json-schema-ts";
+import { defaultShikiFactory } from "fumadocs-core/highlight/shiki/full";
+//#region src/ui/create-client.tsx
+/**
+* Create `<APIPage />` for non-RSC environment, note that this may be unstable, and doesn't support the full set of features.
+*/
+function createClientAPIPage({ shiki = defaultShikiFactory, shikiOptions = { themes: {
+	light: "github-light",
+	dark: "github-dark"
+} }, generateTypeScriptDefinitions = (schema, ctx) => {
+	if (typeof schema !== "object") return;
+	try {
+		return compile(schema, {
+			name: "Response",
+			readOnly: ctx.readOnly,
+			writeOnly: ctx.writeOnly,
+			getSchemaId: ctx.schema.getRawRef
+		});
+	} catch (e) {
+		console.warn("Failed to generate typescript schema:", e);
+	}
+}, ...options } = {}) {
+	let processor;
+	const mdxComponents = {
+		...defaultMdxComponents,
+		img: void 0,
+		pre: MarkdownPre
+	};
+	function createMarkdownProcessor() {
+		function rehypeReact() {
+			this.compiler = (tree, file) => {
+				return toJsxRuntime(tree, {
+					development: false,
+					filePath: file.path,
+					...JsxRuntime,
+					components: mdxComponents
+				});
+			};
+		}
+		return remark().use(remarkGfm).use(remarkRehype).use(rehypeReact);
+	}
+	return function ClientAPIPage({ payload, ...props }) {
+		const processed = useMemo(() => {
+			const dereferenceMap = /* @__PURE__ */ new Map();
+			return {
+				bundled: payload.bundled,
+				dereferenced: dereferenceSync(payload.bundled, (schema, ref) => {
+					dereferenceMap.set(schema, ref);
+				}),
+				getRawRef(obj) {
+					return dereferenceMap.get(obj);
+				}
+			};
+		}, [payload.bundled]);
+		const ctx = useMemo(() => ({
+			schema: processed,
+			proxyUrl: payload.proxyUrl,
+			shiki,
+			shikiOptions,
+			generateTypeScriptDefinitions,
+			...options,
+			mediaAdapters: {
+				...defaultAdapters,
+				...options.mediaAdapters
+			},
+			renderHeading(depth, text, props) {
+				const id = typeof text === "string" ? slug(text) : props?.id;
+				if (!id) throw new Error("missing 'id' for non-string children");
+				if (options.renderHeading) return options.renderHeading({
+					id,
+					children: text,
+					...props
+				}, depth);
+				return /* @__PURE__ */ jsx(Heading, {
+					id,
+					as: `h${depth}`,
+					...props,
+					children: text
+				}, id);
+			},
+			renderMarkdown(text) {
+				if (options.renderMarkdown) return options.renderMarkdown(text);
+				processor ??= createMarkdownProcessor();
+				return processor.processSync({ value: text }).result;
+			},
+			renderCodeBlock(lang, code) {
+				if (options.renderCodeBlock) return options.renderCodeBlock({
+					lang,
+					code
+				});
+				return /* @__PURE__ */ jsx(ClientCodeBlock, {
+					lang,
+					code
+				});
+			}
+		}), [payload.proxyUrl, processed]);
+		return /* @__PURE__ */ jsx(ClientCodeBlockProvider, {
+			factory: shiki,
+			children: /* @__PURE__ */ jsx(APIPage, {
+				...props,
+				ctx
+			})
+		});
+	};
+}
+function MarkdownPre(props) {
+	const codeProps = Children.only(props.children).props;
+	const content = codeProps.children;
+	if (typeof content !== "string") return null;
+	return /* @__PURE__ */ jsx(ClientCodeBlock, {
+		lang: codeProps.className?.split(" ").find((v) => v.startsWith("language-"))?.slice(9) ?? "text",
+		code: content.trimEnd()
+	});
+}
+//#endregion
+export { createClientAPIPage };
+
+//# sourceMappingURL=create-client.js.map

package/dist/ui/create-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-client.js","names":[],"sources":["../../src/ui/create-client.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any -- rehype-react without types */\nimport type { Document, RenderContext } from '@/types';\nimport type { NoReference } from '@/utils/schema';\nimport type { ProcessedDocument } from '@/utils/process-document';\nimport { defaultAdapters } from '@/requests/media/adapter';\nimport {\n  Children,\n  type ComponentProps,\n  type ReactElement,\n  useMemo,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { Heading } from 'fumadocs-ui/components/heading';\nimport { remarkGfm } from 'fumadocs-core/mdx-plugins/remark-gfm';\nimport defaultMdxComponents from 'fumadocs-ui/mdx';\nimport { remark } from 'remark';\nimport remarkRehype from 'remark-rehype';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\nimport * as JsxRuntime from 'react/jsx-runtime';\nimport { APIPage, type ApiPageProps } from './api-page';\nimport type { CreateAPIPageOptions } from './base';\nimport { defaultShikiFactory } from 'fumadocs-core/highlight/shiki/full';\nimport { compile } from '@fumari/json-schema-ts';\nimport { ClientCodeBlock, ClientCodeBlockProvider } from './components/codeblock';\nimport { dereferenceSync } from '@/utils/schema/dereference';\nimport type { JSONSchema } from 'json-schema-typed/draft-2020-12';\nimport { slug } from 'github-slugger';\n\nexport interface ClientApiPageProps extends Omit<ApiPageProps, 'document'> {\n  payload: ClientApiPagePayload;\n}\n\nexport interface ClientApiPagePayload {\n  bundled: Document;\n  proxyUrl?: string;\n}\n\nexport type CreateClientAPIPageOptions = Omit<\n  Partial<CreateAPIPageOptions>,\n  'generateTypeScriptSchema'\n>;\n\n/**\n * Create `<APIPage />` for non-RSC environment, note that this may be unstable, and doesn't support the full set of features.\n */\nexport function createClientAPIPage({\n  shiki = defaultShikiFactory,\n  shikiOptions = { themes: { light: 'github-light', dark: 'github-dark' } },\n  generateTypeScriptDefinitions = (schema, ctx) => {\n    if (typeof schema !== 'object') return;\n\n    try {\n      return compile(schema, {\n        name: 'Response',\n        readOnly: ctx.readOnly,\n        writeOnly: ctx.writeOnly,\n        getSchemaId: ctx.schema.getRawRef,\n      });\n    } catch (e) {\n      console.warn('Failed to generate typescript schema:', e);\n    }\n  },\n  ...options\n}: CreateClientAPIPageOptions = {}): FC<ClientApiPageProps> {\n  let processor: ReturnType<typeof createMarkdownProcessor>;\n  const mdxComponents = {\n    ...defaultMdxComponents,\n    img: undefined,\n    pre: MarkdownPre,\n  };\n\n  function createMarkdownProcessor() {\n    function rehypeReact(this: any) {\n      this.compiler = (tree: any, file: any) => {\n        return toJsxRuntime(tree, {\n          development: false,\n          filePath: file.path,\n          ...JsxRuntime,\n          components: mdxComponents,\n        });\n      };\n    }\n\n    return remark().use(remarkGfm).use(remarkRehype).use(rehypeReact);\n  }\n\n  return function ClientAPIPage({ payload, ...props }) {\n    const processed = useMemo<ProcessedDocument>(() => {\n      const dereferenceMap = new Map<object, string>();\n\n      return {\n        bundled: payload.bundled,\n        dereferenced: dereferenceSync(payload.bundled as JSONSchema, (schema, ref) => {\n          dereferenceMap.set(schema as object, ref);\n        }) as NoReference<Document>,\n        getRawRef(obj) {\n          return dereferenceMap.get(obj);\n        },\n      };\n    }, [payload.bundled]);\n\n    const ctx: RenderContext = useMemo(\n      () => ({\n        schema: processed,\n        proxyUrl: payload.proxyUrl,\n        shiki,\n        shikiOptions,\n        generateTypeScriptDefinitions,\n        ...options,\n        mediaAdapters: {\n          ...defaultAdapters,\n          ...options.mediaAdapters,\n        },\n        renderHeading(depth, text, props) {\n          const id = typeof text === 'string' ? slug(text) : props?.id;\n          if (!id) throw new Error(\"missing 'id' for non-string children\");\n\n          if (options.renderHeading) {\n            return options.renderHeading({ id, children: text, ...props }, depth);\n          }\n\n          return (\n            <Heading id={id} key={id} as={`h${depth}` as `h1`} {...props}>\n              {text}\n            </Heading>\n          );\n        },\n        renderMarkdown(text) {\n          if (options.renderMarkdown) return options.renderMarkdown(text);\n          processor ??= createMarkdownProcessor();\n\n          return processor.processSync({\n            value: text,\n          }).result as ReactNode;\n        },\n        renderCodeBlock(lang, code) {\n          if (options.renderCodeBlock) {\n            return options.renderCodeBlock({ lang, code });\n          }\n\n          return <ClientCodeBlock lang={lang} code={code} />;\n        },\n      }),\n      [payload.proxyUrl, processed],\n    );\n\n    return (\n      <ClientCodeBlockProvider factory={shiki}>\n        <APIPage {...props} ctx={ctx} />\n      </ClientCodeBlockProvider>\n    );\n  };\n}\n\nfunction MarkdownPre(props: ComponentProps<'pre'>) {\n  const code = Children.only(props.children) as ReactElement;\n  const codeProps = code.props as ComponentProps<'code'>;\n  const content = codeProps.children;\n  if (typeof content !== 'string') return null;\n\n  const lang =\n    codeProps.className\n      ?.split(' ')\n      .find((v) => v.startsWith('language-'))\n      ?.slice('language-'.length) ?? 'text';\n\n  return <ClientCodeBlock lang={lang} code={content.trimEnd()} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,oBAAoB,EAClC,QAAQ,qBACR,eAAe,EAAE,QAAQ;CAAE,OAAO;CAAgB,MAAM;CAAe,EAAE,EACzE,iCAAiC,QAAQ,QAAQ;AAC/C,KAAI,OAAO,WAAW,SAAU;AAEhC,KAAI;AACF,SAAO,QAAQ,QAAQ;GACrB,MAAM;GACN,UAAU,IAAI;GACd,WAAW,IAAI;GACf,aAAa,IAAI,OAAO;GACzB,CAAC;UACK,GAAG;AACV,UAAQ,KAAK,yCAAyC,EAAE;;GAG5D,GAAG,YAC2B,EAAE,EAA0B;CAC1D,IAAI;CACJ,MAAM,gBAAgB;EACpB,GAAG;EACH,KAAK,KAAA;EACL,KAAK;EACN;CAED,SAAS,0BAA0B;EACjC,SAAS,cAAuB;AAC9B,QAAK,YAAY,MAAW,SAAc;AACxC,WAAO,aAAa,MAAM;KACxB,aAAa;KACb,UAAU,KAAK;KACf,GAAG;KACH,YAAY;KACb,CAAC;;;AAIN,SAAO,QAAQ,CAAC,IAAI,UAAU,CAAC,IAAI,aAAa,CAAC,IAAI,YAAY;;AAGnE,QAAO,SAAS,cAAc,EAAE,SAAS,GAAG,SAAS;EACnD,MAAM,YAAY,cAAiC;GACjD,MAAM,iCAAiB,IAAI,KAAqB;AAEhD,UAAO;IACL,SAAS,QAAQ;IACjB,cAAc,gBAAgB,QAAQ,UAAwB,QAAQ,QAAQ;AAC5E,oBAAe,IAAI,QAAkB,IAAI;MACzC;IACF,UAAU,KAAK;AACb,YAAO,eAAe,IAAI,IAAI;;IAEjC;KACA,CAAC,QAAQ,QAAQ,CAAC;EAErB,MAAM,MAAqB,eAClB;GACL,QAAQ;GACR,UAAU,QAAQ;GAClB;GACA;GACA;GACA,GAAG;GACH,eAAe;IACb,GAAG;IACH,GAAG,QAAQ;IACZ;GACD,cAAc,OAAO,MAAM,OAAO;IAChC,MAAM,KAAK,OAAO,SAAS,WAAW,KAAK,KAAK,GAAG,OAAO;AAC1D,QAAI,CAAC,GAAI,OAAM,IAAI,MAAM,uCAAuC;AAEhE,QAAI,QAAQ,cACV,QAAO,QAAQ,cAAc;KAAE;KAAI,UAAU;KAAM,GAAG;KAAO,EAAE,MAAM;AAGvE,WACE,oBAAC,SAAD;KAAa;KAAa,IAAI,IAAI;KAAiB,GAAI;eACpD;KACO,EAFY,GAEZ;;GAGd,eAAe,MAAM;AACnB,QAAI,QAAQ,eAAgB,QAAO,QAAQ,eAAe,KAAK;AAC/D,kBAAc,yBAAyB;AAEvC,WAAO,UAAU,YAAY,EAC3B,OAAO,MACR,CAAC,CAAC;;GAEL,gBAAgB,MAAM,MAAM;AAC1B,QAAI,QAAQ,gBACV,QAAO,QAAQ,gBAAgB;KAAE;KAAM;KAAM,CAAC;AAGhD,WAAO,oBAAC,iBAAD;KAAuB;KAAY;KAAQ,CAAA;;GAErD,GACD,CAAC,QAAQ,UAAU,UAAU,CAC9B;AAED,SACE,oBAAC,yBAAD;GAAyB,SAAS;aAChC,oBAAC,SAAD;IAAS,GAAI;IAAY;IAAO,CAAA;GACR,CAAA;;;AAKhC,SAAS,YAAY,OAA8B;CAEjD,MAAM,YADO,SAAS,KAAK,MAAM,SAAS,CACnB;CACvB,MAAM,UAAU,UAAU;AAC1B,KAAI,OAAO,YAAY,SAAU,QAAO;AAQxC,QAAO,oBAAC,iBAAD;EAAiB,MALtB,UAAU,WACN,MAAM,IAAI,CACX,MAAM,MAAM,EAAE,WAAW,YAAY,CAAC,EACrC,MAAM,EAAmB,IAAI;EAEC,MAAM,QAAQ,SAAS;EAAI,CAAA"}

package/dist/ui/index.d.ts

@@ -1,3 +1,11 @@
+import { OpenAPIServer } from "../server/create.js";
 import { ApiPageProps, OperationItem, WebhookItem } from "./api-page.js";
-import { CreateAPIPageOptions, createAPIPage } from "./full.js";
-export { type ApiPageProps, CreateAPIPageOptions, type OperationItem, type WebhookItem, createAPIPage };
+import { CreateAPIPageOptions as CreateAPIPageOptions$1, ServerApiPageProps } from "./base.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/index.d.ts
+type CreateAPIPageOptions = Partial<CreateAPIPageOptions$1>;
+declare function createAPIPage(server: OpenAPIServer, options?: CreateAPIPageOptions): (props: ServerApiPageProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type ApiPageProps, CreateAPIPageOptions, type OperationItem, type WebhookItem, createAPIPage };
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/ui/index.tsx"],"mappings":";;;;;;KAKY,oBAAA,GAAuB,OAAA,CAAQ,sBAAA;AAAA,iBAE3B,aAAA,CAAc,MAAA,EAAQ,aAAA,EAAe,OAAA,GAAS,oBAAA,IAOhC,KAAA,EAAO,kBAAA,KAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/index.js

@@ -1,2 +1,22 @@
-import { createAPIPage } from "./full.js";
+import { createAPIPage as createAPIPage$1 } from "./base.js";
+import { FullProvider } from "./client/full.js";
+import { jsx } from "react/jsx-runtime";
+import { defaultShikiFactory } from "fumadocs-core/highlight/shiki/full";
+//#region src/ui/index.tsx
+function createAPIPage(server, options = {}) {
+	const APIPage = createAPIPage$1(server, {
+		shiki: defaultShikiFactory,
+		shikiOptions: { themes: {
+			light: "github-light",
+			dark: "github-dark"
+		} },
+		...options
+	});
+	return function APIPageFull(props) {
+		return /* @__PURE__ */ jsx(FullProvider, { children: /* @__PURE__ */ jsx(APIPage, { ...props }) });
+	};
+}
+//#endregion
 export { createAPIPage };
+
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["base.createAPIPage"],"sources":["../../src/ui/index.tsx"],"sourcesContent":["import type { OpenAPIServer } from '@/server';\nimport * as base from './base';\nimport { defaultShikiFactory } from 'fumadocs-core/highlight/shiki/full';\nimport { FullProvider } from './client/full';\n\nexport type CreateAPIPageOptions = Partial<base.CreateAPIPageOptions>;\n\nexport function createAPIPage(server: OpenAPIServer, options: CreateAPIPageOptions = {}) {\n  const APIPage = base.createAPIPage(server, {\n    shiki: defaultShikiFactory,\n    shikiOptions: { themes: { light: 'github-light', dark: 'github-dark' } },\n    ...options,\n  });\n\n  return function APIPageFull(props: base.ServerApiPageProps) {\n    return (\n      <FullProvider>\n        <APIPage {...props} />\n      </FullProvider>\n    );\n  };\n}\n\nexport type { ApiPageProps, OperationItem, WebhookItem } from './api-page';\n"],"mappings":";;;;;AAOA,SAAgB,cAAc,QAAuB,UAAgC,EAAE,EAAE;CACvF,MAAM,UAAUA,gBAAmB,QAAQ;EACzC,OAAO;EACP,cAAc,EAAE,QAAQ;GAAE,OAAO;GAAgB,MAAM;GAAe,EAAE;EACxE,GAAG;EACJ,CAAC;AAEF,QAAO,SAAS,YAAY,OAAgC;AAC1D,SACE,oBAAC,cAAD,EAAA,UACE,oBAAC,SAAD,EAAS,GAAI,OAAS,CAAA,EACT,CAAA"}

package/dist/ui/operation/client.js

@@ -1,13 +1,54 @@
 "use client";
 import { cn } from "../../utils/cn.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/select.js";
 import { useTranslations } from "../client/i18n.js";
-import { createContext, use, useMemo, useState } from "react";
+import { createContext, use, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
 import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
 //#region src/ui/operation/client.tsx
+const OperationContext = createContext(null);
+function OperationProvider({ route, examples, defaultExampleId, children }) {
+	const [example, setExample] = useState(() => defaultExampleId ?? examples.at(0)?.id);
+	const listeners = useRef([]);
+	return /* @__PURE__ */ jsx(OperationContext, {
+		value: useMemo(() => ({
+			example,
+			route,
+			setExample(newKey) {
+				const example = examples.find((example) => example.id === newKey);
+				if (!example) return;
+				setExample(newKey);
+				for (const listener of listeners.current) listener(example.data, example.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 useOperationContext() {
+	return use(OperationContext);
+}
 function CopyTypeScriptPanel({ name, code, className }) {
 	const [isChecked, onCopy] = useCopyButton(() => {
 		navigator.clipboard.writeText(code);
@@ -33,40 +74,7 @@ function CopyTypeScriptPanel({ name, code, className }) {
 		})]
 	});
 }
-const Context = createContext(null);
-function SelectTabs({ defaultValue, children }) {
-	const [type, setType] = useState(defaultValue ?? null);
-	return /* @__PURE__ */ jsx(Context, {
-		value: useMemo(() => ({
-			type,
-			setType
-		}), [type]),
-		children
-	});
-}
-function SelectTab({ value, ...props }) {
-	if (value !== use(Context)?.type) return;
-	return /* @__PURE__ */ jsx("div", {
-		...props,
-		children: props.children
-	});
-}
-function SelectTabTrigger({ items, className, ...props }) {
-	const { type, setType } = use(Context);
-	return /* @__PURE__ */ jsxs(Select, {
-		value: type ?? "",
-		onValueChange: setType,
-		children: [/* @__PURE__ */ jsx(SelectTrigger, {
-			className: cn("not-prose w-fit min-w-0 *:min-w-0", className),
-			...props,
-			children: /* @__PURE__ */ jsx(SelectValue, {})
-		}), /* @__PURE__ */ jsx(SelectContent, { children: items.map(({ label, value }) => /* @__PURE__ */ jsx(SelectItem, {
-			value,
-			children: label
-		}, value)) })]
-	});
-}
 //#endregion
-export { CopyTypeScriptPanel, SelectTab, SelectTabTrigger, SelectTabs };
+export { CopyTypeScriptPanel, OperationProvider, useOperationContext };
 
 //# sourceMappingURL=client.js.map

package/dist/ui/operation/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":[],"sources":["../../../src/ui/operation/client.tsx"],"sourcesContent":["'use client';\n\nimport { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';\nimport { buttonVariants } from 'fumadocs-ui/components/ui/button';\nimport { cn } from '@/utils/cn';\nimport { Check, Copy } from 'lucide-react';\nimport { type ComponentProps, createContext, type ReactNode, use, useMemo, useState } from 'react';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/ui/components/select';\nimport { useTranslations } from '@/ui/client/i18n';\n\nexport function CopyTypeScriptPanel({\n  name,\n  code,\n  className,\n}: {\n  code: string;\n  name: 'response body' | 'request body';\n  className?: string;\n}) {\n  const [isChecked, onCopy] = useCopyButton(() => {\n    void navigator.clipboard.writeText(code);\n  });\n  const t = useTranslations();\n  const useTypeText = t.useTypeInTypeScript.replace('{name}', name);\n\n  return (\n    <div\n      className={cn(\n        'flex items-start justify-between gap-2 bg-fd-card text-fd-card-foreground border rounded-xl p-3 not-prose mb-4 last:mb-0',\n        className,\n      )}\n    >\n      <div>\n        <p className=\"font-medium text-sm mb-2\">{t.typeScriptDefinitions}</p>\n        <p className=\"text-xs text-fd-muted-foreground\">{useTypeText}</p>\n      </div>\n      <button\n        onClick={onCopy}\n        className={cn(\n          buttonVariants({\n            color: 'secondary',\n            className: 'p-2 gap-2',\n            size: 'sm',\n          }),\n        )}\n      >\n        {isChecked ? <Check className=\"size-3.5\" /> : <Copy className=\"size-3.5\" />}\n        {t.copy}\n      </button>\n    </div>\n  );\n}\n\nconst Context = createContext<{\n  type: string | null;\n  setType: (type: string) => void;\n} | null>(null);\n\nexport function SelectTabs({\n  defaultValue,\n  children,\n}: {\n  defaultValue?: string;\n  children: ReactNode;\n}) {\n  const [type, setType] = useState<string | null>(defaultValue ?? null);\n\n  return <Context value={useMemo(() => ({ type, setType }), [type])}>{children}</Context>;\n}\n\nexport function SelectTab({\n  value,\n  ...props\n}: ComponentProps<'div'> & {\n  value: string;\n}) {\n  const ctx = use(Context);\n  if (value !== ctx?.type) return;\n\n  return <div {...props}>{props.children}</div>;\n}\n\nexport function SelectTabTrigger({\n  items,\n  className,\n  ...props\n}: ComponentProps<typeof SelectTrigger> & {\n  items: {\n    label: ReactNode;\n    value: string;\n  }[];\n}) {\n  const { type, setType } = use(Context)!;\n\n  return (\n    <Select value={type ?? ''} onValueChange={setType}>\n      <SelectTrigger className={cn('not-prose w-fit min-w-0 *:min-w-0', className)} {...props}>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectContent>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,oBAAoB,EAClC,MACA,MACA,aAKC;CACD,MAAM,CAAC,WAAW,UAAU,oBAAoB;AACzC,YAAU,UAAU,UAAU,KAAK;GACxC;CACF,MAAM,IAAI,iBAAiB;CAC3B,MAAM,cAAc,EAAE,oBAAoB,QAAQ,UAAU,KAAK;AAEjE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,4HACA,UACD;YAJH,CAME,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;GAAG,WAAU;aAA4B,EAAE;GAA0B,CAAA,EACrE,oBAAC,KAAD;GAAG,WAAU;aAAoC;GAAgB,CAAA,CAC7D,EAAA,CAAA,EACN,qBAAC,UAAD;GACE,SAAS;GACT,WAAW,GACT,eAAe;IACb,OAAO;IACP,WAAW;IACX,MAAM;IACP,CAAC,CACH;aARH,CAUG,YAAY,oBAAC,OAAD,EAAO,WAAU,YAAa,CAAA,GAAG,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,EAC1E,EAAE,KACI;KACL;;;AAIV,MAAM,UAAU,cAGN,KAAK;AAEf,SAAgB,WAAW,EACzB,cACA,YAIC;CACD,MAAM,CAAC,MAAM,WAAW,SAAwB,gBAAgB,KAAK;AAErE,QAAO,oBAAC,SAAD;EAAS,OAAO,eAAe;GAAE;GAAM;GAAS,GAAG,CAAC,KAAK,CAAC;EAAG;EAAmB,CAAA;;AAGzF,SAAgB,UAAU,EACxB,OACA,GAAG,SAGF;AAED,KAAI,UADQ,IAAI,QAAQ,EACL,KAAM;AAEzB,QAAO,oBAAC,OAAD;EAAK,GAAI;YAAQ,MAAM;EAAe,CAAA;;AAG/C,SAAgB,iBAAiB,EAC/B,OACA,WACA,GAAG,SAMF;CACD,MAAM,EAAE,MAAM,YAAY,IAAI,QAAQ;AAEtC,QACE,qBAAC,QAAD;EAAQ,OAAO,QAAQ;EAAI,eAAe;YAA1C,CACE,oBAAC,eAAD;GAAe,WAAW,GAAG,qCAAqC,UAAU;GAAE,GAAI;aAChF,oBAAC,aAAD,EAAe,CAAA;GACD,CAAA,EAChB,oBAAC,eAAD,EAAA,UACG,MAAM,KAAK,EAAE,OAAO,YACnB,oBAAC,YAAD;GAA+B;aAC5B;GACU,EAFI,MAEJ,CACb,EACY,CAAA,CACT"}
+{"version":3,"file":"client.js","names":[],"sources":["../../../src/ui/operation/client.tsx"],"sourcesContent":["'use client';\n\nimport { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';\nimport { buttonVariants } from 'fumadocs-ui/components/ui/button';\nimport { cn } from '@/utils/cn';\nimport { Check, Copy } from 'lucide-react';\nimport { createContext, type ReactNode, use, useMemo, useRef, useState } from 'react';\nimport { useTranslations } from '@/ui/client/i18n';\nimport type { ExampleRequestItem } from './get-example-requests';\nimport type { RawRequestData, RequestData } from '@/requests/types';\n\nexport type ExampleUpdateListener = (data: RawRequestData, encoded: RequestData) => void;\n\nconst OperationContext = createContext<{\n  route: string;\n  examples: ExampleRequestItem[];\n  example: string | undefined;\n  setExample: (id: string) => void;\n  setExampleData: (data: RawRequestData, encoded: RequestData) => void;\n\n  addListener: (listener: ExampleUpdateListener) => void;\n  removeListener: (listener: ExampleUpdateListener) => void;\n} | null>(null);\n\nexport function OperationProvider({\n  route,\n  examples,\n  defaultExampleId,\n  children,\n}: {\n  route: string;\n  examples: ExampleRequestItem[];\n  defaultExampleId?: string;\n  children: ReactNode;\n}) {\n  const [example, setExample] = useState(() => defaultExampleId ?? examples.at(0)?.id);\n  const listeners = useRef<ExampleUpdateListener[]>([]);\n\n  return (\n    <OperationContext\n      value={useMemo(\n        () => ({\n          example,\n          route,\n          setExample(newKey: string) {\n            const example = examples.find((example) => example.id === newKey);\n            if (!example) return;\n\n            setExample(newKey);\n            for (const listener of listeners.current) {\n              listener(example.data, example.encoded);\n            }\n          },\n          examples,\n          setExampleData(data, encoded) {\n            for (const item of examples) {\n              if (item.id === example) {\n                // persistent changes\n                item.data = data;\n                item.encoded = encoded;\n                break;\n              }\n            }\n\n            for (const listener of listeners.current) {\n              listener(data, encoded);\n            }\n          },\n          removeListener(listener) {\n            listeners.current = listeners.current.filter((item) => item !== listener);\n          },\n          addListener(listener) {\n            // initial call to listeners to ensure their data is the latest\n            // this is necessary to avoid race conditions between `useEffect()`\n            const active = examples.find((item) => item.id === example)!;\n\n            listener(active.data, active.encoded);\n            listeners.current.push(listener);\n          },\n        }),\n        [example, route, examples],\n      )}\n    >\n      {children}\n    </OperationContext>\n  );\n}\n\nexport function useOperationContext() {\n  return use(OperationContext)!;\n}\n\nexport function CopyTypeScriptPanel({\n  name,\n  code,\n  className,\n}: {\n  code: string;\n  name: 'response body' | 'request body';\n  className?: string;\n}) {\n  const [isChecked, onCopy] = useCopyButton(() => {\n    void navigator.clipboard.writeText(code);\n  });\n  const t = useTranslations();\n  const useTypeText = t.useTypeInTypeScript.replace('{name}', name);\n\n  return (\n    <div\n      className={cn(\n        'flex items-start justify-between gap-2 bg-fd-card text-fd-card-foreground border rounded-xl p-3 not-prose mb-4 last:mb-0',\n        className,\n      )}\n    >\n      <div>\n        <p className=\"font-medium text-sm mb-2\">{t.typeScriptDefinitions}</p>\n        <p className=\"text-xs text-fd-muted-foreground\">{useTypeText}</p>\n      </div>\n      <button\n        onClick={onCopy}\n        className={cn(\n          buttonVariants({\n            color: 'secondary',\n            className: 'p-2 gap-2',\n            size: 'sm',\n          }),\n        )}\n      >\n        {isChecked ? <Check className=\"size-3.5\" /> : <Copy className=\"size-3.5\" />}\n        {t.copy}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAaA,MAAM,mBAAmB,cASf,KAAK;AAEf,SAAgB,kBAAkB,EAChC,OACA,UACA,kBACA,YAMC;CACD,MAAM,CAAC,SAAS,cAAc,eAAe,oBAAoB,SAAS,GAAG,EAAE,EAAE,GAAG;CACpF,MAAM,YAAY,OAAgC,EAAE,CAAC;AAErD,QACE,oBAAC,kBAAD;EACE,OAAO,eACE;GACL;GACA;GACA,WAAW,QAAgB;IACzB,MAAM,UAAU,SAAS,MAAM,YAAY,QAAQ,OAAO,OAAO;AACjE,QAAI,CAAC,QAAS;AAEd,eAAW,OAAO;AAClB,SAAK,MAAM,YAAY,UAAU,QAC/B,UAAS,QAAQ,MAAM,QAAQ,QAAQ;;GAG3C;GACA,eAAe,MAAM,SAAS;AAC5B,SAAK,MAAM,QAAQ,SACjB,KAAI,KAAK,OAAO,SAAS;AAEvB,UAAK,OAAO;AACZ,UAAK,UAAU;AACf;;AAIJ,SAAK,MAAM,YAAY,UAAU,QAC/B,UAAS,MAAM,QAAQ;;GAG3B,eAAe,UAAU;AACvB,cAAU,UAAU,UAAU,QAAQ,QAAQ,SAAS,SAAS,SAAS;;GAE3E,YAAY,UAAU;IAGpB,MAAM,SAAS,SAAS,MAAM,SAAS,KAAK,OAAO,QAAQ;AAE3D,aAAS,OAAO,MAAM,OAAO,QAAQ;AACrC,cAAU,QAAQ,KAAK,SAAS;;GAEnC,GACD;GAAC;GAAS;GAAO;GAAS,CAC3B;EAEA;EACgB,CAAA;;AAIvB,SAAgB,sBAAsB;AACpC,QAAO,IAAI,iBAAiB;;AAG9B,SAAgB,oBAAoB,EAClC,MACA,MACA,aAKC;CACD,MAAM,CAAC,WAAW,UAAU,oBAAoB;AACzC,YAAU,UAAU,UAAU,KAAK;GACxC;CACF,MAAM,IAAI,iBAAiB;CAC3B,MAAM,cAAc,EAAE,oBAAoB,QAAQ,UAAU,KAAK;AAEjE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,4HACA,UACD;YAJH,CAME,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;GAAG,WAAU;aAA4B,EAAE;GAA0B,CAAA,EACrE,oBAAC,KAAD;GAAG,WAAU;aAAoC;GAAgB,CAAA,CAC7D,EAAA,CAAA,EACN,qBAAC,UAAD;GACE,SAAS;GACT,WAAW,GACT,eAAe;IACb,OAAO;IACP,WAAW;IACX,MAAM;IACP,CAAC,CACH;aARH,CAUG,YAAY,oBAAC,OAAD,EAAO,WAAU,YAAa,CAAA,GAAG,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,EAC1E,EAAE,KACI;KACL"}

package/dist/ui/operation/{request-tabs.d.ts → get-example-requests.d.ts}

@@ -1,6 +1,5 @@
 import { RawRequestData, RequestData } from "../../requests/types.js";
-import { ReactNode } from "react";
-//#region src/ui/operation/request-tabs.d.ts
+//#region src/ui/operation/get-example-requests.d.ts
 interface ExampleRequestItem {
   id: string;
   name: string;
@@ -10,4 +9,4 @@ interface ExampleRequestItem {
 }
 //#endregion
 export { ExampleRequestItem };
-//# sourceMappingURL=request-tabs.d.ts.map
+//# sourceMappingURL=get-example-requests.d.ts.map

package/dist/ui/operation/get-example-requests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-example-requests.d.ts","names":[],"sources":["../../../src/ui/operation/get-example-requests.ts"],"mappings":";;UAMiB,kBAAA;EACf,EAAA;EACA,IAAA;EACA,WAAA;EACA,IAAA,EAAM,cAAA;EACN,OAAA,EAAS,WAAA;AAAA"}

package/dist/ui/operation/get-example-requests.js

@@ -0,0 +1,83 @@
+import { getPreferredType, pickExample } from "../../utils/schema/index.js";
+import { encodeRequestData } from "../../requests/media/encode.js";
+import { sample } from "openapi-sampler";
+//#region src/ui/operation/get-example-requests.ts
+function getExampleRequests(path, operation, ctx) {
+	const requestBody = operation.requestBody;
+	const media = requestBody?.content ? getPreferredType(requestBody.content) : null;
+	const bodyOfType = media ? requestBody.content[media] : null;
+	if (bodyOfType?.examples) {
+		const result = [];
+		for (const [key, value] of Object.entries(bodyOfType.examples)) {
+			const data = getRequestData(path, operation, key, ctx);
+			result.push({
+				id: key,
+				name: value.summary || key,
+				description: value.description,
+				data,
+				encoded: encodeRequestData(data, ctx.mediaAdapters, operation.parameters ?? [])
+			});
+		}
+		if (result.length > 0) return result;
+	}
+	const data = getRequestData(path, operation, null, ctx);
+	return [{
+		id: "_default",
+		name: "Default",
+		description: typeof bodyOfType?.schema === "object" ? bodyOfType.schema.description : void 0,
+		data,
+		encoded: encodeRequestData(data, ctx.mediaAdapters, operation.parameters ?? [])
+	}];
+}
+function getRequestData(path, method, sampleKey, _ctx) {
+	const result = {
+		path: {},
+		cookie: {},
+		header: {},
+		query: {},
+		method: method.method
+	};
+	for (const param of method.parameters ?? []) {
+		let value = pickExample(param);
+		if (value === void 0 && param.required) {
+			if (param.schema) value = sample(param.schema);
+			else if (param.content) {
+				const type = getPreferredType(param.content);
+				const content = type ? param.content[type] : void 0;
+				if (!content || !content.schema) throw new Error(`Cannot find "${param.name}" parameter info for media type "${type}" in ${path} ${method.method}`);
+				value = sample(content.schema);
+			}
+		}
+		switch (param.in) {
+			case "cookie":
+				result.cookie[param.name] = value;
+				break;
+			case "header":
+				result.header[param.name] = value;
+				break;
+			case "query":
+				result.query[param.name] = value;
+				break;
+			default: result.path[param.name] = value;
+		}
+	}
+	if (method.requestBody?.content) {
+		const body = method.requestBody.content;
+		const type = getPreferredType(body);
+		if (!type) throw new Error(`Cannot find body schema for ${path} ${method.method}: missing media type`);
+		result.bodyMediaType = type;
+		const bodyOfType = body[type];
+		if (bodyOfType.examples && sampleKey) result.body = bodyOfType.examples[sampleKey].value;
+		else if (bodyOfType.example) result.body = bodyOfType.example;
+		else result.body = sample(bodyOfType?.schema ?? {}, {
+			skipReadOnly: method.method !== "GET",
+			skipWriteOnly: method.method === "GET",
+			skipNonRequired: true
+		});
+	}
+	return result;
+}
+//#endregion
+export { getExampleRequests };
+
+//# sourceMappingURL=get-example-requests.js.map

package/dist/ui/operation/get-example-requests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-example-requests.js","names":[],"sources":["../../../src/ui/operation/get-example-requests.ts"],"sourcesContent":["import { encodeRequestData } from '@/requests/media/encode';\nimport type { RawRequestData, RequestData } from '@/requests/types';\nimport type { MethodInformation, RenderContext } from '@/types';\nimport { type NoReference, getPreferredType, pickExample } from '@/utils/schema';\nimport { sample } from 'openapi-sampler';\n\nexport interface ExampleRequestItem {\n  id: string;\n  name: string;\n  description?: string;\n  data: RawRequestData;\n  encoded: RequestData;\n}\n\nexport function getExampleRequests(\n  path: string,\n  operation: NoReference<MethodInformation>,\n  ctx: RenderContext,\n): ExampleRequestItem[] {\n  const requestBody = operation.requestBody;\n  const media = requestBody?.content ? getPreferredType(requestBody.content) : null;\n  const bodyOfType = media ? requestBody!.content![media] : null;\n\n  if (bodyOfType?.examples) {\n    const result: ExampleRequestItem[] = [];\n\n    for (const [key, value] of Object.entries(bodyOfType.examples)) {\n      const data = getRequestData(path, operation, key, ctx);\n\n      result.push({\n        id: key,\n        name: value.summary || key,\n        description: value.description,\n        data,\n        encoded: encodeRequestData(data, ctx.mediaAdapters, operation.parameters ?? []),\n      });\n    }\n\n    if (result.length > 0) return result;\n  }\n\n  const data = getRequestData(path, operation, null, ctx);\n  return [\n    {\n      id: '_default',\n      name: 'Default',\n      description:\n        typeof bodyOfType?.schema === 'object' ? bodyOfType.schema.description : undefined,\n      data,\n      encoded: encodeRequestData(data, ctx.mediaAdapters, operation.parameters ?? []),\n    },\n  ];\n}\n\nfunction getRequestData(\n  path: string,\n  method: NoReference<MethodInformation>,\n  sampleKey: string | null,\n  _ctx: RenderContext,\n): RawRequestData {\n  const result: RawRequestData = {\n    path: {},\n    cookie: {},\n    header: {},\n    query: {},\n    method: method.method,\n  };\n\n  for (const param of method.parameters ?? []) {\n    let value = pickExample(param as never);\n\n    if (value === undefined && param.required) {\n      if (param.schema) {\n        value = sample(param.schema as object);\n      } else if (param.content) {\n        const type = getPreferredType(param.content);\n        const content = type ? param.content[type] : undefined;\n        if (!content || !content.schema)\n          throw new Error(\n            `Cannot find \"${param.name}\" parameter info for media type \"${type}\" in ${path} ${method.method}`,\n          );\n\n        value = sample(content.schema as object);\n      }\n    }\n\n    switch (param.in) {\n      case 'cookie':\n        result.cookie[param.name!] = value;\n        break;\n      case 'header':\n        result.header[param.name!] = value;\n        break;\n      case 'query':\n        result.query[param.name!] = value;\n        break;\n      default:\n        result.path[param.name!] = value;\n    }\n  }\n\n  if (method.requestBody?.content) {\n    const body = method.requestBody.content;\n    const type = getPreferredType(body);\n    if (!type)\n      throw new Error(`Cannot find body schema for ${path} ${method.method}: missing media type`);\n    result.bodyMediaType = type as RawRequestData['bodyMediaType'];\n    const bodyOfType = body[type];\n\n    if (bodyOfType.examples && sampleKey) {\n      result.body = bodyOfType.examples[sampleKey].value;\n    } else if (bodyOfType.example) {\n      result.body = bodyOfType.example;\n    } else {\n      result.body = sample((bodyOfType?.schema ?? {}) as object, {\n        skipReadOnly: method.method !== 'GET',\n        skipWriteOnly: method.method === 'GET',\n        skipNonRequired: true,\n      });\n    }\n  }\n\n  return result;\n}\n"],"mappings":";;;;AAcA,SAAgB,mBACd,MACA,WACA,KACsB;CACtB,MAAM,cAAc,UAAU;CAC9B,MAAM,QAAQ,aAAa,UAAU,iBAAiB,YAAY,QAAQ,GAAG;CAC7E,MAAM,aAAa,QAAQ,YAAa,QAAS,SAAS;AAE1D,KAAI,YAAY,UAAU;EACxB,MAAM,SAA+B,EAAE;AAEvC,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,WAAW,SAAS,EAAE;GAC9D,MAAM,OAAO,eAAe,MAAM,WAAW,KAAK,IAAI;AAEtD,UAAO,KAAK;IACV,IAAI;IACJ,MAAM,MAAM,WAAW;IACvB,aAAa,MAAM;IACnB;IACA,SAAS,kBAAkB,MAAM,IAAI,eAAe,UAAU,cAAc,EAAE,CAAC;IAChF,CAAC;;AAGJ,MAAI,OAAO,SAAS,EAAG,QAAO;;CAGhC,MAAM,OAAO,eAAe,MAAM,WAAW,MAAM,IAAI;AACvD,QAAO,CACL;EACE,IAAI;EACJ,MAAM;EACN,aACE,OAAO,YAAY,WAAW,WAAW,WAAW,OAAO,cAAc,KAAA;EAC3E;EACA,SAAS,kBAAkB,MAAM,IAAI,eAAe,UAAU,cAAc,EAAE,CAAC;EAChF,CACF;;AAGH,SAAS,eACP,MACA,QACA,WACA,MACgB;CAChB,MAAM,SAAyB;EAC7B,MAAM,EAAE;EACR,QAAQ,EAAE;EACV,QAAQ,EAAE;EACV,OAAO,EAAE;EACT,QAAQ,OAAO;EAChB;AAED,MAAK,MAAM,SAAS,OAAO,cAAc,EAAE,EAAE;EAC3C,IAAI,QAAQ,YAAY,MAAe;AAEvC,MAAI,UAAU,KAAA,KAAa,MAAM;OAC3B,MAAM,OACR,SAAQ,OAAO,MAAM,OAAiB;YAC7B,MAAM,SAAS;IACxB,MAAM,OAAO,iBAAiB,MAAM,QAAQ;IAC5C,MAAM,UAAU,OAAO,MAAM,QAAQ,QAAQ,KAAA;AAC7C,QAAI,CAAC,WAAW,CAAC,QAAQ,OACvB,OAAM,IAAI,MACR,gBAAgB,MAAM,KAAK,mCAAmC,KAAK,OAAO,KAAK,GAAG,OAAO,SAC1F;AAEH,YAAQ,OAAO,QAAQ,OAAiB;;;AAI5C,UAAQ,MAAM,IAAd;GACE,KAAK;AACH,WAAO,OAAO,MAAM,QAAS;AAC7B;GACF,KAAK;AACH,WAAO,OAAO,MAAM,QAAS;AAC7B;GACF,KAAK;AACH,WAAO,MAAM,MAAM,QAAS;AAC5B;GACF,QACE,QAAO,KAAK,MAAM,QAAS;;;AAIjC,KAAI,OAAO,aAAa,SAAS;EAC/B,MAAM,OAAO,OAAO,YAAY;EAChC,MAAM,OAAO,iBAAiB,KAAK;AACnC,MAAI,CAAC,KACH,OAAM,IAAI,MAAM,+BAA+B,KAAK,GAAG,OAAO,OAAO,sBAAsB;AAC7F,SAAO,gBAAgB;EACvB,MAAM,aAAa,KAAK;AAExB,MAAI,WAAW,YAAY,UACzB,QAAO,OAAO,WAAW,SAAS,WAAW;WACpC,WAAW,QACpB,QAAO,OAAO,WAAW;MAEzB,QAAO,OAAO,OAAQ,YAAY,UAAU,EAAE,EAAa;GACzD,cAAc,OAAO,WAAW;GAChC,eAAe,OAAO,WAAW;GACjC,iBAAiB;GAClB,CAAC;;AAIN,QAAO"}