docusaurus-theme-openapi-docs 1.0.0

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

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FloatingButton = _interopRequireDefault(require("../FloatingButton"));
+
+var _hooks = require("../hooks");
+
+var _FormItem = _interopRequireDefault(require("./../FormItem"));
+
+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 Server() {
+  const [isEditing, setIsEditing] = (0, _react.useState)(false);
+  const value = (0, _hooks.useTypedSelector)(state => state.server.value);
+  const options = (0, _hooks.useTypedSelector)(state => state.server.options);
+  const dispatch = (0, _hooks.useTypedDispatch)();
+
+  if (options.length <= 0) {
+    return null;
+  }
+
+  if (options.length <= 1 && (value === null || value === void 0 ? void 0 : value.variables) === undefined) {
+    return null;
+  }
+
+  if (!isEditing) {
+    let url = "";
+
+    if (value) {
+      url = value.url.replace(/\/$/, "");
+
+      if (value.variables) {
+        Object.keys(value.variables).forEach(variable => {
+          var _value$variables$vari, _value$variables;
+
+          url = url.replace(`{${variable}}`, (_value$variables$vari = (_value$variables = value.variables) === null || _value$variables === void 0 ? void 0 : _value$variables[variable].default) !== null && _value$variables$vari !== void 0 ? _value$variables$vari : "");
+        });
+      }
+    }
+
+    return <_FloatingButton.default onClick={() => setIsEditing(true)} label="Edit">
+        <pre style={{
+        background: "var(--openapi-card-background-color)",
+        paddingRight: "60px"
+      }}>
+          <code>{url}</code>
+        </pre>
+      </_FloatingButton.default>;
+  }
+
+  return <div className={_stylesModule.default.optionsPanel}>
+      <button className={_stylesModule.default.showMoreButton} onClick={() => setIsEditing(false)}>
+        Hide
+      </button>
+      <_FormItem.default label="Endpoint">
+        <_FormSelect.default options={options.map(s => s.url)} onChange={e => dispatch((0, _slice.setServer)(e.target.value))} />
+      </_FormItem.default>
+      {(value === null || value === void 0 ? void 0 : value.variables) && Object.keys(value.variables).map(key => {
+      var _value$variables2, _value$variables3;
+
+      if (((_value$variables2 = value.variables) === null || _value$variables2 === void 0 ? void 0 : _value$variables2[key].enum) !== undefined) {
+        return <_FormItem.default label={key}>
+                <_FormSelect.default options={value.variables[key].enum} onChange={e => {
+            dispatch((0, _slice.setServerVariable)({
+              key,
+              value: e.target.value
+            }));
+          }} />
+              </_FormItem.default>;
+      }
+
+      return <_FormItem.default label={key}>
+              <_FormTextInput.default placeholder={(_value$variables3 = value.variables) === null || _value$variables3 === void 0 ? void 0 : _value$variables3[key].default} onChange={e => {
+          dispatch((0, _slice.setServerVariable)({
+            key,
+            value: e.target.value
+          }));
+        }} />
+            </_FormItem.default>;
+    })}
+    </div>;
+}
+
+var _default = Server;
+exports.default = _default;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.slice = exports.setServerVariable = exports.setServer = 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: "server",
+  initialState,
+  reducers: {
+    setServer: (state, action) => {
+      state.value = state.options.find(s => s.url === action.payload);
+    },
+    setServerVariable: (state, action) => {
+      var _state$value;
+
+      if ((_state$value = state.value) !== null && _state$value !== void 0 && _state$value.variables) {
+        state.value.variables[action.payload.key].default = action.payload.value;
+      }
+    }
+  }
+});
+exports.slice = slice;
+const {
+  setServer,
+  setServerVariable
+} = slice.actions;
+exports.setServerVariable = setServerVariable;
+exports.setServer = setServer;
+var _default = slice.reducer;
+exports.default = _default;

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

@@ -0,0 +1,61 @@
+.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;
+}
+
+.optionsPanel:empty {
+  display: none;
+}
+
+.optionsPanel {
+  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: var(--ifm-pre-padding);
+
+  /* hack for view calculation when monaco is hidden */
+  position: relative;
+}

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

