Add support for YAML content type in request body/example (#3612)

Author: spastorelli

.changeset/funny-falcons-brush.md

@@ -0,0 +1,5 @@
+---
+"@gitbook/react-openapi": patch
+---
+
+Add support for YAML content type in request body/example

bun.lock

@@ -267,13 +267,15 @@
         "@scalar/oas-utils": "^0.2.130",
         "clsx": "^2.1.1",
         "flatted": "^3.2.9",
+        "js-yaml": "^4.1.0",
         "json-xml-parse": "^1.3.0",
         "react-aria": "^3.37.0",
         "react-aria-components": "^1.6.0",
         "usehooks-ts": "^3.1.0",
         "zustand": "^5.0.3",
       },
       "devDependencies": {
+        "@types/js-yaml": "^4.0.9",
         "bun-types": "^1.1.20",
         "typescript": "^5.5.3",
       },
@@ -1377,6 +1379,8 @@
 
     "@types/js-cookie": ["@types/[email protected]", "", {}, "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ=="],
 
+    "@types/js-yaml": ["@types/[email protected]", "", {}, "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg=="],
+
     "@types/json-schema": ["@types/[email protected]", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
 
     "@types/jsontoxml": ["@types/[email protected]", "", {}, "sha512-SoeEpHuqdZcpLxZr5uzpB6A/ICmzBOfluwMm59Bm6vDuiSRSv4M/z8hvS+YCRw4ZyGO5BhJ5oeJnrurSigg3Vw=="],

packages/react-openapi/package.json

@@ -20,9 +20,11 @@
         "react-aria-components": "^1.6.0",
         "react-aria": "^3.37.0",
         "usehooks-ts": "^3.1.0",
-        "zustand": "^5.0.3"
+        "zustand": "^5.0.3",
+        "js-yaml": "^4.1.0"
     },
     "devDependencies": {
+        "@types/js-yaml": "^4.0.9",
         "bun-types": "^1.1.20",
         "typescript": "^5.5.3"
     },

packages/react-openapi/src/InteractiveSection.tsx

@@ -112,7 +112,7 @@ export function InteractiveSection(props: {
                             event.stopPropagation();
                         }}
                     >
-                        {tabs.length > 1 ? (
+                        {tabs.length > 0 ? (
                             <OpenAPISelect
                                 stateKey={stateKey}
                                 items={tabs}

packages/react-openapi/src/code-samples.test.ts

@@ -406,7 +406,7 @@ describe('python code sample generator', () => {
 
     it('should format application/json body properly', () => {
         const input: CodeSampleInput = {
-            method: 'GET',
+            method: 'POST',
             url: 'https://example.com/path',
             headers: {
                 'Content-Type': 'application/json',
@@ -422,7 +422,7 @@ describe('python code sample generator', () => {
         const output = generator?.generate(input);
 
         expect(output).toBe(
-            'import requests\n\nresponse = requests.get(\n    "https://example.com/path",\n    headers={"Content-Type":"application/json"},\n    data=json.dumps({\n      "key": "value",\n      "truethy": True,\n      "falsey": False,\n      "nullish": None\n    })\n)\n\ndata = response.json()'
+            'import json\nimport requests\n\nresponse = requests.post(\n    "https://example.com/path",\n    headers={"Content-Type":"application/json"},\n    data=json.dumps({\n      "key": "value",\n      "truethy": True,\n      "falsey": False,\n      "nullish": None\n    })\n)\n\ndata = response.json()'
         );
     });
 

packages/react-openapi/src/code-samples.ts

@@ -1,3 +1,4 @@
+import yaml from 'js-yaml';
 import {
     isCSV,
     isFormData,
@@ -8,6 +9,7 @@ import {
     isPlainObject,
     isText,
     isXML,
+    isYAML,
 } from './contentTypeChecks';
 import { json2xml } from './json2xml';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
@@ -154,7 +156,8 @@ ${headerString}${bodyString}`;
         label: 'Python',
         syntax: 'python',
         generate: ({ method, url, headers, body }) => {
-            let code = 'import requests\n\n';
+            const contentType = headers?.['Content-Type'];
+            let code = `${isJSON(contentType) ? 'import json\n' : ''}import requests\n\n`;
 
             if (body) {
                 const lines = BodyGenerators.getPythonBody(body, headers);
@@ -174,7 +177,6 @@ ${headerString}${bodyString}`;
                 code += indent(`headers=${stringifyOpenAPI(headers)},\n`, 4);
             }
 
-            const contentType = headers?.['Content-Type'];
             if (body) {
                 if (body === 'files') {
                     code += indent(`files=${body}\n`, 4);
@@ -256,6 +258,8 @@ const BodyGenerators = {
         } else if (isPDF(contentType)) {
             // We use --data-binary to avoid cURL converting newlines to \r\n
             body = `--data-binary '@${String(body)}'`;
+        } else if (isYAML(contentType)) {
+            body = `--data-binary $'${yaml.dump(body).replace(/'/g, '').replace(/\\n/g, '\n')}'`;
         } else {
             body = `--data '${stringifyOpenAPI(body, null, 2).replace(/\\n/g, '\n')}'`;
         }
@@ -325,6 +329,9 @@ const BodyGenerators = {
             code += indent(convertBodyToXML(body), 4);
             code += '`;\n\n';
             body = 'xml';
+        } else if (isYAML(contentType)) {
+            code += `const yamlBody = \`\n${indent(yaml.dump(body), 4)}\`;\n\n`;
+            body = 'yamlBody';
         } else if (isText(contentType)) {
             body = stringifyOpenAPI(body, null, 2);
         } else {
@@ -355,6 +362,9 @@ const BodyGenerators = {
         } else if (isXML(contentType)) {
             // Convert JSON to XML if needed
             body = JSON.stringify(convertBodyToXML(body));
+        } else if (isYAML(contentType)) {
+            code += `yamlBody = \"\"\"\n${indent(yaml.dump(body), 4)}\"\"\"\n\n`;
+            body = 'yamlBody';
         } else {
             body = stringifyOpenAPI(
                 body,
@@ -399,6 +409,7 @@ const BodyGenerators = {
                 // Convert JSON to XML if needed
                 return `"${convertBodyToXML(body)}"`;
             },
+            yaml: () => `"${yaml.dump(body).replace(/"/g, '\\"')}"`,
             csv: () => `"${stringifyOpenAPI(body).replace(/"/g, '')}"`,
             default: () => `${stringifyOpenAPI(body, null, 2)}`,
         };
@@ -407,6 +418,7 @@ const BodyGenerators = {
         if (isFormUrlEncoded(contentType)) return typeHandlers.formUrlEncoded();
         if (isText(contentType)) return typeHandlers.text();
         if (isXML(contentType)) return typeHandlers.xml();
+        if (isYAML(contentType)) return typeHandlers.yaml();
         if (isCSV(contentType)) return typeHandlers.csv();
 
         return typeHandlers.default();

packages/react-openapi/src/contentTypeChecks.ts

@@ -6,6 +6,10 @@ export function isXML(contentType?: string): boolean {
     return contentType?.toLowerCase().includes('application/xml') || false;
 }
 
+export function isYAML(contentType?: string): boolean {
+    return contentType?.toLowerCase().includes('application/yaml') || false;
+}
+
 export function isGraphQL(contentType?: string): boolean {
     return contentType?.toLowerCase().includes('application/graphql') || false;
 }