zudoku 0.28.2 → 0.29.0

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

@@ -9,7 +9,7 @@ import { Checkbox } from "zudoku/ui/Checkbox.js";
 import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Input } from "../../../ui/Input.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 = ({
@@ -19,7 +19,7 @@ export const QueryParams = ({
   control: Control<PlaygroundForm>;
   queryParams: QueryParam[];
 }) => {
-  const { fields } = useFieldArray<PlaygroundForm>({
+  const { fields } = useFieldArray<PlaygroundForm, "queryParams">({
     control,
     name: "queryParams",
   });
@@ -30,97 +30,99 @@ export const QueryParams = ({
   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"
+        <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 }) => (
+                      <Checkbox
+                        variant="outline"
+                        id={`queryParams.${i}.active`}
+                        className="mr-2"
+                        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;
+                    )}
+                  />
+                  <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"
+                        />
+                      ) : (
+                        <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}
+                            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"
+                          />
+                        );
+                      }
 
-                    if (!hasEnum) {
                       return (
-                        <Input
-                          {...field}
+                        <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="font-mono text-xs border-0 ring-1 ring-ring"
                         />
                       );
-                    }
-
-                    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>
-          );
-        })}
+                    }}
+                    name={`queryParams.${i}.value`}
+                  />
+                </div>
+              </ParamsGridItem>
+            );
+          })}
+        </ParamsGrid>
       </div>
     </Card>
   );

package/src/lib/ui/Input.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { cn } from "../util/cn.js";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

package/src/lib/util/useScrollToAnchor.ts

@@ -54,5 +54,5 @@ export const useScrollToAnchor = () => {
 
       return () => observer.disconnect();
     }
-  }, [location.hash, setActiveAnchor]);
+  }, [location.hash, scrollToHash, setActiveAnchor]);
 };

package/src/lib/util/useScrollToTop.ts

@@ -6,8 +6,13 @@ export const useScrollToTop = () => {
   const previousPath = useRef(location.pathname);
 
   useEffect(() => {
-    if (previousPath.current === location.pathname) return;
-    window.scrollTo(0, 0);
+    const isNewPage = previousPath.current !== location.pathname;
+    const hasAnchor = location.hash !== "";
+
+    if (isNewPage && !hasAnchor) {
+      window.scrollTo(0, 0);
+    }
+
     previousPath.current = location.pathname;
-  }, [location.pathname]);
+  }, [location.pathname, location.hash]);
 };