zudoku 0.0.0-feda542 → 0.0.0-ff27e7ea

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

@@ -1,50 +1,32 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useState } from "react";
+import { Item, ItemActions, ItemContent, ItemTitle } from "zudoku/ui/Item.js";
 import { InlineCode } from "../../../components/InlineCode.js";
-import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import { Markdown } 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 { 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 {
-  hasLogicalGroupings,
+  extractCircularRefInfo,
+  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 = () => (
+const RecursiveIndicator = ({ circularProp }: { circularProp?: string }) => (
   <InlineCode
-    className="inline-flex items-center gap-1.5 italic text-xs translate-y-0.5"
+    className="inline-flex items-center gap-1.5 text-xs translate-y-0.5"
     selectOnClick={false}
   >
     <RefreshCcwDotIcon size={13} />
-    <span>circular</span>
+    <span>{circularProp ? `${circularProp} (circular)` : "circular"}</span>
   </InlineCode>
 );
 
@@ -65,84 +47,129 @@ export const SchemaPropertyItem = ({
 
   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">
-            <code>{name}</code>
+      <Item>
+        <ItemContent className="gap-y-2">
+          <div>
+            <ItemTitle className="inline me-2">
+              <code>{name}</code>
+            </ItemTitle>
             <ParamInfos
+              className="inline"
               schema={schema}
-              extraItems={[<RecursiveIndicator key="circular-ref" />]}
+              extraItems={[
+                group !== "optional" && (
+                  <span className="text-primary">required</span>
+                ),
+                <RecursiveIndicator key="circular-ref" />,
+              ]}
             />
           </div>
           <SchemaExampleAndDefault schema={schema} />
-        </div>
-      </li>
+        </ItemContent>
+      </Item>
     );
   }
 
+  const isCollapsible = Boolean(
+    (schema.allOf ||
+      schema.anyOf ||
+      schema.oneOf ||
+      isComplexType(schema) ||
+      (isArrayType(schema) &&
+        "items" in schema &&
+        isComplexType(schema.items)) ||
+      schema.additionalProperties) &&
+      !isArrayCircularRef(schema),
+  );
+
+  const shouldRenderDescription = Boolean(
+    schema.description ||
+      ("items" in schema && schema.items?.enum) ||
+      schema.const ||
+      schema.enum ||
+      schema.example !== undefined ||
+      schema.default !== undefined,
+  );
+
   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">
-          <SelectOnClick asChild>
-            <code>{name}</code>
-          </SelectOnClick>
+    <Item>
+      <ItemContent className="gap-y-2">
+        <div>
+          <ItemTitle className="inline me-2">
+            {isCollapsible ? (
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                type="button"
+                className="hover:underline"
+              >
+                <code>{name}</code>
+              </button>
+            ) : (
+              <code>{name}</code>
+            )}
+          </ItemTitle>
           <ParamInfos
+            className="inline"
             schema={schema}
             extraItems={[
               group !== "optional" && (
                 <span className="text-primary">required</span>
               ),
-              schema.type === "array" &&
-                "items" in schema &&
-                isCircularRef(schema.items) && <RecursiveIndicator />,
+              isArrayCircularRef(schema) && (
+                <RecursiveIndicator
+                  circularProp={extractCircularRefInfo(schema.items)}
+                />
+              ),
             ]}
           />
         </div>
-        {schema.description && (
-          <Markdown
-            className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
-            content={schema.description}
-          />
-        )}
-        {schema.type === "array" && "items" in schema && schema.items.enum && (
-          <EnumValues values={schema.items.enum} />
-        )}
-        {schema.enum && <EnumValues values={schema.enum} />}
-        <SchemaExampleAndDefault schema={schema} />
-        {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
-          <Collapsible.Root
-            defaultOpen={defaultOpen}
-            open={isOpen}
-            onOpenChange={() => setIsOpen(!isOpen)}
-          >
-            {showCollapseButton && (
-              <Collapsible.Trigger asChild>
-                <Button variant="expand" size="sm" className="h-7">
-                  {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
-                  {!isOpen ? "Show properties" : "Hide properties"}
-                </Button>
-              </Collapsible.Trigger>
+        {shouldRenderDescription && (
+          <div className="flex flex-col gap-1.5">
+            {schema.description && (
+              <Markdown className="prose-sm" content={schema.description} />
             )}
-            <Collapsible.Content>
-              <div className="mt-2">
-                {hasLogicalGroupings(schema) ? (
-                  <SchemaLogicalGroup schema={schema} />
-                ) : schema.type === "object" ? (
-                  <SchemaView schema={schema} />
-                ) : (
-                  schema.type === "array" &&
-                  "items" in schema &&
-                  typeof schema.items === "object" &&
-                  !isCircularRef(schema.items) && (
-                    <SchemaView schema={schema.items} />
-                  )
-                )}
-              </div>
-            </Collapsible.Content>
-          </Collapsible.Root>
+            {"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} />
+          </div>
         )}
-      </div>
-    </li>
+      </ItemContent>
+
+      {isCollapsible && showCollapseButton && (
+        <ItemActions className="self-start">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="rounded-full"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle properties"
+          >
+            {isOpen ? <MinusIcon size={16} /> : <PlusIcon size={16} />}
+          </Button>
+        </ItemActions>
+      )}
+
+      {isCollapsible && (
+        <Collapsible.Root
+          defaultOpen={defaultOpen}
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          className={cn("w-full", !isOpen && "contents")}
+        >
+          <Collapsible.Content asChild>
+            <ItemContent>
+              {schema.anyOf || schema.oneOf || schema.type === "object" ? (
+                <SchemaView schema={schema} />
+              ) : isArrayType(schema) && "items" in schema ? (
+                <SchemaView schema={schema.items} />
+              ) : null}
+            </ItemContent>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      )}
+    </Item>
   );
 };

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

@@ -1,68 +1,97 @@
-import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import { InfoIcon } from "lucide-react";
+import { Fragment } from "react";
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+} from "zudoku/ui/Frame.js";
+import { ItemGroup, ItemSeparator } from "zudoku/ui/Item.js";
+import { Markdown } from "../../../components/Markdown.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 { groupBy } from "../../../util/groupBy.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";
+import { SchemaPropertyItem } from "./SchemaPropertyItem.js";
+import { UnionView } from "./UnionView.js";
+import { isBasicType } from "./utils.js";
 
 const renderMarkdown = (content?: string) =>
   content && (
     <Markdown
-      className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+      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>
-);
+const renderBasicSchema = (
+  schema: SchemaObject,
+  cardHeader?: React.ReactNode,
+  embedded?: boolean,
+) => {
+  const content = (
+    <>
+      <span className="text-sm text-muted-foreground">
+        <ParamInfos schema={schema} />
+      </span>
+      {schema.enum && <EnumValues values={schema.enum} />}
+      {renderMarkdown(schema.description)}
+      <SchemaExampleAndDefault schema={schema} />
+    </>
+  );
+
+  if (embedded) {
+    return <div className="space-y-2 p-4">{content}</div>;
+  }
+
+  return (
+    <Frame>
+      {cardHeader}
+      <FramePanel className="space-y-2">{content}</FramePanel>
+    </Frame>
+  );
+};
 
 export const SchemaView = ({
   schema,
   defaultOpen = false,
+  cardHeader,
+  embedded,
 }: {
   schema?: SchemaObject | null;
   defaultOpen?: boolean;
+  cardHeader?: React.ReactNode;
+  embedded?: boolean;
 }) => {
   if (!schema || Object.keys(schema).length === 0) {
     return (
-      <Card className="p-4">
-        <span className="text-sm text-muted-foreground italic">
-          No schema specified
-        </span>
-      </Card>
+      <Frame>
+        {cardHeader}
+        <FramePanel>
+          <div className="text-sm text-muted-foreground italic">
+            No data returned
+          </div>
+        </FramePanel>
+      </Frame>
     );
   }
 
-  if (hasLogicalGroupings(schema)) {
-    return <SchemaLogicalGroup schema={schema} />;
+  if (schema.const) {
+    return <ConstValue schema={schema} />;
+  }
+
+  if (Array.isArray(schema.oneOf) || Array.isArray(schema.anyOf)) {
+    return <UnionView schema={schema} cardHeader={cardHeader} />;
   }
 
   if (isBasicType(schema.type)) {
-    return renderBasicSchema(schema);
+    return renderBasicSchema(schema, cardHeader, embedded);
   }
 
   if (schema.type === "array" && typeof schema.items === "object") {
-    return (
-      <Card className="p-4 space-y-2 text-sm">
-        <ParamInfos schema={schema} />
-        <SchemaView schema={schema.items as SchemaObject} />
-      </Card>
-    );
+    return <SchemaView schema={schema.items} cardHeader={cardHeader} />;
   }
 
   if (schema.type === "object") {
@@ -78,40 +107,60 @@ export const SchemaView = ({
     );
     const groupNames = ["required", "optional", "deprecated"] as const;
 
-    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}
-                    defaultOpen={defaultOpen}
-                  />
-                ))}
-              </ul>
-            ),
-        )}
-      </Card>
+    const additionalProperties =
+      typeof schema.additionalProperties === "object" ? (
+        <SchemaView schema={schema.additionalProperties} embedded />
+      ) : schema.additionalProperties === true ? (
+        <div className="text-sm p-4 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>
+        </div>
+      ) : null;
+
+    const itemsList = groupNames.map(
+      (group) =>
+        groupedProperties[group] && (
+          <ItemGroup key={group} className="overflow-clip">
+            {groupedProperties[group].map(([name, schema]) => (
+              <Fragment key={name}>
+                <SchemaPropertyItem
+                  name={name}
+                  schema={schema}
+                  group={group}
+                  defaultOpen={defaultOpen}
+                />
+                <ItemSeparator />
+              </Fragment>
+            ))}
+          </ItemGroup>
+        ),
     );
-  }
 
-  if (schema.additionalProperties) {
+    if (embedded) {
+      return itemsList;
+    }
+
     return (
-      <Card className="my-2">
-        <CardHeader>
-          <CardTitle>Additional Properties:</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <SchemaView schema={schema.additionalProperties as SchemaObject} />
-        </CardContent>
-      </Card>
+      <Frame>
+        {cardHeader}
+        {schema.description && (
+          <FrameHeader>
+            <FrameDescription>{schema.description}</FrameDescription>
+          </FrameHeader>
+        )}
+
+        <FramePanel className="p-0!">
+          {itemsList}
+          {additionalProperties}
+        </FramePanel>
+      </Frame>
     );
   }
-
-  return null;
 };

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

