zudoku 0.52.1 → 0.53.0

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

@@ -397,101 +397,88 @@ export const Playground = ({
           />
 
           <div className="grid grid-cols-[1fr_1px_1fr] text-sm">
-            <div className="col-span-3 p-4 border-b">
-              <div className="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()}
-                  </div>
-                  <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}
-                      <UrlPath url={url} />
-                      <UrlQueryParams />
-                    </div>
-                    <div
-                      className="h-full bg-primary/25 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 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()}
+                </div>
+                <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}
+                    <UrlPath url={url} />
+                    <UrlQueryParams />
                   </div>
                 </div>
-
-                <Button
-                  type="submit"
-                  variant={queryMutation.isPending ? "destructive" : "default"}
-                  onClick={(e) => {
-                    if (queryMutation.isPending) {
-                      abortControllerRef.current?.abort(
-                        "Request cancelled by user",
+                <div className="px-1">
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      copyToClipboard(
+                        createUrl(
+                          server ?? selectedServer,
+                          url,
+                          form.getValues(),
+                        ).toString(),
                       );
-                      e.preventDefault();
-                    }
-                  }}
-                  className="w-18"
-                >
-                  {queryMutation.isPending ? "Cancel" : "Send"}
-                </Button>
+                    }}
+                    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"
+                variant={queryMutation.isPending ? "destructive" : "default"}
+                onClick={(e) => {
+                  if (queryMutation.isPending) {
+                    abortControllerRef.current?.abort(
+                      "Request cancelled by user",
+                    );
+                    e.preventDefault();
+                  }
+                }}
+                className="w-18"
+              >
+                {queryMutation.isPending ? "Cancel" : "Send"}
+              </Button>
             </div>
             <div className="relative overflow-y-auto h-[80vh]">
               {identities.data?.length !== 0 && (
-                <div className="flex flex-col gap-2">
-                  <div className="flex flex-col gap-2">
-                    <Collapsible defaultOpen>
-                      <CollapsibleHeaderTrigger>
-                        <IdCardLanyardIcon size={16} />
-                        <CollapsibleHeader className="col-span-2">
-                          Authentication
-                        </CollapsibleHeader>
-                      </CollapsibleHeaderTrigger>
-                      <CollapsibleContent className="CollapsibleContent">
-                        <IdentitySelector
-                          value={identity}
-                          identities={identities.data ?? []}
-                          setValue={(value) => setValue("identity", value)}
-                        />
-                      </CollapsibleContent>
-                    </Collapsible>
-                  </div>
-                </div>
+                <Collapsible defaultOpen>
+                  <CollapsibleHeaderTrigger>
+                    <IdCardLanyardIcon size={16} />
+                    <CollapsibleHeader className="col-span-2">
+                      Authentication
+                    </CollapsibleHeader>
+                  </CollapsibleHeaderTrigger>
+                  <CollapsibleContent className="CollapsibleContent">
+                    <IdentitySelector
+                      value={identity}
+                      identities={identities.data ?? []}
+                      setValue={(value) => setValue("identity", value)}
+                    />
+                  </CollapsibleContent>
+                </Collapsible>
               )}
 
               {pathParams.length > 0 && (
                 <Collapsible defaultOpen>
-                  <CollapsibleHeaderTrigger className="border-t">
+                  <CollapsibleHeaderTrigger>
                     <ShapesIcon size={16} />
-                    <CollapsibleHeader>Path Parameters</CollapsibleHeader>
+                    <CollapsibleHeader className="col-span-2">
+                      Path Parameters
+                    </CollapsibleHeader>
                   </CollapsibleHeaderTrigger>
                   <CollapsibleContent className="CollapsibleContent">
                     <PathParams url={url} control={control} />
@@ -506,12 +493,14 @@ export const Playground = ({
                 schemaHeaders={headers}
                 lockedHeaders={authorizationFields?.headers}
               />
-              {isBodySupported && <BodyPanel examples={examples} />}
+              {isBodySupported && <BodyPanel content={examples} />}
             </div>
             <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">

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

@@ -90,6 +90,7 @@ export const QueryParams = ({
                     render={({ field }) =>
                       !requiredFields[i] ? (
                         <Autocomplete
+                          placeholder="Name"
                           value={field.value}
                           options={schemaQueryParams.map((param) => param.name)}
                           onChange={(e) => {
@@ -131,7 +132,8 @@ export const QueryParams = ({
                                   setValue(`queryParams.${i}.active`, true);
                                 }
                               }}
-                              placeholder="Enter value"
+                              placeholder="Value"
+                              aria-label="Query parameter value"
                               className="w-full border-0 p-0 m-0 shadow-none focus-visible:ring-0 text-xs font-mono"
                             />
                           );

package/src/lib/plugins/openapi/playground/result-panel/ResponseStatusBar.tsx

@@ -59,10 +59,14 @@ export const ResponseStatusBar = ({
   status,
   time,
   size,
+  isFinished,
+  progress,
 }: {
   status?: number;
   time?: number;
   size?: number;
+  isFinished: boolean;
+  progress: number;
 }) => {
   const statusCodeMap: Record<number, string> = {
     200: "OK",
@@ -78,7 +82,7 @@ export const ResponseStatusBar = ({
   };
 
   return (
-    <div className="flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
+    <div className="relative flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
       <div className="flex items-center gap-2">
         <ResponseCodeCircle status={status} /> {status ?? "Sending Request..."}
         {status ? ` ${statusCodeMap[status]}` : ""}
@@ -86,7 +90,7 @@ export const ResponseStatusBar = ({
       <div className="flex gap-2">
         <div>
           <span className="text-muted-foreground">Size</span>{" "}
-          <span className="inline-block text-end w-[5ch]">
+          <span className="inline-block text-end min-w-[5ch]">
             {size ? humanFileSize(size) : "- B"}
           </span>
         </div>
@@ -97,6 +101,13 @@ export const ResponseStatusBar = ({
           ms
         </div>
       </div>
+      <div
+        className="h-full bg-neutral-500/10 absolute left-0 -bottom-0 z-10 transition-all duration-200 ease-in-out"
+        style={{
+          opacity: isFinished ? 0 : 1,
+          width: isFinished ? 0 : `${progress * 100}%`,
+        }}
+      />
     </div>
   );
 };

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -19,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+import createVariantComponent from "../../../../util/createVariantComponent.js";
 import { humanFileSize } from "../../../../util/humanFileSize.js";
 import {
   CollapsibleHeader,
@@ -82,6 +83,13 @@ const sortHeadersByRelevance = (
 
 const MAX_HEADERS_TO_SHOW = 3;
 
+const Row = createVariantComponent(
+  "div",
+  "grid-cols-subgrid grid border-b col-span-full px-4 py-1.5 font-mono text-xs",
+);
+
+const RowContent = createVariantComponent("div", "py-1 break-all");
+
 export const ResponseTab = ({
   body = "",
   headers,
@@ -134,14 +142,11 @@ export const ResponseTab = ({
 
   const sortedHeaders = sortHeadersByRelevance([...headers]);
 
-  const headerStyle =
-    "grid-cols-subgrid grid border-b col-span-full px-4 py-1.5 font-mono text-xs";
-
   return (
     <>
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownLeftIcon size={16} />
+          <CornerDownRightIcon size={16} />
           <CollapsibleHeader className="col-span-2">
             Header Request
           </CollapsibleHeader>
@@ -151,10 +156,10 @@ export const ResponseTab = ({
             {request.headers
               .slice(0, MAX_HEADERS_TO_SHOW)
               .map(([key, value]) => (
-                <div key={key} className={headerStyle}>
-                  <div className="">{key}</div>
-                  <div className="break-all">{value}</div>
-                </div>
+                <Row key={key}>
+                  <RowContent>{key}</RowContent>
+                  <RowContent>{value}</RowContent>
+                </Row>
               ))}
           </div>
         </CollapsibleContent>
@@ -162,7 +167,7 @@ export const ResponseTab = ({
 
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownRightIcon size={16} />
+          <CornerDownLeftIcon size={16} />
           <CollapsibleHeader className="col-span-2">
             Header Response
           </CollapsibleHeader>
@@ -170,10 +175,10 @@ export const ResponseTab = ({
         <CollapsibleContent>
           <div className="grid grid-cols-2 gap-x-6 text-sm">
             {sortedHeaders.slice(0, MAX_HEADERS_TO_SHOW).map(([key, value]) => (
-              <div key={key} className={headerStyle}>
-                <div className="">{key}</div>
-                <div className="break-all line-clamp-1">{value}</div>
-              </div>
+              <Row key={key}>
+                <RowContent>{key}</RowContent>
+                <RowContent>{value}</RowContent>
+              </Row>
             ))}
             {sortedHeaders.length > MAX_HEADERS_TO_SHOW && (
               <Collapsible className="col-span-full grid-cols-subgrid grid group">
@@ -188,10 +193,10 @@ export const ResponseTab = ({
                   {sortedHeaders
                     .slice(MAX_HEADERS_TO_SHOW)
                     .map(([key, value]) => (
-                      <div key={key} className={headerStyle}>
-                        <div className="">{key}</div>
-                        <div className="break-all ">{value}</div>
-                      </div>
+                      <Row key={key}>
+                        <RowContent>{key}</RowContent>
+                        <RowContent>{value}</RowContent>
+                      </Row>
                     ))}
                 </CollapsibleContent>
               </Collapsible>

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -13,11 +13,15 @@ export const ResultPanel = ({
   showLongRunningWarning,
   onCancel,
   tip,
+  isFinished,
+  progress,
 }: {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
   showLongRunningWarning?: boolean;
   onCancel?: () => void;
+  isFinished: boolean;
+  progress: number;
   tip?: React.ReactNode;
 }) => {
   return (
@@ -27,6 +31,8 @@ export const ResultPanel = ({
           status={queryMutation.data?.status}
           time={queryMutation.data?.time}
           size={queryMutation.data?.size}
+          isFinished={isFinished}
+          progress={progress}
         />
       )}
       {queryMutation.error ? (

package/src/lib/ui/Dialog.tsx

@@ -45,8 +45,8 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="absolute -right-2 -top-2 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <XIcon className="h-4 w-4" />
+        <DialogPrimitive.Close className="absolute left-1 top-1 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <XIcon className="h-3 w-3" strokeWidth={2} />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       )}

package/lib/Dialog-DGlrUTCS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog-DGlrUTCS.js","sources":["../src/lib/ui/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\n\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"../util/cn.js\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    showCloseButton?: boolean;\n  }\n>(({ className, children, showCloseButton = true, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close className=\"absolute -right-2 -top-2 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n          <XIcon className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Close</span>\n        </DialogPrimitive.Close>\n      )}\n    </DialogPrimitive.Content>\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className,\n    )}\n    {...props}\n  />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className,\n    )}\n    {...props}\n  />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","showCloseButton","jsxs","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;AAMA,MAAMA,IAASC,EAAgB,MAEzBC,IAAgBD,EAAgB,SAEhCE,IAAeF,EAAgB,QAE/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1BC,gBAAAA,EAAA;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAc,cAAcJ,EAAgB,QAAQ;AAEpD,MAAMW,IAAgBN,EAAM,WAK1B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,iBAAAC,IAAkB,IAAM,GAAGN,EAAS,GAAAC,6BAC3DN,GACC,EAAA,UAAA;AAAA,EAAAO,gBAAAA,EAAA,IAACL,GAAc,EAAA;AAAA,EACfU,gBAAAA,EAAA;AAAA,IAACd,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAK;AAAA,QACAC,KACEC,gBAAAA,EAAA,KAAAd,EAAgB,OAAhB,EAAsB,WAAU,qRAC/B,UAAA;AAAA,UAACS,gBAAAA,EAAAA,IAAAM,GAAA,EAAM,WAAU,UAAU,CAAA;AAAA,UAC1BN,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,WAAU,UAAK,QAAA,CAAA;AAAA,QAAA,EACjC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAEJ,GACF,CACD;AACDE,EAAc,cAAcX,EAAgB,QAAQ;AAEpD,MAAMgB,IAAe,CAAC;AAAA,EACpB,WAAAV;AAAA,EACA,GAAGC;AACL,MACEE,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN;AAEFS,EAAa,cAAc;AAE3B,MAAMC,IAAe,CAAC;AAAA,EACpB,WAAAX;AAAA,EACA,GAAGC;AACL,MACEE,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN;AAEFU,EAAa,cAAc;AAErB,MAAAC,IAAcb,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1BC,gBAAAA,EAAA;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDW,EAAY,cAAclB,EAAgB,MAAM;AAE1C,MAAAmB,IAAoBd,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1BC,gBAAAA,EAAA;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDY,EAAkB,cAAcnB,EAAgB,YAAY;"}