biome linting

src/components/Form/DynamicFormField.tsx

@@ -2,6 +2,10 @@ import {
   GenericInput,
   type InputFieldProps,
 } from "@components/Form/FormInput.js";
+import {
+  PasswordGenerator,
+  type PasswordGeneratorProps,
+} from "@components/Form/FormPasswordGenerator.js";
 import {
   type SelectFieldProps,
   SelectInput,
@@ -10,10 +14,6 @@ import {
   type ToggleFieldProps,
   ToggleInput,
 } from "@components/Form/FormToggle.js";
-import {
-  type PasswordGeneratorProps,
-  PasswordGenerator,
-} from "@components/Form/FormPasswordGenerator.js";
 import type { Control, FieldValues } from "react-hook-form";
 
 export type FieldProps<T> =
@@ -51,8 +51,12 @@ export function DynamicFormField<T extends FieldValues>({
       );
     case "passwordGenerator":
       return (
-        <PasswordGenerator field={field} control={control} disabled={disabled} />
+        <PasswordGenerator
-      )
+          field={field}
+          control={control}
+          disabled={disabled}
+        />
+      );
     case "multiSelect":
       return <div>tmp</div>;
   }

src/components/Form/FormPasswordGenerator.tsx

@@ -1,32 +1,31 @@
 import type {
-    BaseFormBuilderProps,
+  BaseFormBuilderProps,
-    GenericFormElementProps,
+  GenericFormElementProps,
-  } from "@components/Form/DynamicForm.js";
+} from "@components/Form/DynamicForm.js";
-  import { Generator } from "@components/UI/Generator.js";
+import { Generator } from "@components/UI/Generator.js";
-  import { useState } from "react";
+import { useState } from "react";
-  import { Controller, type FieldValues } from "react-hook-form";
+import { Controller, type FieldValues } from "react-hook-form";
-  
+
-  export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
+export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
-    type: "passwordGenerator";
+  type: "passwordGenerator";
-  }
+}
-  
+
-  export function PasswordGenerator<T extends FieldValues>({
+export function PasswordGenerator<T extends FieldValues>({
-    control,
+  control,
-    field,
+  field,
-  }: GenericFormElementProps<T, PasswordGeneratorProps<T>>) {
+}: GenericFormElementProps<T, PasswordGeneratorProps<T>>) {
-    return (
+  return (
-      <Controller
+    <Controller
-        name={field.name}
+      name={field.name}
-        control={control}
+      control={control}
-        render={({ field: { value, onChange, ...rest } }) => (
+      render={({ field: { value, onChange, ...rest } }) => (
-          <Generator
+        <Generator
-            variant={"success"}
+          variant={"success"}
-            textValue="Generate"
+          textValue="Generate"
-            {...field.properties}
+          {...field.properties}
-            {...rest}
+          {...rest}
-          />
+        />
-        )}
+      )}
-      />
+    />
-    );
+  );
-  }
+}
-  

src/components/PageComponents/Channel.tsx

@@ -81,8 +81,10 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               label: "pre-Shared Key",
               description: "256, 128, or 8 bit PSKs allowed",
               properties: {
-                passwordValue: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
+                passwordValue: fromByteArray(
-                devicePSKBitCount: channel?.settings?.psk.length
+                  channel?.settings?.psk ?? new Uint8Array(0),
+                ),
+                devicePSKBitCount: channel?.settings?.psk.length,
               },
             },
             {

src/components/UI/Generator.tsx

@@ -1,26 +1,25 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
-import { Input } from "@components/UI/Input.js";
 import { Button } from "@components/UI/Button.js";
-import {  
+import { Input } from "@components/UI/Input.js";
+import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue, 
+  SelectValue,
 } from "@components/UI/Select.js";
+import { cn } from "@core/utils/cn.js";
+import cryptoRandomString from "crypto-random-string";
 import { useState } from "react";
-import cryptoRandomString from 'crypto-random-string';
 
 const generatorVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2",
   {
     variants: {
       variant: {
-        default:
+        default: "",
-          "",
         destructive:
           "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
         success:
@@ -48,48 +47,72 @@ const generatorVariants = cva(
 
 export interface GeneratorProps
   extends React.BaseHTMLAttributes<HTMLElement>,
-    VariantProps<typeof generatorVariants> 
+    VariantProps<typeof generatorVariants> {
-    {
+  devicePSKBitCount?: number;
-      devicePSKBitCount?: number;
+  passwordValue?: string;
-      passwordValue?: string;
+  textValue?: string;
-      textValue?: string;
+}
-    }
 
 const Generator = React.forwardRef<HTMLButtonElement, GeneratorProps>(
-  ({ devicePSKBitCount, passwordValue, textValue, className, variant, size, ...props }, ref) => {    
+  (
+    {
+      devicePSKBitCount,
+      passwordValue,
+      textValue,
+      className,
+      variant,
+      size,
+      ...props
+    },
+    ref,
+  ) => {
     const [pass, setPass] = useState<string>(passwordValue ?? "");
-    const [bitCount, setBits] = useState<string>(devicePSKBitCount?.toString() ?? "");
+    const [bitCount, setBits] = useState<string>(
+      devicePSKBitCount?.toString() ?? "",
+    );
 
     return (
       <>
-      <Input
+        <Input type="text" id="pskInput" value={pass} />
-          type="text"
+        <Select
-          id="pskInput"
+          value={bitCount}
-          value={pass}
+          onValueChange={(value) => {
-      />
+            setBits(value);
-      <Select value={bitCount} onValueChange={(value) => {
+          }}
-        setBits(value)
+        >
-      }}>
+          <SelectTrigger>
-        <SelectTrigger>
+            <SelectValue />
-          <SelectValue />
+          </SelectTrigger>
-        </SelectTrigger>
+          <SelectContent>
-        <SelectContent>
+            <SelectItem key="bit256" value="32">
-            <SelectItem key="bit256" value="32">256 bit</SelectItem>
+              256 bit
-            <SelectItem key="bit128" value="16">128 bit</SelectItem>
+            </SelectItem>
-            <SelectItem key="bit8" value="1">8 bit</SelectItem>
+            <SelectItem key="bit128" value="16">
-        </SelectContent>
+              128 bit
-      </Select>
+            </SelectItem>
-      <Button
+            <SelectItem key="bit8" value="1">
-        type="button"
+              8 bit
-        variant="success"
+            </SelectItem>
-        ref={ref}
+          </SelectContent>
-        {...props}
+        </Select>
-        onClick={() => {
+        <Button
-          setPass(btoa(cryptoRandomString({length: Number.parseInt(bitCount), type: 'alphanumeric'})));
+          type="button"
-        }}
+          variant="success"
-      >
+          ref={ref}
-        {textValue}
+          {...props}
-      </Button>
+          onClick={() => {
+            setPass(
+              btoa(
+                cryptoRandomString({
+                  length: Number.parseInt(bitCount),
+                  type: "alphanumeric",
+                }),
+              ),
+            );
+          }}
+        >
+          {textValue}
+        </Button>
       </>
     );
   },