adds openapi-snippets generator and updates swagger styles

feat/swagger-snippets
Agusti Fernandez Pardo 2022-04-18 18:16:02 +02:00
parent 65af2bfdc6
commit c6fa069b0a
2 changed files with 3019 additions and 115 deletions

View File

@ -1,5 +1,365 @@
import Head from "next/head";
import * as OpenAPISnippet from "openapi-snippet";
import React from "react";
import ReactDOM from "react-dom";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";
// Since swagger-ui-react was not configured to change the request snippets some workarounds required
// configuration will be added programatically
// Custom Plugin
const SnippedGenerator = {
statePlugins: {
// extend some internals to gain information about current path, method and spec in the generator function metioned later
spec: {
wrapSelectors: {
requestFor: (ori, system) => (state, path, method) => {
return ori(path, method)
?.set("spec", state.get("json", {}))
?.setIn(["oasPathMethod", "path"], path)
?.setIn(["oasPathMethod", "method"], method);
},
mutatedRequestFor: (ori) => (state, path, method) => {
return ori(path, method)
?.set("spec", state.get("json", {}))
?.setIn(["oasPathMethod", "path"], path)
?.setIn(["oasPathMethod", "method"], method);
},
},
},
// extend the request snippets core plugin
requestSnippets: {
wrapSelectors: {
// add additional snippet generators here
getSnippetGenerators:
(ori, system) =>
(state, ...args) =>
ori(state, ...args)
// add node native snippet generator
.set(
// key
"node_native",
// config and generator function
system.Im.fromJS({
title: "NodeJs Native",
syntax: "javascript",
hostname: "test",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
// run OpenAPISnippet for target node
const targets = ["node_native"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
)
.set(
// key
"node_fetch",
// config and generator function
system.Im.fromJS({
title: "NodeJs fetch",
syntax: "javascript",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
// run OpenAPISnippet for target node
const targets = ["node_fetch"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
)
.set(
// key
"php_curl",
// config and generator function
system.Im.fromJS({
title: "PHP (curl)",
syntax: "php",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
// run OpenAPISnippet for target node
const targets = ["php_curl"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
)
.set(
// key
"java_okhttp",
// config and generator function
system.Im.fromJS({
title: "Java (OkHttp)",
syntax: "java",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
console.log(spec, oasPathMethod, path, method);
// run OpenAPISnippet for target node
const targets = ["java_okhttp"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
)
.set(
// key
"java",
// config and generator function
system.Im.fromJS({
title: "Java (Unirest)",
syntax: "java",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
// run OpenAPISnippet for target node
const targets = ["java"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
)
.set(
// key
"shell_httpie",
// config and generator function
system.Im.fromJS({
title: "Shell (HTTPie) ",
syntax: "bash",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
// run OpenAPISnippet for target node
const targets = ["shell_httpie"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
)
.set(
// key
"c_libcurl",
// config and generator function
system.Im.fromJS({
title: "C (libcurl) ",
syntax: "bash",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
// run OpenAPISnippet for target node
const targets = ["c_libcurl"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
)
.set(
// key
"go_native",
// config and generator function
system.Im.fromJS({
title: "Go",
syntax: "bash",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
// run OpenAPISnippet for target node
const targets = ["go_native"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
)
.set(
// key
"ruby",
// config and generator function
system.Im.fromJS({
title: "Ruby",
syntax: "ruby",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
// run OpenAPISnippet for target node
const targets = ["ruby"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
)
.set(
// key
"ruby",
// config and generator function
system.Im.fromJS({
title: "Python",
syntax: "python",
fn: (req) => {
// get extended info about request
const { spec, oasPathMethod } = req.toJS();
const { path, method } = oasPathMethod;
// run OpenAPISnippet for target node
const targets = ["python"];
let snippet;
try {
// set request snippet content
snippet = OpenAPISnippet.getEndpointSnippets(
spec,
path,
method,
targets
).snippets[0].content.replaceAll("undefinedundefined", "https://api.cal.com/v1");
} catch (err) {
// set to error in case it happens the npm package has some flaws
snippet = JSON.stringify(snippet);
}
// return stringified snipped
return snippet;
},
})
),
},
},
},
};
const requestSnippets = {
generators: {
@ -15,25 +375,24 @@ const requestSnippets = {
title: "cURL (CMD)",
syntax: "bash",
},
node: {
title: "Node",
syntax: "node",
},
},
defaultExpanded: true,
languages: ["curl_bash", "curl_powershell", "curl_cmd", "node"],
languages: ["curl_bash", "node"],
// e.g. only ow curl bash = ["curl_bash"]
};
export default function APIDocs() {
return (
<SwaggerUI
plugins={[SnippedGenerator]}
requestSnippets={requestSnippets}
requestSnippetsEnabled={true}
docExpansion="list"
operationsSorter="method"
filter={true}
tagsSorter="alpha"
url={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "http://localhost:3002/docs"}
tryItOutEnabled={true}
syntaxHighlight={true}
url={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://api.cal.com/docs"}
/>
);
}

2761
yarn.lock

File diff suppressed because it is too large Load Diff