zudoku 0.0.0-f3d517c → 0.0.0-f40ea27

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

@@ -1,122 +1,98 @@
 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,
+  isFinished,
+  progress,
 }: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
-  showPathParamsWarning: boolean;
   showLongRunningWarning?: boolean;
   onCancel?: () => void;
+  isFinished: boolean;
+  progress: number;
+  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}
+          isFinished={isFinished}
+          progress={progress}
+        />
+      )}
       {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}
     />
   );
@@ -47,7 +47,7 @@ export const SchemaView = ({
       <Card className="overflow-hidden">
         {cardHeader}
         <div className="text-sm text-muted-foreground italic p-4">
-          No schema specified
+          No data returned
         </div>
       </Card>
     );
@@ -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/plugins/openapi/util/{createSidebarCategory.tsx → createNavigationCategory.tsx}

@@ -1,8 +1,8 @@
-import type { SidebarItem } from "../../../../config/validators/SidebarSchema.js";
+import type { NavigationItem } from "../../../../config/validators/NavigationSchema.js";
 import type { OperationResult } from "../index.js";
 import { MethodColorMap } from "./methodColorMap.js";
 
-export const createSidebarCategory = ({
+export const createNavigationCategory = ({
   label,
   path,
   operations,
@@ -14,12 +14,13 @@ export const createSidebarCategory = ({
   operations: OperationResult[];
   collapsible?: boolean;
   collapsed?: boolean;
-}): SidebarItem => ({
+}): NavigationItem => ({
   type: "category",
   label,
   link: {
     type: "doc" as const,
-    id: path,
+    path,
+    file: path,
     label,
   },
   collapsible,
@@ -27,7 +28,7 @@ export const createSidebarCategory = ({
   items: operations.map((operation) => ({
     type: "link" as const,
     label: operation.summary ?? operation.path,
-    href: `${path}#${operation.slug}`,
+    to: `${path}#${operation.slug}`,
     badge: {
       label: operation.method,
       color: MethodColorMap[operation.method.toLowerCase()]!,

package/src/lib/plugins/openapi/util/getRoutes.tsx

@@ -12,7 +12,7 @@ import type { GraphQLClient } from "../client/GraphQLClient.js";
 import { useCreateQuery } from "../client/useCreateQuery.js";
 import { useOasConfig } from "../context.js";
 import {
-  GetSidebarOperationsQuery,
+  GetNavigationOperationsQuery,
   type OpenApiPluginOptions,
   UNTAGGED_PATH,
 } from "../index.js";
@@ -71,7 +71,7 @@ const NonTagPagesOperationList = ({
   const { type, input } = useOasConfig();
   const { tag: currentTag } = useParams();
   const location = useLocation();
-  const query = useCreateQuery(GetSidebarOperationsQuery, { type, input });
+  const query = useCreateQuery(GetNavigationOperationsQuery, { type, input });
   const {
     data: { schema },
   } = useSuspenseQuery(query);

package/src/lib/plugins/openapi/util/methodColorMap.tsx

@@ -1,4 +1,4 @@
-import { ColorMap } from "../../../components/navigation/SidebarBadge.js";
+import { type ColorMap } from "../../../components/navigation/NavigationBadge.js";
 
 export const MethodColorMap: Record<string, keyof typeof ColorMap> = {
   get: "green",

package/src/lib/ui/Alert.tsx

@@ -1,16 +1,15 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
-
 import { cn } from "../util/cn.js";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-card text-card-foreground",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
       },
     },
     defaultVariants: {
@@ -19,41 +18,48 @@ const alertVariants = cva(
   },
 );
 
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-));
-Alert.displayName = "Alert";
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-AlertTitle.displayName = "AlertTitle";
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = "AlertDescription";
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
 export { Alert, AlertDescription, AlertTitle };

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;
@@ -13,22 +14,20 @@ export type CodeBlockProps = {
   children?: ReactNode;
   code?: ReactNode;
   showCopy?: "hover" | "always" | "never";
-  showCopyText?: boolean;
   disabled?: boolean;
   showLineNumbers?: boolean;
 };
 
 export const CodeBlock = ({
   children,
-  title,
+  title = "Code",
   language,
   showCopy = "hover",
-  showCopyText,
-  showLanguageIndicator = true,
+  showLanguageIndicator = false,
   showLineNumbers,
   ...props
 }: CodeBlockProps) => {
-  const [isCopied, setIsCopied] = useState(false);
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
   const ref = useRef<HTMLDivElement>(null);
 
   if (!children) return null;
@@ -36,15 +35,45 @@ export const CodeBlock = ({
   return (
     <div
       className={cn(
-        "code-block-wrapper relative group bg-muted/50 rounded-md",
+        "border code-block-wrapper relative group bg-muted/50 rounded-md overflow-hidden",
         showLineNumbers && "line-numbers",
       )}
     >
-      {title && (
-        <div className="text-xs text-muted-foreground top-2 font-mono border-b w-full py-2 px-4 ">
+      <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}
-        </div>
-      )}
+          {showLanguageIndicator && language && (
+            <span className="text-muted-foreground ml-2">({language})</span>
+          )}
+        </div>{" "}
+        {showCopy !== "never" && (
+          <button
+            type="button"
+            aria-label="Copy code"
+            title="Copy code"
+            className={cn(
+              "cursor:pointer h-full hover:border-l-border active:shadow-none active:inset-shadow-xs hover:inset-shadow-xs flex items-center gap-2 px-4 outline-border text-sm hover:bg-black/5 transition-all",
+            )}
+            disabled={isCopied}
+            onClick={() => {
+              if (!ref.current?.textContent) return;
+
+              copyToClipboard(ref.current.textContent);
+            }}
+          >
+            {isCopied ? (
+              <CheckIcon
+                className="text-emerald-600"
+                size={14}
+                strokeWidth={2.5}
+                absoluteStrokeWidth
+              />
+            ) : (
+              <CopyIcon size={14} />
+            )}
+          </button>
+        )}
+      </div>
       <div
         className={cn(
           "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4",
@@ -54,50 +83,6 @@ export const CodeBlock = ({
       >
         {children}
       </div>
-      {showLanguageIndicator && (
-        <span
-          className={cn(
-            "absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0",
-            title && "top-12",
-            showCopy === "always" && "hidden",
-          )}
-        >
-          {language}
-        </span>
-      )}
-      {showCopy !== "never" && (
-        <button
-          type="button"
-          aria-label="Copy code"
-          title="Copy code"
-          className={cn(
-            "absolute top-2 end-2 p-2 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
-            title && "top-10",
-            showCopy === "hover" && "opacity-0 group-hover:opacity-100",
-            showCopyText && "flex gap-2 items-center font-medium",
-          )}
-          disabled={isCopied}
-          onClick={() => {
-            if (!ref.current?.textContent) return;
-
-            setIsCopied(true);
-            void navigator.clipboard.writeText(ref.current.textContent);
-            setTimeout(() => setIsCopied(false), 2000);
-          }}
-        >
-          {isCopied ? (
-            <CheckIcon
-              className="text-emerald-600"
-              size={16}
-              strokeWidth={2.5}
-              absoluteStrokeWidth
-            />
-          ) : (
-            <CopyIcon size={16} />
-          )}
-          {showCopyText && "Copy"}
-        </button>
-      )}
     </div>
   );
 };

package/src/lib/ui/Dialog.tsx

@@ -45,8 +45,8 @@ 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">
-          <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>
       )}