refactor: unused component cleanup - Must be merged after #3242

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/permissions.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
 import { trpc } from "@/lib/trpc/client";
+import { Checkbox } from "@unkey/ui";
 import { toast } from "sonner";
 
 export type Role = {

apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-bytes.tsx

@@ -1,13 +1,13 @@
 "use client";
 import { revalidate } from "@/app/actions";
-import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Input, SettingCard } from "@unkey/ui";
+import { Button, FormInput, SettingCard } from "@unkey/ui";
 import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
+
 const formSchema = z.object({
   keyAuthId: z.string(),
   defaultBytes: z
@@ -27,10 +27,13 @@ type Props = {
 
 export const DefaultBytes: React.FC<Props> = ({ keyAuth, apiId }) => {
   const router = useRouter();
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: async (data, context, options) => {
-      return zodResolver(formSchema)(data, context, options);
-    },
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid, isSubmitting, isDirty },
+  } = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
     mode: "all",
     shouldFocusError: true,
     delayError: 100,
@@ -62,58 +65,46 @@ export const DefaultBytes: React.FC<Props> = ({ keyAuth, apiId }) => {
   }
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <SettingCard
-          title={"Default Bytes"}
-          description={
-            <div className="max-w-[380px]">
-              Sets the default byte size for keys under this API. Must be between 8 and 255.
-            </div>
-          }
-          border="top"
-          className="border-b-1"
-          contentWidth="w-full lg:w-[420px]"
-        >
-          <div className="flex flex-row justify-end items-center w-full gap-x-2">
-            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
-            <label htmlFor="defaultBytes" className="hidden sr-only">
-              Default Bytes
-            </label>
-            <FormField
-              control={form.control}
-              name="defaultBytes"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="defaultBytes"
-                      className="w-[16.5rem]"
-                      {...field}
-                      autoComplete="off"
-                      onChange={(e) => field.onChange(Number(e.target.value.replace(/\D/g, "")))}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button
-              size="lg"
-              variant="primary"
-              disabled={
-                !form.formState.isValid ||
-                form.formState.isSubmitting ||
-                keyAuth.defaultBytes === form.watch("defaultBytes")
-              }
-              type="submit"
-              loading={form.formState.isSubmitting}
-            >
-              Save
-            </Button>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <SettingCard
+        title="Default Bytes"
+        description={
+          <div className="max-w-[380px]">
+            Sets the default byte size for keys under this API. Must be between 8 and 255.
           </div>
-        </SettingCard>
-      </form>
-    </Form>
+        }
+        border="top"
+        className="border-b-1"
+        contentWidth="w-full lg:w-[420px]"
+      >
+        <div className="flex flex-row justify-end items-center w-full gap-x-2">
+          <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+
+          <Controller
+            control={control}
+            name="defaultBytes"
+            render={({ field }) => (
+              <FormInput
+                {...field}
+                className="w-[16.5rem]"
+                autoComplete="off"
+                type="text"
+                onChange={(e) => field.onChange(Number(e.target.value.replace(/\D/g, "")))}
+              />
+            )}
+          />
+
+          <Button
+            size="lg"
+            variant="primary"
+            disabled={!isValid || isSubmitting || !isDirty}
+            type="submit"
+            loading={isSubmitting}
+          >
+            Save
+          </Button>
+        </div>
+      </SettingCard>
+    </form>
   );
 };

apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-prefix.tsx

@@ -1,12 +1,11 @@
 "use client";
 import { revalidate } from "@/app/actions";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Input, SettingCard } from "@unkey/ui";
+import { Button, FormInput, SettingCard } from "@unkey/ui";
 import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 const formSchema = z.object({
@@ -29,10 +28,13 @@ type Props = {
 
 export const DefaultPrefix: React.FC<Props> = ({ keyAuth, apiId }) => {
   const router = useRouter();
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: async (data, context, options) => {
-      return zodResolver(formSchema)(data, context, options);
-    },
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid, isSubmitting, isDirty },
+  } = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
     mode: "all",
     shouldFocusError: true,
     delayError: 100,
@@ -62,61 +64,50 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth, apiId }) => {
   }
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <SettingCard
-          title={"Default Prefix"}
-          description={
-            <div className="max-w-[380px]">
-              Sets the default prefix for keys under this API. A trailing underscore is added
-              automatically.
-            </div>
-          }
-          border="bottom"
-          contentWidth="w-full lg:w-[420px] h-full"
-        >
-          <div className="flex flex-row justify-end items-center w-full gap-x-2">
-            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
-            <label htmlFor="defaultPrefix" className="hidden sr-only">
-              Default Prefix
-            </label>
-            <FormField
-              control={form.control}
-              name="defaultPrefix"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="defaultPrefix"
-                      className="w-[16.5rem]"
-                      {...field}
-                      autoComplete="off"
-                      onBlur={(e) => {
-                        if (e.target.value === "") {
-                          return;
-                        }
-                      }}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <Button
-              variant="primary"
-              size="lg"
-              disabled={
-                !form.formState.isValid ||
-                form.formState.isSubmitting ||
-                keyAuth.defaultPrefix === form.getValues("defaultPrefix")
-              }
-              type="submit"
-              loading={form.formState.isSubmitting}
-            >
-              Save
-            </Button>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <SettingCard
+        title="Default Prefix"
+        description={
+          <div className="max-w-[380px]">
+            Sets the default prefix for keys under this API. A trailing underscore is added
+            automatically.
           </div>
-        </SettingCard>
-      </form>
-    </Form>
+        }
+        border="bottom"
+        contentWidth="w-full lg:w-[420px] h-full"
+      >
+        <div className="flex flex-row justify-end items-center w-full gap-x-2">
+          <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+
+          <Controller
+            control={control}
+            name="defaultPrefix"
+            render={({ field }) => (
+              <FormInput
+                {...field}
+                className="w-[16.5rem]"
+                autoComplete="off"
+                onBlur={(e) => {
+                  if (e.target.value === "") {
+                    return;
+                  }
+                  field.onBlur();
+                }}
+              />
+            )}
+          />
+
+          <Button
+            variant="primary"
+            size="lg"
+            disabled={!isValid || isSubmitting || !isDirty}
+            type="submit"
+            loading={isSubmitting}
+          >
+            Save
+          </Button>
+        </div>
+      </SettingCard>
+    </form>
   );
 };