refactor: migrate radix-ui to base-ui

web/app/components/memshell/package-config-card.tsx

@@ -1,23 +1,14 @@
 import { PackageIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useMemo } from "react";
+import { Controller, type UseFormReturn, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/form";
+import { FieldLabel, FieldSet } from "@/components/ui/field";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Spinner } from "@/components/ui/spinner";
 import type { PackerConfig } from "@/types/memshell";
 import type { MemShellFormSchema } from "@/types/schema";
 
-type Option = {
-  name: string;
-  value: string;
-};
-
 export default function PackageConfigCard({
   packerConfig,
   form,
@@ -25,13 +16,19 @@ export default function PackageConfigCard({
   packerConfig: PackerConfig | undefined;
   form: UseFormReturn<MemShellFormSchema>;
 }>) {
-  const [options, setOptions] = useState<Array<Option>>([]);
-
-  const shellType = form.watch("shellType");
-  const server = form.watch("server");
   const { t } = useTranslation("common");
 
-  useEffect(() => {
+  const shellType = useWatch({
+    control: form.control,
+    name: "shellType",
+  });
+
+  const server = useWatch({
+    control: form.control,
+    name: "server",
+  });
+
+  const options = useMemo(() => {
     const filteredOptions = (packerConfig ?? []).filter((name) => {
       if (!shellType || shellType === " ") {
         return true;
@@ -44,23 +41,12 @@ export default function PackageConfigCard({
       }
       return !name.startsWith("Agent") && !name.toLowerCase().startsWith("xxl");
     });
-
-    const mappedOptions = filteredOptions.map((name) => {
-      return {
-        name: t(name),
-        value: name,
-      };
-    });
-
-    setOptions(mappedOptions);
-    const currentValue = form.getValues("packingMethod");
-    if (
-      filteredOptions.length > 0 &&
-      (!currentValue || !filteredOptions.includes(currentValue))
-    ) {
-      form.setValue("packingMethod", filteredOptions[0]);
-    }
-  }, [form, packerConfig, server, shellType, t]);
+    form.setValue("packingMethod", filteredOptions[0]);
+    return filteredOptions.map((name) => ({
+      name: t(name),
+      value: name,
+    }));
+  }, [packerConfig, shellType, server, t, form]);
 
   return (
     <Card className="w-full">
@@ -72,41 +58,34 @@ export default function PackageConfigCard({
       </CardHeader>
       <CardContent>
         {options.length > 0 ? (
-          <FormProvider {...form}>
-            <FormField
-              control={form.control}
-              name="packingMethod"
-              render={({ field }) => (
-                <FormItem className="space-y-3">
-                  <FormLabel>{t("packerMethod")}</FormLabel>
-                  <FormControl>
-                    <RadioGroup
-                      onValueChange={field.onChange}
-                      value={field.value}
-                      className="grid grid-cols-2 md:grid-cols-3"
-                    >
-                      {options.map(({ name, value }) => (
-                        <FormItem
-                          key={value}
-                          className="flex items-center space-x-3 space-y-0"
-                        >
-                          <FormControl>
-                            <RadioGroupItem value={value} id={value} />
-                          </FormControl>
-                          <FormLabel className="text-xs" htmlFor={value}>
-                            {name}
-                          </FormLabel>
-                        </FormItem>
-                      ))}
-                    </RadioGroup>
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-          </FormProvider>
+          <Controller
+            control={form.control}
+            name="packingMethod"
+            render={({ field }) => (
+              <FieldSet>
+                <FieldLabel>{t("packerMethod")}</FieldLabel>
+                <RadioGroup
+                  name={field.name}
+                  value={field.value}
+                  defaultValue={options[0].value}
+                  onValueChange={field.onChange}
+                  className="grid grid-cols-2 md:grid-cols-3"
+                >
+                  {options.map(({ name, value }) => (
+                    <div key={value} className="flex items-center space-x-3">
+                      <RadioGroupItem value={value} id={value} />
+                      <FieldLabel className="text-xs" htmlFor={value}>
+                        {name}
+                      </FieldLabel>
+                    </div>
+                  ))}
+                </RadioGroup>
+              </FieldSet>
+            )}
+          />
         ) : (
-          <div className="flex items-center justify-center p-4 space-x-2">
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+          <div className="flex items-center justify-center p-4 gap-4 h-50">
+            <Spinner />
             <span className="text-sm text-muted-foreground">
               {t("loading")}
             </span>