zudoku 0.1.1-dev.29 → 0.1.1-dev.30

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

@@ -9,45 +9,51 @@ import {
 import { Card, CardContent } from "../../../ui/Card.js";
 import { Button } from "../../../ui/Button.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
-import { Header } from "har-format";
-import {
-  Fragment,
-  InputHTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { TrashIcon } from "lucide-react";
-import createVariantComponent from "../../../util/createVariantComponent.js";
+import { Fragment } from "react";
 import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
-import {
-  ColorizedParam,
-  DATA_ATTR,
-  usePastellizedColor,
-} from "../ColorizedParam.js";
-import { cn } from "../../../util/cn.js";
+import { ColorizedParam } from "../ColorizedParam.js";
 import { useMutation } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { Headers } from "./Headers.js";
+import { QueryParams } from "./QueryParams.js";
+import { UrlParts } from "./UrlParts.js";
+import { LoaderCircle } from "lucide-react";
 
-const InlineInput = createVariantComponent(
-  "input",
-  "px-2 bg-transparent h-8 font-mono text-xs m-2",
-);
+function mimeTypeToLanguage(mimeType: string) {
+  const mimeTypeMapping = {
+    "application/json": "json",
+    "text/json": "json",
+    "text/html": "html",
+    "text/css": "css",
+    "text/javascript": "javascript",
+    "application/xml": "xml",
+    "application/xhtml+xml": "xhtml",
+    "text/plain": "plain",
+  } as const;
 
-const ParameterValue = ({
-  part,
-  className,
-  ...props
-}: {
-  part: string;
-} & InputHTMLAttributes<HTMLInputElement>) => {
-  const color = usePastellizedColor(part);
-  return (
-    <InlineInput
-      {...props}
-      className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
-      style={{ color: `hsl(${color})` }}
-    />
-  );
+  return Object.entries(mimeTypeMapping).find(([mime]) =>
+    mimeType.includes(mime),
+  )?.[0][1];
+}
+
+export type Header = {
+  name: string;
+  value: string;
+};
+export type QueryParam = {
+  name: string;
+  value: string;
+};
+export type UrlPart = {
+  name: string;
+  value: string;
+};
+
+export type PlaygroundForm = {
+  body: string;
+  queryParams: QueryParam[];
+  urlParts: UrlPart[];
+  headers: Header[];
 };
 
 const Playground = ({
@@ -61,41 +67,38 @@ const Playground = ({
   method: string;
   defaultHeaders?: Header[];
 }) => {
-  const [headers, setHeaders] = useState<Header[]>(
-    defaultHeaders ?? [{ name: "", value: "" }],
-  );
-  const [urlParts, setUrlParts] = useState<Header[]>(
-    url
-      .split("/")
-      .filter((part) => part.startsWith("{") && part.endsWith("}"))
-      .map((part) => ({ name: part, value: "" })),
-  );
+  const { register, control, handleSubmit, watch } = useForm<PlaygroundForm>({
+    defaultValues: {
+      body: "",
+      queryParams: [{ name: "", value: "" }],
+      headers: defaultHeaders ?? [{ name: "", value: "" }],
+      urlParts: url
+        .split("/")
+        .filter((part) => part.startsWith("{") && part.endsWith("}"))
+        .map((part) => ({ name: part.slice(1, -1), value: "" })),
+    },
+  });
 
-  useEffect(() => {
-    const lastHeader = headers.at(-1);
-    if (lastHeader?.value !== "" || lastHeader?.name !== "") {
-      setHeaders([...headers, { name: "", value: "" }]);
-    }
-  }, [headers]);
+  const formState = watch();
 
   const x = useMutation({
-    mutationFn: async () => {
+    mutationFn: async (data: PlaygroundForm) => {
       const fullUrl =
         host +
         url
           .split("/")
-          .map((v) => urlParts.find((part) => part.name === v)?.value ?? v)
+          .map((v) =>
+            v.startsWith("{") && v.endsWith("}")
+              ? data.urlParts.find((part) => part.name === v.slice(1, -1))
+                  ?.value ?? v
+              : v,
+          )
           .join("/");
-      console.log(
-        fullUrl,
-        Object.fromEntries(
-          headers.map((header) => [header.name, header.value]),
-        ),
-      );
+
       const response = await fetch(fullUrl, {
-        // method,
+        method: method.toUpperCase(),
         headers: Object.fromEntries(
-          headers
+          data.urlParts
             .filter((h) => h.name)
             .map((header) => [header.name, header.value]),
         ),
@@ -103,6 +106,7 @@ const Playground = ({
 
       return {
         status: response.status,
+        headers: response.headers,
         body: await response.text(),
       };
     },
@@ -119,188 +123,149 @@ const Playground = ({
           }}
           slug={part.slice(1, -1)}
         >
-          {urlParts.find((p) => p.name === part)?.value}
+          {
+            formState.urlParts.find((p) => {
+              console.log(
+                p.name,
+                part.slice(1, -1),
+                p.name === part.slice(1, -1),
+                p.value,
+              );
+              return p.name === part.slice(1, -1);
+            })?.value
+          }
         </ColorizedParam>
       ) : (
         part
       )}
-      /
+      {"/"}
       <wbr />
     </Fragment>
   ));
 
+  const lang = mimeTypeToLanguage(x.data?.headers.get("Content-Type") ?? "");
+
   return (
     <Dialog>
       <DialogTrigger>Open</DialogTrigger>
-      <DialogContent className="max-w-screen-xl">
-        <DialogHeader>
-          <DialogTitle>API Playground</DialogTitle>
-          <DialogDescription>
-            <div className="grid grid-cols-2 gap-2">
-              <Card>
-                <CardContent className="border-b border-border pt-4">
-                  <div>URL</div>
-                  <div className="flex gap-2">
-                    <div className="border rounded border-border p-1.5 w-full">
-                      {path}
+
+      <DialogContent className="max-w-screen-xl w-full h-5/6">
+        <form
+          onSubmit={handleSubmit((data) => {
+            x.mutateAsync(data);
+          })}
+        >
+          <DialogHeader>
+            <DialogTitle className="mb-4">API Playground</DialogTitle>
+            <DialogDescription>
+              <div className="grid grid-cols-2 gap-2">
+                <Card>
+                  <CardContent className="border-b border-border pt-4">
+                    <div className="font-bold mb-1">URL</div>
+                    <div className="flex gap-2 items-center">
+                      <div className="border rounded border-border flex justify-stretch w-full">
+                        <div className="border-r border-border p-2 bg-muted font-mono">
+                          {method.toUpperCase()}
+                        </div>
+                        <div className="p-2 whitespace-nowrap overflow-scroll flex-1">
+                          {path}
+                        </div>
+                      </div>
+                      <Button type="submit">Send</Button>
                     </div>
-                    <Button onClick={() => x.mutateAsync()}>Send</Button>
-                  </div>
-                </CardContent>
-                <Tabs defaultValue="headers">
-                  <CardContent className="border-b border-border py-4">
-                    <TabsList>
-                      <TabsTrigger value="headers">
-                        Headers ({headers.length})
-                      </TabsTrigger>
-                      <TabsTrigger value="parameters">Parameters</TabsTrigger>
-                      <TabsTrigger value="auth">Auth</TabsTrigger>
-                    </TabsList>
                   </CardContent>
+                  <Tabs defaultValue="parameters">
+                    <CardContent className="border-b border-border py-4">
+                      <TabsList>
+                        <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                        <TabsTrigger value="headers">
+                          Headers ({formState.headers.length - 1})
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="body"
+                          disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
+                            method.toUpperCase(),
+                          )}
+                        >
+                          Body
+                        </TabsTrigger>
+                      </TabsList>
+                    </CardContent>
+                    <CardContent className="overflow-auto h-full">
+                      <TabsContent value="headers">
+                        <Headers
+                          control={control}
+                          register={register}
+                          headers={formState.headers}
+                        />
+                      </TabsContent>
+                      <TabsContent value="parameters">
+                        <UrlParts control={control} register={register} />
+                        Query Parameters
+                        <QueryParams
+                          control={control}
+                          queryParams={formState.queryParams}
+                          register={register}
+                        />
+                      </TabsContent>
+                      <TabsContent value="auth">
+                        <CardContent>
+                          {url
+                            .split("/")
+                            .map((part, i) =>
+                              part.startsWith("{") && part.endsWith("}")
+                                ? formState.urlParts[i]
+                                : part,
+                            )
+                            .join("/")}
+                        </CardContent>
+                        Change your password here.
+                      </TabsContent>
+                      <TabsContent value="body">
+                        <textarea
+                          {...register("body")}
+                          className="border border-border w-full rounded p-2 bg-muted h-40"
+                        />
+                      </TabsContent>
+                    </CardContent>
+                  </Tabs>
+                </Card>
+                <Card>
                   <CardContent>
-                    <TabsContent value="headers">
-                      <div className="grid grid-cols-[1fr_1fr_auto]">
-                        {headers.map((header, i) => (
-                          <div
-                            key={i}
-                            className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
-                          >
-                            {/*<input type="checkbox" />*/}
-                            <InlineInput
-                              onChange={(e) =>
-                                setHeaders((headers) => {
-                                  const newHeaders = [...headers];
-                                  newHeaders[i] = {
-                                    ...headers[i],
-                                    name: e.target.value,
-                                  };
-                                  return newHeaders;
-                                })
-                              }
-                              value={header.name}
-                              placeholder={"Name"}
-                              className="peer"
-                            />
-                            <InlineInput
-                              onChange={(e) =>
-                                setHeaders((headers) => {
-                                  const newHeaders = [...headers];
-                                  newHeaders[i] = {
-                                    name: "",
-                                    ...headers.at(i),
-                                    value: e.target.value,
-                                  };
-                                  return newHeaders;
-                                })
-                              }
-                              value={header.value}
-                              placeholder={"Value"}
-                              className="peer"
-                            />
-                            <button
-                              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
-                              onClick={() => {
-                                setHeaders((headers) =>
-                                  [...headers].toSpliced(i, 1),
-                                );
-                              }}
-                            >
-                              <TrashIcon size={16} />
-                            </button>
-                            <div className="col-span-full border-b  border-border"></div>
-                          </div>
-                        ))}
-                      </div>
-                    </TabsContent>
-                    <TabsContent value="parameters">
-                      Parameters
-                      <div className="grid grid-cols-[1fr_1fr_auto]">
-                        {urlParts.map(({ name, value }, i) => (
-                          <div
-                            key={i}
-                            className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
-                          >
-                            {/*<input type="checkbox" />*/}
-                            <InlineInput
-                              onChange={(e) =>
-                                setHeaders((headers) => {
-                                  const newHeaders = [...headers];
-                                  newHeaders[i] = {
-                                    ...headers[i],
-                                    name: e.target.value,
-                                  };
-                                  return newHeaders;
-                                })
-                              }
-                              value={name.slice(1, -1)}
-                              disabled
-                              placeholder={"Name"}
-                              className="peer"
-                            />
-                            <ParameterValue
-                              part={name.slice(1, -1)}
-                              onChange={(e) =>
-                                setUrlParts((parts) => {
-                                  const newParts = [...parts];
-                                  newParts[i] = {
-                                    name: "",
-                                    ...parts.at(i),
-                                    value: e.target.value,
-                                  };
-                                  return newParts;
-                                })
-                              }
-                              {...{ [DATA_ATTR]: name.slice(1, -1) }}
-                              value={value}
-                              placeholder={"Value"}
-                              className="peer"
-                            />
+                    <div className="mt-2 font-mono gap-2 flex">
+                      {method.toUpperCase()} {x.data?.status}{" "}
+                      {url
+                        .split("/")
+                        .map((v) =>
+                          v.startsWith("{") && v.endsWith("}")
+                            ? formState.urlParts.find((part) => part.name === v)
+                                ?.value ?? v
+                            : v,
+                        )
+                        .join("/")}
+                    </div>
 
-                            <div className="col-span-full border-b border-border"></div>
-                          </div>
-                        ))}
-                      </div>
-                    </TabsContent>
-                    <TabsContent value="auth">
-                      <CardContent>
-                        {url
-                          .split("/")
-                          .map((part, i) =>
-                            part.startsWith("{") && part.endsWith("}")
-                              ? urlParts[i]
-                              : part,
-                          )
-                          .join("/")}
-                      </CardContent>
-                      Change your password here.
-                    </TabsContent>
+                    <div className="w-full overflow-auto max-h-80 rounded-xl border border-border p-4 dark:!bg-foreground/10 dark:border-transparent">
+                      {x.isPending && (
+                        <>
+                          <LoaderCircle size={18} className="animate-spins" /> a
+                          request to see the response."
+                        </>
+                      )}
+                      <SyntaxHighlight
+                        language={lang ?? "json"}
+                        noBackground
+                        copyable={false}
+                        className="overflow-x-auto "
+                        code={x.data?.body ?? JSON.stringify("")}
+                      />
+                    </div>
                   </CardContent>
-                </Tabs>
-              </Card>
-              <Card>
-                <CardContent>
-                  {method.toUpperCase()}
-                  {url
-                    .split("/")
-                    .map((v) =>
-                      v.startsWith("{") && v.endsWith("}")
-                        ? urlParts.find((part) => part.name === v)?.value ?? v
-                        : v,
-                    )
-                    .join("/")}
-                  <SyntaxHighlight
-                    language="json"
-                    noBackground
-                    copyable={false}
-                    className="text-xs"
-                    code={x.data?.body ?? JSON.stringify("")}
-                  />
-                </CardContent>
-                {x.data?.status}
-              </Card>
-            </div>
-          </DialogDescription>
-        </DialogHeader>
+                </Card>
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+        </form>
       </DialogContent>
     </Dialog>
   );

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

@@ -0,0 +1,79 @@
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  UseFormRegister,
+} from "react-hook-form";
+import { TrashIcon } from "lucide-react";
+import { InlineInput } from "./InlineInput.js";
+import { PlaygroundForm, QueryParam } from "./Playground.js";
+import { useEffect } from "react";
+
+export const QueryParams = ({
+  control,
+  register,
+  queryParams,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+  queryParams: QueryParam[];
+}) => {
+  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "queryParams",
+  });
+
+  const queryCount = queryParams?.length;
+  const queryLastName = queryParams.at(-1)?.name;
+  const queryLastValue = queryParams.at(-1)?.value;
+
+  useEffect(() => {
+    // if (queryCount === 0) {
+    //   append({ name: "", value: "" });
+    // }
+    console.log(queryLastName, queryLastValue, queryCount);
+    if (queryLastName !== "" || queryLastValue !== "") {
+      console.log("appending");
+      append({ name: "", value: "" });
+    }
+  }, [append, queryLastValue, queryLastName, queryCount]);
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto]">
+      {fields.map((field, i) => (
+        <div
+          key={field.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"
+        >
+          {field.id}
+          <Controller
+            control={control}
+            render={({ field }) => {
+              return (
+                <InlineInput {...field} placeholder="Name" className="peer" />
+              );
+            }}
+            name={`queryParams.${i}.name`}
+          />
+          <Controller
+            control={control}
+            render={({ field }) => {
+              return (
+                <InlineInput {...field} placeholder="Value" className="peer" />
+              );
+            }}
+            name={`queryParams.${i}.value`}
+          />
+
+          <button
+            className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+            onClick={() => remove(i)}
+          >
+            <TrashIcon size={16} />
+          </button>
+          <div className="col-span-full border-b  border-border"></div>
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { InlineInput } from "./InlineInput.js";
+import { PlaygroundForm } from "./Playground.js";
+import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
+import { forwardRef, InputHTMLAttributes } from "react";
+import { cn } from "../../../util/cn.js";
+
+type ParameterValueProps = {
+  part: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
+  ({ 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 UrlParts = ({
+  control,
+  register,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "urlParts",
+  });
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto]">
+      {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(`urlParts.${i}.name`)}
+            disabled
+            placeholder="Name"
+            className="peer"
+          />
+          <ParameterValue
+            {...register(`urlParts.${i}.value`)}
+            part={part.name}
+            {...{ [DATA_ATTR]: part.name }}
+            placeholder="Value"
+            className="peer"
+          />
+
+          <div className="col-span-full border-b border-border"></div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/lib/util/createVariantComponent.tsx

@@ -12,15 +12,17 @@ const createVariantComponent = <
   cvx: ClassValue | C,
   // variantProps: Array<keyof VariantProps<C>> = [],
 ) => {
-  const MyVariant = ({
-    className,
-    ...props
-  }: JSX.IntrinsicElements[E] & { className?: ClassValue }) =>
+  const MyVariant = React.forwardRef<
+    HTMLElement,
+    JSX.IntrinsicElements[E] & { className?: ClassValue }
+  >(({ className, ...props }, ref) =>
     React.createElement(tag, {
       ...props,
+      ref,
       className:
         typeof cvx === "function" ? cvx({ className }) : cn(cvx, className),
-    });
+    }),
+  );
 
   MyVariant.displayName = `VariantComponent(${tag})`;