zudoku 0.36.0 → 0.37.1

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

@@ -1,6 +1,29 @@
-import { isValidElement } from "react";
+import { ChevronsLeftRightIcon } from "lucide-react";
+import { isValidElement, useState } from "react";
 import { InlineCode } from "../../components/InlineCode.js";
 import { type SchemaObject } from "../../oas/parser/index.js";
+import { cn } from "../../util/cn.js";
+
+const Pattern = ({ pattern }: { pattern: string }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const isExpandable = pattern.length > 20;
+  const shortPattern = isExpandable ? `${pattern.slice(0, 20)}…` : pattern;
+
+  return (
+    <InlineCode
+      className={cn("text-xs", isExpandable && "cursor-pointer")}
+      onClick={() => setIsExpanded(!isExpanded)}
+      selectOnClick={false}
+    >
+      {isExpanded ? pattern : shortPattern}
+      {isExpandable && (
+        <button type="button" className="p-1 translate-y-[2px]">
+          {!isExpanded && <ChevronsLeftRightIcon size={12} />}
+        </button>
+      )}
+    </InlineCode>
+  );
+};
 
 const getSchemaInfos = (schema?: SchemaObject) => {
   if (!schema) return [];
@@ -28,7 +51,7 @@ const getSchemaInfos = (schema?: SchemaObject) => {
     schema.deprecated && "deprecated",
     schema.pattern && (
       <>
-        pattern: <InlineCode className="text-xs">{schema.pattern}</InlineCode>
+        pattern: <Pattern pattern={schema.pattern} />
       </>
     ),
   ];
@@ -48,7 +71,7 @@ export const ParamInfos = ({
   );
 
   return (
-    <div className={className}>
+    <span className={className}>
       {filteredItems.map((item, index) => (
         <span className="text-muted-foreground" key={index}>
           {item}
@@ -59,6 +82,6 @@ export const ParamInfos = ({
           )}
         </span>
       ))}
-    </div>
+    </span>
   );
 };

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

@@ -67,7 +67,11 @@ export const ParameterListItem = ({
           className="text-sm prose-p:my-1 prose-code:whitespace-pre-line"
         />
       )}
-      {paramSchema.enum && <EnumValues values={paramSchema.enum} />}
+      {paramSchema.type === "array" && paramSchema.items.enum ? (
+        <EnumValues values={paramSchema.items.enum} />
+      ) : (
+        paramSchema.enum && <EnumValues values={paramSchema.enum} />
+      )}
     </li>
   );
 };

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

@@ -71,7 +71,7 @@ export const SchemaPropertyItem = ({
     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="flex gap-2 items-center">
+          <div className="space-x-2">
             <code>{name}</code>
             <ParamInfos schema={schema} />
             <RecursiveIndicator />
@@ -84,7 +84,7 @@ export const SchemaPropertyItem = ({
   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="flex gap-2 items-center">
+        <div className="space-x-2">
           <SelectOnClick asChild>
             <code>{name}</code>
           </SelectOnClick>
@@ -106,6 +106,9 @@ export const SchemaPropertyItem = ({
             content={schema.description}
           />
         )}
+        {schema.type === "array" && "items" in schema && schema.items.enum && (
+          <EnumValues values={schema.items.enum} />
+        )}
         {schema.enum && <EnumValues values={schema.enum} />}
 
         {(hasLogicalGroupings(schema) || isComplexType(schema)) && (

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

@@ -3,12 +3,22 @@ import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/Card.js";
 import { cn } from "../../../util/cn.js";
 import { groupBy } from "../../../util/groupBy.js";
+import { EnumValues } from "../components/EnumValues.js";
+import { ParamInfos } from "../ParamInfos.js";
 import {
   SchemaLogicalGroup,
   SchemaPropertyItem,
 } from "./SchemaPropertyItem.js";
 import { hasLogicalGroupings } from "./utils.js";
 
+const renderMarkdown = (content?: string) =>
+  content && (
+    <Markdown
+      className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+      content={content}
+    />
+  );
+
 export const SchemaView = ({
   schema,
   level = 0,
@@ -33,11 +43,33 @@ export const SchemaView = ({
       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) {
+    if (Array.isArray(schema.type)) {
+      return (
+        <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)}
+        </Card>
+      );
+    }
+
+    if (schema.type === "array" && typeof schema.items === "object") {
       const itemsSchema = schema.items as SchemaObject;
 
+      if (itemsSchema.enum) {
+        return (
+          <Card className="p-4">
+            <span className="text-sm text-muted-foreground">
+              <ParamInfos schema={schema} />
+            </span>
+            <EnumValues values={itemsSchema.enum} />
+            {renderMarkdown(schema.description)}
+          </Card>
+        );
+      }
+
       if (
         typeof itemsSchema.type === "string" &&
         ["string", "number", "boolean", "integer"].includes(itemsSchema.type)
@@ -45,17 +77,9 @@ export const SchemaView = ({
         return (
           <Card className="p-4">
             <span className="text-sm text-muted-foreground">
-              {itemsSchema.type}[]
+              <ParamInfos schema={schema} />
             </span>
-            {schema.description && (
-              <Markdown
-                className={cn(
-                  ProseClasses,
-                  "text-sm leading-normal line-clamp-4",
-                )}
-                content={schema.description}
-              />
-            )}
+            {renderMarkdown(schema.description)}
           </Card>
         );
       } else if (itemsSchema.type === "object") {
@@ -75,18 +99,12 @@ export const SchemaView = ({
       (!schema.properties || Object.keys(schema.properties).length === 0)
     ) {
       return (
-        <Card className="p-4 flex gap-2 items-center">
+        <Card className="p-4 flex gap-2 items-baseline">
           {"name" in schema && <>{schema.name as string}</>}
-          <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}
-            />
-          )}
+          <span className="text-sm text-muted-foreground">
+            <ParamInfos schema={schema} />
+          </span>
+          {renderMarkdown(schema.description)}
         </Card>
       );
     }
@@ -133,17 +151,12 @@ export const SchemaView = ({
       ["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 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)}
         </Card>
       );
     }

package/src/lib/ui/Button.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "../util/cn.js";
 
 export const buttonVariants = cva(
-  "not-prose inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "not-prose inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/lib/util/joinPath.tsx

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Use `joinUrl` instead.
+ */
 export const joinPath = (
   ...parts: Array<string | null | undefined | boolean>
 ) => {