docusaurus-theme-openapi-docs 1.0.0

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

@@ -0,0 +1,114 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+import React, { useState } from "react";
+import FloatingButton from "../FloatingButton";
+import { useTypedDispatch, useTypedSelector } from "../hooks";
+import FormItem from "./../FormItem";
+import FormSelect from "./../FormSelect";
+import FormTextInput from "./../FormTextInput";
+import { setServer, setServerVariable } from "./slice";
+import styles from "./styles.module.css";
+
+function Server() {
+  const [isEditing, setIsEditing] = useState(false);
+  const value = useTypedSelector((state) => state.server.value);
+  const options = useTypedSelector((state) => state.server.options);
+  const dispatch = useTypedDispatch();
+
+  if (options.length <= 0) {
+    return null;
+  }
+
+  if (options.length <= 1 && value?.variables === undefined) {
+    return null;
+  }
+
+  if (!isEditing) {
+    let url = "";
+
+    if (value) {
+      url = value.url.replace(/\/$/, "");
+
+      if (value.variables) {
+        Object.keys(value.variables).forEach((variable) => {
+          url = url.replace(
+            `{${variable}}`,
+            value.variables?.[variable].default ?? ""
+          );
+        });
+      }
+    }
+
+    return (
+      <FloatingButton onClick={() => setIsEditing(true)} label="Edit">
+        <pre
+          style={{
+            background: "var(--openapi-card-background-color)",
+            paddingRight: "60px",
+          }}
+        >
+          <code>{url}</code>
+        </pre>
+      </FloatingButton>
+    );
+  }
+
+  return (
+    <div className={styles.optionsPanel}>
+      <button
+        className={styles.showMoreButton}
+        onClick={() => setIsEditing(false)}
+      >
+        Hide
+      </button>
+      <FormItem label="Endpoint">
+        <FormSelect
+          options={options.map((s) => s.url)}
+          onChange={(e) => dispatch(setServer(e.target.value))}
+        />
+      </FormItem>
+      {value?.variables &&
+        Object.keys(value.variables).map((key) => {
+          if (value.variables?.[key].enum !== undefined) {
+            return (
+              <FormItem label={key}>
+                <FormSelect
+                  options={value.variables[key].enum}
+                  onChange={(e) => {
+                    dispatch(
+                      setServerVariable({
+                        key,
+                        value: e.target.value,
+                      })
+                    );
+                  }}
+                />
+              </FormItem>
+            );
+          }
+
+          return (
+            <FormItem label={key}>
+              <FormTextInput
+                placeholder={value.variables?.[key].default}
+                onChange={(e) => {
+                  dispatch(
+                    setServerVariable({
+                      key,
+                      value: e.target.value,
+                    })
+                  );
+                }}
+              />
+            </FormItem>
+          );
+        })}
+    </div>
+  );
+}
+
+export default Server;

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

@@ -0,0 +1,25 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+import { createSlice } from "@reduxjs/toolkit";
+const initialState = {};
+export const slice = createSlice({
+  name: "server",
+  initialState,
+  reducers: {
+    setServer: (state, action) => {
+      state.value = state.options.find((s) => s.url === action.payload);
+    },
+    setServerVariable: (state, action) => {
+      if (state.value?.variables) {
+        state.value.variables[action.payload.key].default =
+          action.payload.value;
+      }
+    },
+  },
+});
+export const { setServer, setServerVariable } = slice.actions;
+export default slice.reducer;

package/lib-next/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-next/theme/ApiDemoPanel/VSCode/index.js

@@ -0,0 +1,265 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+import React, { useState } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+import Editor from "@monaco-editor/react";
+import styles from "./styles.module.css";
+
+function VSCode({ value, language, onChange }) {
+  const [focused, setFocused] = useState(false);
+  const isDarkTheme = useColorMode().colorMode === "dark" ?? 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 ? styles.monacoFocus : styles.monaco}>
+      <Editor
+        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 = () => {
+            onChange(editor.getValue());
+            const editorElement = editor.getDomNode();
+
+            if (!editorElement) {
+              return;
+            }
+
+            const lineHeight = 22;
+            const lineCount = 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>
+  );
+}
+
+export default VSCode;

package/lib-next/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);
+}