zudoku 0.0.0-f3f6db5 → 0.0.0-f40ea27

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

@@ -39,16 +39,20 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
         {props.children ?? (
-          <button className="flex gap-1 items-center px-2 py-1 rounded-md transition text-xs bg-primary  text-primary-foreground shadow-sm hover:bg-primary/80">
+          <button
+            type="button"
+            className="flex gap-1 items-center px-2 py-1 rounded-md transition text-xs bg-primary  text-primary-foreground shadow-xs hover:bg-primary/80"
+          >
             Test
-            <HeroPlayIcon className="" size={14} />
+            <HeroPlayIcon size={14} />
           </button>
         )}
       </DialogTrigger>
 
       <DialogContent
-        className="max-w-screen-xl w-full h-5/6 overflow-hidden p-0"
+        className="max-w-screen-xl w-full overflow-hidden p-0"
         aria-describedby={undefined}
+        showCloseButton={true}
       >
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>

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

@@ -1,127 +1,174 @@
+import { PlusCircleIcon, Unlink2Icon, XIcon } from "lucide-react";
+import { useEffect } from "react";
 import {
-  Control,
+  type Control,
   Controller,
   useFieldArray,
   useFormContext,
 } from "react-hook-form";
-import { Card } from "zudoku/ui/Card.js";
+import { Button } from "zudoku/ui/Button.js";
 import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
 import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Input } from "../../../ui/Input.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "./CollapsibleHeader.js";
 import { InlineInput } from "./InlineInput.js";
