docusaurus-theme-openapi-docs 0.0.0-618 → 0.0.0-684

package/src/theme/ApiExplorer/ApiCodeBlock/Line/index.js

@@ -0,0 +1,47 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React from "react";
+
+import clsx from "clsx";
+
+export default function CodeBlockLine({
+  line,
+  classNames,
+  showLineNumbers,
+  getLineProps,
+  getTokenProps,
+}) {
+  if (line.length === 1 && line[0].content === "\n") {
+    line[0].content = "";
+  }
+  const lineProps = getLineProps({
+    line,
+    className: clsx(
+      classNames,
+      showLineNumbers && "openapi-explorer__code-block-code-line"
+    ),
+  });
+  const lineTokens = line.map((token, key) => (
+    <span key={key} {...getTokenProps({ token, key })} />
+  ));
+  return (
+    <span {...lineProps}>
+      {showLineNumbers ? (
+        <>
+          <span className="openapi-explorer__code-block-code-line-number" />
+          <span className="openapi-explorer__code-block-code-line-content">
+            {lineTokens}
+          </span>
+        </>
+      ) : (
+        lineTokens
+      )}
+      <br />
+    </span>
+  );
+}

package/src/theme/ApiExplorer/ApiCodeBlock/WordWrapButton/_WordWrapButton.scss

@@ -0,0 +1,10 @@
+.openapi-explorer__code-block-word-wrap-btn-icon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.openapi-explorer__code-block-word-wrap-btn--enabled {
+  .openapi-explorer__code-block-word-wrap-btn-icon {
+    color: var(--ifm-color-primary);
+  }
+}

package/src/theme/ApiExplorer/ApiCodeBlock/WordWrapButton/index.js

@@ -0,0 +1,44 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React from "react";
+
+import { translate } from "@docusaurus/Translate";
+import clsx from "clsx";
+
+export default function WordWrapButton({ className, onClick, isEnabled }) {
+  const title = translate({
+    id: "theme.CodeBlock.wordWrapToggle",
+    message: "Toggle word wrap",
+    description:
+      "The title attribute for toggle word wrapping button of code block lines",
+  });
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={clsx(
+        "clean-btn",
+        className,
+        isEnabled && "openapi-explorer__code-block-word-wrap-btn--enabled"
+      )}
+      aria-label={title}
+      title={title}
+    >
+      <svg
+        className="openapi-explorer__code-block-word-wrap-btn-icon"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <path
+          fill="currentColor"
+          d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"
+        />
+      </svg>
+    </button>
+  );
+}

package/src/theme/ApiExplorer/ApiCodeBlock/index.js

@@ -0,0 +1,40 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React, { isValidElement } from "react";
+
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import ElementContent from "@theme/ApiExplorer/ApiCodeBlock/Content/Element";
+import StringContent from "@theme/ApiExplorer/ApiCodeBlock/Content/String";
+/**
+ * Best attempt to make the children a plain string so it is copyable. If there
+ * are react elements, we will not be able to copy the content, and it will
+ * return `children` as-is; otherwise, it concatenates the string children
+ * together.
+ */
+function maybeStringifyChildren(children) {
+  if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+    return children;
+  }
+  // The children is now guaranteed to be one/more plain strings
+  return Array.isArray(children) ? children.join("") : children;
+}
+export default function ApiCodeBlock({ children: rawChildren, ...props }) {
+  // The Prism theme on SSR is always the default theme but the site theme can
+  // be in a different mode. React hydration doesn't update DOM styles that come
+  // from SSR. Hence force a re-render after mounting to apply the current
+  // relevant styles.
+  const isBrowser = useIsBrowser();
+  const children = maybeStringifyChildren(rawChildren);
+  const CodeBlockComp =
+    typeof children === "string" ? StringContent : ElementContent;
+  return (
+    <CodeBlockComp key={String(isBrowser)} {...props}>
+      {children}
+    </CodeBlockComp>
+  );
+}

package/src/theme/{ApiDemoPanel → ApiExplorer}/Authorization/index.tsx

@@ -7,9 +7,9 @@
 
 import React from "react";
 
-import FormItem from "@theme/ApiDemoPanel/FormItem";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
+import FormItem from "@theme/ApiExplorer/FormItem";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 
 import { setAuthData, setSelectedAuth } from "./slice";

