zudoku 0.0.0-feat-bundled-types.71f1034 → 0.0.0-feat-openapi-docs-redesign.dab3fc6a

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

@@ -1,8 +1,15 @@
 import { useNProgress } from "@tanem/react-nprogress";
 import { useMutation } from "@tanstack/react-query";
-import { Fragment, useEffect, useRef, useState, useTransition } from "react";
+import {
+  CheckIcon,
+  CopyIcon,
+  IdCardLanyardIcon,
+  ShapesIcon,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { Button } from "zudoku/ui/Button.js";
+import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
 import {
   Select,
   SelectContent,
@@ -10,13 +17,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+import { TooltipProvider } from "zudoku/ui/Tooltip.js";
 import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
-import { PathRenderer } from "../../../components/PathRenderer.js";
+import { useHotkey } from "../../../hooks/useHotkey.js";
+import { cn } from "../../../util/cn.js";
+import { useCopyToClipboard } from "../../../util/useCopyToClipboard.js";
 import { useLatest } from "../../../util/useLatest.js";
-import { ColorizedParam } from "../ColorizedParam.js";
-import { type Content } from "../SidecarExamples.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
 import { useSelectedServer } from "../state.js";
 import BodyPanel from "./BodyPanel.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "./CollapsibleHeader.js";
 import { createUrl } from "./createUrl.js";
 import { extractFileName, isBinaryContentType } from "./fileUtils.js";
 import { Headers } from "./Headers.js";
@@ -24,8 +37,10 @@ import { IdentityDialog } from "./IdentityDialog.js";
 import IdentitySelector from "./IdentitySelector.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
-import { useIdentityStore } from "./rememberedIdentity.js";
 import RequestLoginDialog from "./RequestLoginDialog.js";
+import { useIdentityStore } from "./rememberedIdentity.js";
+import { UrlPath } from "./request-panel/UrlPath.js";
+import { UrlQueryParams } from "./request-panel/UrlQueryParams.js";
 import { ResultPanel } from "./result-panel/ResultPanel.js";
 import { useRememberSkipLoginDialog } from "./useRememberSkipLoginDialog.js";
 
@@ -57,16 +72,20 @@ export type PathParam = {
 
 export type PlaygroundForm = {
   body: string;
-  queryParams: Array<{
+  bodyMode?: "text" | "file" | "multipart";
+  file?: File | null;
+  multipartFormFields: Array<{
     name: string;
-    value: string;
+    value: File | string;
     active: boolean;
-    enum?: string[];
   }>;
-  pathParams: Array<{
+  queryParams: Array<{
     name: string;
     value: string;
+    active: boolean;
+    enum?: string[];
   }>;
+  pathParams: Array<{ name: string; value: string }>;
   headers: Array<{
     name: string;
     value: string;
@@ -102,7 +121,7 @@ export type PlaygroundContentProps = {
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
   defaultBody?: string;
-  examples?: Content;
+  examples?: MediaTypeObject[];
   requiresLogin?: boolean;
   onLogin?: () => void;
   onSignUp?: () => void;
@@ -130,14 +149,29 @@ export const Playground = ({
   const { setRememberedIdentity, getRememberedIdentity } = useIdentityStore();
   const [, startTransition] = useTransition();
   const { skipLogin, setSkipLogin } = useRememberSkipLoginDialog();
+  const [isLoginDialogDismissed, setIsLoginDialogDismissed] = useState(false);
   const [showLongRunningWarning, setShowLongRunningWarning] = useState(false);
   const abortControllerRef = useRef<AbortController | undefined>(undefined);
   const latestSetRememberedIdentity = useLatest(setRememberedIdentity);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const { label: hotkeyLabel } = useHotkey("meta+enter", () => {
+    formRef.current?.requestSubmit();
+  });
+
+  const pathParamOrder =
+    url.match(/\{([^}]+)\}/g)?.map((match) => match.slice(1, -1)) ?? [];
+  const sortedPathParams = [...pathParams].sort(
+    (a, b) => pathParamOrder.indexOf(a.name) - pathParamOrder.indexOf(b.name),
+  );
 
   const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
         body: defaultBody,
+        bodyMode: "text",
+        file: null,
+        multipartFormFields: [],
         queryParams:
           queryParams.length > 0
             ? queryParams.map((param) => ({
@@ -146,15 +180,8 @@ export const Playground = ({
                 active: param.defaultActive ?? false,
                 enum: param.enum ?? [],
               }))
-            : [
-                {
-                  name: "",
-                  value: "",
-                  active: false,
-                  enum: [],
-                },
-              ],
-        pathParams: pathParams.map((param) => ({
+            : [{ name: "", value: "", active: false, enum: [] }],
+        pathParams: sortedPathParams.map((param) => ({
           name: param.name,
           value: param.defaultValue ?? "",
         })),
@@ -165,45 +192,62 @@ export const Playground = ({
                 value: header.defaultValue ?? "",
                 active: header.defaultActive ?? false,
               }))
-            : [
-                {
-                  name: "",
-                  value: "",
-                  active: false,
-                },
-              ],
+            : [{ name: "", value: "", active: false }],
         identity: getRememberedIdentity([
           NO_IDENTITY,
           ...(identities.data?.map((i) => i.id) ?? []),
         ]),
       },
     });
-  const formState = watch();
+  const identity = watch("identity");
+
+  const authorizationFields = useMemo(
+    () => identities.data?.find((i) => i.id === identity)?.authorizationFields,
+    [identities.data, identity],
+  );
 
   useEffect(() => {
-    if (formState.identity) {
-      latestSetRememberedIdentity.current(formState.identity);
+    if (identity) {
+      latestSetRememberedIdentity.current(identity);
     }
-  }, [latestSetRememberedIdentity, formState.identity]);
+  }, [latestSetRememberedIdentity, identity]);
 
   const queryMutation = useMutation({
     gcTime: 0,
     mutationFn: async (data: PlaygroundForm) => {
       const start = performance.now();
 
-      const headers = Object.fromEntries([
-        ...data.headers
+      const headers = new window.Headers(
+        data.headers
           .filter((h) => h.name && h.active)
-          .map((header) => [header.name, header.value]),
-      ]);
+          .map<[string, string]>((h) => [h.name, h.value]),
+      );
+
+      let body: string | FormData | File | undefined;
+
+      switch (data.bodyMode) {
+        case "file":
+          body = data.file ?? undefined;
+          headers.delete("Content-Type");
+          break;
+        case "multipart": {
+          const formData = new FormData();
+          data.multipartFormFields
+            ?.filter((field) => field.name && field.active)
+            .forEach((field) => formData.append(field.name, field.value));
+
+          body = formData;
+          headers.delete("Content-Type");
+          break;
+        }
+        default:
+          body = data.body ?? undefined;
+          break;
+      }
 
       const request = new Request(
         createUrl(server ?? selectedServer, url, data),
-        {
-          method: method.toUpperCase(),
-          headers,
-          body: data.body ? data.body : undefined,
-        },
+        { method, headers, body },
       );
 
       if (data.identity !== NO_IDENTITY) {
@@ -218,6 +262,10 @@ export const Playground = ({
       );
       abortControllerRef.current = new AbortController();
 
+      abortControllerRef.current.signal.addEventListener("abort", () => {
+        clearTimeout(warningTimeout);
+      });
+
       try {
         const response = await fetch(request, {
           cache: "no-store",
@@ -247,10 +295,35 @@ export const Playground = ({
 
         const responseSize = response.headers.get("content-length");
 
+        let requestBody = "";
+
+        switch (data.bodyMode) {
+          case "text":
+            requestBody = data.body;
+            break;
+          case "file":
+            requestBody = `[File: ${data.file?.name ?? "Unknown"}]`;
+            break;
+          case "multipart":
+            requestBody = "[Multipart Form Data]\n";
+            requestBody += data.multipartFormFields
+              ?.filter((f) => f.name && f.active)
+              .map((f) =>
+                f.value instanceof File
+                  ? `${f.name}: [File: ${f.value.name}]`
+                  : `${f.name}: ${f.value}`,
+              )
+              .join("\n");
+            break;
+          default:
+            requestBody = data.body;
+            break;
+        }
+
         return {
           status: response.status,
           headers: responseHeaders,
-          size: responseSize ? parseInt(responseSize) : body.length,
+          size: responseSize ? Number(responseSize) : body.length,
           body,
           time,
           isBinary,
@@ -264,7 +337,7 @@ export const Playground = ({
               ["User-Agent", "Zudoku Playground"],
               ...Array.from(request.headers.entries()),
             ],
-            body: data.body ? data.body : undefined,
+            body: requestBody,
           },
         } satisfies PlaygroundResult;
       } catch (error) {
@@ -297,38 +370,6 @@ export const Playground = ({
     };
   }, []);
 
-  const path = (
-    <PathRenderer
-      path={url}
-      renderParam={({ name, originalValue, index }) => {
-        const formValue = formState.pathParams.find(
-          (param) => param.name === name,
-        )?.value;
-
-        return (
-          <ColorizedParam
-            name={name}
-            backgroundOpacity="0"
-            slug={name}
-            onClick={() => form.setFocus(`pathParams.${index}.value`)}
-          >
-            {formValue || originalValue}
-          </ColorizedParam>
-        );
-      }}
-    />
-  );
-
-  const urlQueryParams = formState.queryParams
-    .filter((p) => p.active)
-    .map((p, i, arr) => (
-      <Fragment key={p.name}>
-        {p.name}={encodeURIComponent(p.value).replaceAll("%20", "+")}
-        {i < arr.length - 1 && "&"}
-        <wbr />
-      </Fragment>
-    ));
-
   const serverSelect = (
     <div className="inline-block opacity-50 hover:opacity-100 transition">
       {server ? (
@@ -358,47 +399,64 @@ export const Playground = ({
     </div>
   );
 
-  const showLogin = requiresLogin && !skipLogin;
+  const showLogin = requiresLogin && !skipLogin && !isLoginDialogDismissed;
   const isBodySupported = ["POST", "PUT", "PATCH", "DELETE"].includes(
     method.toUpperCase(),
   );
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
 
   return (
     <FormProvider
       {...{ register, control, handleSubmit, watch, setValue, ...form }}
     >
-      <form
-        onSubmit={handleSubmit((data) => {
-          if (identities.data?.length === 0 || data.identity) {
-            queryMutation.mutate(data);
-          } else {
-            setShowSelectIdentity(true);
-          }
-        })}
-        className="relative"
-      >
-        <IdentityDialog
-          identities={identities.data ?? []}
-          open={showSelectIdentity}
-          onOpenChange={setShowSelectIdentity}
-          onSubmit={({ rememberedIdentity, identity }) => {
-            if (rememberedIdentity) {
-              setValue("identity", identity ?? NO_IDENTITY);
+      <TooltipProvider delayDuration={150}>
+        <form
+          ref={formRef}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
+              e.preventDefault();
             }
-            setShowSelectIdentity(false);
-            queryMutation.mutate({ ...formState, identity });
           }}
-        />
-        <RequestLoginDialog
-          open={showLogin}
-          setOpen={(open) => setSkipLogin(!open)}
-          onSignUp={onSignUp}
-          onLogin={onLogin}
-        />
-
-        <div className="grid grid-cols-[1fr_min-content_1fr] text-sm">
-          <div className="col-span-3 p-4 border-b">
-            <div className="flex gap-2 items-stretch">
+          onSubmit={handleSubmit((data) => {
+            if (identities.data?.length === 0 || data.identity) {
+              queryMutation.mutate(data);
+            } else {
+              setShowSelectIdentity(true);
+            }
+          })}
+          className="relative"
+        >
+          <IdentityDialog
+            identities={identities.data ?? []}
+            open={showSelectIdentity}
+            onOpenChange={setShowSelectIdentity}
+            onSubmit={({ rememberedIdentity, identity }) => {
+              if (rememberedIdentity) {
+                setValue("identity", identity ?? NO_IDENTITY);
+              }
+              setShowSelectIdentity(false);
+              queryMutation.mutate({ ...form.getValues(), identity });
+            }}
+          />
+          <RequestLoginDialog
+            open={showLogin}
+            setOpen={(open) => {
+              if (!open) {
+                setIsLoginDialogDismissed(true);
+              }
+            }}
+            onSkip={(rememberSkip) => {
+              setIsLoginDialogDismissed(true);
+              if (rememberSkip) {
+                setSkipLogin(true);
+              }
+            }}
+            onSignUp={onSignUp}
+            onLogin={onLogin}
+          />
+
+          <div className="grid grid-cols-[1fr_1px_1fr] text-sm">
+            <div className="col-span-3 p-4 border-b flex gap-2 items-stretch">
               <div className="flex flex-1 items-center w-full border rounded-md relative overflow-hidden">
                 <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono flex items-center">
                   {method.toUpperCase()}
@@ -406,73 +464,119 @@ export const Playground = ({
                 <div className="items-center px-2 font-mono text-xs break-all leading-6 relative h-full w-full">
                   <div className="h-full py-1.5">
                     {serverSelect}
-                    {path}
-                    {urlQueryParams.length > 0 ? "?" : ""}
-                    {urlQueryParams}
+                    <UrlPath url={url} />
+                    <UrlQueryParams />
                   </div>
-                  <div
-                    className="h-[1px] bg-primary absolute left-0 -bottom-0 z-10 transition-all duration-300 ease-in-out"
-                    style={{
-                      opacity: isFinished ? 0 : 1,
-                      width: isFinished ? 0 : `${progress * 100}%`,
+                </div>
+                <div className="px-1">
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      copyToClipboard(
+                        createUrl(
+                          server ?? selectedServer,
+                          url,
+                          form.getValues(),
+                        ).toString(),
+                      );
                     }}
-                  />
+                    variant="ghost"
+                    size="icon-xs"
+                    className={cn(
+                      "hover:opacity-100 transition",
+                      isCopied ? "text-emerald-600 opacity-100" : "opacity-50",
+                    )}
+                  >
+                    {isCopied ? (
+                      <CheckIcon className="text-green-500" size={14} />
+                    ) : (
+                      <CopyIcon size={14} />
+                    )}
+                  </Button>
                 </div>
               </div>
 
               <Button
                 type="submit"
-                disabled={identities.isLoading || form.formState.isSubmitting}
+                variant={queryMutation.isPending ? "destructive" : "default"}
+                onClick={(e) => {
+                  if (queryMutation.isPending) {
+                    abortControllerRef.current?.abort(
+                      "Request cancelled by user",
+                    );
+                    e.preventDefault();
+                  }
+                }}
+                className="w-18"
               >
-                Send
+                {queryMutation.isPending ? "Cancel" : "Send"}
               </Button>
             </div>
-          </div>
-          <div className="flex flex-col gap-5 p-4 after:bg-muted-foreground/20 relative  overflow-y-auto h-[80vh]">
-            {identities.data?.length !== 0 && (
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-col gap-2">
-                  <span className="font-semibold">Authentication</span>
-                  <IdentitySelector
-                    value={formState.identity}
-                    identities={identities.data ?? []}
-                    setValue={(value) => setValue("identity", value)}
-                  />
-                </div>
-              </div>
-            )}
-
-            {pathParams.length > 0 && (
-              <div className="flex flex-col gap-2">
-                <span className="font-semibold">Path Parameters</span>
-                <PathParams url={url} control={control} />
-              </div>
-            )}
-
-            <div className="flex flex-col gap-2">
-              <span className="font-semibold">Query Parameters</span>
-              <QueryParams control={control} queryParams={queryParams} />
+            <div className="relative overflow-y-auto h-[80vh]">
+              {identities.data?.length !== 0 && (
+                <Collapsible defaultOpen>
+                  <CollapsibleHeaderTrigger>
+                    <IdCardLanyardIcon size={16} />
+                    <CollapsibleHeader>Authentication</CollapsibleHeader>
+                  </CollapsibleHeaderTrigger>
+                  <CollapsibleContent className="CollapsibleContent">
+                    <IdentitySelector
+                      value={identity}
+                      identities={identities.data ?? []}
+                      setValue={(value) => setValue("identity", value)}
+                    />
+                  </CollapsibleContent>
+                </Collapsible>
+              )}
+
+              {sortedPathParams.length > 0 && (
+                <Collapsible defaultOpen>
+                  <CollapsibleHeaderTrigger>
+                    <ShapesIcon size={16} />
+                    <CollapsibleHeader>Path Parameters</CollapsibleHeader>
+                  </CollapsibleHeaderTrigger>
+                  <CollapsibleContent className="CollapsibleContent">
+                    <PathParams url={url} control={control} />
+                  </CollapsibleContent>
+                </Collapsible>
+              )}
+
+              <QueryParams control={control} schemaQueryParams={queryParams} />
+
+              <Headers
+                control={control}
+                schemaHeaders={headers}
+                lockedHeaders={authorizationFields?.headers}
+              />
+              {isBodySupported && <BodyPanel content={examples} />}
             </div>
-
-            <Headers control={control} headers={headers} />
-            {isBodySupported && <BodyPanel examples={examples} />}
+            <div className="w-full bg-muted-foreground/20" />
+            <ResultPanel
+              queryMutation={queryMutation}
+              showLongRunningWarning={showLongRunningWarning}
+              isFinished={isFinished}
+              progress={progress}
+              tip={
+                <div className="text-xs w-full">
+                  <span className="text-muted-foreground">
+                    Press{" "}
+                    <kbd className="text-foreground border rounded m-0.5 px-1 py-0.5 capitalize">
+                      {hotkeyLabel.join(" + ")}
+                    </kbd>{" "}
+                    to send a request
+                  </span>
+                </div>
+              }
+              onCancel={() => {
+                abortControllerRef.current?.abort(
+                  "Request cancelled by the user",
+                );
+                setShowLongRunningWarning(false);
+              }}
+            />
           </div>
-          <div className="w-px bg-muted-foreground/20" />
-          <ResultPanel
-            queryMutation={queryMutation}
-            showPathParamsWarning={formState.pathParams.some(
-              (p) => p.value === "",
-            )}
-            showLongRunningWarning={showLongRunningWarning}
-            onCancel={() => {
-              abortControllerRef.current?.abort(
-                "Request cancelled by the user",
-              );
-              setShowLongRunningWarning(false);
-            }}
-          />
-        </div>
-      </form>
+        </form>
+      </TooltipProvider>
     </FormProvider>
   );
 };

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

@@ -1,5 +1,8 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { PlayIcon } from "lucide-react";
 import { type PropsWithChildren, useState } from "react";
+import { useAuth } from "zudoku/hooks";
+import { Button } from "zudoku/ui/Button.js";
 import {
   Dialog,
   DialogContent,
@@ -10,54 +13,41 @@ import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
 export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;
 
-const HeroPlayIcon = ({
-  className,
-  size = 16,
-}: {
-  className?: string;
-  size?: number;
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    className={className}
-    width={size}
-    height={size}
-  >
-    <path
-      fillRule="evenodd"
-      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
 const PlaygroundDialog = (props: PlaygroundDialogProps) => {
   const [open, setOpen] = useState(false);
+  const { isAuthEnabled, login, signup, isPending, isAuthenticated } =
+    useAuth();
+
   return (
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
         {props.children ?? (
-          <button
-            type="button"
-            className="flex gap-1 items-center px-2 py-1 rounded-md transition text-xs bg-primary  text-primary-foreground shadow-xs hover:bg-primary/80"
-          >
-            Test
-            <HeroPlayIcon size={14} />
-          </button>
+          <Button variant="ghost" size="icon-xs" className="group">
+            <PlayIcon
+              className="fill-muted-foreground group-hover:fill-foreground transition"
+              size={16}
+              strokeWidth={1.5}
+            />
+          </Button>
         )}
       </DialogTrigger>
 
       <DialogContent
-        className="max-w-screen-xl w-full overflow-hidden p-0"
+        className="max-w-screen-xl! w-full overflow-hidden p-0"
         aria-describedby={undefined}
-        showCloseButton={false}
+        showCloseButton={true}
       >
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>
         </VisuallyHidden>
-        {open && <Playground {...props} />}
+        {open && (
+          <Playground
+            requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
+            onLogin={() => login()}
+            onSignUp={() => signup()}
+            {...props}
+          />
+        )}
       </DialogContent>
     </Dialog>
   );