zudoku 0.3.0-dev.64 → 0.3.0-dev.66

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -2,7 +2,6 @@ import { useMutation } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
 import { useDevPortal } from "../../components/context/DevPortalProvider.js";
-import { Input } from "../../components/Input.js";
 import {
   Select,
   SelectContent,
@@ -12,6 +11,7 @@ import {
   SelectValue,
 } from "../../components/Select.js";
 import { Button } from "../../ui/Button.js";
+import { Input } from "../../ui/Input.js";
 import { ApiKeyService } from "./index.js";
 
 type CreateApiKey = { description: string; expiresOn?: string };

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

@@ -9,7 +9,7 @@ export const usePastellizedColor = (name: string) => {
   const [isDark] = useTheme();
   return pastellize(
     name,
-    !isDark ? { saturation: 100, lightness: 70 } : undefined,
+    !isDark ? { saturation: 85, lightness: 50 } : undefined,
   );
 };
 
@@ -17,6 +17,7 @@ export const ColorizedParam = ({
   name,
   className,
   backgroundOpacity = "100%",
+  borderOpacity = "100%",
   slug,
   children,
   onClick,
@@ -24,34 +25,40 @@ export const ColorizedParam = ({
   name: string;
   className?: string;
   backgroundOpacity?: string;
+  borderOpacity?: string;
   slug?: string;
   children?: ReactNode;
   onClick?: () => void;
 }) => {
   const ref = useRef<HTMLSpanElement>(null);
   const normalized = name.replace("{", "").replace("}", "");
+  const normalizedSlug = slug?.replace("{", "").replace("}", "");
   const color = usePastellizedColor(normalized);
 
-  const borderColor = `hsl(${color})`;
+  const borderColor = `hsl(${color} / ${borderOpacity})`;
   const backgroundColor = `hsl(${color} / ${backgroundOpacity})`;
 
   useEffect(() => {
-    if (!slug) return;
+    if (!normalizedSlug) return;
     if (!ref.current) return;
 
     const onMouseEnter = () => {
-      document.querySelectorAll(`[${DATA_ATTR}="${slug}"]`).forEach((el) => {
-        if (el instanceof HTMLElement) {
-          el.dataset.active = "true";
-        }
-      });
+      document
+        .querySelectorAll(`[${DATA_ATTR}="${normalizedSlug}"]`)
+        .forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.dataset.active = "true";
+          }
+        });
     };
     const onMouseLeave = () => {
-      document.querySelectorAll(`[${DATA_ATTR}="${slug}"]`).forEach((el) => {
-        if (el instanceof HTMLElement) {
-          el.dataset.active = "false";
-        }
-      });
+      document
+        .querySelectorAll(`[${DATA_ATTR}="${normalizedSlug}"]`)
+        .forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.dataset.active = "false";
+          }
+        });
     };
 
     ref.current.addEventListener("mouseenter", onMouseEnter);
@@ -61,12 +68,12 @@ export const ColorizedParam = ({
       ref.current?.removeEventListener("mouseenter", onMouseEnter);
       ref.current?.removeEventListener("mouseleave", onMouseLeave);
     };
-  }, [slug]);
+  }, [normalizedSlug]);
 
   return (
     <span
       className={cn("inline-flex relative rounded group", className)}
-      {...{ [DATA_ATTR]: slug }}
+      {...{ [DATA_ATTR]: normalizedSlug }}
       ref={ref}
       onClick={onClick}
     >

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

@@ -51,11 +51,10 @@ export const ResponsesSidecarBox = ({
             Empty Response
           </span>
         )}
-        <hr className="border-border my-1" />
-        <div className="text-xs  text-muted-foreground">
-          {responses[tabIndex].description}
-        </div>
       </SidecarBox.Body>
+      <SidecarBox.Footer className="flex justify-end text-xs">
+        {responses[tabIndex].description}
+      </SidecarBox.Footer>
     </SidecarBox.Root>
   );
 };

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

@@ -1,5 +1,5 @@
 import { HTTPSnippet } from "@zudoku/httpsnippet";
-import { Fragment, useMemo } from "react";
+import { Fragment, useMemo, useTransition } from "react";
 import { useSearchParams } from "react-router-dom";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
