zudoku 0.28.0 → 0.28.2

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

@@ -22,7 +22,7 @@ export const PathParams = ({
           <>
             <Controller
               control={control}
-              name={`pathParams.${i}.value`}
+              name={`pathParams.${i}.name`}
               render={() => (
                 <div>
                   <ColorizedParam

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

@@ -3,6 +3,7 @@ import { InfoIcon } from "lucide-react";
 import { Fragment, useEffect, useRef, useTransition } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { PathRenderer } from "../../../components/PathRenderer.js";
 
 import { Label } from "zudoku/ui/Label.js";
 import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
@@ -35,6 +36,9 @@ export type Header = {
   name: string;
   defaultValue?: string;
   defaultActive?: boolean;
+  isRequired?: boolean;
+  enum?: string[];
+  type?: string;
 };
 
 export type QueryParam = {
@@ -222,36 +226,27 @@ export const Playground = ({
     },
   });
 
-  const path = url.split("/").map((part, i, arr) => {
-    const isPathParam =
-      (part.startsWith("{") && part.endsWith("}")) || part.startsWith(":");
-    const replaced = part.replace(/[:{}]/g, "");
-    const value = formState.pathParams.find((p) => p.name === replaced)?.value;
-
-    const pathParamValue = (
-      <ColorizedParam
-        backgroundOpacity="25%"
-        name={part}
-        slug={part}
-        title={
-          !value
-            ? `Missing value for path parameter \`${replaced}\``
-            : undefined
-        }
-      >
-        {value ? encodeURIComponent(value) : part}
-      </ColorizedParam>
-    );
+  const path = (
+    <PathRenderer
+      path={url}
+      renderParam={({ name, originalValue, index }) => {
+        const formValue = formState.pathParams.find(
+          (param) => param.name === name,
+        )?.value;
 
-    return (
-      // eslint-disable-next-line react/no-array-index-key
-      <Fragment key={part + i}>
-        {isPathParam ? pathParamValue : part}
-        {i < arr.length - 1 && "/"}
-        <wbr />
-      </Fragment>
-    );
-  });
+        return (
+          <ColorizedParam
+            name={name}
+            backgroundOpacity="0"
+            slug={name}
+            onClick={() => form.setFocus(`pathParams.${index}.value`)}
+          >
+            {formValue || originalValue}
+          </ColorizedParam>
+        );
+      }}
+    />
+  );
 
   const urlQueryParams = formState.queryParams
     .filter((p) => p.active)
@@ -268,9 +263,7 @@ export const Playground = ({
       {servers && servers.length > 1 ? (
         <Select
           onValueChange={(value) => {
-            startTransition(() => {
-              setSelectedServer(value);
-            });
+            startTransition(() => setSelectedServer(value));
           }}
           value={selectedServer}
           defaultValue={selectedServer}
@@ -307,7 +300,7 @@ export const Playground = ({
                 <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono flex items-center">
                   {method.toUpperCase()}
                 </div>
-                <div className="flex items-center flex-wrap p-2 font-mono text-xs break-all">
+                <div className="items-center p-2 font-mono text-xs break-words">
                   {serverSelect}
                   {path}
                   {urlQueryParams.length > 0 ? "?" : ""}
@@ -347,7 +340,7 @@ export const Playground = ({
                 </TabsList>
               </div>
               <TabsContent value="headers">
-                <Headers control={control} register={register} />
+                <Headers control={control} />
               </TabsContent>
               <TabsContent value="parameters">
                 {pathParams.length > 0 && (

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

@@ -39,9 +39,12 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
         {props.children ?? (
-          <button className="flex gap-1 items-center px-2 py-1 rounded-md transition text-xs bg-primary  text-primary-foreground shadow-sm hover:bg-primary/80">
+          <button
+            type="button"
+            className="flex gap-1 items-center px-2 py-1 rounded-md transition text-xs bg-primary  text-primary-foreground shadow-sm hover:bg-primary/80"
+          >
             Test
-            <HeroPlayIcon className="" size={14} />
+            <HeroPlayIcon size={14} />
           </button>
         )}
       </DialogTrigger>

package/src/lib/plugins/openapi/schema/{SchemaComponents.tsx → SchemaPropertyItem.tsx}

@@ -3,7 +3,6 @@ import { ListPlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 import { Badge } from "zudoku/ui/Badge.js";
 import { Markdown, ProseClasses } from "../../../components/Markdown.js";
-import { CIRCULAR_REF } from "../../../oas/graphql/circular.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
 import { cn } from "../../../util/cn.js";
@@ -12,6 +11,7 @@ import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaView } from "./SchemaView.js";
 import {
   hasLogicalGroupings,
+  isCircularRef,
   isComplexType,
   LogicalSchemaTypeMap,
 } from "./utils.js";
@@ -41,13 +41,10 @@ export const SchemaLogicalGroup = ({
   }
 };
 
-const isCircularRef = (schema: unknown): schema is string =>
-  schema === CIRCULAR_REF;
-
 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} />
-    <span>recursive</span>
+    <span>circular</span>
   </div>
 );
 
@@ -74,6 +71,8 @@ export const SchemaPropertyItem = ({
         <div className="flex flex-col gap-1 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>}
             <RecursiveIndicator />
           </div>
         </div>
@@ -96,6 +95,9 @@ export const SchemaPropertyItem = ({
             )}
           </Badge>
           {group === "optional" && <Badge variant="outline">optional</Badge>}
+          {schema.type === "array" &&
+            "items" in schema &&
+            isCircularRef(schema.items) && <RecursiveIndicator />}
         </div>
 
         {schema.description && (
@@ -133,7 +135,9 @@ export const SchemaPropertyItem = ({
                   <SchemaView schema={schema} level={level + 1} />
                 ) : (
                   schema.type === "array" &&
-                  typeof schema.items === "object" && (
+                  "items" in schema &&
+                  typeof schema.items === "object" &&
+                  !isCircularRef(schema.items) && (
                     <SchemaView schema={schema.items} level={level + 1} />
                   )
                 )}

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

@@ -3,7 +3,10 @@ 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 { SchemaLogicalGroup, SchemaPropertyItem } from "./SchemaComponents.js";
+import {
+  SchemaLogicalGroup,
+  SchemaPropertyItem,
+} from "./SchemaPropertyItem.js";
 import { hasLogicalGroupings } from "./utils.js";
 
 export const SchemaView = ({

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

@@ -1,3 +1,4 @@
+import { CIRCULAR_REF } from "../../../oas/graphql/circular.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 
 export const isComplexType = (value: SchemaObject) =>
@@ -16,3 +17,6 @@ export const LogicalSchemaTypeMap = {
 } as const;
 
 export type LogicalGroupType = "AND" | "OR" | "ONE";
+
+export const isCircularRef = (schema: unknown): schema is string =>
+  schema === CIRCULAR_REF;

package/src/lib/util/scrollIntoViewIfNeeded.ts

@@ -0,0 +1,18 @@
+export const scrollIntoViewIfNeeded = (
+  element: Element | null,
+  options: ScrollIntoViewOptions = { block: "center" },
+) => {
+  if (!element) return;
+
+  const rect = element.getBoundingClientRect();
+  const isInView =
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+  if (isInView) return;
+
+  element.scrollIntoView(options);
+};

package/src/lib/util/useScrollToAnchor.ts

@@ -2,25 +2,7 @@ import { useCallback, useEffect } from "react";
 import { useLocation } from "react-router";
 import { useViewportAnchor } from "../components/context/ViewportAnchorContext.js";
 import { DATA_ANCHOR_ATTR } from "../components/navigation/SidebarItem.js";
-
-const scrollIntoViewIfNeeded = (
-  element: Element | null,
-  options: ScrollIntoViewOptions = { block: "center" },
-) => {
-  if (!element) return;
-
-  const rect = element.getBoundingClientRect();
-  const isInView =
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <=
-      (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth);
-
-  if (isInView) return;
-
-  element.scrollIntoView(options);
-};
+import { scrollIntoViewIfNeeded } from "./scrollIntoViewIfNeeded.js";
 
 export const useScrollToHash = () => {
   const { setActiveAnchor } = useViewportAnchor();

package/dist/lib/plugins/openapi/schema/SchemaComponents.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SchemaComponents.js","sourceRoot":"","sources":["../../../../../src/lib/plugins/openapi/schema/SchemaComponents.tsx"],"names":[],"mappings":"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"}