docusaurus-theme-openapi-docs 2.0.0-beta.2 → 2.0.0-beta.4

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

@@ -1,44 +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";
-function FormMultiSelect({ value, options, onChange }) {
-  if (options.length === 0) {
-    return null;
-  }
-  let height;
-  if (options.length < 6) {
-    const selectPadding = 12 * 2;
-    const rawHeight = options.length * 29;
-    const innerMargins = 4 * options.length - 1;
-    const outerMargins = 4 * 2;
-    const mysteryScroll = 1;
-    height =
-      rawHeight + innerMargins + outerMargins + selectPadding + mysteryScroll;
-  }
-  return (
-    <select
-      style={{
-        height: height,
-      }}
-      className="openapi-demo__multi-select-input"
-      value={value}
-      onChange={onChange}
-      size={Math.min(6, options.length + 1)}
-      multiple
-    >
-      {options.map((option) => {
-        return (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        );
-      })}
-    </select>
-  );
-}
-export default FormMultiSelect;

package/lib-next/theme/ApiDemoPanel/FormSelect/_FormSelect.scss

@@ -1,43 +0,0 @@
-html[data-theme="dark"] .openapi-demo__select-input {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  background-color: var(--openapi-input-background);
-  border: none;
-  outline: none;
-  width: 100%;
-  font-size: var(--ifm-code-font-size);
-  color: var(--ifm-pre-color);
-
-  border-radius: 4px;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-
-  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" fill="white"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>');
-  background-repeat: no-repeat;
-  background-position: right var(--ifm-pre-padding) top 50%;
-  background-size: auto auto;
-}
-
-.openapi-demo__select-input {
-  width: 100%;
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  padding: 12px 48px 12px var(--ifm-pre-padding);
-  border: none;
-  outline: none;
-  border-radius: 4px;
-  background-color: var(--openapi-input-background);
-  font-size: var(--ifm-code-font-size);
-  color: var(--ifm-pre-color);
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-
-  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>');
-  background-repeat: no-repeat;
-  background-position: right var(--ifm-pre-padding) top 50%;
-  background-size: auto auto;
-
-  &:focus {
-    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
-  }
-}

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

@@ -1,29 +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";
-function FormSelect({ value, options, onChange }) {
-  if (!Array.isArray(options) || options.length === 0) {
-    return null;
-  }
-  return (
-    <select
-      className="openapi-demo__select-input"
-      value={value}
-      onChange={onChange}
-    >
-      {options.map((option) => {
-        return (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        );
-      })}
-    </select>
-  );
-}
-export default FormSelect;

package/lib-next/theme/ApiDemoPanel/FormTextInput/_FormTextInput.scss

@@ -1,15 +0,0 @@
-.openapi-demo__input {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  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;
-
-  &:focus {
-    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
-  }
-}

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

@@ -1,23 +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";
-function FormTextInput({ value, placeholder, password, onChange }) {
-  placeholder = placeholder?.split("\n")[0];
-  return (
-    <input
-      className="openapi-demo__input"
-      type={password ? "password" : "text"}
-      placeholder={placeholder}
-      title={placeholder}
-      value={value}
-      onChange={onChange}
-      autoComplete="off"
-    />
-  );
-}
-export default FormTextInput;

package/lib-next/theme/ApiDemoPanel/LiveEditor/_LiveEditor.scss

@@ -1,15 +0,0 @@
-.openapi-demo__playground-container {
-  margin-top: 1rem;
-  margin-bottom: var(--ifm-leading);
-  border-radius: var(--ifm-global-radius);
-  box-shadow: var(--ifm-global-shadow-lw);
-  overflow: auto;
-  max-height: 500px;
-}
-
-.openapi-demo__playground-editor {
-  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
-    var(--ifm-font-family-monospace) !important;
-  /* rtl:ignore */
-  direction: ltr;
-}

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

@@ -1,58 +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, { useEffect, useState } from "react";
-import { usePrismTheme } from "@docusaurus/theme-common";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import { setStringRawBody } from "@theme/ApiDemoPanel/Body/slice";
-import { LiveProvider, LiveEditor, withLive } from "react-live";
-function Live({ onEdit }) {
-  const isBrowser = useIsBrowser();
-  const [editorDisabled, setEditorDisabled] = useState(false);
-
-  // TODO: Temporary solution for disabling tab key
-  const handleKeydown = (event) => {
-    if (event.key === "Tab") {
-      event.preventDefault();
-      setEditorDisabled(true);
-    }
-  };
-  return (
-    <div onClick={() => setEditorDisabled(false)}>
-      <LiveEditor
-        key={String(isBrowser)}
-        className="openapi-demo__playground-editor"
-        onChange={onEdit}
-        disabled={editorDisabled}
-        onKeyDown={handleKeydown}
-      />
-    </div>
-  );
-}
-const LiveComponent = withLive(Live);
-function App({ children, transformCode, value, language, action, ...props }) {
-  const prismTheme = usePrismTheme();
-  const [code, setCode] = React.useState(children);
-  useEffect(() => {
-    action(setStringRawBody(code));
-  }, [action, code]);
-  return (
-    <div className="openapi-demo__playground-container">
-      <LiveProvider
-        code={children.replace(/\n$/, "")}
-        transformCode={transformCode ?? ((code) => `${code};`)}
-        theme={prismTheme}
-        language={language}
-        {...props}
-      >
-        <LiveComponent onEdit={setCode} />
-      </LiveProvider>
-    </div>
-  );
-}
-const LiveApp = withLive(App);
-export default LiveApp;

package/lib-next/theme/ApiDemoPanel/MethodEndpoint/_MethodEndpoint.scss

