[Enhancement] Expand supported CodeTab languages (#235)

* Generate available languages object and add C# and Ruby to languageSet

* Fetch dev icons by URL

* Write languages metadata to JSON file

* Switch back to non-forked postman-code-generators

* Add languageTabs and additionalLanguages

* Add eslint rule to ignore empty array callback return

* Refactor languageSet and add support for PHP

* Switch back to forked @paloaltonetworks/postman-code-generators

* Update languageTabs example

* Use space-between for code tabs ul

* Use table-row-group to align tabs to left and auto wrap (removes scroll)

* Increase size of dev icons and padding

* Support generating code snippet when only one language is defined and for merging user config with languageSet

* Update languageTabs example

Co-authored-by: Bryan <blindaa121@gmail.com>

Author: sserrata

demo/docusaurus.config.js

@@ -135,7 +135,45 @@ const config = {
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
+        additionalLanguages: ["ruby", "csharp", "php"],
       },
+      languageTabs: [
+        {
+          highlight: "bash",
+          language: "curl",
+          logoClass: "bash",
+        },
+        {
+          highlight: "python",
+          language: "python",
+          logoClass: "python",
+        },
+        {
+          highlight: "go",
+          language: "go",
+          logoClass: "go",
+        },
+        {
+          highlight: "javascript",
+          language: "nodejs",
+          logoClass: "nodejs",
+        },
+        // {
+        //   highlight: "ruby",
+        //   language: "ruby",
+        //   logoClass: "ruby",
+        // },
+        {
+          highlight: "csharp",
+          language: "csharp",
+          logoClass: "csharp",
+        },
+        // {
+        //   highlight: "php",
+        //   language: "php",
+        //   logoClass: "php",
+        // },
+      ],
     }),
 
   plugins: [

packages/docusaurus-theme-openapi-docs/package.json

@@ -44,7 +44,7 @@
   "dependencies": {
     "@docusaurus/theme-common": "2.0.1",
     "@mdx-js/react": "^1.6.21",
-    "@paloaltonetworks/postman-code-generators": "1.1.5-hotfix.5",
+    "@paloaltonetworks/postman-code-generators": "^1.1.9",
     "@paloaltonetworks/postman-collection": "^4.1.0",
     "@reduxjs/toolkit": "^1.7.1",
     "buffer": "^6.0.3",

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/CodeTabs/styles.module.css

@@ -7,5 +7,11 @@
 }
 
 .code__tabs {
-  justify-content: space-around;
+  display: table-row-group;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 996px) {
+  .code__tabs {
+    justify-content: space-around;
+  }
 }

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Curl/index.tsx

@@ -19,61 +19,86 @@ import buildPostmanRequest from "./../buildPostmanRequest";
 import styles from "./styles.module.css";
 
 interface Language {
-  tabName: string;
-  highlight: string;
+  highlight?: string;
   language: string;
-  codeLanguage?: string;
-  variant: string;
-  options: { [key: string]: boolean };
+  logoClass?: string;
+  variant?: string;
+  options?: { [key: string]: boolean };
   source?: string;
 }
 
 export const languageSet: Language[] = [
   {
-    tabName: "cURL",
     highlight: "bash",
     language: "curl",
-    codeLanguage: "bash",
-    variant: "curl",
+    logoClass: "bash",
     options: {
       longFormat: false,
       followRedirect: true,
       trimRequestBody: true,
     },
+    variant: "cURL",
   },
   {
-    tabName: "Python",
     highlight: "python",
     language: "python",
-    codeLanguage: "python",
-    variant: "requests",
+    logoClass: "python",
     options: {
       followRedirect: true,
       trimRequestBody: true,
     },
+    variant: "requests",
   },
   {
-    tabName: "Go",
     highlight: "go",
     language: "go",
-    codeLanguage: "go",
-    variant: "native",
+    logoClass: "go",
     options: {
       followRedirect: true,
       trimRequestBody: true,
     },
+    variant: "native",
   },
   {
-    tabName: "Node",
     highlight: "javascript",
     language: "nodejs",
-    codeLanguage: "javascript",
-    variant: "axios",
+    logoClass: "nodejs",
     options: {
       ES6_enabled: true,
       followRedirect: true,
       trimRequestBody: true,
     },
+    variant: "axios",
+  },
+  {
+    highlight: "ruby",
+    language: "ruby",
+    logoClass: "ruby",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "Net::HTTP",
+  },
+  {
+    highlight: "csharp",
+    language: "csharp",
+    logoClass: "csharp",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "RestSharp",
+  },
+  {
+    highlight: "php",
+    language: "php",
+    logoClass: "php",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "cURL",
   },
 ];
 
@@ -120,10 +145,15 @@ function Curl({ postman, codeSamples }: Props) {
 
   const defaultLang: Language[] = languageSet.filter(
     (lang) =>
-      lang.codeLanguage === localStorage.getItem("docusaurus.tab.code-samples")
+      lang.language === localStorage.getItem("docusaurus.tab.code-samples")
   );
 
-  const [language, setLanguage] = useState(defaultLang[0] ?? langs[0]);
+  const [language, setLanguage] = useState(() => {
+    if (langs.length === 1) {
+      return langs[0];
+    }
+    return defaultLang[0] ?? langs[0];
+  });
 
   const [codeText, setCodeText] = useState("");
 
@@ -155,6 +185,39 @@ function Curl({ postman, codeSamples }: Props) {
       );
     } else if (language && !!language.source) {
       setCodeText(language.source);
+    } else if (language && !language.options) {
+      const langSource = languageSet.filter(
+        (lang) => lang.language === language.language
+      );
+
+      // Merges user-defined language with default languageSet
+      // This allows users to define only the minimal properties necessary in languageTabs
+      // User-defined properties should override languageSet properties
+      const mergedLanguage = { ...langSource[0], ...language };
+      const postmanRequest = buildPostmanRequest(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth,
+      });
+
+      codegen.convert(
+        mergedLanguage.language,
+        mergedLanguage.variant,
+        postmanRequest,
+        mergedLanguage.options,
+        (error: any, snippet: string) => {
+          if (error) {
+            return;
+          }
+          setCodeText(snippet);
+        }
+      );
     } else {
       setCodeText("");
     }
@@ -184,10 +247,14 @@ function Curl({ postman, codeSamples }: Props) {
             <CodeTab
               value={lang.language}
               label={""}
-              key={lang.tabName || lang.label}
-              attributes={{ className: `code__tab--${lang.codeLanguage}` }}
+              key={
+                lang.variant
+                  ? `${lang.language}-${lang.variant}`
+                  : lang.language
+              }
+              attributes={{ className: `code__tab--${lang.logoClass}` }}
             >
-              <CodeBlock language={lang.codeLanguage}>{codeText}</CodeBlock>
+              <CodeBlock language={lang.highlight}>{codeText}</CodeBlock>
             </CodeTab>
           );
         })}