zudoku 0.46.1 → 0.46.3

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

@@ -1,8 +1,7 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
-import { useZudoku } from "zudoku/components";
+import { useZudoku } from "zudoku/hooks";
 import { useAuthState } from "../../authentication/state.js";
 import { PathRenderer } from "../../components/PathRenderer.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
@@ -21,53 +20,10 @@ import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SimpleSelect } from "./SimpleSelect.js";
 import { useSelectedServer } from "./state.js";
+import { createHttpSnippet, getConverted } from "./util/createHttpSnippet.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 import { methodForColor } from "./util/methodToColor.js";
 
-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] : "";
-};
-
 export const GetServerQuery = graphql(/* GraphQL */ `
   query getServerQuery($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
@@ -149,7 +105,7 @@ export const Sidecar = ({
   const { selectedServer } = useSelectedServer(result.data.schema.servers);
 
   const code = useMemo(() => {
-    const example =
+    const exampleBody =
       selectedExample ??
       (transformedRequestBodyContent?.[0]?.schema
         ? generateSchemaExample(
@@ -157,66 +113,24 @@ export const Sidecar = ({
           )
         : undefined);
 
-    const snippet = new HTTPSnippet({
-      method: operation.method.toLocaleUpperCase(),
-      url:
-        selectedServer +
-        operation.path.replaceAll("{", ":").replaceAll("}", ""),
-      postData: example
+    const snippet = createHttpSnippet({
+      operation,
+      selectedServer,
+      exampleBody: exampleBody
         ? {
-            text: JSON.stringify(example, null, 2),
             mimeType: "application/json",
+            text: JSON.stringify(exampleBody, null, 2),
           }
-        : ({} as any),
-      headers: [
-        { name: "Content-Type", value: "application/json" },
-        ...(operation.parameters
-          ?.filter((p) => p.in === "header" && p.required === true)
-          .map((p) => ({
-            name: p.name,
-            value:
-              p.examples?.find((x) => x.value)?.value ??
-              p.schema?.default ??
-              (p.schema?.type === "string"
-                ? "string"
-                : p.schema?.type === "number" || p.schema?.type === "integer"
-                  ? "0"
-                  : p.schema?.type === "boolean"
-                    ? "true"
-                    : ""),
-          })) ?? []),
-      ],
-      queryString:
-        operation.parameters
-          ?.filter((p) => p.in === "query" && p.required === true)
-          .map((p) => ({
-            name: p.name,
-            value:
-              p.examples?.find((x) => x.value)?.value ??
-              p.schema?.default ??
-              (p.schema?.type === "string"
-                ? "string"
-                : p.schema?.type === "number" || p.schema?.type === "integer"
-                  ? "0"
-                  : p.schema?.type === "boolean"
-                    ? "true"
-                    : ""),
-          })) ?? [],
-      httpVersion: "",
-      cookies: [],
-      headersSize: 0,
-      bodySize: 0,
+        : { mimeType: "application/json" },
     });
 
     return getConverted(snippet, selectedLang);
   }, [
     selectedExample,
     transformedRequestBodyContent,
-    operation.method,
-    operation.path,
+    operation,
     selectedServer,
     selectedLang,
-    operation.parameters,
   ]);
   const [ref, isOnScreen] = useOnScreen({ rootMargin: "200px 0px 200px 0px" });
 
@@ -238,7 +152,7 @@ export const Sidecar = ({
         <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-2.5 gap-2 text-xs">
           <span className="font-mono break-words leading-6">
             <span className={cn("font-semibold", methodTextColor)}>
-              {operation.method.toLocaleUpperCase()}
+              {operation.method.toUpperCase()}
             </span>
             &nbsp;
             {path}

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

@@ -0,0 +1,46 @@
+import { useFormContext } from "react-hook-form";
+import { Textarea } from "zudoku/ui/Textarea.js";
+import { cn } from "../../../util/cn.js";
+import { type Content } from "../SidecarExamples.js";
+import ExamplesDropdown from "./ExamplesDropdown.js";
+import { type PlaygroundForm } from "./Playground.js";
+
+export const BodyPanel = ({ examples }: { examples?: Content }) => {
+  const { register, setValue, watch } = useFormContext<PlaygroundForm>();
+
+  const headers = watch("headers");
+
+  return (
+    <div className="flex flex-col gap-2 ">
+      <div className="flex justify-between gap-2">
+        <span className="font-semibold">Body</span>
+        <div className="flex flex-col gap-2">
+          {examples && examples.length > 0 && (
+            <ExamplesDropdown
+              examples={examples}
+              onSelect={(example, mediaType) => {
+                setValue("body", JSON.stringify(example.value, null, 2));
+                setValue("headers", [
+                  ...headers.filter((h) => h.name !== "Content-Type"),
+                  {
+                    name: "Content-Type",
+                    value: mediaType,
+                    active: true,
+                  },
+                ]);
+              }}
+            />
+          )}
+        </div>
+      </div>
+      <Textarea
+        {...register("body")}
+        className={cn(
+          "border w-full rounded-lg bg-muted/40 p-2 h-64 font-mono text-[13px]",
+        )}
+      />
+    </div>
+  );
+};
+
+export default BodyPanel;

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

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from "lucide-react";
 import { Button } from "zudoku/ui/Button.js";
 import {
   DropdownMenu,
@@ -20,7 +21,9 @@ const ExamplesDropdown = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline">Use Example</Button>
+        <Button variant="ghost" size="sm">
+          Use Example <ChevronDownIcon className="w-4 h-4" />
+        </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="max-w-72">
         {examples.map((mediaTypeObject) => (

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

@@ -83,119 +83,123 @@ export const Headers = ({
     .map(({ name }) => name);
 
   return (
-    <div className="flex flex-col gap-2">
-      <Card className="overflow-hidden">
-        <ParamsGrid>
-          {fields.map((field, i) => {
-            const currentHeader = schemaHeaders.find(
-              (h) => h.name === watch(`headers.${i}.name`),
-            );
-            return (
-              <ParamsGridItem key={field.id}>
-                <div className="flex items-center gap-2 ">
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.active`}
-                    render={({ field }) => (
-                      <Checkbox
-                        id={`headers.${i}.active`}
-                        checked={field.value}
-                        onCheckedChange={(checked) => {
-                          field.onChange(checked);
-                        }}
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.name`}
-                    render={({ field }) => (
-                      <Autocomplete
-                        {...field}
-                        placeholder="Name"
-                        className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
-                        options={[...missingHeaders, ...headerOptions]}
-                        onEnterPress={() => handleHeaderEnter(i)}
-                        onChange={(e) => {
-                          field.onChange(e);
-                          setValue(`headers.${i}.active`, true);
-                        }}
-                        ref={(el) => {
-                          nameRefs.current[i] = el;
-                        }}
-                      />
-                    )}
-                  />
-                </div>
-                <div className="flex items-center gap-2">
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.value`}
-                    render={({ field }) => {
-                      const hasEnum =
-                        currentHeader?.enum && currentHeader.enum.length > 0;
-
-                      if (!hasEnum) {
-                        return (
-                          <Input
-                            placeholder="Value"
-                            className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
-                            {...field}
-                            ref={(el) => {
-                              valueRefs.current[i] = el;
-                            }}
-                            onKeyDown={(e) => {
-                              if (
-                                e.key === "Enter" &&
-                                e.currentTarget.value.trim()
-                              ) {
-                                handleValueEnter(i);
-                              }
-                            }}
-                            autoComplete="off"
-                          />
-                        );
-                      }
-
-                      return (
-                        <Autocomplete
-                          shouldFilter={false}
-                          value={field.value}
-                          options={currentHeader.enum ?? []}
-                          onChange={(e) => {
-                            field.onChange(e);
-                            setValue(`headers.${i}.active`, true);
-                          }}
-                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
-                        />
-                      );
-                    }}
-                  />
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
-                    onClick={() => remove(i)}
-                    type="button"
-                  >
-                    <XIcon size={16} />
-                  </Button>
-                </div>
-              </ParamsGridItem>
-            );
-          })}
-        </ParamsGrid>
-      </Card>
-      <div className="text-end">
+    <div className="flex flex-col gap-2 ">
+      <div className="flex items-center justify-between">
+        <span className="font-semibold">Headers</span>
         <Button
           className=""
           onClick={addNewHeader}
           type="button"
