zudoku 0.1.1-dev.45 → 0.1.1-dev.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.45",
+  "version": "0.1.1-dev.46",
   "type": "module",
   "files": [
     "dist",

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

@@ -5,10 +5,8 @@ import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
-import { SchemaObject } from "../../oas/parser/index.js";
-import { useState } from "react";
-import { cn } from "../../util/cn.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
+import { SchemaListView } from "./SchemaListView.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
 export type ParameterGroup = (typeof PARAM_GROUPS)[number];
@@ -61,8 +59,9 @@ export const OperationListItem = ({
               <TabsTrigger
                 value={response.statusCode + response.description}
                 key={response.statusCode}
+                title={response.description}
               >
-                {response.description} ({response.statusCode})
+                {response.statusCode}
               </TabsTrigger>
             ))}
           </TabsList>
@@ -72,7 +71,10 @@ export const OperationListItem = ({
                 value={response.statusCode + response.description}
                 key={response.statusCode}
               >
-                <ViewSchema schema={response.content?.at(0)?.schema} name="" />
+                <SchemaListView
+                  schema={response.content?.at(0)?.schema}
+                  name=""
+                />
               </TabsContent>
             ))}
           </ul>
@@ -83,119 +85,3 @@ export const OperationListItem = ({
     </div>
   );
 };
-
-const ViewSchema = ({
-  name,
-  schema,
-  level = 0,
-  collapsible = false,
-}: {
-  level?: number;
-  collapsible?: boolean;
-  name?: string;
-  schema: SchemaObject;
-}) => {
-  const [open, setOpen] = useState(!collapsible);
-
-  const properties = Object.entries(schema.properties ?? {});
-  const additionalProperties =
-    typeof schema.additionalProperties === "object"
-      ? Object.entries(schema.additionalProperties)
-      : [];
-
-  return (
-    <div
-      className={cn(
-        "not-prose",
-        level > 0 && "border border-border rounded text-sm",
-      )}
-      onClick={
-        collapsible
-          ? () => {
-              setOpen((open) => !open);
-            }
-          : undefined
-      }
-    >
-      {(schema.title ?? name) && (
-        <div className="ml-2 my-1 font-bold">{schema.title ?? name}</div>
-      )}
-      {level === 0 && <p>schema.description</p>}
-      <ul>
-        {open &&
-          properties
-            .concat(additionalProperties)
-            .map(([propertyName, property]) => (
-              <div
-                key={propertyName}
-                className={cn(
-                  level > 0 ? "py-2" : "py-4",
-                  "px-2 border-t border-border bg-border/20 hover:bg-border/30 flex gap-1 flex-col",
-                  property.deprecated && "opacity-50",
-                )}
-              >
-                <div className="flex items-center gap-2 relative">
-                  <code>
-                    {propertyName} {property.title}
-                  </code>
-
-                  {property.type && (
-                    <span className="text-sm text-muted-foreground">
-                      {property.type}
-                    </span>
-                  )}
-                  {property.deprecated && (
-                    <span className="text-sm text-muted-foreground">
-                      Deprecated
-                    </span>
-                  )}
-
-                  {!schema.required?.includes(propertyName) &&
-                    !property.required && (
-                      <span className="py-px px-1.5 font-medium text-xs border border-border rounded-lg">
-                        optional
-                      </span>
-                    )}
-                  {/*{property.type === "object" && (*/}
-                  {/*  <div className="absolute right-3">+</div>*/}
-                  {/*)}*/}
-                </div>
-                {property.description && (
-                  <Markdown
-                    content={property.description}
-                    className="prose text-sm prose-p:my-1 leading-normal line-clamp-4"
-                  />
-                )}
-
-                {property.enum && (
-                  <span className="text-sm text-muted-foreground flex gap-1 flex-wrap items-center">
-                    <span>Possible values</span>
-                    {property.enum
-                      .filter((value) => value)
-                      .map((value) => (
-                        <span
-                          key={value}
-                          className="font-mono text-xs border-border border bg-muted rounded px-1"
-                        >
-                          {value}
-                        </span>
-                      ))}
-                  </span>
-                )}
-                {property.type === "object" && (
-                  <div className="mt-2.5">
-                    <ViewSchema schema={property} level={level + 1} />
-                  </div>
-                )}
-                {property.type === "array" &&
-                  property.items.type === "object" && (
-                    <div className="mt-2.5">
-                      <ViewSchema schema={property.items} level={level + 1} />
-                    </div>
-                  )}
-              </div>
-            ))}
-      </ul>
-    </div>
-  );
-};

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

