zudoku 0.0.0-f3f6db5 → 0.0.0-f471fb8

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

@@ -9,7 +9,7 @@ import { Checkbox } from "zudoku/ui/Checkbox.js";
 import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Input } from "../../../ui/Input.js";
 import { InlineInput } from "./InlineInput.js";
-import ParamsGrid from "./ParamsGrid.js";
+import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
 import { type PlaygroundForm, type QueryParam } from "./Playground.js";
 
 export const QueryParams = ({
@@ -19,7 +19,7 @@ export const QueryParams = ({
   control: Control<PlaygroundForm>;
   queryParams: QueryParam[];
 }) => {
-  const { fields } = useFieldArray<PlaygroundForm>({
+  const { fields } = useFieldArray<PlaygroundForm, "queryParams">({
     control,
     name: "queryParams",
   });
@@ -30,97 +30,98 @@ export const QueryParams = ({
   return (
     <Card className="rounded-lg">
       <div className="w-full ">
-        {fields.map((field, i) => {
-          const currentParam = queryParams.find(
-            (param) => param.name === field.name,
-          );
-          return (
-            <ParamsGrid key={field.id}>
-              <div className="flex items-center">
-                <Controller
-                  control={control}
-                  name={`queryParams.${i}.active`}
-                  render={({ field }) => (
-                    <Checkbox
-                      variant="outline"
-                      id={`queryParams.${i}.active`}
-                      className="mr-2"
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  )}
-                />
-                <Controller
-                  control={control}
-                  render={({ field }) =>
-                    !requiredFields[i] ? (
-                      <Autocomplete
-                        value={field.value}
-                        options={queryParams.map((param) => param.name)}
-                        onChange={(e) => {
-                          field.onChange(e);
-                        }}
-                        className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+        <ParamsGrid>
+          {fields.map((field, i) => {
+            const currentParam = queryParams.find(
+              (param) => param.name === form.watch(`queryParams.${i}.name`),
+            );
+            return (
+              <ParamsGridItem key={field.id}>
+                <div key={field.id} className="flex items-center gap-2">
+                  <Controller
+                    control={control}
+                    name={`queryParams.${i}.active`}
+                    render={({ field }) => (
+                      <Checkbox
+                        id={`queryParams.${i}.active`}
+                        className="mr-2"
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
                       />
-                    ) : (
-                      <InlineInput asChild>
-                        <label
-                          className="flex items-center cursor-pointer gap-1"
-                          htmlFor={`queryParams.${i}.active`}
-                          title={
-                            requiredFields[i] ? "Required field" : undefined
-                          }
-                        >
-                          {field.value}
-                          {requiredFields[i] && <sup>&nbsp;*</sup>}
-                        </label>
-                      </InlineInput>
-                    )
-                  }
-                  name={`queryParams.${i}.name`}
-                />
-              </div>
-              <div className="flex justify-between items-center">
-                <Controller
-                  control={control}
-                  render={({ field }) => {
-                    const hasEnum =
-                      currentParam?.enum && currentParam.enum.length > 0;
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    render={({ field }) =>
+                      !requiredFields[i] ? (
+                        <Autocomplete
+                          value={field.value}
+                          options={queryParams.map((param) => param.name)}
+                          onChange={(e) => {
+                            field.onChange(e);
+                          }}
+                          className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+                        />
+                      ) : (
+                        <InlineInput asChild>
+                          <label
+                            className="flex items-center cursor-pointer gap-1"
+                            htmlFor={`queryParams.${i}.active`}
+                            title={
+                              requiredFields[i] ? "Required field" : undefined
+                            }
+                          >
+                            {field.value}
+                            {requiredFields[i] && <sup>&nbsp;*</sup>}
+                          </label>
+                        </InlineInput>
+                      )
+                    }
+                    name={`queryParams.${i}.name`}
+                  />
+                </div>
+                <div className="flex justify-between items-center">
+                  <Controller
+                    control={control}
+                    render={({ field }) => {
+                      const hasEnum =
+                        currentParam?.enum && currentParam.enum.length > 0;
+
+                      if (!hasEnum) {
+                        return (
+                          <Input
+                            {...field}
+                            onChange={(e) => {
+                              field.onChange(e.target.value);
+                              if (e.target.value.length > 0) {
+                                form.setValue(`queryParams.${i}.active`, true);
+                              }
+                            }}
+                            placeholder="Enter value"
+                            className="w-full border-0 shadow-none focus-visible:ring-0 text-xs font-mono"
+                          />
+                        );
+                      }
 
-                    if (!hasEnum) {
                       return (
-                        <Input
-                          {...field}
+                        <Autocomplete
+                          value={field.value}
+                          options={currentParam.enum ?? []}
                           onChange={(e) => {
-                            field.onChange(e.target.value);
-                            if (e.target.value.length > 0) {
-                              form.setValue(`queryParams.${i}.active`, true);
-                            }
+                            field.onChange(e);
+                            form.setValue(`queryParams.${i}.active`, true);
                           }}
-                          placeholder="Enter value"
-                          className="w-full border-0 shadow-none text-xs font-mono"
+                          className="font-mono text-xs border-0 ring-1 ring-ring"
                         />
                       );
-                    }
-
-                    return (
-                      <Autocomplete
-                        value={field.value}
-                        options={currentParam.enum ?? []}
-                        onChange={(e) => {
-                          field.onChange(e);
-                          form.setValue(`queryParams.${i}.active`, true);
-                        }}
-                        className="font-mono text-xs border-0 ring-1 ring-ring"
-                      />
-                    );
-                  }}
-                  name={`queryParams.${i}.value`}
-                />
-              </div>
-            </ParamsGrid>
-          );
-        })}
+                    }}
+                    name={`queryParams.${i}.value`}
+                  />
+                </div>
+              </ParamsGridItem>
+            );
+          })}
+        </ParamsGrid>
       </div>
     </Card>
   );

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

@@ -0,0 +1,51 @@
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "zudoku/ui/Dialog.js";
+
+const RequestLoginDialog = ({
+  open,
+  setOpen,
+  onSignUp,
+  onLogin,
+}: {
+  open: boolean;
+  onSignUp?: () => void;
+  onLogin?: () => void;
+  setOpen: (open: boolean) => void;
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogTitle>Welcome to the Playground!</DialogTitle>
+        <DialogDescription>
+          The Playground is a tool for developers to test and explore our APIs.
+          To use the Playground, you need to login.
+        </DialogDescription>
+        <DialogFooter className="flex gap-2 sm:justify-between">
+          <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+            Skip
+          </Button>
+          <div className="flex gap-2">
+            {onSignUp && (
+              <Button type="button" variant="outline" onClick={onSignUp}>
+                Sign Up
+              </Button>
+            )}
+            {onLogin && (
+              <Button type="button" variant="default" onClick={onLogin}>
+                Login
+              </Button>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RequestLoginDialog;

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

@@ -0,0 +1,26 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+interface IdentityState {
+  rememberedIdentity: string | null;
+  setRememberedIdentity: (identity: string | null) => void;
+  getRememberedIdentity: (availableIdentities: string[]) => string | undefined;
+}
+
+export const useIdentityStore = create<IdentityState>()(
+  persist(
+    (set, get) => ({
+      rememberedIdentity: null,
+      setRememberedIdentity: (identity: string | null) =>
+        set({ rememberedIdentity: identity }),
+      getRememberedIdentity: (availableIdentities: string[]) =>
+        availableIdentities.find(
+          (identity) => identity === get().rememberedIdentity,
+        ),
+    }),
+    {
+      name: "identity-storage",
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);

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

@@ -40,7 +40,7 @@ export const RequestTab = ({
               {headers.map(([key, value]) => (
                 <Fragment key={key}>
                   <div className="text-primary">{key}</div>
-                  <div className="break-words">{value}</div>
+                  <div className="break-all">{value}</div>
                 </Fragment>
               ))}
             </div>

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

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { ChevronRightIcon } from "lucide-react";
 import { Fragment, useState } from "react";
+import { Callout } from "zudoku/ui/Callout.js";
 import {
   Collapsible,
   CollapsibleContent,
@@ -13,8 +14,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
-import { SyntaxHighlight } from "../../../../components/SyntaxHighlight.js";
 import { Card } from "../../../../ui/Card.js";
+import { SyntaxHighlight } from "../../../../ui/SyntaxHighlight.js";
 import { convertToTypes } from "./convertToTypes.js";
 
 const statusCodeMap: Record<number, string> = {
@@ -30,6 +31,14 @@ const statusCodeMap: Record<number, string> = {
   500: "Internal Server Error",
 };
 
+const humanFileSize = (bytes: number) => {
+  const exponent = Math.floor(Math.log(bytes) / Math.log(1000.0));
+  const decimal = (bytes / Math.pow(1000.0, exponent)).toFixed(
+    exponent ? 2 : 0,
+  );
+  return `${decimal} ${exponent ? `${"kMGTPEZY"[exponent - 1]}B` : "B"}`;
+};
+
 const mimeTypeToLanguage = (mimeType: string) => {
   const mimeTypeMapping = {
     "application/json": "json",
@@ -83,6 +92,8 @@ const sortHeadersByRelevance = (
   });
 };
 
+const SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD = 64_000;
+
 export const ResponseTab = ({
   body = "",
   headers,
@@ -114,9 +125,10 @@ export const ResponseTab = ({
   });
 
   const sortedHeaders = sortHeadersByRelevance([...headers]);
+  const shouldDisableHighlighting = size > SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD;
 
   return (
-    <div className="flex flex-col gap-2 h-full overflow-y-scroll max-h-[calc(100vh-220px)] py-4">
+    <div className="flex flex-col gap-2 h-full overflow-auto max-h-[calc(100vh-220px)] ">
       <Collapsible defaultOpen>
         <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
           <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
@@ -151,6 +163,12 @@ export const ResponseTab = ({
       </Collapsible>
 
       <Card className="shadow-none">
+        {shouldDisableHighlighting && (
+          <Callout type="info" className="my-0 p-2">
+            Code highlight is disabled for responses larger than{" "}
+            {humanFileSize(SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD)}
+          </Callout>
+        )}
         <SyntaxHighlight
           language={
             view === "types"
@@ -161,8 +179,9 @@ export const ResponseTab = ({
                   : detectedLanguage
                 : "json"
           }
+          showCopy="always"
+          disabled={shouldDisableHighlighting}
           noBackground
-          // playground dialog has h-5/6 ≈ 83.333vh
           className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
           code={
             (view === "raw"
@@ -173,7 +192,7 @@ export const ResponseTab = ({
           }
         />
       </Card>
-      <div className="flex gap-2 justify-between">
+      <div className="flex gap-2 justify-between items-center">
         <div className="flex text-xs gap-2 border bg-muted rounded-md p-2 items-center h-8 font-mono divide-x">
           <div>
             <span className="text-muted-foreground">Status</span> {status}{" "}
@@ -184,7 +203,8 @@ export const ResponseTab = ({
             {time.toFixed(0)}ms
           </div>
           <div>
-            <span className="text-muted-foreground">Size</span> {size}B
+            <span className="text-muted-foreground">Size</span>{" "}
+            {humanFileSize(size)}
           </div>
         </div>
         {jsonContent && (

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

@@ -1,5 +1,6 @@
-import { UseMutationResult } from "@tanstack/react-query";
+import { type UseMutationResult } from "@tanstack/react-query";
 import { Spinner } from "../../../../components/Spinner.js";
+import { Button } from "../../../../ui/Button.js";
 import { Callout } from "../../../../ui/Callout.js";
 import {
   Card,
@@ -14,20 +15,24 @@ import {
   TabsTrigger,
 } from "../../../../ui/Tabs.js";
 import { cn } from "../../../../util/cn.js";
-import { PlaygroundResult } from "../Playground.js";
+import { type PlaygroundResult } from "../Playground.js";
 import { RequestTab } from "./RequestTab.js";
 import { ResponseTab } from "./ResponseTab.js";
 
 export const ResultPanel = ({
   queryMutation,
   showPathParamsWarning,
+  showLongRunningWarning,
+  onCancel,
 }: {
-  queryMutation: UseMutationResult<PlaygroundResult, Error, any, unknown>;
+  queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
   showPathParamsWarning: boolean;
+  showLongRunningWarning?: boolean;
+  onCancel?: () => void;
 }) => {
   const status = ((queryMutation.data?.status ?? 0) / 100).toFixed(0);
   return (
-    <div className="min-w-0 p-8 bg-muted/70 overflow-y-auto">
+    <div className="min-w-0 p-4 py-8 bg-muted/50">
       {queryMutation.error ? (
         <div className="flex flex-col gap-2">
           {showPathParamsWarning && (
@@ -49,49 +54,66 @@ export const ResultPanel = ({
           </Card>
         </div>
       ) : queryMutation.data ? (
-        <div className="flex flex-col gap-2">
-          <Tabs defaultValue="response">
-            <TabsList>
-              <TabsTrigger value="request">Request</TabsTrigger>
-              <TabsTrigger value="response">
-                Response
-                <span
-                  className={cn(
-                    "text-xs font-mono ml-1",
-                    status === "2" && "text-green-500",
-                    status === "3" && "text-blue-500",
-                    status === "4" && "text-yellow-500",
-                    status === "5" && "text-red-500",
-                  )}
-                >
-                  ({queryMutation.data.status})
-                </span>
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="request">
-              <RequestTab {...queryMutation.data.request} />
-            </TabsContent>
-            <TabsContent value="response">
-              <ResponseTab
-                status={queryMutation.data.status}
-                time={queryMutation.data.time}
-                size={queryMutation.data.size}
-                headers={queryMutation.data.headers}
-                body={queryMutation.data.body}
-                url={queryMutation.data.request.url}
-              />
-            </TabsContent>
-          </Tabs>
-        </div>
+        <Tabs defaultValue="response">
+          <TabsList>
+            <TabsTrigger value="request">Request</TabsTrigger>
+            <TabsTrigger value="response">
+              Response
+              <span
+                className={cn(
+                  "text-xs font-mono ml-1",
+                  status === "2" && "text-green-500",
+                  status === "3" && "text-blue-500",
+                  status === "4" && "text-yellow-500",
+                  status === "5" && "text-red-500",
+                )}
+              >
+                ({queryMutation.data.status})
+              </span>
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="request">
+            <RequestTab {...queryMutation.data.request} />
+          </TabsContent>
+          <TabsContent value="response">
+            <ResponseTab
+              status={queryMutation.data.status}
+              time={queryMutation.data.time}
+              size={queryMutation.data.size}
+              headers={queryMutation.data.headers}
+              body={queryMutation.data.body}
+              url={queryMutation.data.request.url}
+            />
+          </TabsContent>
+        </Tabs>
       ) : (
         <div className="grid place-items-center h-full">
-          <span className="text-[16px] font-semibold text-muted-foreground">
-            {queryMutation.isPending ? (
-              <Spinner />
-            ) : (
-              "Send a request first to see the response here"
-            )}
-          </span>
+          {queryMutation.isPending ? (
+            <div className="flex flex-col gap-2 items-center mt-20">
+              <Spinner size={20} />
+              <div
+                className={cn(
+                  "opacity-0 pointer-events-none transition-opacity h-20 text-sm text-muted-foreground duration-300 flex flex-col gap-2 items-center",
+                  showLongRunningWarning && "opacity-100 pointer-events-auto",
+                )}
+              >
+                Looks like the request is taking longer than expected.
+                <Button
+                  type="button"
+                  onClick={onCancel}
+                  size="sm"
+                  className="w-fit"
+                  variant="outline"
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <span className="text-[16px] font-semibold text-muted-foreground">
+              Send a request first to see the response here
+            </span>
+          )}
         </div>
       )}
     </div>

package/src/lib/plugins/openapi/schema/SchemaPropertyItem.tsx

@@ -1,12 +1,14 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { ListPlusIcon, RefreshCcwDotIcon } from "lucide-react";
+import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
-import { Badge } from "zudoku/ui/Badge.js";
 import { Markdown, ProseClasses } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
 import { cn } from "../../../util/cn.js";
 import { objectEntries } from "../../../util/objectEntries.js";
+import { EnumValues } from "../components/EnumValues.js";
+import { SelectOnClick } from "../components/SelectOnClick.js";
+import { ParamInfos } from "../ParamInfos.js";
 import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaView } from "./SchemaView.js";
 import {
@@ -42,8 +44,8 @@ export const SchemaLogicalGroup = ({
 };
 
 const RecursiveIndicator = () => (
-  <div className="flex items-center gap-2 italic text-sm text-muted-foreground font-mono bg-muted px-2 py-0.5 rounded-md">
-    <RefreshCcwDotIcon size={16} />
+  <div className="flex items-center gap-1.5 italic text-xs text-muted-foreground font-mono bg-muted px-2 py-0.5 rounded-md">
+    <RefreshCcwDotIcon size={13} />
     <span>circular</span>
   </div>
 );
@@ -68,11 +70,10 @@ export const SchemaPropertyItem = ({
   if (isCircularRef(schema)) {
     return (
       <li className="p-4 bg-border/20 hover:bg-border/30">
-        <div className="flex flex-col gap-1 justify-between text-sm">
-          <div className="flex gap-2 items-center">
+        <div className="flex flex-col gap-2.5 justify-between text-sm">
+          <div className="space-x-2">
             <code>{name}</code>
-            <Badge variant="muted">object</Badge>
-            {group === "optional" && <Badge variant="outline">optional</Badge>}
+            <ParamInfos schema={schema} />
             <RecursiveIndicator />
           </div>
         </div>
@@ -82,30 +83,33 @@ export const SchemaPropertyItem = ({
 
   return (
     <li className="p-4 bg-border/20 hover:bg-border/30">
-      <div className="flex flex-col gap-1 justify-between text-sm">
-        <div className="flex gap-2 items-center">
-          <code>{name}</code>
-          <Badge variant="muted">
-            {schema.type === "array" && schema.items.type ? (
-              <span>{schema.items.type}[]</span>
-            ) : Array.isArray(schema.type) ? (
-              <span>{schema.type.join(" | ")}</span>
-            ) : (
-              <span>{schema.type}</span>
-            )}
-          </Badge>
-          {group === "optional" && <Badge variant="outline">optional</Badge>}
+      <div className="flex flex-col gap-2.5 justify-between text-sm">
+        <div className="space-x-2">
+          <SelectOnClick asChild>
+            <code>{name}</code>
+          </SelectOnClick>
+          <ParamInfos
+            schema={schema}
+            extraItems={[
+              group !== "optional" && (
+                <span className="text-primary">required</span>
+              ),
+            ]}
+          />
           {schema.type === "array" &&
             "items" in schema &&
             isCircularRef(schema.items) && <RecursiveIndicator />}
         </div>
-
         {schema.description && (
           <Markdown
             className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
             content={schema.description}
           />
         )}
+        {schema.type === "array" && "items" in schema && schema.items.enum && (
+          <EnumValues values={schema.items.enum} />
+        )}
+        {schema.enum && <EnumValues values={schema.enum} />}
 
         {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
           <Collapsible.Root
@@ -115,15 +119,9 @@ export const SchemaPropertyItem = ({
           >
             {showCollapseButton && (
               <Collapsible.Trigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="mt-2 flex gap-1.5"
-                >
-                  <ListPlusIcon size={18} />
-                  {!isOpen
-                    ? "Show nested properties"
-                    : "Hide nested properties"}
+                <Button variant="expand" size="sm" className="h-7">
+                  {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
+                  {!isOpen ? "Show properties" : "Hide properties"}
                 </Button>
               </Collapsible.Trigger>
             )}