zudoku 0.3.0-dev.116 → 0.3.0-dev.119

package/lib/zudoku.plugin-api-keys.js

@@ -1,12 +1,12 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as p, R as f } from "./SlotletProvider-BG2PU1Mf.js";
-import { u as g, a as u, I as j, S as k, b as v, c as w, d as b, e as K, f as y } from "./Input-HmAaR6kw.js";
+import { S as p, R as f } from "./SlotletProvider-ByLSCZQa.js";
+import { u as g, a as u, I as j, S as k, b as v, c as w, d as b, e as K, f as y } from "./Input-DB9VROFR.js";
 import { b as N, L as x, O as E } from "./index-7kcHaXD6.js";
 import { u as h, t as A, j as S } from "./ZudokuContext-BIZ8zHbZ.js";
-import { B as l, p as I } from "./Combination-D-9IH0zy.js";
+import { B as l, p as I } from "./Combination-DTfV-c98.js";
 import { D as P } from "./DeveloperHint-BQSFXH01.js";
 import { useState as C } from "react";
-import { c as d, a as D } from "./Markdown-B_Gax7at.js";
+import { c as d, a as D } from "./Markdown-CEccPMI_.js";
 /**
  * @license lucide-react v0.378.0 - ISC
  *

package/lib/zudoku.plugin-custom-page.js

@@ -1,5 +1,5 @@
 import { j as m } from "./jsx-runtime-B6kdoens.js";
-import { P as o } from "./Markdown-B_Gax7at.js";
+import { P as o } from "./Markdown-CEccPMI_.js";
 const l = (s) => ({
   getRoutes: () => s.map(({ path: e, element: t }) => ({
     path: e,

package/lib/zudoku.plugin-markdown.js

@@ -6,7 +6,7 @@ const u = (t, e) => Object.entries(t).flatMap(([a, r]) => {
   return {
     path: s.at(-1) === "index" ? s.slice(0, -1).join("/") : o,
     lazy: async () => {
-      const { MdxPage: i } = await import("./MdxPage-oN3huD58.js"), { default: p, ...c } = await r();
+      const { MdxPage: i } = await import("./MdxPage-CnqOoqvp.js"), { default: p, ...c } = await r();
       return {
         element: /* @__PURE__ */ m.jsx(
           i,

package/lib/zudoku.plugin-openapi.js

@@ -1,10 +1,10 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as l } from "./index-CtKkHGcd.js";
+import { o as l } from "./index-Bf5yypxf.js";
 import "./urql-DrBfkb92.js";
 import "./ZudokuContext-BIZ8zHbZ.js";
 import "zudoku/openapi-worker";
-import "./Combination-D-9IH0zy.js";
-import "./Markdown-B_Gax7at.js";
+import "./Combination-DTfV-c98.js";
+import "./Markdown-CEccPMI_.js";
 import "./joinPath-B7kNnUX4.js";
 import "./router-BiRCp01d.js";
 import "./index-7kcHaXD6.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.116",
+  "version": "0.3.0-dev.119",
   "type": "module",
   "files": [
     "dist",
@@ -128,6 +128,7 @@
     "react-is": "18.3.1",
     "react-markdown": "9.0.1",
     "react-router-dom": "6.25.1",
+    "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
     "remark-directive": "3.0.0",

package/src/app/demo.tsx

@@ -4,6 +4,7 @@ import { createBrowserRouter } from "react-router-dom";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
+import { themeToggle } from "../lib/themeToggle.js";
 import "../lib/util/logInit.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -16,6 +17,8 @@ if (!apiUrl) {
   );
 }
 
+themeToggle();
+
 logger.info(`API URL: ${apiUrl}`);
 
 const root =
@@ -51,6 +54,6 @@ const config = {
 
 const routes = getRoutesByConfig(config);
 const router = createBrowserRouter(routes, {
-  basename: "/demo",
+  basename: window.location.pathname,
 });
 createRoot(root).render(<Bootstrap router={router} />);

package/src/app/main.tsx

@@ -9,9 +9,9 @@ import "virtual:zudoku-theme.css";
 import { DevPortal, Layout, RouterError } from "zudoku/components";
 import { isNavigationPlugin } from "zudoku/internal";
 import { customPagePlugin } from "zudoku/plugins/custom-page";
+import { inkeepSearchPlugin } from "zudoku/plugins/search-inkeep";
 import type { ZudokuConfig } from "../config/config.js";
 import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.js";
-import { inkeepSearchPlugin } from "../lib/plugins/search-inkeep/index.js";
 
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,

package/src/app/standalone.tsx

@@ -3,6 +3,7 @@ import { createBrowserRouter } from "react-router-dom";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
+import { themeToggle } from "../lib/themeToggle.js";
 import "../lib/util/logInit.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -12,6 +13,8 @@ if (!root) {
   throw new Error("No div found with attribute data-api-url");
 }
 
