zudoku 0.25.3 → 0.26.1

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -2,7 +2,7 @@ import { useMDXComponents } from "@mdx-js/react";
 import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { type PropsWithChildren, useEffect } from "react";
-import { Link } from "react-router";
+import { Link, useHref } from "react-router";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
@@ -51,6 +51,13 @@ export const MdxPage = ({
   }
 >) => {
   const categoryTitle = useCurrentItem()?.categoryLabel;
+  let canonicalUrl = null;
+  const path = useHref("");
+  if (typeof window !== "undefined") {
+    const domain = window.location.origin;
+    canonicalUrl = `${domain}${path}`;
+  }
+
   const title = frontmatter.title;
   const category = frontmatter.category ?? categoryTitle;
   const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
@@ -87,6 +94,7 @@ export const MdxPage = ({
       <Helmet>
         <title>{pageTitle}</title>
         {excerpt && <meta name="description" content={excerpt} />}
+        {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
       </Helmet>
       <div
         className={cn(

package/src/lib/plugins/openapi/OperationList.tsx

@@ -13,6 +13,7 @@ import { useSelectedServerStore } from "../../authentication/state.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { useApiIdentities } from "../../components/context/ZudokuContext.js";
 import { cn } from "../../util/cn.js";
 import { Endpoint } from "./Endpoint.js";
 import { OperationListItem } from "./OperationListItem.js";
@@ -118,6 +119,9 @@ export const OperationList = () => {
   const description = result.data.schema.description;
   const navigate = useNavigate();
 
+  // Prefetch for Playground
+  useApiIdentities();
+
   // The summary property is preferable here as it is a short description of
   // the API, whereas the description property is typically longer and supports
   // commonmark formatting, making it ill-suited for use in the meta description

package/src/lib/plugins/openapi/ParameterListItem.tsx

@@ -47,17 +47,13 @@ export const ParameterListItem = ({
           )}
         </code>
         {paramSchema.type && (
-          <Badge variant="secondary">
+          <Badge variant="muted">
             {paramSchema.type === "array"
               ? `${paramSchema.items.type}[]`
               : paramSchema.type}
           </Badge>
         )}
         {parameter.required && <Badge variant="outline">required</Badge>}
-        {/* <span className="py-px px-1.5 font-medium bg-primary/75 text-primary-foreground rounded-lg">
-            required
-          </span>
-        )} */}
       </div>
       {parameter.description && (
         <Markdown

package/src/lib/plugins/openapi/PlaygroundDialogWrapper.tsx

@@ -1,20 +1,24 @@
 import type { OperationListItemResult } from "./OperationList.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
+import { Content } from "./SidecarExamples.js";
 
 export const PlaygroundDialogWrapper = ({
   server,
   servers,
   operation,
+  examples,
 }: {
   server: string;
   servers?: string[];
   operation: OperationListItemResult;
+  examples?: Content;
 }) => {
   const headers = operation.parameters
     ?.filter((p) => p.in === "header")
     .map((p) => ({
       name: p.name,
       defaultValue: p.examples?.find((x) => x.value)?.value ?? "",
+      defaultActive: false,
     }));
   const queryParams = operation.parameters
     ?.filter((p) => p.in === "query")
@@ -39,6 +43,7 @@ export const PlaygroundDialogWrapper = ({
       headers={headers}
       queryParams={queryParams}
       pathParams={pathParams}
+      examples={examples}
     />
   );
 };

package/src/lib/plugins/openapi/RequestBodySidecarBox.tsx

@@ -1,13 +1,19 @@
 import * as SidecarBox from "./SidecarBox.js";
 import { type Content, SidecarExamples } from "./SidecarExamples.js";
 
-export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
+export const RequestBodySidecarBox = ({
+  content,
+  onExampleChange,
+}: {
+  content: Content;
+  onExampleChange?: (example: unknown) => void;
+}) => {
   return (
     <SidecarBox.Root>
       <SidecarBox.Head className="text-xs flex justify-between items-center">
         <span className="font-mono">Request Body Example</span>
       </SidecarBox.Head>
-      <SidecarExamples content={content} />
+      <SidecarExamples content={content} onExampleChange={onExampleChange} />
     </SidecarBox.Root>
   );
 };

package/src/lib/plugins/openapi/Sidecar.tsx

@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { HTTPSnippet } from "@zudoku/httpsnippet";
-import { Fragment, useMemo, useTransition } from "react";
+import { Fragment, useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
 import { useSelectedServerStore } from "../../authentication/state.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
@@ -107,6 +107,7 @@ export const Sidecar = ({
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [, startTransition] = useTransition();
+  const [selectedExample, setSelectedExample] = useState<unknown>();
 
   const selectedLang = searchParams.get("lang") ?? "shell";
 
@@ -141,9 +142,11 @@ export const Sidecar = ({
   const { selectedServer } = useSelectedServerStore();
 
   const code = useMemo(() => {
-    const example = requestBodyContent?.[0]?.schema
-      ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
-      : undefined;
+    const example =
+      selectedExample ??
+      (requestBodyContent?.[0]?.schema
+        ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
+        : undefined);
 
     const snippet = new HTTPSnippet({
       method: operation.method.toLocaleUpperCase(),
@@ -166,6 +169,7 @@ export const Sidecar = ({
 
     return getConverted(snippet, selectedLang);
   }, [
+    selectedExample,
     requestBodyContent,
     operation.method,
     operation.path,
@@ -181,7 +185,7 @@ export const Sidecar = ({
       className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4"
     >
       <SidecarBox.Root>
-        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-4 gap-2 text-xs">
+        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-2.5 gap-2 text-xs">
           <span className="font-mono break-words">
             <span className={cn("font-semibold", methodTextColor)}>
               {operation.method.toLocaleUpperCase()}
@@ -194,6 +198,7 @@ export const Sidecar = ({
               server={result.data.schema.url}
               servers={result.data.schema.servers.map((server) => server.url)}
               operation={operation}
+              examples={requestBodyContent ?? undefined}
             />
           )}
         </SidecarBox.Head>
@@ -209,7 +214,7 @@ export const Sidecar = ({
                 />
               </CollapsibleCode>
             </SidecarBox.Body>
-            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-3">
+            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-2.5">
               <span>Show example in</span>
               <SimpleSelect
                 className="self-start max-w-[150px]"
@@ -229,7 +234,10 @@ export const Sidecar = ({
         )}
       </SidecarBox.Root>
       {isOnScreen && requestBodyContent && (
-        <RequestBodySidecarBox content={requestBodyContent} />
+        <RequestBodySidecarBox
+          content={requestBodyContent}
+          onExampleChange={setSelectedExample}
+        />
       )}
       {isOnScreen && operation.responses.length > 0 && (
         <ResponsesSidecarBox

package/src/lib/plugins/openapi/SidecarBox.tsx

@@ -16,7 +16,7 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "border-b bg-muted dark:bg-transparent text-card-foreground p-3",
+      "border-b bg-muted dark:bg-transparent text-card-foreground p-3 py-2.5",
       className,
     )}
   >

package/src/lib/plugins/openapi/SidecarExamples.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import { CollapsibleCode } from "./CollapsibleCode.js";
@@ -36,11 +36,13 @@ const getLanguage = (mediaType?: string): string => {
 export type SidecarExamplesProps = {
   content: Content;
   description?: string;
+  onExampleChange?: (example: unknown) => void;
 };
 
 export const SidecarExamples = ({
   content,
   description,
+  onExampleChange,
 }: SidecarExamplesProps) => {
   const [selectedContentTypeIndex, setSelectedContentTypeIndex] = useState(0);
   const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
@@ -67,6 +69,10 @@ export const SidecarExamples = ({
     );
   }
 
+  useEffect(() => {
+    onExampleChange?.(exampleValue);
+  }, [exampleValue, onExampleChange]);
+
   const formattedExample = formatForDisplay(exampleValue);
   const language = getLanguage(effectiveContent?.mediaType);
 
@@ -104,8 +110,13 @@ export const SidecarExamples = ({
         )}
       </SidecarBox.Body>
       {hasContent && (
-        <SidecarBox.Footer className="flex flex-col gap-2 text-xs py-1">
-          <div className="flex items-center gap-2 justify-between min-w-0">
+        <SidecarBox.Footer className="text-xs p-0">
+          {description && (
+            <div className="text-muted-foreground text-xs border-b px-3 py-2">
+              {description}
+            </div>
+          )}
+          <div className="flex items-center gap-2 justify-between min-w-0 px-3 py-2">
             <div className="flex items-center gap-2 min-w-0">
               {content.length > 1 ? (
                 <SimpleSelect
@@ -145,9 +156,6 @@ export const SidecarExamples = ({
               </div>
             )}
           </div>
-          {description && (
-            <div className="text-muted-foreground text-xs">{description}</div>
-          )}
         </SidecarBox.Footer>
       )}
     </>

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

@@ -0,0 +1,51 @@
+import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+import { Content, Example } from "../SidecarExamples.js";
+
+const ExamplesDropdown = ({
+  examples,
+  onSelect,
+}: {
+  examples: Content;
+  onSelect: (example: Example) => void;
+}) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Use Example</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        {examples.map((example) => {
+          return (
+            <div key={example.mediaType}>
+              <DropdownMenuLabel>{example.mediaType}</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                {example.examples?.map((example) => {
+                  return (
+                    <DropdownMenuItem
+                      key={example.name}
+                      onSelect={() => onSelect(example)}
+                    >
+                      {example.name}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuGroup>
+            </div>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ExamplesDropdown;

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

@@ -1,9 +1,48 @@
 import { XIcon } from "lucide-react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { useRef } from "react";
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  useFormContext,
+  UseFormRegister,
+} from "react-hook-form";
+import { Card } from "zudoku/ui/Card.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
 import { type PlaygroundForm } from "./Playground.js";
 
+const headerOptions = Object.freeze([
+  "Accept",
+  "Accept-Encoding",
+  "Accept-Language",
+  "Authorization",
+  "Cache-Control",
+  "Connection",
+  "Content-Disposition",
+  "Content-Encoding",
+  "Content-Language",
+  "Content-Length",
+  "Content-Range",
+  "Content-Security-Policy",
+  "Content-Type",
+  "Cookie",
+  "Date",
+  "ETag",
+  "Expires",
+  "Host",
+  "If-Modified-Since",
+  "Location",
+  "Origin",
+  "Pragma",
+  "Referer",
+  "Set-Cookie",
+  "User-Agent",
+  "X-Requested-With",
+]);
+
 export const Headers = ({
   control,
   register,
@@ -15,53 +54,111 @@ export const Headers = ({
     control,
     name: "headers",
   });
+  const { setValue } = useFormContext<PlaygroundForm>();
+  const valueRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const nameRefs = useRef<Array<HTMLInputElement | null>>([]);
+
+  const addNewHeader = () => {
+    append({
+      name: "",
+      value: "",
+      active: false,
+    } as PlaygroundForm["headers"][number]);
+  };
+
+  const handleHeaderEnter = (index: number) => {
+    valueRefs.current[index]?.focus();
+  };
+
+  const handleValueEnter = (index: number) => {
+    addNewHeader();
+    requestAnimationFrame(() => nameRefs.current[index + 1]?.focus());
+  };
 
   return (
     <div className="flex flex-col gap-2">
-      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
-        <tbody>
-          {fields.map((header, i) => (
-            <tr
-              key={header.id}
-              className="group has-[:focus]:bg-muted/50 hover:bg-muted/50"
-            >
-              <td className="flex gap-2 items-center">
-                <Input
-                  {...register(`headers.${i}.name`)}
-                  placeholder="Name"
-                  className="border-0 shadow-none text-xs font-mono"
-                  autoComplete="off"
-                />
-              </td>
-              <td>
-                <div className="flex items-center gap-2">
-                  <Input
-                    placeholder={"Value"}
-                    className="border-0 shadow-none text-xs font-mono"
-                    {...register(`headers.${i}.value`)}
-                    autoComplete="off"
+      <Card className="flex flex-col gap-2 overflow-hidden">
+        <table className="w-full">
+          <tbody>
+            {fields.map((header, i) => (
+              <tr
+                key={header.id}
+                className="group has-[:focus]:bg-muted/50 hover:bg-muted/50"
+              >
+                <td className="flex gap-2 items-center pl-3">
+                  <Controller
+                    control={control}
+                    name={`headers.${i}.active`}
+                    render={({ field }) => (
+                      <Checkbox
+                        variant="outline"
+                        id={`headers.${i}.active`}
+                        checked={field.value}
+                        onCheckedChange={(checked) => {
+                          field.onChange(checked);
+                        }}
+                      />
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name={`headers.${i}.name`}
+                    render={({ field }) => (
+                      <Autocomplete
+                        {...field}
+                        placeholder="Name"
+                        className="border-0 shadow-none bg-transparent text-xs font-mono"
+                        options={headerOptions}
+                        onEnterPress={() => handleHeaderEnter(i)}
+                        onChange={(e) => {
+                          field.onChange(e);
+                          setValue(`headers.${i}.active`, true);
+                        }}
+                        ref={(el) => {
+                          nameRefs.current[i] = el;
+                        }}
+                      />
+                    )}
                   />
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="text-muted-foreground opacity-0 group-hover:opacity-100"
-                    onClick={() => {
-                      remove(i);
-                    }}
-                    type="button"
-                  >
-                    <XIcon size={16} />
-                  </Button>
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+                </td>
+                <td>
+                  <div className="flex items-center gap-2">
+                    <Input
+                      placeholder="Value"
+                      className="w-full border-0 shadow-none text-xs font-mono"
+                      {...register(`headers.${i}.value`)}
+                      ref={(el) => {
+                        valueRefs.current[i] = el;
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && e.currentTarget.value.trim()) {
+                          handleValueEnter(i);
+                        }
+                      }}
+                      autoComplete="off"
+                    />
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="text-muted-foreground opacity-0 group-hover:opacity-100"
+                      onClick={() => {
+                        remove(i);
+                      }}
+                      type="button"
+                    >
+                      <XIcon size={16} />
+                    </Button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Card>
       <div className="text-end">
         <Button
           className=""
-          onClick={() => append({ name: "", value: "" })}
+          onClick={addNewHeader}
           type="button"
           variant="secondary"
         >