zudoku 0.0.0-ed94abf → 0.0.0-edd80c1

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

@@ -1,5 +1,5 @@
 import {
-  Control,
+  type Control,
   Controller,
   useFieldArray,
   useFormContext,
@@ -44,7 +44,7 @@ export const QueryParams = ({
                     render={({ field }) => (
                       <Checkbox
                         id={`queryParams.${i}.active`}
-                        className="mr-2"
+                        className="me-2"
                         checked={field.value}
                         onCheckedChange={field.onChange}
                       />
@@ -60,7 +60,7 @@ export const QueryParams = ({
                           onChange={(e) => {
                             field.onChange(e);
                           }}
-                          className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         />
                       ) : (
                         <InlineInput asChild>
@@ -111,7 +111,7 @@ export const QueryParams = ({
                             field.onChange(e);
                             form.setValue(`queryParams.${i}.active`, true);
                           }}
-                          className="font-mono text-xs border-0 ring-1 ring-ring"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         />
                       );
                     }}

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

@@ -1,5 +1,4 @@
-import { ChevronDownIcon } from "lucide-react";
-import { useState } from "react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
 import { Button } from "zudoku/ui/Button.js";
 import {
@@ -8,8 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "zudoku/ui/DropdownMenu.js";
-import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
-import { ApiIdentity } from "../../../core/ZudokuContext.js";
+import { type ApiIdentity } from "../../../core/ZudokuContext.js";
 import { NO_IDENTITY } from "./Playground.js";
 
 const SubmitButton = ({
@@ -21,15 +19,16 @@ const SubmitButton = ({
   formRef?: React.RefObject<HTMLFormElement | null>;
   disabled?: boolean;
 }) => {
-  const { setValue } = useFormContext();
-  const [dropdownValue, setDropdownValue] = useState<string | undefined>();
+  const { setValue, watch } = useFormContext();
+  const formIdentity = watch("identity");
+
   if (identities.length === 0) {
     return <Button disabled={disabled}>Send</Button>;
   }
   return (
     <div className="flex">
       <Button
-        className="rounded-r-none inset-shadow-sm"
+        className="rounded-r-none inset-shadow-xs"
         disabled={disabled}
         onClick={() => formRef?.current?.requestSubmit()}
       >
@@ -39,34 +38,30 @@ const SubmitButton = ({
         <DropdownMenuTrigger asChild>
           <Button
             disabled={disabled}
-            className="rounded-l-none border-l border-border/40 inset-shadow-sm w-6"
+            className="rounded-l-none border-l border-border/40 inset-shadow-xs w-6"
             size="icon"
           >
             <ChevronDownIcon className="w-4 h-4" />
           </Button>
         </DropdownMenuTrigger>
-        <RadioGroup value={dropdownValue}>
-          <DropdownMenuContent className="w-56" align="end" alignOffset={-150}>
-            {[{ id: NO_IDENTITY, label: "None" }, ...identities].map(
-              (identity) => (
-                <DropdownMenuItem
-                  key={identity.id}
-                  onClick={() => {
-                    setDropdownValue(identity.id);
-                    setValue("identity", identity.id);
-                    formRef?.current?.requestSubmit();
-                  }}
-                  onMouseEnter={() => setDropdownValue(identity.id)}
-                  onMouseLeave={() => setDropdownValue(undefined)}
-                >
-                  <RadioGroupItem value={identity.id} className="mr-2" />
-
-                  {identity.label}
-                </DropdownMenuItem>
-              ),
-            )}
-          </DropdownMenuContent>
-        </RadioGroup>
+        <DropdownMenuContent className="w-56" align="end" alignOffset={-150}>
+          {[{ id: NO_IDENTITY, label: "None" }, ...identities].map(
+            (identity) => (
+              <DropdownMenuItem
+                key={identity.id}
+                onClick={() => {
+                  setValue("identity", identity.id);
+                  formRef?.current?.requestSubmit();
+                }}
+              >
+                {identity.label}
+                {formIdentity === identity.id && (
+                  <CheckIcon className="ms-2" size={16} />
+                )}
+              </DropdownMenuItem>
+            ),
+          )}
+        </DropdownMenuContent>
       </DropdownMenu>
     </div>
   );

package/src/lib/plugins/openapi/playground/result-panel/RequestTab.tsx

@@ -36,7 +36,7 @@ export const RequestTab = ({
             <span className="font-semibold">Headers</span>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 pl-1.5 pt-2">
+            <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2">
               {headers.map(([key, value]) => (
                 <Fragment key={key}>
                   <div className="text-primary">{key}</div>
@@ -53,7 +53,7 @@ export const RequestTab = ({
             <span className="font-semibold">Body</span>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="pl-0 pt-2">
+            <div className="ps-0 pt-2">
               <div
                 className={cn(
                   "whitespace-pre-wrap break-all bg-muted p-2 rounded-md",

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -135,7 +135,7 @@ export const ResponseTab = ({
           <span className="font-semibold">Headers</span>
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 pl-1.5 pt-2 font-mono text-xs">
+          <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2 font-mono text-xs">
             {sortedHeaders.slice(0, 5).map(([key, value]) => (
               <Fragment key={key}>
                 <div className="text-primary whitespace-pre">{key}</div>

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -61,7 +61,7 @@ export const ResultPanel = ({
               Response
               <span
                 className={cn(
-                  "text-xs font-mono ml-1",
+                  "text-xs font-mono ms-1",
                   status === "2" && "text-green-500",
                   status === "3" && "text-blue-500",
                   status === "4" && "text-yellow-500",

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

@@ -16,16 +16,19 @@ export const SchemaExampleAndDefault = ({
       {example && (
         <div>
           <span className="text-muted-foreground">Example: </span>
-          <SelectOnClick className="border rounded px-1 font-mono">
-            {typeof example === "object" ? JSON.stringify(example) : example}
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
+            {typeof example === "object" || typeof example === "boolean"
+              ? JSON.stringify(example)
+              : example}
           </SelectOnClick>
         </div>
       )}
       {defaultValue && (
         <div>
           <span className="text-muted-foreground">Default: </span>
-          <SelectOnClick className="border rounded px-1 font-mono">
-            {typeof defaultValue === "object"
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
+            {typeof defaultValue === "object" ||
+            typeof defaultValue === "boolean"
               ? JSON.stringify(defaultValue)
               : defaultValue}
           </SelectOnClick>

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

@@ -7,6 +7,7 @@ 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";
@@ -14,7 +15,10 @@ import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
+  extractCircularRefInfo,
   hasLogicalGroupings,
+  isArrayCircularRef,
+  isArrayType,
   isCircularRef,
   isComplexType,
   LogicalSchemaTypeMap,
@@ -38,13 +42,13 @@ export const SchemaLogicalGroup = ({ schema }: { schema: SchemaObject }) => {
   }
 };
 
-const RecursiveIndicator = () => (
+const RecursiveIndicator = ({ circularProp }: { circularProp?: string }) => (
   <InlineCode
     className="inline-flex items-center gap-1.5 italic text-xs translate-y-0.5"
     selectOnClick={false}
   >
     <RefreshCcwDotIcon size={13} />
-    <span>circular</span>
+    <span>{circularProp ? `${circularProp} (circular)` : "circular"}</span>
   </InlineCode>
 );
 
@@ -67,7 +71,7 @@ export const SchemaPropertyItem = ({
     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">
+          <div className="space-x-2 rtl:space-x-reverse">
             <code>{name}</code>
             <ParamInfos
               schema={schema}
@@ -80,10 +84,20 @@ export const SchemaPropertyItem = ({
     );
   }
 
+  const isCollapsible = Boolean(
+    (hasLogicalGroupings(schema) ||
+      isComplexType(schema) ||
+      (isArrayType(schema) &&
+        "items" in schema &&
+        isComplexType(schema.items)) ||
+      schema.additionalProperties) &&
+      !isArrayCircularRef(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">
+        <div className="space-x-2 rtl:space-x-reverse">
           <SelectOnClick asChild>
             <code>{name}</code>
           </SelectOnClick>
@@ -93,9 +107,11 @@ export const SchemaPropertyItem = ({
               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>
@@ -108,9 +124,10 @@ export const SchemaPropertyItem = ({
         {schema.type === "array" && "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} />
-        {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
+        {isCollapsible && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
             open={isOpen}
@@ -118,7 +135,7 @@ export const SchemaPropertyItem = ({
           >
             {showCollapseButton && (
               <Collapsible.Trigger asChild>
-                <Button variant="expand" size="sm" className="h-7">
+                <Button variant="expand" size="sm">
                   {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
                   {!isOpen ? "Show properties" : "Hide properties"}
                 </Button>
@@ -130,14 +147,9 @@ export const SchemaPropertyItem = ({
                   <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} />
-                  )
-                )}
+                ) : isArrayType(schema) && "items" in schema ? (
+                  <SchemaView schema={schema.items} />
+                ) : null}
               </div>
             </Collapsible.Content>
           </Collapsible.Root>

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

@@ -1,8 +1,10 @@
+import { InfoIcon } from "lucide-react";
 import { Markdown, ProseClasses } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
-import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/Card.js";
+import { Card } 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";
@@ -34,20 +36,27 @@ const renderBasicSchema = (schema: SchemaObject) => (
 export const SchemaView = ({
   schema,
   defaultOpen = false,
+  cardHeader,
 }: {
   schema?: SchemaObject | null;
   defaultOpen?: boolean;
+  cardHeader?: React.ReactNode;
 }) => {
   if (!schema || Object.keys(schema).length === 0) {
     return (
-      <Card className="p-4">
-        <span className="text-sm text-muted-foreground italic">
+      <Card className="overflow-hidden">
+        {cardHeader}
+        <div className="text-sm text-muted-foreground italic p-4">
           No schema specified
-        </span>
+        </div>
       </Card>
     );
   }
 
+  if (schema.const) {
+    return <ConstValue schema={schema} />;
+  }
+
   if (hasLogicalGroupings(schema)) {
     return <SchemaLogicalGroup schema={schema} />;
   }
@@ -57,12 +66,7 @@ export const SchemaView = ({
   }
 
   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} />;
   }
 
   if (schema.type === "object") {
@@ -78,8 +82,31 @@ export const SchemaView = ({
     );
     const groupNames = ["required", "optional", "deprecated"] as const;
 
+    const additionalProperties =
+      typeof schema.additionalProperties === "object" ? (
+        <SchemaView schema={schema.additionalProperties} />
+      ) : schema.additionalProperties === true ? (
+        <div
+          className={cn(
+            ProseClasses,
+            "text-sm p-4 bg-border/20 hover:bg-border/30 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;
+
     return (
       <Card className="divide-y overflow-hidden">
+        {cardHeader}
         {groupNames.map(
           (group) =>
             groupedProperties[group] && (
@@ -96,19 +123,7 @@ export const SchemaView = ({
               </ul>
             ),
         )}
-      </Card>
-    );
-  }
-
-  if (schema.additionalProperties) {
-    return (
-      <Card className="my-2">
-        <CardHeader>
-          <CardTitle>Additional Properties:</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <SchemaView schema={schema.additionalProperties as SchemaObject} />
-        </CardContent>
+        {additionalProperties}
       </Card>
     );
   }

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

@@ -7,11 +7,18 @@ export const isBasicType = (
   typeof type === "string" &&
   ["string", "number", "boolean", "integer", "null"].includes(type);
 
-export const isComplexType = (value: SchemaObject) =>
-  (value.type === "object" && Object.keys(value.properties ?? {}).length > 0) ||
-  (value.type === "array" &&
-    typeof value.items === "object" &&
-    (!value.items.type || value.items.type === "object"));
+export const isArrayType = (value: SchemaObject) =>
+  value.type === "array" ||
+  // schema.type might be an array of types, so we need to check if "array" is one of them
+  (Array.isArray(value.type) && value.type.includes("array"));
+
+export const isComplexType = (value?: SchemaObject) =>
+  value &&
+  ((value.type === "object" &&
+    Object.keys(value.properties ?? {}).length > 0) ||
+    (value.type === "array" &&
+      typeof value.items === "object" &&
+      (!value.items.type || value.items.type === "object")));
 
 export const hasLogicalGroupings = (value: SchemaObject) =>
   Boolean(value.oneOf ?? value.allOf ?? value.anyOf);
@@ -25,4 +32,14 @@ export const LogicalSchemaTypeMap = {
 export type LogicalGroupType = "AND" | "OR" | "ONE";
 
 export const isCircularRef = (schema: unknown): schema is string =>
-  schema === CIRCULAR_REF;
+  typeof schema === "string" && schema.startsWith(CIRCULAR_REF);
+
+export const isArrayCircularRef = (
+  schema: SchemaObject,
+): schema is SchemaObject & { items: SchemaObject } =>
+  isArrayType(schema) && "items" in schema && isCircularRef(schema.items);
+
+export const extractCircularRefInfo = (
+  ref?: string | SchemaObject,
+): string | undefined =>
+  typeof ref === "string" ? ref.split(":")[1] : undefined;

package/src/lib/plugins/openapi/util/createHttpSnippet.ts

@@ -0,0 +1,107 @@
+import { HTTPSnippet } from "@zudoku/httpsnippet";
+import type { OperationsFragmentFragment } from "../graphql/graphql.js";
+
+export const createHttpSnippet = ({
+  operation,
+  selectedServer,
+  exampleBody,
+}: {
+  operation: OperationsFragmentFragment;
+  selectedServer: string;
+  exampleBody: {
+    mimeType: string;
+    text?: string;
+  };
+}) => {
+  return new HTTPSnippet({
+    method: operation.method.toUpperCase(),
+    url:
+      selectedServer + operation.path.replaceAll("{", ":").replaceAll("}", ""),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    postData: exampleBody,
+    headers: [
+      ...(exampleBody.text
+        ? [{ name: "Content-Type", value: exampleBody.mimeType }]
+        : []),
+      ...(operation.parameters
+        ?.filter((p) => p.in === "header" && p.required === true)
+        .map((p) => ({
+          name: p.name,
+          value:
+            p.schema?.default ??
+            p.examples?.find((x) => x.value)?.value ??
+            (p.schema?.type === "string"
+              ? "<string>"
+              : p.schema?.type === "number" || p.schema?.type === "integer"
+                ? "<number>"
+                : p.schema?.type === "boolean"
+                  ? "<bool>"
+                  : "<value>"),
+        })) ?? []),
+    ],
+    queryString:
+      operation.parameters
+        ?.filter((p) => p.in === "query" && p.required === true)
+        .map((p) => ({
+          name: p.name,
+          value:
+            p.schema?.default ??
+            p.examples?.find((x) => x.value)?.value ??
+            (p.schema?.type === "string"
+              ? "<string>"
+              : p.schema?.type === "number" || p.schema?.type === "integer"
+                ? "<number>"
+                : p.schema?.type === "boolean"
+                  ? "<bool>"
+                  : "<value>"),
+        })) ?? [],
+    httpVersion: "",
+    cookies: [],
+    headersSize: 0,
+    bodySize: 0,
+  });
+};
+
+export const getConverted = (snippet: HTTPSnippet, option: string) => {
+  let converted;
+  switch (option) {
+    case "shell":
+      converted = snippet.convert("shell", "curl");
+      break;
+    case "js":
+      converted = snippet.convert("javascript", "fetch");
+      break;
+    case "python":
+      converted = snippet.convert("python", "requests");
+      break;
+    case "java":
+      converted = snippet.convert("java", "okhttp");
+      break;
+    case "go":
+      converted = snippet.convert("go", "native");
+      break;
+    case "csharp":
+      converted = snippet.convert("csharp", "httpclient");
+      break;
+    case "kotlin":
+      converted = snippet.convert("kotlin", "okhttp");
+      break;
+    case "objc":
+      converted = snippet.convert("objc", "nsurlsession");
+      break;
+    case "php":
+      converted = snippet.convert("php", "http2");
+      break;
+    case "ruby":
+      converted = snippet.convert("ruby");
+      break;
+    case "swift":
+      converted = snippet.convert("swift");
+      break;
+    default:
+      converted = snippet.convert("shell");
+      break;
+  }
+
+  return converted ? converted[0] : "";
+};

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -1,10 +1,15 @@
 import { type SchemaObject } from "../../../oas/graphql/index.js";
+import { isCircularRef } from "../schema/utils.js";
 
 export const generateSchemaExample = (
-  schema: SchemaObject,
+  schema?: SchemaObject,
   name?: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): any => {
+  if (!schema || isCircularRef(schema)) {
+    return null;
+  }
+
   // Check for schema-level example first
   if (schema.example !== undefined) {
     return schema.example;
@@ -24,6 +29,11 @@ export const generateSchemaExample = (
     }
   }
 
+  // No example needed for const values
+  if (schema.const !== undefined) {
+    return schema.const;
+  }
+
   // For object schemas with properties
   if (schema.type === "object" && schema.properties) {
     const example: Record<string, any> = {};
@@ -50,10 +60,50 @@ export const generateSchemaExample = (
     return [];
   }
 
+  if (schema.format !== undefined) {
+    // Partial implementation of JSON Schema format examples
+    // https://json-schema.org/draft/2020-12/draft-bhutton-json-schema-validation-00#rfc.section.7.3
+    switch (schema.format) {
+      case "date-time":
+        return "2024-08-25T15:00:00Z";
+      case "date":
+        return "2024-08-25";
+      case "time":
+        return "15:00:00";
+      case "email":
+        return "test@example.com";
+      case "uri":
+        return "https://www.example.com/path/to/resource";
+      case "uri-reference":
+        return "/path/to/resource";
+      case "uuid":
+        return "00000000-0000-0000-0000-000000000000";
+    }
+  }
+
   if (schema.enum) {
     return schema.enum[0];
   }
 
+  if (schema.oneOf) {
+    const randomIndex = Math.floor(Math.random() * schema.oneOf.length);
+    return generateSchemaExample(schema.oneOf[randomIndex] as SchemaObject);
+  }
+
+  if (schema.anyOf) {
+    // Should likely be expanded to return a partial set of values, but it would require
+    // detection if being used within an array or a string type.
+    const randomIndex = Math.floor(Math.random() * schema.anyOf.length);
+    return generateSchemaExample(schema.anyOf[randomIndex] as SchemaObject);
+  }
+
+  if (schema.allOf) {
+    // https://swagger.io/docs/specification/v3_0/data-models/oneof-anyof-allof-not/#allof
+    return schema.allOf.reduce((acc, allOfSchema) => {
+      return { ...acc, ...generateSchemaExample(allOfSchema as SchemaObject) };
+    }, {});
+  }
+
   switch (schema.type) {
     case "string":
       return name || "string";