@camunda8/docusaurus-theme-openapi-docs 4.5.1

package/src/theme/ApiExplorer/FormMultiSelect/_FormMultiSelect.scss

@@ -0,0 +1,30 @@
+.openapi-explorer__multi-select-input {
+  width: 100%;
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  padding: 1rem;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  background-color: var(--openapi-input-background);
+  outline: none;
+  font-size: var(--openapi-explorer-font-size-input);
+  color: var(--ifm-pre-color);
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:focus {
+    border: 1px solid var(--openapi-input-border);
+  }
+
+  &.error {
+    border: 1px solid var(--ifm-color-danger);
+  }
+
+  option {
+    border-radius: 0.25rem;
+    color: var(--ifm-menu-color);
+    margin: 0.25rem 0;
+    padding: var(--ifm-menu-link-padding-vertical)
+      var(--ifm-menu-link-padding-horizontal);
+  }
+}

package/src/theme/ApiExplorer/FormMultiSelect/index.tsx

@@ -0,0 +1,57 @@
+/* ============================================================================
+ * 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 clsx from "clsx";
+
+export interface Props {
+  value?: string;
+  options: string[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  showErrors?: boolean;
+}
+
+function FormMultiSelect({ value, options, onChange, showErrors }: Props) {
+  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={clsx("openapi-explorer__multi-select-input", {
+        error: showErrors,
+      })}
+      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/src/theme/ApiExplorer/FormSelect/_FormSelect.scss

@@ -0,0 +1,43 @@
+html[data-theme="dark"] .openapi-explorer__select-input {
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  background-color: var(--openapi-input-background);
+  border: none;
+  outline: none;
+  width: 100%;
+  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-explorer__select-input {
+  width: 100%;
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  padding: var(--openapi-explorer-padding-input);
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  background-color: var(--openapi-input-background);
+  font-size: var(--openapi-explorer-font-size-input);
+  font-family: var(--ifm-font-family-monospace);
+  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/src/theme/ApiExplorer/FormSelect/index.tsx

@@ -0,0 +1,38 @@
+/* ============================================================================
+ * 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";
+
+export interface Props {
+  value?: string;
+  options?: string[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+function FormSelect({ value, options, onChange }: Props) {
+  if (!Array.isArray(options) || options.length === 0) {
+    return null;
+  }
+
+  return (
+    <select
+      className="openapi-explorer__select-input"
+      value={value}
+      onChange={onChange}
+    >
+      {options.map((option) => {
+        return (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        );
+      })}
+    </select>
+  );
+}
+
+export default FormSelect;

package/src/theme/ApiExplorer/FormTextInput/_FormTextInput.scss

@@ -0,0 +1,34 @@
+.openapi-explorer__form-item-input {
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  background-color: var(--openapi-input-background);
+  border: 1px solid transparent;
+  outline: none;
+  width: 100%;
+  color: var(--ifm-pre-color);
+  padding: var(--openapi-explorer-padding-input);
+  border-radius: 4px;
+
+  &:hover {
+    border: 1px solid var(--ifm-toc-border-color);
+  }
+
+  &:focus {
+    border: 1px solid var(--ifm-color-primary);
+    box-shadow: none;
+  }
+
+  &.error {
+    border: 1px solid var(--openapi-required);
+  }
+}
+
+.openapi-explorer__input-error {
+  font-size: var(--openapi-explorer-font-size-input);
+  color: var(--openapi-required);
+  padding-top: var(--openapi-explorer-padding-input);
+
+  &::before {
+    display: inline;
+    content: "⚠ ";
+  }
+}

package/src/theme/ApiExplorer/FormTextInput/index.tsx

@@ -0,0 +1,89 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+// @ts-nocheck
+import React from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { ErrorMessage } from "@hookform/error-message";
+import { OPENAPI_FORM } from "@theme/translationIds";
+import clsx from "clsx";
+import { useFormContext } from "react-hook-form";
+
+export interface Props {
+  value?: string;
+  placeholder?: string;
+  password?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  paramName?: string;
+  isRequired?: boolean;
+}
+
+function FormTextInput({
+  isRequired,
+  value,
+  placeholder,
+  password,
+  onChange,
+  paramName,
+}: Props) {
+  placeholder = placeholder?.split("\n")[0];
+
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const showErrorMessage = errors?.[paramName]?.message;
+
+  return (
+    <>
+      {paramName ? (
+        <input
+          {...register(paramName, {
+            required: isRequired
+              ? translate({
+                  id: OPENAPI_FORM.FIELD_REQUIRED,
+                  message: "This field is required",
+                })
+              : false,
+          })}
+          className={clsx("openapi-explorer__form-item-input", {
+            error: showErrorMessage,
+          })}
+          type={password ? "password" : "text"}
+          placeholder={placeholder}
+          title={placeholder}
+          value={value}
+          onChange={onChange}
+          autoComplete="off"
+        />
+      ) : (
+        <input
+          className="openapi-explorer__form-item-input"
+          type={password ? "password" : "text"}
+          placeholder={placeholder}
+          title={placeholder}
+          value={value}
+          onChange={onChange}
+          autoComplete="off"
+        />
+      )}
+      {showErrorMessage && (
+        <ErrorMessage
+          errors={errors}
+          name={paramName}
+          render={({ message }) => (
+            <div className="openapi-explorer__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
+  );
+}
+
+export default FormTextInput;

package/src/theme/ApiExplorer/LiveEditor/_LiveEditor.scss

@@ -0,0 +1,15 @@
+.openapi-explorer__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-explorer__playground-editor {
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
+  /* rtl:ignore */
+  direction: ltr;
+}

