@lukoweb/apitogo 0.1.0 → 0.1.2

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

@@ -1,56 +1,56 @@
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { PlayIcon } from "lucide-react";
-import { type PropsWithChildren, useState } from "react";
-import { useAuth } from "@lukoweb/apitogo/hooks";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogTrigger,
-} from "@lukoweb/apitogo/ui/Dialog.js";
-import { Playground, type PlaygroundContentProps } from "./Playground.js";
-
-export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;
-
-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 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 overflow-hidden p-0"
-        aria-describedby={undefined}
-        showCloseButton={true}
-      >
-        <VisuallyHidden>
-          <DialogTitle>Playground</DialogTitle>
-        </VisuallyHidden>
-        {open && (
-          <Playground
-            requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
-            onLogin={() => login()}
-            onSignUp={() => signup()}
-            {...props}
-          />
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export { PlaygroundDialog };
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@lukoweb/apitogo/ui/Dialog.js";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { PlayIcon } from "lucide-react";
+import { type PropsWithChildren, useState } from "react";
+import { Playground, type PlaygroundContentProps } from "./Playground.js";
+
+export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;
+
+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 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 overflow-hidden p-0"
+        aria-describedby={undefined}
+        showCloseButton={true}
+      >
+        <VisuallyHidden>
+          <DialogTitle>Playground</DialogTitle>
+        </VisuallyHidden>
+        {open && (
+          <Playground
+            requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
+            onLogin={() => login()}
+            onSignUp={() => signup()}
+            {...props}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { PlaygroundDialog };

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

@@ -1,148 +1,151 @@
-import { Unlink2Icon } from "lucide-react";
-import { type Control, useFormContext } from "react-hook-form";
-import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox.js";
-import { Collapsible, CollapsibleContent } from "@lukoweb/apitogo/ui/Collapsible.js";
-import { Autocomplete } from "../../../components/Autocomplete.js";
-import { MultiSelect } from "../../../components/MultiSelect.js";
-import {
-  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";
-import { parseArrayParamValue } from "./serializeQueryParams.js";
-
-export const QueryParams = ({
-  control,
-  schemaQueryParams,
-}: {
-  control: Control<PlaygroundForm>;
-  schemaQueryParams: QueryParam[];
-}) => {
-  const { watch } = useFormContext<PlaygroundForm>();
-  const watchedQueryParams = watch("queryParams");
-
-  const manager = useKeyValueFieldManager<PlaygroundForm, "queryParams">({
-    control,
-    name: "queryParams",
-    defaultValue: { name: "", value: "", active: false },
-    shouldSetActive: (item) => {
-      const schemaParam = schemaQueryParams.find((p) => p.name === item.name);
-      if (schemaParam) {
-        const isRequired = schemaParam.isRequired ?? false;
-        const hasValue = Boolean(item.value);
-        return isRequired || hasValue;
-      }
-      return Boolean(item.name || item.value);
-    },
-  });
-
-  const requiredFields = schemaQueryParams.map((param) =>
-    Boolean(param.isRequired),
-  );
-
-  const hasSchemaParams = schemaQueryParams.length > 0;
-
-  return (
-    <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 isArrayEnum = currentParam?.type === "array" && hasEnum;
-            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" })
-                        }
-                      />
-                    </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] && <span>&nbsp;*</span>}
-                    </label>
-                  </ParamsGridInput>
-                )}
-                <div className="flex justify-between items-center">
-                  {isArrayEnum ? (
-                    <ParamsGridInput asChild>
-                      <MultiSelect
-                        options={currentParam.enum ?? []}
-                        value={parseArrayParamValue(
-                          String(manager.getValue(i, "value")),
-                        )}
-                        onChange={(values) => {
-                          manager.setValue(
-                            i,
-                            "value",
-                            values.length > 0 ? JSON.stringify(values) : "",
-                          );
-                        }}
-                      />
-                    </ParamsGridInput>
-                  ) : !hasEnum ? (
-                    <ParamsGridInput
-                      placeholder="Value"
-                      aria-label="Query parameter value"
-                      {...valueInputProps}
-                    />
-                  ) : (
-                    <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>
-  );
-};
+import { Checkbox } from "@lukoweb/apitogo/ui/Checkbox.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+} from "@lukoweb/apitogo/ui/Collapsible.js";
+import { Unlink2Icon } from "lucide-react";
+import { type Control, useFormContext } from "react-hook-form";
+import { Autocomplete } from "../../../components/Autocomplete.js";
+import { MultiSelect } from "../../../components/MultiSelect.js";
+import {
+  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";
+import { parseArrayParamValue } from "./serializeQueryParams.js";
+
+export const QueryParams = ({
+  control,
+  schemaQueryParams,
+}: {
+  control: Control<PlaygroundForm>;
+  schemaQueryParams: QueryParam[];
+}) => {
+  const { watch } = useFormContext<PlaygroundForm>();
+  const watchedQueryParams = watch("queryParams");
+
+  const manager = useKeyValueFieldManager<PlaygroundForm, "queryParams">({
+    control,
+    name: "queryParams",
+    defaultValue: { name: "", value: "", active: false },
+    shouldSetActive: (item) => {
+      const schemaParam = schemaQueryParams.find((p) => p.name === item.name);
+      if (schemaParam) {
+        const isRequired = schemaParam.isRequired ?? false;
+        const hasValue = Boolean(item.value);
+        return isRequired || hasValue;
+      }
+      return Boolean(item.name || item.value);
+    },
+  });
+
+  const requiredFields = schemaQueryParams.map((param) =>
+    Boolean(param.isRequired),
+  );
+
+  const hasSchemaParams = schemaQueryParams.length > 0;
+
+  return (
+    <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 isArrayEnum = currentParam?.type === "array" && hasEnum;
+            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" })
+                        }
+                      />
+                    </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] && <span>&nbsp;*</span>}
+                    </label>
+                  </ParamsGridInput>
+                )}
+                <div className="flex justify-between items-center">
+                  {isArrayEnum ? (
+                    <ParamsGridInput asChild>
+                      <MultiSelect
+                        options={currentParam.enum ?? []}
+                        value={parseArrayParamValue(
+                          String(manager.getValue(i, "value")),
+                        )}
+                        onChange={(values) => {
+                          manager.setValue(
+                            i,
+                            "value",
+                            values.length > 0 ? JSON.stringify(values) : "",
+                          );
+                        }}
+                      />
+                    </ParamsGridInput>
+                  ) : !hasEnum ? (
+                    <ParamsGridInput
+                      placeholder="Value"
+                      aria-label="Query parameter value"
+                      {...valueInputProps}
+                    />
+                  ) : (
+                    <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

@@ -1,70 +1,70 @@
-import { useState } from "react";
-import { Button } from "@lukoweb/apitogo/ui/Button.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";
-
-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;
+import { Button } from "@lukoweb/apitogo/ui/Button.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";
+
+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;