zudoku 0.63.1 → 0.64.0

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

@@ -1,4 +1,6 @@
+import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
 import {
   Dialog,
   DialogContent,
@@ -6,18 +8,28 @@ import {
   DialogFooter,
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
+import { Label } from "zudoku/ui/Label.js";
 
 const RequestLoginDialog = ({
   open,
   setOpen,
   onSignUp,
   onLogin,
+  onSkip,
 }: {
   open: boolean;
   onSignUp?: () => void;
   onLogin?: () => void;
   setOpen: (open: boolean) => void;
+  onSkip?: (rememberSkip: boolean) => void;
 }) => {
+  const [rememberSkip, setRememberSkip] = useState(false);
+
+  const handleSkip = () => {
+    onSkip?.(rememberSkip);
+    setOpen(false);
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
@@ -26,8 +38,15 @@ const RequestLoginDialog = ({
           The Playground is a tool for developers to test and explore our APIs.
           To use the Playground, you need to login.
         </DialogDescription>
+        <Label className="flex items-center gap-2 font-normal">
+          <Checkbox
+            checked={rememberSkip}
+            onCheckedChange={(checked) => setRememberSkip(checked === true)}
+          />
+          Don't show this again
+        </Label>
         <DialogFooter className="flex gap-2 sm:justify-between">
-          <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+          <Button type="button" variant="outline" onClick={handleSkip}>
             Skip
           </Button>
           <div className="flex gap-2">

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

@@ -84,7 +84,7 @@ export const ResponseStatusBar = ({
   };
 
   return (
-    <div className="relative flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
+    <div className="relative shrink-0 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]}` : ""}
@@ -104,7 +104,7 @@ export const ResponseStatusBar = ({
         </div>
       </div>
       <div
-        className="h-full bg-neutral-500/10 absolute left-0 -bottom-0 z-10 transition-all duration-200 ease-in-out"
+        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}%`,

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

@@ -5,7 +5,9 @@ import {
   DownloadIcon,
   EyeIcon,
   EyeOffIcon,
+  MinusCircleIcon,
   PlusCircleIcon,
+  SquareCodeIcon,
 } from "lucide-react";
 import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
@@ -22,6 +24,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
 import { cn } from "../../../../util/cn.js";
 import createVariantComponent from "../../../../util/createVariantComponent.js";
 import { humanFileSize } from "../../../../util/humanFileSize.js";
@@ -30,7 +33,6 @@ import {
   CollapsibleHeaderTrigger,
 } from "../CollapsibleHeader.js";
 import { convertToTypes } from "./convertToTypes.js";
-import { Highlight } from "./Highlight.js";
 
 const mimeTypeToLanguage = (mimeType: string) => {
   const mimeTypeMapping = {
@@ -92,28 +94,35 @@ const Row = createVariantComponent(
   "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");
+const RowContent = createVariantComponent("div", "py-1 break-words");
 const RowValue = ({ value, header }: { value: string; header: string }) => {
   const secretHeaders = ["authorization", "key", "secret", "token"];
   const isSecret = secretHeaders.includes(header.toLowerCase());
   const [revealed, setRevealed] = useState(!isSecret);
   return (
     <RowContent
-      className={cn(isSecret && "cursor-pointer flex group")}
+      className={cn(
+        "max-h-28 overflow-auto",
+        isSecret && "cursor-pointer flex group",
+      )}
       onClick={() => {
         if (isSecret) {
           setRevealed((prev) => !prev);
         }
       }}
     >
-      <SecretText secret={value} previewChars={0} revealed={revealed} />
-      {isSecret ? (
-        revealed ? (
-          <EyeOffIcon size={14} className={cn("hidden group-hover:block")} />
-        ) : (
-          <EyeIcon size={14} className={cn("hidden group-hover:block")} />
-        )
-      ) : null}
+      {!isSecret ? (
+        value
+      ) : (
+        <>
+          <SecretText secret={value} previewChars={0} revealed={revealed} />
+          {revealed ? (
+            <EyeOffIcon size={14} className={cn("hidden group-hover:block")} />
+          ) : (
+            <EyeIcon size={14} className={cn("hidden group-hover:block")} />
+          )}
+        </>
+      )}
     </RowContent>
   );
 };
@@ -174,13 +183,13 @@ export const ResponseTab = ({
     <>
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownRightIcon size={16} />
+          <CornerDownRightIcon size={14} />
           <CollapsibleHeader className="col-span-2">
-            Header Request
+            Request Headers
           </CollapsibleHeader>
         </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-2 gap-x-6 text-sm">
+          <div className="grid grid-cols-[2fr_3fr] gap-x-6 text-sm">
             {request.headers
               .slice(0, MAX_HEADERS_TO_SHOW)
               .map(([key, value]) => (
@@ -189,19 +198,45 @@ export const ResponseTab = ({
                   <RowValue value={value} header={key} />
                 </Row>
               ))}
+            {request.headers.length > MAX_HEADERS_TO_SHOW && (
+              <Collapsible className="col-span-full grid-cols-subgrid grid group">
+                <CollapsibleTrigger className="data-[state=open]:hidden justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                  Show {request.headers.length - MAX_HEADERS_TO_SHOW} more
+                  headers
+                  <PlusCircleIcon size={12} className="text-muted-foreground" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
+                  {request.headers
+                    .slice(MAX_HEADERS_TO_SHOW)
+                    .map(([key, value]) => (
+                      <Row key={key}>
+                        <RowContent>{key}</RowContent>
+                        <RowValue value={value} header={key} />
+                      </Row>
+                    ))}
+                  <CollapsibleTrigger className="justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                    Hide {request.headers.length - MAX_HEADERS_TO_SHOW} headers
+                    <MinusCircleIcon
+                      size={12}
+                      className="text-muted-foreground"
+                    />
+                  </CollapsibleTrigger>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
           </div>
         </CollapsibleContent>
       </Collapsible>
 
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownLeftIcon size={16} />
+          <CornerDownLeftIcon size={14} />
           <CollapsibleHeader className="col-span-2">
-            Header Response
+            Response Headers
           </CollapsibleHeader>
         </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-2 gap-x-6 text-sm">
+          <div className="grid grid-cols-[2fr_3fr] gap-x-6 text-sm">
             {sortedHeaders.slice(0, MAX_HEADERS_TO_SHOW).map(([key, value]) => (
               <Row key={key}>
                 <RowContent>{key}</RowContent>
@@ -211,10 +246,7 @@ export const ResponseTab = ({
             {sortedHeaders.length > MAX_HEADERS_TO_SHOW && (
               <Collapsible className="col-span-full grid-cols-subgrid grid group">
                 <CollapsibleTrigger className="data-[state=open]:hidden justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
-                  <span>
-                    Show {sortedHeaders.length - MAX_HEADERS_TO_SHOW} more
-                    headers
-                  </span>
+                  Show {sortedHeaders.length - MAX_HEADERS_TO_SHOW} more headers
                   <PlusCircleIcon size={12} className="text-muted-foreground" />
                 </CollapsibleTrigger>
                 <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
@@ -226,6 +258,13 @@ export const ResponseTab = ({
                         <RowValue value={value} header={key} />
                       </Row>
                     ))}
+                  <CollapsibleTrigger className="justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                    Hide {sortedHeaders.length - MAX_HEADERS_TO_SHOW} headers
+                    <MinusCircleIcon
+                      size={12}
+                      className="text-muted-foreground"
+                    />
+                  </CollapsibleTrigger>
                 </CollapsibleContent>
               </Collapsible>
             )}
@@ -233,26 +272,30 @@ export const ResponseTab = ({
         </CollapsibleContent>
       </Collapsible>
 
-      <div className="flex gap-2 justify-between items-center border-b h-10">
+      <div className="flex gap-2 justify-between items-center border-b px-2 flex-0">
+        <CollapsibleHeader className="flex items-center gap-2">
+          <SquareCodeIcon size={14} />
+          Response body
+        </CollapsibleHeader>
         {jsonContent && !isBinary && (
-          <div className="px-2">
-            <Select
-              value={view}
-              onValueChange={(value) => setView(value as "formatted" | "raw")}
-            >
-              <SelectTrigger className="min-w-32 border-none h-8">
-                <SelectValue placeholder="View" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="formatted">Formatted</SelectItem>
-                <SelectItem value="raw">Raw</SelectItem>
-                <SelectItem value="types">Types</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <Select
+            value={view}
+            onValueChange={(value) =>
+              setView(value as "formatted" | "raw" | "types")
+            }
+          >
+            <SelectTrigger className="max-w-32 border-0 bg-transparent">
+              <SelectValue placeholder="View" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="formatted">Formatted</SelectItem>
+              <SelectItem value="raw">Raw</SelectItem>
+              <SelectItem value="types">Types</SelectItem>
+            </SelectContent>
+          </Select>
         )}
       </div>
-      <div>
+      <div className="flex-1">
         {isBinary ? (
           <div className="p-4 text-center">
             <div className="flex flex-col items-center gap-4">
@@ -272,26 +315,27 @@ export const ResponseTab = ({
             </div>
           </div>
         ) : (
-          <div className="overflow-auto max-w-full p-4 text-xs max-h-[calc(83.333vh-180px)]">
-            <Highlight
-              language={
-                view === "types"
-                  ? "typescript"
-                  : view === "raw"
-                    ? jsonContent
-                      ? "plain"
-                      : detectedLanguage
-                    : "json"
-              }
-              code={
-                (view === "raw"
-                  ? body
-                  : view === "types"
-                    ? types.data?.lines.join("\n")
-                    : beautifiedBody) ?? ""
-              }
-            />
-          </div>
+          <SyntaxHighlight
+            className="text-xs flex-1"
+            embedded
+            fullHeight
+            language={
+              view === "types"
+                ? "typescript"
+                : view === "raw"
+                  ? jsonContent
+                    ? "plain"
+                    : detectedLanguage
+                  : "json"
+            }
+            code={
+              (view === "raw"
+                ? body
+                : view === "types"
+                  ? types.data?.lines.join("\n")
+                  : beautifiedBody) ?? ""
+            }
+          />
         )}
       </div>
     </>

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

@@ -25,7 +25,7 @@ export const ResultPanel = ({
   tip?: React.ReactNode;
 }) => {
   return (
-    <div className="overflow-y-auto h-[80vh] bg-muted/50">
+    <div className="flex flex-col overflow-y-auto h-[80vh] bg-muted/50">
       {(queryMutation.isPending || queryMutation.data) && (
         <ResponseStatusBar
           status={queryMutation.data?.status}

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

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { syncZustandState } from "../../../util/syncZustandState.js";
 
 type RememberSkipLoginState = {
   skipLogin: boolean;
@@ -18,3 +19,5 @@ export const useRememberSkipLoginDialog = create<RememberSkipLoginState>()(
     },
   ),
 );
+
+syncZustandState(useRememberSkipLoginDialog);

package/src/lib/shiki.ts

@@ -7,7 +7,7 @@ import {
 } from "@shikijs/transformers";
 import type { Root } from "hast";
 import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import { Fragment, type JSX } from "react";
+import { createElement, Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import type {
   BundledLanguage,
@@ -21,6 +21,9 @@ import type { Pluggable } from "unified";
 import { visit } from "unist-util-visit";
 import { cn } from "./util/cn.js";
 
+export const HIGHLIGHT_CODE_BLOCK_CLASS =
+  "overflow-x-auto scrollbar not-inline";
+
 const engine = createJavaScriptRegexEngine({ forgiving: true });
 export const highlighter = await createHighlighterCore({
   engine,
@@ -143,5 +146,16 @@ export const highlight = (
     themes,
   });
 
-  return toJsxRuntime(value, { Fragment, jsx, jsxs }) as JSX.Element;
+  return toJsxRuntime(value, {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      code: (props) =>
+        createElement("code", {
+          ...props,
+          className: cn(props.className, HIGHLIGHT_CODE_BLOCK_CLASS),
+        }),
+    },
+  });
 };

package/src/lib/ui/Callout.tsx

@@ -14,7 +14,8 @@ const stylesMap = {
     bg: "bg-gray-100 dark:bg-zinc-800/50",
     iconColor: "text-gray-600 dark:text-zinc-300",
     titleColor: "text-gray-600 dark:text-zinc-300",
-    textColor: "text-gray-600 dark:text-zinc-300",
+    textColor:
+      "text-gray-600 dark:text-zinc-300 [&_a]:hover:text-gray-700 [&_a]:dark:hover:text-zinc-400",
     Icon: InfoIcon as LucideIcon,
   },
   tip: {
@@ -22,7 +23,8 @@ const stylesMap = {
     bg: "bg-green-200/25 dark:bg-green-950/70",
     iconColor: "text-green-600 dark:text-green-200",
     titleColor: "text-green-700 dark:text-green-200",
-    textColor: "text-green-600 dark:text-green-50",
+    textColor:
+      "text-green-600 dark:text-green-50 [&_a]:hover:text-green-700 [&_a]:dark:hover:text-green-300",
     Icon: LightbulbIcon as LucideIcon,
   },
   info: {
@@ -30,7 +32,8 @@ const stylesMap = {
     bg: "bg-blue-50 dark:bg-blue-950/40",
     iconColor: "text-blue-400 dark:text-blue-200",
     titleColor: "text-blue-700 dark:text-blue-200",
-    textColor: "text-blue-600 dark:text-blue-100",
+    textColor:
+      "text-blue-600 dark:text-blue-100 [&_a]:hover:text-blue-800 [&_a]:dark:hover:text-blue-300",
     Icon: InfoIcon as LucideIcon,
   },
   caution: {
@@ -38,7 +41,8 @@ const stylesMap = {
     bg: "bg-yellow-100/60 dark:bg-yellow-400/10",
     iconColor: "text-yellow-500 dark:text-yellow-300",
     titleColor: "text-yellow-600 dark:text-yellow-300",
-    textColor: "text-yellow-700 dark:text-yellow-200",
+    textColor:
+      "text-yellow-700 dark:text-yellow-200 [&_a]:hover:text-yellow-800 [&_a]:dark:hover:text-yellow-300",
     Icon: AlertTriangleIcon as LucideIcon,
   },
   danger: {
@@ -46,7 +50,8 @@ const stylesMap = {
     bg: "bg-rose-50 dark:bg-rose-950/40",
     iconColor: "text-rose-400 dark:text-rose-300",
     titleColor: "text-rose-800 dark:text-rose-300",
-    textColor: "text-rose-700 dark:text-rose-100",
+    textColor:
+      "text-rose-700 dark:text-rose-100 [&_a]:hover:text-rose-800 [&_a]:dark:hover:text-rose-300",
     Icon: ShieldAlertIcon as LucideIcon,
   },
 } as const;

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -19,13 +19,14 @@ export type CodeBlockProps = {
 
 export const EmbeddedCodeBlock = ({
   children,
+  fullHeight,
   language,
   showCopy = "hover",
   showCopyText,
   showLanguageIndicator = true,
   showLineNumbers,
   ...props
-}: CodeBlockProps) => {
+}: CodeBlockProps & { fullHeight?: boolean }) => {
   const [isCopied, setIsCopied] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -36,11 +37,13 @@ export const EmbeddedCodeBlock = ({
       className={cn(
         "code-block-wrapper relative group bg-muted/50",
         showLineNumbers && "line-numbers",
+        fullHeight && "h-full",
       )}
     >
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto [&>pre]:p-2",
+          "code-block text-sm not-prose scrollbar [&>pre]:overflow-x-auto [&>pre]:p-2",
+          fullHeight && "h-full [&>pre]:h-full",
           props.className,
         )}
         ref={ref}
@@ -50,7 +53,7 @@ export const EmbeddedCodeBlock = ({
       {showLanguageIndicator && (
         <span
           className={cn(
-            "absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0",
+            "absolute top-1.5 end-3 text-[11px]! font-mono text-muted-foreground transition group-hover:opacity-0",
             showCopy === "always" && "hidden",
           )}
         >

package/src/lib/ui/ReactComponentDoc.tsx

@@ -1,17 +1,19 @@
 import { Badge } from "./Badge.js";
-import { Card } from "./Card.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./Card.js";
 
 type PropType =
   | string
-  | {
-      name: string;
-      description: string;
-      required: boolean;
-    };
+  | { name: string; description: string; required: boolean };
 
 type ReactComponentDocProps = {
   component: {
-    __docgenInfo: {
+    __docgenInfo?: {
       displayName: string;
       description: string;
       props: Record<
@@ -33,18 +35,16 @@ export const ReactComponentDoc = ({ component }: ReactComponentDocProps) => {
 
   return (
     <Card className="not-prose">
-      <div className="flex flex-col gap-2">
-        <div className="flex flex-col gap-2  border-b p-6">
-          <h2 className="text-lg font-medium">Component Properties</h2>
-          <p className="text-sm text-muted-foreground">
-            The properties of the component.
-          </p>
-        </div>
-        <div className="grid grid-cols-[1fr_auto_auto] gap-2 divide-y">
+      <CardContent className="p-0">
+        <CardHeader className="border-b mb-1 px-4 py-5">
+          <CardTitle>Component Properties</CardTitle>
+          <CardDescription>The properties of the component.</CardDescription>
+        </CardHeader>
+        <div className="grid grid-cols-[1fr_auto_auto] gap-2 divide-y -mx-4 px-4">
           {Object.entries(docgen.props).map(([key, value]) => (
             <div
               key={key}
-              className="px-6 pb-2 col-span-full grid grid-cols-subgrid"
+              className="px-4 pb-2 col-span-full grid grid-cols-subgrid"
             >
               <span className="font-medium text-primary">{key}</span>
               <div>
@@ -62,7 +62,7 @@ export const ReactComponentDoc = ({ component }: ReactComponentDocProps) => {
             </div>
           ))}
         </div>
-      </div>
+      </CardContent>
     </Card>
   );
 };

package/src/lib/ui/SyntaxHighlight.tsx

@@ -7,7 +7,12 @@ import { EmbeddedCodeBlock } from "./EmbeddedCodeBlock.js";
 
 type SyntaxHighlightProps = CodeBlockProps &
   (
-    | { code: string; embedded?: boolean; children?: never }
+    | {
+        code: string;
+        embedded?: boolean;
+        children?: never;
+        fullHeight?: boolean;
+      }
     | { code?: never; children: string; embedded?: boolean }
   );
 

package/src/lib/util/MdxComponents.tsx

@@ -1,11 +1,12 @@
 import type { MDXComponents } from "mdx/types.js";
-import { CodeBlock } from "zudoku/ui/CodeBlock.js";
 import { AnchorLink } from "../components/AnchorLink.js";
 import { Framed } from "../components/Framed.js";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.js";
+import { HIGHLIGHT_CODE_BLOCK_CLASS } from "../shiki.js";
 import { Button } from "../ui/Button.js";
 import { Callout } from "../ui/Callout.js";
+import { CodeBlock } from "../ui/CodeBlock.js";
 import { Stepper } from "../ui/Stepper.js";
 import { SyntaxHighlight } from "../ui/SyntaxHighlight.js";
 import { cn } from "./cn.js";
@@ -109,10 +110,7 @@ export const MdxComponents = {
         showLineNumbers={showLineNumbers}
         title={title}
       >
-        <code
-          className={cn(className, "overflow-x-auto scrollbar not-inline")}
-          {...props}
-        >
+        <code className={cn(className, HIGHLIGHT_CODE_BLOCK_CLASS)} {...props}>
           {children}
         </code>
       </CodeBlock>

package/src/lib/util/syncZustandState.ts

@@ -0,0 +1,22 @@
+import type { Mutate, StoreApi } from "zustand";
+
+export type StoreWithPersist<T> = Mutate<
+  StoreApi<T>,
+  [["zustand/persist", unknown]]
+>;
+
+export const syncZustandState = <T>(store: StoreWithPersist<T>) => {
+  const storageEventCallback = (e: StorageEvent) => {
+    if (e.key === store.persist.getOptions().name && e.newValue) {
+      void store.persist.rehydrate();
+    }
+  };
+
+  if (typeof window === "undefined") return;
+
+  window.addEventListener("storage", storageEventCallback);
+
+  return () => {
+    window.removeEventListener("storage", storageEventCallback);
+  };
+};