2.0 Overhaul start

src/components/PageComponents/Config/LoRa.tsx

@@ -1,9 +1,11 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, useForm, useWatch } from "react-hook-form";
 
+import { Input } from "@app/components/form/Input.js";
+import { Select } from "@app/components/form/Select.js";
+import { Toggle } from "@app/components/form/Toggle.js";
 import { LoRaValidation } from "@app/validation/config/lora.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
@@ -14,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 export const LoRa = (): JSX.Element => {
   const { config, connection } = useDevice();
   const [loading, setLoading] = useState(false);
-  const [usePreset, setUsePreset] = useState(true);
 
   const {
     register,
@@ -27,6 +28,12 @@ export const LoRa = (): JSX.Element => {
     resolver: classValidatorResolver(LoRaValidation),
   });
 
+  const usePreset = useWatch({
+    control,
+    name: "usePreset",
+    defaultValue: true,
+  });
+
   useEffect(() => {
     reset(config.lora);
   }, [reset, config.lora]);
@@ -49,115 +56,109 @@ export const LoRa = (): JSX.Element => {
   });
 
   return (
-    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
-      <FormField
-        label="Use Preset"
-        description="Description"
-        isInvalid={!!errors.txDisabled?.message}
-        validationMessage={errors.txDisabled?.message}
-      >
-        <Switch
-          height={24}
-          marginLeft="auto"
-          checked={usePreset}
-          onChange={(e) => setUsePreset(e.target.checked)}
-        />
-      </FormField>
-      <SelectField
-        display={usePreset ? "block" : "none"}
+    <Form
+      title="LoRa Config"
+      breadcrumbs={["Config", "LoRa"]}
+      reset={() => reset(config.lora)}
+      loading={loading}
+      dirty={isDirty}
+      onSubmit={onSubmit}
+    >
+      <Controller
+        name="usePreset"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Use Preset"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Select
         label="Preset"
         description="This is a description."
-        isInvalid={!!errors.modemPreset?.message}
-        validationMessage={errors.modemPreset?.message}
+        disabled={!usePreset}
         {...register("modemPreset", { valueAsNumber: true })}
       >
         {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
-      </SelectField>
+      </Select>
 
-      <TextInputField
-        display={usePreset ? "none" : "block"}
+      <Input
         label="Bandwidth"
         description="Max transmit power in dBm"
         type="number"
-        hint="MHz"
-        isInvalid={!!errors.bandwidth?.message}
-        validationMessage={errors.bandwidth?.message}
+        suffix="MHz"
+        error={errors.bandwidth?.message}
         {...register("bandwidth", {
           valueAsNumber: true,
         })}
+        disabled={usePreset}
       />
-      <TextInputField
-        display={usePreset ? "none" : "block"}
+      <Input
         label="Spread Factor"
         description="Max transmit power in dBm"
         type="number"
-        hint="CPS"
-        isInvalid={!!errors.spreadFactor?.message}
-        validationMessage={errors.spreadFactor?.message}
+        suffix="CPS"
+        error={errors.spreadFactor?.message}
         {...register("spreadFactor", {
           valueAsNumber: true,
         })}
+        disabled={usePreset}
       />
-      <TextInputField
-        display={usePreset ? "none" : "block"}
+      <Input
         label="Coding Rate"
         description="Max transmit power in dBm"
         type="number"
-        isInvalid={!!errors.codingRate?.message}
-        validationMessage={errors.codingRate?.message}
+        error={errors.codingRate?.message}
         {...register("codingRate", {
           valueAsNumber: true,
         })}
+        disabled={usePreset}
       />
-      <TextInputField
-        label="Transmit Power"
-        description="Max transmit power in dBm"
-        type="number"
-        isInvalid={!!errors.txPower?.message}
-        validationMessage={errors.txPower?.message}
-        {...register("txPower", { valueAsNumber: true })}
-      />
-      <TextInputField
-        label="Hop Limit"
-        description="This is a description."
-        hint="Hops"
-        type="number"
-        isInvalid={!!errors.hopLimit?.message}
-        validationMessage={errors.hopLimit?.message}
-        {...register("hopLimit", { valueAsNumber: true })}
-      />
-      <FormField
-        label="Transmit Disabled"
-        description="Description"
-        isInvalid={!!errors.txDisabled?.message}
-        validationMessage={errors.txDisabled?.message}
-      >
-        <Controller
-          name="txDisabled"
-          control={control}
-          render={({ field: { value, ...field } }) => (
-            <Switch height={24} marginLeft="auto" checked={value} {...field} />
-          )}
-        />
-      </FormField>
-      <TextInputField
+      <Input
         label="Frequency Offset"
         description="This is a description."
-        hint="Hz"
+        suffix="Hz"
         type="number"
-        isInvalid={!!errors.frequencyOffset?.message}
-        validationMessage={errors.frequencyOffset?.message}
+        error={errors.frequencyOffset?.message}
         {...register("frequencyOffset", { valueAsNumber: true })}
       />
-      <SelectField
+      <Select
         label="Region"
         description="This is a description."
-        isInvalid={!!errors.region?.message}
-        validationMessage={errors.region?.message}
         {...register("region", { valueAsNumber: true })}
       >
         {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
-      </SelectField>
+      </Select>
+      <Input
+        label="Hop Limit"
+        description="This is a description."
+        suffix="Hops"
+        type="number"
+        error={errors.hopLimit?.message}
+        {...register("hopLimit", { valueAsNumber: true })}
+      />
+      <Controller
+        name="txEnabled"
+        control={control}
+        render={({ field: { value, ...rest } }) => (
+          <Toggle
+            label="Transmit Enabled"
+            description="Description"
+            checked={value}
+            {...rest}
+          />
+        )}
+      />
+      <Input
+        label="Transmit Power"
+        description="Max transmit power in dBm"
+        type="number"
+        error={errors.txPower?.message}
+        {...register("txPower", { valueAsNumber: true })}
+      />
     </Form>
   );
 };