@@ -28,7 +28,7 @@ export const ParameterListItem = ({
   group: ParameterGroup;
   id: string;
 }) => (
-  <li className="not-prose px-2 py-4 border-t border-border bg-border/20">
+  <li className="not-prose px-2 py-4 border-t border-border bg-border/20 text-sm flex flex-col gap-1">
     <div className="flex items-center gap-2">
       <code>
         {group === "path" ? (

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

@@ -0,0 +1,229 @@
+import { SchemaObject } from "../../oas/parser/index.js";
+import { useState } from "react";
+import { cn } from "../../util/cn.js";
+import { Markdown } from "../../components/Markdown.js";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { Button } from "../../ui/Button.js";
+import { ListPlusIcon } from "lucide-react";
+
+export const SchemaListView = ({
+  name,
+  schema,
+  level = 0,
+  defaultOpen = false,
+}: {
+  level?: number;
+  defaultOpen?: boolean;
+  name?: string;
+  schema: SchemaObject;
+}) => {
+  const properties = Object.entries(schema.properties ?? {});
+  const additionalProperties =
+    typeof schema.additionalProperties === "object"
+      ? Object.entries(schema.additionalProperties)
+      : [];
+
+  const combinedProperties = properties.concat(
+    Array.isArray(additionalProperties) ? additionalProperties : [],
+  );
+
+  const groups = Object.groupBy(
+    combinedProperties,
+    ([propertyName, property]) => {
+      return property.deprecated
+        ? "deprecated"
+        : schema.required?.includes(propertyName)
+          ? "required"
+          : "optional";
+    },
+  );
+
+  return (
+    <div
+      className={cn(
+        "not-prose",
+        level > 0 && "border border-border rounded text-sm",
+      )}
+    >
+      {(schema.title ?? name) && (
+        <div className="ml-2 my-1 font-bold">{schema.title ?? name}</div>
+      )}
+      {level === 0 && schema.description && (
+        <p className="prose">{schema.description}</p>
+      )}
+      <ul>
+        {Object.entries(groups).map(([group, properties]) => {
+          return (
+            <SchemaListViewItemGroup
+              defaultOpen={defaultOpen}
+              group={group as any}
+              nestingLevel={level}
+              properties={properties}
+              required={schema.required ?? []}
+            />
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+const SchemaListViewItemGroup = ({
+  group,
+  properties,
+  nestingLevel,
+  required,
+  defaultOpen = false,
+}: {
+  group: "optional" | "required" | "deprecated";
+  defaultOpen?: boolean;
+  properties: [string, SchemaObject][];
+  nestingLevel: number;
+  required: string[];
+}) => {
+  const notCollapsible =
+    defaultOpen ||
+    group === "required" ||
+    properties.length === 1 ||
+    nestingLevel === 0;
+  const [open, setOpen] = useState(notCollapsible);
+  if (properties.length === 0) {
+    return;
+  }
+
+  return (
+    <Collapsible.Root
+      className="CollapsibleRoot"
+      open={open}
+      onOpenChange={setOpen}
+    >
+      {!open && (
+        <Collapsible.Trigger
+          className={cn(
+            "py-2 hover:bg-muted w-full",
+            group === "optional" && "font-semibold",
+            group === "deprecated" && "text-muted-foreground",
+          )}
+        >
+          {properties.length} {group} fields
+        </Collapsible.Trigger>
+      )}
+
+      <Collapsible.Content>
+        {properties.map(([propertyName, property]) => (
+          <SchemaListViewItem
+            property={property}
+            propertyName={propertyName}
+            nestingLevel={nestingLevel}
+            isRequired={required?.includes(propertyName) ?? false}
+          />
+        ))}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+
+const SchemaListViewItem = ({
+  propertyName,
+  property,
+  nestingLevel,
+  isRequired,
+}: {
+  propertyName: string;
+  isRequired: boolean;
+  property: SchemaObject;
+  nestingLevel: number;
+}) => {
+  return (
+    <div
+      key={propertyName}
+      className={cn(
+        nestingLevel > 0 ? "py-2" : "py-4",
+        "px-2 border-t border-border bg-border/20 hover:bg-border/30 flex gap-1 flex-col text-sm",
+        property.deprecated && "opacity-50",
+      )}
+    >
+      <div className="flex items-center gap-2 relative">
+        <code>
+          {propertyName} {property.title}
+        </code>
+
+        {property.type && (
+          <span className="text-muted-foreground">{property.type}</span>
+        )}
+        {property.deprecated && (
+          <span className="text-muted-foreground">Deprecated</span>
+        )}
+        {!isRequired && (
+          <span className="py-px px-1.5 font-medium text-xs border border-border rounded-lg">
+            optional {property.required}
+          </span>
+        )}
+        {/*{property.type === "object" && (*/}
+        {/*  <div className="absolute right-3">+</div>*/}
+        {/*)}*/}
+      </div>
+      {property.description && (
+        <Markdown
+          content={property.description}
+          className="text-sm leading-normal line-clamp-4 "
+        />
+      )}
+
+      {property.enum && (
+        <span className="text-sm text-muted-foreground flex gap-1 flex-wrap items-center">
+          <span>Possible values</span>
+          {property.enum
+            .filter((value) => value)
+            .map((value) => (
+              <span
+                key={value}
+                className="font-mono text-xs border-border border bg-muted rounded px-1"
+              >
+                {value}
+              </span>
+            ))
+            .slice(0, 4)}
+          {property.enum.length > 4 && (
+            <span className="font-mono text-xs border-border border bg-muted rounded px-1">
+              ...
+            </span>
+          )}
+        </span>
+      )}
+
+      <Collapsible.Root className="CollapsibleRoot" defaultOpen={false}>
+        {property.type === "object" ||
+        (property.type === "array" && property.items.type === "object") ? (
+          <Collapsible.Trigger asChild>
+            <Button variant="ghost" size="sm">
+              Show nested fields
+              <ListPlusIcon size={18} className="ml-1.5" />
+            </Button>
+          </Collapsible.Trigger>
+        ) : null}
+
+        <Collapsible.Content>
+          {property.type === "object" && (
+            <div className="mt-2.5">
+              <SchemaListView
+                schema={property}
+                level={nestingLevel + 1}
+                defaultOpen
+              />
+            </div>
+          )}
+          {property.type === "array" && property.items.type === "object" && (
+            <div className="mt-2.5">
+              <SchemaListView
+                schema={property.items}
+                defaultOpen
+                level={nestingLevel + 1}
+              />
+            </div>
+          )}
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </div>
+  );
+};