docusaurus-theme-openapi-docs 1.0.0

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

@@ -0,0 +1,248 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _toolkit = require("@reduxjs/toolkit");
+
+var _hooks = require("../hooks");
+
+var _FormItem = _interopRequireDefault(require("./../FormItem"));
+
+var _FormMultiSelect = _interopRequireDefault(require("./../FormMultiSelect"));
+
+var _FormSelect = _interopRequireDefault(require("./../FormSelect"));
+
+var _FormTextInput = _interopRequireDefault(require("./../FormTextInput"));
+
+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; }
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+function ParamOption({
+  param
+}) {
+  var _param$schema, _param$schema$items, _param$schema2, _param$schema3, _param$schema4;
+
+  if (((_param$schema = param.schema) === null || _param$schema === void 0 ? void 0 : _param$schema.type) === "array" && (_param$schema$items = param.schema.items) !== null && _param$schema$items !== void 0 && _param$schema$items.enum) {
+    return <ParamMultiSelectFormItem param={param} />;
+  }
+
+  if (((_param$schema2 = param.schema) === null || _param$schema2 === void 0 ? void 0 : _param$schema2.type) === "array") {
+    return <ParamArrayFormItem param={param} />;
+  }
+
+  if ((_param$schema3 = param.schema) !== null && _param$schema3 !== void 0 && _param$schema3.enum) {
+    return <ParamSelectFormItem param={param} />;
+  }
+
+  if (((_param$schema4 = param.schema) === null || _param$schema4 === void 0 ? void 0 : _param$schema4.type) === "boolean") {
+    return <ParamBooleanFormItem param={param} />;
+  } // integer, number, string, int32, int64, float, double, object, byte, binary,
+  // date-time, date, password
+
+
+  return <ParamTextFormItem param={param} />;
+}
+
+function ParamOptionWrapper({
+  param
+}) {
+  return <_FormItem.default label={param.name} type={param.in}>
+      <ParamOption param={param} />
+    </_FormItem.default>;
+}
+
+function ParamOptions() {
+  const [showOptional, setShowOptional] = (0, _react.useState)(false);
+  const pathParams = (0, _hooks.useTypedSelector)(state => state.params.path);
+  const queryParams = (0, _hooks.useTypedSelector)(state => state.params.query);
+  const cookieParams = (0, _hooks.useTypedSelector)(state => state.params.cookie);
+  const headerParams = (0, _hooks.useTypedSelector)(state => state.params.header);
+  const allParams = [...pathParams, ...queryParams, ...cookieParams, ...headerParams];
+  const requiredParams = allParams.filter(p => p.required);
+  const optionalParams = allParams.filter(p => !p.required);
+  return <>
+      {
+      /* Required Parameters */
+    }
+      {requiredParams.map(param => <ParamOptionWrapper key={`${param.in}-${param.name}`} param={param} />)}
+
+      {
+      /* Optional Parameters */
+    }
+      {optionalParams.length > 0 && <>
+          <button className={_stylesModule.default.showMoreButton} onClick={() => setShowOptional(prev => !prev)}>
+            <span style={{
+          width: "1.5em",
+          display: "inline-block",
+          textAlign: "center"
+        }}>
+              <span className={showOptional ? _stylesModule.default.plusExpanded : _stylesModule.default.plus}>
+                <div>
+                  <svg style={{
+                fill: "currentColor",
+                width: "10px",
+                height: "10px"
+              }} height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9 7h6a1 1 0 0 1 0 2H9v6a1 1 0 0 1-2 0V9H1a1 1 0 1 1 0-2h6V1a1 1 0 1 1 2 0z" fillRule="evenodd"></path>
+                  </svg>
+                </div>
+              </span>
+            </span>
+            {showOptional ? "Hide optional parameters" : "Show optional parameters"}
+          </button>
+
+          <div className={showOptional ? _stylesModule.default.showOptions : _stylesModule.default.hideOptions}>
+            {optionalParams.map(param => <ParamOptionWrapper key={`${param.in}-${param.name}`} param={param} />)}
+          </div>
+        </>}
+    </>;
+}
+
+function ArrayItem({
+  param,
+  onChange
+}) {
+  var _param$schema5, _param$schema5$items;
+
+  if (((_param$schema5 = param.schema) === null || _param$schema5 === void 0 ? void 0 : (_param$schema5$items = _param$schema5.items) === null || _param$schema5$items === void 0 ? void 0 : _param$schema5$items.type) === "boolean") {
+    return <_FormSelect.default options={["---", "true", "false"]} onChange={e => {
+      const val = e.target.value;
+      onChange(val === "---" ? undefined : val);
+    }} />;
+  }
+
+  return <_FormTextInput.default placeholder={param.description || param.name} onChange={e => {
+    onChange(e.target.value);
+  }} />;
+}
+
+function ParamArrayFormItem({
+  param
+}) {
+  const [items, setItems] = (0, _react.useState)([]);
+  const dispatch = (0, _hooks.useTypedDispatch)();
+
+  function handleAddItem() {
+    setItems(i => [...i, {
+      id: (0, _toolkit.nanoid)()
+    }]);
+  }
+
+  (0, _react.useEffect)(() => {
+    const values = items.map(item => item.value).filter(item => !!item);
+    dispatch((0, _slice.setParam)({ ...param,
+      value: values.length > 0 ? values : undefined
+    })); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items]);
+
+  function handleDeleteItem(itemToDelete) {
+    return () => {
+      const newItems = items.filter(i => i.id !== itemToDelete.id);
+      setItems(newItems);
+    };
+  }
+
+  function handleChangeItem(itemToUpdate) {
+    return value => {
+      const newItems = items.map(i => {
+        if (i.id === itemToUpdate.id) {
+          return { ...i,
+            value: value
+          };
+        }
+
+        return i;
+      });
+      setItems(newItems);
+    };
+  }
+
+  return <>
+      {items.map(item => <div key={item.id} style={{
+      display: "flex"
+    }}>
+          <ArrayItem param={param} onChange={handleChangeItem(item)} />
+          <button className={_stylesModule.default.buttonDelete} 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}>
+        Add item
+      </button>
+    </>;
+}
+
+function ParamSelectFormItem({
+  param
+}) {
+  var _param$schema$enum, _param$schema6;
+
+  const dispatch = (0, _hooks.useTypedDispatch)();
+  const options = (_param$schema$enum = (_param$schema6 = param.schema) === null || _param$schema6 === void 0 ? void 0 : _param$schema6.enum) !== null && _param$schema$enum !== void 0 ? _param$schema$enum : [];
+  return <_FormSelect.default options={["---", ...options]} onChange={e => {
+    const val = e.target.value;
+    dispatch((0, _slice.setParam)({ ...param,
+      value: val === "---" ? undefined : val
+    }));
+  }} />;
+}
+
+function ParamBooleanFormItem({
+  param
+}) {
+  const dispatch = (0, _hooks.useTypedDispatch)();
+  return <_FormSelect.default options={["---", "true", "false"]} onChange={e => {
+    const val = e.target.value;
+    dispatch((0, _slice.setParam)({ ...param,
+      value: val === "---" ? undefined : val
+    }));
+  }} />;
+}
+
+function ParamMultiSelectFormItem({
+  param
+}) {
+  var _param$schema$items$e, _param$schema7, _param$schema7$items;
+
+  const dispatch = (0, _hooks.useTypedDispatch)();
+  const options = (_param$schema$items$e = (_param$schema7 = param.schema) === null || _param$schema7 === void 0 ? void 0 : (_param$schema7$items = _param$schema7.items) === null || _param$schema7$items === void 0 ? void 0 : _param$schema7$items.enum) !== null && _param$schema$items$e !== void 0 ? _param$schema$items$e : [];
+  return <_FormMultiSelect.default options={options} onChange={e => {
+    const values = Array.prototype.filter.call(e.target.options, o => o.selected).map(o => o.value);
+    dispatch((0, _slice.setParam)({ ...param,
+      value: values.length > 0 ? values : undefined
+    }));
+  }} />;
+}
+
+function ParamTextFormItem({
+  param
+}) {
+  const dispatch = (0, _hooks.useTypedDispatch)();
+  return <_FormTextInput.default placeholder={param.description || param.name} onChange={e => dispatch((0, _slice.setParam)({ ...param,
+    value: e.target.value
+  }))} />;
+}
+
+var _default = ParamOptions;
+exports.default = _default;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.slice = exports.setParam = exports.default = void 0;
+
+var _toolkit = require("@reduxjs/toolkit");
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+const initialState = {};
+const slice = (0, _toolkit.createSlice)({
+  name: "params",
+  initialState,
+  reducers: {
+    setParam: (state, action) => {
+      const newParam = action.payload;
+      const paramGroup = state[action.payload.in];
+      const index = paramGroup.findIndex(p => p.name === newParam.name);
+      paramGroup[index] = newParam;
+    }
+  }
+});
+exports.slice = slice;
+const {
+  setParam
+} = slice.actions;
+exports.setParam = setParam;
+var _default = slice.reducer;
+exports.default = _default;

package/lib/theme/ApiDemoPanel/ParamOptions/styles.module.css

@@ -0,0 +1,180 @@
+.plus {
+  transition: transform 0.2s ease;
+  display: inline-block;
+  transform: rotate(0deg);
+  transform-origin: center;
+  margin-right: 6px;
+}
+
+.plusExpanded {
+  composes: plus;
+  transform: rotate(45deg);
+}
+
+.showMoreButton {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  cursor: pointer;
+  font-size: var(--ifm-code-font-size);
+  /* font-weight: var(--ifm-button-font-weight); */
+  /* line-height: 1.5; */
+
+  padding: 0;
+
+  user-select: none;
+  white-space: nowrap;
+
+  border: 0px solid transparent;
+
+  display: block;
+  width: 100%;
+
+  background-color: transparent;
+
+  color: var(--ifm-color-primary);
+  cursor: pointer;
+  margin-top: var(--ifm-pre-padding);
+  margin-bottom: 0;
+  text-align: left;
+  display: block;
+}
+
+.showMoreButton:focus {
+  outline: 0;
+}
+
+.showMoreButton:hover {
+  /* text-decoration: underline; */
+  /* background-color: red; */
+  color: var(--ifm-color-primary-hover);
+}
+
+.showMoreButton:first-child {
+  margin-top: 0;
+}
+
+/* .showMoreButton:last-child {
+  margin-bottom: 0;
+} */
+
+.buttonDelete {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  cursor: pointer;
+  font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
+  font-weight: normal;
+  line-height: 1.5;
+
+  transition-property: color, background, border-color, box-shadow;
+  transition-duration: 100ms, 100ms, 100ms,
+    var(--ifm-button-transition-duration);
+  transition-timing-function: cubic-bezier(0.08, 0.52, 0.52, 1);
+
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  padding: 0 12px;
+
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  background-color: var(--openapi-input-background);
+  border: none;
+  outline: none;
+  color: var(--ifm-pre-color);
+  border-radius: 4px;
+  margin-left: 4px;
+}
+
+.buttonDelete:focus {
+  outline: 0;
+}
+
+.buttonDelete:active {
+  box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+}
+
+.buttonThin {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  cursor: pointer;
+  font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
+  font-weight: normal;
+  line-height: 1.5;
+
+  transition-property: color, background, border-color, box-shadow;
+  transition-duration: 100ms, 100ms, 100ms,
+    var(--ifm-button-transition-duration);
+  transition-timing-function: cubic-bezier(0.08, 0.52, 0.52, 1);
+
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+
+  background-color: transparent;
+  color: var(--openapi-input-border);
+  border: 1px solid var(--openapi-input-border);
+  border-radius: var(--ifm-pre-border-radius);
+  /* height: 48px; */
+  padding: 3px 60px 3px 12px;
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  margin-bottom: var(--ifm-pre-padding);
+
+  display: block;
+}
+
+.buttonThin:hover {
+  color: var(--openapi-inverse-color);
+  background-color: var(--openapi-input-border);
+}
+
+.buttonThin:focus {
+  outline: 0;
+}
+
+.buttonThin:active {
+  box-shadow: inset 0 0 0 1px var(--openapi-input-border),
+    inset 0 0 0 2px var(--openapi-inverse-color);
+}
+
+.inputBase {
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  /* height: 40px; */
+  background-color: var(--openapi-input-background);
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: var(--ifm-code-font-size);
+  color: var(--ifm-pre-color);
+  padding: 12px var(--ifm-pre-padding);
+
+  border-radius: 4px;
+}
+
+.input {
+  composes: inputBase;
+}
+
+.input:focus {
+  box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+}
+
+.showOptions {
+  visibility: visible;
+  margin-top: var(--ifm-pre-padding);
+}
+
+.hideOptions {
+  display: none;
+  visibility: hidden;
+}

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

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _hooks = require("../hooks");
+
+var _FloatingButton = _interopRequireDefault(require("./../FloatingButton"));
+
+var _slice = require("./slice");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+// TODO: We probably shouldn't attempt to format XML...
+function formatXml(xml) {
+  const tab = "  ";
+  let formatted = "";
+  let indent = "";
+  xml.split(/>\s*</).forEach(node => {
+    if (node.match(/^\/\w/)) {
+      // decrease indent by one 'tab'
+      indent = indent.substring(tab.length);
+    }
+
+    formatted += indent + "<" + node + ">\r\n";
+
+    if (node.match(/^<?\w[^>]*[^/]$/)) {
+      // increase indent
+      indent += tab;
+    }
+  });
+  return formatted.substring(1, formatted.length - 3);
+}
+
+function Response() {
+  const response = (0, _hooks.useTypedSelector)(state => state.response.value);
+  const dispatch = (0, _hooks.useTypedDispatch)();
+
+  if (response === undefined) {
+    return null;
+  }
+
+  let prettyResponse = response;
+
+  try {
+    prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
+  } catch {
+    if (response.startsWith("<?xml ")) {
+      prettyResponse = formatXml(response);
+    }
+  }
+
+  return <_FloatingButton.default onClick={() => dispatch((0, _slice.clearResponse)())} label="Clear">
+      <pre style={{
+      background: "var(--openapi-card-background-color)",
+      borderRadius: "var(--openapi-card-border-radius)",
+      paddingRight: "60px"
+    }}>
+        <code>{prettyResponse || "No Response"}</code>
+      </pre>
+    </_FloatingButton.default>;
+}
+
+var _default = Response;
+exports.default = _default;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.slice = exports.setResponse = exports.default = exports.clearResponse = void 0;
+
+var _toolkit = require("@reduxjs/toolkit");
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+const initialState = {};
+const slice = (0, _toolkit.createSlice)({
+  name: "response",
+  initialState,
+  reducers: {
+    setResponse: (state, action) => {
+      state.value = action.payload;
+    },
+    clearResponse: state => {
+      state.value = undefined;
+    }
+  }
+});
+exports.slice = slice;
+const {
+  setResponse,
+  clearResponse
+} = slice.actions;
+exports.clearResponse = clearResponse;
+exports.setResponse = setResponse;
+var _default = slice.reducer;
+exports.default = _default;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _hooks = require("../hooks");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+function SecuritySchemes() {
+  const options = (0, _hooks.useTypedSelector)(state => state.auth.options);
+  const selected = (0, _hooks.useTypedSelector)(state => state.auth.selected);
+  if (selected === undefined) return null;
+  const selectedAuth = options[selected];
+  return <div style={{
+    marginBottom: "var(--ifm-table-cell-padding)"
+  }}>
+      {selectedAuth.map(auth => {
+      if (auth.type === "apiKey") {
+        return <_react.default.Fragment key={selected + "-apiKey"}>
+              <b>Authorization: {auth.name}</b>
+              <pre style={{
+            display: "flex",
+            flexDirection: "column",
+            background: "var(--openapi-card-background-color)",
+            borderRadius: "var(--openapi-card-border-radius)"
+          }}>
+                <span>name: {auth.name}</span>
+                <span>in: {auth.in}</span>
+                <span>type: {auth.type}</span>
+              </pre>
+            </_react.default.Fragment>;
+      }
+
+      return null;
+    })}
+    </div>;
+}
+
+var _default = SecuritySchemes;
+exports.default = _default;