docusaurus-theme-openapi-docs 1.0.0

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

@@ -0,0 +1,133 @@
+/* ============================================================================
+ * 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 FileContent {
+  type: "file";
+  value: {
+    src: string;
+    content: Blob;
+  };
+}
+
+export interface StringContent {
+  type: "string";
+  value?: string;
+}
+
+export type Content = FileContent | StringContent | undefined;
+
+export interface FormBody {
+  type: "form";
+  content: {
+    [key: string]: Content;
+  };
+}
+
+export interface RawBody {
+  type: "raw";
+  content: Content;
+}
+
+export interface EmptyBody {
+  type: "empty";
+}
+
+export type Body = EmptyBody | FormBody | RawBody;
+
+export type State = Body;
+
+const initialState: State = {} as any;
+
+export const slice = createSlice({
+  name: "body",
+  initialState,
+  reducers: {
+    clearRawBody: (_state) => {
+      return {
+        type: "empty",
+      };
+    },
+    setStringRawBody: (_state, action: PayloadAction<string>) => {
+      return {
+        type: "raw",
+        content: {
+          type: "string",
+          value: action.payload,
+        },
+      };
+    },
+    setFileRawBody: (_state, action: PayloadAction<FileContent["value"]>) => {
+      return {
+        type: "raw",
+        content: {
+          type: "file",
+          value: action.payload,
+        },
+      };
+    },
+    clearFormBodyKey: (state, action: PayloadAction<string>) => {
+      if (state?.type === "form") {
+        delete state.content[action.payload];
+      }
+    },
+    setStringFormBody: (
+      state,
+      action: PayloadAction<{ key: string; value: string }>
+    ) => {
+      if (state?.type !== "form") {
+        return {
+          type: "form",
+          content: {
+            [action.payload.key]: {
+              type: "string",
+              value: action.payload.value,
+            },
+          },
+        };
+      }
+      state.content[action.payload.key] = {
+        type: "string",
+        value: action.payload.value,
+      };
+      return state;
+    },
+    setFileFormBody: (
+      state,
+      action: PayloadAction<{ key: string; value: FileContent["value"] }>
+    ) => {
+      if (state?.type !== "form") {
+        return {
+          type: "form",
+          content: {
+            [action.payload.key]: {
+              type: "file",
+              value: action.payload.value,
+            },
+          },
+        };
+      }
+      state.content[action.payload.key] = {
+        type: "file",
+        value: action.payload.value,
+      };
+      return state;
+    },
+  },
+});
+
+export const {
+  clearRawBody,
+  setStringRawBody,
+  setFileRawBody,
+  clearFormBodyKey,
+  setStringFormBody,
+  setFileFormBody,
+} = slice.actions;
+
+export default slice.reducer;

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

@@ -0,0 +1,35 @@
+/* ============================================================================
+ * 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 FormItem from "./../FormItem";
+import FormSelect from "./../FormSelect";
+import { setContentType } from "./slice";
+
+function ContentType() {
+  const value = useTypedSelector((state) => state.contentType.value);
+  const options = useTypedSelector((state) => state.contentType.options);
+  const dispatch = useTypedDispatch();
+
+  if (options.length <= 1) {
+    return null;
+  }
+
+  return (
+    <FormItem label="Content-Type">
+      <FormSelect
+        value={value}
+        options={options}
+        onChange={(e) => dispatch(setContentType(e.target.value))}
+      />
+    </FormItem>
+  );
+}
+
+export default ContentType;

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

@@ -0,0 +1,29 @@
+/* ============================================================================
+ * 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;
+  options: string[];
+}
+
+const initialState: State = {} as any;
+
+export const slice = createSlice({
+  name: "contentType",
+  initialState,
+  reducers: {
+    setContentType: (state, action: PayloadAction<string>) => {
+      state.value = action.payload;
+    },
+  },
+});
+
+export const { setContentType } = slice.actions;
+
+export default slice.reducer;

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

@@ -0,0 +1,280 @@
+/* ============================================================================
+ * 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, { useRef, useState, useEffect } from "react";
+
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+// @ts-ignore
+import codegen from "@paloaltonetworks/postman-code-generators";
+// @ts-ignore
+import sdk from "@paloaltonetworks/postman-collection";
+import clsx from "clsx";
+import Highlight, { defaultProps } from "prism-react-renderer";
+
+import { useTypedSelector } from "../hooks";
+import buildPostmanRequest from "./../buildPostmanRequest";
+import FloatingButton from "./../FloatingButton";
+import styles from "./styles.module.css";
+
+interface Language {
+  tabName: string;
+  highlight: string;
+  language: string;
+  variant: string;
+  options: { [key: string]: boolean };
+}
+
+const languageSet: Language[] = [
+  {
+    tabName: "cURL",
+    highlight: "bash",
+    language: "curl",
+    variant: "curl",
+    options: {
+      longFormat: false,
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+  },
+  {
+    tabName: "Node",
+    highlight: "javascript",
+    language: "nodejs",
+    variant: "axios",
+    options: {
+      ES6_enabled: true,
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+  },
+  {
+    tabName: "Go",
+    highlight: "go",
+    language: "go",
+    variant: "native",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+  },
+  {
+    tabName: "Python",
+    highlight: "python",
+    language: "python",
+    variant: "requests",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+  },
+];
+
+const languageTheme = {
+  plain: {
+    color: "var(--ifm-code-color)",
+  },
+  styles: [
+    {
+      types: ["inserted", "attr-name"],
+      style: {
+        color: "var(--openapi-code-green)",
+      },
+    },
+    {
+      types: ["string", "url"],
+      style: {
+        color: "var(--openapi-code-green)",
+      },
+    },
+    {
+      types: ["builtin", "char", "constant", "function"],
+      style: {
+        color: "var(--openapi-code-blue)",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "var(--openapi-code-dim)",
+      },
+    },
+    {
+      types: ["class-name"],
+      style: {
+        color: "var(--openapi-code-orange)",
+      },
+    },
+    {
+      types: ["tag", "arrow", "keyword"],
+      style: {
+        color: "var(--openapi-code-purple)",
+      },
+    },
+    {
+      types: ["boolean"],
+      style: {
+        color: "var(--openapi-code-red)",
+      },
+    },
+  ],
+};
+
+interface Props {
+  postman: sdk.Request;
+  codeSamples: any; // TODO: Type this...
+}
+
+function Curl({ postman, codeSamples }: Props) {
+  // TODO: match theme for vscode.
+
+  const { siteConfig } = useDocusaurusContext();
+
+  const [copyText, setCopyText] = useState("Copy");
+
+  const contentType = useTypedSelector((state) => state.contentType.value);
+  const accept = useTypedSelector((state) => state.accept.value);
+  const server = useTypedSelector((state) => state.server.value);
+  const body = useTypedSelector((state) => state.body);
+
+  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 auth = useTypedSelector((state) => state.auth);
+
+  // TODO
+  const langs = [
+    ...((siteConfig?.themeConfig?.languageTabs as Language[] | undefined) ??
+      languageSet),
+    ...codeSamples,
+  ];
+
+  const [language, setLanguage] = useState(langs[0]);
+
+  const [codeText, setCodeText] = useState("");
+
+  useEffect(() => {
+    if (language && !!language.options) {
+      const postmanRequest = buildPostmanRequest(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth,
+      });
+
+      codegen.convert(
+        language.language,
+        language.variant,
+        postmanRequest,
+        language.options,
+        (error: any, snippet: string) => {
+          if (error) {
+            return;
+          }
+          setCodeText(snippet);
+        }
+      );
+    } else if (language && !!language.source) {
+      setCodeText(language.source);
+    } else {
+      setCodeText("");
+    }
+  }, [
+    accept,
+    body,
+    contentType,
+    cookieParams,
+    headerParams,
+    language,
+    pathParams,
+    postman,
+    queryParams,
+    server,
+    auth,
+  ]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleCurlCopy = () => {
+    setCopyText("Copied");
+    setTimeout(() => {
+      setCopyText("Copy");
+    }, 2000);
+    if (ref.current?.innerText) {
+      navigator.clipboard.writeText(ref.current.innerText);
+    }
+  };
+
+  if (language === undefined) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={clsx(styles.buttonGroup, "api-code-tab-group")}>
+        {langs.map((lang) => {
+          return (
+            <button
+              key={lang.tabName || lang.label}
+              className={clsx(
+                language === lang ? styles.selected : undefined,
+                language === lang ? "api-code-tab--active" : undefined,
+                "api-code-tab"
+              )}
+              onClick={() => setLanguage(lang)}
+            >
+              {lang.tabName || lang.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <Highlight
+        {...defaultProps}
+        theme={languageTheme}
+        code={codeText}
+        language={language.highlight || language.lang}
+      >
+        {({ className, tokens, getLineProps, getTokenProps }) => (
+          <FloatingButton onClick={handleCurlCopy} label={copyText}>
+            <pre
+              className={className}
+              style={{
+                background: "var(--openapi-card-background-color)",
+                paddingRight: "60px",
+                borderRadius:
+                  "2px 2px var(--openapi-card-border-radius) var(--openapi-card-border-radius)",
+              }}
+            >
+              <code ref={ref}>
+                {tokens.map((line, i) => (
+                  <span {...getLineProps({ line, key: i })}>
+                    {line.map((token, key) => {
+                      if (token.types.includes("arrow")) {
+                        token.types = ["arrow"];
+                      }
+                      return <span {...getTokenProps({ token, key })} />;
+                    })}
+                    {"\n"}
+                  </span>
+                ))}
+              </code>
+            </pre>
+          </FloatingButton>
+        )}
+      </Highlight>
+    </>
+  );
+}
+
+export default Curl;

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

@@ -0,0 +1,84 @@
+.buttonGroup {
+  background: var(--openapi-card-background-color);
+  color: var(--ifm-pre-color);
+  font-family: var(--ifm-font-family-monospace);
+  /* font-size: var(--ifm-code-font-size); */
+  /* line-height: var(--ifm-pre-line-height); */
+  /* margin-bottom: calc(var(--ifm-spacing-vertical) / 4); */
+  margin-bottom: 1px;
+  margin-top: 0;
+  border-radius: var(--openapi-card-border-radius)
+    var(--openapi-card-border-radius) 2px 2px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.buttonGroup button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  cursor: pointer;
+  /* font-size: calc(0.875rem * var(--ifm-button-size-multiplier)); */
+  /* line-height: 1.5; */
+  /* font-weight: var(--ifm-button-font-weight); */
+
+  /* font-size: var(--ifm-code-font-size); */
+  font-size: 13.3333px;
+  line-height: var(--ifm-pre-line-height);
+  font-weight: var(--ifm-font-weight-semibold);
+
+  padding: calc(
+      var(--ifm-button-padding-vertical) * var(--ifm-button-size-multiplier)
+    )
+    calc(
+      var(--ifm-button-padding-horizontal) * var(--ifm-button-size-multiplier)
+    );
+
+  text-align: center;
+
+  transition: color var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1),
+    background var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1),
+    border-color var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1);
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+
+  background: transparent;
+
+  color: var(--ifm-menu-color);
+  border: 0px solid transparent;
+  /* border-radius: var(--ifm-pre-border-radius); */
+
+  --margin: 0.25rem;
+
+  border-radius: calc(var(--margin));
+  /* border-radius: 0.25rem; */
+
+  display: block;
+  width: 100%;
+
+  /* margin: 2px; */
+  margin: var(--margin);
+  margin-right: 0;
+}
+
+.buttonGroup button:last-child {
+  margin-right: 0.25rem;
+}
+
+.buttonGroup button:hover {
+  background: var(--ifm-menu-color-background-active);
+}
+
+.buttonGroup button:focus {
+  outline: 0;
+}
+
+.buttonGroup button.selected {
+  background: var(--ifm-menu-color-background-active);
+  color: var(--ifm-menu-color-active);
+}

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

