docusaurus-theme-openapi-docs 0.0.0-619 → 0.0.0-685

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

@@ -1,326 +0,0 @@
-/* ============================================================================
- * 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 FormItem from "@theme/ApiDemoPanel/FormItem";
-import FormMultiSelect from "@theme/ApiDemoPanel/FormMultiSelect";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
-import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-
-import { Param, setParam } from "./slice";
-import styles from "./styles.module.css";
-
-export 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} required={param.required}>
-      <ParamOption param={param} />
-    </FormItem>
-  );
-}
-
-function ParamOptions() {
-  const [showOptional, setShowOptional] = useState(false);
-
-  const pathParams = useTypedSelector((state: any) => state.params.path);
-  const queryParams = useTypedSelector((state: any) => state.params.query);
-  const cookieParams = useTypedSelector((state: any) => state.params.cookie);
-  const headerParams = useTypedSelector((state: any) => 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: React.ChangeEvent<HTMLInputElement>) => {
-          const val = e.target.value;
-          onChange(val === "---" ? undefined : val);
-        }}
-      />
-    );
-  }
-
-  return (
-    <FormTextInput
-      placeholder={param.description || param.name}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        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: React.ChangeEvent<HTMLInputElement>) => {
-        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: React.ChangeEvent<HTMLInputElement>) => {
-        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: any) => {
-        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: React.ChangeEvent<HTMLInputElement>) =>
-        dispatch(
-          setParam({
-            ...param,
-            value:
-              param.in === "path" || param.in === "query"
-                ? e.target.value.replace(/\s/g, "%20")
-                : e.target.value,
-          })
-        )
-      }
-    />
-  );
-}
-
-export default ParamOptions;

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

@@ -1,71 +0,0 @@
-/* ============================================================================
- * 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 { useDoc } from "@docusaurus/theme-common/internal";
-import sdk from "@paloaltonetworks/postman-collection";
-import Accept from "@theme/ApiDemoPanel/Accept";
-import Authorization from "@theme/ApiDemoPanel/Authorization";
-import Body from "@theme/ApiDemoPanel/Body";
-import Execute from "@theme/ApiDemoPanel/Execute";
-import ParamOptions from "@theme/ApiDemoPanel/ParamOptions";
-import Server from "@theme/ApiDemoPanel/Server";
-import { useTypedSelector } from "@theme/ApiItem/hooks";
-import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
-import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
-
-import styles from "./styles.module.css";
-
-function Request({ item }: { item: NonNullable<ApiItem> }) {
-  const response = useTypedSelector((state: any) => state.response.value);
-  const postman = new sdk.Request(item.postman);
-  const metadata = useDoc();
-  const { proxy, hide_send_button } = metadata.frontMatter;
-
-  const params = {
-    path: [] as ParameterObject[],
-    query: [] as ParameterObject[],
-    header: [] as ParameterObject[],
-    cookie: [] as ParameterObject[],
-  };
-
-  item.parameters?.forEach(
-    (param: { in: "path" | "query" | "header" | "cookie" }) => {
-      const paramType = param.in;
-      const paramsArray: ParameterObject[] = params[paramType];
-      paramsArray.push(param as ParameterObject);
-    }
-  );
-
-  return (
-    <div>
-      <details className={`details__demo-panel`} open={response ? false : true}>
-        <summary>
-          <div className={`details__request-summary`}>
-            <h4>Request</h4>
-            {item.servers && !hide_send_button && (
-              <Execute postman={postman} proxy={proxy} />
-            )}
-          </div>
-        </summary>
-        <div className={styles.optionsPanel}>
-          <Server />
-          <Authorization />
-          <ParamOptions />
-          <Body
-            jsonRequestBodyExample={item.jsonRequestBodyExample}
-            requestBodyMetadata={item.requestBody}
-          />
-          <Accept />
-        </div>
-      </details>
-    </div>
-  );
-}
-
-export default Request;

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

@@ -1,75 +0,0 @@
-/* ============================================================================
- * 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 "@theme/ApiItem/hooks";
-import CodeBlock from "@theme/CodeBlock";
-
-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: any) => 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("<")) {
-      prettyResponse = formatXml(response);
-    }
-  }
-
-  return (
-    <details className={`details__demo-panel`} open={true}>
-      <summary>
-        <div className={`details__response-summary`}>
-          <h4>Response</h4>
-          <button
-            className="button button--sm button--secondary"
-            onClick={() => dispatch(clearResponse())}
-          >
-            Clear
-          </button>
-        </div>
-      </summary>
-      <CodeBlock
-        language={response.startsWith("<") ? `xml` : `json`}
-        className="openapi-demo__code-block"
-      >
-        {prettyResponse || "No Response"}
-      </CodeBlock>
-    </details>
-  );
-}
-
-export default Response;

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

@@ -1,56 +0,0 @@
-.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: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;
-
-  /* hack for view calculation when monaco is hidden */
-  position: relative;
-}

