zudoku 0.51.0 → 0.52.1

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

@@ -1,122 +1,92 @@
 import { type UseMutationResult } from "@tanstack/react-query";
-import { Spinner } from "../../../../components/Spinner.js";
+import { SendIcon, UnplugIcon } from "lucide-react";
+import { Spinner } from "zudoku/components";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
 import { Button } from "../../../../ui/Button.js";
-import { Callout } from "../../../../ui/Callout.js";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../../../../ui/Card.js";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../../../ui/Tabs.js";
 import { cn } from "../../../../util/cn.js";
 import { type PlaygroundResult } from "../Playground.js";
-import { RequestTab } from "./RequestTab.js";
+import ResponseStatusBar from "./ResponseStatusBar.js";
 import { ResponseTab } from "./ResponseTab.js";
 
 export const ResultPanel = ({
   queryMutation,
-  showPathParamsWarning,
   showLongRunningWarning,
   onCancel,
+  tip,
 }: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
-  showPathParamsWarning: boolean;
   showLongRunningWarning?: boolean;
   onCancel?: () => void;
+  tip?: React.ReactNode;
 }) => {
-  const status = ((queryMutation.data?.status ?? 0) / 100).toFixed(0);
   return (
-    <div className="min-w-0 p-4 py-4 bg-muted/50">
+    <div className="overflow-y-auto h-[80vh] bg-muted/50">
+      {(queryMutation.isPending || queryMutation.data) && (
+        <ResponseStatusBar
+          status={queryMutation.data?.status}
+          time={queryMutation.data?.time}
+          size={queryMutation.data?.size}
+        />
+      )}
       {queryMutation.error ? (
-        <div className="flex flex-col gap-2">
-          {showPathParamsWarning && (
-            <Callout type="caution">
-              Some path parameters are missing values. Please fill them in to
-              ensure the request is sent correctly.
-            </Callout>
-          )}
-          <Card>
-            <CardHeader>
-              <CardTitle>Request failed</CardTitle>
-            </CardHeader>
-            <CardContent>
-              Error:{" "}
+        <div className="max-w-2/3 mx-auto mt-20">
+          <Alert>
+            <UnplugIcon size={24} strokeWidth={1.5} className="me-5" />
+            <AlertTitle>Request failed</AlertTitle>
+            <AlertDescription>
               {queryMutation.error.message ||
                 String(queryMutation.error) ||
                 "Unexpected error"}
-            </CardContent>
-          </Card>
+            </AlertDescription>
+          </Alert>
         </div>
       ) : queryMutation.data ? (
-        <Tabs defaultValue="response">
-          <TabsList>
-            <TabsTrigger value="request">Request</TabsTrigger>
-            <TabsTrigger value="response">
-              Response
-              <span
-                className={cn(
-                  "text-xs font-mono ms-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}
-              isBinary={queryMutation.data.isBinary}
-              fileName={queryMutation.data.fileName}
-              blob={queryMutation.data.blob}
-            />
-          </TabsContent>
-        </Tabs>
-      ) : (
+        <ResponseTab
+          request={queryMutation.data.request}
+          size={queryMutation.data.size}
+          headers={queryMutation.data.headers}
+          body={queryMutation.data.body}
+          isBinary={queryMutation.data.isBinary}
+          fileName={queryMutation.data.fileName}
+          blob={queryMutation.data.blob}
+        />
+      ) : queryMutation.isPending ? (
         <div className="grid place-items-center h-full">
-          {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",
-                )}
+          <div className="flex flex-col gap-2 items-center mt-20">
+            <Spinner />
+            <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"
               >
-                Looks like the request is taking longer than expected.
-                <Button
-                  type="button"
-                  onClick={onCancel}
-                  size="sm"
-                  className="w-fit"
-                  variant="outline"
-                >
-                  Cancel
-                </Button>
-              </div>
+                Cancel
+              </Button>
             </div>
-          ) : (
+          </div>
+        </div>
+      ) : (
+        <div className="h-full grid place-items-center">
+          <div className="flex flex-col gap-4 items-center">
+            <SendIcon
+              size={64}
+              className="text-muted-foreground"
+              strokeWidth={1.2}
+            />
             <span className="text-[16px] font-semibold text-muted-foreground">
-              Send a request first to see the response here
+              Send your first request
             </span>
-          )}
+            {tip}
+          </div>
         </div>
       )}
     </div>

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

@@ -9,11 +9,11 @@ export const SchemaExampleAndDefault = ({
   const example = schema.examples?.at(0);
   const defaultValue = schema.default;
 
-  if (!example && !defaultValue) return null;
+  if (example === undefined && defaultValue === undefined) return null;
 
   return (
     <div className="flex flex-col gap-1 text-xs">
-      {example && (
+      {example !== undefined && (
         <div>
           <span className="text-muted-foreground">Example: </span>
           <SelectOnClick className="border rounded-sm px-1 font-mono">
@@ -23,7 +23,7 @@ export const SchemaExampleAndDefault = ({
           </SelectOnClick>
         </div>
       )}
-      {defaultValue && (
+      {defaultValue !== undefined && (
         <div>
           <span className="text-muted-foreground">Default: </span>
           <SelectOnClick className="border rounded-sm px-1 font-mono">

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

@@ -2,10 +2,9 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 import { InlineCode } from "../../../components/InlineCode.js";
-import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import { Markdown } 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 { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
@@ -117,7 +116,7 @@ export const SchemaPropertyItem = ({
         </div>
         {schema.description && (
           <Markdown
-            className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+            className="text-sm leading-normal"
             content={schema.description}
           />
         )}

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

@@ -1,8 +1,8 @@
 import { InfoIcon } from "lucide-react";
-import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import { Markdown } from "../../../components/Markdown.js";
+import { Typography } from "../../../components/Typography.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Card } from "../../../ui/Card.js";
-import { cn } from "../../../util/cn.js";
 import { groupBy } from "../../../util/groupBy.js";
 import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
@@ -17,7 +17,7 @@ import { hasLogicalGroupings, isBasicType } from "./utils.js";
 const renderMarkdown = (content?: string) =>
   content && (
     <Markdown
-      className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+      className="text-sm leading-normal line-clamp-4"
       content={content}
     />
   );
@@ -86,12 +86,7 @@ export const SchemaView = ({
       typeof schema.additionalProperties === "object" ? (
         <SchemaView schema={schema.additionalProperties} />
       ) : schema.additionalProperties === true ? (
-        <div
-          className={cn(
-            ProseClasses,
-            "text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1",
-          )}
-        >
+        <Typography className="text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1">
           <span>Additional properties are allowed</span>
           <a
             className="p-0.5 -m-0.5"
@@ -101,7 +96,7 @@ export const SchemaView = ({
           >
             <InfoIcon size={14} />
           </a>
-        </div>
+        </Typography>
       ) : null;
 
     return (

package/src/lib/plugins/openapi/schema/utils.ts

@@ -4,8 +4,9 @@ import type { SchemaObject } from "../../../oas/parser/index.js";
 export const isBasicType = (
   type: unknown,
 ): type is "string" | "number" | "boolean" | "integer" | "null" =>
-  typeof type === "string" &&
-  ["string", "number", "boolean", "integer", "null"].includes(type);
+  (typeof type === "string" &&
+    ["string", "number", "boolean", "integer", "null"].includes(type)) ||
+  (Array.isArray(type) && type.every(isBasicType));
 
 export const isArrayType = (value: SchemaObject) =>
   value.type === "array" ||

package/src/lib/ui/CodeBlock.tsx

@@ -1,7 +1,8 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
 import type { ReactNode } from "react";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { cn } from "../util/cn.js";
+import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
 
 export type CodeBlockProps = {
   className?: string;
@@ -26,7 +27,7 @@ export const CodeBlock = ({
   showLineNumbers,
   ...props
 }: CodeBlockProps) => {
-  const [isCopied, setIsCopied] = useState(false);
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
   const ref = useRef<HTMLDivElement>(null);
 
   if (!children) return null;
@@ -41,7 +42,7 @@ export const CodeBlock = ({
       <div className="border-b flex items-center h-10 font-sans bg-black/2">
         <div className="flex-1 text-sm w-full px-4">
           {title}
-          {showLanguageIndicator && (
+          {showLanguageIndicator && language && (
             <span className="text-muted-foreground ml-2">({language})</span>
           )}
         </div>{" "}
@@ -57,9 +58,7 @@ export const CodeBlock = ({
             onClick={() => {
               if (!ref.current?.textContent) return;
 
-              setIsCopied(true);
-              void navigator.clipboard.writeText(ref.current.textContent);
-              setTimeout(() => setIsCopied(false), 2000);
+              copyToClipboard(ref.current.textContent);
             }}
           >
             {isCopied ? (

package/src/lib/ui/Dialog.tsx

@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="absolute right-4 top-4 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">
+        <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" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -34,7 +34,7 @@ export const EmbeddedCodeBlock = ({
   return (
     <div
       className={cn(
-        "code-block-wrapper relative group bg-muted/50 rounded-md",
+        "code-block-wrapper relative group bg-muted/50",
         showLineNumbers && "line-numbers",
       )}
     >

package/src/lib/ui/Select.tsx

@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}

package/src/lib/util/os.ts

@@ -0,0 +1,18 @@
+export function getOS(): "apple" | "linux" | "unix" | "windows" | undefined {
+  const notFound = -1;
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.indexOf("win") !== notFound) {
+    return "windows";
+  } else if (userAgent.indexOf("mac") !== notFound) {
+    return "apple";
+  } else if (userAgent.indexOf("linux") !== notFound) {
+    return "linux";
+  } else if (userAgent.indexOf("x11") !== notFound) {
+    return "unix";
+  }
+  return;
+}
+
+export function isAppleDevice(): boolean {
+  return getOS() === "apple";
+}

package/src/lib/util/useCopyToClipboard.ts

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+
+export const useCopyToClipboard = (timeout = 2000) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyToClipboard = useCallback(
+    (text: string) => {
+      void navigator.clipboard.writeText(text);
+      setIsCopied(true);
+
+      setTimeout(() => setIsCopied(false), timeout);
+    },
+    [timeout],
+  );
+
+  return [isCopied, copyToClipboard] as const;
+};