docusaurus-theme-openapi-docs 0.0.0-beta.646 → 0.0.0-beta.651

package/lib/theme/styles.scss

@@ -54,10 +54,37 @@
   --openapi-input-border: var(--ifm-color-primary);
   --openapi-input-background: var(--openapi-card-background-color);
   --openapi-tree-line-color: var(--ifm-toc-border-color);
+  --openapi-code-tab-border-color: var(--ifm-toc-border-color);
+  --openapi-code-tab-border-color-python: #ffdb50;
+  --openapi-code-tab-border-color-bash: var(--ifm-color-danger);
+  --openapi-code-tab-border-color-go: var(--ifm-color-info);
+  --openapi-code-tab-border-color-js: var(--ifm-color-warning);
+  --openapi-code-tab-border-color-ruby: var(--ifm-color-danger);
+  --openapi-code-tab-border-color-csharp: #9b4f96;
+  --openapi-code-tab-border-color-nodejs: var(--ifm-color-success);
+  --openapi-code-tab-border-color-php: #6181b6;
+  --openapi-code-tab-border-color-java: #0374bd;
+  --openapi-code-tab-border-color-powershell: #00adef;
+  --openapi-code-tab-shadow-color-python: rgba(255, 219, 80, 0.25);
+  --openapi-code-tab-shadow-color-bash: rgba(250, 56, 62, 0.25);
+  --openapi-code-tab-shadow-color-go: rgba(84, 199, 236, 0.25);
+  --openapi-code-tab-shadow-color-js: rgba(255, 186, 0, 0.25);
+  --openapi-code-tab-shadow-color-ruby: rgba(250, 56, 62, 0.25);
+  --openapi-code-tab-shadow-color-csharp: rgba(155, 79, 150, 0.25);
+  --opeanpi-code-tab-shadow-color-nodejs: rgba(0, 164, 0, 0.25);
+  --openapi-code-tab-shadow-color-php: rgba(97, 129, 182, 0.25);
+  --openapi-code-tab-shadow-color-java: rgba(3, 116, 189, 0.25);
+  --opeanpi-code-tab-shadow-color-powershell: rgba(3, 116, 189, 0.25);
+  --openapi-demo-font-size-input: 12px;
+  --openapi-demo-font-size-code: 12px;
+  --openapi-demo-padding-input: 0.5rem;
+  --openapi-demo-border-color: var(--ifm-toc-border-color);
+  --openapi-demo-caret-bg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
 }
 
 [data-theme="dark"] {
   --openapi-card-background-color: var(--ifm-color-gray-900) !important;
+  --openapi-demo-caret-bg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24" fill="white"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>') !important;
 }
 
 .docs-wrapper {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-beta.646",
+  "version": "0.0.0-beta.651",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -41,7 +41,9 @@
   },
   "dependencies": {
     "@docusaurus/theme-common": "^2.3.0",
+    "@hookform/error-message": "^2.0.1",
     "@mdx-js/react": "^1.6.21",
+    "@nextui-org/react": "^1.0.0-beta.12",
     "@paloaltonetworks/postman-code-generators": "1.1.15-patch.2",
     "@paloaltonetworks/postman-collection": "^4.1.0",
     "@reduxjs/toolkit": "^1.7.1",
@@ -49,7 +51,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-beta.646",
+    "docusaurus-plugin-openapi-docs": "0.0.0-beta.651",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "immer": "^9.0.7",
@@ -57,7 +59,8 @@
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prism-react-renderer": "^1.3.5",
     "process": "^0.11.10",
-    "react-live": "^3.1.1",
+    "react-hook-form": "^7.43.8",
+    "react-live": "^4.0.0",
     "react-magic-dropzone": "^1.0.1",
     "react-markdown": "^8.0.1",
     "react-modal": "^3.15.1",
@@ -75,5 +78,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "15ab01afc0523c9407b75c66b33e2df018af0f6d"
+  "gitHead": "481c6eff7a5fff6fba2ef52e877ebb27a875259e"
 }

package/src/theme/ApiDemoPanel/ApiCodeBlock/Content/_Content.scss

