fumadocs-openapi 6.2.1 → 7.0.0-beta.0

package/dist/playground/index.js

@@ -185,7 +185,6 @@ function toSchema(schema, required, ctx) {
     }
     return {
         type: schema.type === 'integer' ? 'number' : schema.type,
-        defaultValue: (schema.example ?? ''),
         isRequired: required,
         description: schema.description ?? schema.title,
     };

package/dist/playground/inputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/playground/inputs.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAMxD,KAAK,WAAW,CAAC,IAAI,IAAI,OAAO,CAAC,aAAa,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AA6BhE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,2CAqBjC;AAoJD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE,CAAC,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;CACnB,kDAuFA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,kDA8EA"}
+{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/playground/inputs.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAMxD,KAAK,WAAW,CAAC,IAAI,IAAI,OAAO,CAAC,aAAa,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AA6BhE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,2CAqBjC;AA+ID,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE,CAAC,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;CACnB,kDAmGA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,kDAgGA"}

package/dist/playground/inputs.js

@@ -17,19 +17,18 @@ export function ObjectInput({ field, fieldName, ...props }) {
     return (_jsxs("div", { ...props, className: cn('flex flex-col gap-6', props.className), children: [Object.entries(field.properties).map(([key, child]) => (_jsx(FieldSet, { name: key, field: resolve(child, references), fieldName: `${fieldName}.${key}` }, key))), field.additionalProperties ? (_jsx(AdditionalProperties, { fieldName: fieldName, type: field.additionalProperties })) : null] }));
 }
 function AdditionalProperties({ fieldName, type, }) {
-    const { control, setValue } = useFormContext();
-    const { references, dynamic } = useSchemaContext();
+    const { control, setValue, getValues } = useFormContext();
+    const { references } = useSchemaContext();
     const [nextName, setNextName] = useState('');
     const [properties, setProperties] = useState(() => {
-        const d = dynamic.current.get(`additional_${fieldName}`);
-        if (d?.type === 'object')
-            return d.properties;
+        const value = getValues(fieldName);
+        if (value)
+            return Object.keys(value);
         return [];
     });
-    dynamic.current.set(`additional_${fieldName}`, {
-        type: 'object',
-        properties,
-    });
+    const types = typeof type === 'string'
+        ? resolveDynamicTypes(references[type], references)
+        : anyFields;
     const onAppend = () => {
         const name = nextName.trim();
         if (name.length === 0)
@@ -37,17 +36,14 @@ function AdditionalProperties({ fieldName, type, }) {
         setProperties((p) => {
             if (p.includes(name))
                 return p;
-            setValue(`${fieldName}.${name}`, '');
+            setValue(`${fieldName}.${name}`, getDefaultValue(Object.values(types)[0], references));
             setNextName('');
             return [...p, name];
         });
     };
-    const types = typeof type === 'string'
-        ? resolveDynamicTypes(references[type], references)
-        : undefined;
     return (_jsxs(_Fragment, { children: [properties.map((item) => (_jsx(FieldSet, { name: item, field: {
                     type: 'switcher',
-                    items: types ?? anyFields,
+                    items: types,
                     isRequired: false,
                 }, fieldName: `${fieldName}.${item}`, toolbar: _jsx("button", { type: "button", "aria-label": "Remove Item", className: cn(buttonVariants({
                         color: 'secondary',
@@ -76,17 +72,14 @@ const anyFields = {
     string: {
         type: 'string',
         isRequired: false,
-        defaultValue: '',
     },
     boolean: {
         type: 'boolean',
         isRequired: false,
-        defaultValue: '',
     },
     number: {
         type: 'number',
         isRequired: false,
-        defaultValue: '',
     },
     object: {
         type: 'object',
@@ -114,41 +107,62 @@ export function FieldInput({ field, fieldName, ...props }) {
     if (field.type === 'array') {
         return (_jsx(ArrayInput, { fieldName: fieldName, field: field, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-background p-3 shadow-sm', props.className) }));
     }
-    if (field.type === 'file' || field.type === 'boolean') {
-        return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value, onChange, ...restField } }) => field.type === 'file' ? (_jsx("input", { id: fieldName, type: "file", multiple: false, onChange: (e) => {
+    if (field.type === 'file') {
+        return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value: _, onChange, ...restField } }) => (_jsx("input", { id: fieldName, type: "file", multiple: false, onChange: (e) => {
                     if (!e.target.files)
                         return;
                     onChange(e.target.files.item(0));
-                }, ...props, ...restField })) : (_jsxs(Select, { value: value, onValueChange: onChange, disabled: restField.disabled, children: [_jsx(SelectTrigger, { id: fieldName, className: props.className, ...restField, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "true", children: "True" }), _jsx(SelectItem, { value: "false", children: "False" }), field.isRequired ? null : (_jsx(SelectItem, { value: "null", children: "Null" }))] })] })) }));
+                }, ...props, ...restField })) }));
+    }
+    if (field.type === 'boolean') {
+        return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value, onChange, ...restField } }) => (_jsxs(Select, { value: String(value), onValueChange: (value) => onChange(value === 'null' ? null : value === 'true'), disabled: restField.disabled, children: [_jsx(SelectTrigger, { id: fieldName, className: props.className, ...restField, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "true", children: "True" }), _jsx(SelectItem, { value: "false", children: "False" }), field.isRequired ? null : (_jsx(SelectItem, { value: "null", children: "Null" }))] })] })) }));
     }
