zudoku 0.38.0 → 0.39.0

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

@@ -0,0 +1,151 @@
+import slugify from "@sindresorhus/slugify";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  ChevronRightIcon,
+  ChevronsDownUpIcon,
+  ChevronsUpDownIcon,
+} from "lucide-react";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "zudoku/ui/Collapsible.js";
+import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { Heading } from "../../components/Heading.js";
+import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { Toc } from "../../components/navigation/Toc.js";
+import { cn } from "../../util/cn.js";
+import { useCreateQuery } from "./client/useCreateQuery.js";
+import { useOasConfig } from "./context.js";
+import { graphql } from "./graphql/gql.js";
+import { SchemaView } from "./schema/SchemaView.js";
+
+const GET_SCHEMAS = graphql(/* GraphQL */ `
+  query GetSchemas($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      title
+      description
+      summary
+      components {
+        schemas {
+          name
+          schema
+          extensions
+        }
+      }
+    }
+  }
+`);
+
+export function SchemaList() {
+  const { input, type, versions, version, options } = useOasConfig();
+  const schemasQuery = useCreateQuery(GET_SCHEMAS, {
+    input,
+    type,
+  });
+  const { data } = useSuspenseQuery(schemasQuery);
+
+  const schemas = data.schema.components?.schemas ?? [];
+
+  if (!schemas.length) {
+    return <div>No schemas found</div>;
+  }
+
+  const hasMultipleVersions = Object.entries(versions).length > 1;
+  const showVersions =
+    options?.showVersionSelect === "always" ||
+    (hasMultipleVersions && options?.showVersionSelect !== "hide");
+
+  return (
+    <div
+      className="grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between"
+      data-pagefind-filter="section:openapi"
+      data-pagefind-meta="section:openapi"
+    >
+      <div className="pt-[--padding-content-top] pb-[--padding-content-bottom]">
+        <Collapsible className="w-full">
+          <div className="flex flex-col gap-y-4 sm:flex-row justify-around items-start sm:items-end">
+            <div className="flex-1">
+              <CategoryHeading>{data.schema.title}</CategoryHeading>
+              <Heading
+                level={1}
+                id="schemas"
+                registerSidebarAnchor
+                className="mb-0"
+              >
+                Schemas
+                {showVersions && (
+                  <span className="text-xl text-muted-foreground ml-1.5">
+                    ({version})
+                  </span>
+                )}
+              </Heading>
+            </div>
+            {data.schema.description && (
+              <CollapsibleTrigger className="flex items-center gap-1 text-sm font-medium text-muted-foreground group">
+                <span>API information</span>
+                <ChevronsUpDownIcon
+                  className="group-data-[state=open]:hidden translate-y-px"
+                  size={14}
+                />
+                <ChevronsDownUpIcon
+                  className="group-data-[state=closed]:hidden translate-y-px"
+                  size={13}
+                />
+              </CollapsibleTrigger>
+            )}
+          </div>
+          {data.schema.description && (
+            <CollapsibleContent className="CollapsibleContent">
+              <div
+                className={cn(
+                  ProseClasses,
+                  "pt-4 max-w-full prose-img:max-w-prose",
+                )}
+              >
+                <Markdown
+                  className="border rounded bg-muted/25 border-border px-2.5 md:px-4"
+                  content={data.schema.description}
+                />
+              </div>
+            </CollapsibleContent>
+          )}
+        </Collapsible>
+        <hr className="my-8" />
+        <div className="flex flex-col gap-y-5">
+          {schemas.map((schema) => (
+            <Collapsible key={schema.name} className="group" defaultOpen>
+              <Heading
+                registerSidebarAnchor
+                level={2}
+                className="flex items-center gap-1 justify-between w-fit"
+                id={slugify(schema.name)}
+              >
+                {schema.name}{" "}
+                <CollapsibleTrigger asChild>
+                  <Button variant="ghost" size="icon" className="size-6">
+                    <ChevronRightIcon
+                      size={16}
+                      className="group-data-[state=open]:rotate-90 transition cursor-pointer"
+                    />
+                  </Button>
+                </CollapsibleTrigger>
+              </Heading>
+              <CollapsibleContent className="mt-4 CollapsibleContent">
+                <SchemaView schema={schema.schema} />
+              </CollapsibleContent>
+            </Collapsible>
+          ))}
+        </div>
+      </div>
+      <Toc
+        entries={schemas.map((schema) => ({
+          id: slugify(schema.name),
+          value: schema.name,
+          depth: 1,
+        }))}
+      />
+    </div>
+  );
+}

