zudoku 0.3.1-dev.5 → 0.3.1-dev.6

package/lib/zudoku.plugin-api-keys.js

@@ -1,6 +1,6 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
 import { S as p, R as f } from "./SlotletProvider-ByLSCZQa.js";
-import { u as g, a as u, I as j, S as k, b as v, c as w, d as b, e as K, f as y } from "./Input-DB9VROFR.js";
+import { u as g, a as u, I as j, S as k, b as v, c as w, d as b, e as K, f as y } from "./Input-CzXNm7xb.js";
 import { b as N, L as x, O as E } from "./index-7kcHaXD6.js";
 import { u as h, t as A, j as S } from "./ZudokuContext-BIZ8zHbZ.js";
 import { B as l, p as I } from "./Combination-DTfV-c98.js";

package/lib/zudoku.plugin-openapi.js

@@ -1,5 +1,5 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as l } from "./index-D-9zqIOh.js";
+import { o as l } from "./index-B6zugCnN.js";
 import "./urql-DrBfkb92.js";
 import "./ZudokuContext-BIZ8zHbZ.js";
 import "zudoku/openapi-worker";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.1-dev.5",
+  "version": "0.3.1-dev.6",
   "type": "module",
   "files": [
     "dist",

package/src/app/main.css

@@ -192,6 +192,31 @@
     background: transparent;
   }
 
+  .wavy-line {
+    @apply bg-primary w-full;
+
+    --s: 3px; /* size of the wave */
+    --b: 2px; /* thickness of the line */
+    --m: 1; /* curvature of the wave [0 2] */
+
+    --R: calc(var(--s) * sqrt(var(--m) * var(--m) + 1) + var(--b) / 2);
+    height: calc(2 * var(--R));
+    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
+    mask:
+      radial-gradient(
+          var(--R) at left 50% bottom calc(-1 * var(--m) * var(--s)),
+          var(--_g)
+        )
+        calc(50% - 2 * var(--s)) calc(50% - var(--s) / 2 - var(--b) / 2) /
+        calc(4 * var(--s)) calc(var(--s) + var(--b)) repeat-x,
+      radial-gradient(
+          var(--R) at left 50% top calc(-1 * var(--m) * var(--s)),
+          var(--_g)
+        )
+        50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(4 * var(--s))
+        calc(var(--s) + var(--b)) repeat-x;
+  }
+
   /* Theme */
   :root {
     --background: 0 0% 100%;

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

@@ -89,7 +89,7 @@ export const OperationListItem = ({
                   ))}
                 </TabsList>
               )}
-              <ul className="list-none m-0 px-0 overflow-hidden">
+              <ul className="list-none m-0 px-0">
                 {operation.responses.map((response) => (
                   <TabsContent
                     value={response.statusCode}

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

@@ -0,0 +1,47 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { SquareMinusIcon, SquarePlusIcon } from "lucide-react";
+import type { SchemaObject } from "../../../../oas/parser/index.js";
+import { Card } from "../../../../ui/Card.js";
+import type { LogicalGroupType } from "../utils.js";
+import { LogicalGroupItem } from "./LogicalGroupItem.js";
+
+const typeLabel = {
+  AND: "All of",
+  OR: "Any of",
+  ONE: "One of",
+};
+
+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">
+      <Collapsible.Trigger className="flex gap-2 items-center py-2 w-full text-sm text-muted-foreground -translate-x-1.5">
+        {isOpen ? <SquareMinusIcon size={14} /> : <SquarePlusIcon size={14} />}
+        <span>{typeLabel[type]}</span>
+      </Collapsible.Trigger>
+
+      <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}
+          />
+        ))}
+      </Collapsible.Content>
+    </Card>
+  </Collapsible.Root>
+);

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupConnector.tsx

@@ -0,0 +1,54 @@
+import {
+  ChevronDownIcon,
+  CircleDotIcon,
+  CircleFadingPlusIcon,
+  CircleIcon,
+} from "lucide-react";
+import { cn } from "../../../../util/cn.js";
+
+import type { LogicalGroupType } from "../utils.js";
+
+const iconMap = {
+  AND: <CircleFadingPlusIcon size={16} className="fill-card" />,
+  OR: <CircleDotIcon size={16} className="fill-card" />,
+  ONE: <CircleIcon size={14} className="fill-card" />,
+} as const;
+
+const colorClass = {
+  AND: "text-green-500 dark:text-green-300/60",
+  OR: "text-blue-400 dark:text-blue-500",
+  ONE: "text-purple-500 dark:text-purple-300/60",
+} as const;
+
+export const LogicalGroupConnector = ({
+  type,
+  isOpen,
+  className,
+}: {
+  type: LogicalGroupType;
+  isOpen: boolean;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        colorClass[type],
+        "relative text-sm flex py-2",
+        "before:border-l before:absolute before:-top-2 before:-bottom-2 before:border-border before:border-dashed before:content-['']",
+        className,
+      )}
+    >
+      <div className="-translate-x-[7px] flex gap-1 items-center">
+        {iconMap[type]}
+        <div
+          className={cn(
+            "translate-y-px mx-px opacity-0 group-hover:opacity-100 transition",
+            !isOpen && "-rotate-90",
+          )}
+        >
+          <ChevronDownIcon size={16} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupItem.tsx

