docusaurus-theme-openapi-docs 2.0.0-beta.2 → 2.0.0-beta.3

package/src/theme/ApiDemoPanel/CodeTabs/index.js

@@ -17,6 +17,8 @@ import clsx from "clsx";
 
 function TabList({
   action,
+  currentLanguage,
+  includeVariant,
   className,
   block,
   selectedValue,
@@ -38,10 +40,20 @@ function TabList({
     }
 
     if (action) {
-      const newLanguage = languageSet.filter(
-        (lang) => lang.language === newTabValue
-      );
-      action(newLanguage[0]);
+      let newLanguage;
+      if (currentLanguage && includeVariant) {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === currentLanguage
+        )[0];
+        newLanguage.variant = newTabValue;
+        action.setSelectedVariant(newTabValue.toLowerCase());
+      } else {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === newTabValue
+        )[0];
+        action.setSelectedVariant(newLanguage.variant.toLowerCase());
+      }
+      action.setLanguage(newLanguage);
     }
   };
 
@@ -101,7 +113,7 @@ function TabList({
             }
           )}
         >
-          {label ?? value}
+          <span>{label ?? value}</span>
         </li>
       ))}
     </ul>
@@ -122,7 +134,7 @@ function TabContent({ lazy, children, selectedValue }) {
     return cloneElement(selectedTabItem, { className: "margin-top--md" });
   }
   return (
-    <div className="margin-top--md">
+    <div className="margin-top--md openapi-tabs__code-content">
       {children.map((tabItem, i) =>
         cloneElement(tabItem, {
           key: i,
@@ -135,8 +147,14 @@ function TabContent({ lazy, children, selectedValue }) {
 
 function TabsComponent(props) {
   const tabs = useTabs(props);
+  const { className } = props;
+
   return (
-    <div className="tabs-container">
+    <div
+      className={clsx("tabs-container openapi-tabs__code-container", {
+        [className]: className,
+      })}
+    >
       <TabList {...props} {...tabs} />
       <TabContent {...props} {...tabs} />
     </div>

package/src/theme/ApiDemoPanel/Curl/index.tsx

@@ -10,18 +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 ApiCodeBlock from "@theme/ApiDemoPanel/ApiCodeBlock";
 import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
 import CodeTabs from "@theme/ApiDemoPanel/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
-import CodeBlock from "@theme/CodeBlock";
 import merge from "lodash/merge";
 
 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;
 }
 
@@ -36,6 +37,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl"],
   },
   {
     highlight: "python",
@@ -46,6 +48,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "requests",
+    variants: ["requests", "http.client"],
   },
   {
     highlight: "go",
@@ -56,6 +59,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "native",
+    variants: ["native"],
   },
   {
     highlight: "javascript",
@@ -67,6 +71,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "axios",
+    variants: ["axios", "native", "request", "unirest"],
   },
   {
     highlight: "ruby",
@@ -77,6 +82,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "Net::HTTP",
+    variants: ["net::http"],
   },
   {
     highlight: "csharp",
@@ -87,6 +93,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "RestSharp",
+    variants: ["restsharp", "httpclient"],
   },
   {
     highlight: "php",
@@ -97,6 +104,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl", "guzzle", "pecl_http", "http_request2"],
   },
   {
     highlight: "java",
@@ -107,6 +115,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "OkHttp",
+    variants: ["okhttp", "unirest"],
   },
   {
     highlight: "powershell",
@@ -117,6 +126,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "RestMethod",
+    variants: ["restmethod"],
   },
 ];
 
@@ -173,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) {
@@ -182,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(() => {
@@ -198,7 +207,6 @@ function Curl({ postman, codeSamples }: Props) {
         server,
         auth,
       });
-
       codegen.convert(
         language.language,
         language.variant,
@@ -264,34 +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
-              }
+              label={lang.language}
+              key={lang.language}
               attributes={{
                 className: `openapi-tabs__code-item--${lang.logoClass}`,
               }}
             >
-              <CodeBlock
-                language={lang.highlight}
-                className="openapi-demo__code-block"
-                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-demo__code-block"
+                        showLineNumbers={true}
+                      >
+                        {codeText}
+                      </ApiCodeBlock>
+                    </CodeTab>
+                  );
+                })}
+              </CodeTabs>
             </CodeTab>
           );
         })}

