zudoku 0.1.1-dev.30 → 0.1.1-dev.32

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

@@ -9,15 +9,17 @@ import {
 import { Card, CardContent } from "../../../ui/Card.js";
 import { Button } from "../../../ui/Button.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
-import { Fragment } from "react";
+import { Fragment, useMemo } from "react";
 import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
 import { ColorizedParam } from "../ColorizedParam.js";
 import { useMutation } from "@tanstack/react-query";
-import { useForm } from "react-hook-form";
+import { FormProvider, 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";
+import { PathParams } from "./PathParams.js";
+import { CirclePlayIcon, LoaderCircle, MonitorCheckIcon } from "lucide-react";
+import { createUrl } from "./createUrl.js";
+import { UrlDisplay } from "./UrlDisplay.js";
 
 function mimeTypeToLanguage(mimeType: string) {
   const mimeTypeMapping = {
@@ -36,6 +38,19 @@ function mimeTypeToLanguage(mimeType: string) {
   )?.[0][1];
 }
 
+const statusCodeMap: Record<number, string> = {
+  200: "OK",
+  201: "Created",
+  202: "Accepted",
+  204: "No Content",
+  400: "Bad Request",
+  401: "Unauthorized",
+  403: "Forbidden",
+  404: "Not Found",
+  405: "Method Not Allowed",
+  500: "Internal Server Error",
+};
+
 export type Header = {
   name: string;
   value: string;
@@ -43,8 +58,9 @@ export type Header = {
 export type QueryParam = {
   name: string;
   value: string;
+  active?: boolean;
 };
-export type UrlPart = {
+export type PathParam = {
   name: string;
   value: string;
 };
@@ -52,7 +68,7 @@ export type UrlPart = {
 export type PlaygroundForm = {
   body: string;
   queryParams: QueryParam[];
-  urlParts: UrlPart[];
+  pathParams: PathParam[];
   headers: Header[];
 };
 
@@ -60,63 +76,58 @@ const Playground = ({
   url,
   host,
   method,
-  defaultHeaders,
+  headers = [{ name: "", value: "" }],
+  queryParams = [],
+  pathParams = [],
 }: {
   host: string;
   url: string;
   method: string;
-  defaultHeaders?: Header[];
+  headers?: Header[];
+  queryParams?: QueryParam[];
+  pathParams?: PathParam[];
 }) => {
-  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: "" })),
-    },
-  });
-
+  const { register, control, handleSubmit, watch, ...form } =
+    useForm<PlaygroundForm>({
+      defaultValues: {
+        body: "",
+        queryParams,
+        headers,
+        pathParams,
+      },
+    });
   const formState = watch();
 
-  const x = useMutation({
+  const queryMutation = useMutation({
     mutationFn: async (data: PlaygroundForm) => {
-      const fullUrl =
-        host +
-        url
-          .split("/")
-          .map((v) =>
-            v.startsWith("{") && v.endsWith("}")
-              ? data.urlParts.find((part) => part.name === v.slice(1, -1))
-                  ?.value ?? v
-              : v,
-          )
-          .join("/");
-
-      const response = await fetch(fullUrl, {
+      const requestUrl = createUrl(host, url, data);
+      const start = performance.now();
+      const response = await fetch(requestUrl, {
         method: method.toUpperCase(),
         headers: Object.fromEntries(
-          data.urlParts
+          data.pathParams
             .filter((h) => h.name)
             .map((header) => [header.name, header.value]),
         ),
       });
 
+      const body = await response.text();
+
       return {
         status: response.status,
         headers: response.headers,
-        body: await response.text(),
+        size: body.length,
+        body,
+        time: performance.now() - start,
       };
     },
   });
 
-  const path = url.split("/").map((part) => (
+  const path = url.split("/").map((part, i, arr) => (
     <Fragment key={part}>
       {part.startsWith("{") && part.endsWith("}") ? (
         <ColorizedParam
-          name={part.slice(1, -1)}
+          name={part}
           backgroundOpacity="0"
           onClick={() => {
             console.log("asd");
@@ -124,148 +135,187 @@ const Playground = ({
           slug={part.slice(1, -1)}
         >
           {
-            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
+            formState.pathParams.find((p) => p.name === part.slice(1, -1))
+              ?.value
           }
         </ColorizedParam>
       ) : (
         part
       )}
-      {"/"}
+      {i < arr.length - 1 && "/"}
       <wbr />
     </Fragment>
   ));
 
-  const lang = mimeTypeToLanguage(x.data?.headers.get("Content-Type") ?? "");
+  const lang = mimeTypeToLanguage(
+    queryMutation.data?.headers.get("Content-Type") ?? "",
+  );
+
+  const headerEntries = Array.from(queryMutation.data?.headers.entries() ?? []);
+
+  console.log(
+    "QP lol",
+    formState.queryParams,
+    formState.queryParams.filter((p) => p.active),
+  );
+
+  const urlQueryParams = formState.queryParams
+    .filter((p) => p.active)
+    .map((p) => (
+      <Fragment key={p.name}>
+        {p.name}={p.value}
+        <wbr />
+      </Fragment>
+    ));
 
   return (
     <Dialog>
-      <DialogTrigger>Open</DialogTrigger>
+      <DialogTrigger asChild>
+        <CirclePlayIcon
+          className="cursor-pointer text-primary hover:text-primary/80"
+          size={16}
+        />
+      </DialogTrigger>
 
-      <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()}
+      <DialogContent className="max-w-screen-xl w-full h-5/6 overflow-auto p-0">
+        <FormProvider {...{ register, control, handleSubmit, watch, ...form }}>
+          <form
+            onSubmit={handleSubmit((data) => {
+              queryMutation.mutateAsync(data);
+            })}
+          >
+            <div className="grid grid-cols-2 text-sm h-full">
+              <div className="flex flex-col gap-4 p-8 bg-muted/50 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
+                <div className="flex gap-2 items-stretch">
+                  <div className="flex flex-1 items-center w-full border rounded-md border-border">
+                    <div className="border-r border-border p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
+                      {method.toUpperCase()}
+                    </div>
+                    <div className="p-2 font-mono text-xs">
+                      {path}
+                      {urlQueryParams.length > 0 ? "?" : ""}
+                      {urlQueryParams}
+                    </div>
+                  </div>
+                  <Button type="submit" className="h-auto flex gap-1">
+                    Send
+                  </Button>
+                </div>
+                <Tabs defaultValue="parameters">
+                  <TabsList>
+                    <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                    <TabsTrigger value="headers">
+                      Headers{" "}
+                      {formState.headers.length > 0 &&
+                        `(${formState.headers.length})`}
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="body"
+                      disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
+                        method.toUpperCase(),
+                      )}
+                    >
+                      Body
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="headers">
+                    <Headers
+                      control={control}
+                      register={register}
+                      headers={formState.headers}
+                    />
+                  </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>
-                        <div className="p-2 whitespace-nowrap overflow-scroll flex-1">
-                          {path}
+                      )}
+                      <PathParams control={control} register={register} />
+                      {queryParams.length > 0 && (
+                        <span className="font-semibold my-3 col-span-3">
+                          Query Parameters
+                        </span>
+                      )}
+                      <QueryParams control={control} />
+                    </div>
+                  </TabsContent>
+                  <TabsContent value="body">
+                    <textarea
+                      {...register("body")}
+                      className="border border-border w-full rounded p-2 bg-muted h-40"
+                    />
+                  </TabsContent>
+                </Tabs>
+              </div>
+              <div className="flex flex-col gap-4 p-8 bg-muted/70">
+                {queryMutation.error ? (
+                  <div>{queryMutation.error.message}</div>
+                ) : queryMutation.data ? (
+                  <div className="flex flex-col gap-2">
+                    <div className="flex gap-2">
+                      <div className="flex text-xs gap-6">
+                        <div>
+                          Status: {queryMutation.data.status}{" "}
+                          {statusCodeMap[queryMutation.data.status] ?? ""}
                         </div>
+                        <div>Time: {queryMutation.data.time.toFixed(0)}ms</div>
+                        <div>Size: {queryMutation.data.size} B</div>
                       </div>
-                      <Button type="submit">Send</Button>
                     </div>
-                  </CardContent>
-                  <Tabs defaultValue="parameters">
-                    <CardContent className="border-b border-border py-4">
+                    {/*<UrlDisplay host={host} path={url} />*/}
+                    <Tabs defaultValue="response">
                       <TabsList>
-                        <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                        <TabsTrigger value="response">Response</TabsTrigger>
                         <TabsTrigger value="headers">
-                          Headers ({formState.headers.length - 1})
-                        </TabsTrigger>
-                        <TabsTrigger
-                          value="body"
-                          disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
-                            method.toUpperCase(),
-                          )}
-                        >
-                          Body
+                          {headerEntries.length
+                            ? `Headers (${headerEntries.length})`
+                            : "No headers"}
                         </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 value="response">
+                        <Card className="shadow-none p-4">
+                          <SyntaxHighlight
+                            language={lang ?? "json"}
+                            noBackground
+                            className="overflow-x-auto "
+                            code={
+                              queryMutation.data?.body ?? JSON.stringify("")
+                            }
+                          />
+                        </Card>
                       </TabsContent>
-                      <TabsContent value="body">
-                        <textarea
-                          {...register("body")}
-                          className="border border-border w-full rounded p-2 bg-muted h-40"
-                        />
+                      <TabsContent value="headers">
+                        <Card className="grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4">
+                          <div className="font-semibold">Key</div>
+                          <div className="font-semibold">Value</div>
+                          {headerEntries.map(([key, value]) => (
+                            <Fragment key={key}>
+                              <div>{key}</div>
+                              <div>{value}</div>
+                            </Fragment>
+                          ))}
+                        </Card>
                       </TabsContent>
-                    </CardContent>
-                  </Tabs>
-                </Card>
-                <Card>
-                  <CardContent>
-                    <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="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."
-                        </>
+                    </Tabs>
+                  </div>
+                ) : (
+                  <div className="grid place-items-center h-full">
+                    <span className="text-[16px] font-semibold text-muted-foreground">
+                      {queryMutation.isPending ? (
+                        <LoaderCircle size={18} className="animate-spin" />
+                      ) : (
+                        "Send a request first to see the response here"
                       )}
-                      <SyntaxHighlight
-                        language={lang ?? "json"}
-                        noBackground
-                        copyable={false}
-                        className="overflow-x-auto "
-                        code={x.data?.body ?? JSON.stringify("")}
-                      />
-                    </div>
-                  </CardContent>
-                </Card>
+                    </span>
+                  </div>
+                )}
               </div>
-            </DialogDescription>
-          </DialogHeader>
-        </form>
+            </div>
+          </form>
+        </FormProvider>
       </DialogContent>
     </Dialog>
   );

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

@@ -2,78 +2,105 @@ import {
   Control,
   Controller,
   useFieldArray,
-  UseFormRegister,
+  useFormContext,
+  useWatch,
 } from "react-hook-form";
-import { TrashIcon } from "lucide-react";
+import { XIcon } from "lucide-react";
 import { InlineInput } from "./InlineInput.js";
-import { PlaygroundForm, QueryParam } from "./Playground.js";
+import { PlaygroundForm } from "./Playground.js";
 import { useEffect } from "react";
 
-export const QueryParams = ({
+const QueryParamActive = ({
+  i,
   control,
-  register,
-  queryParams,
 }: {
-  register: UseFormRegister<PlaygroundForm>;
+  i: number;
   control: Control<PlaygroundForm>;
-  queryParams: QueryParam[];
 }) => {
-  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
-    control,
-    name: "queryParams",
-  });
+  const value = useWatch({ control, name: `queryParams.${i}.value` });
+  const active = useWatch({ control, name: `queryParams.${i}.active` });
+  const form = useFormContext<PlaygroundForm>();
+  const dirty = form.formState.dirtyFields;
 
-  const queryCount = queryParams?.length;
-  const queryLastName = queryParams.at(-1)?.name;
-  const queryLastValue = queryParams.at(-1)?.value;
+  console.log("dirty fields", dirty);
 
   useEffect(() => {
-    // if (queryCount === 0) {
-    //   append({ name: "", value: "" });
-    // }
-    console.log(queryLastName, queryLastValue, queryCount);
-    if (queryLastName !== "" || queryLastValue !== "") {
-      console.log("appending");
-      append({ name: "", value: "" });
+    if (value) {
+      console.log(`queryParams.${i}.active`, active);
+      form.setValue(`queryParams.${i}.active`, true);
     }
-  }, [append, queryLastValue, queryLastName, queryCount]);
+  }, [value]);
 
   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`}
+    <Controller
+      name={`queryParams.${i}.active`}
+      render={({ field }) => {
+        return (
+          <input
+            type="checkbox"
+            id={`queryParams.${i}.active`}
+            {...field}
+            checked={field.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>
-      ))}
+export const QueryParams = ({
+  control,
+}: {
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "queryParams",
+  });
+
+  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"
+    >
+      <QueryParamActive i={i} control={control} />
+
+      <Controller
+        control={control}
+        render={({ field }) => {
+          return (
+            <div className="flex items-center px-2 bg-transparent h-6 font-mono text-xs m-2">
+              {field.value}
+            </div>
+          );
+        }}
+        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
+              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+              onClick={() => field.onChange("")}
+            >
+              <XIcon size={16} />
+            </button>
+          );
+        }}
+        name={`queryParams.${i}.value`}
+      />
+
+      <div className="-mx-2 col-span-full border-b border-border"></div>
     </div>
-  );
+  ));
 };

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

@@ -0,0 +1,32 @@
+import { useFormContext } from "react-hook-form";
+import type { PlaygroundForm } from "./Playground.js";
+
+export const UrlDisplay = ({ host, path }: { host: string; path: string }) => {
+  const { watch } = useFormContext<PlaygroundForm>();
+  const data = watch();
+  const url = new URL(
+    host +
+      path
+        .split("/")
+        .map((v) =>
+          v.startsWith("{") && v.endsWith("}")
+            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
+                ?.value ?? v
+            : v,
+        )
+        .join("/"),
+  );
+
+  data.queryParams.forEach((param) => {
+    if (!param.value) {
+      return;
+    }
+    url.searchParams.set(param.name, param.value);
+  });
+
+  return (
+    <div className="overflow-auto font-mono whitespace-nowrap">
+      {url.toString()}
+    </div>
+  );
+};

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -0,0 +1,22 @@
+import { PlaygroundForm } from "./Playground.js";
+
+export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
+  const url = new URL(
+    host +
+      path
+        .split("/")
+        .map((v) =>
+          v.startsWith("{") && v.endsWith("}")
+            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
+                ?.value ?? v
+            : v,
+        )
+        .join("/"),
+  );
+
+  data.queryParams.forEach((param) => {
+    url.searchParams.set(param.name, param.value);
+  });
+
+  return url;
+};