-    return (_jsx(Input, { id: fieldName, placeholder: "Enter value", type: field.type === 'string' ? 'text' : 'number', ...register(fieldName), ...props }));
+    return (_jsx(Input, { id: fieldName, placeholder: "Enter value", type: field.type === 'string' ? 'text' : 'number', ...register(fieldName, {
+            valueAsNumber: field.type === 'number',
+        }), ...props }));
 }
 export function FieldSet({ field, fieldName, toolbar, name, ...props }) {
+    const form = useFormContext();
     const { references, dynamic } = useSchemaContext();
-    const [value, setValue] = useState(() => {
+    const [type, setType] = useState(() => {
         if (field.type !== 'switcher')
             return '';
         const d = dynamic.current.get(fieldName);
         const items = Object.keys(field.items);
         if (d?.type === 'field') {
-            // schemas are passed from server components, they shouldn't be re-constructed
+            // schemas are passed from server components, object references are maintained
             const cached = items.find((item) => d.schema === field.items[item]);
             if (cached)
                 return cached;
         }
-        return items[0];
+        const value = form.getValues(fieldName);
+        let type = typeof value;
+        if (Array.isArray(value)) {
+            type = 'array';
+        }
+        else if (value instanceof File) {
+            type = 'file';
+        }
+        else if (value === null) {
+            type = 'null';
+        }
+        return items.find((item) => field.items[item].type === type) ?? items[0];
     });
     if (field.type === 'null')
         return null;
-    if (value && field.type === 'switcher') {
-        dynamic.current.set(fieldName, {
-            type: 'field',
-            schema: field.items[value],
-        });
-    }
     if (field.type === 'switcher') {
-        const child = resolve(field.items[value], references);
-        return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsxs(FieldHeader, { name: name, htmlFor: fieldName, required: field.isRequired, children: [_jsx("select", { value: value, onChange: (e) => setValue(e.target.value), className: "text-xs", children: Object.keys(field.items).map((item) => (_jsx("option", { value: item, children: item }, item))) }), toolbar] }), _jsx("p", { className: "text-xs text-fd-muted-foreground", children: field.description }), child.type === 'switcher' ? (_jsx(FieldSet, { field: child, fieldName: fieldName })) : (_jsx(FieldInput, { field: child, fieldName: fieldName }))] }));
+        const child = resolve(field.items[type], references);
+        return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsxs(FieldHeader, { name: name, htmlFor: fieldName, required: field.isRequired, children: [_jsx("select", { value: type, onChange: (e) => {
+                                const value = e.target.value;
+                                if (value === type)
+                                    return;
+                                setType(value);
+                                dynamic.current.set(fieldName, {
+                                    type: 'field',
+                                    schema: field.items[value],
+                                });
+                                form.setValue(fieldName, getDefaultValue(field.items[value], references));
+                            }, className: "text-xs", children: Object.keys(field.items).map((item) => (_jsx("option", { value: item, children: item }, item))) }), toolbar] }), _jsx("p", { className: "text-xs text-fd-muted-foreground", children: field.description }), child.type === 'switcher' ? (_jsx(FieldSet, { field: child, fieldName: fieldName })) : (_jsx(FieldInput, { field: child, fieldName: fieldName }))] }));
     }
     return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsx(FieldHeader, { htmlFor: fieldName, name: name, required: field.isRequired, type: field.type, children: toolbar }), _jsx(FieldInput, { field: field, fieldName: fieldName })] }));
 }

