zudoku 0.3.1-dev.1 → 0.3.1-dev.11

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-B1he6g8N.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.1",
+  "version": "0.3.1-dev.11",
   "type": "module",
   "files": [
     "dist",
@@ -13,104 +13,73 @@
     "zudoku": "./cli.js"
   },
   "exports": {
-    ".": "./src/index.ts",
-    "./internal": "./src/internal.ts",
-    "./auth/clerk": "./src/lib/authentication/providers/clerk.ts",
-    "./auth/auth0": "./src/lib/authentication/providers/auth0.ts",
-    "./auth/openid": "./src/lib/authentication/providers/openid.ts",
-    "./plugins/api-keys": "./src/lib/plugins/api-keys/index.ts",
-    "./plugins/markdown": "./src/lib/plugins/markdown/index.ts",
-    "./plugins/openapi": "./src/lib/plugins/openapi/index.ts",
-    "./plugins/redirect": "./src/lib/plugins/redirect/index.ts",
-    "./plugins/custom-page": "./src/lib/plugins/custom-page/index.ts",
-    "./plugins/search-inkeep": "./src/lib/plugins/search-inkeep/index.ts",
-    "./openapi-worker": "./src/lib/plugins/openapi-worker.ts",
-    "./components": "./src/lib/components/index.ts",
-    "./vite": "./src/vite/plugin.ts",
-    "./tailwind": "./src/app/tailwind.ts",
-    "./app/*": "./src/app/*"
-  },
-  "publishConfig": {
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "import": "./dist/index.js",
-        "types": "./dist/index.d.ts"
-      },
-      "./internal": {
-        "import": "./dist/internal.js"
-      },
-      "./auth/clerk": {
-        "import": "./lib/zudoku.auth-clerk.js",
-        "types": "./dist/lib/authentication/providers/clerk.d.ts"
-      },
-      "./auth/auth0": {
-        "import": "./lib/zudoku.auth-auth0.js",
-        "types": "./dist/lib/authentication/providers/auth0.d.ts"
-      },
-      "./auth/openid": {
-        "import": "./lib/zudoku.auth-openid.js",
-        "types": "./dist/lib/authentication/providers/openid.d.ts"
-      },
-      "./plugins/api-keys": {
-        "import": "./lib/zudoku.plugin-api-keys.js",
-        "types": "./dist/lib/plugins/api-keys/index.d.ts"
-      },
-      "./plugins/markdown": {
-        "import": "./lib/zudoku.plugin-markdown.js",
-        "types": "./dist/lib/plugins/markdown/index.d.ts"
-      },
-      "./plugins/openapi": {
-        "import": "./lib/zudoku.plugin-openapi.js",
-        "types": "./dist/lib/plugins/openapi/index.d.ts"
-      },
-      "./plugins/redirect": {
-        "import": "./lib/zudoku.plugin-redirect.js",
-        "types": "./dist/lib/plugins/redirect/index.d.ts"
-      },
-      "./plugins/custom-page": {
-        "import": "./lib/zudoku.plugin-custom-page.js",
-        "types": "./dist/lib/plugins/custom-page/index.d.ts"
-      },
-      "./plugins/search-inkeep": {
-        "import": "./lib/zudoku.plugin-search-inkeep.js",
-        "types": "./dist/lib/plugins/search-inkeep/index.d.ts"
-      },
-      "./openapi-worker": {
-        "import": "./lib/zudoku.openapi-worker.js",
-        "types": "./dist/lib/plugins/openapi-worker.d.ts"
-      },
-      "./components": {
-        "import": "./lib/zudoku.components.js",
-        "types": "./dist/lib/components/index.d.ts"
-      },
-      "./vite": {
-        "require": "./dist/vite/plugin.js",
-        "import": "./dist/vite/plugin.js"
-      },
-      "./tailwind": {
-        "require": "./dist/app/tailwind.js",
-        "import": "./dist/app/tailwind.js"
-      },
-      "./main.css": {
-        "require": "./src/app/main.css",
-        "import": "./src/app/main.css"
-      },
-      "./app/*": {
-        "import": "./src/app/*"
-      }
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./internal": {
+      "import": "./dist/internal.js"
+    },
+    "./auth/clerk": {
+      "import": "./lib/zudoku.auth-clerk.js",
+      "types": "./dist/lib/authentication/providers/clerk.d.ts"
+    },
+    "./auth/auth0": {
+      "import": "./lib/zudoku.auth-auth0.js",
+      "types": "./dist/lib/authentication/providers/auth0.d.ts"
+    },
+    "./auth/openid": {
+      "import": "./lib/zudoku.auth-openid.js",
+      "types": "./dist/lib/authentication/providers/openid.d.ts"
+    },
+    "./plugins/api-keys": {
+      "import": "./lib/zudoku.plugin-api-keys.js",
+      "types": "./dist/lib/plugins/api-keys/index.d.ts"
+    },
+    "./plugins/markdown": {
+      "import": "./lib/zudoku.plugin-markdown.js",
+      "types": "./dist/lib/plugins/markdown/index.d.ts"
+    },
+    "./plugins/openapi": {
+      "import": "./lib/zudoku.plugin-openapi.js",
+      "types": "./dist/lib/plugins/openapi/index.d.ts"
+    },
+    "./plugins/redirect": {
+      "import": "./lib/zudoku.plugin-redirect.js",
+      "types": "./dist/lib/plugins/redirect/index.d.ts"
+    },
+    "./plugins/custom-page": {
+      "import": "./lib/zudoku.plugin-custom-page.js",
+      "types": "./dist/lib/plugins/custom-page/index.d.ts"
+    },
+    "./plugins/search-inkeep": {
+      "import": "./lib/zudoku.plugin-search-inkeep.js",
+      "types": "./dist/lib/plugins/search-inkeep/index.d.ts"
+    },
+    "./openapi-worker": {
+      "import": "./lib/zudoku.openapi-worker.js",
+      "types": "./dist/lib/plugins/openapi-worker.d.ts"
+    },
+    "./components": {
+      "import": "./lib/zudoku.components.js",
+      "types": "./dist/lib/components/index.d.ts"
+    },
+    "./vite": {
+      "require": "./dist/vite/plugin.js",
+      "import": "./dist/vite/plugin.js"
+    },
+    "./tailwind": {
+      "require": "./dist/app/tailwind.js",
+      "import": "./dist/app/tailwind.js"
+    },
+    "./main.css": {
+      "require": "./src/app/main.css",
+      "import": "./src/app/main.css"
+    },
+    "./app/*": {
+      "import": "./src/app/*"
     }
   },
