zudoku 0.24.1 → 0.25.1

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

@@ -0,0 +1,163 @@
+import { useState } from "react";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { type SchemaObject } from "../../oas/graphql/index.js";
+import { CollapsibleCode } from "./CollapsibleCode.js";
+import type { OperationListItemResult } from "./OperationList.js";
+import * as SidecarBox from "./SidecarBox.js";
+import { SimpleSelect } from "./SimpleSelect.js";
+import { generateSchemaExample } from "./util/generateSchemaExample.js";
+
+export type Content = NonNullable<
+  NonNullable<OperationListItemResult["requestBody"]>["content"]
+>;
+export type Example = NonNullable<
+  NonNullable<Content[number]["examples"]>
+>[number];
+
+const formatExample = (example: unknown) => {
+  if (example == null) return "No example";
+
+  if (typeof example === "string" || typeof example !== "object") {
+    return String(example).trim();
+  }
+
+  return JSON.stringify(example, null, 2);
+};
+
+const getLanguageForContentType = (mediaType?: string) =>
+  mediaType
+    ? ({
+        "application/json": "json",
+        "application/xml": "xml",
+        "application/x-yaml": "yaml",
+        "text/csv": "csv",
+        "application/javascript": "javascript",
+        "application/graphql": "graphql",
+        "text/plain": "plain",
+        "application/x-www-form-urlencoded": "plain",
+        "multipart/form-data": "plain",
+        "application/x-protobuf": "plain",
+      }[mediaType] ?? "plain")
+    : "plain";
+
+const getExampleName = (example: Example) => {
+  if (example.summary) return example.summary;
+  if (example.name) return example.name;
+  if (example.description) return example.description;
+};
+
+const getExampleValue = (example?: Example) => {
+  if (!example) return undefined;
+
+  if (example.value !== undefined) return example.value;
+  if (example.externalValue) return example.externalValue;
+  if (example.name) return example;
+};
+
+export interface UseExampleDisplayProps {
+  content: Content;
+  description?: string;
+}
+
+export const useSidecarExamples = ({
+  content,
+  description,
+}: UseExampleDisplayProps) => {
+  const [selectedContentTypeIndex, setSelectedContentTypeIndex] = useState(0);
+  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
+
+  const selectedContent = content[selectedContentTypeIndex];
+  const examples = (selectedContent?.examples ?? []) as Example[];
+  const hasExamples = examples.length > 0;
+
+  const selectedExample = hasExamples
+    ? examples[selectedExampleIndex]
+    : undefined;
+
+  const example = hasExamples
+    ? getExampleValue(selectedExample)
+    : selectedContent?.schema
+      ? generateSchemaExample(selectedContent.schema as SchemaObject)
+      : undefined;
+
+  const formattedExample = formatExample(example);
+  const language = getLanguageForContentType(selectedContent?.mediaType);
+
+  const SidecarBody = () => (
+    <SidecarBox.Body className="p-0">
+      {selectedExample?.externalValue ? (
+        <div className="p-2">
+          <a
+            href={selectedExample.externalValue}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-primary hover:underline"
+          >
+            View External Example →
+          </a>
+        </div>
+      ) : (
+        <CollapsibleCode>
+          <SyntaxHighlight
+            language={language}
+            noBackground
+            copyable
+            className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
+            code={formattedExample}
+          />
+        </CollapsibleCode>
+      )}
+      {selectedExample?.description && (
+        <div className="border-t text-xs px-2 py-1">
+          {selectedExample.description}
+        </div>
+      )}
+    </SidecarBox.Body>
+  );
+
+  const SidebarFooter = () => (
+    <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-between py-1">
+      <div className="flex items-center gap-2 min-w-0">
+        {content.length > 1 ? (
+          <div className="flex items-center gap-1">
+            <SimpleSelect
+              className="max-w-[200px]"
+              value={selectedContentTypeIndex.toString()}
+              onChange={(e) =>
+                setSelectedContentTypeIndex(Number(e.target.value))
+              }
+              options={content.map((c, index) => ({
+                value: index.toString(),
+                label: c.mediaType,
+              }))}
+            />
+          </div>
+        ) : (
+          <span className="font-mono text-[11px]">{content[0]?.mediaType}</span>
+        )}
+        {description && (
+          <span className="text-muted-foreground truncate">{description}</span>
+        )}
+      </div>
+      {examples.length > 1 && (
+        <div className="flex items-center gap-1">
+          <SimpleSelect
+            className="max-w-[180px]"
+            value={selectedExampleIndex.toString()}
+            onChange={(e) => setSelectedExampleIndex(Number(e.target.value))}
+            options={examples.map((example, index) => ({
+              value: index.toString(),
+              label: getExampleName(example) ?? `Example ${index + 1}`,
+            }))}
+          />
+        </div>
+      )}
+    </SidecarBox.Footer>
+  );
+
+  return {
+    SidecarBody,
+    SidebarFooter,
+    hasContent: hasExamples || content.length > 0,
+  };
+};

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

