zudoku 0.0.0-ff3751f → 0.0.0-fix-display-option-navigation-items.4bdfe991

package/src/lib/plugins/openapi/processors/removePaths.ts

@@ -0,0 +1,57 @@
+import type { ProcessorArg } from "../../../../config/validators/BuildSchema.js";
+import type { OpenAPIDocument } from "../../../oas/parser/index.js";
+import { type RecordAny, traverse } from "./traverse.js";
+
+interface RemovePathsOptions {
+  // Path definitions, e.g., { '/path': true, '/path-2': ['get'] }
+  paths?: Record<string, true | string[]>;
+  shouldRemove?: (options: {
+    path: string;
+    method: true | string;
+    operation: RecordAny;
+  }) => boolean;
+}
+
+export const removePaths =
+  ({ paths = {}, shouldRemove }: RemovePathsOptions) =>
+  ({ schema }: ProcessorArg) =>
+    traverse(schema, (spec) => {
+      if (!spec.paths) return spec;
+
+      const updatedPaths: RecordAny = {};
+
+      for (const [path, methods] of Object.entries(spec.paths)) {
+        const operations = spec.paths[path];
+
+        // If the path is explicitly marked for removal in `paths`
+        if (paths[path] === true) continue;
+
+        // If the path should be removed via `shouldRemove`
+        if (shouldRemove?.({ path, method: true, operation: operations }))
+          continue;
+
+        if (typeof methods === "object" && methods !== null) {
+          const filteredPath = Object.fromEntries(
+            Object.entries(methods).filter(([method]) => {
+              const operations = spec.paths[path][method];
+              const isMethodToRemove =
+                Array.isArray(paths[path]) && paths[path].includes(method);
+
+              const isMethodFiltered = shouldRemove?.({
+                path,
+                method,
+                operation: operations,
+              });
+
+              return !isMethodToRemove && !isMethodFiltered;
+            }),
+          );
+
+          updatedPaths[path] = filteredPath;
+        } else {
+          updatedPaths[path] = methods;
+        }
+      }
+
+      return { ...spec, paths: updatedPaths };
+    }) as OpenAPIDocument;

package/src/lib/plugins/openapi/processors/traverse.ts

@@ -0,0 +1 @@
+export { traverse, type RecordAny } from "../../../util/traverse.js";

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/LogicalGroupConnector.tsx