package/src/lib/plugins/openapi/client/GraphQLClient.tsx

@@ -43,7 +43,7 @@ export class GraphQLClient {
 
   fetch = async <TResult, TVariables>(
     query: TypedDocumentString<TResult, TVariables>,
-    ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
+    variables?: TVariables,
   ): Promise<TResult> => {
     const operationName = query.match(/query (\w+)/)?.[1];
 

package/src/lib/plugins/openapi/client/useCreateQuery.ts

@@ -1,19 +1,26 @@
 import { stripIgnoredCharacters } from "graphql";
-import { useContext } from "react";
+import { use } from "react";
 import type { TypedDocumentString } from "../graphql/graphql.js";
 import { GraphQLContext } from "./GraphQLContext.js";
 
+type NoExtraProps<T, U extends T = T> = U & {
+  [K in Exclude<keyof U, keyof T>]?: never;
+};
+
 export const useCreateQuery = <TResult, TVariables>(
   query: TypedDocumentString<TResult, TVariables>,
-  ...variables: TVariables extends Record<string, never> ? [] : [TVariables]
+  ...[variables]: TVariables extends Record<string, never>
+    ? []
+    : [NoExtraProps<TVariables>]
 ) => {
-  const graphQLClient = useContext(GraphQLContext);
+  const graphQLClient = use(GraphQLContext);
+
   if (graphQLClient === undefined) {
     throw new Error("useGraphQL must be used within a GraphQLProvider");
   }
 
   return {
-    queryFn: () => graphQLClient.fetch(query, ...variables),
-    queryKey: [stripIgnoredCharacters(query.toString()), variables[0]],
+    queryFn: () => graphQLClient.fetch(query, variables),
+    queryKey: [stripIgnoredCharacters(query.toString()), variables],
   } as const;
 };

package/src/lib/plugins/openapi/components/EnumValues.tsx

@@ -26,7 +26,7 @@ export const EnumValues = ({
       <span className="text-muted-foreground">Enum values: </span>
       {visibleValues.map((value) => (
         <div key={value}>
-          <SelectOnClick className="border rounded px-1 font-mono cursor-pointer">
+          <SelectOnClick className="border rounded px-1 font-mono">
             {value}
           </SelectOnClick>
         </div>

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

@@ -16,9 +16,10 @@ type Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.ServersQueryDocument;
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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": typeof types.OperationsFragmentFragmentDoc;
   "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n": typeof types.SchemaWarmupDocument;
-  "\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      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n": typeof types.OperationsForTagDocument;
+  "\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    }\n  }\n": typeof types.GetSidebarOperationsDocument;
+  "\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;
 };
 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":
@@ -27,11 +28,13 @@ const documents: Documents = {
     types.OperationsFragmentFragmentDoc,
   "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n":
     types.SchemaWarmupDocument,
-  "\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      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n":
+  "\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":
     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":
+    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    }\n  }\n":
+  "\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,
 };
 
@@ -57,8 +60,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 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      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n",
+  source: "\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 import("./graphql.js").OperationsForTagDocument;
+/**
+ * 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 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 import("./graphql.js").GetSchemasDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -69,7 +78,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 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    }\n  }\n",
+  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;
 
 export function graphql(source: string) {

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

@@ -35,6 +35,11 @@ export type Scalars = {
   JSONSchema: { input: any; output: any };
 };
 
+export type Components = {
+  __typename?: "Components";
+  schemas?: Maybe<Array<SchemaItem>>;
+};
+
 export type EncodingItem = {
   __typename?: "EncodingItem";
   allowReserved?: Maybe<Scalars["Boolean"]["output"]>;
@@ -132,6 +137,7 @@ export type ResponseItem = {
 
 export type Schema = {
   __typename?: "Schema";
+  components?: Maybe<Components>;
   description?: Maybe<Scalars["String"]["output"]>;
   extensions?: Maybe<Scalars["JSONObject"]["output"]>;
   openapi: Scalars["String"]["output"];
@@ -139,6 +145,7 @@ export type Schema = {
   paths: Array<PathItem>;
   servers: Array<Server>;
   summary?: Maybe<Scalars["String"]["output"]>;
+  tag?: Maybe<SchemaTag>;
   tags: Array<SchemaTag>;
   title: Scalars["String"]["output"];
   url?: Maybe<Scalars["String"]["output"]>;
@@ -153,16 +160,28 @@ export type SchemaOperationsArgs = {
   untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
 };
 
-export type SchemaTagsArgs = {
+export type SchemaTagArgs = {
   name?: InputMaybe<Scalars["String"]["input"]>;
+  slug?: InputMaybe<Scalars["String"]["input"]>;
+  untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
+};
+
+export type SchemaItem = {
+  __typename?: "SchemaItem";
+  extensions?: Maybe<Scalars["JSONObject"]["output"]>;
+  name: Scalars["String"]["output"];
+  schema: Scalars["JSONSchema"]["output"];
 };
 
 export type SchemaTag = {
   __typename?: "SchemaTag";
   description?: Maybe<Scalars["String"]["output"]>;
   extensions?: Maybe<Scalars["JSONObject"]["output"]>;
+  isUntagged: Scalars["Boolean"]["output"];
   name?: Maybe<Scalars["String"]["output"]>;
+  next?: Maybe<SchemaTag>;
   operations: Array<OperationItem>;
+  prev?: Maybe<SchemaTag>;
   slug?: Maybe<Scalars["String"]["output"]>;
 };
 
@@ -292,18 +311,52 @@ export type OperationsForTagQuery = {
     url?: string | null;
     version: string;
     servers: Array<{ __typename?: "Server"; url: string }>;
-    tags: Array<{
+    tag?: {
       __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;
+          };
+        }
+      >;
+      next?: {
+        __typename?: "SchemaTag";
+        name?: string | null;
+        slug?: string | null;
+      } | null;
+      prev?: {
+        __typename?: "SchemaTag";
+        name?: string | null;
+        slug?: string | null;
+      } | null;
+    } | null;
+  };
+};
+
+export type GetSchemasQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type GetSchemasQuery = {
+  __typename?: "Query";
+  schema: {
+    __typename?: "Schema";
+    title: string;
+    description?: string | null;
+    summary?: string | null;
+    components?: {
+      __typename?: "Components";
+      schemas?: Array<{
+        __typename?: "SchemaItem";
+        name: string;
+        schema: any;
+        extensions?: any | null;
+      }> | null;
+    } | null;
   };
 };
 
@@ -344,6 +397,10 @@ export type GetSidebarOperationsQuery = {
         path: string;
       }>;
     }>;
+    components?: {
+      __typename?: "Components";
+      schemas?: Array<{ __typename: "SchemaItem" }> | null;
+    } | null;
   };
 };
 
@@ -468,13 +525,21 @@ export const OperationsForTagDocument = new TypedDocumentString(`
     title
     url
     version
-    tags(name: $tag) {
+    tag(slug: $tag, untagged: $untagged) {
       name
       description
-    }
-    operations(tag: $tag, untagged: $untagged) {
-      slug
-      ...OperationsFragment
+      operations {
+        slug
+        ...OperationsFragment
+      }
+      next {
+        name
+        slug
+      }
+      prev {
+        name
+        slug
+      }
     }
   }
 }
@@ -545,6 +610,25 @@ export const OperationsForTagDocument = new TypedDocumentString(`
   OperationsForTagQuery,
   OperationsForTagQueryVariables
 >;
+export const GetSchemasDocument = new TypedDocumentString(`
+    query GetSchemas($input: JSON!, $type: SchemaType!) {
+  schema(input: $input, type: $type) {
+    title
+    description
+    summary
+    components {
+      schemas {
+        name
+        schema
+        extensions
+      }
+    }
+  }
+}
+    `) as unknown as TypedDocumentString<
+  GetSchemasQuery,
+  GetSchemasQueryVariables
+>;
 export const GetServerQueryDocument = new TypedDocumentString(`
     query getServerQuery($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
@@ -573,6 +657,11 @@ export const GetSidebarOperationsDocument = new TypedDocumentString(`
         path
       }
     }
+    components {
+      schemas {
+        __typename
+      }
+    }
   }
 }
     `) as unknown as TypedDocumentString<

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

@@ -29,6 +29,11 @@ const GetSidebarOperationsQuery = graphql(`
           path
         }
       }
+      components {
+        schemas {
+          __typename
+        }
+      }
     }
   }
 `);
@@ -168,6 +173,14 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
           );
         }
 
+        if (data.schema.components?.schemas?.length) {
+          categories.push({
+            type: "link" as const,
+            label: "Schemas",
+            href: joinUrl(basePath, versionParam, "~schemas"),
+          });
+        }
+
         return categories;
       } catch {
         return [];

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroup.tsx

@@ -15,14 +15,12 @@ export const LogicalGroup = ({
   schemas,
   type,
   isOpen,
-  level,
   toggleOpen,
 }: {
   schemas: SchemaObject[];
   type: LogicalGroupType;
   isOpen: boolean;
   toggleOpen: () => void;
-  level: number;
 }) => (
   <Collapsible.Root open={isOpen} onOpenChange={toggleOpen} asChild>
     <Card className="px-6">
@@ -34,12 +32,7 @@ export const LogicalGroup = ({
       <Collapsible.Content className="pb-4">
         {schemas.map((subSchema, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <LogicalGroupItem
-            key={index}
-            type={type}
-            schema={subSchema}
-            level={level}
-          />
+          <LogicalGroupItem key={index} type={type} schema={subSchema} />
         ))}
       </Collapsible.Content>
     </Card>

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupItem.tsx

@@ -8,7 +8,6 @@ import { LogicalGroupConnector } from "./LogicalGroupConnector.js";
 export const LogicalGroupItem = (props: {
   type: LogicalGroupType;
   schema: SchemaObject;
-  level: number;
 }) => {
   const [isOpen, setIsOpen] = useState(true);
 
@@ -23,7 +22,7 @@ export const LogicalGroupItem = (props: {
       </Collapsible.Trigger>
       {!isOpen && <div className="wavy-line bg-border translate-y-1" />}
       <Collapsible.Content>
-        <SchemaView schema={props.schema} level={props.level + 1} />
+        <SchemaView schema={props.schema} />
       </Collapsible.Content>
     </Collapsible.Root>
   );

package/src/lib/plugins/openapi/schema/SchemaExampleAndDefault.tsx

@@ -0,0 +1,36 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { SelectOnClick } from "../components/SelectOnClick.js";
+
+export const SchemaExampleAndDefault = ({
+  schema,
+}: {
+  schema: SchemaObject;
+}) => {
+  const example = schema.examples?.at(0);
+  const defaultValue = schema.default;
+
+  if (!example && !defaultValue) return null;
+
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      {example && (
+        <div>
+          <span className="text-muted-foreground">Example: </span>
+          <SelectOnClick className="border rounded px-1 font-mono">
+            {typeof example === "object" ? JSON.stringify(example) : example}
+          </SelectOnClick>
+        </div>
+      )}
+      {defaultValue && (
+        <div>
+          <span className="text-muted-foreground">Default: </span>
+          <SelectOnClick className="border rounded px-1 font-mono">
+            {typeof defaultValue === "object"
+              ? JSON.stringify(defaultValue)
+              : defaultValue}
+          </SelectOnClick>
+        </div>
+      )}
+    </div>
+  );
+};