docusaurus-theme-openapi-docs 0.0.0-1000

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx

@@ -0,0 +1,64 @@
+/* ============================================================================
+ * 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 { ErrorMessage } from "@hookform/error-message";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
+import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { Controller, useFormContext } from "react-hook-form";
+
+export interface ParamProps {
+  param: Param;
+}
+
+export default function ParamBooleanFormItem({ param }: ParamProps) {
+  const dispatch = useTypedDispatch();
+
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const showErrorMessage = errors?.paramBoolean;
+
+  return (
+    <>
+      <Controller
+        control={control}
+        rules={{ required: param.required ? "This field is required" : false }}
+        name="paramBoolean"
+        render={({ field: { onChange, name } }) => (
+          <FormSelect
+            name={name}
+            options={["---", "true", "false"]}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              const val = e.target.value;
+              dispatch(
+                setParam({
+                  ...param,
+                  value: val === "---" ? undefined : val,
+                })
+              );
+              onChange(val);
+            }}
+          />
+        )}
+      />
+      {showErrorMessage && (
+        <ErrorMessage
+          errors={errors}
+          name="paramBoolean"
+          render={({ message }) => (
+            <div className="openapi-explorer__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
+  );
+}

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx

@@ -0,0 +1,86 @@
+/* ============================================================================
+ * 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 { ErrorMessage } from "@hookform/error-message";
+import FormMultiSelect from "@theme/ApiExplorer/FormMultiSelect";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import { Controller, useFormContext } from "react-hook-form";
+
+export interface ParamProps {
+  param: Param;
+}
+
+export default function ParamMultiSelectFormItem({ param }: ParamProps) {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const showErrorMessage = errors?.paramMultiSelect;
+
+  const dispatch = useTypedDispatch();
+
+  const options = param.schema?.items?.enum ?? [];
+
+  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 paramTypeToWatch = pathParams.length
+    ? pathParams
+    : queryParams.length
+      ? queryParams
+      : cookieParams.length
+        ? cookieParams
+        : headerParams;
+
+  const handleChange = (e: any, onChange: 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,
+      })
+    );
+
+    onChange(paramTypeToWatch);
+  };
+
+  return (
+    <>
+      <Controller
+        control={control}
+        rules={{ required: param.required ? "This field is required" : false }}
+        name="paramMultiSelect"
+        render={({ field: { onChange, name } }) => (
+          <FormMultiSelect
+            options={options as string[]}
+            name={name}
+            onChange={(e: any) => handleChange(e, onChange)}
+            showErrors={showErrorMessage}
+          />
+        )}
+      />
+      {showErrorMessage && (
+        <ErrorMessage
+          errors={errors}
+          name="paramMultiSelect"
+          render={({ message }) => (
+            <div className="openapi-explorer__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
+  );
+}

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx

@@ -0,0 +1,65 @@
+/* ============================================================================
+ * 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 { ErrorMessage } from "@hookform/error-message";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
+import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { Controller, useFormContext } from "react-hook-form";
+
+export interface ParamProps {
+  param: Param;
+}
+
+export default function ParamSelectFormItem({ param }: ParamProps) {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const showErrorMessage = errors?.paramSelect;
+
+  const dispatch = useTypedDispatch();
+
+  const options = param.schema?.enum ?? [];
+
+  return (
+    <>
+      <Controller
+        control={control}
+        rules={{ required: param.required ? "This field is required" : false }}
+        name="paramSelect"
+        render={({ field: { onChange, name } }) => (
+          <FormSelect
+            options={["---", ...(options as string[])]}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              const val = e.target.value;
+              dispatch(
+                setParam({
+                  ...param,
+                  value: val === "---" ? undefined : val,
+                })
+              );
+              onChange(val);
+            }}
+          />
+        )}
+      />
+      {showErrorMessage && (
+        <ErrorMessage
+          errors={errors}
+          name="paramSelect"
+          render={({ message }) => (
+            <div className="openapi-explorer__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
+  );
+}

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.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";
+
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
+import { useTypedDispatch } from "@theme/ApiItem/hooks";
+
+export interface ParamProps {
+  param: Param;
+}
+
+export default function ParamTextFormItem({ param }: ParamProps) {
+  const dispatch = useTypedDispatch();
+  return (
+    <FormTextInput
+      isRequired={param.required}
+      paramName={param.name}
+      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,
+          })
+        )
+      }
+    />
+  );
+}

package/src/theme/ApiExplorer/ParamOptions/_ParamOptions.scss

@@ -0,0 +1,123 @@
+.openapi-explorer__plus-btn--expanded {
+  transition: transform 0.2s ease;
+  display: inline-block;
+  transform: rotate(0deg);
+  transform-origin: center;
+  margin-right: 6px;
+  transform: rotate(45deg);
+}
+
+.openapi-explorer__show-more-btn {
+  width: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin-left: 0.25rem;
+  margin-bottom: 0.5rem;
+  padding: 0;
+  cursor: pointer;
+  font-size: var(--openapi-explorer-font-size-input);
+  user-select: none;
+  white-space: nowrap;
+  border: 0px solid transparent;
+  display: block;
+  background-color: transparent;
+  color: var(--ifm-color-primary);
+  text-align: left;
+
+  &:hover {
+    color: var(--ifm-color-primary-hover);
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.openapi-explorer__delete-btn {
+  -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;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:active {
+    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+  }
+}
+
+.openapi-explorer__thin-btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+  font-weight: bold;
+  padding: 0.5rem 1rem;
+  font-size: 12px;
+  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);
+  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);
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  text-transform: uppercase;
+
+  &:hover {
+    color: var(--openapi-inverse-color);
+    background-color: var(--openapi-input-border);
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:active {
+    box-shadow:
+      inset 0 0 0 1px var(--openapi-input-border),
+      inset 0 0 0 2px var(--openapi-inverse-color);
+  }
+}
+
+.openapi-explorer__show-options {
+  visibility: visible;
+}
+
+.openapi-explorer__hide-options {
+  display: none;
+  visibility: hidden;
+}

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

@@ -0,0 +1,146 @@
+/* ============================================================================
+ * 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 } from "react";
+
+import FormItem from "@theme/ApiExplorer/FormItem";
+import ParamArrayFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem";
+import ParamBooleanFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem";
+import ParamMultiSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem";
+import ParamSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem";
+import ParamTextFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem";
+import { useTypedSelector } from "@theme/ApiItem/hooks";
+
+import { Param } from "./slice";
+
+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
+            type="button"
+            className="openapi-explorer__show-more-btn"
+            onClick={() => setShowOptional((prev) => !prev)}
+          >
+            <span
+              style={{
+                width: "1.5em",
+                display: "inline-block",
+                textAlign: "center",
+              }}
+            >
+              <span
+                className={
+                  showOptional
+                    ? "openapi-explorer__plus-btn--expanded"
+                    : "openapi-explorer__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-explorer__show-options"
+                : "openapi-explorer__hide-options"
+            }
+          >
+            {optionalParams.map((param) => (
+              <ParamOptionWrapper
+                key={`${param.in}-${param.name}`}
+                param={param}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+export default ParamOptions;

package/src/theme/ApiExplorer/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/ApiExplorer/Request/_Request.scss

@@ -0,0 +1,129 @@
+.openapi-explorer__request-form {
+  background-color: var(--ifm-pre-background);
+  border-radius: var(--openapi-card-border-radius);
+  border: 1px solid var(--openapi-explorer-border-color);
+  box-shadow:
+    0 2px 3px hsla(222, 8%, 43%, 0.1),
+    0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
+  color: var(--ifm-pre-color);
+  line-height: var(--ifm-pre-line-height);
+  margin-bottom: var(--ifm-spacing-vertical);
+  margin-top: 0;
+  overflow: auto;
+  transition: 300ms;
+
+  /* hack for view calculation when monaco is hidden */
+  position: relative;
+
+  &:empty {
+    display: none;
+  }
+
+  &:hover {
+    box-shadow:
+      0 0 0 2px rgba(38, 53, 61, 0.15),
+      0 2px 3px hsla(222, 8%, 43%, 0.15),
+      0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
+  }
+
+  .required {
+    font-size: var(--ifm-code-font-size);
+    color: var(--openapi-required);
+
+    &.request-body {
+      padding-left: 0.25rem;
+    }
+  }
+}
+
+.openapi-explorer__request-header-container {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--openapi-explorer-border-color);
+  margin: 0;
+  padding: 0.75rem var(--ifm-pre-padding);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.openapi-explorer__expand-details-btn {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.openapi-explorer__details-outer-container {
+  padding: 1rem;
+}
+
+.openapi-explorer__details-container[open] {
+  .openapi-explorer__details-summary::before {
+    transform: rotate(180deg);
+    margin-top: 0.25rem;
+  }
+}
+
+.openapi-explorer__details-summary {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0;
+  font-size: 14px;
+  list-style: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+    margin-top: 0.25rem;
+    background-image: var(--openapi-explorer-caret-bg);
+    border: none !important;
+    transform: rotate(90deg);
+    content: "";
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.openapi-explorer__request-btn {
+  border: none;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.5rem 1rem;
+  margin-top: 1rem;
+  background-color: var(--ifm-color-primary-light);
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  color: white;
+  cursor: pointer;
+  transition: 300ms;
+
+  &:hover {
+    background-color: var(--ifm-color-primary-lightest);
+  }
+
+  &:active {
+    background-color: var(--ifm-color-primary-light);
+  }
+}
+
+.openapi-security__summary-container {
+  background: var(--ifm-pre-background);
+  border-radius: var(--ifm-pre-border-radius);
+}
+
+// Prevent auto zoom on mobile iOS devices when focusing on input elmenents
+@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 1024px) {
+  .prism-code,
+  select,
+  input {
+    font-size: 1rem;
+  }
+}