@@ -0,0 +1,30 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { useState } from "react";
+import type { SchemaObject } from "../../../../oas/parser/index.js";
+import { SchemaView } from "../SchemaView.js";
+import type { LogicalGroupType } from "../utils.js";
+import { LogicalGroupConnector } from "./LogicalGroupConnector.js";
+
+export const LogicalGroupItem = (props: {
+  type: LogicalGroupType;
+  schema: SchemaObject;
+  level: number;
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <Collapsible.Root
+      open={isOpen}
+      onOpenChange={() => setIsOpen((prev) => !prev)}
+      className="group"
+    >
+      <Collapsible.Trigger>
+        <LogicalGroupConnector type={props.type} isOpen={isOpen} />
+      </Collapsible.Trigger>
+      {!isOpen && <div className="wavy-line bg-border translate-y-1" />}
+      <Collapsible.Content>
+        <SchemaView schema={props.schema} level={props.level + 1} />
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

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

@@ -1,12 +1,18 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ListPlusIcon } from "lucide-react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 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 { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaView } from "./SchemaView.js";
-import { hasLogicalGroupings, isComplexType } from "./utils.js";
+import {
+  hasLogicalGroupings,
+  isComplexType,
+  LogicalSchemaTypeMap,
+} from "./utils.js";
 
 export const SchemaLogicalGroup = ({
   schema,
@@ -15,41 +21,34 @@ export const SchemaLogicalGroup = ({
   schema: SchemaObject;
   level: number;
 }) => {
-  const renderLogicalGroup = (
-    group: SchemaObject[],
-    groupName: string,
-    separator: string,
-  ) => {
-    return group.map((subSchema, index) => (
-      <div key={index} className="my-2">
-        <strong>{groupName}</strong>
-        <div className="mt-2">
-          <SchemaView schema={subSchema} level={level + 1} />
-          {index < group.length - 1 && (
-            <div className="text-center my-2">{separator}</div>
-          )}
-        </div>
-      </div>
-    ));
-  };
+  const [isOpen, setIsOpen] = useState(true);
+  const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
 
-  if (schema.oneOf) return renderLogicalGroup(schema.oneOf, "One of", "OR");
-  if (schema.allOf) return renderLogicalGroup(schema.allOf, "All of", "AND");
-  if (schema.anyOf) return renderLogicalGroup(schema.anyOf, "Any of", "OR");
+  for (const [key, type] of objectEntries(LogicalSchemaTypeMap)) {
+    if (!schema[key]) continue;
 
-  return null;
+    return (
+      <LogicalGroup
+        schemas={schema[key]}
+        type={type}
+        isOpen={isOpen}
+        toggleOpen={toggleOpen}
+        level={level}
+      />
+    );
+  }
 };
 
 export const SchemaPropertyItem = ({
   name,
-  value,
+  schema,
   group,
   level,
   defaultOpen = false,
   showCollapseButton = true,
 }: {
   name: string;
-  value: SchemaObject;
+  schema: SchemaObject;
   group: "required" | "optional" | "deprecated";
   level: number;
   defaultOpen?: boolean;
@@ -63,12 +62,12 @@ export const SchemaPropertyItem = ({
         <div className="flex gap-2 items-center">
           <code>{name}</code>
           <span className="text-muted-foreground">
-            {value.type === "array" && value.items?.type ? (
-              <span>{value.items.type}[]</span>
-            ) : Array.isArray(value.type) ? (
-              <span>{value.type.join(" | ")}</span>
+            {schema.type === "array" && schema.items?.type ? (
+              <span>{schema.items.type}[]</span>
+            ) : Array.isArray(schema.type) ? (
+              <span>{schema.type.join(" | ")}</span>
             ) : (
-              <span>{value.type}</span>
+              <span>{schema.type}</span>
             )}
           </span>
           {group === "optional" && (
@@ -78,14 +77,14 @@ export const SchemaPropertyItem = ({
           )}
         </div>
 
-        {value.description && (
+        {schema.description && (
           <Markdown
             className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
-            content={value.description}
+            content={schema.description}
           />
         )}
 
-        {(hasLogicalGroupings(value) || isComplexType(value)) && (
+        {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
             open={isOpen}
@@ -107,14 +106,15 @@ export const SchemaPropertyItem = ({
             )}
             <Collapsible.Content>
               <div className="mt-2">
-                {hasLogicalGroupings(value) && (
-                  <SchemaLogicalGroup schema={value} level={level + 1} />
-                )}
-                {value.type === "object" && (
-                  <SchemaView schema={value} level={level + 1} />
-                )}
-                {value.type === "array" && typeof value.items === "object" && (
-                  <SchemaView schema={value.items} level={level + 1} />
+                {hasLogicalGroupings(schema) ? (
+                  <SchemaLogicalGroup schema={schema} level={level + 1} />
+                ) : schema.type === "object" ? (
+                  <SchemaView schema={schema} level={level + 1} />
+                ) : (
+                  schema.type === "array" &&
+                  typeof schema.items === "object" && (
+                    <SchemaView schema={schema.items} level={level + 1} />
+                  )
                 )}
               </div>
             </Collapsible.Content>

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

@@ -111,11 +111,11 @@ export const SchemaView = ({
             (group) =>
               groupedProperties[group] && (
                 <ul key={group} className="divide-y">
-                  {groupedProperties[group].map(([key, value]) => (
+                  {groupedProperties[group].map(([name, schema]) => (
                     <SchemaPropertyItem
-                      key={key}
-                      name={key}
-                      value={value}
+                      key={name}
+                      name={name}
+                      schema={schema}
                       group={group}
                       level={level}
                       defaultOpen={isTopLevelSingleItem || defaultOpen}

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

@@ -8,3 +8,11 @@ export const isComplexType = (value: SchemaObject) =>
 
 export const hasLogicalGroupings = (value: SchemaObject) =>
   Boolean(value.oneOf ?? value.allOf ?? value.anyOf);
+
+export const LogicalSchemaTypeMap = {
+  allOf: "AND",
+  anyOf: "OR",
+  oneOf: "ONE",
+} as const;
+
+export type LogicalGroupType = "AND" | "OR" | "ONE";