package/src/theme/ApiDemoPanel/postman-collection.d.ts

@@ -1,10 +0,0 @@
-/* ============================================================================
- * 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.
- * ========================================================================== */
-
-declare module "@paloaltonetworks/postman-collection" {
-  export = Request.sdk;
-}

package/src/theme/ApiDemoPanel/react-modal.d.ts

@@ -1,8 +0,0 @@
-/* ============================================================================
- * 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.
- * ========================================================================== */
-
-declare module "react-modal";

package/src/theme/ApiTabs/styles.module.css

@@ -1,120 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-.tabItem {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  margin-top: 0 !important;
-  margin-right: 0.5rem;
-  border: 1px solid var(--ifm-color-primary);
-  border-radius: var(--ifm-global-radius);
-  color: var(--ifm-color-primary);
-  font-weight: var(--ifm-font-weight-normal);
-}
-
-.tabItem:not(.active) {
-  opacity: 0.65;
-}
-
-.tabItem:hover {
-  opacity: 1;
-}
-
-.tabItem:last-child {
-  margin-right: 0 !important;
-}
-
-/* Open API Response Code Tabs */
-.responseTabsTopSection {
-  margin-top: 2rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.responseTabsContainer {
-  display: flex;
-  align-items: center;
-  max-width: 390px;
-  padding-left: 1rem;
-  overflow: hidden;
-}
-
-.responseTabsListContainer {
-  padding: 0 0.25rem;
-  overflow-y: hidden;
-  overflow-x: scroll;
-  scroll-behavior: smooth;
-}
-
-.responseTabsListContainer::-webkit-scrollbar {
-  display: none;
-}
-
-/* Response Code Tabs - Colored Dots */
-.responseTabDot {
-  width: 12.5px;
-  height: 12.5px;
-  margin-right: 5px;
-  border-radius: 50%;
-}
-
-.responseStatusSuccess > .responseTabDot {
-  background-color: var(--ifm-color-success);
-}
-
-.responseStatusDanger > .responseTabDot {
-  background-color: var(--ifm-color-danger);
-}
-
-.responseStatusInfo > .responseTabDot {
-  background-color: var(--ifm-color-info);
-}
-
-.active {
-  background-color: var(--ifm-color-emphasis-100);
-}
-
-.responseSchemaContainer {
-  max-width: 600px;
-}
-
-/* Tab Arrows */
-.tabArrow {
-  content: "";
-  height: 1.25rem;
-  width: 1.25rem;
-  border: none;
-  min-width: 1.25rem;
-  background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
-  filter: var(--ifm-menu-link-sublist-icon-filter);
-}
-
-.tabArrow:hover {
-  cursor: pointer;
-}
-.tabArrowLeft {
-  transform: rotate(270deg);
-}
-.tabArrowRight {
-  transform: rotate(90deg);
-}
-
-@media screen and (max-width: 500px) {
-  .responseTabsTopSection {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .responseTabsContainer {
-    width: 100%;
-    margin-top: var(--ifm-spacing-vertical);
-    padding: 0;
-  }
-}