@@ -24,10 +24,12 @@ export const LogicalGroupConnector = ({
   type,
   isOpen,
   className,
+  schemeName,
 }: {
   type: LogicalGroupType;
   isOpen: boolean;
   className?: string;
+  schemeName?: string;
 }) => {
   return (
     <div
@@ -48,6 +50,7 @@ export const LogicalGroupConnector = ({
         >
           <ChevronDownIcon size={16} />
         </div>
+        <span className="text-sm text-foreground">{schemeName}</span>
       </div>
     </div>
   );

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);
 
@@ -19,11 +18,15 @@ export const LogicalGroupItem = (props: {
       className="group"
     >
       <Collapsible.Trigger>
-        <LogicalGroupConnector type={props.type} isOpen={isOpen} />
+        <LogicalGroupConnector
+          type={props.type}
+          isOpen={isOpen}
+          schemeName={props.schema.title}
+        />
       </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,39 @@
+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 === undefined && defaultValue === undefined) return null;
+
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      {example !== undefined && (
+        <div>
+          <span className="text-muted-foreground">Example: </span>
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
+            {typeof example === "object" || typeof example === "boolean"
+              ? JSON.stringify(example)
+              : example}
+          </SelectOnClick>
+        </div>
+      )}
+      {defaultValue !== undefined && (
+        <div>
+          <span className="text-muted-foreground">Default: </span>
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
+            {typeof defaultValue === "object" ||
+            typeof defaultValue === "boolean"
+              ? JSON.stringify(defaultValue)
+              : defaultValue}
+          </SelectOnClick>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,159 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
+import { useCallback, useState } from "react";
+import { InlineCode } from "../../../components/InlineCode.js";
+import { Markdown } from "../../../components/Markdown.js";
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { Button } from "../../../ui/Button.js";
+import { objectEntries } from "../../../util/objectEntries.js";
+import { ConstValue } from "../components/ConstValue.js";
+import { EnumValues } from "../components/EnumValues.js";
+import { SelectOnClick } from "../components/SelectOnClick.js";
+import { ParamInfos } from "../ParamInfos.js";
+import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
+import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
+import { SchemaView } from "./SchemaView.js";
+import {
+  extractCircularRefInfo,
+  hasLogicalGroupings,
+  isArrayCircularRef,
+  isArrayType,
+  isCircularRef,
+  isComplexType,
+  LogicalSchemaTypeMap,
+} from "./utils.js";
+
+export const SchemaLogicalGroup = ({ schema }: { schema: SchemaObject }) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
+
+  for (const [key, type] of objectEntries(LogicalSchemaTypeMap)) {
+    if (!schema[key]) continue;
+
+    return (
+      <LogicalGroup
+        schemas={schema[key]}
+        type={type}
+        isOpen={isOpen}
+        toggleOpen={toggleOpen}
+      />
+    );
+  }
+};
+
+const RecursiveIndicator = ({ circularProp }: { circularProp?: string }) => (
+  <InlineCode
+    className="inline-flex items-center gap-1.5 italic text-xs translate-y-0.5"
+    selectOnClick={false}
+  >
+    <RefreshCcwDotIcon size={13} />
+    <span>{circularProp ? `${circularProp} (circular)` : "circular"}</span>
+  </InlineCode>
+);
+
+export const SchemaPropertyItem = ({
+  name,
+  schema,
+  group,
+  defaultOpen = false,
+  showCollapseButton = true,
+}: {
+  name: string;
+  schema: SchemaObject;
+  group: "required" | "optional" | "deprecated";
+  defaultOpen?: boolean;
+  showCollapseButton?: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  if (isCircularRef(schema)) {
+    return (
+      <li className="p-4 bg-border/20 hover:bg-border/30">
+        <div className="flex flex-col gap-2.5 justify-between text-sm">
+          <div className="space-x-2 rtl:space-x-reverse">
+            <code>{name}</code>
+            <ParamInfos
+              schema={schema}
+              extraItems={[<RecursiveIndicator key="circular-ref" />]}
+            />
+          </div>
+          <SchemaExampleAndDefault schema={schema} />
+        </div>
+      </li>
+    );
+  }
+
+  const isCollapsible = Boolean(
+    (hasLogicalGroupings(schema) ||
+      isComplexType(schema) ||
+      (isArrayType(schema) &&
+        "items" in schema &&
+        isComplexType(schema.items)) ||
+      schema.additionalProperties) &&
+      !isArrayCircularRef(schema),
+  );
+
+  return (
+    <li className="p-4 bg-border/20 hover:bg-border/30">
+      <div className="flex flex-col gap-2.5 justify-between text-sm">
+        <div className="space-x-2 rtl:space-x-reverse">
+          <SelectOnClick asChild>
+            <code>{name}</code>
+          </SelectOnClick>
+          <ParamInfos
+            schema={schema}
+            extraItems={[
+              group !== "optional" && (
+                <span className="text-primary">required</span>
+              ),
+              isArrayCircularRef(schema) && (
+                <RecursiveIndicator
+                  circularProp={extractCircularRefInfo(schema.items)}
+                />
+              ),
+            ]}
+          />
+        </div>
+        {schema.description && (
+          <Markdown
+            className="text-sm leading-normal"
+            content={schema.description}
+          />
+        )}
+        {schema.type === "array" && "items" in schema && schema.items.enum && (
+          <EnumValues values={schema.items.enum} />
+        )}
+        {schema.const && <ConstValue schema={schema} hideDescription />}
+        {schema.enum && <EnumValues values={schema.enum} />}
+        <SchemaExampleAndDefault schema={schema} />
+        {isCollapsible && (
+          <Collapsible.Root
+            defaultOpen={defaultOpen}
+            open={isOpen}
+            onOpenChange={() => setIsOpen(!isOpen)}
+          >
+            {showCollapseButton && (
+              <Collapsible.Trigger asChild>
+                <Button variant="expand" size="sm">
+                  {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
+                  {!isOpen ? "Show properties" : "Hide properties"}
+                </Button>
+              </Collapsible.Trigger>
+            )}
+            <Collapsible.Content>
+              <div className="mt-2">
+                {hasLogicalGroupings(schema) ? (
+                  <SchemaLogicalGroup schema={schema} />
+                ) : schema.type === "object" ? (
+                  <SchemaView schema={schema} />
+                ) : isArrayType(schema) && "items" in schema ? (
+                  <SchemaView schema={schema.items} />
+                ) : null}
+              </div>
+            </Collapsible.Content>
+          </Collapsible.Root>
+        )}
+      </div>
+    </li>
+  );
+};

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

@@ -1,165 +1,127 @@
-import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import { InfoIcon } from "lucide-react";
+import { Markdown } from "../../../components/Markdown.js";
+import { Typography } from "../../../components/Typography.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
-import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/Card.js";
-import { cn } from "../../../util/cn.js";
+import { Card } from "../../../ui/Card.js";
 import { groupBy } from "../../../util/groupBy.js";
-import { SchemaLogicalGroup, SchemaPropertyItem } from "./SchemaComponents.js";
-import { hasLogicalGroupings } from "./utils.js";
+import { ConstValue } from "../components/ConstValue.js";
+import { EnumValues } from "../components/EnumValues.js";
+import { ParamInfos } from "../ParamInfos.js";
+import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
+import {
+  SchemaLogicalGroup,
+  SchemaPropertyItem,
+} from "./SchemaPropertyItem.js";
+import { hasLogicalGroupings, isBasicType } from "./utils.js";
+
+const renderMarkdown = (content?: string) =>
+  content && (
+    <Markdown
+      className="text-sm leading-normal line-clamp-4"
+      content={content}
+    />
+  );
+
+const renderBasicSchema = (schema: SchemaObject) => (
+  <Card className="p-4 space-y-2">
+    <span className="text-sm text-muted-foreground">
+      <ParamInfos schema={schema} />
+    </span>
+    {schema.enum && <EnumValues values={schema.enum} />}
+    {renderMarkdown(schema.description)}
+    <SchemaExampleAndDefault schema={schema} />
+  </Card>
+);
 
 export const SchemaView = ({
   schema,
-  level = 0,
   defaultOpen = false,
+  cardHeader,
 }: {
   schema?: SchemaObject | null;
-  level?: number;
   defaultOpen?: boolean;
+  cardHeader?: React.ReactNode;
 }) => {
   if (!schema || Object.keys(schema).length === 0) {
     return (
-      <Card className="p-4">
-        <span className="text-sm text-muted-foreground italic">
-          No response specified
-        </span>
+      <Card className="overflow-hidden">
+        {cardHeader}
+        <div className="text-sm text-muted-foreground italic p-4">
+          No data returned
+        </div>
       </Card>
     );
   }
 
-  const renderSchema = (schema: SchemaObject, level: number) => {
-    if (hasLogicalGroupings(schema)) {
-      return <SchemaLogicalGroup schema={schema} level={level} />;
-    }
-
-    // Sometimes items is not defined
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (schema.type === "array" && schema.items) {
-      const itemsSchema = schema.items as SchemaObject;
-
-      if (
-        typeof itemsSchema.type === "string" &&
-        ["string", "number", "boolean", "integer"].includes(itemsSchema.type)
-      ) {
-        return (
-          <Card className="p-4">
-            <span className="text-sm text-muted-foreground">
-              {itemsSchema.type}[]
-            </span>
-            {schema.description && (
-              <Markdown
-                className={cn(
-                  ProseClasses,
-                  "text-sm leading-normal line-clamp-4",
-                )}
-                content={schema.description}
-              />
-            )}
-          </Card>
-        );
-      } else if (itemsSchema.type === "object") {
-        return (
-          <Card className="flex flex-col gap-2 bg-border/30 p-4">
-            <span className="text-sm text-muted-foreground">object[]</span>
-            {renderSchema(itemsSchema, level + 1)}
-          </Card>
-        );
-      } else {
-        return renderSchema(itemsSchema, level + 1);
-      }
-    }
-
-    if (schema.type === "object" && !schema.properties) {
-      return (
-        <Card className="p-4 flex gap-2 items-center">
-          {"name" in schema && <>{schema.name}</>}
-          <span className="text-sm text-muted-foreground">object</span>
-          {schema.description && (
-            <Markdown
-              className={cn(
-                ProseClasses,
-                "text-sm leading-normal line-clamp-4",
-              )}
-              content={schema.description}
-            />
-          )}
-        </Card>
-      );
-    }
+  if (schema.const) {
+    return <ConstValue schema={schema} />;
+  }
 
-    if (schema.properties) {
-      const groupedProperties = groupBy(
-        Object.entries(schema.properties),
-        ([propertyName, property]) => {
-          return property.deprecated
-            ? "deprecated"
-            : schema.required?.includes(propertyName)
-              ? "required"
-              : "optional";
-        },
-      );
+  if (hasLogicalGroupings(schema)) {
+    return <SchemaLogicalGroup schema={schema} />;
+  }
 
-      const groupNames = ["required", "optional", "deprecated"] as const;
+  if (isBasicType(schema.type)) {
+    return renderBasicSchema(schema);
+  }
 
-      return (
-        <Card className="divide-y overflow-hidden">
-          {groupNames.map(
-            (group) =>
-              groupedProperties[group] && (
-                <ul key={group} className="divide-y">
-                  {groupedProperties[group].map(([name, schema]) => (
-                    <SchemaPropertyItem
-                      key={name}
-                      name={name}
-                      schema={schema}
-                      group={group}
-                      level={level}
-                      defaultOpen={defaultOpen}
-                    />
-                  ))}
-                </ul>
-              ),
-          )}
-        </Card>
-      );
-    }
+  if (schema.type === "array" && typeof schema.items === "object") {
+    return <SchemaView schema={schema.items} />;
+  }
 
-    if (
-      typeof schema.type === "string" &&
-      ["string", "number", "boolean", "integer", "null"].includes(schema.type)
-    ) {
-      return (
-        <Card className="p-4">
-          <span className="text-sm text-muted-foreground">{schema.type}</span>
-          {schema.description && (
-            <Markdown
-              className={cn(
-                ProseClasses,
-                "text-sm leading-normal line-clamp-4",
-              )}
-              content={schema.description}
-            />
-          )}
-        </Card>
-      );
-    }
+  if (schema.type === "object") {
+    const groupedProperties = groupBy(
+      Object.entries(schema.properties ?? {}),
+      ([propertyName, property]) => {
+        return property.deprecated
+          ? "deprecated"
+          : schema.required?.includes(propertyName)
+            ? "required"
+            : "optional";
+      },
+    );
+    const groupNames = ["required", "optional", "deprecated"] as const;
 
-    if (schema.additionalProperties) {
-      return (
-        <Card className="my-2">
-          <CardHeader>
-            <CardTitle>Additional Properties:</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {renderSchema(
-              schema.additionalProperties as SchemaObject,
-              level + 1,
-            )}
-          </CardContent>
-        </Card>
-      );
-    }
+    const additionalProperties =
+      typeof schema.additionalProperties === "object" ? (
+        <SchemaView schema={schema.additionalProperties} />
+      ) : schema.additionalProperties === true ? (
+        <Typography className="text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1">
+          <span>Additional properties are allowed</span>
+          <a
+            className="p-0.5 -m-0.5"
+            href="https://swagger.io/docs/specification/v3_0/data-models/dictionaries/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <InfoIcon size={14} />
+          </a>
+        </Typography>
+      ) : null;
 
-    return null;
-  };
+    return (
+      <Card className="divide-y overflow-hidden">
+        {cardHeader}
+        {groupNames.map(
+          (group) =>
+            groupedProperties[group] && (
+              <ul key={group} className="divide-y">
+                {groupedProperties[group].map(([name, schema]) => (
+                  <SchemaPropertyItem
+                    key={name}
+                    name={name}
+                    schema={schema}
+                    group={group}
+                    defaultOpen={defaultOpen}
+                  />
+                ))}
+              </ul>
+            ),
+        )}
+        {additionalProperties}
+      </Card>
+    );
+  }
 
-  return renderSchema(schema, level);
+  return null;
 };

package/src/lib/plugins/openapi/schema/utils.ts

@@ -1,10 +1,25 @@
+import { CIRCULAR_REF } from "../../../oas/graphql/circular.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 
-export const isComplexType = (value: SchemaObject) =>
-  value.type === "object" ||
-  (value.type === "array" &&
-    typeof value.items === "object" &&
-    (!value.items.type || value.items.type === "object"));
+export const isBasicType = (
+  type: unknown,
+): type is "string" | "number" | "boolean" | "integer" | "null" =>
+  (typeof type === "string" &&
+    ["string", "number", "boolean", "integer", "null"].includes(type)) ||
+  (Array.isArray(type) && type.every(isBasicType));
+
+export const isArrayType = (value: SchemaObject) =>
+  value.type === "array" ||
+  // schema.type might be an array of types, so we need to check if "array" is one of them
+  (Array.isArray(value.type) && value.type.includes("array"));
+
+export const isComplexType = (value?: SchemaObject) =>
+  value &&
+  ((value.type === "object" &&
+    Object.keys(value.properties ?? {}).length > 0) ||
+    (value.type === "array" &&
+      typeof value.items === "object" &&
+      (!value.items.type || value.items.type === "object")));
 
 export const hasLogicalGroupings = (value: SchemaObject) =>
   Boolean(value.oneOf ?? value.allOf ?? value.anyOf);
@@ -16,3 +31,16 @@ export const LogicalSchemaTypeMap = {
 } as const;
 
 export type LogicalGroupType = "AND" | "OR" | "ONE";
+
+export const isCircularRef = (schema: unknown): schema is string =>
+  typeof schema === "string" && schema.startsWith(CIRCULAR_REF);
+
+export const isArrayCircularRef = (
+  schema: SchemaObject,
+): schema is SchemaObject & { items: SchemaObject } =>
+  isArrayType(schema) && "items" in schema && isCircularRef(schema.items);
+
+export const extractCircularRefInfo = (
+  ref?: string | SchemaObject,
+): string | undefined =>
+  typeof ref === "string" ? ref.split(":")[1] : undefined;