@@ -15,6 +15,7 @@
 }
 
 .openapi-demo__code-block {
+  border-radius: var(--ifm-global-radius);
   --ifm-pre-background: var(--prism-background-color);
   margin: 0;
   padding: 0;

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

@@ -8,7 +8,6 @@
 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";
@@ -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) => {
@@ -114,15 +121,8 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
     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-demo__form-item-body-container">
+        <div>
           {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
             if (val.format === "binary") {
               return (
@@ -196,6 +196,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(
@@ -282,18 +287,22 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
   if (exampleBody) {
     return (
-      <FormItem label="Body" required={required}>
+      <FormItem>
         <SchemaTabs className="openapi-tabs__schema" lazy>
           {/* @ts-ignore */}
           <TabItem label="Default" value="default" default>
-            <LiveApp action={dispatch} language={language}>
+            <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>
             )}
@@ -305,11 +314,11 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
   if (examplesBodies && examplesBodies.length > 0) {
     return (
-      <FormItem label="Body" required={required}>
+      <FormItem className="openapi-demo__form-item-body-container">
         <SchemaTabs className="openapi-tabs__schema" lazy>
           {/* @ts-ignore */}
           <TabItem label="Default" value="default" default>
-            <LiveApp action={dispatch} language={language}>
+            <LiveApp action={dispatch} language={language} required={required}>
               {defaultBody}
             </LiveApp>
           </TabItem>
@@ -336,8 +345,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/CodeTabs/_CodeTabs.scss

@@ -12,11 +12,55 @@
 
 .openapi-tabs__code-container {
   margin-bottom: 1rem;
+
+  &:not(.openapi-tabs__code-container-inner) {
+    padding: 1rem;
+    background-color: var(--ifm-pre-background);
+    border-radius: var(--ifm-global-radius);
+    border: 1px solid var(--openapi-demo-border-color);
+    box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1),
+      0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
+    transition: 300ms;
+
+    &:hover {
+      box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15),
+        0 2px 3px hsla(222, 8%, 43%, 0.15),
+        0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
+    }
+  }
+
+  .openapi-tabs__code-item {
+    display: flex;
+    flex-direction: column-reverse;
+    flex: 0 0 80px;
+    align-items: center;
+    padding: 0.5rem 0 !important;
+    margin-top: 0 !important;
+    margin-right: 0.5rem;
+    border: 1px solid transparent;
+    transition: 300ms;
+
+    &:not(.active):hover {
+      border: 1px solid var(--openapi-code-tab-border-color);
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    span {
+      padding-top: 0.5rem;
+      color: var(--ifm-font-color-secondary);
+      font-size: 10px;
+      text-transform: uppercase;
+    }
+  }
 }
 
 .openapi-tabs__code-list-container {
   display: flex;
   justify-content: flex-start;
+  padding: 0.25rem;
   padding-bottom: 0.6rem;
 }
 
@@ -26,6 +70,8 @@
 
 .openapi-demo__code-block code {
   max-height: 200px;
+  font-size: var(--openapi-demo-font-size-code);
+  padding-top: var(--ifm-pre-padding);
 }
 
 body[class="ReactModal__Body--open"] {
@@ -34,20 +80,20 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
-.openapi-tabs__code-item {
-  margin-top: 0 !important;
-  margin-right: 0.5rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
+.openapi-tabs__code-item--variant {
+  color: var(--ifm-color-secondary);
 
   &.active {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-color: var(--ifm-toc-border-color);
   }
 }
 
+.openapi-tabs__code-item--variant > span {
+  padding-top: unset !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
 .openapi-tabs__code-item--python {
   color: var(--ifm-color-success);
 
@@ -55,13 +101,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-python);
+    border-color: var(--openapi-code-tab-border-color-python);
   }
 }
 
@@ -72,13 +119,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-info);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-go);
+    border-color: var(--openapi-code-tab-border-color-go);
   }
 }
 
@@ -89,13 +137,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-warning);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-js);
+    border-color: var(--openapi-code-tab-border-color-js);
   }
 }
 
@@ -106,15 +155,16 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/bash/bash-plain.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/bash/bash-plain.svg")
+      no-repeat;
     margin-block: auto;
     background-color: var(--bash-background-color);
     border-radius: var(--bash-border-radius);
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-danger);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-bash);
+    border-color: var(--ifm-color-danger);
   }
 }
 
@@ -125,13 +175,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-danger);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-ruby);
+    border-color: var(--openapi-code-tab-border-color-ruby);
   }
 }
 
@@ -142,13 +193,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-gray-500);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-csharp);
+    border-color: var(--openapi-code-tab-border-color-csharp);
   }
 }
 
@@ -159,13 +211,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-nodejs);
+    border-color: var(--openapi-code-tab-border-color-nodejs);
   }
 }
 
@@ -176,13 +229,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-gray-500);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-php);
+    border-color: var(--openapi-code-tab-border-color-php);
   }
 }
 
@@ -193,13 +247,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-warning);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-java);
+    border-color: var(--openapi-code-tab-border-color-java);
   }
 }
 
@@ -210,13 +265,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-powershell);
+    border-color: var(--openapi-code-tab-border-color-powershell);
   }
 }
 

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>
@@ -135,8 +147,14 @@ function TabContent({ lazy, children, selectedValue }) {
 
 function TabsComponent(props) {
   const tabs = useTabs(props);
+  const { className } = props;
+
   return (
-    <div className="tabs-container openapi-tabs__code-container">
+    <div
+      className={clsx("tabs-container openapi-tabs__code-container", {
+        [className]: className,
+      })}
+    >
       <TabList {...props} {...tabs} />
       <TabContent {...props} {...tabs} />
     </div>