zudoku 0.26.0 → 0.27.0

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

@@ -1,9 +1,49 @@
 import { XIcon } from "lucide-react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { useRef } from "react";
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  useFormContext,
+  UseFormRegister,
+} from "react-hook-form";
+import { Card } from "zudoku/ui/Card.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
+import ParamsGrid from "./ParamsGrid.js";
 import { type PlaygroundForm } from "./Playground.js";
 
+const headerOptions = Object.freeze([
+  "Accept",
+  "Accept-Encoding",
+  "Accept-Language",
+  "Authorization",
+  "Cache-Control",
+  "Connection",
+  "Content-Disposition",
+  "Content-Encoding",
+  "Content-Language",
+  "Content-Length",
+  "Content-Range",
+  "Content-Security-Policy",
+  "Content-Type",
+  "Cookie",
+  "Date",
+  "ETag",
+  "Expires",
+  "Host",
+  "If-Modified-Since",
+  "Location",
+  "Origin",
+  "Pragma",
+  "Referer",
+  "Set-Cookie",
+  "User-Agent",
+  "X-Requested-With",
+]);
+
 export const Headers = ({
   control,
   register,
@@ -15,53 +55,110 @@ export const Headers = ({
     control,
     name: "headers",
   });
+  const { setValue } = useFormContext<PlaygroundForm>();
+  const valueRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const nameRefs = useRef<Array<HTMLInputElement | null>>([]);
+
+  const addNewHeader = () => {
+    append({
+      name: "",
+      value: "",
+      active: false,
+    } as PlaygroundForm["headers"][number]);
+  };
+
+  const handleHeaderEnter = (index: number) => {
+    valueRefs.current[index]?.focus();
+  };
+
+  const handleValueEnter = (index: number) => {
+    addNewHeader();
+    requestAnimationFrame(() => nameRefs.current[index + 1]?.focus());
+  };
 
   return (
     <div className="flex flex-col gap-2">
-      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
-        <tbody>
+      <Card className="overflow-hidden">
+        <ParamsGrid>
           {fields.map((header, i) => (
-            <tr
-              key={header.id}
-              className="group has-[:focus]:bg-muted/50 hover:bg-muted/50"
-            >
-              <td className="flex gap-2 items-center">
-                <Input
-                  {...register(`headers.${i}.name`)}
-                  placeholder="Name"
-                  className="border-0 shadow-none text-xs font-mono"
-                  autoComplete="off"
+            <div key={i} className="group grid col-span-full grid-cols-subgrid">
+              <div className="flex items-center gap-2 ">
+                <Controller
+                  control={control}
+                  name={`headers.${i}.active`}
+                  render={({ field }) => (
+                    <Checkbox
+                      variant="outline"
+                      id={`headers.${i}.active`}
+                      checked={field.value}
+                      onCheckedChange={(checked) => {
+                        field.onChange(checked);
+                      }}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`headers.${i}.name`}
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...field}
+                      placeholder="Name"
+                      className="border-0 shadow-none bg-transparent text-xs font-mono"
+                      options={headerOptions}
+                      onEnterPress={() => handleHeaderEnter(i)}
+                      onChange={(e) => {
+                        field.onChange(e);
+                        setValue(`headers.${i}.active`, true);
+                      }}
+                      ref={(el) => {
+                        nameRefs.current[i] = el;
+                      }}
+                    />
+                  )}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Controller
+                  control={control}
+                  name={`headers.${i}.value`}
+                  render={({ field }) => (
+                    <Input
+                      placeholder="Value"
+                      className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                      {...field}
+                      ref={(el) => {
+                        valueRefs.current[i] = el;
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && e.currentTarget.value.trim()) {
+                          handleValueEnter(i);
+                        }
+                      }}
+                      autoComplete="off"
+                    />
+                  )}
                 />
-              </td>
-              <td>
-                <div className="flex items-center gap-2">
-                  <Input
-                    placeholder={"Value"}
-                    className="border-0 shadow-none text-xs font-mono"
-                    {...register(`headers.${i}.value`)}
-                    autoComplete="off"
-                  />
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="text-muted-foreground opacity-0 group-hover:opacity-100"
-                    onClick={() => {
-                      remove(i);
-                    }}
-                    type="button"
-                  >
-                    <XIcon size={16} />
-                  </Button>
-                </div>
-              </td>
-            </tr>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
+                  onClick={() => {
+                    remove(i);
+                  }}
+                  type="button"
+                >
+                  <XIcon size={16} />
+                </Button>
+              </div>
+            </div>
           ))}