@@ -0,0 +1,132 @@
+import { useState } from "react";
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { Badge } from "../../../ui/Badge.js";
+import { Frame, FramePanel } from "../../../ui/Frame.js";
+import { cn } from "../../../util/cn.js";
+import { SchemaView } from "./SchemaView.js";
+import {
+  decideExclusivity,
+  labelForVariant,
+  quickGuards,
+  unionVariants,
+} from "./union-helpers.js";
+
+const DecisionTable = ({
+  variants,
+  schema,
+  selectedVariant,
+  onSelectVariant,
+}: {
+  variants: SchemaObject[];
+  schema: SchemaObject;
+  selectedVariant: string;
+  onSelectVariant: (label: string) => void;
+}) => {
+  const rows = variants.map((v, i) => ({
+    label: labelForVariant(i, v),
+    guards: quickGuards(v, schema),
+  }));
+
+  return (
+    <div className="flex flex-col gap-2 text-sm">
+      <h4 className="font-medium">Decision Table</h4>
+      <div className="border rounded-md overflow-hidden">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b bg-muted/50">
+              <th className="text-left p-2 font-medium">Variant</th>
+              <th className="text-left p-2 font-medium">Matching Criteria</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {rows.map((row) => (
+              <tr key={row.label} className="hover:bg-muted/30">
+                <td className="p-2 font-medium">
+                  <button
+                    type="button"
+                    className={cn(
+                      "hover:underline",
+                      selectedVariant === row.label && "text-primary",
+                    )}
+                    onClick={() => onSelectVariant(row.label)}
+                  >
+                    {row.label}
+                  </button>
+                </td>
+                <td className="p-2 text-muted-foreground text-xs">
+                  {row.guards.length > 0
+                    ? row.guards.join(" · ")
+                    : "No specific criteria"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export const UnionView = ({
+  schema,
+  cardHeader,
+}: {
+  schema: SchemaObject;
+  cardHeader?: React.ReactNode;
+}) => {
+  const mode = Array.isArray(schema.oneOf)
+    ? "oneOf"
+    : Array.isArray(schema.anyOf)
+      ? "anyOf"
+      : undefined;
+
+  const variants = mode ? unionVariants(schema) : [];
+  const [selectedVariant, setSelectedVariant] = useState(() =>
+    variants[0] ? labelForVariant(0, variants[0]) : "",
+  );
+
+  if (!mode) return null;
+
+  const exclusivity = decideExclusivity(schema);
+
+  const semanticsMessage =
+    exclusivity === "exactly-one" ? (
+      <>
+        Exactly one variant <b>must match</b>.
+      </>
+    ) : (
+      <>
+        At least one variant <b>must match</b>. Multiple variants{" "}
+        <i>may match</i> simultaneously.
+      </>
+    );
+
+  const currentVariantIndex = variants.findIndex(
+    (v, i) => labelForVariant(i, v) === selectedVariant,
+  );
+  const currentVariant =
+    currentVariantIndex >= 0 ? variants[currentVariantIndex] : null;
+
+  return (
+    <Frame>
+      {cardHeader}
+      <FramePanel className="text-sm flex flex-col gap-4">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">{mode}</Badge>
+          <div className="flex-1 p-2">
+            <span className="text-sm">{semanticsMessage}</span>
+          </div>
+        </div>
+
+        <DecisionTable
+          variants={variants}
+          schema={schema}
+          selectedVariant={selectedVariant}
+          onSelectVariant={setSelectedVariant}
+        />
+        <strong>Properties for {selectedVariant}:</strong>
+        {currentVariant && <SchemaView schema={currentVariant} />}
+      </FramePanel>
+    </Frame>
+  );
+};