-          variant="secondary"
+          size="sm"
+          variant="ghost"
         >
-          Add header
+          + Add header
         </Button>
       </div>
+      <div className="flex flex-col gap-2">
+        <Card className="overflow-hidden rounded-lg">
+          <ParamsGrid>
+            {fields.map((field, i) => {
+              const currentHeader = schemaHeaders.find(
+                (h) => h.name === watch(`headers.${i}.name`),
+              );
+              return (
+                <ParamsGridItem key={field.id}>
+                  <div className="flex items-center gap-2 ">
+                    <Controller
+                      control={control}
+                      name={`headers.${i}.active`}
+                      render={({ field }) => (
+                        <Checkbox
+                          id={`headers.${i}.active`}
+                          checked={field.value}
+                          onCheckedChange={(checked) => {
+                            field.onChange(checked);
+                          }}
+                        />
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name={`headers.${i}.name`}
+                      render={({ field }) => (
+                        <Autocomplete
+                          {...field}
+                          placeholder="Name"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
+                          options={[...missingHeaders, ...headerOptions]}
+                          onEnterPress={() => handleHeaderEnter(i)}
+                          onChange={(e) => {
+                            field.onChange(e);
+                            setValue(`headers.${i}.active`, true);
+                          }}
+                          ref={(el) => {
+                            nameRefs.current[i] = el;
+                          }}
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Controller
+                      control={control}
+                      name={`headers.${i}.value`}
+                      render={({ field }) => {
+                        const hasEnum =
+                          currentHeader?.enum && currentHeader.enum.length > 0;
+
+                        if (!hasEnum) {
+                          return (
+                            <Input
+                              placeholder="Value"
+                              className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                              {...field}
+                              ref={(el) => {
+                                valueRefs.current[i] = el;
+                              }}
+                              onKeyDown={(e) => {
+                                if (
+                                  e.key === "Enter" &&
+                                  e.currentTarget.value.trim()
+                                ) {
+                                  handleValueEnter(i);
+                                }
+                              }}
+                              autoComplete="off"
+                            />
+                          );
+                        }
+
+                        return (
+                          <Autocomplete
+                            shouldFilter={false}
+                            value={field.value}
+                            options={currentHeader.enum ?? []}
+                            onChange={(e) => {
+                              field.onChange(e);
+                              setValue(`headers.${i}.active`, true);
+                            }}
+                            className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
+                          />
+                        );
+                      }}
+                    />
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
+                      onClick={() => remove(i)}
+                      type="button"
+                    >
+                      <XIcon size={16} />
+                    </Button>
+                  </div>
+                </ParamsGridItem>
+              );
+            })}
+          </ParamsGrid>
+        </Card>
+      </div>
     </div>
   );
 };

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

@@ -13,7 +13,7 @@ const IdentitySelector = ({
   setValue: (value: string) => void;
   value?: string;
 }) => (
-  <Card className="w-full overflow-hidden">
+  <Card className="w-full overflow-hidden rounded-lg">
     <RadioGroup
       onValueChange={(value) => setValue(value)}
       value={value}
@@ -21,19 +21,21 @@ const IdentitySelector = ({
       className="gap-0"
       disabled={identities?.length === 0}
     >
-      <Label className="h-12 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent">
+      <Label className="h-10 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent">
         <RadioGroupItem value={NO_IDENTITY} id="none" />
         <span>None</span>
       </Label>
-      {identities?.map((identity) => (
-        <Label
-          key={identity.id}
-          className="h-12 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent"
-        >
-          <RadioGroupItem value={identity.id} id={identity.id} />
-          <span>{identity.label}</span>
-        </Label>
-      ))}
+      <div className="divide-y">
+        {identities?.map((identity) => (
+          <Label
+            key={identity.id}
+            className="h-10 items-center flex gap-2 p-4 cursor-pointer hover:bg-accent"
+          >
+            <RadioGroupItem value={identity.id} id={identity.id} />
+            <span>{identity.label}</span>
+          </Label>
+        ))}
+      </div>
     </RadioGroup>
   </Card>
 );

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

@@ -2,12 +2,12 @@ import createVariantComponent from "../../../util/createVariantComponent.js";
 
 const ParamsGrid = createVariantComponent(
   "div",
-  "grid grid-cols-[2fr_3fr] gap-2 items-center",
+  "grid grid-cols-[2fr_3fr] items-center",
 );
 
 export const ParamsGridItem = createVariantComponent(
   "div",
-  "group hover:bg-accent px-3 grid col-span-full grid-cols-subgrid",
+  "group hover:bg-accent px-4 py-1 grid col-span-full grid-cols-subgrid",
 );
 
 export default ParamsGrid;

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

@@ -22,7 +22,7 @@ export const PathParams = ({
   );
 
   return (
-    <Card className="rounded-lg">
+    <Card className="rounded-lg overflow-hidden">
       <ParamsGrid>
         {sortedFields.map((field, i) => (
           <ParamsGridItem key={field.id}>