docusaurus-theme-openapi-docs 0.0.0-beta.646 → 0.0.0-beta.651

package/src/theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx

@@ -0,0 +1,153 @@
+/* ============================================================================
+ * 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 { ErrorMessage } from "@hookform/error-message";
+import { nanoid } from "@reduxjs/toolkit";
+import FormSelect from "@theme/ApiDemoPanel/FormSelect";
+import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
+import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { Controller, useFormContext } from "react-hook-form";
+
+export interface ParamProps {
+  param: Param;
+}
+
+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);
+      }}
+    />
+  );
+}
+
+export default function ParamArrayFormItem({ param }: ParamProps) {
+  const [items, setItems] = useState<{ id: string; value?: string }[]>([]);
+  const dispatch = useTypedDispatch();
+
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const showErrorMessage = errors?.paramArray?.message;
+
+  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 }, onChange: any) {
+    return (value: string) => {
+      const newItems = items.map((i) => {
+        if (i.id === itemToUpdate.id) {
+          return { ...i, value: value };
+        }
+        return i;
+      });
+      setItems(newItems);
+      onChange(newItems);
+    };
+  }
+
+  return (
+    <>
+      <Controller
+        control={control}
+        rules={{ required: param.required ? "This field is required" : false }}
+        name="paramArray"
+        render={({ field: { onChange, name } }) => (
+          <>
+            {items.map((item) => (
+              <div key={item.id} style={{ display: "flex" }}>
+                <ArrayItem
+                  param={param}
+                  onChange={handleChangeItem(item, onChange)}
+                />
+                <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>
+          </>
+        )}
+      />
+      {showErrorMessage && (
+        <ErrorMessage
+          errors={errors}
+          name="paramArray"
+          render={({ message }) => (
+            <div className="openapi-demo__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
+  );
+}

package/src/theme/ApiDemoPanel/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/ApiDemoPanel/FormSelect";
+import { Param, setParam } from "@theme/ApiDemoPanel/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-demo__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
+  );
+}

package/src/theme/ApiDemoPanel/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/ApiDemoPanel/FormMultiSelect";
+import { Param, setParam } from "@theme/ApiDemoPanel/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-demo__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
+  );
+}

package/src/theme/ApiDemoPanel/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/ApiDemoPanel/FormSelect";
+import { Param, setParam } from "@theme/ApiDemoPanel/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-demo__input-error">{message}</div>
+          )}
+        />
+      )}
+    </>
+  );
+}

package/src/theme/ApiDemoPanel/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/ApiDemoPanel/FormTextInput";
+import { Param, setParam } from "@theme/ApiDemoPanel/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/ApiDemoPanel/ParamOptions/_ParamOptions.scss

@@ -8,29 +8,21 @@
 }
 
 .openapi-demo__show-more-btn {
+  width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-
-  cursor: pointer;
-  font-size: var(--ifm-code-font-size);
-
+  margin-left: 0.25rem;
+  margin-bottom: 0.5rem;
   padding: 0;
-
+  cursor: pointer;
+  font-size: var(--openapi-demo-font-size-input);
   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;
 
   &:hover {
@@ -88,32 +80,22 @@
 .openapi-demo__thin-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;
-
+  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);
-
-  -webkit-user-select: none;
   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);
-  /* height: 48px; */
-  padding: 3px 60px 3px 12px;
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  margin-bottom: var(--ifm-pre-padding);
-
-  display: block;
+  text-transform: uppercase;
 
   &:hover {
     color: var(--openapi-inverse-color);
@@ -132,7 +114,6 @@
 
 .openapi-demo__show-options {
   visibility: visible;
-  margin-top: var(--ifm-pre-padding);
 }
 
 .openapi-demo__hide-options {

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

@@ -5,16 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useState, useEffect } from "react";
+import React, { useState } 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 ParamArrayFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamArrayFormItem";
+import ParamBooleanFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamBooleanFormItem";
+import ParamMultiSelectFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamMultiSelectFormItem";
+import ParamSelectFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamSelectFormItem";
+import ParamTextFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamTextFormItem";
+import { useTypedSelector } from "@theme/ApiItem/hooks";
 
-import { Param, setParam } from "./slice";
+import { Param } from "./slice";
 
 export interface ParamProps {
   param: Param;
@@ -141,193 +142,4 @@ function ParamOptions() {
   );
 }
 
-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="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 }: 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;