zudoku 0.0.0-fabd0c1 → 0.0.0-fb5b775d

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

@@ -1,5 +1,8 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { PlayIcon } from "lucide-react";
 import { type PropsWithChildren, useState } from "react";
+import { useAuth } from "zudoku/hooks";
+import { Button } from "zudoku/ui/Button.js";
 import {
   Dialog,
   DialogContent,
@@ -10,50 +13,41 @@ import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
 export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;
 
-const HeroPlayIcon = ({
-  className,
-  size = 16,
-}: {
-  className?: string;
-  size?: number;
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    className={className}
-    width={size}
-    height={size}
-  >
-    <path
-      fillRule="evenodd"
-      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
 const PlaygroundDialog = (props: PlaygroundDialogProps) => {
   const [open, setOpen] = useState(false);
+  const { isAuthEnabled, login, signup, isPending, isAuthenticated } =
+    useAuth();
+
   return (
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
         {props.children ?? (
-          <button className="flex gap-1 items-center px-2 py-1 rounded-md bg-primary/80 hover:bg-primary transition text-primary-foreground text-xs">
-            Test
-            <HeroPlayIcon className="" size={14} />
-          </button>
+          <Button variant="ghost" size="icon-xs" className="group">
+            <PlayIcon
+              className="fill-muted-foreground group-hover:fill-foreground transition"
+              size={16}
+              strokeWidth={1.5}
+            />
+          </Button>
         )}
       </DialogTrigger>
 
       <DialogContent
-        className="max-w-screen-xl w-full h-5/6 overflow-auto p-0"
+        className="max-w-screen-xl! w-full overflow-hidden p-0"
         aria-describedby={undefined}
+        showCloseButton={true}
       >
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>
         </VisuallyHidden>
-        {open && <Playground {...props} />}
+        {open && (
+          <Playground
+            requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
+            onLogin={() => login()}
+            onSignUp={() => signup()}
+            {...props}
+          />
+        )}
       </DialogContent>
     </Dialog>
   );

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

@@ -1,130 +1,120 @@
-import { EraserIcon } from "lucide-react";
+import { Unlink2Icon } from "lucide-react";
+import { type Control, useFormContext } from "react-hook-form";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
+import { Autocomplete } from "../../../components/Autocomplete.js";
 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 {
-  NO_IDENTITY,
-  type PlaygroundForm,
-  type QueryParam,
-} from "./Playground.js";
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "./CollapsibleHeader.js";
+import ParamsGrid, {
+  ParamsGridInput,
+  ParamsGridItem,
+  ParamsGridRemoveButton,
+} from "./ParamsGrid.js";
+import type { PlaygroundForm, QueryParam } from "./Playground.js";
+import { useKeyValueFieldManager } from "./request-panel/useKeyValueFieldManager.js";
 
 export const QueryParams = ({
   control,
-  queryParams,
+  schemaQueryParams,
 }: {
   control: Control<PlaygroundForm>;
-  queryParams: QueryParam[];
+  schemaQueryParams: QueryParam[];
 }) => {
-  const { fields } = useFieldArray<PlaygroundForm>({
+  const { watch } = useFormContext<PlaygroundForm>();
+  const watchedQueryParams = watch("queryParams");
+
+  const manager = useKeyValueFieldManager<PlaygroundForm, "queryParams">({
     control,
     name: "queryParams",
+    defaultValue: { name: "", value: "", active: false },
   });
-  const form = useFormContext<PlaygroundForm>();
 
-  const requiredFields = queryParams.map((param) => Boolean(param.isRequired));
+  const requiredFields = schemaQueryParams.map((param) =>
+    Boolean(param.isRequired),
+  );
 
-  const selectedIdentity = form.watch("identity");
-  const hasSelectedIdentity = selectedIdentity !== NO_IDENTITY;
+  const hasSchemaParams = schemaQueryParams.length > 0;
 
   return (
-    <div className="">
-      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
-        <tbody>
-          {fields
-            .filter(
-              // TODO remove this hack for Accu or make it more generic
-              (field) => !(hasSelectedIdentity && field.name === "apikey"),
-            )
-            .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}
+    <Collapsible defaultOpen>
+      <CollapsibleHeaderTrigger>
+        <Unlink2Icon size={16} />
+        <CollapsibleHeader>Query Parameters</CollapsibleHeader>
+      </CollapsibleHeaderTrigger>
+      <CollapsibleContent className="CollapsibleContent">
+        <ParamsGrid>
+          {manager.fields.map((field, i) => {
+            const currentParam = schemaQueryParams.find(
+              (param) => param.name === watchedQueryParams.at(i)?.name,
+            );
+            const hasEnum = currentParam?.enum && currentParam.enum.length > 0;
+            const nameInputProps = manager.getNameInputProps(i);
+            const valueInputProps = manager.getValueInputProps(i);
+
+            return (
+              <ParamsGridItem key={field.id}>
+                <Checkbox {...manager.getCheckboxProps(i)} />
+                {!requiredFields[i] ? (
+                  hasSchemaParams ? (
+                    <ParamsGridInput asChild>
+                      <Autocomplete
+                        {...nameInputProps}
+                        value={String(manager.getValue(i, "name"))}
+                        placeholder="Name"
+                        options={schemaQueryParams.map((param) => param.name)}
+                        onChange={(v) => manager.setValue(i, "name", v)}
+                        onSelect={(v) =>
+                          manager.setValue(i, "name", v, { focus: "next" })
+                        }
                       />
-                    )}
-                  />
-                </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>&nbsp;*</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`}
+                    </ParamsGridInput>
+                  ) : (
+                    <ParamsGridInput {...nameInputProps} placeholder="Name" />
+                  )
+                ) : (
+                  <ParamsGridInput asChild>
+                    <label
+                      className="flex items-center cursor-pointer gap-1"
+                      htmlFor={`queryParams.${i}.active`}
+                      title={requiredFields[i] ? "Required field" : undefined}
+                    >
+                      {watchedQueryParams[i]?.name}
+                      {requiredFields[i] && <sup>&nbsp;*</sup>}
+                    </label>
+                  </ParamsGridInput>
+                )}
+                <div className="flex justify-between items-center">
+                  {!hasEnum ? (
+                    <ParamsGridInput
+                      placeholder="Value"
+                      aria-label="Query parameter value"
+                      {...valueInputProps}
                     />
-                  </div>
-                </td>
-              </tr>
-            ))}
-        </tbody>
-      </table>
-    </div>
+                  ) : (
+                    <ParamsGridInput asChild>
+                      <Autocomplete
+                        {...valueInputProps}
+                        value={String(manager.getValue(i, "value"))}
+                        shouldFilter={false}
+                        options={currentParam.enum ?? []}
+                        onChange={(v) => manager.setValue(i, "value", v)}
+                        onSelect={(v) =>
+                          manager.setValue(i, "value", v, { focus: "next" })
+                        }
+                      />
+                    </ParamsGridInput>
+                  )}
+                  <ParamsGridRemoveButton
+                    {...manager.getRemoveButtonProps(i)}
+                  />
+                </div>
+              </ParamsGridItem>
+            );
+          })}
+        </ParamsGrid>
+      </CollapsibleContent>
+    </Collapsible>
   );
 };

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

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "zudoku/ui/Dialog.js";
+import { Label } from "zudoku/ui/Label.js";
+
+const RequestLoginDialog = ({
+  open,
+  setOpen,
+  onSignUp,
+  onLogin,
+  onSkip,
+}: {
+  open: boolean;
+  onSignUp?: () => void;
+  onLogin?: () => void;
+  setOpen: (open: boolean) => void;
+  onSkip?: (rememberSkip: boolean) => void;
+}) => {
+  const [rememberSkip, setRememberSkip] = useState(false);
+
+  const handleSkip = () => {
+    onSkip?.(rememberSkip);
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogTitle>Welcome to the Playground!</DialogTitle>
+        <DialogDescription>
+          The Playground is a tool for developers to test and explore our APIs.
+          To use the Playground, you need to login.
+        </DialogDescription>
+        <Label className="flex items-center gap-2 font-normal">
+          <Checkbox
+            checked={rememberSkip}
+            onCheckedChange={(checked) => setRememberSkip(checked === true)}
+          />
+          Don't show this again
+        </Label>
+        <DialogFooter className="flex gap-2 sm:justify-between">
+          <Button type="button" variant="outline" onClick={handleSkip}>
+            Skip
+          </Button>
+          <div className="flex gap-2">
+            {onSignUp && (
+              <Button type="button" variant="outline" onClick={onSignUp}>
+                Sign Up
+              </Button>
+            )}
+            {onLogin && (
+              <Button type="button" variant="default" onClick={onLogin}>
+                Login
+              </Button>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RequestLoginDialog;

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

@@ -0,0 +1,87 @@
+import { motion } from "motion/react";
+
+const ball = {
+  width: 5,
+  height: 5,
+  borderRadius: "50%",
+};
+
+const Spinner = () => {
+  return (
+    <motion.div
+      className="flex items-center gap-1"
+      initial="hidden"
+      animate="visible"
+      variants={{
+        visible: {
+          transition: {
+            staggerChildren: 0.2,
+          },
+        },
+      }}
+    >
+      <motion.div
+        className="bg-white/60"
+        variants={{
+          hidden: { opacity: 0, y: 3 },
+          visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+              y: {
+                type: "spring",
+                stiffness: 300,
+                damping: 10,
+                repeat: Infinity,
+                repeatType: "reverse",
+              },
+            },
+          },
+        }}
+        style={ball}
+      />
+      <motion.div
+        className="bg-white/60"
+        variants={{
+          hidden: { opacity: 0, y: 3 },
+          visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+              y: {
+                type: "spring",
+                stiffness: 300,
+                damping: 10,
+                repeat: Infinity,
+                repeatType: "reverse",
+              },
+            },
+          },
+        }}
+        style={ball}
+      />
+      <motion.div
+        className="bg-white/60"
+        variants={{
+          hidden: { opacity: 0, y: 3 },
+          visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+              y: {
+                type: "spring",
+                stiffness: 300,
+                damping: 10,
+                repeat: Infinity,
+                repeatType: "reverse",
+              },
+            },
+          },
+        }}
+        style={ball}
+      />
+    </motion.div>
+  );
+};
+
+export default Spinner;

package/src/lib/plugins/openapi/playground/fileUtils.ts

@@ -0,0 +1,32 @@
+export function isBinaryContentType(contentType: string) {
+  return /^(application\/octet-stream|image\/|audio\/|video\/|font\/|application\/pdf|application\/zip|application\/x-protobuf|application\/x-binary)/i.test(
+    contentType,
+  );
+}
+
+export const extractFileName = (
+  headers: Array<[string, string]>,
+  url: string,
+): string => {
+  const contentDisposition = headers.find(
+    ([key]) => key.toLowerCase() === "content-disposition",
+  )?.[1];
+
+  if (contentDisposition) {
+    const filenameMatch = contentDisposition.match(
+      /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/,
+    );
+    if (filenameMatch?.[1]) {
+      return filenameMatch[1].replace(/['"]/g, "");
+    }
+  }
+
+  // Extract filename from URL as fallback
+  try {
+    const urlPath = new URL(url).pathname;
+    const fileName = urlPath.split("/").pop() || "download";
+    return fileName.includes(".") ? fileName : "download";
+  } catch {
+    return "download";
+  }
+};

package/src/lib/plugins/openapi/playground/rememberedIdentity.ts

@@ -0,0 +1,26 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+interface IdentityState {
+  rememberedIdentity: string | null;
+  setRememberedIdentity: (identity: string | null) => void;
+  getRememberedIdentity: (availableIdentities: string[]) => string | undefined;
+}
+
+export const useIdentityStore = create<IdentityState>()(
+  persist(
+    (set, get) => ({
+      rememberedIdentity: null,
+      setRememberedIdentity: (identity: string | null) =>
+        set({ rememberedIdentity: identity }),
+      getRememberedIdentity: (availableIdentities: string[]) =>
+        availableIdentities.find(
+          (identity) => identity === get().rememberedIdentity,
+        ),
+    }),
+    {
+      name: "identity-storage",
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);

package/src/lib/plugins/openapi/playground/request-panel/MultipartField.tsx

@@ -0,0 +1,91 @@
+import { PaperclipIcon, TrashIcon } from "lucide-react";
+import { useRef } from "react";
+import { Button } from "zudoku/components";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { humanFileSize } from "../../../../util/humanFileSize.js";
+import {
+  ParamsGridInput,
+  ParamsGridItem,
+  ParamsGridRemoveButton,
+} from "../ParamsGrid.js";
+import type { PlaygroundForm } from "../Playground.js";
+import type { useKeyValueFieldManager } from "./useKeyValueFieldManager.js";
+
+type MultipartFieldProps = {
+  index: number;
+  manager: ReturnType<
+    typeof useKeyValueFieldManager<PlaygroundForm, "multipartFormFields">
+  >;
+};
+
+export const MultipartField = ({ index, manager }: MultipartFieldProps) => {
+  const fieldFileInputRef = useRef<HTMLInputElement>(null);
+  const fieldValue = manager.getValue(index, "value");
+
+  return (
+    <ParamsGridItem>
+      <Checkbox
+        {...manager.getCheckboxProps(index)}
+        disabled={!manager.getValue(index, "name")}
+      />
+      <ParamsGridInput
+        {...manager.getNameInputProps(index)}
+        placeholder="Key"
+      />
+      <div className="flex items-center gap-1 flex-1">
+        {fieldValue instanceof File ? (
+          <div className="flex items-center gap-1 flex-1 min-w-0">
+            <div className="flex items-center gap-1 border-b cursor-default">
+              <PaperclipIcon size={12} className="text-muted-foreground" />
+              <span
+                className="text-xs truncate"
+                title={`${fieldValue.name} (${humanFileSize(fieldValue.size)})`}
+              >
+                {fieldValue.name}
+              </span>
+            </div>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              className="opacity-50 hover:opacity-100 hover:brightness-95 transition-opacity"
+              onClick={() => manager.setValue(index, "value", "")}
+            >
+              <TrashIcon size={13} />
+            </Button>
+          </div>
+        ) : (
+          <>
+            <ParamsGridInput
+              {...manager.getValueInputProps(index)}
+              placeholder="Value"
+            />
+            <input
+              ref={fieldFileInputRef}
+              type="file"
+              className="hidden"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (!file) return;
+
+                manager.setValue(index, "value", file);
+                manager.setValue(index, "active", true);
+              }}
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              onClick={() => fieldFileInputRef.current?.click()}
+              title="Attach file"
+              className="opacity-0 focus-visible:opacity-100 group-hover:opacity-100 group-hover:brightness-95 transition-opacity"
+            >
+              <PaperclipIcon size={14} />
+            </Button>
+          </>
+        )}
+        <ParamsGridRemoveButton {...manager.getRemoveButtonProps(index)} />
+      </div>
+    </ParamsGridItem>
+  );
+};

package/src/lib/plugins/openapi/playground/request-panel/UrlPath.tsx

@@ -0,0 +1,31 @@
+import { useFormContext } from "react-hook-form";
+import { PathRenderer } from "../../../../components/PathRenderer.js";
+import { ColorizedParam } from "../../ColorizedParam.js";
+import type { PlaygroundForm } from "../Playground.js";
+
+export const UrlPath = ({ url }: { url: string }) => {
+  const { watch, setFocus } = useFormContext<PlaygroundForm>();
+  const [pathParams] = watch(["pathParams"]);
+
+  return (
+    <PathRenderer
+      path={url}
+      renderParam={({ name, originalValue, index }) => {
+        const formValue = pathParams.find(
+          (param) => param.name === name,
+        )?.value;
+
+        return (
+          <ColorizedParam
+            name={name}
+            backgroundOpacity="0"
+            slug={name}
+            onClick={() => setFocus(`pathParams.${index}.value`)}
+          >
+            {formValue || originalValue}
+          </ColorizedParam>
+        );
+      }}
+    />
+  );
+};

package/src/lib/plugins/openapi/playground/request-panel/UrlQueryParams.tsx

@@ -0,0 +1,25 @@
+import { Fragment } from "react";
+import { useFormContext } from "react-hook-form";
+import type { PlaygroundForm } from "../Playground.js";
+
+export const UrlQueryParams = () => {
+  const { watch } = useFormContext<PlaygroundForm>();
+  const queryParams = watch("queryParams");
+
+  const urlQueryParams = queryParams
+    .filter((p) => p.active && p.name)
+    .map((p, i, arr) => (
+      <Fragment key={`${i}-${p.name}`}>
+        {p.name}={encodeURIComponent(p.value).replaceAll("%20", "+")}
+        {i < arr.length - 1 && "&"}
+        <wbr />
+      </Fragment>
+    ));
+
+  return (
+    <>
+      {urlQueryParams.length > 0 ? `?` : ""}
+      {urlQueryParams}
+    </>
+  );
+};