docusaurus-theme-openapi-docs 1.0.0

package/src/theme/ApiDemoPanel/FormTextInput/styles.module.css

@@ -0,0 +1,21 @@
+.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);
+}

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

@@ -0,0 +1,55 @@
+/* ============================================================================
+ * 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";
+
+const methodStyle = {
+  borderRadius: "var(--ifm-global-radius)",
+};
+
+function colorForMethod(method: string) {
+  switch (method.toLowerCase()) {
+    case "get":
+      return "primary";
+    case "put":
+      return "warning";
+    case "patch":
+      return "warning";
+    case "post":
+      return "success";
+    case "delete":
+      return "danger";
+    default:
+      return undefined;
+  }
+}
+
+interface Props {
+  method: string;
+  path: string;
+}
+
+function MethodEndpoint({ method, path }: Props) {
+  return (
+    <pre
+      style={{
+        background: "var(--openapi-card-background-color)",
+        borderRadius: "var(--openapi-card-border-radius)",
+      }}
+    >
+      <span
+        style={methodStyle}
+        className={"badge badge--" + colorForMethod(method)}
+      >
+        {method.toUpperCase()}
+      </span>{" "}
+      <span>{path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}</span>
+    </pre>
+  );
+}
+
+export default MethodEndpoint;

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

@@ -0,0 +1,316 @@
+/* ============================================================================
+ * 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, useEffect } from "react";
+
+import { nanoid } from "@reduxjs/toolkit";
+
+import { useTypedDispatch, useTypedSelector } from "../hooks";
+import FormItem from "./../FormItem";
+import FormMultiSelect from "./../FormMultiSelect";
+import FormSelect from "./../FormSelect";
+import FormTextInput from "./../FormTextInput";
+import { Param, setParam } from "./slice";
+import styles from "./styles.module.css";
+
+interface ParamProps {
+  param: Param;
+}
+
+function ParamOption({ param }: ParamProps) {
+  if (param.schema?.type === "array" && param.schema.items?.enum) {
+    return <ParamMultiSelectFormItem param={param} />;
+  }
+
+  if (param.schema?.type === "array") {
+    return <ParamArrayFormItem param={param} />;
+  }
+
+  if (param.schema?.enum) {
+    return <ParamSelectFormItem param={param} />;
+  }
+
+  if (param.schema?.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 }: ParamProps) {
+  return (
+    <FormItem label={param.name} type={param.in}>
+      <ParamOption param={param} />
+    </FormItem>
+  );
+}
+
+function ParamOptions() {
+  const [showOptional, setShowOptional] = useState(false);
+
+  const pathParams = useTypedSelector((state) => state.params.path);
+  const queryParams = useTypedSelector((state) => state.params.query);
+  const cookieParams = useTypedSelector((state) => state.params.cookie);
+  const headerParams = 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={styles.showMoreButton}
+            onClick={() => setShowOptional((prev) => !prev)}
+          >
+            <span
+              style={{
+                width: "1.5em",
+                display: "inline-block",
+                textAlign: "center",
+              }}
+            >
+              <span
+                className={showOptional ? styles.plusExpanded : styles.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 ? styles.showOptions : styles.hideOptions}
+          >
+            {optionalParams.map((param) => (
+              <ParamOptionWrapper
+                key={`${param.in}-${param.name}`}
+                param={param}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+function ArrayItem({
+  param,
+  onChange,
+}: ParamProps & { onChange(value?: string): any }) {
+  if (param.schema?.items?.type === "boolean") {
+    return (
+      <FormSelect
+        options={["---", "true", "false"]}
+        onChange={(e) => {
+          const val = e.target.value;
+          onChange(val === "---" ? undefined : val);
+        }}
+      />
+    );
+  }
+
+  return (
+    <FormTextInput
+      placeholder={param.description || param.name}
+      onChange={(e) => {
+        onChange(e.target.value);
+      }}
+    />
+  );
+}
+
+function ParamArrayFormItem({ param }: ParamProps) {
+  const [items, setItems] = useState<{ id: string; value?: string }[]>([]);
+  const dispatch = useTypedDispatch();
+
+  function handleAddItem() {
+    setItems((i) => [
+      ...i,
+      {
+        id: nanoid(),
+      },
+    ]);
+  }
+
+  useEffect(() => {
+    const values = items
+      .map((item) => item.value)
+      .filter((item): item is string => !!item);
+
+    dispatch(
+      setParam({
+        ...param,
+        value: values.length > 0 ? values : undefined,
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items]);
+
+  function handleDeleteItem(itemToDelete: { id: string }) {
+    return () => {
+      const newItems = items.filter((i) => i.id !== itemToDelete.id);
+      setItems(newItems);
+    };
+  }
+
+  function handleChangeItem(itemToUpdate: { id: string }) {
+    return (value: string) => {
+      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={styles.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={styles.buttonThin} onClick={handleAddItem}>
+        Add item
+      </button>
+    </>
+  );
+}
+
+function ParamSelectFormItem({ param }: ParamProps) {
+  const dispatch = useTypedDispatch();
+
+  const options = param.schema?.enum ?? [];
+
+  return (
+    <FormSelect
+      options={["---", ...(options as string[])]}
+      onChange={(e) => {
+        const val = e.target.value;
+        dispatch(
+          setParam({
+            ...param,
+            value: val === "---" ? undefined : val,
+          })
+        );
+      }}
+    />
+  );
+}
+
+function ParamBooleanFormItem({ param }: ParamProps) {
+  const dispatch = useTypedDispatch();
+
+  return (
+    <FormSelect
+      options={["---", "true", "false"]}
+      onChange={(e) => {
+        const val = e.target.value;
+        dispatch(
+          setParam({
+            ...param,
+            value: val === "---" ? undefined : val,
+          })
+        );
+      }}
+    />
+  );
+}
+
+function ParamMultiSelectFormItem({ param }: ParamProps) {
+  const dispatch = useTypedDispatch();
+
+  const options = param.schema?.items?.enum ?? [];
+
+  return (
+    <FormMultiSelect
+      options={options as string[]}
+      onChange={(e) => {
+        const values = Array.prototype.filter
+          .call(e.target.options, (o) => o.selected)
+          .map((o) => o.value);
+
+        dispatch(
+          setParam({
+            ...param,
+            value: values.length > 0 ? values : undefined,
+          })
+        );
+      }}
+    />
+  );
+}
+
+function ParamTextFormItem({ param }: ParamProps) {
+  const dispatch = useTypedDispatch();
+
+  return (
+    <FormTextInput
+      placeholder={param.description || param.name}
+      onChange={(e) => dispatch(setParam({ ...param, value: e.target.value }))}
+    />
+  );
+}
+
+export default ParamOptions;

package/src/theme/ApiDemoPanel/ParamOptions/slice.ts

@@ -0,0 +1,37 @@
+/* ============================================================================
+ * 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 { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+
+export type Param = ParameterObject & { value?: string[] | string };
+
+export interface State {
+  path: Param[];
+  query: Param[];
+  header: Param[];
+  cookie: Param[];
+}
+
+const initialState: State = {} as any;
+
+export const slice = createSlice({
+  name: "params",
+  initialState,
+  reducers: {
+    setParam: (state, action: PayloadAction<Param>) => {
+      const newParam = action.payload;
+      const paramGroup = state[action.payload.in];
+      const index = paramGroup.findIndex((p) => p.name === newParam.name);
+      paramGroup[index] = newParam;
+    },
+  },
+});
+
+export const { setParam } = slice.actions;
+
+export default slice.reducer;

package/src/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/src/theme/ApiDemoPanel/Response/index.tsx

@@ -0,0 +1,66 @@
+/* ============================================================================
+ * 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 { useTypedDispatch, useTypedSelector } from "../hooks";
+import FloatingButton from "./../FloatingButton";
+import { clearResponse } from "./slice";
+
+// TODO: We probably shouldn't attempt to format XML...
+function formatXml(xml: string) {
+  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 = useTypedSelector((state) => state.response.value);
+  const dispatch = useTypedDispatch();
+
+  if (response === undefined) {
+    return null;
+  }
+
+  let prettyResponse: string = response;
+  try {
+    prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
+  } catch {
+    if (response.startsWith("<?xml ")) {
+      prettyResponse = formatXml(response);
+    }
+  }
+
+  return (
+    <FloatingButton onClick={() => dispatch(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>
+  );
+}
+
+export default Response;

package/src/theme/ApiDemoPanel/Response/slice.ts

@@ -0,0 +1,31 @@
+/* ============================================================================
+ * 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";
+
+export interface State {
+  value?: string;
+}
+
+const initialState: State = {} as any;
+
+export const slice = createSlice({
+  name: "response",
+  initialState,
+  reducers: {
+    setResponse: (state, action: PayloadAction<string>) => {
+      state.value = action.payload;
+    },
+    clearResponse: (state) => {
+      state.value = undefined;
+    },
+  },
+});
+
+export const { setResponse, clearResponse } = slice.actions;
+
+export default slice.reducer;