docusaurus-theme-openapi-docs 1.6.1 → 2.0.0-beta.1

package/lib/theme/ApiDemoPanel/ParamOptions/index.js

@@ -12,7 +12,6 @@ var _FormSelect = _interopRequireDefault(require("@theme/ApiDemoPanel/FormSelect
 var _FormTextInput = _interopRequireDefault(require("@theme/ApiDemoPanel/FormTextInput"));
 var _hooks = require("@theme/ApiItem/hooks");
 var _slice = require("./slice");
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -66,13 +65,13 @@ function ParamOptions() {
 
       {/* Optional Parameters */}
       {optionalParams.length > 0 && <>
-          <button className={_stylesModule.default.showMoreButton} onClick={() => setShowOptional(prev => !prev)}>
+          <button className="openapi-demo__show-more-btn" onClick={() => setShowOptional(prev => !prev)}>
             <span style={{
           width: "1.5em",
           display: "inline-block",
           textAlign: "center"
         }}>
-              <span className={showOptional ? _stylesModule.default.plusExpanded : _stylesModule.default.plus}>
+              <span className={showOptional ? "openapi-demo__plus-btn--expanded" : "openapi-demo__plus-btn"}>
                 <div>
                   <svg style={{
                 fill: "currentColor",
@@ -87,7 +86,7 @@ function ParamOptions() {
             {showOptional ? "Hide optional parameters" : "Show optional parameters"}
           </button>
 
-          <div className={showOptional ? _stylesModule.default.showOptions : _stylesModule.default.hideOptions}>
+          <div className={showOptional ? "openapi-demo__show-options" : "openapi-demo__hide-options"}>
             {optionalParams.map(param => <ParamOptionWrapper key={`${param.in}-${param.name}`} param={param} />)}
           </div>
         </>}
@@ -151,14 +150,14 @@ function ParamArrayFormItem({
       display: "flex"
     }}>
           <ArrayItem param={param} onChange={handleChangeItem(item)} />
-          <button className={_stylesModule.default.buttonDelete} onClick={handleDeleteItem(item)}>
+          <button className="openapi-demo__delete-btn" onClick={handleDeleteItem(item)}>
             <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true">
               <path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path>
               <title>Delete</title>
             </svg>
           </button>
         </div>)}
-      <button className={_stylesModule.default.buttonThin} onClick={handleAddItem}>
+      <button className="openapi-demo__thin-btn" onClick={handleAddItem}>
         Add item
       </button>
     </>;

package/lib/theme/ApiDemoPanel/Request/_Request.scss

@@ -0,0 +1,48 @@
+.openapi-demo__options-panel {
+  background: var(--openapi-card-background-color);
+  border-radius: var(--openapi-card-border-radius);
+  color: var(--ifm-pre-color);
+  line-height: var(--ifm-pre-line-height);
+  margin-bottom: var(--ifm-spacing-vertical);
+  margin-top: 0;
+  overflow: auto;
+  padding-top: 0 !important;
+  padding: var(--ifm-pre-padding);
+
+  /* hack for view calculation when monaco is hidden */
+  position: relative;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.openapi-demo__details {
+  margin-bottom: 1rem;
+  background: var(--openapi-card-background-color);
+  border-radius: var(--openapi-card-border-radius);
+}
+
+.openapi-demo__summary-container {
+  padding: 1rem;
+  list-style-type: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.openapi-demo__summary-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.openapi-demo__summary-header {
+  margin-bottom: 0;
+}
+
+.openapi-demo__summary-header > button {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}

package/lib/theme/ApiDemoPanel/Request/index.js

@@ -14,7 +14,6 @@ var _Execute = _interopRequireDefault(require("@theme/ApiDemoPanel/Execute"));
 var _ParamOptions = _interopRequireDefault(require("@theme/ApiDemoPanel/ParamOptions"));
 var _Server = _interopRequireDefault(require("@theme/ApiDemoPanel/Server"));
 var _hooks = require("@theme/ApiItem/hooks");
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -45,15 +44,15 @@ function Request({
     const paramsArray = params[paramType];
     paramsArray.push(param);
   });
-  return <div>
-      <details className={`details__demo-panel`} open={response ? false : true}>
-        <summary>
-          <div className={`details__request-summary`}>
-            <h4>Request</h4>
+  return <>
+      <details className="openapi-demo__details" open={response ? false : true}>
+        <summary className="openapi-demo__summary-container">
+          <div className="openapi-demo__summary-content">
+            <h4 className="openapi-demo__summary-header">Request</h4>
             {item.servers && !hide_send_button && <_Execute.default postman={postman} proxy={proxy} />}
           </div>
         </summary>
-        <div className={_stylesModule.default.optionsPanel}>
+        <div className="openapi-demo__options-panel">
           <_Server.default />
           <_Authorization.default />
           <_ParamOptions.default />
@@ -61,7 +60,7 @@ function Request({
           <_Accept.default />
         </div>
       </details>
-    </div>;
+    </>;
 }
 var _default = Request;
 exports.default = _default;

package/lib/theme/ApiDemoPanel/Response/_Response.scss

@@ -0,0 +1,27 @@
+.openapi-response__dot::before {
+  margin-right: 0.2rem;
+  margin-bottom: 0.15rem;
+  content: "⬤";
+  color: var(--ifm-color-primary);
+  font-size: 8px;
+}
+
+.openapi-response__dot--danger::before {
+  color: var(--ifm-color-danger);
+}
+
+.openapi-response__dot--success::before {
+  color: var(--ifm-color-success);
+}
+
+.openapi-response__dot--info::before {
+  color: var(--ifm-color-info);
+}
+
+.openapi-response__status-code {
+  margin-left: -1rem;
+}
+
+.openapi-response__status-headers {
+  margin-left: -1rem;
+}

package/lib/theme/ApiDemoPanel/Response/index.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _themeCommon = require("@docusaurus/theme-common");
 var _hooks = require("@theme/ApiItem/hooks");
 var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
+var _SchemaTabs = _interopRequireDefault(require("@theme/SchemaTabs"));
+var _TabItem = _interopRequireDefault(require("@theme/TabItem"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _slice = require("./slice");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
@@ -35,8 +39,12 @@ function formatXml(xml) {
   return formatted.substring(1, formatted.length - 3);
 }
 function Response() {
+  const prismTheme = (0, _themeCommon.usePrismTheme)();
+  const code = (0, _hooks.useTypedSelector)(state => state.response.code);
+  const headers = (0, _hooks.useTypedSelector)(state => state.response.headers);
   const response = (0, _hooks.useTypedSelector)(state => state.response.value);
   const dispatch = (0, _hooks.useTypedDispatch)();
+  const responseStatusClass = code && "openapi-response__dot " + (parseInt(code) >= 400 ? "openapi-response__dot--danger" : parseInt(code) >= 200 && parseInt(code) < 300 ? "openapi-response__dot--success" : "openapi-response__dot--info");
   if (response === undefined) {
     return null;
   }
@@ -48,18 +56,45 @@ function Response() {
       prettyResponse = formatXml(response);
     }
   }
-  return <details className={`details__demo-panel`} open={true}>
-      <summary>
-        <div className={`details__response-summary`}>
-          <h4>Response</h4>
-          <button className="button button--sm button--secondary" onClick={() => dispatch((0, _slice.clearResponse)())}>
+  return <details className="openapi-demo__details" open={true}>
+      <summary className="openapi-demo__summary-container">
+        <div className="openapi-demo__summary-content">
+          <h4 className="openapi-demo__summary-header">Response</h4>
+          <button className="button button--sm button--secondary" onClick={() => {
+          dispatch((0, _slice.clearResponse)());
+          dispatch((0, _slice.clearCode)());
+          dispatch((0, _slice.clearHeaders)());
+        }}>
             Clear
           </button>
         </div>
       </summary>
-      <_CodeBlock.default language={response.startsWith("<") ? `xml` : `json`}>
-        {prettyResponse || "No Response"}
-      </_CodeBlock.default>
+
+      <div style={{
+      backgroundColor: prismTheme.plain.backgroundColor,
+      paddingLeft: "1rem",
+      paddingTop: "1rem",
+      ...((prettyResponse === "Fetching..." || !code) && {
+        paddingBottom: "1rem"
+      })
+    }}>
+        {code && prettyResponse !== "Fetching..." ? <_SchemaTabs.default lazy>
+            {/* @ts-ignore */}
+            <_TabItem.default label={` ${code}`} value="body" attributes={{
+          className: (0, _clsx.default)("openapi-response__dot", responseStatusClass)
+        }} default>
+              <_CodeBlock.default className="openapi-response__status-code" language={response.startsWith("<") ? `xml` : `json`}>
+                {prettyResponse || "No Response"}
+              </_CodeBlock.default>
+            </_TabItem.default>
+            {/* @ts-ignore */}
+            <_TabItem.default label="Headers" value="headers">
+              <_CodeBlock.default className="openapi-response__status-headers" language={response.startsWith("<") ? `xml` : `json`}>
+                {JSON.stringify(headers, undefined, 2)}
+              </_CodeBlock.default>
+            </_TabItem.default>
+          </_SchemaTabs.default> : prettyResponse || "No Response"}
+      </div>
     </details>;
 }
 var _default = Response;

package/lib/theme/ApiDemoPanel/Response/slice.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.slice = exports.setResponse = exports.default = exports.clearResponse = void 0;
+exports.slice = exports.setResponse = exports.setHeaders = exports.setCode = exports.default = exports.clearResponse = exports.clearHeaders = exports.clearCode = void 0;
 var _toolkit = require("@reduxjs/toolkit");
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -20,16 +20,36 @@ const slice = (0, _toolkit.createSlice)({
     setResponse: (state, action) => {
       state.value = action.payload;
     },
+    setCode: (state, action) => {
+      state.code = action.payload;
+    },
+    setHeaders: (state, action) => {
+      state.headers = action.payload;
+    },
     clearResponse: state => {
       state.value = undefined;
+    },
+    clearCode: state => {
+      state.code = undefined;
+    },
+    clearHeaders: state => {
+      state.headers = undefined;
     }
   }
 });
 exports.slice = slice;
 const {
   setResponse,
-  clearResponse
+  clearResponse,
+  setCode,
+  clearCode,
+  setHeaders,
+  clearHeaders
 } = slice.actions;
+exports.clearHeaders = clearHeaders;
+exports.setHeaders = setHeaders;
+exports.clearCode = clearCode;
+exports.setCode = setCode;
 exports.clearResponse = clearResponse;
 exports.setResponse = setResponse;
 var _default = slice.reducer;

package/lib/theme/ApiDemoPanel/SecuritySchemes/index.js

@@ -25,9 +25,9 @@ function SecuritySchemes(props) {
     return null;
   }
   const selectedAuth = options[selected];
-  return <details className={`details__demo-panel`} open={false}>
-      <summary className={`details__request-summary`}>
-        <h4>Authorization</h4>
+  return <details className="openapi-demo__details" open={false}>
+      <summary className="openapi-demo__summary-container">
+        <h4 className="openapi-demo__summary-header">Authorization</h4>
       </summary>
       {selectedAuth.map(auth => {
       const isHttp = auth.type === "http";

package/{src/theme/ApiDemoPanel/Request/styles.module.css → lib/theme/ApiDemoPanel/Server/_Server.scss}

@@ -1,8 +1,4 @@
-.optionsPanel:empty {
-  display: none;
-}
-
-.optionsPanel {
+.openapi-demo__server-container {
   background: var(--openapi-card-background-color);
   border-radius: var(--openapi-card-border-radius);
   color: var(--ifm-pre-color);
@@ -10,9 +6,11 @@
   margin-bottom: var(--ifm-spacing-vertical);
   margin-top: 0;
   overflow: auto;
-  padding-top: 0 !important;
-  padding: var(--ifm-pre-padding);
 
   /* hack for view calculation when monaco is hidden */
   position: relative;
+
+  &:empty {
+    display: none;
+  }
 }

package/lib/theme/ApiDemoPanel/Server/index.js

@@ -11,7 +11,6 @@ var _FormSelect = _interopRequireDefault(require("@theme/ApiDemoPanel/FormSelect
 var _FormTextInput = _interopRequireDefault(require("@theme/ApiDemoPanel/FormTextInput"));
 var _hooks = require("@theme/ApiItem/hooks");
 var _slice = require("./slice");
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -68,7 +67,7 @@ function Server() {
         </_FormItem.default>
       </_FloatingButton.default>;
   }
-  return <div className={_stylesModule.default.optionsPanel}>
+  return <div className="openapi-demo__server-container">
       <_FloatingButton.default onClick={() => setIsEditing(false)} label="Hide">
         <_FormItem.default label="Base URL">
           <_FormSelect.default options={options.map(s => s.url)} onChange={e => {

package/lib/theme/ApiDemoPanel/index.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _postmanCollection = _interopRequireDefault(require("@paloaltonetworks/postman-collection"));
 var _Curl = _interopRequireDefault(require("@theme/ApiDemoPanel/Curl"));
-var _MethodEndpoint = _interopRequireDefault(require("@theme/ApiDemoPanel/MethodEndpoint"));
 var _Request = _interopRequireDefault(require("@theme/ApiDemoPanel/Request"));
 var _Response = _interopRequireDefault(require("@theme/ApiDemoPanel/Response"));
 var _SecuritySchemes = _interopRequireDefault(require("@theme/ApiDemoPanel/SecuritySchemes"));
@@ -25,12 +24,7 @@ function ApiDemoPanel({
 }) {
   var _xCodeSamples;
   const postman = new _postmanCollection.default.Request(item.postman);
-  const {
-    path,
-    method
-  } = item;
   return <div>
-      <_MethodEndpoint.default method={method} path={path} />
       <_SecuritySchemes.default infoPath={infoPath} />
       <_Request.default item={item} />
       <_Response.default />

package/{src/theme/ApiTabs/styles.module.css → lib/theme/ApiTabs/_ApiTabs.scss}

@@ -1,11 +1,15 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
+/* ============================================================================
+ * 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.
- */
+ * ========================================================================== */
+.openapi-tabs__container {
+  margin-left: -1px;
+  margin-bottom: var(--ifm-leading);
+}
 
-.tabItem {
+.openapi-tabs__response-code-item {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,29 +20,52 @@
   border-radius: var(--ifm-global-radius);
   color: var(--ifm-color-primary);
   font-weight: var(--ifm-font-weight-normal);
+
+  &.success {
+    .openapi-tabs__response-dot {
+      background-color: var(--ifm-color-success);
+    }
+  }
+
+  &.danger {
+    .openapi-tabs__response-dot {
+      background-color: var(--ifm-color-danger);
+    }
+  }
+
+  &.info {
+    .openapi-tabs__response-dot {
+      background-color: var(--ifm-color-info);
+    }
+  }
+
+  &.active {
+    opacity: 1;
+    background-color: var(--ifm-color-emphasis-100);
+  }
 }
 
-.tabItem:not(.active) {
+.openapi-tabs__response-code-item:not(.active) {
   opacity: 0.65;
 }
 
-.tabItem:hover {
+.openapi-tabs__response-code-item:hover {
   opacity: 1;
 }
 
-.tabItem:last-child {
+.openapi-tabs__response-code-item:last-child {
   margin-right: 0 !important;
 }
 
 /* Open API Response Code Tabs */
-.responseTabsTopSection {
+.openapi-tabs__response-header-section {
   margin-top: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.responseTabsContainer {
+.openapi-tabs__response-container {
   display: flex;
   align-items: center;
   max-width: 390px;
@@ -46,47 +73,31 @@
   overflow: hidden;
 }
 
-.responseTabsListContainer {
+.openapi-tabs__response-list-container {
   padding: 0 0.25rem;
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
 }
 
-.responseTabsListContainer::-webkit-scrollbar {
+.openapi-tabs__response-list-container::-webkit-scrollbar {
   display: none;
 }
 
 /* Response Code Tabs - Colored Dots */
-.responseTabDot {
+.openapi-tabs__response-dot {
   width: 12.5px;
   height: 12.5px;
   margin-right: 5px;
   border-radius: 50%;
 }
 
-.responseStatusSuccess > .responseTabDot {
-  background-color: var(--ifm-color-success);
-}
-
-.responseStatusDanger > .responseTabDot {
-  background-color: var(--ifm-color-danger);
-}
-
-.responseStatusInfo > .responseTabDot {
-  background-color: var(--ifm-color-info);
-}
-
-.active {
-  background-color: var(--ifm-color-emphasis-100);
-}
-
-.responseSchemaContainer {
+.openapi-tabs__response-schema-container {
   max-width: 600px;
 }
 
 /* Tab Arrows */
-.tabArrow {
+.openapi-tabs__arrow {
   content: "";
   height: 1.25rem;
   width: 1.25rem;
@@ -94,25 +105,27 @@
   min-width: 1.25rem;
   background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
   filter: var(--ifm-menu-link-sublist-icon-filter);
-}
 
-.tabArrow:hover {
-  cursor: pointer;
-}
-.tabArrowLeft {
-  transform: rotate(270deg);
-}
-.tabArrowRight {
-  transform: rotate(90deg);
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.left {
+    transform: rotate(270deg);
+  }
+
+  &.right {
+    transform: rotate(90deg);
+  }
 }
 
 @media screen and (max-width: 500px) {
-  .responseTabsTopSection {
+  .openapi-tabs__response-header-section {
     flex-direction: column;
     align-items: flex-start;
   }
 
-  .responseTabsContainer {
+  .openapi-tabs__response-container {
     width: 100%;
     margin-top: var(--ifm-spacing-vertical);
     padding: 0;