zudoku 0.0.0-ee328ec → 0.0.0-efc60ba6

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -19,7 +19,7 @@ type Documents = {
   "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\n        }\n      }\n    }\n  }\n": typeof types.OperationsForTagDocument;
   "\n  query GetSchemas($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      title\n      description\n      summary\n      components {\n        schemas {\n          name\n          schema\n          extensions\n        }\n      }\n    }\n  }\n": typeof types.GetSchemasDocument;
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.GetServerQueryDocument;
-  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n": typeof types.GetSidebarOperationsDocument;
+  "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n": typeof types.GetNavigationOperationsDocument;
 };
 const documents: Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
@@ -34,8 +34,8 @@ const documents: Documents = {
     types.GetSchemasDocument,
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.GetServerQueryDocument,
-  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n":
-    types.GetSidebarOperationsDocument,
+  "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n":
+    types.GetNavigationOperationsDocument,
 };
 
 /**
@@ -78,8 +78,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").GetSidebarOperationsDocument;
+  source: "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n",
+): typeof import("./graphql.js").GetNavigationOperationsDocument;
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -374,15 +374,16 @@ export type GetServerQueryQuery = {
   };
 };
 
-export type GetSidebarOperationsQueryVariables = Exact<{
+export type GetNavigationOperationsQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
 }>;
 
-export type GetSidebarOperationsQuery = {
+export type GetNavigationOperationsQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
+    extensions?: any | null;
     tags: Array<{
       __typename?: "SchemaTag";
       slug?: string | null;
@@ -642,9 +643,10 @@ export const GetServerQueryDocument = new TypedDocumentString(`
   GetServerQueryQuery,
   GetServerQueryQueryVariables
 >;
-export const GetSidebarOperationsDocument = new TypedDocumentString(`
-    query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
+export const GetNavigationOperationsDocument = new TypedDocumentString(`
+    query GetNavigationOperations($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
+    extensions
     tags {
       slug
       name
@@ -665,6 +667,6 @@ export const GetSidebarOperationsDocument = new TypedDocumentString(`
   }
 }
     `) as unknown as TypedDocumentString<
-  GetSidebarOperationsQuery,
-  GetSidebarOperationsQueryVariables
+  GetNavigationOperationsQuery,
+  GetNavigationOperationsQueryVariables
 >;

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

@@ -1,23 +1,25 @@
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
 import { type ReactNode } from "react";
 import { matchPath } from "react-router";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
 import { type ZudokuPlugin } from "../../core/plugins.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
 import { createQuery } from "./client/useCreateQuery.js";
-import type { GetSidebarOperationsQuery as GetSidebarOperationsQueryResult } from "./graphql/graphql.js";
+import type { GetNavigationOperationsQuery as GetNavigationOperationsQueryResult } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
 import { type OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
-import { createSidebarCategory } from "./util/createSidebarCategory.js";
+import { createNavigationCategory } from "./util/createNavigationCategory.js";
 import { getRoutes, getVersions } from "./util/getRoutes.js";
 
-export const GetSidebarOperationsQuery = graphql(`
-  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
+export const GetNavigationOperationsQuery = graphql(`
+  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
+      extensions
       tags {
         slug
         name
@@ -40,14 +42,14 @@ export const GetSidebarOperationsQuery = graphql(`
 `);
 
 export type OperationResult =
-  GetSidebarOperationsQueryResult["schema"]["tags"][number]["operations"][number];
+  GetNavigationOperationsQueryResult["schema"]["tags"][number]["operations"][number];
 
 export type OpenApiPluginOptions = OasPluginConfig;
 
 export const UNTAGGED_PATH = "~endpoints";
 
 export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
-  const basePath = joinUrl(config.navigationId ?? "/reference");
+  const basePath = joinUrl(config.path);
   const client = new GraphQLClient(config);
 
   return {
@@ -117,7 +119,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         );
       },
     }),
-    getSidebar: async (path, context) => {
+    getNavigation: async (path, context) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];
       }
@@ -133,31 +135,79 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         const { type } = config;
         const input = type === "file" ? config.input[version!] : config.input;
 
-        const query = createQuery(client, GetSidebarOperationsQuery, {
+        const query = createQuery(client, GetNavigationOperationsQuery, {
           type,
           input,
         });
         const data = await context.queryClient.ensureQueryData(query);
 
-        const categories = data.schema.tags.flatMap((tag) => {
-          if (!tag.name || tag.operations.length === 0) return [];
+        const tagCategories = new Map(
+          data.schema.tags
+            .filter((tag) => tag.name && tag.operations.length > 0)
+            .map((tag) => {
+              if (!tag.name) {
+                throw new Error(`Tag ${tag.slug} has no name`);
+              }
+
+              const categoryPath = joinUrl(basePath, versionParam, tag.slug);
+
+              const isCollapsed =
+                tag.extensions?.["x-zudoku-collapsed"] ??
+                !config.options?.expandAllTags;
+              const isCollapsible =
+                tag.extensions?.["x-zudoku-collapsible"] ?? true;
+
+              return [
+                tag.name,
+                createNavigationCategory({
+                  label: tag.name,
+                  path: categoryPath,
+                  operations: tag.operations,
+                  collapsed: isCollapsed,
+                  collapsible: isCollapsible,
+                }),
+              ];
+            }),
+        );
 
-          const categoryPath = joinUrl(basePath, versionParam, tag.slug);
+        const tagGroups =
+          (data.schema.extensions?.["x-tagGroups"] as
+            | { name: string; tags: string[] }[]
+            | undefined) ?? [];
 
-          const isCollapsed =
-            tag.extensions?.["x-zudoku-collapsed"] ??
-            !config.options?.expandAllTags;
-          const isCollapsible =
-            tag.extensions?.["x-zudoku-collapsible"] ?? true;
+        const groupedTags = new Set(
+          tagGroups.flatMap((group) =>
+            group.tags.filter((name) => tagCategories.has(name)),
+          ),
+        );
 
-          return createSidebarCategory({
-            label: tag.name,
-            path: categoryPath,
-            operations: tag.operations,
-            collapsed: isCollapsed,
-            collapsible: isCollapsible,
-          });
-        });
+        const groupedCategories: NavigationItem[] = tagGroups.flatMap(
+          (group) => {
+            const items = group.tags
+              .map((name) => tagCategories.get(name))
+              .filter(Boolean) as NavigationItem[];
+
+            if (items.length === 0) {
+              return [];
+            }
+            return [
+              {
+                type: "category",
+                label: group.name,
+                items,
+                collapsible: true,
+                collapsed: !config.options?.expandAllTags,
+              },
+            ];
+          },
+        );
+
+        const categories: NavigationItem[] = [
+          ...groupedCategories,
+          ...Array.from(tagCategories.entries())
+            .filter(([name]) => !groupedTags.has(name))
+            .map(([, cat]) => cat),
+        ];
 
         const untaggedOperations = data.schema.tags.find(
           (tag) => !tag.name,
@@ -165,8 +215,8 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
 
         if (untaggedOperations) {
           categories.push(
-            createSidebarCategory({
-              label: "Other endpoints",
+            createNavigationCategory({
+              label: categories.length === 0 ? "Endpoints" : "Other endpoints",
               path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
               operations: untaggedOperations,
               collapsed: !config.options?.expandAllTags,
@@ -178,7 +228,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
           categories.push({
             type: "link" as const,
             label: "Schemas",
-            href: joinUrl(basePath, versionParam, "~schemas"),
+            to: joinUrl(basePath, versionParam, "~schemas"),
           });
         }
 

package/src/lib/plugins/openapi/interfaces.ts

@@ -32,7 +32,7 @@ type Content = {
   examples?: Array<Example> | null;
 };
 
-export type transformExamples = (options: {
+export type TransformExamplesFn = (options: {
   content: Content[];
   context: ZudokuContext;
   auth: AuthState;
@@ -42,7 +42,7 @@ export type transformExamples = (options: {
 
 type BaseOasConfig = {
   server?: string;
-  navigationId?: string;
+  path?: string;
   skipPreload?: boolean;
   tagPages?: Array<string>;
   schemaImports?: SchemaImports;
@@ -52,7 +52,7 @@ type BaseOasConfig = {
     disableSidecar?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
     expandAllTags?: boolean;
-    transformExamples?: transformExamples;
+    transformExamples?: TransformExamplesFn;
   };
 };
 

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

@@ -0,0 +1,55 @@
+import { FileInput } from "lucide-react";
+import { useFormContext } from "react-hook-form";
+import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
+import { Textarea } from "zudoku/ui/Textarea.js";
+import { cn } from "../../../util/cn.js";
+import { type Content } from "../SidecarExamples.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "./CollapsibleHeader.js";
+import ExamplesDropdown from "./ExamplesDropdown.js";
+import { type PlaygroundForm } from "./Playground.js";
+
+export const BodyPanel = ({ content }: { content?: Content }) => {
+  const { register, setValue, watch } = useFormContext<PlaygroundForm>();
+  const examples = (content ?? []).flatMap((e) => e.examples);
+  const headers = watch("headers");
+  return (
+    <Collapsible defaultOpen>
+      <CollapsibleHeaderTrigger>
+        <FileInput size={16} />
+        <CollapsibleHeader>Body</CollapsibleHeader>
+        {content && examples.length > 0 ? (
+          <ExamplesDropdown
+            examples={content}
+            onSelect={(example, mediaType) => {
+              setValue("body", JSON.stringify(example.value, null, 2));
+              setValue("headers", [
+                ...headers.filter((h) => h.name !== "Content-Type"),
+                {
+                  name: "Content-Type",
+                  value: mediaType,
+                  active: true,
+                },
+              ]);
+            }}
+          />
+        ) : (
+          <div />
+        )}
+      </CollapsibleHeaderTrigger>
+      <CollapsibleContent className="flex flex-col gap-2 ">
+        <Textarea
+          {...register("body")}
+          className={cn(
+            "w-full p-2 h-64 font-mono md:text-xs border-none rounded-none focus-visible:ring-0",
+          )}
+          placeholder="Your body here..."
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export default BodyPanel;

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

@@ -0,0 +1,47 @@
+import { ChevronUpIcon } from "lucide-react";
+import { CollapsibleTrigger } from "zudoku/ui/Collapsible.js";
+import { cn } from "../../../util/cn.js";
+
+export const CollapsibleHeaderTrigger = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-[max-content_1fr_min-content_max-content] items-center gap-4 group bg-muted w-full h-10 ps-4 pe-2 border-b",
+        className,
+      )}
+    >
+      {children}
+      <CollapsibleTrigger
+        className={cn(
+          "flex items-center gap-4 group bg-muted w-full p-2 hover:bg-accent hover:brightness-95 rounded-md",
+          className,
+        )}
+      >
+        <ChevronUpIcon
+          className="group-data-[state=open]:rotate-180 transition-transform flex-shrink-0"
+          size={16}
+        />
+      </CollapsibleTrigger>
+    </div>
+  );
+};
+
+export const CollapsibleHeader = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <span className={cn("font-semibold w-full text-start", className)}>
+      {children}
+    </span>
+  );
+};

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

@@ -1,3 +1,4 @@
+import { PlusCircleIcon } from "lucide-react";
 import { Button } from "zudoku/ui/Button.js";
 import {
   DropdownMenu,
@@ -20,7 +21,13 @@ const ExamplesDropdown = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline">Use Example</Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="hover:bg-accent hover:brightness-95"
+        >
+          Use Example <PlusCircleIcon size={16} className="ml-2" />
+        </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="max-w-72">
         {examples.map((mediaTypeObject) => (