@@ -67,6 +67,8 @@ export const Sidecar = ({
     MethodTextColorMap[operation.method as keyof typeof MethodTextColorMap];
 
   const [searchParams, setSearchParams] = useSearchParams();
+  const [, startTransition] = useTransition();
+
   const selectedLang = searchParams.get("lang") ?? "shell";
 
   const requestBodyContent = operation.requestBody?.content;
@@ -115,7 +117,7 @@ export const Sidecar = ({
   return (
     <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
       <SidecarBox.Root>
-        <SidecarBox.Head className="flex justify-between items-center flex-nowrap p-2 gap-2 text-xs">
+        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-3 gap-2 text-xs">
           <span className="font-mono break-words">
             <span className={cn("font-semibold", methodTextColor)}>
               {operation.method.toLocaleUpperCase()}
@@ -123,27 +125,7 @@ export const Sidecar = ({
             &nbsp;
             {path}
           </span>
-          <div className="flex gap-2 items-center">
-            <SimpleSelect
-              className="self-start"
-              value={selectedLang}
-              onChange={(e) => setSearchParams({ lang: e.target.value })}
-              options={[
-                { value: "shell", label: "cURL" },
-                { value: "js", label: "Javascript" },
-                { value: "python", label: "Python" },
-                { value: "java", label: "Java" },
-                { value: "go", label: "Go" },
-                { value: "csharp", label: "C#" },
-                { value: "kotlin", label: "Kotlin" },
-                { value: "objc", label: "Objective C" },
-                { value: "php", label: "PHP" },
-                { value: "ruby", label: "Ruby" },
-                { value: "swift", label: "Swift" },
-              ]}
-            />
-            <PlaygroundDialogWrapper operation={operation} />
-          </div>
+          <PlaygroundDialogWrapper operation={operation} />
         </SidecarBox.Head>
         <SidecarBox.Body>
           <SyntaxHighlight
@@ -153,6 +135,31 @@ export const Sidecar = ({
             code={code}
           />
         </SidecarBox.Body>
+        <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-1">
+          <span>Show example in</span>
+          <SimpleSelect
+            className="self-start max-w-[150px]"
+            value={selectedLang}
+            onChange={(e) => {
+              startTransition(() => {
+                setSearchParams({ lang: e.target.value });
+              });
+            }}
+            options={[
+              { value: "shell", label: "cURL" },
+              { value: "js", label: "Javascript" },
+              { value: "python", label: "Python" },
+              { value: "java", label: "Java" },
+              { value: "go", label: "Go" },
+              { value: "csharp", label: "C#" },
+              { value: "kotlin", label: "Kotlin" },
+              { value: "objc", label: "Objective C" },
+              { value: "php", label: "PHP" },
+              { value: "ruby", label: "Ruby" },
+              { value: "swift", label: "Swift" },
+            ]}
+          />
+        </SidecarBox.Footer>
       </SidecarBox.Root>
       {requestBodyContent && (
         <RequestBodySidecarBox content={requestBodyContent} />

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

@@ -19,7 +19,7 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "border-b border-b-border dark:border-b-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      "border-b dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
       className,
     )}
   >
@@ -34,3 +34,14 @@ export const Body = ({ children, className }: BaseComponentProps) => (
     {children}
   </div>
 );
+
+export const Footer = ({ children, className }: BaseComponentProps) => (
+  <div
+    className={cn(
+      "border-t dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

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

@@ -1,31 +1,17 @@
-import { forwardRef, InputHTMLAttributes } from "react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { EraserIcon } from "lucide-react";
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  useFormContext,
+  UseFormRegister,
+} from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { Input } from "../../../ui/Input.js";
 import { cn } from "../../../util/cn.js";
-import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
-import { InlineInput } from "./InlineInput.js";
+import { ColorizedParam } from "../ColorizedParam.js";
 import type { PlaygroundForm } from "./Playground.js";
 
-type ParameterValueProps = {
-  part: string;
-} & InputHTMLAttributes<HTMLInputElement>;
-
-const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
-  function ParameterValue({ part, className, ...props }, ref) {
-    const color = usePastellizedColor(part);
-    return (
-      <InlineInput
-        {...props}
-        ref={ref}
-        className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
-        style={{
-          // color: `hsl(${color})`,
-          outlineColor: `hsl(${color})`,
-        }}
-      />
-    );
-  },
-);
-
 export const PathParams = ({
   control,
   register,
@@ -33,31 +19,77 @@ export const PathParams = ({
   register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
 }) => {
+  const form = useFormContext<PlaygroundForm>();
   const { fields } = useFieldArray<PlaygroundForm>({
     control,
     name: "pathParams",
   });
 
-  return fields.map((part, i) => (
-    <div
-      key={part.id}
-      className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
-    >
-      <InlineInput
-        {...register(`pathParams.${i}.name`)}
-        disabled
-        placeholder="Name"
-        className="peer"
-      />
-      <ParameterValue
-        {...register(`pathParams.${i}.value`)}
-        part={part.name}
-        {...{ [DATA_ATTR]: part.name }}
-        placeholder="Value"
-        className="peer"
-      />
-
-      <div className="col-span-full border-b border-border"></div>
-    </div>
-  ));
+  return (
+    <table className="w-full table-auto [&_td]:border [&_td]:py-1 [&_td]:px-2">
+      <tbody>
+        {fields.map((part, i) => (
+          <tr key={part.id} className="hover:bg-accent/40">
+            <td>
+              <Controller
+                control={control}
+                name={`pathParams.${i}.value`}
+                render={({ field }) => (
+                  <ColorizedParam
+                    slug={part.name}
+                    name={part.name}
+                    backgroundOpacity="0"
+                    borderOpacity={field.value ? "100%" : "0"}
+                    className={cn(
+                      "font-mono text-xs m-2",
+                      !field.value && "opacity-60",
+                    )}
+                  />
+                )}
+              />
+            </td>
+            <td>
+              <div className="flex justify-between items-center">
+                <Controller
+                  control={control}
+                  name={`pathParams.${i}.value`}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      placeholder="Enter value"
+                      className={cn(
+                        "border-0 shadow-none ring-0 font-mono text-xs",
+                      )}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`pathParams.${i}.value`}
+                  render={({ field }) => (
+                    <Button
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                      aria-label="Clear value"
+                      className={cn(
+                        "ms-2",
+                        field.value.length === 0
+                          ? "opacity-0 pointer-events-none"
+                          : "opacity-100",
+                      )}
+                      title="Clear value"
+                      onClick={() => field.onChange("")}
+                    >
+                      <EraserIcon size={16} />
+                    </Button>
+                  )}
+                />
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
 };

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

@@ -152,26 +152,31 @@ export const Playground = ({
     },
   });
 
-  const path = url.split("/").map((part, i, arr) => (
-    <Fragment key={part}>
-      {part.startsWith("{") && part.endsWith("}") ? (
-        <ColorizedParam
-          name={part}
-          backgroundOpacity="0"
-          slug={part.slice(1, -1)}
-        >
-          {
-            formState.pathParams.find((p) => p.name === part.slice(1, -1))
-              ?.value
-          }
-        </ColorizedParam>
-      ) : (
-        part
-      )}
-      {i < arr.length - 1 && "/"}
-      <wbr />
-    </Fragment>
-  ));
+  const path = url.split("/").map((part, i, arr) => {
+    const isPathParam = part.startsWith("{") && part.endsWith("}");
+    const value = formState.pathParams.find(
+      (p) => p.name === part.slice(1, -1),
+    )?.value;
+
+    const pathParamValue = value ? (
+      <ColorizedParam backgroundOpacity="0%" name={part} slug={part}>
+        {value}
+      </ColorizedParam>
+    ) : (
+      <span className="underline decoration-wavy decoration-red-500">
+        {part}
+      </span>
+    );
+
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      <Fragment key={part + i}>
+        {isPathParam ? pathParamValue : part}
+        {i < arr.length - 1 && "/"}
+        <wbr />
+      </Fragment>
+    );
+  });
 
   const lang = mimeTypeToLanguage(
     queryMutation.data?.headers.get("Content-Type") ?? "",
@@ -251,20 +256,18 @@ export const Playground = ({
                 <Headers control={control} register={register} />
               </TabsContent>
               <TabsContent value="parameters">
-                <div className="grid grid-cols-[min-content_1fr_1fr_auto]">
-                  {pathParams.length > 0 && (
-                    <div className="font-semibold my-3 col-span-3">
-                      Path Parameters
-                    </div>
-                  )}
-                  <PathParams control={control} register={register} />
-                  {queryParams.length > 0 && (
-                    <span className="font-semibold my-3 col-span-3">
-                      Query Parameters
-                    </span>
-                  )}
-                  <QueryParams control={control} />
-                </div>
+                {pathParams.length > 0 && (
+                  <div className="flex flex-col gap-4 my-4">
+                    <span className="font-semibold">Path Parameters</span>
+                    <PathParams control={control} register={register} />
+                  </div>
+                )}
+                {queryParams.length > 0 && (
+                  <div className="flex flex-col gap-4 my-4">
+                    <span className="font-semibold">Query Parameters</span>
+                    <QueryParams control={control} />
+                  </div>
+                )}
               </TabsContent>
               <TabsContent value="body">
                 <textarea

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

@@ -1,10 +1,12 @@
-import { XIcon } from "lucide-react";
+import { EraserIcon } from "lucide-react";
 import {
   Control,
   Controller,
   useFieldArray,
   useFormContext,
 } from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { Input } from "../../../ui/Input.js";
 import { cn } from "../../../util/cn.js";
 import { InlineInput } from "./InlineInput.js";
 import type { PlaygroundForm } from "./Playground.js";
@@ -21,74 +23,96 @@ export const QueryParams = ({
   const form = useFormContext<PlaygroundForm>();
 
   const requiredFields = form
-    .getValues(`queryParams`)
+    .getValues("queryParams")
     .map((param) => param.isRequired);
 
-  return fields.map((field, i) => (
-    <div
-      key={field.id}
-      className="px-2 grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-accent rounded overflow-hidden group"
-    >
-      <Controller
-        control={control}
-        name={`queryParams.${i}.active`}
-        render={({ field }) => (
-          <input
-            type="checkbox"
-            id={`queryParams.${i}.active`}
-            checked={field.value}
-            onChange={field.onChange}
-          />
-        )}
-      />
-
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <InlineInput asChild>
-              <label
-                className="flex items-center"
-                htmlFor={`queryParams.${i}.active`}
-                title={requiredFields[i] ? "Required field" : undefined}
-              >
-                {field.value}
-                {requiredFields[i] && <sup className="text-destructive">*</sup>}
-              </label>
-            </InlineInput>
-          );
-        }}
-        name={`queryParams.${i}.name`}
-      />
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <InlineInput {...field} placeholder="Value" className="peer" />
-          );
-        }}
-        name={`queryParams.${i}.value`}
-      />
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <button
-              type="button"
-              className={cn(
-                "hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible",
-                field.value.length === 0 && "opacity-0 pointer-events-none",
-              )}
-              onClick={() => field.onChange("")}
-            >
-              <XIcon size={16} />
-            </button>
-          );
-        }}
-        name={`queryParams.${i}.value`}
-      />
-
-      <div className="-mx-2 col-span-full border-b border-border"></div>
+  return (
+    <div className="">
+      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
+        <tbody>
+          {fields.map((field, i) => (
+            <tr key={field.id} className="hover:bg-accent/40">
+              <td className="text-center">
+                <Controller
+                  control={control}
+                  name={`queryParams.${i}.active`}
+                  render={({ field }) => (
+                    <input
+                      type="checkbox"
+                      id={`queryParams.${i}.active`}
+                      checked={field.value}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </td>
+              <td>
+                <Controller
+                  control={control}
+                  render={({ field }) => (
+                    <InlineInput asChild>
+                      <label
+                        className="flex items-center cursor-pointer"
+                        htmlFor={`queryParams.${i}.active`}
+                        title={requiredFields[i] ? "Required field" : undefined}
+                      >
+                        {field.value}
+                        {requiredFields[i] && (
+                          <sup className="text-destructive">*</sup>
+                        )}
+                      </label>
+                    </InlineInput>
+                  )}
+                  name={`queryParams.${i}.name`}
+                />
+              </td>
+              <td>
+                <div className="flex justify-between items-center">
+                  <Controller
+                    control={control}
+                    render={({ field }) => (
+                      <Input
+                        {...field}
+                        onChange={(e) => {
+                          field.onChange(e.target.value);
+                          if (e.target.value.length > 0) {
+                            form.setValue(`queryParams.${i}.active`, true);
+                          }
+                        }}
+                        placeholder="Enter value"
+                        className="w-full border-0 shadow-none text-xs font-mono"
+                      />
+                    )}
+                    name={`queryParams.${i}.value`}
+                  />
+                  <Controller
+                    control={control}
+                    render={({ field }) => (
+                      <Button
+                        size="icon"
+                        type="button"
+                        variant="ghost"
+                        aria-label="Clear value"
+                        className={cn(
+                          "ms-2",
+                          field.value.length === 0
+                            ? "opacity-0 pointer-events-none"
+                            : "opacity-100",
+                        )}
+                        title="Clear value"
+                        onClick={() => field.onChange("")}
+                      >
+                        <EraserIcon size={16} />
+                      </Button>
+                    )}
+                    name={`queryParams.${i}.value`}
+                  />
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
-  ));
+  );
 };

package/dist/lib/components/Input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/lib/components/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AAKnC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrC,OAAO,CACL,gBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,uUAAuU,EACvU,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC"}