-import ParamsGrid from "./ParamsGrid.js";
+import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
 import { type PlaygroundForm, type QueryParam } from "./Playground.js";
 
 export const QueryParams = ({
   control,
-  queryParams,
+  schemaQueryParams,
 }: {
   control: Control<PlaygroundForm>;
-  queryParams: QueryParam[];
+  schemaQueryParams: QueryParam[];
 }) => {
-  const { fields } = useFieldArray<PlaygroundForm>({
+  const { fields, remove, append } = useFieldArray<
+    PlaygroundForm,
+    "queryParams"
+  >({
     control,
     name: "queryParams",
   });
-  const form = useFormContext<PlaygroundForm>();
+  const { setValue, getValues, watch } = useFormContext<PlaygroundForm>();
+  const watchedQueryParams = watch("queryParams");
+  useEffect(() => {
+    if (watchedQueryParams.length === 0) {
+      append({ name: "", value: "", active: false }, { shouldFocus: true });
+    }
+  }, [watchedQueryParams, append]);
 
-  const requiredFields = queryParams.map((param) => Boolean(param.isRequired));
+  const requiredFields = schemaQueryParams.map((param) =>
+    Boolean(param.isRequired),
+  );
 
   return (
-    <Card className="rounded-lg">
-      <div className="w-full ">
-        {fields.map((field, i) => {
-          const currentParam = queryParams.find(
-            (param) => param.name === field.name,
-          );
-          return (
-            <ParamsGrid key={field.id}>
-              <div className="flex items-center">
-                <Controller
-                  control={control}
-                  name={`queryParams.${i}.active`}
-                  render={({ field }) => (
-                    <Checkbox
-                      variant="outline"
-                      id={`queryParams.${i}.active`}
-                      className="mr-2"
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  )}
-                />
-                <Controller
-                  control={control}
-                  render={({ field }) =>
-                    !requiredFields[i] ? (
-                      <Autocomplete
-                        value={field.value}
-                        options={queryParams.map((param) => param.name)}
-                        onChange={(e) => {
-                          field.onChange(e);
-                        }}
-                        className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+    <Collapsible defaultOpen>
+      <CollapsibleHeaderTrigger>
+        <Unlink2Icon size={16} />
+        <CollapsibleHeader>Query Parameters</CollapsibleHeader>
+        <Button
+          onClick={() => {
+            setValue("queryParams", [
+              ...getValues("queryParams"),
+              { name: "", value: "", active: false },
+            ]);
+          }}
+          type="button"
+          size="sm"
+          variant="ghost"
+          className="hover:bg-accent hover:brightness-95 flex gap-2"
+        >
+          Add parameter <PlusCircleIcon size={16} />
+        </Button>
+      </CollapsibleHeaderTrigger>
+      <CollapsibleContent className="CollapsibleContent">
+        <div className="overflow-hidden w-full">
+          <ParamsGrid>
+            {fields.map((field, i) => {
+              const currentParam = schemaQueryParams.find(
+                (param) => param.name === watchedQueryParams.at(i)?.name,
+              );
+              return (
+                <ParamsGridItem key={field.id}>
+                  <Controller
+                    control={control}
+                    name={`queryParams.${i}.active`}
+                    render={({ field }) => (
+                      <Checkbox
+                        id={`queryParams.${i}.active`}
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
                       />
-                    ) : (
-                      <InlineInput asChild>
-                        <label
-                          className="flex items-center cursor-pointer gap-1"
-                          htmlFor={`queryParams.${i}.active`}
-                          title={
-                            requiredFields[i] ? "Required field" : undefined
-                          }
-                        >
-                          {field.value}
-                          {requiredFields[i] && <sup>&nbsp;*</sup>}
-                        </label>
-                      </InlineInput>
-                    )
-                  }
-                  name={`queryParams.${i}.name`}
-                />
-              </div>
-              <div className="flex justify-between items-center">
-                <Controller
-                  control={control}
-                  render={({ field }) => {
-                    const hasEnum =
-                      currentParam?.enum && currentParam.enum.length > 0;
-
-                    if (!hasEnum) {
-                      return (
-                        <Input
-                          {...field}
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    render={({ field }) =>
+                      !requiredFields[i] ? (
+                        <Autocomplete
+                          placeholder="Name"
+                          value={field.value}
+                          options={schemaQueryParams.map((param) => param.name)}
                           onChange={(e) => {
-                            field.onChange(e.target.value);
-                            if (e.target.value.length > 0) {
-                              form.setValue(`queryParams.${i}.active`, true);
-                            }
+                            field.onChange(e);
                           }}
-                          placeholder="Enter value"
-                          className="w-full border-0 shadow-none text-xs font-mono"
+                          className="border-0 p-0 m-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         />
-                      );
+                      ) : (
+                        <InlineInput asChild>
+                          <label
+                            className="flex items-center cursor-pointer gap-1"
+                            htmlFor={`queryParams.${i}.active`}
+                            title={
+                              requiredFields[i] ? "Required field" : undefined
+                            }
+                          >
+                            {field.value}
+                            {requiredFields[i] && <sup>&nbsp;*</sup>}
+                          </label>
+                        </InlineInput>
+                      )
                     }
+                    name={`queryParams.${i}.name`}
+                  />
+                  <div className="flex justify-between items-center">
+                    <Controller
+                      control={control}
+                      render={({ field }) => {
+                        const hasEnum =
+                          currentParam?.enum && currentParam.enum.length > 0;
 
-                    return (
-                      <Autocomplete
-                        value={field.value}
-                        options={currentParam.enum ?? []}
-                        onChange={(e) => {
-                          field.onChange(e);
-                          form.setValue(`queryParams.${i}.active`, true);
-                        }}
-                        className="font-mono text-xs border-0 ring-1 ring-ring"
-                      />
-                    );
-                  }}
-                  name={`queryParams.${i}.value`}
-                />
-              </div>
-            </ParamsGrid>
-          );
-        })}
-      </div>
-    </Card>
+                        if (!hasEnum) {
+                          return (
+                            <Input
+                              {...field}
+                              onChange={(e) => {
+                                field.onChange(e.target.value);
+                                if (e.target.value.length > 0) {
+                                  setValue(`queryParams.${i}.active`, true);
+                                }
+                              }}
+                              placeholder="Value"
+                              aria-label="Query parameter value"
+                              className="w-full border-0 p-0 m-0 shadow-none focus-visible:ring-0 text-xs font-mono"
+                            />
+                          );
+                        }
+
+                        return (
+                          <Autocomplete
+                            value={field.value}
+                            options={currentParam.enum ?? []}
+                            onChange={(e) => {
+                              field.onChange(e);
+                              setValue(`queryParams.${i}.active`, true);
+                            }}
+                            className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
+                          />
+                        );
+                      }}
+                      name={`queryParams.${i}.value`}
+                    />
+                    <Button
+                      size="icon-xs"
+                      variant="ghost"
+                      className="text-muted-foreground opacity-0 group-hover:brightness-95 group-hover:opacity-100"
+                      onClick={() => remove(i)}
+                      type="button"
+                    >
+                      <XIcon size={16} />
+                    </Button>
+                  </div>
+                </ParamsGridItem>
+              );
+            })}
+          </ParamsGrid>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
   );
 };

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

@@ -0,0 +1,51 @@
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "zudoku/ui/Dialog.js";
+
+const RequestLoginDialog = ({
+  open,
+  setOpen,
+  onSignUp,
+  onLogin,
+}: {
+  open: boolean;
+  onSignUp?: () => void;
+  onLogin?: () => void;
+  setOpen: (open: boolean) => void;
+}) => {
+  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>
+        <DialogFooter className="flex gap-2 sm:justify-between">
+          <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+            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/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={p.name}>
+        {p.name}={encodeURIComponent(p.value).replaceAll("%20", "+")}
+        {i < arr.length - 1 && "&"}
+        <wbr />
+      </Fragment>
+    ));
+
+  return (
+    <>
+      {urlQueryParams.length > 0 ? `?` : ""}
+      {urlQueryParams}
+    </>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { useZudoku } from "../../../../components/context/ZudokuContext.js";
+import { highlight } from "../../../../shiki.js";
+import invariant from "../../../../util/invariant.js";
+
+export const Highlight = ({
+  code,
+  language,
+  children,
+}:
+  | { code?: string; children?: never; language?: string }
+  | { code?: never; children: string; language: string }) => {
+  const { syntaxHighlighting } = useZudoku().options;
+
+  invariant(syntaxHighlighting?.highlighter, "Highlighter not found");
+
+  const highlightedCode = highlight(
+    syntaxHighlighting.highlighter,
+    code ?? children ?? "",
+    language,
+    syntaxHighlighting.themes,
+  );
+
+  return highlightedCode;
+};
+
+Highlight.displayName = "Highlight";