package/src/theme/ApiDemoPanel/FormItem/_FormItem.scss

@@ -1,12 +1,21 @@
 .openapi-demo__form-item {
-  margin-top: var(--ifm-pre-padding);
+  padding: var(--openapi-demo-padding-input);
+  font-size: var(--openapi-demo-font-size-input);
 
   &:first-child {
     margin-top: 0;
   }
 
   .required {
-    font-size: var(--ifm-code-font-size);
     color: var(--openapi-required);
   }
 }
+
+.openapi-demo__form-item-body-container {
+  padding: 0;
+}
+
+.openapi-demo__form-item-label {
+  font-family: var(--ifm-font-family-monospace);
+  font-weight: bold;
+}

package/src/theme/ApiDemoPanel/FormItem/index.tsx

@@ -7,26 +7,24 @@
 
 import React from "react";
 
+import clsx from "clsx";
+
 export interface Props {
   label?: string;
   type?: string;
   required?: boolean | undefined;
   children?: React.ReactNode;
+  className?: string;
 }
 
-function FormItem({ label, type, required, children }: Props) {
+function FormItem({ label, type, required, children, className }: Props) {
   return (
-    <div className="openapi-demo__form-item">
-      <code>{label}</code>
-      {type && <span style={{ opacity: 0.6 }}> — {type}</span>}
-      {required && (
-        <span>
-          {" "}
-          <small>
-            <strong className="required"> required</strong>
-          </small>
-        </span>
+    <div className={clsx("openapi-demo__form-item", className)}>
+      {label && (
+        <label className="openapi-demo__form-item-label">{label}</label>
       )}
+      {type && <span style={{ opacity: 0.6 }}> — {type}</span>}
+      {required && <span className="openapi-schema__required">required</span>}
       <div>{children}</div>
     </div>
   );

package/src/theme/ApiDemoPanel/FormMultiSelect/_FormMultiSelect.scss

@@ -1,19 +1,23 @@
 .openapi-demo__multi-select-input {
   width: 100%;
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  padding: 12px var(--ifm-pre-padding);
+  padding: 1rem;
   border-radius: 4px;
-  border: 2px solid transparent;
+  border: 1px solid transparent;
   background-color: var(--openapi-input-background);
   outline: none;
-  font-size: var(--ifm-code-font-size);
+  font-size: var(--openapi-demo-font-size-input);
   color: var(--ifm-pre-color);
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
 
   &:focus {
-    border: 2px solid var(--openapi-input-border);
+    border: 1px solid var(--openapi-input-border);
+  }
+
+  &.error {
+    border: 1px solid var(--ifm-color-danger);
   }
 
   option {

package/src/theme/ApiDemoPanel/FormMultiSelect/index.tsx

@@ -7,13 +7,16 @@
 
 import React from "react";
 
+import clsx from "clsx";
+
 export interface Props {
   value?: string;
   options: string[];
   onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  showErrors?: boolean;
 }
 
-function FormMultiSelect({ value, options, onChange }: Props) {
+function FormMultiSelect({ value, options, onChange, showErrors }: Props) {
   if (options.length === 0) {
     return null;
   }
@@ -32,7 +35,9 @@ function FormMultiSelect({ value, options, onChange }: Props) {
   return (
     <select
       style={{ height: height }}
-      className="openapi-demo__multi-select-input"
+      className={clsx("openapi-demo__multi-select-input", {
+        error: showErrors,
+      })}
       value={value}
       onChange={onChange}
       size={Math.min(6, options.length + 1)}

package/src/theme/ApiDemoPanel/FormSelect/_FormSelect.scss

@@ -4,7 +4,6 @@ html[data-theme="dark"] .openapi-demo__select-input {
   border: none;
   outline: none;
   width: 100%;
-  font-size: var(--ifm-code-font-size);
   color: var(--ifm-pre-color);
 
   border-radius: 4px;
@@ -21,12 +20,13 @@ html[data-theme="dark"] .openapi-demo__select-input {
 .openapi-demo__select-input {
   width: 100%;
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  padding: 12px 48px 12px var(--ifm-pre-padding);
+  padding: var(--openapi-demo-padding-input);
   border: none;
   outline: none;
   border-radius: 4px;
   background-color: var(--openapi-input-background);
-  font-size: var(--ifm-code-font-size);
+  font-size: var(--openapi-demo-font-size-input);
+  font-family: var(--ifm-font-family-monospace);
   color: var(--ifm-pre-color);
   -moz-appearance: none;
   -webkit-appearance: none;

package/src/theme/ApiDemoPanel/FormTextInput/_FormTextInput.scss

@@ -1,15 +1,34 @@
-.openapi-demo__input {
+.openapi-demo__form-item-input {
   margin-top: calc(var(--ifm-pre-padding) / 2);
   background-color: var(--openapi-input-background);
-  border: none;
+  border: 1px solid transparent;
   outline: none;
   width: 100%;
-  font-size: var(--ifm-code-font-size);
   color: var(--ifm-pre-color);
-  padding: 12px var(--ifm-pre-padding);
+  padding: var(--openapi-demo-padding-input);
   border-radius: 4px;
 
+  &:hover {
+    border: 1px solid var(--ifm-toc-border-color);
+  }
+
   &:focus {
-    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+    border: 1px solid var(--ifm-color-primary);
+    box-shadow: none;
+  }
+
+  &.error {
+    border: 1px solid var(--openapi-required);
+  }
+}
+
+.openapi-demo__input-error {
+  font-size: var(--openapi-demo-font-size-input);
+  color: var(--openapi-required);
+  padding-top: var(--openapi-demo-padding-input);
+
+  &::before {
+    display: inline;
+    content: "⚠ ";
   }
 }

package/src/theme/ApiDemoPanel/FormTextInput/index.tsx

@@ -5,8 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+// @ts-nocheck
 import React from "react";
 
+import { ErrorMessage } from "@hookform/error-message";
+import clsx from "clsx";
+import { useFormContext } from "react-hook-form";
+
 export interface Props {
   value?: string;
   placeholder?: string;
@@ -14,18 +19,61 @@ export interface Props {
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
 
-function FormTextInput({ value, placeholder, password, onChange }: Props) {
+function FormTextInput({
+  isRequired,
+  value,
+  placeholder,
+  password,
+  onChange,
+  paramName,
+}: Props) {
   placeholder = placeholder?.split("\n")[0];
+
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const showErrorMessage = errors?.[paramName]?.message;
+
   return (
-    <input
-      className="openapi-demo__input"
-      type={password ? "password" : "text"}
-      placeholder={placeholder}
-      title={placeholder}
-      value={value}
-      onChange={onChange}
-      autoComplete="off"
-    />
+    <>
+      {paramName ? (
+        <input
+          {...register(paramName, {
+            required: isRequired ? "This field is required" : false,
+          })}
+          className={clsx("openapi-demo__form-item-input", {
+            error: showErrorMessage,
+          })}
+          type={password ? "password" : "text"}
+          placeholder={placeholder}
+          title={placeholder}
+          value={value}
+          onChange={onChange}
+          autoComplete="off"
+        />
+      ) : (
+        <input
+          className="openapi-demo__form-item-input"
+          type={password ? "password" : "text"}
+          placeholder={placeholder}
+          title={placeholder}
+          value={value}
+          onChange={onChange}
+          autoComplete="off"
+        />
+      )}
+      {showErrorMessage && (
+        <ErrorMessage
+          errors={errors}
+          name={paramName}
+          render={({ message }) => (
+            <div className="openapi-demo__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
   );
 }
 

package/src/theme/ApiDemoPanel/LiveEditor/index.tsx

@@ -9,29 +9,31 @@ import React, { useEffect, useState } from "react";
 
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import { ErrorMessage } from "@hookform/error-message";
 import { setStringRawBody } from "@theme/ApiDemoPanel/Body/slice";
+import clsx from "clsx";
+import { Controller, useFormContext } from "react-hook-form";
 import { LiveProvider, LiveEditor, withLive } from "react-live";
 
-function Live({ onEdit }: any) {
+function Live({ onEdit, showErrors }: any) {
   const isBrowser = useIsBrowser();
   const [editorDisabled, setEditorDisabled] = useState(false);
 
-  // TODO: Temporary solution for disabling tab key
-  const handleKeydown = (event: React.KeyboardEvent) => {
-    if (event.key === "Tab") {
-      event.preventDefault();
-      setEditorDisabled(true);
-    }
-  };
-
   return (
-    <div onClick={() => setEditorDisabled(false)}>
+    <div
+      onClick={() => setEditorDisabled(false)}
+      onBlur={() => setEditorDisabled(true)}
+    >
       <LiveEditor
         key={String(isBrowser)}
-        className="openapi-demo__playground-editor"
+        className={clsx({
+          "openapi-demo__playground-editor": true,
+          "openapi-demo__form-item-input": showErrors,
+          error: showErrors,
+        })}
         onChange={onEdit}
         disabled={editorDisabled}
-        onKeyDown={handleKeydown}
+        tabMode="focus"
       />
     </div>
   );
@@ -45,6 +47,7 @@ function App({
   value,
   language,
   action,
+  required: isRequired,
   ...props
 }: any): JSX.Element {
   const prismTheme = usePrismTheme();
@@ -54,8 +57,24 @@ function App({
     action(setStringRawBody(code));
   }, [action, code]);
 
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const showErrorMessage = errors?.requestBody;
+
+  const handleChange = (snippet: string, onChange: any) => {
+    setCode(snippet);
+    onChange(snippet);
+  };
+
   return (
-    <div className="openapi-demo__playground-container">
+    <div
+      className={clsx({
+        "openapi-demo__playground-container": true,
+      })}
+    >
       <LiveProvider
         code={children.replace(/\n$/, "")}
         transformCode={transformCode ?? ((code) => `${code};`)}
@@ -63,7 +82,27 @@ function App({
         language={language}
         {...props}
       >
-        <LiveComponent onEdit={setCode} />
+        <Controller
+          control={control}
+          rules={{ required: isRequired ? "This field is required" : false }}
+          name="requestBody"
+          render={({ field: { onChange, name } }) => (
+            <LiveComponent
+              onEdit={(e: any) => handleChange(e, onChange)}
+              name={name}
+              showErrors={showErrorMessage}
+            />
+          )}
+        />
+        {showErrorMessage && (
+          <ErrorMessage
+            errors={errors}
+            name="requestBody"
+            render={({ message }) => (
+              <div className="openapi-demo__input-error">{message}</div>
+            )}
+          />
+        )}
       </LiveProvider>
     </div>
   );

package/src/theme/ApiDemoPanel/MethodEndpoint/_MethodEndpoint.scss

@@ -1,6 +1,22 @@
 .openapi__method-endpoint {
+  display: flex;
+  align-items: center;
   max-width: 100%;
   width: fit-content;
   padding: 0.65rem;
   border: 1px solid var(--ifm-toc-border-color);
 }
+
+.openapi__method-endpoint-path {
+  margin-bottom: 0;
+  margin-left: 0.5rem;
+  font-size: 12px;
+  font-weight: normal;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.openapi__divider {
+  width: 100%;
+  margin: 1.5rem 0;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+}