package/src/theme/{ApiDemoPanel → ApiExplorer}/Authorization/slice.ts

@@ -6,7 +6,7 @@
  * ========================================================================== */
 
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { createStorage, hashArray } from "@theme/ApiDemoPanel/storage-utils";
+import { createStorage, hashArray } from "@theme/ApiExplorer/storage-utils";
 import {
   SecurityRequirementObject,
   SecuritySchemeObject,

package/src/theme/{ApiDemoPanel → ApiExplorer}/Body/index.tsx

@@ -7,13 +7,12 @@
 
 import React from "react";
 
-import json2xml from "@theme/ApiDemoPanel/Body/json2xml";
-import ContentType from "@theme/ApiDemoPanel/ContentType";
-import FormFileUpload from "@theme/ApiDemoPanel/FormFileUpload";
-import FormItem from "@theme/ApiDemoPanel/FormItem";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
-import LiveApp from "@theme/ApiDemoPanel/LiveEditor";
+import json2xml from "@theme/ApiExplorer/Body/json2xml";
+import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
+import FormItem from "@theme/ApiExplorer/FormItem";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import LiveApp from "@theme/ApiExplorer/LiveEditor";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
@@ -31,9 +30,16 @@ import {
 export interface Props {
   jsonRequestBodyExample: string;
   requestBodyMetadata?: RequestBodyObject;
+  methods?: any;
+  required?: boolean;
 }
 
-function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
+function BodyWrap({
+  requestBodyMetadata,
+  jsonRequestBodyExample,
+  methods,
+  required,
+}: Props) {
   const contentType = useTypedSelector((state: any) => state.contentType.value);
 
   // NOTE: We used to check if body was required, but opted to always show the request body
@@ -45,20 +51,21 @@ function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   }
 
   return (
-    <>
-      <ContentType />
-      <Body
-        requestBodyMetadata={requestBodyMetadata}
-        jsonRequestBodyExample={jsonRequestBodyExample}
-      />
-    </>
+    <Body
+      requestBodyMetadata={requestBodyMetadata}
+      jsonRequestBodyExample={jsonRequestBodyExample}
+      required={required}
+    />
   );
 }
 
-function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
+function Body({
+  requestBodyMetadata,
+  jsonRequestBodyExample,
+  methods,
+  required,
+}: Props) {
   const contentType = useTypedSelector((state: any) => state.contentType.value);
-  const required = requestBodyMetadata?.required;
-
   const dispatch = useTypedDispatch();
 
   // Lot's of possible content-types:
@@ -88,7 +95,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
   if (schema?.format === "binary") {
     return (
-      <FormItem label="Body" required={required}>
+      <FormItem>
         <FormFileUpload
           placeholder={schema.description || "Body"}
           onChange={(file: any) => {
@@ -107,22 +114,14 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
       </FormItem>
     );
   }
-
   if (
     (contentType === "multipart/form-data" ||
       contentType === "application/x-www-form-urlencoded") &&
     schema?.type === "object"
   ) {
     return (
-      <FormItem label="Body" required={required}>
-        <div
-          style={{
-            marginTop: "calc(var(--ifm-pre-padding) / 2)",
-            borderRadius: "4px",
-            padding: "var(--ifm-pre-padding)",
-            border: "1px solid var(--openapi-monaco-border-color)",
-          }}
-        >
+      <FormItem className="openapi-explorer__form-item-body-container">
+        <div>
           {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
             if (val.format === "binary") {
               return (
@@ -196,6 +195,11 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
                 }
               >
                 <FormTextInput
+                  paramName={key}
+                  isRequired={
+                    Array.isArray(schema.required) &&
+                    schema.required.includes(key)
+                  }
                   placeholder={val.description || key}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     dispatch(
@@ -216,7 +220,10 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   let exampleBody;
   let examplesBodies = [] as any;
 
-  if (contentType === "application/json" || contentType.endsWith("+json")) {
+  if (
+    contentType.includes("application/json") ||
+    contentType.endsWith("+json")
+  ) {
     if (jsonRequestBodyExample) {
       defaultBody = JSON.stringify(jsonRequestBodyExample, null, 2);
     }
@@ -282,16 +289,26 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
   if (exampleBody) {
     return (
-      <FormItem label="Body" required={required}>
-        <SchemaTabs lazy>
-          <TabItem label="Default" value="default" default>
-            <LiveApp action={dispatch} language={language}>
+      <FormItem>
+        <SchemaTabs className="openapi-tabs__schema" lazy>
+          {/* @ts-ignore */}
+          <TabItem
+            label="Example (from schema)"
+            value="Example (from schema)"
+            default
+          >
+            <LiveApp action={dispatch} language={language} required={required}>
               {defaultBody}
             </LiveApp>
           </TabItem>
+          {/* @ts-ignore */}
           <TabItem label="Example" value="example">
             {exampleBody && (
-              <LiveApp action={dispatch} language={language}>
+              <LiveApp
+                action={dispatch}
+                language={language}
+                required={required}
+              >
                 {exampleBody}
               </LiveApp>
             )}
@@ -303,15 +320,21 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
   if (examplesBodies && examplesBodies.length > 0) {
     return (
-      <FormItem label="Body" required={required}>
-        <SchemaTabs lazy>
-          <TabItem label="Default" value="default" default>
-            <LiveApp action={dispatch} language={language}>
+      <FormItem className="openapi-explorer__form-item-body-container">
+        <SchemaTabs className="openapi-tabs__schema" lazy>
+          {/* @ts-ignore */}
+          <TabItem
+            label="Example (from schema)"
+            value="Example (from schema)"
+            default
+          >
+            <LiveApp action={dispatch} language={language} required={required}>
               {defaultBody}
             </LiveApp>
           </TabItem>
           {examplesBodies.map((example: any) => {
             return (
+              // @ts-ignore
               <TabItem
                 label={example.label}
                 value={example.label}
@@ -332,8 +355,8 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   }
 
   return (
-    <FormItem label="Body" required={required}>
-      <LiveApp action={dispatch} language={language}>
+    <FormItem>
+      <LiveApp action={dispatch} language={language} required={required}>
         {defaultBody}
       </LiveApp>
     </FormItem>

package/src/theme/{ApiDemoPanel/Curl → ApiExplorer/CodeSnippets}/index.tsx

@@ -10,21 +10,19 @@ import React, { useState, useEffect } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import codegen from "@paloaltonetworks/postman-code-generators";
 import sdk from "@paloaltonetworks/postman-collection";
-import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
-import CodeTabs from "@theme/ApiDemoPanel/CodeTabs";
+import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
+import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
+import CodeTabs from "@theme/ApiExplorer/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
-import CodeBlock from "@theme/CodeBlock";
-import clsx from "clsx";
 import merge from "lodash/merge";
 
-import styles from "./styles.module.css";
-
 export interface Language {
-  highlight?: string;
+  highlight: string;
   language: string;
-  logoClass?: string;
-  variant?: string;
-  options?: { [key: string]: boolean };
+  logoClass: string;
+  variant: string;
+  variants: string[];
+  options: { [key: string]: boolean };
   source?: string;
 }
 
@@ -39,6 +37,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl"],
   },
   {
     highlight: "python",
@@ -49,6 +48,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "requests",
+    variants: ["requests", "http.client"],
   },
   {
     highlight: "go",
@@ -59,6 +59,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "native",
+    variants: ["native"],
   },
   {
     highlight: "javascript",
@@ -70,6 +71,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "axios",
+    variants: ["axios", "native", "request", "unirest"],
   },
   {
     highlight: "ruby",
@@ -80,6 +82,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "Net::HTTP",
+    variants: ["net::http"],
   },
   {
     highlight: "csharp",
@@ -90,6 +93,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "RestSharp",
+    variants: ["restsharp", "httpclient"],
   },
   {
     highlight: "php",
@@ -100,6 +104,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl", "guzzle", "pecl_http", "http_request2"],
   },
   {
     highlight: "java",
@@ -110,6 +115,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "OkHttp",
+    variants: ["okhttp", "unirest"],
   },
   {
     highlight: "powershell",
@@ -120,6 +126,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "RestMethod",
+    variants: ["restmethod"],
   },
 ];
 
@@ -130,17 +137,13 @@ export interface Props {
 
 function CodeTab({ children, hidden, className, onClick }: any): JSX.Element {
   return (
-    <div
-      role="tabpanel"
-      className={clsx(styles.tabItem, className)}
-      {...{ hidden }}
-    >
+    <div role="tabpanel" className={className} {...{ hidden }}>
       {children}
     </div>
   );
 }
 
-function Curl({ postman, codeSamples }: Props) {
+function CodeSnippets({ postman, codeSamples }: Props) {
   // TODO: match theme for vscode.
 
   const { siteConfig } = useDocusaurusContext();
@@ -180,7 +183,7 @@ function Curl({ postman, codeSamples }: Props) {
     (lang) =>
       lang.language === localStorage.getItem("docusaurus.tab.code-samples")
   );
-
+  const [selectedVariant, setSelectedVariant] = useState();
   const [language, setLanguage] = useState(() => {
     // Return first index if only 1 user-defined language exists
     if (mergedLangs.length === 1) {
@@ -189,7 +192,6 @@ function Curl({ postman, codeSamples }: Props) {
     // Fall back to language in localStorage or first user-defined language
     return defaultLang[0] ?? mergedLangs[0];
   });
-
   const [codeText, setCodeText] = useState("");
 
   useEffect(() => {
@@ -205,7 +207,6 @@ function Curl({ postman, codeSamples }: Props) {
         server,
         auth,
       });
-
       codegen.convert(
         language.language,
         language.variant,
@@ -271,32 +272,91 @@ function Curl({ postman, codeSamples }: Props) {
     mergedLangs,
   ]);
 
+  useEffect(() => {
+    if (selectedVariant && selectedVariant !== language.variant) {
+      const postmanRequest = buildPostmanRequest(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth,
+      });
+      codegen.convert(
+        language.language,
+        selectedVariant,
+        postmanRequest,
+        language.options,
+        (error: any, snippet: string) => {
+          if (error) {
+            return;
+          }
+          setCodeText(snippet);
+        }
+      );
+    }
+  });
+
   if (language === undefined) {
     return null;
   }
 
   return (
     <>
-      <CodeTabs groupId="code-samples" action={setLanguage}>
+      <CodeTabs
+        groupId="code-samples"
+        action={{
+          setLanguage: setLanguage,
+          setSelectedVariant: setSelectedVariant,
+        }}
+        lazy
+      >
         {mergedLangs.map((lang) => {
           return (
             <CodeTab
               value={lang.language}
-              label={""}
-              key={
-                lang.variant
-                  ? `${lang.language}-${lang.variant}`
-                  : lang.language
-              }
-              attributes={{ className: `code__tab--${lang.logoClass}` }}
+              label={lang.language}
+              key={lang.language}
+              attributes={{
+                className: `openapi-tabs__code-item--${lang.logoClass}`,
+              }}
             >
-              <CodeBlock
-                language={lang.highlight}
-                className={styles.codeBlock}
-                title={`${lang.language} / ${lang.variant}`}
+              <CodeTabs
+                className="openapi-tabs__code-container-inner"
+                action={{
+                  setLanguage: setLanguage,
+                  setSelectedVariant: setSelectedVariant,
+                }}
+                includeVariant={true}
+                currentLanguage={lang.language}
+                defaultValue={selectedVariant}
+                lazy
               >
-                {codeText}
-              </CodeBlock>
+                {lang.variants.map((variant) => {
+                  return (
+                    <CodeTab
+                      value={variant.toLowerCase()}
+                      label={variant.toUpperCase()}
+                      key={`${lang.language}-${lang.variant}`}
+                      attributes={{
+                        className: `openapi-tabs__code-item--variant`,
+                      }}
+                    >
+                      {/* @ts-ignore */}
+                      <ApiCodeBlock
+                        language={lang.highlight}
+                        className="openapi-explorer__code-block"
+                        showLineNumbers={true}
+                      >
+                        {codeText}
+                      </ApiCodeBlock>
+                    </CodeTab>
+                  );
+                })}
+              </CodeTabs>
             </CodeTab>
           );
         })}
@@ -305,4 +365,4 @@ function Curl({ postman, codeSamples }: Props) {
   );
 }
 
-export default Curl;
+export default CodeSnippets;