-        </tbody>
-      </table>
+        </ParamsGrid>
+      </Card>
       <div className="text-end">
         <Button
           className=""
-          onClick={() => append({ name: "", value: "" })}
+          onClick={addNewHeader}
           type="button"
           variant="secondary"
         >

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

@@ -0,0 +1,8 @@
+import createVariantComponent from "../../../util/createVariantComponent.js";
+
+const ParamsGrid = createVariantComponent(
+  "div",
+  "hover:bg-accent/40 grid grid-cols-[2fr_3fr] gap-2 items-center px-3",
+);
+
+export default ParamsGrid;

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

@@ -1,31 +1,10 @@
-import { EraserIcon } from "lucide-react";
 import { Control, Controller, useFieldArray } from "react-hook-form";
 import { Card } from "zudoku/ui/Card.js";
-import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
-import { cn } from "../../../util/cn.js";
-import { ColorizedParam, useParamColor } from "../ColorizedParam.js";
+import { ColorizedParam } from "../ColorizedParam.js";
+import ParamsGrid from "./ParamsGrid.js";
 import type { PlaygroundForm } from "./Playground.js";
 
-const PathParamLabel = ({ name }: { name: string }) => {
-  const color = useParamColor(name);
-
-  return (
-    <div className="flex items-center">
-      <div
-        className="w-2 h-2 rounded-full"
-        style={{ backgroundColor: `hsl(${color})` }}
-      />
-
-      <ColorizedParam
-        slug={name}
-        name={name}
-        className="font-mono text-xs m-2 px-1"
-      />
-    </div>
-  );
-};
-
 export const PathParams = ({
   control,
 }: {
@@ -38,59 +17,40 @@ export const PathParams = ({
 
   return (
     <Card className="rounded-lg">
-      <table className="w-full">
-        <tbody>
-          {fields.map((part, i) => (
-            <tr key={part.id} className="hover:bg-accent/40">
-              <td className="w-5/12">
-                <Controller
-                  control={control}
-                  name={`pathParams.${i}.value`}
-                  render={() => <PathParamLabel name={part.name} />}
-                />
-              </td>
-              <td className="w-7/12">
-                <div className="flex justify-between items-center">
-                  <Controller
-                    control={control}
-                    name={`pathParams.${i}.value`}
-                    render={({ field }) => (
-                      <Input
-                        {...field}
-                        required
-                        placeholder="Enter value"
-                        className="w-full border-0 shadow-none text-xs font-mono hover:bg-accent"
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name={`pathParams.${i}.value`}
-                    render={({ field }) => (
-                      <Button
-                        size="icon"
-                        type="button"
-                        variant="ghost"
-                        aria-label="Clear value"
-                        className={cn(
-                          "ms-2 mr-1",
-                          field.value.length === 0
-                            ? "opacity-0 pointer-events-none"
-                            : "opacity-100",
-                        )}
-                        title="Clear value"
-                        onClick={() => field.onChange("")}
-                      >
-                        <EraserIcon size={16} />
-                      </Button>
-                    )}
+      <ParamsGrid>
+        {fields.map((part, i) => (
+          <>
+            <Controller
+              control={control}
+              name={`pathParams.${i}.value`}
+              render={() => (
+                <div>
+                  <ColorizedParam
+                    slug={part.name}
+                    name={part.name}
+                    className="font-mono text-xs px-2"
                   />
                 </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+              )}
+            />
+
+            <div className="flex justify-between items-center">
+              <Controller
+                control={control}
+                name={`pathParams.${i}.value`}
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    required
+                    placeholder="Enter value"
+                    className="w-full border-0 shadow-none text-xs font-mono hover:bg-accent"
+                  />
+                )}
+              />
+            </div>
+          </>
+        ))}
+      </ParamsGrid>
     </Card>
   );
 };