docusaurus-theme-openapi-docs 1.0.0

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

@@ -0,0 +1,49 @@
+/* ============================================================================
+ * 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 from "react";
+
+import { useTypedSelector } from "../hooks";
+
+function SecuritySchemes() {
+  const options = useTypedSelector((state) => state.auth.options);
+  const selected = 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.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.Fragment>
+          );
+        }
+
+        return null;
+      })}
+    </div>
+  );
+}
+
+export default SecuritySchemes;

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

@@ -0,0 +1,103 @@
+/* ============================================================================
+ * 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/src/theme/ApiDemoPanel/Server/slice.ts

@@ -0,0 +1,40 @@
+/* ============================================================================
+ * 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, PayloadAction } from "@reduxjs/toolkit";
+import { ServerObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+// TODO: we might want to export this
+
+export interface State {
+  value?: ServerObject;
+  options: ServerObject[];
+}
+
+const initialState: State = {} as any;
+
+export const slice = createSlice({
+  name: "server",
+  initialState,
+  reducers: {
+    setServer: (state, action: PayloadAction<string>) => {
+      state.value = state.options.find((s) => s.url === action.payload);
+    },
+    setServerVariable: (
+      state,
+      action: PayloadAction<{ key: string; value: string }>
+    ) => {
+      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/src/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/src/theme/ApiDemoPanel/VSCode/index.tsx

@@ -0,0 +1,205 @@
+/* ============================================================================
+ * 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, { Monaco } from "@monaco-editor/react";
+
+import styles from "./styles.module.css";
+
+interface Props {
+  value?: string;
+  language?: string;
+  onChange(value: string): any;
+}
+
+function VSCode({ value, language, onChange }: Props) {
+  const [focused, setFocused] = useState(false);
+  const isDarkTheme = useColorMode().colorMode === "dark" ?? false;
+
+  function handleEditorWillMount(monaco: Monaco) {
+    const styles = getComputedStyle(document.documentElement);
+
+    function getColor(property: string) {
+      // 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: string) => {
+        const rgbValues = color.substring(4).split(")")[0].split(",");
+        const [r, g, b] = rgbValues;
+
+        const colorToHex = (rgb: string) => {
+          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: string) => {
+        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/src/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);
+}