@@ -0,0 +1,252 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _react2 = _interopRequireDefault(require("@monaco-editor/react"));
+
+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 VSCode({
+  value,
+  language,
+  onChange
+}) {
+  var _ref;
+
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const isDarkTheme = (_ref = (0, _themeCommon.useColorMode)().colorMode === "dark") !== null && _ref !== void 0 ? _ref : false;
+
+  function handleEditorWillMount(monaco) {
+    const styles = getComputedStyle(document.documentElement);
+
+    function getColor(property) {
+      // Weird chrome bug, returns " #ffffff " instead of "#ffffff", see: https://github.com/cloud-annotations/docusaurus-openapi/issues/144
+      const color = styles.getPropertyValue(property).trim();
+      const isColorRgb = color.includes("rgb");
+      const isColorHexShortened = color.length === 4; // Convert "rgb(r, g, b)" to color hex code
+
+      const getColorHex = color => {
+        const rgbValues = color.substring(4).split(")")[0].split(",");
+        const [r, g, b] = rgbValues;
+
+        const colorToHex = rgb => {
+          const hexadecimal = parseInt(rgb).toString(16);
+          return hexadecimal.length === 1 ? "0" + hexadecimal : hexadecimal;
+        };
+
+        return "#" + colorToHex(r) + colorToHex(g) + colorToHex(b);
+      }; // Extend shortened hex codes ie. "#aaa" => "#aaaaaa" or "#xyz" => "#xxyyzz"
+
+
+      const getFullColorHex = color => {
+        let fullColorHex = "#";
+        const hexValues = color.slice(1);
+
+        for (let i = 0; i < hexValues.length; i++) {
+          for (let j = 0; j < 2; j++) {
+            fullColorHex += hexValues[i];
+          }
+        }
+
+        return fullColorHex.toLowerCase();
+      };
+
+      if (isColorRgb) {
+        return getColorHex(color);
+      } else if (isColorHexShortened) {
+        return getFullColorHex(color);
+      } else {
+        return color;
+      }
+    }
+
+    const LIGHT_BACKGROUND = getColor("--openapi-monaco-background-color-light");
+    const LIGHT_BRIGHT = getColor("--openapi-code-bright-light");
+    const LIGHT_DIM = getColor("--openapi-code-dim-light");
+    const LIGHT_BLUE = getColor("--openapi-code-blue-light");
+    const LIGHT_GREEN = getColor("--openapi-code-green-light");
+    const LIGHT_SELECT = getColor("--openapi-code-select-light");
+    const DARK_BACKGROUND = getColor("--openapi-monaco-background-color-dark");
+    const DARK_BRIGHT = getColor("--openapi-code-bright-dark");
+    const DARK_DIM = getColor("--openapi-code-dim-dark");
+    const DARK_BLUE = getColor("--openapi-code-blue-dark");
+    const DARK_GREEN = getColor("--openapi-code-green-dark");
+    const DARK_SELECT = getColor("--openapi-code-select-dark");
+    monaco.editor.defineTheme("OpenApiDark", {
+      base: "vs-dark",
+      inherit: true,
+      rules: [{
+        token: "",
+        foreground: DARK_BRIGHT
+      }, {
+        token: "string.key.json",
+        foreground: DARK_BRIGHT
+      }, {
+        token: "string.value.json",
+        foreground: DARK_GREEN
+      }, {
+        token: "number",
+        foreground: DARK_BLUE
+      }, {
+        token: "keyword.json",
+        foreground: DARK_BLUE
+      }, {
+        token: "delimiter",
+        foreground: DARK_DIM
+      }, {
+        token: "tag.xml",
+        foreground: DARK_DIM
+      }, {
+        token: "metatag.xml",
+        foreground: DARK_DIM
+      }, {
+        token: "attribute.name.xml",
+        foreground: DARK_BRIGHT
+      }, {
+        token: "attribute.value.xml",
+        foreground: DARK_GREEN
+      }, {
+        token: "metatag.xml",
+        foreground: DARK_BLUE
+      }, {
+        token: "tag.xml",
+        foreground: DARK_BLUE
+      }],
+      colors: {
+        "editor.background": DARK_BACKGROUND,
+        "editor.lineHighlightBackground": DARK_BACKGROUND,
+        "editorBracketMatch.background": DARK_BACKGROUND,
+        "editorBracketMatch.border": DARK_BACKGROUND,
+        "editor.selectionBackground": DARK_SELECT
+      }
+    });
+    monaco.editor.defineTheme("OpenApiLight", {
+      base: "vs",
+      inherit: true,
+      rules: [{
+        token: "",
+        foreground: LIGHT_BRIGHT
+      }, {
+        token: "string.key.json",
+        foreground: LIGHT_BRIGHT
+      }, {
+        token: "string.value.json",
+        foreground: LIGHT_GREEN
+      }, {
+        token: "number",
+        foreground: LIGHT_BLUE
+      }, {
+        token: "keyword.json",
+        foreground: LIGHT_BLUE
+      }, {
+        token: "delimiter",
+        foreground: LIGHT_DIM
+      }, {
+        token: "tag.xml",
+        foreground: LIGHT_DIM
+      }, {
+        token: "metatag.xml",
+        foreground: LIGHT_DIM
+      }, {
+        token: "attribute.name.xml",
+        foreground: LIGHT_BRIGHT
+      }, {
+        token: "attribute.value.xml",
+        foreground: LIGHT_GREEN
+      }, {
+        token: "metatag.xml",
+        foreground: LIGHT_BLUE
+      }, {
+        token: "tag.xml",
+        foreground: LIGHT_BLUE
+      }],
+      colors: {
+        "editor.background": LIGHT_BACKGROUND,
+        "editor.lineHighlightBackground": LIGHT_BACKGROUND,
+        "editorBracketMatch.background": LIGHT_BACKGROUND,
+        "editorBracketMatch.border": LIGHT_BACKGROUND,
+        "editor.selectionBackground": LIGHT_SELECT
+      }
+    });
+  }
+
+  return <div className={focused ? _stylesModule.default.monacoFocus : _stylesModule.default.monaco}>
+      <_react2.default value={value} language={language} theme={isDarkTheme ? "OpenApiDark" : "OpenApiLight"} beforeMount={handleEditorWillMount} options={{
+      lineNumbers: "off",
+      scrollBeyondLastLine: false,
+      scrollBeyondLastColumn: 3,
+      readOnly: false,
+      minimap: {
+        enabled: false
+      },
+      fontFamily: "SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
+      fontSize: 14.4,
+      overviewRulerLanes: 0,
+      folding: false,
+      lineDecorationsWidth: 0,
+      contextmenu: false,
+      scrollbar: {
+        horizontal: "hidden"
+      }
+    }} onMount={editor => {
+      editor.onDidFocusEditorText(() => {
+        setFocused(true);
+      });
+      editor.onDidBlurEditorText(() => {
+        setFocused(false);
+      });
+      editor.onDidChangeModelDecorations(() => {
+        updateEditorHeight(); // typing
+
+        requestAnimationFrame(updateEditorHeight); // folding
+      });
+      let prevHeight = 0;
+
+      const updateEditorHeight = () => {
+        var _editor$getModel;
+
+        onChange(editor.getValue());
+        const editorElement = editor.getDomNode();
+
+        if (!editorElement) {
+          return;
+        }
+
+        const lineHeight = 22;
+        const lineCount = ((_editor$getModel = editor.getModel()) === null || _editor$getModel === void 0 ? void 0 : _editor$getModel.getLineCount()) || 1;
+        const height = editor.getTopForLineNumber(lineCount + 1) + lineHeight;
+        const clippedHeight = Math.min(height, 500);
+
+        if (prevHeight !== clippedHeight) {
+          prevHeight = clippedHeight;
+          editorElement.style.height = `${clippedHeight}px`;
+          editor.layout();
+        }
+      };
+
+      updateEditorHeight();
+    }} />
+    </div>;
+}
+
+var _default = VSCode;
+exports.default = _default;

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

@@ -0,0 +1,19 @@
+.monacoBase {
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  border-radius: 4px;
+  padding: var(--ifm-pre-padding);
+  background-color: var(--openapi-monaco-background-color);
+}
+
+.monaco {
+  composes: monacoBase;
+
+  box-shadow: 0 0 0 1px var(--openapi-monaco-border-color);
+  border: 2px solid transparent;
+}
+
+.monacoFocus {
+  composes: monacoBase;
+
+  border: 2px solid var(--openapi-input-border);
+}