zudoku 0.3.0-dev.64 → 0.3.0-dev.65

package/src/lib/plugins/openapi/playground/PathParams.tsx

@@ -1,31 +1,17 @@
-import { forwardRef, InputHTMLAttributes } from "react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { EraserIcon } from "lucide-react";
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  useFormContext,
+  UseFormRegister,
+} from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { Input } from "../../../ui/Input.js";
 import { cn } from "../../../util/cn.js";
-import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
-import { InlineInput } from "./InlineInput.js";
+import { ColorizedParam } from "../ColorizedParam.js";
 import type { PlaygroundForm } from "./Playground.js";
 
-type ParameterValueProps = {
-  part: string;
-} & InputHTMLAttributes<HTMLInputElement>;
-
-const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
-  function ParameterValue({ part, className, ...props }, ref) {
-    const color = usePastellizedColor(part);
-    return (
-      <InlineInput
-        {...props}
-        ref={ref}
-        className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
-        style={{
-          // color: `hsl(${color})`,
-          outlineColor: `hsl(${color})`,
-        }}
-      />
-    );
-  },
-);
-
 export const PathParams = ({
   control,
   register,
@@ -33,31 +19,77 @@ export const PathParams = ({
   register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
 }) => {
+  const form = useFormContext<PlaygroundForm>();
   const { fields } = useFieldArray<PlaygroundForm>({
     control,
     name: "pathParams",
   });
 
-  return fields.map((part, i) => (
-    <div
-      key={part.id}
-      className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
-    >
-      <InlineInput
-        {...register(`pathParams.${i}.name`)}
-        disabled
-        placeholder="Name"
-        className="peer"
-      />
-      <ParameterValue
-        {...register(`pathParams.${i}.value`)}
-        part={part.name}
-        {...{ [DATA_ATTR]: part.name }}
-        placeholder="Value"
-        className="peer"
-      />
-
-      <div className="col-span-full border-b border-border"></div>
-    </div>
-  ));
+  return (
+    <table className="w-full table-auto [&_td]:border [&_td]:py-1 [&_td]:px-2">
+      <tbody>
+        {fields.map((part, i) => (
+          <tr key={part.id} className="hover:bg-accent/40">
+            <td>
+              <Controller
+                control={control}
+                name={`pathParams.${i}.value`}
+                render={({ field }) => (
+                  <ColorizedParam
+                    slug={part.name}
+                    name={part.name}
+                    backgroundOpacity="0"
+                    borderOpacity={field.value ? "100%" : "0"}
+                    className={cn(
+                      "font-mono text-xs m-2",
+                      !field.value && "opacity-60",
+                    )}
+                  />
+                )}
+              />
+            </td>
+            <td>
+              <div className="flex justify-between items-center">
+                <Controller
+                  control={control}
+                  name={`pathParams.${i}.value`}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      placeholder="Enter value"
+                      className={cn(
+                        "border-0 shadow-none ring-0 font-mono text-xs",
+                      )}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`pathParams.${i}.value`}
+                  render={({ field }) => (
+                    <Button
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                      aria-label="Clear value"
+                      className={cn(
+                        "ms-2",
+                        field.value.length === 0
+                          ? "opacity-0 pointer-events-none"
+                          : "opacity-100",
+                      )}
+                      title="Clear value"
+                      onClick={() => field.onChange("")}
+                    >
+                      <EraserIcon size={16} />
+                    </Button>
+                  )}
+                />
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
 };

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -152,26 +152,31 @@ export const Playground = ({
     },
   });
 
-  const path = url.split("/").map((part, i, arr) => (
-    <Fragment key={part}>
-      {part.startsWith("{") && part.endsWith("}") ? (
-        <ColorizedParam
-          name={part}
-          backgroundOpacity="0"
-          slug={part.slice(1, -1)}
-        >
-          {
-            formState.pathParams.find((p) => p.name === part.slice(1, -1))
-              ?.value
-          }
-        </ColorizedParam>
-      ) : (
-        part
-      )}
-      {i < arr.length - 1 && "/"}
-      <wbr />
-    </Fragment>
-  ));
+  const path = url.split("/").map((part, i, arr) => {
+    const isPathParam = part.startsWith("{") && part.endsWith("}");
+    const value = formState.pathParams.find(
+      (p) => p.name === part.slice(1, -1),
+    )?.value;
+
+    const pathParamValue = value ? (
+      <ColorizedParam backgroundOpacity="0%" name={part} slug={part}>
+        {value}
+      </ColorizedParam>
+    ) : (
+      <span className="underline decoration-wavy decoration-red-500">
+        {part}
+      </span>
+    );
+
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      <Fragment key={part + i}>
+        {isPathParam ? pathParamValue : part}
+        {i < arr.length - 1 && "/"}
+        <wbr />
+      </Fragment>
+    );
+  });
 
   const lang = mimeTypeToLanguage(
     queryMutation.data?.headers.get("Content-Type") ?? "",
@@ -251,20 +256,18 @@ export const Playground = ({
                 <Headers control={control} register={register} />
               </TabsContent>
               <TabsContent value="parameters">
-                <div className="grid grid-cols-[min-content_1fr_1fr_auto]">
-                  {pathParams.length > 0 && (
-                    <div className="font-semibold my-3 col-span-3">
-                      Path Parameters
-                    </div>
-                  )}
-                  <PathParams control={control} register={register} />
-                  {queryParams.length > 0 && (
-                    <span className="font-semibold my-3 col-span-3">
-                      Query Parameters
-                    </span>
-                  )}
-                  <QueryParams control={control} />
-                </div>
+                {pathParams.length > 0 && (
+                  <div className="flex flex-col gap-4 my-4">
+                    <span className="font-semibold">Path Parameters</span>
+                    <PathParams control={control} register={register} />
+                  </div>
+                )}
+                {queryParams.length > 0 && (
+                  <div className="flex flex-col gap-4 my-4">
+                    <span className="font-semibold">Query Parameters</span>
+                    <QueryParams control={control} />
+                  </div>
+                )}
               </TabsContent>
               <TabsContent value="body">
                 <textarea

package/src/lib/plugins/openapi/playground/QueryParams.tsx

@@ -1,10 +1,12 @@
-import { XIcon } from "lucide-react";
+import { EraserIcon } from "lucide-react";
 import {
   Control,
   Controller,
   useFieldArray,
   useFormContext,
 } from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { Input } from "../../../ui/Input.js";
 import { cn } from "../../../util/cn.js";
 import { InlineInput } from "./InlineInput.js";
 import type { PlaygroundForm } from "./Playground.js";
@@ -21,74 +23,96 @@ export const QueryParams = ({
   const form = useFormContext<PlaygroundForm>();
 
   const requiredFields = form
-    .getValues(`queryParams`)
+    .getValues("queryParams")
     .map((param) => param.isRequired);
 
-  return fields.map((field, i) => (
-    <div
-      key={field.id}
-      className="px-2 grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-accent rounded overflow-hidden group"
-    >
-      <Controller
-        control={control}
-        name={`queryParams.${i}.active`}
-        render={({ field }) => (
-          <input
-            type="checkbox"
-            id={`queryParams.${i}.active`}
-            checked={field.value}
-            onChange={field.onChange}
-          />
-        )}
-      />
-
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <InlineInput asChild>
-              <label
-                className="flex items-center"
-                htmlFor={`queryParams.${i}.active`}
-                title={requiredFields[i] ? "Required field" : undefined}
-              >
-                {field.value}
-                {requiredFields[i] && <sup className="text-destructive">*</sup>}
-              </label>
-            </InlineInput>
-          );
-        }}
-        name={`queryParams.${i}.name`}
-      />
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <InlineInput {...field} placeholder="Value" className="peer" />
-          );
-        }}
-        name={`queryParams.${i}.value`}
-      />
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <button
-              type="button"
-              className={cn(
-                "hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible",
-                field.value.length === 0 && "opacity-0 pointer-events-none",
-              )}
-              onClick={() => field.onChange("")}
-            >
-              <XIcon size={16} />
-            </button>
-          );
-        }}
-        name={`queryParams.${i}.value`}
-      />
-
-      <div className="-mx-2 col-span-full border-b border-border"></div>
+  return (
+    <div className="">
+      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
+        <tbody>
+          {fields.map((field, i) => (
+            <tr key={field.id} className="hover:bg-accent/40">
+              <td className="text-center">
+                <Controller
+                  control={control}
+                  name={`queryParams.${i}.active`}
+                  render={({ field }) => (
+                    <input
+                      type="checkbox"
+                      id={`queryParams.${i}.active`}
+                      checked={field.value}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </td>
+              <td>
+                <Controller
+                  control={control}
+                  render={({ field }) => (
+                    <InlineInput asChild>
+                      <label
+                        className="flex items-center cursor-pointer"
+                        htmlFor={`queryParams.${i}.active`}
+                        title={requiredFields[i] ? "Required field" : undefined}
+                      >
+                        {field.value}
+                        {requiredFields[i] && (
+                          <sup className="text-destructive">*</sup>
+                        )}
+                      </label>
+                    </InlineInput>
+                  )}
+                  name={`queryParams.${i}.name`}
+                />
+              </td>
+              <td>
+                <div className="flex justify-between items-center">
+                  <Controller
+                    control={control}
+                    render={({ field }) => (
+                      <Input
+                        {...field}
+                        onChange={(e) => {
+                          field.onChange(e.target.value);
+                          if (e.target.value.length > 0) {
+                            form.setValue(`queryParams.${i}.active`, true);
+                          }
+                        }}
+                        placeholder="Enter value"
+                        className="w-full border-0 shadow-none text-xs font-mono"
+                      />
+                    )}
+                    name={`queryParams.${i}.value`}
+                  />
+                  <Controller
+                    control={control}
+                    render={({ field }) => (
+                      <Button
+                        size="icon"
+                        type="button"
+                        variant="ghost"
+                        aria-label="Clear value"
+                        className={cn(
+                          "ms-2",
+                          field.value.length === 0
+                            ? "opacity-0 pointer-events-none"
+                            : "opacity-100",
+                        )}
+                        title="Clear value"
+                        onClick={() => field.onChange("")}
+                      >
+                        <EraserIcon size={16} />
+                      </Button>
+                    )}
+                    name={`queryParams.${i}.value`}
+                  />
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
-  ));
+  );
 };

package/dist/lib/components/Input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/lib/components/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AAKnC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrC,OAAO,CACL,gBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,uUAAuU,EACvU,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC"}