@@ -57,9 +57,11 @@ export const OperationListItem = ({
               }
             }}
           >
-            <div className="text-neutral-400 dark:text-neutral-500 truncate">
-              {serverUrl}
-            </div>
+            {serverUrl && (
+              <div className="text-neutral-400 dark:text-neutral-500 truncate">
+                {serverUrl}
+              </div>
+            )}
             <div className="text-neutral-900 dark:text-neutral-200">
               {operation.path}
             </div>

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

@@ -45,7 +45,7 @@ export const ParameterListItem = ({
           )}
         </code>
         {parameter.required && (
-          <span className="py-px px-1.5 font-medium bg-primary/75 text-muted rounded-lg">
+          <span className="py-px px-1.5 font-medium bg-primary/75 text-primary-foreground rounded-lg">
             required
           </span>
         )}

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

@@ -1,44 +1,18 @@
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
-import { type SchemaObject } from "../../oas/graphql/index.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
-import type { OperationListItemResult } from "./OperationList.js";
+import { Content, useSidecarExamples } from "./ExampleDisplay.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { generateSchemaExample } from "./util/generateSchemaExample.js";
 
-type Content = NonNullable<
-  NonNullable<OperationListItemResult["requestBody"]>["content"]
->;
-
-// @todo should we handle multiple content types?
 export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
-  if (!content.length) return null;
-
-  const firstContent = content.at(0);
-
-  const example =
-    firstContent?.examples?.at(0)?.value ??
-    (firstContent?.schema
-      ? generateSchemaExample(firstContent.schema as SchemaObject)
-      : "");
+  const { SidecarBody, SidebarFooter, hasContent } = useSidecarExamples({
+    content,
+  });
 
   return (
-    <>
-      <SidecarBox.Root>
-        <SidecarBox.Head className="text-xs flex justify-between items-center">
-          <span className="font-mono">Request Body Example</span>
-        </SidecarBox.Head>
-        <SidecarBox.Body className="p-0">
-          <CollapsibleCode>
-            <SyntaxHighlight
-              language={example ? "json" : "plain"}
-              noBackground
-              copyable
-              className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
-              code={example ? JSON.stringify(example, null, 2) : "No example"}
-            />
-          </CollapsibleCode>
-        </SidecarBox.Body>
-      </SidecarBox.Root>
-    </>
+    <SidecarBox.Root>
+      <SidecarBox.Head className="text-xs flex justify-between items-center">
+        <span className="font-mono">Request Body Example</span>
+      </SidecarBox.Head>
+      <SidecarBody />
+      {hasContent && <SidebarFooter />}
+    </SidecarBox.Root>
   );
 };

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

@@ -1,13 +1,25 @@
 import * as Tabs from "@radix-ui/react-tabs";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
-import { type SchemaObject } from "../../oas/graphql/index.js";
 import { cn } from "../../util/cn.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
