zudoku 0.0.0-ff3bc72 → 0.0.0-zuplo-api-keys.95df9e9

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

@@ -5,7 +5,7 @@ import {
   DialogContent,
   DialogTitle,
   DialogTrigger,
-} from "../../../components/Dialog.js";
+} from "zudoku/ui/Dialog.js";
 import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
 export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;
@@ -39,15 +39,18 @@ 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 bg-primary/80 hover:bg-primary transition text-primary-foreground text-xs">
+          <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-auto p-0"
+        className="max-w-screen-xl w-full h-5/6 overflow-hidden p-0"
         aria-describedby={undefined}
       >
         <VisuallyHidden>

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

@@ -1,19 +1,16 @@
-import { EraserIcon } from "lucide-react";
 import {
-  Control,
+  type Control,
   Controller,
   useFieldArray,
   useFormContext,
 } from "react-hook-form";
-import { Button } from "../../../ui/Button.js";
+import { Card } from "zudoku/ui/Card.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { Autocomplete } from "../../../components/Autocomplete.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";
+import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
+import { type PlaygroundForm, type QueryParam } from "./Playground.js";
 
 export const QueryParams = ({
   control,
@@ -22,7 +19,7 @@ export const QueryParams = ({
   control: Control<PlaygroundForm>;
   queryParams: QueryParam[];
 }) => {
-  const { fields } = useFieldArray<PlaygroundForm>({
+  const { fields } = useFieldArray<PlaygroundForm, "queryParams">({
     control,
     name: "queryParams",
   });
@@ -30,101 +27,102 @@ export const QueryParams = ({
 
   const requiredFields = queryParams.map((param) => Boolean(param.isRequired));
 
-  const selectedIdentity = form.watch("identity");
-  const hasSelectedIdentity = selectedIdentity !== NO_IDENTITY;
-
   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">
+    <Card className="rounded-lg">
+      <div className="w-full ">
+        <ParamsGrid>
+          {fields.map((field, i) => {
+            const currentParam = queryParams.find(
+              (param) => param.name === form.watch(`queryParams.${i}.name`),
+            );
+            return (
+              <ParamsGridItem key={field.id}>
+                <div key={field.id} className="flex items-center gap-2">
                   <Controller
                     control={control}
                     name={`queryParams.${i}.active`}
                     render={({ field }) => (
-                      <input
-                        type="checkbox"
+                      <Checkbox
                         id={`queryParams.${i}.active`}
+                        className="me-2"
                         checked={field.value}
-                        onChange={field.onChange}
+                        onCheckedChange={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>&nbsp;*</sup>}
-                        </label>
-                      </InlineInput>
-                    )}
+                    render={({ field }) =>
+                      !requiredFields[i] ? (
+                        <Autocomplete
+                          value={field.value}
+                          options={queryParams.map((param) => param.name)}
+                          onChange={(e) => {
+                            field.onChange(e);
+                          }}
+                          className="border-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`}
                   />
-                </td>
-                <td>
-                  <div className="flex justify-between items-center">
-                    <Controller
-                      control={control}
-                      render={({ field }) => (
-                        <Input
-                          {...field}
+                </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}
+                            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 focus-visible:ring-0 text-xs font-mono"
+                          />
+                        );
+                      }
+
+                      return (
+                        <Autocomplete
+                          value={field.value}
+                          options={currentParam.enum ?? []}
                           onChange={(e) => {
-                            field.onChange(e.target.value);
-                            if (e.target.value.length > 0) {
-                              form.setValue(`queryParams.${i}.active`, true);
-                            }
+                            field.onChange(e);
+                            form.setValue(`queryParams.${i}.active`, true);
                           }}
-                          placeholder="Enter value"
-                          className="w-full border-0 shadow-none text-xs font-mono"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent 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>
+                      );
+                    }}
+                    name={`queryParams.${i}.value`}
+                  />
+                </div>
+              </ParamsGridItem>
+            );
+          })}
+        </ParamsGrid>
+      </div>
+    </Card>
   );
 };

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/SubmitButton.tsx

@@ -0,0 +1,75 @@
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
+import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import { NO_IDENTITY } from "./Playground.js";
+
+const SubmitButton = ({
+  identities,
+  formRef,
+  disabled,
+}: {
+  identities: ApiIdentity[];
+  formRef?: React.RefObject<HTMLFormElement | null>;
+  disabled?: boolean;
+}) => {
+  const { setValue } = useFormContext();
+  const [dropdownValue, setDropdownValue] = useState<string | undefined>();
+  if (identities.length === 0) {
+    return <Button disabled={disabled}>Send</Button>;
+  }
+  return (
+    <div className="flex">
+      <Button
+        className="rounded-r-none inset-shadow-xs"
+        disabled={disabled}
+        onClick={() => formRef?.current?.requestSubmit()}
+      >
+        Send
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            disabled={disabled}
+            className="rounded-l-none border-l border-border/40 inset-shadow-xs w-6"
+            size="icon"
+          >
+            <ChevronDownIcon className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <RadioGroup value={dropdownValue}>
+          <DropdownMenuContent className="w-56" align="end" alignOffset={-150}>
+            {[{ id: NO_IDENTITY, label: "None" }, ...identities].map(
+              (identity) => (
+                <DropdownMenuItem
+                  key={identity.id}
+                  onClick={() => {
+                    setDropdownValue(identity.id);
+                    setValue("identity", identity.id);
+                    formRef?.current?.requestSubmit();
+                  }}
+                  onMouseEnter={() => setDropdownValue(identity.id)}
+                  onMouseLeave={() => setDropdownValue(undefined)}
+                >
+                  <RadioGroupItem value={identity.id} className="me-2" />
+
+                  {identity.label}
+                </DropdownMenuItem>
+              ),
+            )}
+          </DropdownMenuContent>
+        </RadioGroup>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export default SubmitButton;

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/result-panel/RequestTab.tsx

@@ -0,0 +1,73 @@
+import { ChevronRightIcon } from "lucide-react";
+import { Fragment } from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../../../ui/Collapsible.js";
+import { cn } from "../../../../util/cn.js";
+import { methodForColor } from "../../util/methodToColor.js";
+
+export const RequestTab = ({
+  method,
+  url,
+  headers,
+  body,
+}: {
+  method: string;
+  url: string;
+  headers: Array<[string, string]>;
+  body?: string;
+}) => {
+  return (
+    <div className="flex flex-col gap-2 font-mono text-xs">
+      <div className="gap-2 p-2 bg-muted rounded-md">
+        <span className={cn(methodForColor(method), "font-semibold")}>
+          {method}
+        </span>
+        &nbsp;
+        <span className="break-all">{url}</span>&nbsp;
+        <span className="text-muted-foreground">HTTP/1.1</span>
+      </div>
+      <div className="mx-1.5 flex flex-col gap-3">
+        <Collapsible defaultOpen>
+          <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
+            <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
+            <span className="font-semibold">Headers</span>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2">
+              {headers.map(([key, value]) => (
+                <Fragment key={key}>
+                  <div className="text-primary">{key}</div>
+                  <div className="break-all">{value}</div>
+                </Fragment>
+              ))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+
+        <Collapsible defaultOpen>
+          <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
+            <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
+            <span className="font-semibold">Body</span>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="ps-0 pt-2">
+              <div
+                className={cn(
+                  "whitespace-pre-wrap break-all bg-muted p-2 rounded-md",
+                  !body && "text-muted-foreground",
+                )}
+              >
+                {body ?? "Empty body"}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </div>
+  );
+};
+
+export default RequestTab;