zudoku 0.0.0-fd8f8ad → 0.0.0-feda542

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,10 +1,64 @@
+import { AuthState } from "../../authentication/state.js";
+import { ZudokuContext } from "../../core/ZudokuContext.js";
+import type { SchemaImports } from "../../oas/graphql/index.js";
+import { OperationListItemResult } from "./OperationList.js";
+
+type DynamicInput = () => Promise<unknown>;
+
 type OasSource =
   | { type: "url"; input: string }
-  | { type: "file"; input: any }
+  | { type: "file"; input: { [version: string]: DynamicInput } }
+  | { type: "raw"; input: string };
+
+export type ContextOasSource =
+  | { type: "url"; input: string }
+  | { type: "file"; input: DynamicInput }
   | { type: "raw"; input: string };
 
-export type OasPluginConfig = {
+type Example = {
+  name: string;
+  description?: string | null;
+  externalValue?: string | null;
+  value?: any | null;
+  summary?: string | null;
+};
+
+type Content = {
+  mediaType: string;
+  schema?: any | null;
+  encoding?: Array<{
+    name: string;
+  }> | null;
+  examples?: Array<Example> | null;
+};
+
+export type transformExamples = (options: {
+  content: Content[];
+  context: ZudokuContext;
+  auth: AuthState;
+  operation: OperationListItemResult;
+  type: "request" | "response";
+}) => Content[];
+
+type BaseOasConfig = {
   server?: string;
   navigationId?: string;
   skipPreload?: boolean;
-} & OasSource;
+  tagPages?: Array<string>;
+  schemaImports?: SchemaImports;
+  options?: {
+    examplesLanguage?: string;
+    disablePlayground?: boolean;
+    showVersionSelect?: "always" | "if-available" | "hide";
+    expandAllTags?: boolean;
+    transformExamples?: transformExamples;
+  };
+};
+
+export type OasPluginConfig = BaseOasConfig & OasSource;
+
+export type OasPluginContext = BaseOasConfig &
+  ContextOasSource & {
+    version?: string;
+    versions: Record<string, string>;
+  };

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

