zudoku 0.1.1-dev.31 → 0.1.1-dev.33

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

@@ -1,8 +1,8 @@
 import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
-import { TrashIcon } from "lucide-react";
+import { XIcon } from "lucide-react";
 import { InlineInput } from "./InlineInput.js";
 import type { PlaygroundForm, Header } from "./Playground.js";
-import { useEffect } from "react";
+import { Button } from "../../../ui/Button.js";
 
 export const Headers = ({
   control,
@@ -17,20 +17,6 @@ export const Headers = ({
     control,
     name: "headers",
   });
-
-  const headersCount = headers.length;
-  const headersLastName = headers.at(-1)?.name;
-  const headersValue = headers.at(-1)?.value;
-
-  useEffect(() => {
-    if (headersCount === 0) {
-      append({ name: "", value: "" });
-    }
-    if (headersLastName !== "" || headersValue !== "") {
-      append({ name: "", value: "" });
-    }
-  }, [append, headersCount, headersLastName, headersValue]);
-
   return (
     <div className="grid grid-cols-[1fr_1fr_auto]">
       {fields.map((header, i) => (
@@ -38,29 +24,37 @@ export const Headers = ({
           key={header.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"
         >
-          {/*<input type="checkbox" />*/}
           <InlineInput
             {...register(`headers.${i}.name`)}
             placeholder="Name"
             className="peer"
+            autoComplete="off"
           />
           <InlineInput
             placeholder={"Value"}
             className="peer"
             {...register(`headers.${i}.value`)}
+            autoComplete="off"
           />
           <button
             className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
             onClick={() => {
               remove(i);
             }}
-            disabled={fields.length === 1}
+            type="button"
           >
-            <TrashIcon size={16} />
+            <XIcon size={16} />
           </button>
-          <div className="col-span-full border-b  border-border"></div>
+          <div className="col-span-full border-b border-border"></div>
         </div>
       ))}
+      <Button
+        className="col-span-full mt-4"
+        onClick={() => append({ name: "", value: "" })}
+        type="button"
+      >
+        Add header
+      </Button>
     </div>
   );
 };

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

@@ -2,5 +2,5 @@ import createVariantComponent from "../../../util/createVariantComponent.js";
 
 export const InlineInput = createVariantComponent(
   "input",
-  "px-2 bg-transparent h-8 font-mono text-xs m-2",
+  "px-2 bg-transparent h-6 font-mono text-xs m-2",
 );

package/src/lib/plugins/openapi/playground/{UrlParts.tsx → PathParams.tsx}

@@ -26,7 +26,7 @@ const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
   },
 );
 
-export const UrlParts = ({
+export const PathParams = ({
   control,
   register,
 }: {
@@ -35,33 +35,29 @@ export const UrlParts = ({
 }) => {
   const { fields } = useFieldArray<PlaygroundForm>({
     control,
-    name: "urlParts",
+    name: "pathParams",
   });
 
-  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"
-          />
+  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>
-      ))}
+      <div className="col-span-full border-b border-border"></div>
     </div>
-  );
+  ));
 };

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

@@ -9,15 +9,18 @@ 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";
+import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
 
 function mimeTypeToLanguage(mimeType: string) {
   const mimeTypeMapping = {
@@ -36,6 +39,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 +59,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 +69,7 @@ export type UrlPart = {
 export type PlaygroundForm = {
   body: string;
   queryParams: QueryParam[];
-  urlParts: UrlPart[];
+  pathParams: PathParam[];
   headers: Header[];
 };
 
@@ -60,63 +77,61 @@ const Playground = ({
   url,
   host,
   method,
-  defaultHeaders,
+  headers = [{ name: "", value: "" }],
+  queryParams = [],
+  pathParams = [],
+  hasParams,
 }: {
   host: string;
   url: string;
   method: string;
-  defaultHeaders?: Header[];
+  headers?: Header[];
+  queryParams?: QueryParam[];
+  pathParams?: PathParam[];
+  hasParams: boolean;
 }) => {
-  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 identities = useApiIdentities();
 
-  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 +139,183 @@ 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() ?? []);
+
+  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={hasParams ? "parameters" : "headers"}>
+                  <TabsList>
+                    {hasParams && (
+                      <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>
   );