package/src/theme/ApiExplorer/LiveEditor/index.tsx

@@ -0,0 +1,122 @@
+/* ============================================================================
+ * 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, { type JSX, useEffect, useState } from "react";
+
+import { usePrismTheme } from "@docusaurus/theme-common";
+import { translate } from "@docusaurus/Translate";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import { ErrorMessage } from "@hookform/error-message";
+import { setStringRawBody } from "@theme/ApiExplorer/Body/slice";
+import { OPENAPI_FORM } from "@theme/translationIds";
+import clsx from "clsx";
+import { Controller, useFormContext } from "react-hook-form";
+import { LiveProvider, LiveEditor, withLive } from "react-live";
+
+function Live({ onEdit, showErrors }: any) {
+  const isBrowser = useIsBrowser();
+  const [editorDisabled, setEditorDisabled] = useState(false);
+
+  return (
+    <div
+      onClick={() => setEditorDisabled(false)}
+      onBlur={() => setEditorDisabled(true)}
+    >
+      <LiveEditor
+        key={String(isBrowser)}
+        className={clsx({
+          "openapi-explorer__playground-editor": true,
+          "openapi-explorer__form-item-input": showErrors,
+          error: showErrors,
+        })}
+        onChange={onEdit}
+        disabled={editorDisabled}
+        tabMode="focus"
+      />
+    </div>
+  );
+}
+
+const LiveComponent = withLive(Live);
+
+function App({
+  children,
+  transformCode,
+  value,
+  language,
+  action,
+  required: isRequired,
+  ...props
+}: any): JSX.Element {
+  const prismTheme = usePrismTheme();
+  const [code, setCode] = React.useState(children.replace(/\n$/, ""));
+
+  useEffect(() => {
+    action(setStringRawBody(code));
+  }, [action, code]);
+
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const showErrorMessage = errors?.requestBody;
+
+  const handleChange = (snippet: string, onChange: any) => {
+    setCode(snippet);
+    onChange(snippet);
+  };
+
+  return (
+    <div
+      className={clsx({
+        "openapi-explorer__playground-container": true,
+      })}
+    >
+      <LiveProvider
+        code={code}
+        transformCode={transformCode ?? ((code) => `${code};`)}
+        theme={prismTheme}
+        language={language}
+        {...props}
+      >
+        <Controller
+          control={control}
+          rules={{
+            required:
+              isRequired && !code
+                ? translate({
+                    id: OPENAPI_FORM.FIELD_REQUIRED,
+                    message: "This field is required",
+                  })
+                : false,
+          }}
+          name="requestBody"
+          render={({ field: { onChange, name } }) => (
+            <LiveComponent
+              onEdit={(e: any) => handleChange(e, onChange)}
+              name={name}
+              showErrors={showErrorMessage}
+            />
+          )}
+        />
+        {showErrorMessage && (
+          <ErrorMessage
+            errors={errors}
+            name="requestBody"
+            render={({ message }) => (
+              <div className="openapi-explorer__input-error">{message}</div>
+            )}
+          />
+        )}
+      </LiveProvider>
+    </div>
+  );
+}
+
+const LiveApp = withLive(App);
+export default LiveApp;

package/src/theme/ApiExplorer/MethodEndpoint/_MethodEndpoint.scss

@@ -0,0 +1,22 @@
+.openapi__method-endpoint {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  width: fit-content;
+  padding: 0.65rem;
+  border: 1px solid var(--ifm-toc-border-color);
+}
+
+.openapi__method-endpoint-path {
+  margin-bottom: 0;
+  margin-left: 0.5rem;
+  font-size: 12px;
+  font-weight: normal;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.openapi__divider {
+  width: 100%;
+  margin: 1.5rem 0;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+}

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

@@ -0,0 +1,91 @@
+/* ============================================================================
+ * 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 "@theme/ApiItem/hooks";
+
+function colorForMethod(method: string) {
+  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;
+  }
+}
+
+export interface Props {
+  method: string;
+  path: string;
+  context?: "endpoint" | "callback";
+}
+
+function MethodEndpoint({ method, path, context }: Props) {
+  let serverValue = useTypedSelector((state: any) => state.server.value);
+  let serverUrlWithVariables = "";
+
+  const renderServerUrl = () => {
+    if (context === "callback") {
+      return "";
+    }
+
+    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 === "event" ? "Webhook" : method.toUpperCase()}
+        </span>{" "}
+        {method !== "event" && (
+          <h2 className="openapi__method-endpoint-path">
+            {renderServerUrl()}
+            {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
+          </h2>
+        )}
+      </pre>
+      <div className="openapi__divider" />
+    </>
+  );
+}
+
+export default MethodEndpoint;