zudoku 0.3.0-dev.63 → 0.3.0-dev.65

package/src/lib/plugins/markdown/Toc.tsx

@@ -53,7 +53,11 @@ const TocItem = ({
 export const Toc = ({ entries }: { entries: TocEntry[] }) => {
   const { activeAnchor } = useViewportAnchor();
   const listWrapperRef = useRef<HTMLUListElement>(null);
-  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({});
+  const paintedOnce = useRef(false);
+  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({
+    top: 0,
+    opacity: 0,
+  });
 
   // synchronize active anchor indicator with the scroll position
   useEffect(() => {
@@ -64,10 +68,7 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
     );
 
     if (!activeElement) {
-      setIndicatorStyles({
-        "--indicator-top": "0",
-        "--indicator-opacity": 0,
-      } as CSSProperties);
+      setIndicatorStyles({ top: 0, opacity: 0 });
       return;
     }
 
@@ -75,9 +76,16 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
     const topElement = activeElement.getBoundingClientRect().top;
 
     setIndicatorStyles({
-      "--indicator-top": `${topElement - topParent}px`,
-      "--indicator-opacity": 1,
-    } as CSSProperties);
+      opacity: 1,
+      top: `${topElement - topParent}px`,
+    });
+
+    if (paintedOnce.current) return;
+
+    // after all is painted, the indicator should animate
+    requestIdleCallback(() => {
+      paintedOnce.current = true;
+    });
   }, [activeAnchor]);
 
   return (
@@ -86,37 +94,42 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
         <ListTreeIcon size={16} />
         On this page
       </div>
-
-      <ul
-        ref={listWrapperRef}
-        style={indicatorStyle}
-        className={cn(
-          "relative ms-2 ps-4 font-medium list-none mt-0 space-y-2",
-          "before:absolute before:inset-0 before:right-auto before:bg-border before:w-[2px]",
-          "after:absolute after:-left-px after:-translate-y-1 after:top-[--indicator-top] after:opacity-[--indicator-opacity] after:h-6 after:bg-primary after:w-[4px] after:rounded after:ease-out after:[transition:top__150ms,opacity_325ms]",
-        )}
-      >
-        {entries.map((item) => (
-          <TocItem
-            isActive={item.id === activeAnchor}
-            key={item.id}
-            item={item}
-            className="pl-0"
-          >
-            {item.children && (
-              <ul className="list-none pl-4 pt-2 space-y-2">
-                {item.children.map((child) => (
-                  <TocItem
-                    item={child}
-                    isActive={child.id === activeAnchor}
-                    key={child.id}
-                  />
-                ))}
-              </ul>
-            )}
-          </TocItem>
-        ))}
-      </ul>
+      <div className="relative ms-2 ps-4">
+        <div className="absolute inset-0 right-auto bg-border w-[2px]" />
+        <div
+          className={cn(
+            "absolute -left-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
+            paintedOnce.current &&
+              "ease-out [transition:top_150ms,opacity_325ms]",
+          )}
+          style={indicatorStyle}
+        />
+        <ul
+          ref={listWrapperRef}
+          className="relative font-medium list-none space-y-2"
+        >
+          {entries.map((item) => (
+            <TocItem
+              isActive={item.id === activeAnchor}
+              key={item.id}
+              item={item}
+              className="pl-0"
+            >
+              {item.children && (
+                <ul className="list-none pl-4 pt-2 space-y-2">
+                  {item.children.map((child) => (
+                    <TocItem
+                      item={child}
+                      isActive={child.id === activeAnchor}
+                      key={child.id}
+                    />
+                  ))}
+                </ul>
+              )}
+            </TocItem>
+          ))}
+        </ul>
+      </div>
     </aside>
   );
 };

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/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"}