@@ -1,6 +0,0 @@
-.openapi__method-endpoint {
-  max-width: 100%;
-  width: fit-content;
-  padding: 0.65rem;
-  border: 1px solid var(--ifm-toc-border-color);
-}

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

@@ -1,68 +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 BrowserOnly from "@docusaurus/BrowserOnly";
-import { useTypedSelector } from "../../ApiItem/hooks";
-function colorForMethod(method) {
-  switch (method.toLowerCase()) {
-    case "get":
-      return "primary";
-    case "post":
-      return "success";
-    case "delete":
-      return "danger";
-    case "put":
-      return "info";
-    case "patch":
-      return "warning";
-    case "head":
-      return "secondary";
-    case "event":
-      return "secondary";
-    default:
-      return undefined;
-  }
-}
-function MethodEndpoint({ method, path }) {
-  let serverValue = useTypedSelector((state) => state.server.value);
-  let serverUrlWithVariables = "";
-  const renderServerUrl = () => {
-    if (serverValue && serverValue.variables) {
-      serverUrlWithVariables = serverValue.url.replace(/\/$/, "");
-      Object.keys(serverValue.variables).forEach((variable) => {
-        serverUrlWithVariables = serverUrlWithVariables.replace(
-          `{${variable}}`,
-          serverValue.variables?.[variable].default ?? ""
-        );
-      });
-    }
-    return (
-      <BrowserOnly>
-        {() => {
-          if (serverUrlWithVariables.length) {
-            return serverUrlWithVariables;
-          } else if (serverValue && serverValue.url) {
-            return serverValue.url;
-          }
-        }}
-      </BrowserOnly>
-    );
-  };
-  return (
-    <pre className="openapi__method-endpoint">
-      <span className={"badge badge--" + colorForMethod(method)}>
-        {method.toUpperCase()}
-      </span>{" "}
-      <span>
-        {renderServerUrl()}
-        {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
-      </span>
-    </pre>
-  );
-}
-export default MethodEndpoint;

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

@@ -1,299 +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 { setParam } from "./slice";
-function ParamOption({ param }) {
-  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 }) {
-  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) => 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="openapi-demo__show-more-btn"
-            onClick={() => setShowOptional((prev) => !prev)}
-          >
-            <span
-              style={{
-                width: "1.5em",
-                display: "inline-block",
-                textAlign: "center",
-              }}
-            >
-              <span
-                className={
-                  showOptional
-                    ? "openapi-demo__plus-btn--expanded"
-                    : "openapi-demo__plus-btn"
-                }
-              >
-                <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
-                ? "openapi-demo__show-options"
-                : "openapi-demo__hide-options"
-            }
-          >
-            {optionalParams.map((param) => (
-              <ParamOptionWrapper
-                key={`${param.in}-${param.name}`}
-                param={param}
-              />
-            ))}
-          </div>
-        </>
-      )}
-    </>
-  );
-}
-function ArrayItem({ param, onChange }) {
-  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 }) {
-  const [items, setItems] = useState([]);
-  const dispatch = useTypedDispatch();
-  function handleAddItem() {
-    setItems((i) => [
-      ...i,
-      {
-        id: nanoid(),
-      },
-    ]);
-  }
-  useEffect(() => {
-    const values = items.map((item) => item.value).filter((item) => !!item);
-    dispatch(
-      setParam({
-        ...param,
-        value: values.length > 0 ? values : undefined,
-      })
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
-  function handleDeleteItem(itemToDelete) {
-    return () => {
-      const newItems = items.filter((i) => i.id !== itemToDelete.id);
-      setItems(newItems);
-    };
-  }
-  function handleChangeItem(itemToUpdate) {
-    return (value) => {
-      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="openapi-demo__delete-btn"
-            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="openapi-demo__thin-btn" onClick={handleAddItem}>
-        Add item
-      </button>
-    </>
-  );
-}
-function ParamSelectFormItem({ param }) {
-  const dispatch = useTypedDispatch();
-  const options = param.schema?.enum ?? [];
-  return (
-    <FormSelect
-      options={["---", ...options]}
-      onChange={(e) => {
-        const val = e.target.value;
-        dispatch(
-          setParam({
-            ...param,
-            value: val === "---" ? undefined : val,
-          })
-        );
-      }}
-    />
-  );
-}
-function ParamBooleanFormItem({ param }) {
-  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 }) {
-  const dispatch = useTypedDispatch();
-  const options = param.schema?.items?.enum ?? [];
-  return (
-    <FormMultiSelect
-      options={options}
-      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 }) {
-  const dispatch = useTypedDispatch();
-  return (
-    <FormTextInput
-      placeholder={param.description || param.name}
-      onChange={(e) =>
-        dispatch(
-          setParam({
-            ...param,
-            value:
-              param.in === "path" || param.in === "query"
-                ? e.target.value.replace(/\s/g, "%20")
-                : e.target.value,
-          })
-        )
-      }
-    />
-  );
-}
-export default ParamOptions;

package/lib-next/theme/ApiDemoPanel/Request/_Request.scss

@@ -1,48 +0,0 @@
-.openapi-demo__options-panel {
-  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-top: 0 !important;
-  padding: var(--ifm-pre-padding);
-
-  /* hack for view calculation when monaco is hidden */
-  position: relative;
-
-  &:empty {
-    display: none;
-  }
-}
-
-.openapi-demo__details {
-  margin-bottom: 1rem;
-  background: var(--openapi-card-background-color);
-  border-radius: var(--openapi-card-border-radius);
-}
-
-.openapi-demo__summary-container {
-  padding: 1rem;
-  list-style-type: none;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.openapi-demo__summary-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.openapi-demo__summary-header {
-  margin-bottom: 0;
-}
-
-.openapi-demo__summary-header > button {
-  margin-bottom: 1rem;
-  margin-right: 1rem;
-}