@@ -0,0 +1,52 @@
+import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+import type { Content, Example } from "../SidecarExamples.js";
+
+const ExamplesDropdown = ({
+  examples,
+  onSelect,
+}: {
+  examples: Content;
+  onSelect: (example: Example, mediaType: string) => void;
+}) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Use Example</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="max-w-72">
+        {examples.map((mediaTypeObject) => (
+          <div key={mediaTypeObject.mediaType}>
+            <DropdownMenuLabel>{mediaTypeObject.mediaType}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              {mediaTypeObject.examples?.map((example) => (
+                <DropdownMenuItem
+                  key={example.name}
+                  onSelect={() => onSelect(example, mediaTypeObject.mediaType)}
+                >
+                  <span
+                    className="line-clamp-1"
+                    title={example.summary ?? example.name}
+                  >
+                    {example.summary ?? example.name}
+                  </span>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ExamplesDropdown;

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

@@ -1,68 +1,197 @@
 import { XIcon } from "lucide-react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { useCallback, useEffect, useRef } from "react";
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  useFormContext,
+} from "react-hook-form";
+import { Card } from "zudoku/ui/Card.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
-import { type PlaygroundForm } from "./Playground.js";
+import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
+import { Header, type PlaygroundForm } from "./Playground.js";
+
+const headerOptions = Object.freeze([
+  "Accept",
+  "Accept-Encoding",
+  "Accept-Language",
+  "Authorization",
+  "Cache-Control",
+  "Connection",
+  "Content-Disposition",
+  "Content-Encoding",
+  "Content-Language",
+  "Content-Length",
+  "Content-Range",
+  "Content-Security-Policy",
+  "Content-Type",
+  "Cookie",
+  "Date",
+  "ETag",
+  "Expires",
+  "Host",
+  "If-Modified-Since",
+  "Location",
+  "Origin",
+  "Pragma",
+  "Referer",
+  "Set-Cookie",
+  "User-Agent",
+  "X-Requested-With",
+]);
 
 export const Headers = ({
   control,
-  register,
+  headers: schemaHeaders,
 }: {
-  register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
+  headers: Header[];
 }) => {
-  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+  const { fields, append, remove } = useFieldArray<PlaygroundForm, "headers">({
     control,
     name: "headers",
   });
+  const { setValue, watch } = useFormContext<PlaygroundForm>();
+  const valueRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const nameRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const watchedHeaders = watch("headers");
+
+  const addNewHeader = useCallback(() => {
+    append({ name: "", value: "", active: false });
+  }, [append]);
+
+  useEffect(() => {
+    if (watchedHeaders.length === 0) {
+      addNewHeader();
+    }
+  }, [watchedHeaders, addNewHeader]);
+
+  const handleHeaderEnter = (index: number) => {
+    valueRefs.current[index]?.focus();
+  };
+
+  const handleValueEnter = (index: number) => {
+    addNewHeader();
+    requestAnimationFrame(() => nameRefs.current[index + 1]?.focus());
+  };
+
+  const missingHeaders = schemaHeaders
+    .filter((h) => !watchedHeaders.some((f) => f.name === h.name))
+    .map(({ name }) => name);
 
   return (
     <div className="flex flex-col gap-2">
-      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
-        <tbody>
-          {fields.map((header, i) => (
-            <tr
-              key={header.id}
-              className="group has-[:focus]:bg-muted/50 hover:bg-muted/50"
-            >
-              <td className="flex gap-2 items-center">
-                <Input
-                  {...register(`headers.${i}.name`)}
-                  placeholder="Name"
-                  className="border-0 shadow-none text-xs font-mono"
-                  autoComplete="off"
-                />
-              </td>
-              <td>
+      <Card className="overflow-hidden">
+        <ParamsGrid>
+          {fields.map((field, i) => {
+            const currentHeader = schemaHeaders.find(
+              (h) => h.name === watch(`headers.${i}.name`),
+            );
+            return (
+              <ParamsGridItem key={field.id}>
+                <div className="flex items-center gap-2 ">
+                  <Controller
+                    control={control}
+                    name={`headers.${i}.active`}
+                    render={({ field }) => (
+                      <Checkbox
+                        id={`headers.${i}.active`}
+                        checked={field.value}
+                        onCheckedChange={(checked) => {
+                          field.onChange(checked);
+                        }}
+                      />
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name={`headers.${i}.name`}
+                    render={({ field }) => (
+                      <Autocomplete
+                        {...field}
+                        placeholder="Name"
+                        className="border-0 shadow-none bg-transparent text-xs font-mono"
+                        options={[...missingHeaders, ...headerOptions]}
+                        onEnterPress={() => handleHeaderEnter(i)}
+                        onChange={(e) => {
+                          field.onChange(e);
+                          setValue(`headers.${i}.active`, true);
+                        }}
+                        ref={(el) => {
+                          nameRefs.current[i] = el;
+                        }}
+                      />
+                    )}
+                  />
+                </div>
                 <div className="flex items-center gap-2">
-                  <Input
-                    placeholder={"Value"}
-                    className="border-0 shadow-none text-xs font-mono"
-                    {...register(`headers.${i}.value`)}
-                    autoComplete="off"
+                  <Controller
+                    control={control}
+                    name={`headers.${i}.value`}
+                    render={({ field }) => {
+                      const hasEnum =
+                        currentHeader?.enum && currentHeader.enum.length > 0;
+
+                      if (!hasEnum) {
+                        return (
+                          <Input
+                            placeholder="Value"
+                            className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                            {...field}
+                            ref={(el) => {
+                              valueRefs.current[i] = el;
+                            }}
+                            onKeyDown={(e) => {
+                              if (
+                                e.key === "Enter" &&
+                                e.currentTarget.value.trim()
+                              ) {
+                                handleValueEnter(i);
+                              }
+                            }}
+                            autoComplete="off"
+                          />
+                        );
+                      }
+
+                      return (
+                        <Autocomplete
+                          shouldFilter={false}
+                          value={field.value}
+                          options={currentHeader.enum ?? []}
+                          onChange={(e) => {
+                            field.onChange(e);
+                            setValue(`headers.${i}.active`, true);
+                          }}
+                          className="font-mono text-xs border-0"
+                        />
+                      );
+                    }}
                   />
                   <Button
                     size="icon"
                     variant="ghost"
-                    className="text-muted-foreground opacity-0 group-hover:opacity-100"
-                    onClick={() => {
-                      remove(i);
-                    }}
+                    className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
+                    onClick={() => remove(i)}
                     type="button"
                   >
                     <XIcon size={16} />
                   </Button>
                 </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+              </ParamsGridItem>
+            );
+          })}
+        </ParamsGrid>
+      </Card>
       <div className="text-end">
         <Button
           className=""
-          onClick={() => append({ name: "", value: "" })}
+          onClick={addNewHeader}
           type="button"
+          variant="secondary"
         >
           Add header
         </Button>

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

@@ -0,0 +1,74 @@
+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";
+import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import IdentitySelector from "./IdentitySelector.js";
+
+const IdentityDialog = ({
+  onSubmit,
+  identities,
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: ({
+    rememberedIdentity,
+    identity,
+  }: {
+    rememberedIdentity: boolean;
+    identity?: string;
+  }) => void;
+  identities: ApiIdentity[];
+}) => {
+  const [identity, setIdentity] = useState<string | undefined>(undefined);
+  const [rememberedIdentity, setRememberedIdentity] = useState<boolean>(false);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogTitle>Select an auth identity</DialogTitle>
+        <DialogDescription>
+          Please select an identity for this request.
+        </DialogDescription>
+        <div className="max-h-80 overflow-auto">
+          <IdentitySelector
+            identities={identities}
+            setValue={setIdentity}
+            value={identity}
+          />
+        </div>
+        <DialogFooter className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="remember"
+              checked={rememberedIdentity}
+              onCheckedChange={(checked) =>
+                setRememberedIdentity(
+                  checked === "indeterminate" ? false : !!checked,
+                )
+              }
+            />
+            <Label htmlFor="remember">Remember my choice</Label>
+          </div>
+
+          <Button
+            onClick={() => onSubmit({ identity: identity, rememberedIdentity })}
+          >
+            Send
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { IdentityDialog };

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

@@ -0,0 +1,54 @@
+import { Card } from "zudoku/ui/Card.js";
+import { Label } from "zudoku/ui/Label.js";
+import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
+import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import { NO_IDENTITY } from "./Playground.js";
+
+const IdentitySelector = ({
+  identities,
+  setValue,
+  value,
+}: {
+  identities?: ApiIdentity[];
+  setValue: (value: string) => void;
+  value?: string;
+}) => {
+  return (
+    <Card className="w-full overflow-hidden">
+      <RadioGroup
+        onValueChange={(value) => setValue(value)}
+        value={value}
+        defaultValue={NO_IDENTITY}
+        className="gap-0"
+        disabled={identities?.length === 0}
+      >
+        <Label
+          className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
+          htmlFor="none"
+        >
+          <RadioGroupItem value={NO_IDENTITY} id="none">
+            None
+          </RadioGroupItem>
+          <Label htmlFor="none" className="ml-2">
+            None
+          </Label>
+        </Label>
+        {identities?.map((identity) => (
+          <Label
+            key={identity.id}
+            className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
+          >
+            <RadioGroupItem value={identity.id} id={identity.id}>
+              {identity.label}
+            </RadioGroupItem>
+            <Label htmlFor={identity.id} className="ml-2">
+              {identity.label}
+            </Label>
+          </Label>
+        ))}
+      </RadioGroup>
+    </Card>
+  );
+};
+
+export default IdentitySelector;

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

@@ -0,0 +1,13 @@
+import createVariantComponent from "../../../util/createVariantComponent.js";
+
+const ParamsGrid = createVariantComponent(
+  "div",
+  "grid grid-cols-[2fr_3fr] gap-2 items-center",
+);
+
+export const ParamsGridItem = createVariantComponent(
+  "div",
+  "group hover:bg-accent px-3 grid col-span-full grid-cols-subgrid",
+);
+
+export default ParamsGrid;

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

@@ -1,87 +1,62 @@
-import { EraserIcon } from "lucide-react";
-import { Control, Controller, useFieldArray } from "react-hook-form";
-import { Button } from "../../../ui/Button.js";
+import { type Control, Controller, useFieldArray } from "react-hook-form";
+import { Card } from "zudoku/ui/Card.js";
 import { Input } from "../../../ui/Input.js";
-import { cn } from "../../../util/cn.js";
 import { ColorizedParam } from "../ColorizedParam.js";
+import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
 import type { PlaygroundForm } from "./Playground.js";
 
 export const PathParams = ({
   control,
+  url,
 }: {
   control: Control<PlaygroundForm>;
+  url: string;
 }) => {
-  const { fields } = useFieldArray<PlaygroundForm>({
+  const { fields } = useFieldArray<PlaygroundForm, "pathParams">({
     control,
     name: "pathParams",
   });
 
+  const sortedFields = [...fields].sort(
+    (a, b) => url.indexOf(`{${a.name}}`) - url.indexOf(`{${b.name}}`),
+  );
+
   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>
+    <Card className="rounded-lg">
+      <ParamsGrid>
+        {sortedFields.map((field, i) => (
+          <ParamsGridItem key={field.id}>
+            <Controller
+              control={control}
+              name={`pathParams.${i}.name`}
+              render={() => (
+                <div className="flex items-center">
+                  <ColorizedParam
+                    slug={field.name}
+                    name={field.name}
+                    className="font-mono text-xs px-2"
+                  />
+                </div>
+              )}
+            />
+
+            <div className="flex justify-between items-center">
               <Controller
                 control={control}
                 name={`pathParams.${i}.value`}
                 render={({ field }) => (
-                  <div>
-                    <ColorizedParam
-                      slug={part.name}
-                      name={part.name}
-                      backgroundOpacity="25%"
-                      borderOpacity={field.value ? "100%" : "0"}
-                      className={cn(
-                        "font-mono text-xs m-2",
-                        !field.value && "opacity-60",
-                      )}
-                    />
-                    *
-                  </div>
+                  <Input
+                    {...field}
+                    required
+                    placeholder="Enter value"
+                    className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                  />
                 )}
               />
-            </td>
-            <td>
-              <div className="flex justify-between items-center">
-                <Controller
-                  control={control}
-                  name={`pathParams.${i}.value`}
-                  render={({ field }) => (
-                    <Input
-                      {...field}
-                      placeholder="Enter value"
-                      className="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>
+            </div>
+          </ParamsGridItem>
         ))}
-      </tbody>
-    </table>
+      </ParamsGrid>
+    </Card>
   );
 };