+themeToggle();
+
 const apiUrl = root.getAttribute("data-api-url");
 const pageTitle = document.getElementsByTagName("title")[0].innerText;
 const logoUrl = root.getAttribute("data-logo-url");
@@ -50,6 +53,6 @@ const config = {
 
 const routes = getRoutesByConfig(config);
 const router = createBrowserRouter(routes, {
-  basename: "/standalone",
+  basename: window.location.pathname,
 });
 createRoot(root).render(<Bootstrap router={router} />);

package/src/lib/components/Markdown.tsx

@@ -1,4 +1,5 @@
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { visit } from "unist-util-visit";
 import { MdxComponents } from "../util/MdxComponents.js";
@@ -8,13 +9,13 @@ import { MdxComponents } from "../util/MdxComponents.js";
 const rehypeCodeBlockPlugin = () => (tree: any) => {
   visit(tree, "element", (node, _index, parent) => {
     if (node.tagName === "code") {
-      node.properties.inline = parent?.tagName !== "pre";
+      node.properties.inline = String(parent?.tagName !== "pre");
     }
   });
 };
 
 const remarkPlugins = [remarkGfm];
-const rehypePlugins = [rehypeCodeBlockPlugin];
+const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
 
 // other styles are defined in main.css .prose
 export const ProseClasses = "prose dark:prose-invert prose-neutral";

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -18,6 +18,7 @@ export const SidebarCategory = ({
 }) => {
   const topNavItem = useTopNavigationItem();
   const isCategoryOpen = useIsCategoryOpen(category);
+  const [hasInteracted, setHasInteracted] = useState(false);
 
   const isCollapsible = category.collapsible ?? true;
   const isCollapsed = category.collapsed ?? true;
@@ -40,11 +41,15 @@ export const SidebarCategory = ({
       onClick={(e) => {
         e.preventDefault();
         setOpen((prev) => !prev);
+        setHasInteracted(true);
       }}
     >
       <ChevronRightIcon
         size={16}
-        className="transition shrink-0 group-data-[state=open]:rotate-90"
+        className={cn(
+          hasInteracted && "transition",
+          "shrink-0 group-data-[state=open]:rotate-90",
+        )}
       />
     </button>
   );
@@ -88,7 +93,13 @@ export const SidebarCategory = ({
           </div>
         )}
       </Collapsible.Trigger>
-      <Collapsible.Content className="CollapsibleContent ms-[calc(var(--padding-nav-item)*1.125)]">
+      <Collapsible.Content
+        className={cn(
+          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
+          hasInteracted && "CollapsibleContent",
+          "ms-[calc(var(--padding-nav-item)*1.125)]",
+        )}
+      >
         <ul className="mt-1 border-l ps-2">
           {category.items.map((item) => (
             <SidebarItem

package/src/lib/components/navigation/SidebarItem.tsx

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink } from "react-router-dom";
+import { NavLink, useSearchParams } from "react-router-dom";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
@@ -42,6 +42,7 @@ export const SidebarItem = ({
 }) => {
   const topNavItem = useTopNavigationItem();
   const { activeAnchor } = useViewportAnchor();
+  const [searchParams] = useSearchParams();
 
   switch (item.type) {
     case "category":
@@ -69,7 +70,7 @@ export const SidebarItem = ({
     case "link":
       return item.href.startsWith("#") ? (
         <AnchorLink
-          to={item.href}
+          to={{ hash: item.href, search: searchParams.toString() }}
           {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
           className={cn(
             "flex gap-2.5 justify-between",

package/src/lib/oas/graphql/index.ts

@@ -68,6 +68,25 @@ const builder = new SchemaBuilder<{
 const JSONScalar = builder.addScalarType("JSON", GraphQLJSON);
 const JSONObjectScalar = builder.addScalarType("JSONObject", GraphQLJSONObject);
 
+const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
+  const tags = schema.tags ?? [];
+
+  // Extract tags from operations
+  const operationTags = Object.values(schema.paths ?? {})
+    .flatMap((path) => Object.values(path ?? {}))
+    .flatMap((operation) =>
+      typeof operation === "object" && "tags" in operation
+        ? operation.tags ?? []
+        : [],
+    );
+
+  // Remove duplicates and tags that appear in the schema
+  const uniqueOperationTags = [...new Set(operationTags)].filter(
+    (tag) => !tags.some((rootTag) => rootTag.name === tag),
+  );
+  return [...tags, ...uniqueOperationTags.map((tag) => ({ name: tag }))];
+};
+
 const getAllOperations = (paths?: PathsObject, tag?: string) => {
   return Object.entries(paths ?? {}).flatMap(([path, value]) =>
     HttpMethods.flatMap((method) => {
@@ -117,7 +136,7 @@ const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
     operations: t.field({
       type: [OperationItem],
       resolve: (parent, _args, ctx) => {
-        const rootTags = ctx.schema.tags?.map((tag) => tag.name) ?? [];
+        const rootTags = getAllTags(ctx.schema).map((tag) => tag.name);
 
         return getAllOperations(ctx.schema.paths, parent.name).filter((item) =>
           parent.name
@@ -363,10 +382,10 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
         name: t.arg.string(),
       },
       type: [SchemaTag],
-      resolve: (root, args) =>
-        [...(root.tags ?? []), { name: "" }].filter(
-          (tag) => !args.name || args.name === tag.name,
-        ),
+      resolve: (root, args) => {
+        const tags = [...getAllTags(root), { name: "" }];
+        return args.name ? tags.filter((tag) => tag.name === args.name) : tags;
+      },
     }),
     operations: t.field({
       type: [OperationItem],

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

@@ -23,7 +23,6 @@ const MarkdownHeadings = {
   ),
   h3: ({ children, id }) => (
     <Heading level={3} id={id} registerSidebarAnchor>
-      {" "}
       {children}
     </Heading>
   ),

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

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
 import { Card } from "../../ui/Card.js";
@@ -6,9 +7,9 @@ import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
 import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
-import { SchemaListView } from "./SchemaListView.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
+import { SchemaView } from "./schema/SchemaView.js";
 import { SchemaProseClasses } from "./util/prose.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
@@ -26,6 +27,8 @@ export const OperationListItem = ({
   );
 
   const first = operation.responses.at(0);
+  const [selectedResponse, setSelectedResponse] = useState(first?.statusCode);
+
   return (
     <div
       key={operation.operationId}
@@ -62,7 +65,7 @@ export const OperationListItem = ({
             <Heading level={3} className="capitalize">
               Request Body
             </Heading>
-            <SchemaListView schema={schema} />
+            <SchemaView schema={schema} />
           </div>
         ))}
         {operation.responses.length > 0 && (
@@ -70,12 +73,15 @@ export const OperationListItem = ({
             <Heading level={3} className="capitalize mt-8 pt-8 border-t">
               Responses
             </Heading>
-            <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>
+            <Tabs
+              onValueChange={(value) => setSelectedResponse(value)}
+              value={selectedResponse}
+            >
               {operation.responses.length > 1 && (
                 <TabsList>
                   {operation.responses.map((response) => (
                     <TabsTrigger
-                      value={response.statusCode + response.description}
+                      value={response.statusCode}
                       key={response.statusCode}
                       title={response.description}
                     >
@@ -87,16 +93,16 @@ export const OperationListItem = ({
               <ul className="list-none m-0 px-0 overflow-hidden">
                 {operation.responses.map((response) => (
                   <TabsContent
-                    value={response.statusCode + response.description}
+                    value={response.statusCode}
                     key={response.statusCode}
                   >
                     {renderIf(
                       response.content?.find((content) => content.schema),
                       (content) => {
-                        return <SchemaListView schema={content.schema} />;
+                        return <SchemaView schema={content.schema} />;
                       },
                     ) ?? (
-                      <Card className="font-mono text-sm p-4">
+                      <Card className="font-mono text-sm p-4 italic bg-border/20">
                         No response body
                       </Card>
                     )}
@@ -108,7 +114,11 @@ export const OperationListItem = ({
         )}
       </div>
 
-      <Sidecar operation={operation} />
+      <Sidecar
+        selectedResponse={selectedResponse}
+        onSelectResponse={setSelectedResponse}
+        operation={operation}
+      />
     </div>
   );
 };

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

@@ -21,14 +21,16 @@ export const ParameterList = ({
     </Heading>
     <Card>
       <ul className="list-none m-0 px-0 divide-y ">
-        {parameters.map((parameter) => (
-          <ParameterListItem
-            key={`${parameter.name}-${parameter.in}`}
-            parameter={parameter}
-            id={id}
-            group={group}
-          />
-        ))}
+        {parameters
+          .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
+          .map((parameter) => (
+            <ParameterListItem
+              key={`${parameter.name}-${parameter.in}`}
+              parameter={parameter}
+              id={id}
+              group={group}
+            />
+          ))}
       </ul>
     </Card>
   </>

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+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";
@@ -9,52 +9,64 @@ import { generateSchemaExample } from "./util/generateSchemaExample.js";
 type Responses = OperationListItemResult["responses"];
 export const ResponsesSidecarBox = ({
   responses,
+  selectedResponse,
+  onSelectResponse,
 }: {
   responses: Responses;
-}) => {
-  const [tabIndex, setTabIndex] = useState(0);
-
-  const activeTab = responses[tabIndex];
-  const schema = activeTab.content?.[0]?.schema as SchemaObject | undefined;
-
-  return (
-    <SidecarBox.Root>
-      <SidecarBox.Head className="text-xs grid grid-rows-2 pb-0">
+  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>
-        <div className="flex gap-2">
-          {responses.map((response, index) => (
-            <div
+        <Tabs.List className="flex gap-2">
+          {responses.map((response) => (
+            <Tabs.Trigger
               key={response.statusCode}
-              onClick={() => setTabIndex(index)}
+              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",
-                tabIndex === index
-                  ? "text-primary dark:text-inherit border-primary"
-                  : "hover:border-accent-foreground/25",
+                "data-[state=active]:text-primary data-[state=active]:dark:text-inherit data-[state=active]:border-primary",
+                "hover:border-accent-foreground/25",
               )}
             >
               {response.statusCode}
-            </div>
+            </Tabs.Trigger>
           ))}
-        </div>
+        </Tabs.List>
       </SidecarBox.Head>
-      <SidecarBox.Body>
-        {schema ? (
-          <SyntaxHighlight
-            language="json"
-            noBackground
-            className="text-xs"
-            code={JSON.stringify(generateSchemaExample(schema), null, 2)}
-          />
-        ) : (
-          <span className="text-muted-foreground font-mono italic text-xs">
-            Empty Response
-          </span>
-        )}
-      </SidecarBox.Body>
-      <SidecarBox.Footer className="flex justify-end text-xs">
-        {responses[tabIndex].description}
-      </SidecarBox.Footer>
-    </SidecarBox.Root>
-  );
-};
+      {responses.map((response) => {
+        const schema = response.content?.[0]?.schema as
+          | SchemaObject
+          | undefined;
+
+        return (
+          <Tabs.Content key={response.statusCode} value={response.statusCode}>
+            <SidecarBox.Body>
+              {schema ? (
+                <SyntaxHighlight
+                  language="json"
+                  noBackground
+                  className="text-xs"
+                  code={JSON.stringify(generateSchemaExample(schema), null, 2)}
+                />
+              ) : (
+                <span className="text-muted-foreground font-mono italic text-xs">
+                  Empty Response
+                </span>
+              )}
+            </SidecarBox.Body>
+            <SidecarBox.Footer className="flex justify-end text-xs">
+              {response.description}
+            </SidecarBox.Footer>
+          </Tabs.Content>
+        );
+      })}
+    </Tabs.Root>
+  </SidecarBox.Root>
+);

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

@@ -84,8 +84,12 @@ const methodToColor = {
 
 export const Sidecar = ({
   operation,
+  selectedResponse,
+  onSelectResponse,
 }: {
   operation: OperationListItemResult;
+  selectedResponse?: string;
+  onSelectResponse: (response: string) => void;
 }) => {
   const oasConfig = useOasConfig();
   const [result] = useQuery({
@@ -105,8 +109,9 @@ export const Sidecar = ({
 
   const requestBodyContent = operation.requestBody?.content;
 
-  const path = operation.path.split("/").map((part) => (
-    <Fragment key={part}>
+  const path = operation.path.split("/").map((part, i, arr) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <Fragment key={part + i}>
       {part.startsWith("{") && part.endsWith("}") ? (
         <ColorizedParam
           name={part.slice(1, -1)}
@@ -119,7 +124,7 @@ export const Sidecar = ({
       ) : (
         part
       )}
-      /
+      {i < arr.length - 1 ? "/" : null}
       <wbr />
     </Fragment>
   ));
@@ -200,7 +205,11 @@ export const Sidecar = ({
         <RequestBodySidecarBox content={requestBodyContent} />
       )}
       {operation.responses.length > 0 && (
-        <ResponsesSidecarBox responses={operation.responses} />
+        <ResponsesSidecarBox
+          selectedResponse={selectedResponse}
+          onSelectResponse={onSelectResponse}
+          responses={operation.responses}
+        />
       )}
     </aside>
   );