+import { useSidecarExamples } from "./ExampleDisplay.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { generateSchemaExample } from "./util/generateSchemaExample.js";
 
 type Responses = OperationListItemResult["responses"];
+
+const ResponseContent = ({ response }: { response: Responses[number] }) => {
+  const { SidecarBody, SidebarFooter, hasContent } = useSidecarExamples({
+    content: response.content ?? [],
+    description: response.description ?? undefined,
+  });
+
+  return (
+    <Tabs.Content value={response.statusCode}>
+      <SidecarBody />
+      {hasContent && <SidebarFooter />}
+    </Tabs.Content>
+  );
+};
+
 export const ResponsesSidecarBox = ({
   responses,
   selectedResponse,
@@ -16,62 +28,36 @@ export const ResponsesSidecarBox = ({
   responses: Responses;
   selectedResponse?: string;
   onSelectResponse: (response: string) => void;
-}) => (
-  <SidecarBox.Root>
-    <Tabs.Root
-      defaultValue={responses[0]?.statusCode}
-      value={selectedResponse}
-      onValueChange={(value) => onSelectResponse(value)}
-    >
-      <SidecarBox.Head className="text-xs flex flex-col gap-2 pb-0">
-        <span className="font-mono">Example Responses</span>
-        <Tabs.List className="flex gap-2">
-          {responses.map((response) => (
-            <Tabs.Trigger
-              key={response.statusCode}
-              value={response.statusCode}
-              className={cn(
-                "text-xs font-mono px-1.5 py-1 pb-px translate-y-px border-b-2 border-transparent rounded-t cursor-pointer",
-                "data-[state=active]:text-primary data-[state=active]:dark:text-inherit data-[state=active]:border-primary",
-                "hover:border-accent-foreground/25",
-              )}
-            >
-              {response.statusCode}
-            </Tabs.Trigger>
-          ))}
-        </Tabs.List>
-      </SidecarBox.Head>
-      {responses.map((response) => {
-        const firstContent = response.content?.at(0);
-
-        const example =
-          firstContent?.examples?.at(0)?.value ??
-          (firstContent?.schema
-            ? generateSchemaExample(firstContent.schema as SchemaObject)
-            : "");
-
-        return (
-          <Tabs.Content key={response.statusCode} value={response.statusCode}>
-            <SidecarBox.Body className="p-0">
-              <CollapsibleCode>
-                <SyntaxHighlight
-                  language={example ? "json" : "plain"}
-                  noBackground
-                  className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
-                  code={
-                    example
-                      ? JSON.stringify(example, null, 2)
-                      : "Empty response"
-                  }
-                />
-              </CollapsibleCode>
-            </SidecarBox.Body>
-            <SidecarBox.Footer className="flex justify-end text-xs">
-              {response.description}
-            </SidecarBox.Footer>
-          </Tabs.Content>
-        );
-      })}
-    </Tabs.Root>
-  </SidecarBox.Root>
-);
+}) => {
+  return (
+    <SidecarBox.Root>
+      <Tabs.Root
+        defaultValue={responses[0]?.statusCode}
+        value={selectedResponse}
+        onValueChange={(value) => onSelectResponse(value)}
+      >
+        <SidecarBox.Head className="text-xs flex flex-col gap-2 pb-0">
+          <span className="font-mono">Example Responses</span>
+          <Tabs.List className="flex gap-2">
+            {responses.map((response) => (
+              <Tabs.Trigger
+                key={response.statusCode}
+                value={response.statusCode}
+                className={cn(
+                  "text-xs font-mono px-1.5 py-1 pb-px translate-y-px border-b-2 border-transparent rounded-t cursor-pointer",
+                  "data-[state=active]:text-primary data-[state=active]:dark:text-inherit data-[state=active]:border-primary",
+                  "hover:border-accent-foreground/25",
+                )}
+              >
+                {response.statusCode}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+        </SidecarBox.Head>
+        {responses.map((response) => (
+          <ResponseContent key={response.statusCode} response={response} />
+        ))}
+      </Tabs.Root>
+    </SidecarBox.Root>
+  );
+};

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

@@ -181,7 +181,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-3 gap-2 text-xs">
+        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-4 gap-2 text-xs">
           <span className="font-mono break-words">
             <span className={cn("font-semibold", methodTextColor)}>
               {operation.method.toLocaleUpperCase()}
@@ -191,10 +191,8 @@ export const Sidecar = ({
           </span>
           {isOnScreen && (
             <PlaygroundDialogWrapper
-              server={result.data.schema.url ?? ""}
-              servers={
-                result.data.schema.servers.map((server) => server.url) ?? []
-              }
+              server={result.data.schema.url}
+              servers={result.data.schema.servers.map((server) => server.url)}
               operation={operation}
             />
           )}
@@ -211,7 +209,7 @@ export const Sidecar = ({
                 />
               </CollapsibleCode>
             </SidecarBox.Body>
-            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-1">
+            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-3">
               <span>Show example in</span>
               <SimpleSelect
                 className="self-start max-w-[150px]"

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

@@ -7,10 +7,7 @@ type BaseComponentProps<T = unknown> = PropsWithChildren<
 
 export const Root = ({ children, className }: BaseComponentProps) => (
   <div
-    className={cn(
-      "rounded-lg overflow-hidden border dark:border-transparent",
-      className,
-    )}
+    className={cn("rounded-xl overflow-hidden border border-border", className)}
   >
     {children}
   </div>
@@ -19,7 +16,7 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "border-b dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      "border-b bg-muted dark:bg-transparent text-card-foreground p-3",
       className,
     )}
   >
@@ -28,20 +25,11 @@ export const Head = ({ children, className }: BaseComponentProps) => (
 );
 
 export const Body = ({ children, className }: BaseComponentProps) => (
-  <div
-    className={cn("bg-zinc-50 dark:bg-zinc-800 overflow-auto p-2", className)}
-  >
-    {children}
-  </div>
+  <div className={cn("bg-card overflow-auto p-2", className)}>{children}</div>
 );
 
 export const Footer = ({ children, className }: BaseComponentProps) => (
-  <div
-    className={cn(
-      "border-t dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
-      className,
-    )}
-  >
+  <div className={cn("border-t bg-muted dark:bg-transparent p-3", className)}>
     {children}
   </div>
 );

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

@@ -151,6 +151,7 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
               badge: {
                 label: operation.method,
                 color: MethodColorMap[operation.method.toLowerCase()]!,
+                invert: true,
               },
             })),
           }));

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

