zudoku 0.35.3 → 0.35.4

package/lib/zudoku.plugin-openapi.js

@@ -5,7 +5,7 @@ import "./chunk-HA7DTUK3-ZGg2W6yV.js";
 import "./hook-CfCFKZ-2.js";
 import "./ui/Button.js";
 import "./joinUrl-10po2Jdj.js";
-import { U as n, o as s } from "./index-UmhI2mj7.js";
+import { U as n, o as s } from "./index-BVhQWA89.js";
 export {
   n as UNTAGGED_PATH,
   s as openApiPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.35.3",
+  "version": "0.35.4",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {

package/src/lib/components/Layout.tsx

@@ -12,7 +12,7 @@ import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
 const LoadingFallback = () => (
-  <main className="col-span-full grid place-items-center">
+  <main className="col-span-full row-span-full grid place-items-center">
     <Spinner />
   </main>
 );

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

@@ -0,0 +1,64 @@
+import { isValidElement } from "react";
+import { InlineCode } from "../../components/InlineCode.js";
+import { type SchemaObject } from "../../oas/parser/index.js";
+
+const getSchemaInfos = (schema?: SchemaObject) => {
+  if (!schema) return [];
+
+  return [
+    schema.type === "array" && schema.items.type
+      ? `${schema.items.type}[]`
+      : Array.isArray(schema.type)
+        ? schema.type.join(" | ")
+        : schema.type,
+
+    schema.enum && "enum",
+    schema.format,
+    schema.minimum && `min: ${schema.minimum}`,
+    schema.maximum && `max: ${schema.maximum}`,
+    schema.minLength && `minLength: ${schema.minLength}`,
+    schema.maxLength && `maxLength: ${schema.maxLength}`,
+    schema.minItems && `minItems: ${schema.minItems}`,
+    schema.maxItems && `maxItems: ${schema.maxItems}`,
+    schema.uniqueItems && "unique",
+    schema.minProperties && `minProps: ${schema.minProperties}`,
+    schema.maxProperties && `maxProps: ${schema.maxProperties}`,
+    schema.readOnly && "readOnly",
+    schema.writeOnly && "writeOnly",
+    schema.deprecated && "deprecated",
+    schema.pattern && (
+      <>
+        pattern: <InlineCode className="text-xs">{schema.pattern}</InlineCode>
+      </>
+    ),
+  ];
+};
+
+export const ParamInfos = ({
+  schema,
+  extraItems = [],
+  className,
+}: {
+  schema?: SchemaObject;
+  extraItems?: unknown[];
+  className?: string;
+}) => {
+  const filteredItems = [...extraItems, ...getSchemaInfos(schema)].flatMap(
+    (item) => (typeof item === "string" || isValidElement(item) ? item : []),
+  );
+
+  return (
+    <div className={className}>
+      {filteredItems.map((item, index) => (
+        <span className="text-muted-foreground" key={index}>
+          {item}
+          {index < filteredItems.length - 1 && (
+            <span className="text-muted-foreground/50">
+              &nbsp;&middot;&nbsp;
+            </span>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+};

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

@@ -1,9 +1,9 @@
-import { Badge } from "zudoku/ui/Badge.js";
 import { Markdown } from "../../components/Markdown.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import { ColorizedParam } from "./ColorizedParam.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import type { ParameterGroup } from "./OperationListItem.js";
+import { ParamInfos } from "./ParamInfos.js";
 import { EnumValues } from "./components/EnumValues.js";
 
 const getParameterSchema = (
@@ -40,22 +40,20 @@ export const ParameterListItem = ({
             <ColorizedParam
               name={parameter.name}
               backgroundOpacity="15%"
-              className="px-1"
+              className="px-2"
               slug={`${id}-${parameter.name}`}
             />
           ) : (
             parameter.name
           )}
         </code>
-        {paramSchema.type && (
-          <Badge variant="muted">
-            {paramSchema.type === "array"
-              ? `${paramSchema.items.type}[]`
-              : paramSchema.type}
-          </Badge>
-        )}
-        {parameter.required && <Badge variant="outline">required</Badge>}
-        {parameter.style === "form" && <Badge variant="secondary">form</Badge>}
+        <ParamInfos
+          schema={paramSchema}
+          extraItems={[
+            parameter.required && "required",
+            parameter.style === "form" && "form",
+          ]}
+        />
       </div>
       {parameter.description && (
         <Markdown

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

@@ -1,13 +1,13 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { ListPlusIcon, RefreshCcwDotIcon } from "lucide-react";
+import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
-import { Badge } from "zudoku/ui/Badge.js";
 import { Markdown, ProseClasses } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
 import { cn } from "../../../util/cn.js";
 import { objectEntries } from "../../../util/objectEntries.js";
 import { EnumValues } from "../components/EnumValues.js";
+import { ParamInfos } from "../ParamInfos.js";
 import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaView } from "./SchemaView.js";
 import {
@@ -43,8 +43,8 @@ export const SchemaLogicalGroup = ({
 };
 
 const RecursiveIndicator = () => (
-  <div className="flex items-center gap-2 italic text-sm text-muted-foreground font-mono bg-muted px-2 py-0.5 rounded-md">
-    <RefreshCcwDotIcon size={16} />
+  <div className="flex items-center gap-1.5 italic text-xs text-muted-foreground font-mono bg-muted px-2 py-0.5 rounded-md">
+    <RefreshCcwDotIcon size={13} />
     <span>circular</span>
   </div>
 );
@@ -69,11 +69,13 @@ export const SchemaPropertyItem = ({
   if (isCircularRef(schema)) {
     return (
       <li className="p-4 bg-border/20 hover:bg-border/30">
-        <div className="flex flex-col gap-1 justify-between text-sm">
+        <div className="flex flex-col gap-2.5 justify-between text-sm">
           <div className="flex gap-2 items-center">
             <code>{name}</code>
-            <Badge variant="muted">object</Badge>
-            {group === "optional" && <Badge variant="outline">optional</Badge>}
+            <ParamInfos
+              schema={schema}
+              extraItems={[group === "optional" && "optional"]}
+            />
             <RecursiveIndicator />
           </div>
         </div>
@@ -83,19 +85,13 @@ export const SchemaPropertyItem = ({
 
   return (
     <li className="p-4 bg-border/20 hover:bg-border/30">
-      <div className="flex flex-col gap-1.5 justify-between text-sm">
+      <div className="flex flex-col gap-2.5 justify-between text-sm">
         <div className="flex gap-2 items-center">
           <code>{name}</code>
-          <Badge variant="muted">
-            {schema.type === "array" && schema.items.type ? (
-              <span>{schema.items.type}[]</span>
-            ) : Array.isArray(schema.type) ? (
-              <span>{schema.type.join(" | ")}</span>
-            ) : (
-              <span>{schema.type}</span>
-            )}
-          </Badge>
-          {group === "optional" && <Badge variant="outline">optional</Badge>}
+          <ParamInfos
+            schema={schema}
+            extraItems={[group === "optional" && "optional"]}
+          />
           {schema.type === "array" &&
             "items" in schema &&
             isCircularRef(schema.items) && <RecursiveIndicator />}
@@ -106,12 +102,6 @@ export const SchemaPropertyItem = ({
             content={schema.description}
           />
         )}
-        {schema.format && (
-          <div>
-            <span className="text-sm text-muted-foreground">Format: </span>
-            <code>{schema.format}</code>
-          </div>
-        )}
         {schema.enum && <EnumValues values={schema.enum} />}
 
         {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
@@ -122,15 +112,9 @@ export const SchemaPropertyItem = ({
           >
             {showCollapseButton && (
               <Collapsible.Trigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="mt-2 flex gap-1.5"
-                >
-                  <ListPlusIcon size={18} />
-                  {!isOpen
-                    ? "Show nested properties"
-                    : "Hide nested properties"}
+                <Button variant="expand" size="sm" className="h-7">
+                  {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
+                  {!isOpen ? "Show properties" : "Hide properties"}
                 </Button>
               </Collapsible.Trigger>
             )}

package/src/lib/ui/Button.tsx

@@ -1,5 +1,5 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva, VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../util/cn.js";
 
@@ -18,6 +18,8 @@ export const buttonVariants = cva(
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        expand:
+          "flex gap-1.5 border bg-transparent rounded-xl text-muted-foreground hover:text-foreground",
       },
       size: {
         default: "h-9 px-4 py-2",