biome

src/components/Form/DynamicForm.tsx

@@ -101,7 +101,10 @@ export function DynamicForm<T extends FieldValues>({
               key={field.label}
               label={field.label}
               description={field.description}
-              valid={field.validationText == undefined || field.validationText == ""}
+              valid={
+                field.validationText === undefined ||
+                field.validationText === ""
+              }
               validationText={field.validationText}
             >
               <DynamicFormField

src/components/Form/FormPasswordGenerator.tsx

@@ -3,7 +3,7 @@ import type {
   GenericFormElementProps,
 } from "@components/Form/DynamicForm.js";
 import { Generator } from "@components/UI/Generator.js";
-import { ChangeEventHandler, MouseEventHandler } from "react";
+import type { ChangeEventHandler, MouseEventHandler } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
 
 export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
@@ -22,7 +22,7 @@ export function PasswordGenerator<T extends FieldValues>({
     <Controller
       name={field.name}
       control={control}
-      render={({ field: { value,...rest } }) => (
+      render={({ field: { value, ...rest } }) => (
         <Generator
           devicePSKBitCount={field.devicePSKBitCount}
           inputChange={field.inputChange}

src/components/Form/FormWrapper.tsx

@@ -23,7 +23,9 @@ export const FieldWrapper = ({
         <div className="sm:col-span-2">
           <div className="max-w-lg">
             <p className="text-sm text-gray-500">{description}</p>
-            <p hidden={valid ?? true} className="text-sm text-red-500">{validationText}</p>
+            <p hidden={valid ?? true} className="text-sm text-red-500">
+              {validationText}
+            </p>
             <div className="mt-4 space-y-4">
               <div className="flex items-center">{children}</div>
             </div>

src/components/PageComponents/Channel.tsx

@@ -59,48 +59,40 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
   };
 
   const validatePass = (input: string, count: number) => {
-    if (count == 32) {
+    if (count === 32) {
-      if (input.length != 44) {
+      if (input.length !== 44) {
         setValidationText("Please enter a valid 256 bit PSK.");
-      }
+      } else {
-      else {
         setValidationText(undefined);
       }
-    }
+    } else if (count === 16) {
-    else if (count == 16)
+      if (input.length !== 24) {
-    {
-      if (input.length != 24) {
         setValidationText("Please enter a valid 128 bit PSK.");
-      }
+      } else {
-      else {
         setValidationText(undefined);
       }
-    }
+    } else if (count === 1) {
-    else if (count == 1)
+      if (input.length !== 4) {
-    {
-      if (input.length != 4) {
         setValidationText("Please enter a valid 1 bit PSK");
-      }
+      } else {
-      else {
         setValidationText(undefined);
       }
-    }
+    } else {
-    else {
       setValidationText("Unkown PSK length.");
     }
-  }
+  };
 
   const inputChangeEvent = (e) => {
-    let psk = e.currentTarget?.value;
+    const psk = e.currentTarget?.value;
     setPass(psk);
     validatePass(psk, bitCount);
   };
 
   const selectChangeEvent = (e: string) => {
-    let count = Number.parseInt(e);
+    const count = Number.parseInt(e);
     setBits(count);
     validatePass(pass, count);
-  }
+  };
 
   return (
     <DynamicForm<ChannelValidation>
@@ -152,7 +144,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               selectChange: selectChangeEvent,
               buttonClick: clickEvent,
               properties: {
-                value: pass
+                value: pass,
               },
             },
             {

src/components/UI/Generator.tsx

@@ -10,8 +10,7 @@ import {
   SelectValue,
 } from "@components/UI/Select.js";
 
-export interface GeneratorProps
+export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
-  extends React.BaseHTMLAttributes<HTMLElement> {
   devicePSKBitCount?: number;
   value: string;
   variant: "default" | "invalid";
@@ -21,17 +20,25 @@ export interface GeneratorProps
   buttonClick: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-
 const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
   (
-    { devicePSKBitCount, variant, value, buttonText, selectChange, inputChange, buttonClick, ...props },
+    {
+      devicePSKBitCount,
+      variant,
+      value,
+      buttonText,
+      selectChange,
+      inputChange,
+      buttonClick,
+      ...props
+    },
     ref,
   ) => {
     return (
       <>
-        <Input 
+        <Input
-          type="text" 
+          type="text"
-          id="pskInput" 
+          id="pskInput"
           variant={variant}
           value={value}
           onChange={inputChange}
@@ -55,7 +62,12 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
             </SelectItem>
           </SelectContent>
         </Select>
-        <Button type="button" variant="success" onClick={buttonClick} {...props}>
+        <Button
+          type="button"
+          variant="success"
+          onClick={buttonClick}
+          {...props}
+        >
           {buttonText}
         </Button>
       </>

src/components/UI/Input.tsx

@@ -1,18 +1,16 @@
 import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
+import { type VariantProps, cva } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
-import { cva, VariantProps } from "class-variance-authority";
 
 const inputVariants = cva(
   "flex h-10 w-full rounded-md border bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
   {
     variants: {
       variant: {
-        default:
+        default: "border-slate-300 dark:border-slate-700",
-          "border-slate-300 dark:border-slate-700",
+        invalid: "border-red-500 dark:border-red-500",
-        invalid:
-          "border-red-500 dark:border-red-500",
       },
     },
     defaultVariants: {
@@ -42,7 +40,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           </span>
         )}
         <input
-          className={cn(action && "pr-8", className, inputVariants({ variant }))}
+          className={cn(
+            action && "pr-8",
+            className,
+            inputVariants({ variant }),
+          )}
           ref={ref}
           {...props}
         />