@lukoweb/apitogo 0.2.22 → 0.2.24

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

@@ -1,60 +1,60 @@
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@lukoweb/apitogo/ui/DropdownMenu.js";
-import { PlusCircleIcon } from "lucide-react";
-import type { ExampleItem, MediaTypeObject } from "../graphql/graphql.js";
-
-const ExamplesDropdown = ({
-  examples,
-  onSelect,
-}: {
-  examples: MediaTypeObject[];
-  onSelect: (example: ExampleItem, mediaType: string) => void;
-}) => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="hover:bg-accent hover:brightness-95 gap-2"
-        >
-          Use Example
-          <PlusCircleIcon size={14} />
-        </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;
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@lukoweb/apitogo/ui/DropdownMenu.js";
+import { PlusCircleIcon } from "lucide-react";
+import type { ExampleItem, MediaTypeObject } from "../graphql/graphql.js";
+
+const ExamplesDropdown = ({
+  examples,
+  onSelect,
+}: {
+  examples: MediaTypeObject[];
+  onSelect: (example: ExampleItem, mediaType: string) => void;
+}) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="hover:bg-accent hover:brightness-95 gap-2"
+        >
+          Use Example
+          <PlusCircleIcon size={14} />
+        </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,194 +1,194 @@
-import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox.js";
-import {
-  Collapsible,
-  CollapsibleContent,
-} from "@lukoweb/apitogo/ui/Collapsible.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@lukoweb/apitogo/ui/Tooltip.js";
-import { CircleAlertIcon, LockIcon, TableOfContentsIcon } from "lucide-react";
-import { type Control, useFormContext } from "react-hook-form";
-import { Autocomplete } from "../../../components/Autocomplete.js";
-import { cn } from "../../../util/cn.js";
-import {
-  CollapsibleHeader,
-  CollapsibleHeaderTrigger,
-} from "./CollapsibleHeader.js";
-import ParamsGrid, {
-  ParamsGridInput,
-  ParamsGridItem,
-  ParamsGridRemoveButton,
-} from "./ParamsGrid.js";
-import type { Header, PlaygroundForm } from "./Playground.js";
-import { useKeyValueFieldManager } from "./request-panel/useKeyValueFieldManager.js";
-
-// prettier-ignore
-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,
-  schemaHeaders,
-  lockedHeaders,
-}: {
-  control: Control<PlaygroundForm>;
-  schemaHeaders: Header[];
-  lockedHeaders?: string[];
-}) => {
-  const { watch, formState } = useFormContext<PlaygroundForm>();
-  const watchedHeaders = watch("headers");
-
-  const manager = useKeyValueFieldManager<PlaygroundForm, "headers">({
-    control,
-    name: "headers",
-    defaultValue: { name: "", value: "", active: false },
-  });
-
-  const missingHeaders = schemaHeaders
-    .filter((h) => !watchedHeaders.some((f) => f.name === h.name))
-    .map(({ name }) => name);
-
-  const hiddenHeadersIndex = manager.fields.flatMap((f, index) => {
-    const keep = !lockedHeaders
-      ?.map((h) => h.toLowerCase())
-      .includes(f.name.toLowerCase());
-
-    return keep ? [] : [index];
-  });
-
-  const lockedHeaderFields =
-    lockedHeaders?.map((h) => ({
-      name: h,
-      id: `locked-${h}`,
-      value: "••••••••••",
-      active: true,
-      locked: true,
-    })) ?? [];
-
-  return (
-    <Collapsible defaultOpen>
-      <CollapsibleHeaderTrigger>
-        <TableOfContentsIcon size={14} />
-        <CollapsibleHeader>Headers</CollapsibleHeader>
-      </CollapsibleHeaderTrigger>
-      <CollapsibleContent className="CollapsibleContent">
-        <div className="flex flex-col gap-2">
-          <div className="overflow-hidden">
-            <ParamsGrid>
-              {lockedHeaderFields.map((field) => (
-                <Tooltip key={field.id}>
-                  <TooltipTrigger asChild>
-                    <ParamsGridItem
-                      key={field.id}
-                      className="opacity-50 cursor-not-allowed font-mono text-xs min-h-10"
-                    >
-                      <LockIcon size={16} />
-                      <ParamsGridInput value={field.name} disabled />
-                      <div>{field.value}</div>
-                    </ParamsGridItem>
-                  </TooltipTrigger>
-                  <TooltipContent alignOffset={10} side="bottom" align="start">
-                    <p>This header is set by the selected authentication.</p>
-                  </TooltipContent>
-                </Tooltip>
-              ))}
-              {manager.fields.map((field, i) => {
-                const currentSchemaHeader = schemaHeaders.find(
-                  (h) => h.name === watchedHeaders.at(i)?.name,
-                );
-                const hasEnum =
-                  currentSchemaHeader?.enum &&
-                  currentSchemaHeader.enum.length > 0;
-                const isHidden = hiddenHeadersIndex.includes(i);
-                const nameInputProps = manager.getNameInputProps(i);
-                const valueInputProps = manager.getValueInputProps(i);
-
-                return (
-                  <ParamsGridItem
-                    key={field.id}
-                    className={cn(
-                      isHidden && "text-amber-600",
-                      isHidden &&
-                        !formState.dirtyFields.headers?.[i]?.value &&
-                        "hidden",
-                    )}
-                  >
-                    <Checkbox
-                      className={cn(isHidden && "hidden")}
-                      {...manager.getCheckboxProps(i)}
-                    />
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <CircleAlertIcon
-                          className={cn(
-                            "text-amber-600",
-                            !isHidden && "hidden",
-                          )}
-                          size={16}
-                        />
-                      </TooltipTrigger>
-                      <TooltipContent
-                        alignOffset={10}
-                        side="bottom"
-                        align="start"
-                      >
-                        <p>
-                          This header will be overwritten by the selected
-                          authentication.
-                        </p>
-                      </TooltipContent>
-                    </Tooltip>
-                    <ParamsGridInput asChild>
-                      <Autocomplete
-                        {...nameInputProps}
-                        value={String(manager.getValue(i, "name"))}
-                        placeholder="Name"
-                        options={[...missingHeaders, ...headerOptions]}
-                        onChange={(v) => manager.setValue(i, "name", v)}
-                        onSelect={(v) =>
-                          manager.setValue(i, "name", v, { focus: "next" })
-                        }
-                      />
-                    </ParamsGridInput>
-                    <div className="flex items-center gap-2">
-                      {!hasEnum ? (
-                        <ParamsGridInput
-                          placeholder="Value"
-                          autoComplete="off"
-                          {...valueInputProps}
-                        />
-                      ) : (
-                        <ParamsGridInput asChild>
-                          <Autocomplete
-                            {...valueInputProps}
-                            value={String(manager.getValue(i, "value"))}
-                            shouldFilter={false}
-                            options={currentSchemaHeader.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>
-          </div>
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
+import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+} from "@lukoweb/apitogo/ui/Collapsible.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@lukoweb/apitogo/ui/Tooltip.js";
+import { CircleAlertIcon, LockIcon, TableOfContentsIcon } from "lucide-react";
+import { type Control, useFormContext } from "react-hook-form";
+import { Autocomplete } from "../../../components/Autocomplete.js";
+import { cn } from "../../../util/cn.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "./CollapsibleHeader.js";
+import ParamsGrid, {
+  ParamsGridInput,
+  ParamsGridItem,
+  ParamsGridRemoveButton,
+} from "./ParamsGrid.js";
+import type { Header, PlaygroundForm } from "./Playground.js";
+import { useKeyValueFieldManager } from "./request-panel/useKeyValueFieldManager.js";
+
+// prettier-ignore
+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,
+  schemaHeaders,
+  lockedHeaders,
+}: {
+  control: Control<PlaygroundForm>;
+  schemaHeaders: Header[];
+  lockedHeaders?: string[];
+}) => {
+  const { watch, formState } = useFormContext<PlaygroundForm>();
+  const watchedHeaders = watch("headers");
+
+  const manager = useKeyValueFieldManager<PlaygroundForm, "headers">({
+    control,
+    name: "headers",
+    defaultValue: { name: "", value: "", active: false },
+  });
+
+  const missingHeaders = schemaHeaders
+    .filter((h) => !watchedHeaders.some((f) => f.name === h.name))
+    .map(({ name }) => name);
+
+  const hiddenHeadersIndex = manager.fields.flatMap((f, index) => {
+    const keep = !lockedHeaders
+      ?.map((h) => h.toLowerCase())
+      .includes(f.name.toLowerCase());
+
+    return keep ? [] : [index];
+  });
+
+  const lockedHeaderFields =
+    lockedHeaders?.map((h) => ({
+      name: h,
+      id: `locked-${h}`,
+      value: "••••••••••",
+      active: true,
+      locked: true,
+    })) ?? [];
+
+  return (
+    <Collapsible defaultOpen>
+      <CollapsibleHeaderTrigger>
+        <TableOfContentsIcon size={14} />
+        <CollapsibleHeader>Headers</CollapsibleHeader>
+      </CollapsibleHeaderTrigger>
+      <CollapsibleContent className="CollapsibleContent">
+        <div className="flex flex-col gap-2">
+          <div className="overflow-hidden">
+            <ParamsGrid>
+              {lockedHeaderFields.map((field) => (
+                <Tooltip key={field.id}>
+                  <TooltipTrigger asChild>
+                    <ParamsGridItem
+                      key={field.id}
+                      className="opacity-50 cursor-not-allowed font-mono text-xs min-h-10"
+                    >
+                      <LockIcon size={16} />
+                      <ParamsGridInput value={field.name} disabled />
+                      <div>{field.value}</div>
+                    </ParamsGridItem>
+                  </TooltipTrigger>
+                  <TooltipContent alignOffset={10} side="bottom" align="start">
+                    <p>This header is set by the selected authentication.</p>
+                  </TooltipContent>
+                </Tooltip>
+              ))}
+              {manager.fields.map((field, i) => {
+                const currentSchemaHeader = schemaHeaders.find(
+                  (h) => h.name === watchedHeaders.at(i)?.name,
+                );
+                const hasEnum =
+                  currentSchemaHeader?.enum &&
+                  currentSchemaHeader.enum.length > 0;
+                const isHidden = hiddenHeadersIndex.includes(i);
+                const nameInputProps = manager.getNameInputProps(i);
+                const valueInputProps = manager.getValueInputProps(i);
+
+                return (
+                  <ParamsGridItem
+                    key={field.id}
+                    className={cn(
+                      isHidden && "text-amber-600",
+                      isHidden &&
+                        !formState.dirtyFields.headers?.[i]?.value &&
+                        "hidden",
+                    )}
+                  >
+                    <Checkbox
+                      className={cn(isHidden && "hidden")}
+                      {...manager.getCheckboxProps(i)}
+                    />
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <CircleAlertIcon
+                          className={cn(
+                            "text-amber-600",
+                            !isHidden && "hidden",
+                          )}
+                          size={16}
+                        />
+                      </TooltipTrigger>
+                      <TooltipContent
+                        alignOffset={10}
+                        side="bottom"
+                        align="start"
+                      >
+                        <p>
+                          This header will be overwritten by the selected
+                          authentication.
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                    <ParamsGridInput asChild>
+                      <Autocomplete
+                        {...nameInputProps}
+                        value={String(manager.getValue(i, "name"))}
+                        placeholder="Name"
+                        options={[...missingHeaders, ...headerOptions]}
+                        onChange={(v) => manager.setValue(i, "name", v)}
+                        onSelect={(v) =>
+                          manager.setValue(i, "name", v, { focus: "next" })
+                        }
+                      />
+                    </ParamsGridInput>
+                    <div className="flex items-center gap-2">
+                      {!hasEnum ? (
+                        <ParamsGridInput
+                          placeholder="Value"
+                          autoComplete="off"
+                          {...valueInputProps}
+                        />
+                      ) : (
+                        <ParamsGridInput asChild>
+                          <Autocomplete
+                            {...valueInputProps}
+                            value={String(manager.getValue(i, "value"))}
+                            shouldFilter={false}
+                            options={currentSchemaHeader.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>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

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

@@ -1,75 +1,75 @@
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import { Card } from "@lukoweb/apitogo/ui/Card.js";
-import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox.js";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} from "@lukoweb/apitogo/ui/Dialog.js";
-import { Label } from "@lukoweb/apitogo/ui/Label.js";
-import { useState } from "react";
-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>
-        <Card className="max-h-80 overflow-auto">
-          <IdentitySelector
-            identities={identities}
-            setValue={setIdentity}
-            value={identity}
-          />
-        </Card>
-        <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 };
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import { Card } from "@lukoweb/apitogo/ui/Card.js";
+import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "@lukoweb/apitogo/ui/Dialog.js";
+import { Label } from "@lukoweb/apitogo/ui/Label.js";
+import { useState } from "react";
+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>
+        <Card className="max-h-80 overflow-auto">
+          <IdentitySelector
+            identities={identities}
+            setValue={setIdentity}
+            value={identity}
+          />
+        </Card>
+        <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 };