@@ -63,6 +63,7 @@ export const Headers = ({
           className=""
           onClick={() => append({ name: "", value: "" })}
           type="button"
+          variant="secondary"
         >
           Add header
         </Button>

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

@@ -39,7 +39,7 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
         {props.children ?? (
-          <button className="flex gap-1 items-center px-2 py-1 rounded-md bg-primary/80 hover:bg-primary transition text-primary-foreground text-xs">
+          <button className="flex gap-1 items-center px-2 py-1 rounded-md transition text-xs bg-primary  text-primary-foreground shadow-sm hover:bg-primary/80">
             Test
             <HeroPlayIcon className="" size={14} />
           </button>

package/src/lib/ui/Card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-card text-card-foreground shadow-sm",
       className,
     )}
     {...props}

package/lib/AuthenticationPlugin-DVLEc6cm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AuthenticationPlugin-DVLEc6cm.js","sources":["../src/lib/authentication/components/SignIn.tsx","../src/lib/authentication/components/SignOut.tsx","../src/lib/authentication/components/SignUp.tsx","../src/lib/authentication/AuthenticationPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useSearchParams } from \"react-router\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignIn = () => {\n  const context = useZudoku();\n  const [search] = useSearchParams();\n  useEffect(() => {\n    void context.authentication?.signIn({\n      redirectTo: search.get(\"redirect\") ?? undefined,\n    });\n  }, [context.authentication, search]);\n\n  return null;\n};\n","import { useEffect } from \"react\";\nimport { useNavigate } from \"react-router\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignOut = () => {\n  const context = useZudoku();\n  const navigate = useNavigate();\n  useEffect(() => {\n    void context.authentication?.signOut().then(() => navigate(\"/\"));\n  }, [navigate, context.authentication]);\n\n  return null;\n};\n","import { useEffect } from \"react\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignUp = () => {\n  const context = useZudoku();\n  useEffect(() => {\n    void (context.authentication?.signUp() ?? context.authentication?.signIn());\n  }, [context.authentication]);\n\n  return null;\n};\n","import { LogOutIcon } from \"lucide-react\";\nimport {\n  CommonPlugin,\n  NavigationPlugin,\n  ProfileMenuPlugin,\n} from \"../core/plugins.js\";\nimport { SignIn } from \"./components/SignIn.js\";\nimport { SignOut } from \"./components/SignOut.js\";\nimport { SignUp } from \"./components/SignUp.js\";\n\ntype PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;\n\nexport class AuthenticationPlugin implements PluginInterface {\n  getRoutes() {\n    return [\n      {\n        path: \"/signout\",\n        element: <SignOut />,\n      },\n      {\n        path: \"/signin\",\n        element: <SignIn />,\n      },\n      {\n        path: \"/signup\",\n        element: <SignUp />,\n      },\n    ];\n  }\n\n  getProfileMenuItems() {\n    return [\n      {\n        label: \"Logout\",\n        path: \"/signout\",\n        category: \"bottom\",\n        icon: LogOutIcon,\n      } as const,\n    ];\n  }\n}\n"],"names":["SignIn","context","useZudoku","search","useSearchParams","useEffect","_a","SignOut","navigate","useNavigate","SignUp","_b","AuthenticationPlugin","LogOutIcon"],"mappings":";;;;;AAIO,MAAMA,IAAS,MAAM;AAC1B,QAAMC,IAAUC,EAAU,GACpB,CAACC,CAAM,IAAIC,EAAgB;AACjC,SAAAC,EAAU,MAAM;;AACT,KAAAC,IAAAL,EAAQ,mBAAR,QAAAK,EAAwB,OAAO;AAAA,MAClC,YAAYH,EAAO,IAAI,UAAU,KAAK;AAAA,IAAA;AAAA,EAEvC,GAAA,CAACF,EAAQ,gBAAgBE,CAAM,CAAC,GAE5B;AACT,GCVaI,IAAU,MAAM;AAC3B,QAAMN,IAAUC,EAAU,GACpBM,IAAWC,EAAY;AAC7B,SAAAJ,EAAU,MAAM;;AACT,KAAAC,IAAAL,EAAQ,mBAAR,QAAAK,EAAwB,UAAU,KAAK,MAAME,EAAS,GAAG;AAAA,EAC7D,GAAA,CAACA,GAAUP,EAAQ,cAAc,CAAC,GAE9B;AACT,GCTaS,IAAS,MAAM;AAC1B,QAAMT,IAAUC,EAAU;AAC1B,SAAAG,EAAU,MAAM;;AACd,MAAMC,IAAAL,EAAQ,mBAAR,gBAAAK,EAAwB,eAAYK,IAAAV,EAAQ,mBAAR,QAAAU,EAAwB;AAAA,EAAO,GACxE,CAACV,EAAQ,cAAc,CAAC,GAEpB;AACT;ACEO,MAAMW,EAAgD;AAAA,EAC3D,YAAY;AACH,WAAA;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,+BAAUL,GAAQ,CAAA,CAAA;AAAA,MACpB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,+BAAUP,GAAO,CAAA,CAAA;AAAA,MACnB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,+BAAUU,GAAO,CAAA,CAAA;AAAA,MAAA;AAAA,IAErB;AAAA,EAAA;AAAA,EAGF,sBAAsB;AACb,WAAA;AAAA,MACL;AAAA,QACE,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,MAAMG;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA;AAEJ;"}