zudoku 0.27.0 → 0.28.1

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

@@ -17,7 +17,6 @@ import { useApiIdentities } from "../../components/context/ZudokuContext.js";
 import { cn } from "../../util/cn.js";
 import { Endpoint } from "./Endpoint.js";
 import { OperationListItem } from "./OperationListItem.js";
-import StaggeredRender from "./StaggeredRender.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
@@ -90,35 +89,51 @@ export const OperationsFragment = graphql(/* GraphQL */ `
 export type OperationListItemResult = ResultOf<typeof OperationsFragment>;
 
 const AllOperationsQuery = graphql(/* GraphQL */ `
-  query AllOperations($input: JSON!, $type: SchemaType!) {
+  query AllOperations(
+    $input: JSON!
+    $type: SchemaType!
+    $tag: String
+    $untagged: Boolean
+  ) {
     schema(input: $input, type: $type) {
       description
       summary
       title
       url
       version
-      tags {
+      tags(name: $tag) {
         name
         description
-        operations {
-          slug
-          ...OperationsFragment
-        }
+      }
+      operations(tag: $tag, untagged: $untagged) {
+        slug
+        ...OperationsFragment
       }
     }
   }
 `);
 
-export const OperationList = () => {
+export const OperationList = ({
+  tag,
+  untagged,
+}: {
+  tag?: string;
+  untagged?: boolean;
+}) => {
   const { input, type, versions, version } = useOasConfig();
-  const query = useCreateQuery(AllOperationsQuery, { input, type });
+  const query = useCreateQuery(AllOperationsQuery, {
+    input,
+    type,
+    tag,
+    untagged,
+  });
   const { selectedServer } = useSelectedServerStore();
   const result = useSuspenseQuery(query);
   const title = result.data.schema.title;
   const summary = result.data.schema.summary;
   const description = result.data.schema.description;
   const navigate = useNavigate();
-
+  const operations = result.data.schema.operations;
   // Prefetch for Playground
   useApiIdentities();
 
@@ -175,7 +190,14 @@ export const OperationList = () => {
       <div className="my-4 flex items-center justify-end gap-4">
         <Endpoint />
       </div>
-      {result.data.schema.tags
+      {operations.map((fragment) => (
+        <OperationListItem
+          serverUrl={selectedServer ?? result.data.schema.url ?? ""}
+          key={fragment.slug}
+          operationFragment={fragment}
+        />
+      ))}
+      {/* {result.data.schema.tags
         .filter((tag) => tag.operations.length > 0)
         .map((tag) => (
           // px, -mx is so that `content-visibility` doesn't cut off overflown heading anchor links '#'
@@ -199,7 +221,7 @@ export const OperationList = () => {
               </StaggeredRender>
             </div>
           </div>
-        ))}
+        ))} */}
     </div>
   );
 };

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

@@ -37,7 +37,12 @@ export const OperationListItem = ({
       className="grid grid-cols-1 lg:grid-cols-[minmax(0,4fr)_minmax(0,3fr)] gap-8 items-start border-b-2 mb-16 pb-16"
     >
       <div className="flex flex-col gap-4">
-        <Heading level={2} id={operation.slug} registerSidebarAnchor>
+        <Heading
+          level={2}
+          id={operation.slug}
+          registerSidebarAnchor
+          className="break-all"
+        >
           {operation.summary}
         </Heading>
         <div className="text-sm flex gap-2 font-mono">

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

@@ -40,7 +40,7 @@ export const ParameterListItem = ({
               name={parameter.name}
               backgroundOpacity="15%"
               className="px-1"
-              slug={id + "-" + parameter.name.toLocaleLowerCase()}
+              slug={`${id}-${parameter.name}`}
             />
           ) : (
             parameter.name

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

@@ -8,6 +8,8 @@ export const RequestBodySidecarBox = ({
   content: Content;
   onExampleChange?: (example: unknown) => void;
 }) => {
+  if (content.length === 0) return null;
+
   return (
     <SidecarBox.Root>
       <SidecarBox.Head className="text-xs flex justify-between items-center">

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

@@ -1,8 +1,9 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { HTTPSnippet } from "@zudoku/httpsnippet";
-import { Fragment, useMemo, useState, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
 import { useSelectedServerStore } from "../../authentication/state.js";
+import { PathRenderer } from "../../components/PathRenderer.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
@@ -114,31 +115,21 @@ export const Sidecar = ({
 
   const requestBodyContent = operation.requestBody?.content;
 
-  const path = operation.path.split("/").map((part, i, arr) => {
-    const isParam =
-      (part.startsWith("{") && part.endsWith("}")) || part.startsWith(":");
-    const paramName = isParam ? part.replace(/[:{}]/g, "") : undefined;
-
-    return (
-      // eslint-disable-next-line react/no-array-index-key
-      <Fragment key={part + i}>
-        {paramName ? (
-          <ColorizedParam
-            name={paramName}
-            backgroundOpacity="0"
-            // same as in `ParameterListItem`
-            slug={`${operation.slug}-${paramName.toLocaleLowerCase()}`}
-          >
-            {part}
-          </ColorizedParam>
-        ) : (
-          part
-        )}
-        {i < arr.length - 1 ? "/" : null}
-        <wbr />
-      </Fragment>
-    );
-  });
+  const path = (
+    <PathRenderer
+      path={operation.path}
+      renderParam={({ name }) => (
+        <ColorizedParam
+          name={name}
+          backgroundOpacity="0"
+          // same as in `ParameterListItem`
+          slug={`${operation.slug}-${name}`}
+        >
+          {`{${name}}`}
+        </ColorizedParam>
+      )}
+    />
+  );
 
   const { selectedServer } = useSelectedServerStore();
 
@@ -196,7 +187,7 @@ export const Sidecar = ({
           </span>
           {isOnScreen && (
             <PlaygroundDialogWrapper
-              server={result.data.schema.url}
+              server={result.data.schema.url ?? ""}
               servers={result.data.schema.servers.map((server) => server.url)}
               operation={operation}
               examples={requestBodyContent ?? undefined}

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

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
-import { type SchemaObject } from "../../oas/graphql/index.js";
+import { SchemaObject } from "../../oas/parser/index.js";
 import { CollapsibleCode } from "./CollapsibleCode.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import * as SidecarBox from "./SidecarBox.js";
@@ -57,27 +57,27 @@ export const SidecarExamples = ({
   const examples = effectiveContent?.examples ?? [];
   const selectedExample = examples[selectedExampleIndex];
 
-  let exampleValue = undefined;
-  if (selectedExample) {
-    // If it's a wrapped example with a value field, use that
-    exampleValue =
-      "value" in selectedExample ? selectedExample.value : selectedExample;
-  } else if (effectiveContent?.schema) {
-    // No example provided, generate one from schema
-    exampleValue = generateSchemaExample(
-      effectiveContent.schema as SchemaObject,
-    );
-  }
+  const exampleValue = useMemo(() => {
+    if (selectedExample) {
+      // If it's a wrapped example with a value field, use that
+      return "value" in selectedExample
+        ? selectedExample.value
+        : selectedExample;
+    } else if (effectiveContent?.schema) {
+      // No example provided, generate one from schema
+      return generateSchemaExample(effectiveContent.schema as SchemaObject);
+    }
+  }, [selectedExample, effectiveContent?.schema]);
 
   useEffect(() => {
+    if (!exampleValue) return;
+
     onExampleChange?.(exampleValue);
   }, [exampleValue, onExampleChange]);
 
   const formattedExample = formatForDisplay(exampleValue);
   const language = getLanguage(effectiveContent?.mediaType);
 
-  const hasContent = examples.length > 0 || content.length > 0;
-
   return (
     <>
       <SidecarBox.Body className="p-0">
@@ -109,13 +109,13 @@ export const SidecarExamples = ({
           </div>
         )}
       </SidecarBox.Body>
-      {hasContent && (
-        <SidecarBox.Footer className="text-xs p-0">
-          {description && (
-            <div className="text-muted-foreground text-xs border-b px-3 py-2">
-              {description}
-            </div>
-          )}
+      <SidecarBox.Footer className="text-xs p-0 divide-y divide-border">
+        {description && (
+          <div className="text-muted-foreground text-xs px-3 py-2">
+            {description}
+          </div>
+        )}
+        {(examples.length !== 0 || content.length !== 0) && (
           <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 ? (
@@ -156,8 +156,8 @@ export const SidecarExamples = ({
               </div>
             )}
           </div>
-        </SidecarBox.Footer>
-      )}
+        )}
+      </SidecarBox.Footer>
     </>
   );
 };

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

@@ -17,12 +17,14 @@ const documents = {
     types.ServersQueryDocument,
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
-  "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      summary\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
+  "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
   "\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 GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
+  "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n":
     types.GetCategoriesDocument,
+  "\n  query GetOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n      }\n    }\n  }\n":
+    types.GetOperationsDocument,
 };
 
 /**
@@ -41,7 +43,7 @@ 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 AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      summary\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n",
+  source: "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").AllOperationsDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
@@ -53,8 +55,14 @@ 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 GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n",
+  source: "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").GetCategoriesDocument;
+/**
+ * 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 GetOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n      }\n    }\n  }\n",
+): typeof import("./graphql.js").GetOperationsDocument;
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

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

@@ -31,6 +31,8 @@ export type Scalars = {
   JSON: { input: any; output: any };
   /** The `JSONObject` scalar type represents JSON objects as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf). */
   JSONObject: { input: any; output: any };
+  /** OpenAPI schema scalar type that handles circular references */
+  JSONSchema: { input: any; output: any };
 };
 
 export type EncodingItem = {
@@ -57,7 +59,7 @@ export type MediaTypeObject = {
   encoding?: Maybe<Array<EncodingItem>>;
   examples?: Maybe<Array<ExampleItem>>;
   mediaType: Scalars["String"]["output"];
-  schema?: Maybe<Scalars["JSON"]["output"]>;
+  schema?: Maybe<Scalars["JSONSchema"]["output"]>;
 };
 
 export type OperationItem = {
@@ -89,7 +91,7 @@ export type ParameterItem = {
   in: ParameterIn;
   name: Scalars["String"]["output"];
   required?: Maybe<Scalars["Boolean"]["output"]>;
-  schema?: Maybe<Scalars["JSON"]["output"]>;
+  schema?: Maybe<Scalars["JSONSchema"]["output"]>;
   style?: Maybe<Scalars["String"]["output"]>;
 };
 
@@ -132,11 +134,11 @@ export type Schema = {
   operations: Array<OperationItem>;
   paths: Array<PathItem>;
   servers: Array<Server>;
+  summary?: Maybe<Scalars["String"]["output"]>;
   tags: Array<SchemaTag>;
   title: Scalars["String"]["output"];
-  url: Scalars["String"]["output"];
+  url?: Maybe<Scalars["String"]["output"]>;
   version: Scalars["String"]["output"];
-  summary?: Maybe<Scalars["String"]["output"]>;
 };
 
 export type SchemaOperationsArgs = {
@@ -144,6 +146,7 @@ export type SchemaOperationsArgs = {
   operationId?: InputMaybe<Scalars["String"]["input"]>;
   path?: InputMaybe<Scalars["String"]["input"]>;
   tag?: InputMaybe<Scalars["String"]["input"]>;
+  untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
 };
 
 export type SchemaTagsArgs = {
@@ -180,7 +183,7 @@ export type ServersQueryQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
-    url: string;
+    url?: string | null;
     servers: Array<{ __typename?: "Server"; url: string }>;
   };
 };
@@ -255,6 +258,8 @@ export type OperationsFragmentFragment = {
 export type AllOperationsQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
+  tag?: InputMaybe<Scalars["String"]["input"]>;
+  untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
 }>;
 
 export type AllOperationsQuery = {
@@ -264,20 +269,20 @@ export type AllOperationsQuery = {
     description?: string | null;
     summary?: string | null;
     title: string;
-    url: string;
+    url?: string | null;
     version: string;
     tags: Array<{
       __typename?: "SchemaTag";
       name?: string | null;
       description?: string | null;
-      operations: Array<
-        { __typename?: "OperationItem"; slug: string } & {
-          " $fragmentRefs"?: {
-            OperationsFragmentFragment: OperationsFragmentFragment;
-          };
-        }
-      >;
     }>;
+    operations: Array<
+      { __typename?: "OperationItem"; slug: string } & {
+        " $fragmentRefs"?: {
+          OperationsFragmentFragment: OperationsFragmentFragment;
+        };
+      }
+    >;
   };
 };
 
@@ -290,7 +295,7 @@ export type GetServerQueryQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
-    url: string;
+    url?: string | null;
     servers: Array<{ __typename?: "Server"; url: string }>;
   };
 };
@@ -304,19 +309,30 @@ export type GetCategoriesQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
-    url: string;
-    tags: Array<{
-      __typename: "SchemaTag";
-      name?: string | null;
-      operations: Array<{
-        __typename: "OperationItem";
-        slug: string;
-        deprecated?: boolean | null;
-        method: string;
-        summary?: string | null;
-        operationId?: string | null;
-        path: string;
-      }>;
+    url?: string | null;
+    tags: Array<{ __typename?: "SchemaTag"; name?: string | null }>;
+  };
+};
+
+export type GetOperationsQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+  tag?: InputMaybe<Scalars["String"]["input"]>;
+  untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
+}>;
+
+export type GetOperationsQuery = {
+  __typename?: "Query";
+  schema: {
+    __typename?: "Schema";
+    operations: Array<{
+      __typename?: "OperationItem";
+      slug: string;
+      deprecated?: boolean | null;
+      method: string;
+      summary?: string | null;
+      operationId?: string | null;
+      path: string;
     }>;
   };
 };
@@ -418,20 +434,20 @@ export const ServersQueryDocument = new TypedDocumentString(`
   ServersQueryQueryVariables
 >;
 export const AllOperationsDocument = new TypedDocumentString(`
-    query AllOperations($input: JSON!, $type: SchemaType!) {
+    query AllOperations($input: JSON!, $type: SchemaType!, $tag: String, $untagged: Boolean) {
   schema(input: $input, type: $type) {
     description
     summary
     title
     url
     version
-    tags {
+    tags(name: $tag) {
       name
       description
-      operations {
-        slug
-        ...OperationsFragment
-      }
+    }
+    operations(tag: $tag, untagged: $untagged) {
+      slug
+      ...OperationsFragment
     }
   }
 }
@@ -517,17 +533,7 @@ export const GetCategoriesDocument = new TypedDocumentString(`
   schema(input: $input, type: $type) {
     url
     tags {
-      __typename
       name
-      operations {
-        __typename
-        slug
-        deprecated
-        method
-        summary
-        operationId
-        path
-      }
     }
   }
 }
@@ -535,3 +541,20 @@ export const GetCategoriesDocument = new TypedDocumentString(`
   GetCategoriesQuery,
   GetCategoriesQueryVariables
 >;
+export const GetOperationsDocument = new TypedDocumentString(`
+    query GetOperations($input: JSON!, $type: SchemaType!, $tag: String, $untagged: Boolean) {
+  schema(input: $input, type: $type) {
+    operations(tag: $tag, untagged: $untagged) {
+      slug
+      deprecated
+      method
+      summary
+      operationId
+      path
+    }
+  }
+}
+    `) as unknown as TypedDocumentString<
+  GetOperationsQuery,
+  GetOperationsQueryVariables
+>;