@@ -0,0 +1,88 @@
+/* ============================================================================
+ * 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";
+
+// @ts-ignore
+import sdk from "@paloaltonetworks/postman-collection";
+
+import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { Param } from "../ParamOptions/slice";
+import { setResponse } from "../Response/slice";
+import buildPostmanRequest from "./../buildPostmanRequest";
+import makeRequest from "./makeRequest";
+
+function validateRequest(params: {
+  path: Param[];
+  query: Param[];
+  header: Param[];
+  cookie: Param[];
+}) {
+  for (let paramList of Object.values(params)) {
+    for (let param of paramList) {
+      if (param.required && !param.value) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+interface Props {
+  postman: sdk.Request;
+  proxy?: string;
+}
+
+function Execute({ postman, proxy }: Props) {
+  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 contentType = useTypedSelector((state) => state.contentType.value);
+  const body = useTypedSelector((state) => state.body);
+  const accept = useTypedSelector((state) => state.accept.value);
+  const server = useTypedSelector((state) => state.server.value);
+  const params = useTypedSelector((state) => state.params);
+  const auth = useTypedSelector((state) => state.auth);
+
+  const isValidRequest = validateRequest(params);
+
+  const dispatch = useTypedDispatch();
+
+  const postmanRequest = buildPostmanRequest(postman, {
+    queryParams,
+    pathParams,
+    cookieParams,
+    contentType,
+    accept,
+    headerParams,
+    body,
+    server,
+    auth,
+  });
+
+  return (
+    <button
+      className="button button--block button--primary"
+      style={{ height: "48px", marginBottom: "var(--ifm-spacing-vertical)" }}
+      disabled={!isValidRequest}
+      onClick={async () => {
+        dispatch(setResponse("loading..."));
+        try {
+          const res = await makeRequest(postmanRequest, proxy, body);
+          dispatch(setResponse(res));
+        } catch (e: any) {
+          dispatch(setResponse(e.message ?? "Error fetching."));
+        }
+      }}
+    >
+      Execute
+    </button>
+  );
+}
+
+export default Execute;