-  "scripts": {
-    "build": "tsc --project tsconfig.json",
-    "build:vite": "vite build && pnpm run hack:fix-worker-paths lib",
-    "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",
-    "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html",
-    "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",
-    "clean": "tsc --build --clean",
-    "test": "node --test --enable-source-maps"
-  },
   "dependencies": {
     "@envelop/core": "5.0.1",
     "@graphql-typed-document-node/core": "3.2.0",
@@ -216,5 +185,16 @@
   "optionalDependencies": {
     "@clerk/clerk-js": "5.11.0",
     "@inkeep/widgets": "^0.2.289"
-  }
-}
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "build:vite": "vite build && pnpm run hack:fix-worker-paths lib",
+    "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",
+    "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html",
+    "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",
+    "clean": "tsc --build --clean",
+    "test": "node --test --enable-source-maps"
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

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%;
@@ -224,7 +249,7 @@
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
     --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;

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

@@ -4,14 +4,13 @@ import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { ErrorPage } from "../../components/ErrorPage.js";
 import { Heading } from "../../components/Heading.js";
 import { InlineCode } from "../../components/InlineCode.js";
-import { Markdown } from "../../components/Markdown.js";
+import { Markdown, ProseClasses } from "../../components/Markdown.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
 import StaggeredRender from "./StaggeredRender.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
-import { SchemaProseClasses } from "./util/prose.js";
 import { useQuery } from "./util/urql.js";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
@@ -124,10 +123,7 @@ export const OperationList = () => {
   return (
     <div className="pt-[--padding-content-top]">
       <div
-        className={cn(
-          SchemaProseClasses,
-          "mb-16 max-w-full prose-img:max-w-prose",
-        )}
+        className={cn(ProseClasses, "mb-16 max-w-full prose-img:max-w-prose")}
       >
         <CategoryHeading>Overview</CategoryHeading>
         <Heading level={1} id="description" registerSidebarAnchor>
@@ -142,7 +138,7 @@ export const OperationList = () => {
             {tag.name && <CategoryHeading>{tag.name}</CategoryHeading>}
             {tag.description && (
               <Markdown
-                className={`${SchemaProseClasses} mt-2 mb-12`}
+                className={`${ProseClasses} max-w-full prose-img:max-w-prose w-full mt-2 mb-12`}
                 content={tag.description}
               />
             )}

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

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Heading } from "../../components/Heading.js";
-import { Markdown } from "../../components/Markdown.js";
+import { Markdown, ProseClasses } from "../../components/Markdown.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
 import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
@@ -9,7 +9,6 @@ import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
 import { SchemaView } from "./schema/SchemaView.js";
-import { SchemaProseClasses } from "./util/prose.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
 export type ParameterGroup = (typeof PARAM_GROUPS)[number];
@@ -39,7 +38,7 @@ export const OperationListItem = ({
         </Heading>
         {operation.description && (
           <Markdown
-            className={SchemaProseClasses}
+            className={`${ProseClasses} max-w-full prose-img:max-w-prose`}
             content={operation.description}
           />
         )}
@@ -89,7 +88,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/ParameterListItem.tsx

@@ -55,7 +55,7 @@ export const ParameterListItem = ({
     {parameter.description && (
       <Markdown
         content={parameter.description}
-        className="text-sm prose-p:my-1"
+        className="text-sm prose-p:my-1 prose-code:whitespace-pre-line"
       />
     )}
   </li>

package/src/lib/plugins/openapi/playground/PlaygroundDialog.tsx

@@ -1,5 +1,4 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { CirclePlayIcon } from "lucide-react";
 import { type PropsWithChildren, useState } from "react";
 import {
   Dialog,
@@ -11,16 +10,39 @@ import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
 export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;
 
+const HeroPlayIcon = ({
+  className,
+  size = 16,
+}: {
+  className?: string;
+  size?: number;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className={className}
+    width={size}
+    height={size}
+  >
+    <path
+      fillRule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 const PlaygroundDialog = (props: PlaygroundDialogProps) => {
   const [open, setOpen] = useState(false);
   return (
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
         {props.children ?? (
-          <CirclePlayIcon
-            className="cursor-pointer text-primary hover:text-primary/80"
-            size={16}
-          />
+          <button className="flex gap-1 items-center px-2 py-1 rounded-md bg-primary/80 hover:bg-primary transition text-primary-foreground text-xs">
+            Test
+            <HeroPlayIcon className="" size={14} />
+          </button>
         )}
       </DialogTrigger>
 

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>
+  );
+};