package/dist/render/operation/api-example.d.ts

@@ -1,14 +1,28 @@
 import type { MethodInformation, RenderContext } from '../../types.js';
-import type { EndpointSample } from '../../utils/generate-sample.js';
-import { type CodeSample } from '../../render/operation.js';
+import { type ReactNode } from 'react';
+import { type CodeSample } from '../../render/operation/index.js';
+import type { RequestData } from '../../requests/_shared.js';
 interface CustomProperty {
     'x-codeSamples'?: CodeSample[];
     'x-selectedCodeSample'?: string;
     'x-exclusiveCodeSample'?: string;
 }
-export declare function APIExample({ method, endpoint, ctx, }: {
+interface CodeExampleItem {
+    key: string;
+    name: string;
+    description?: string;
+    data: RequestData;
+}
+export declare function APIExampleProvider({ examples, method, children, route, }: {
+    examples: CodeExampleItem[];
+    method: MethodInformation & CustomProperty;
+    route: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function getAPIExamples(path: string, method: MethodInformation, ctx: RenderContext): CodeExampleItem[];
+export declare function APIExample({ method, examples, ctx, }: {
+    examples: CodeExampleItem[];
     method: MethodInformation & CustomProperty;
-    endpoint: EndpointSample;
     ctx: RenderContext;
 }): Promise<import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/render/operation/api-example.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api-example.d.ts","sourceRoot":"","sources":["../../../src/render/operation/api-example.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AA2BrD,UAAU,cAAc;IACtB,eAAe,CAAC,EAAE,UAAU,EAAE,CAAC;IAC/B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAcD,wBAAsB,UAAU,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,GAAG,GACJ,EAAE;IACD,MAAM,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC3C,QAAQ,EAAE,cAAc,CAAC;IACzB,GAAG,EAAE,aAAa,CAAC;CACpB,oDAyFA"}
+{"version":3,"file":"api-example.d.ts","sourceRoot":"","sources":["../../../src/render/operation/api-example.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAU3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAqBtD,UAAU,cAAc;IACtB,eAAe,CAAC,EAAE,UAAU,EAAE,CAAC;IAC/B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,UAAU,eAAe;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,MAAM,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAeA;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,iBAAiB,EACzB,GAAG,EAAE,aAAa,GACjB,eAAe,EAAE,CA8BnB;AAED,wBAAsB,UAAU,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,GAAG,GACJ,EAAE;IACD,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,MAAM,EAAE,iBAAiB,GAAG,cAAc,CAAC;IAC3C,GAAG,EAAE,aAAa,CAAC;CACpB,oDAmCA"}

package/dist/render/operation/api-example.js

@@ -1,84 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as CURL from '../../requests/curl.js';
-import * as JS from '../../requests/javascript.js';
-import * as Go from '../../requests/go.js';
-import * as Python from '../../requests/python.js';
 import { Markdown } from '../../render/markdown.js';
 import { getTypescriptSchema } from '../../utils/get-typescript-schema.js';
 import { CodeBlock } from '../../render/codeblock.js';
+import { CodeExample, CodeExampleProvider, } from '../../ui/contexts/code-example.lazy.js';
+import { getPreferredType } from '../../utils/schema.js';
+import { getRequestData } from '../../render/operation/get-request-data.js';
+import { sample } from 'openapi-sampler';
 const defaultSamples = [
     {
         label: 'cURL',
-        source: CURL.getSampleRequest,
         lang: 'bash',
     },
     {
         label: 'JavaScript',
-        source: JS.getSampleRequest,
         lang: 'js',
     },
     {
         label: 'Go',
-        source: Go.getSampleRequest,
         lang: 'go',
     },
     {
         label: 'Python',
-        source: Python.getSampleRequest,
         lang: 'python',
     },
 ];
-export async function APIExample({ method, endpoint, ctx, }) {
-    const renderer = ctx.renderer;
-    const samples = new Map();
-    let children;
-    for (const [key, sample] of Object.entries(endpoint.body?.samples ?? {
-        // fallback for methods that have no request body, we also want to show examples for
-        _default: {},
-    })) {
-        samples.set(key, {
-            title: sample?.summary ?? key,
-            description: sample?.description,
-            samples: dedupe([
-                ...defaultSamples,
-                ...(ctx.generateCodeSamples
-                    ? await ctx.generateCodeSamples(endpoint)
-                    : []),
-                ...(method['x-codeSamples'] ?? []),
-            ]).flatMap((sample) => {
-                if (sample.source === false)
-                    return [];
-                const result = typeof sample.source === 'function'
-                    ? sample.source(endpoint, key)
-                    : sample.source;
-                if (result === undefined)
-                    return [];
-                return {
-                    ...sample,
-                    source: result,
-                };
-            }),
-        });
-    }
-    function renderRequest(sample) {
-        return (_jsx(renderer.Requests, { items: sample.samples.map((s) => s.label), children: sample.samples.map((s) => (_jsx(renderer.Request, { name: s.label, code: s.source, language: s.lang }, s.label))) }));
-    }
-    const exclusiveCodeSamples = method['x-exclusiveCodeSample'];
-    if ((samples.size === 1 && samples.has('_default')) ||
-        (exclusiveCodeSamples && samples.has(exclusiveCodeSamples))) {
-        // if exclusiveSampleKey is present, we don't use tabs
-        // if only the fallback or non described openapi legacy example is present, we don't use tabs
-        children = renderRequest(samples.get(exclusiveCodeSamples ?? '_default'));
-    }
-    else if (samples.size > 0) {
-        const entries = Array.from(samples.entries());
-        children = (_jsx(renderer.Samples, { items: entries.map(([key, sample]) => ({
-                title: sample.title,
-                description: sample.description ? (_jsx(Markdown, { text: sample.description })) : null,
-                value: key,
-            })), defaultValue: exclusiveCodeSamples, children: entries.map(([key, sample]) => (_jsx(renderer.Sample, { value: key, children: renderRequest(sample) }, key))) }));
+export function APIExampleProvider({ examples, method, children, route, }) {
+    const exclusiveSampleKey = method['x-exclusiveCodeSample'];
+    return (_jsx(CodeExampleProvider, { initialKey: exclusiveSampleKey, route: route, examples: examples.map((example) => ({
+            key: example.key,
+            data: example.data,
+        })), children: children }));
+}
+export function getAPIExamples(path, method, ctx) {
+    const media = method.requestBody
+        ? getPreferredType(method.requestBody.content)
+        : null;
+    const bodyOfType = media ? method.requestBody?.content[media] : null;
+    if (bodyOfType?.examples) {
+        const result = [];
+        for (const [key, value] of Object.entries(bodyOfType.examples)) {
+            result.push({
+                key,
+                name: value.summary ?? key,
+                description: value.description,
+                data: getRequestData(path, method, key, ctx),
+            });
+        }
+        return result;
     }
-    return (_jsxs(renderer.APIExample, { children: [children, _jsx(ResponseTabs, { operation: method, ctx: ctx, endpoint: endpoint })] }));
+    return [
+        {
+            key: '_default',
+            name: 'Default',
+            description: bodyOfType?.schema?.description,
+            data: getRequestData(path, method, null, ctx),
+        },
+    ];
+}
+export async function APIExample({ method, examples, ctx, }) {
+    const renderer = ctx.renderer;
+    const generators = dedupe([
+        ...defaultSamples,
+        ...(ctx.generateCodeSamples ? await ctx.generateCodeSamples(method) : []),
+        ...(method['x-codeSamples'] ?? []),
+    ]).filter((generator) => generator.source !== false);
+    const exclusiveSampleKey = method['x-exclusiveCodeSample'];
+    return (_jsxs(renderer.APIExample, { children: [examples.length > 1 && !exclusiveSampleKey && (_jsx(renderer.CodeExampleSelector, { items: examples.map((sample) => ({
+                    title: sample.name,
+                    description: sample.description ? (_jsx(Markdown, { text: sample.description })) : null,
+                    value: sample.key,
+                })) })), generators.length > 0 && (_jsx(renderer.Requests, { items: generators.map((s) => s.label), children: generators.map((generator) => (_jsx(renderer.Request, { name: generator.label, children: _jsx(CodeExample, { ...generator }) }, generator.label))) })), _jsx(ResponseTabs, { operation: method, ctx: ctx })] }));
 }
 /**
  * Remove duplicated labels
@@ -94,35 +85,40 @@ function dedupe(samples) {
     }
     return out;
 }
-function ResponseTabs({ endpoint, operation, ctx: { renderer, generateTypeScriptSchema, schema }, }) {
+function ResponseTabs({ operation, ctx: { renderer, generateTypeScriptSchema, schema }, }) {
     if (!operation.responses)
         return null;
     async function renderResponse(code) {
-        const response = code in endpoint.responses ? endpoint.responses[code] : null;
+        const response = operation.responses && code in operation.responses
+            ? operation.responses[code]
+            : null;
+        const media = getPreferredType(response?.content ?? {});
+        const responseOfType = media ? response?.content?.[media] : null;
         const description = operation.responses?.[code].description ??
-            response?.schema.description ??
+            responseOfType?.schema?.description ??
             '';
         let ts;
         if (generateTypeScriptSchema) {
-            ts = await generateTypeScriptSchema(endpoint, code);
+            ts = await generateTypeScriptSchema(operation, code);
         }
-        else if (generateTypeScriptSchema === undefined) {
-            ts = await getTypescriptSchema(endpoint, code, schema.dereferenceMap);
+        else if (generateTypeScriptSchema === undefined &&
+            responseOfType?.schema) {
+            ts = await getTypescriptSchema(responseOfType?.schema, schema.dereferenceMap);
         }
         const values = [];
         let exampleSlot;
-        if (response?.samples._default) {
-            values.push('Response');
-            exampleSlot = (_jsx(renderer.ResponseType, { label: "Response", children: _jsx(CodeBlock, { lang: "json", code: JSON.stringify(endpoint.responses[code].samples._default, null, 2) }) }));
-        }
-        else if (response) {
-            exampleSlot = Object.entries(response.samples).map(([key, sample], i) => {
+        if (responseOfType?.examples) {
+            exampleSlot = Object.entries(responseOfType.examples).map(([key, sample], i) => {
                 const title = sample?.summary ?? `Example ${i + 1}`;
                 values.push(title);
-                return (_jsxs(renderer.ResponseType, { label: title, children: [sample?.description ? (_jsx(Markdown, { text: sample.description })) : null, _jsx(CodeBlock, { lang: "json", code: JSON.stringify(sample, null, 2) })] }, key));
+                return (_jsxs(renderer.ResponseType, { label: title, children: [sample?.description ? (_jsx(Markdown, { text: sample.description })) : null, _jsx(CodeBlock, { lang: "json", code: JSON.stringify(sample.value, null, 2) })] }, key));
             });
         }
-        return (_jsxs(renderer.Response, { value: code, children: [description ? _jsx(Markdown, { text: description }) : null, response && (_jsxs(renderer.ResponseTypes, { defaultValue: values[0], children: [exampleSlot, ts ? (_jsx(renderer.ResponseType, { label: "TypeScript", children: _jsx(CodeBlock, { code: ts, lang: "ts" }) })) : null] }))] }));
+        else if (responseOfType?.example || responseOfType?.schema) {
+            values.push('Response');
+            exampleSlot = (_jsx(renderer.ResponseType, { label: "Response", children: _jsx(CodeBlock, { lang: "json", code: JSON.stringify(responseOfType.example ?? sample(responseOfType.schema), null, 2) }) }));
+        }
+        return (_jsxs(renderer.Response, { value: code, children: [description ? _jsx(Markdown, { text: description }) : null, exampleSlot ? (_jsxs(renderer.ResponseTypes, { defaultValue: values[0], children: [exampleSlot, ts ? (_jsx(renderer.ResponseType, { label: "TypeScript", children: _jsx(CodeBlock, { code: ts, lang: "ts" }) })) : null] })) : null] }));
     }
     const codes = Object.keys(operation.responses);
     if (codes.length === 0)

package/dist/render/operation/get-request-data.d.ts

@@ -0,0 +1,5 @@
+import type { MethodInformation, RenderContext } from '../../types.js';
+import type { NoReference } from '../../utils/schema.js';
+import type { RequestData } from '../../requests/_shared.js';
+export declare function getRequestData(path: string, method: NoReference<MethodInformation>, sampleKey: string | null, { schema: { document } }: RenderContext): RequestData;
+//# sourceMappingURL=get-request-data.d.ts.map

package/dist/render/operation/get-request-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-request-data.d.ts","sourceRoot":"","sources":["../../../src/render/operation/get-request-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,WAAW,CAAC,iBAAiB,CAAC,EACtC,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAa,GACtC,WAAW,CAqEb"}

package/dist/render/operation/get-request-data.js

@@ -0,0 +1,71 @@
+import { sample } from 'openapi-sampler';
+import { getPreferredType } from '../../utils/schema.js';
+import { getSecurities, getSecurityPrefix } from '../../utils/get-security.js';
+export function getRequestData(path, method, sampleKey, { schema: { document } }) {
+    const result = {
+        path: {},
+        cookie: {},
+        header: {},
+        query: {},
+        method: method.method,
+    };
+    for (const param of method.parameters ?? []) {
+        let schema = param.schema;
+        let value;
+        if (!schema && param.content) {
+            const type = getPreferredType(param.content);
+            const content = type ? param.content[type] : undefined;
+            if (!content)
+                throw new Error(`Cannot find parameter schema for ${param.name} in ${path} ${method.method}`);
+            schema = content.schema;
+            value = content.example ?? param.example ?? sample(schema);
+        }
+        else {
+            value = param.example ?? sample(schema);
+        }
+        if (param.in === 'cookie') {
+            result.cookie[param.name] = value;
+        }
+        else if (param.in === 'header') {
+            result.header[param.name] = value;
+        }
+        else if (param.in === 'query') {
+            result.query[param.name] = value;
+        }
+        else if (param.in === 'path') {
+            result.path[param.name] = value;
+        }
+    }
+    const requirements = method.security ?? document.security;
+    if (requirements && requirements.length > 0) {
+        for (const security of getSecurities(requirements[0], document)) {
+            const prefix = getSecurityPrefix(security);
+            const name = security.type === 'apiKey' ? security.name : 'Authorization';
+            result.header[name] = prefix ? `${prefix} <token>` : '<token>';
+        }
+    }
+    if (method.requestBody) {
+        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 = generateBody(method.method, bodyOfType?.schema ?? {});
+        }
+    }
+    return result;
+}
+function generateBody(method, schema) {
+    return sample(schema, {
+        skipReadOnly: method !== 'GET',
+        skipWriteOnly: method === 'GET',
+    });
+}

package/dist/render/{operation.d.ts → operation/index.d.ts}

@@ -1,10 +1,10 @@
 import { type ReactElement } from 'react';
-import { type EndpointSample } from '../utils/generate-sample.js';
-import type { MethodInformation, RenderContext } from '../types.js';
+import type { MethodInformation, RenderContext } from '../../types.js';
+import type { RequestData } from '../../requests/_shared.js';
 export interface CodeSample {
     lang: string;
     label: string;
-    source: string | ((endpoint: EndpointSample, exampleKey: string) => string | undefined) | false;
+    source?: string | ((url: string, data: RequestData) => string | undefined) | false;
 }
 export declare function Operation({ type, path, method, ctx, hasHead, headingLevel, }: {
     type?: 'webhook' | 'operation';
@@ -14,4 +14,4 @@ export declare function Operation({ type, path, method, ctx, hasHead, headingLev
     hasHead?: boolean;
     headingLevel?: number;
 }): ReactElement;
-//# sourceMappingURL=operation.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dist/render/operation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/render/operation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAEV,iBAAiB,EAEjB,aAAa,EAEd,MAAM,SAAS,CAAC;AAgBjB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EACH,MAAM,GACN,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,MAAM,GAAG,SAAS,CAAC,GACxD,KAAK,CAAC;CACX;AASD,wBAAgB,SAAS,CAAC,EACxB,IAAkB,EAClB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,OAAO,EACP,YAAgB,GACjB,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,YAAY,CAkLf"}

package/dist/render/{operation.js → operation/index.js}

@@ -1,16 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { generateSample } from '../utils/generate-sample.js';
-import { getPreferredType } from '../utils/schema.js';
-import { getSecurities, getSecurityPrefix } from '../utils/get-security.js';
-import { idToTitle } from '../utils/id-to-title.js';
-import { Markdown } from './markdown.js';
-import { heading } from './heading.js';
-import { Schema } from './schema.js';
-import { createMethod } from '../server/create-method.js';
-import { methodKeys } from '../build-routes.js';
-import { APIExample } from '../render/operation/api-example.js';
-import { MethodLabel } from '../ui/components/method-label.js';
+import { getPreferredType } from '../../utils/schema.js';
+import { getSecurities, getSecurityPrefix } from '../../utils/get-security.js';
+import { idToTitle } from '../../utils/id-to-title.js';
+import { Markdown } from '../markdown.js';
+import { heading } from '../heading.js';
+import { Schema } from '../schema.js';
+import { createMethod } from '../../server/create-method.js';
+import { methodKeys } from '../../build-routes.js';
+import { APIExample, APIExampleProvider, getAPIExamples, } from '../../render/operation/api-example.js';
+import { MethodLabel } from '../../ui/components/method-label.js';
 const ParamTypes = {
     path: 'Path Parameters',
     query: 'Query Parameters',
@@ -60,10 +59,9 @@ export function Operation({ type = 'operation', path, method, ctx, hasHead, head
                                 } })] }, status));
                 })] }));
     }
-    const endpoint = generateSample(path, method, ctx);
     const parameterNode = Object.entries(ParamTypes).map(([type, title]) => {
-        const params = endpoint.parameters.filter((param) => param.in === type && !param.isAuthOnly);
-        if (params.length === 0)
+        const params = method.parameters?.filter((param) => param.in === type);
+        if (!params || params.length === 0)
             return;
         return (_jsxs(Fragment, { children: [heading(headingLevel, title, ctx), _jsx("div", { className: "flex flex-col gap-4", children: params.map((param) => (_jsx(Schema, { name: param.name, schema: {
                             ...param.schema,
@@ -83,7 +81,8 @@ export function Operation({ type = 'operation', path, method, ctx, hasHead, head
     }
     const info = (_jsxs(ctx.renderer.APIInfo, { head: headNode, method: method.method, route: path, children: [type === 'operation' ? (ctx.disablePlayground ? (_jsxs("div", { className: "flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose", children: [_jsx(MethodLabel, { className: "text-xs", children: method.method }), _jsx("code", { className: "flex-1 overflow-auto text-nowrap text-[13px] text-fd-muted-foreground", children: path })] })) : (_jsx(ctx.renderer.APIPlayground, { path: path, method: method, ctx: ctx }))) : null, security && Object.keys(security).length > 0 ? (_jsxs(_Fragment, { children: [heading(headingLevel, 'Authorization', ctx), _jsx(AuthSection, { requirements: security, ctx: ctx })] })) : null, bodyNode, parameterNode, responseNode, callbacksNode] }));
     if (type === 'operation') {
-        return (_jsxs(ctx.renderer.API, { children: [info, _jsx(APIExample, { method: method, endpoint: endpoint, ctx: ctx })] }));
+        const examples = getAPIExamples(path, method, ctx);
+        return (_jsx(ctx.renderer.API, { children: _jsxs(APIExampleProvider, { route: path, examples: examples, method: method, children: [info, _jsx(APIExample, { examples: examples, method: method, ctx: ctx })] }) }));
     }
     else {
         return info;

package/dist/render/renderer.d.ts

@@ -27,12 +27,7 @@ export interface ObjectCollapsibleProps {
     children: ReactNode;
 }
 export interface RequestProps {
-    language: string;
     name: string;
-    code: string;
-}
-export interface SampleProps {
-    value: string;
     children: ReactNode;
 }
 export interface SamplesProps {
@@ -41,8 +36,6 @@ export interface SamplesProps {
         description?: ReactNode;
         value: string;
     }[];
-    children: ReactNode;
-    defaultValue?: string;
 }
 export interface ResponseTypeProps {
     label: string;
@@ -65,8 +58,7 @@ export interface Renderer {
     }>;
     Responses: ComponentType<ResponsesProps>;
     Response: ComponentType<ResponseProps>;
-    Sample: ComponentType<SampleProps>;
-    Samples: ComponentType<SamplesProps>;
+    CodeExampleSelector: ComponentType<SamplesProps>;
     Requests: ComponentType<{
         items: string[];
         children: ReactNode;

package/dist/render/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/render/renderer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/render/renderer.tsx"],"names":[],"mappings":"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"}

package/dist/render/renderer.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-import { CodeBlock } from '../render/codeblock.js';
 import { API, Root, APIInfo, APIExample, Property, ObjectCollapsible, } from '../ui/index.js';
 import { APIPlayground } from '../playground/index.js';
-import { Sample, Samples } from '../ui/client.js';
+import { CodeExampleSelector } from '../ui/contexts/code-example.lazy.js';
 export function createRenders(shikiOptions) {
     return {
         Root: (props) => (_jsx(Root, { shikiOptions: shikiOptions, ...props, children: props.children })),
@@ -18,9 +17,8 @@ export function createRenders(shikiOptions) {
         Property,
         ObjectCollapsible,
         Requests: (props) => (_jsx(Tabs, { groupId: "fumadocs_openapi_requests", ...props })),
-        Samples,
-        Sample,
-        Request: (props) => (_jsx(Tab, { value: props.name, children: _jsx(CodeBlock, { lang: props.language, code: props.code, options: shikiOptions }) })),
+        CodeExampleSelector,
+        Request: (props) => _jsx(Tab, { value: props.name, children: props.children }),
         APIPlayground,
     };
 }