chore: lint/format all files (#604)

* chore: lint/format all files

* Fix config sidebar button state (#602)

* chore: Update deno.lock version and add Radix UI slider component (#601)

* fix: improve how table addresses even/odd rows

---------

Co-authored-by: philon- <philon-@users.noreply.github.com>
Co-authored-by: Kamil Dzieniszewski <kamil.dzieniszewski@gmail.com>

src/components/UI/Generator.tsx

@@ -15,7 +15,8 @@ export interface ActionButton {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   variant: ButtonVariant;
   className?: string;
-}[]
+}
+[];
 
 export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   type: "text" | "password";
@@ -26,97 +27,98 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   actionButtons: ActionButton[];
   bits?: { text: string; value: string; key: string }[];
   selectChange: (event: string) => void;
-  inputChange: (event: React.ChangeEventHandler<HTMLInputElement> | undefined) => void;
+  inputChange: (
+    event: React.ChangeEventHandler<HTMLInputElement> | undefined,
+  ) => void;
   showPasswordToggle?: boolean;
   showCopyButton?: boolean;
   disabled?: boolean;
 }
 
-const Generator =
-  (
-    {
-      type,
-      devicePSKBitCount,
-      id = "pskInput",
-      variant,
-      value,
-      actionButtons,
-      bits = [
-        { text: "256 bit", value: "32", key: "bit256" },
-        { text: "128 bit", value: "16", key: "bit128" },
-        { text: "8 bit", value: "1", key: "bit8" },
-        { text: "Empty", value: "0", key: "empty" },
-      ],
-      selectChange,
-      inputChange,
-      disabled,
-      showPasswordToggle,
-      showCopyButton,
-      ...props
-    }: GeneratorProps
-  ) => {
-    const inputRef = React.useRef<HTMLInputElement>(null);
+const Generator = (
+  {
+    type,
+    devicePSKBitCount,
+    id = "pskInput",
+    variant,
+    value,
+    actionButtons,
+    bits = [
+      { text: "256 bit", value: "32", key: "bit256" },
+      { text: "128 bit", value: "16", key: "bit128" },
+      { text: "8 bit", value: "1", key: "bit8" },
+      { text: "Empty", value: "0", key: "empty" },
+    ],
+    selectChange,
+    inputChange,
+    disabled,
+    showPasswordToggle,
+    showCopyButton,
+    ...props
+  }: GeneratorProps,
+) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
-    // Invokes onChange event on the input element when the value changes from the parent component
-    React.useEffect(() => {
-      if (!inputRef.current) return;
-      const setValue = Object.getOwnPropertyDescriptor(
-        HTMLInputElement.prototype,
-        "value",
-      )?.set;
+  // Invokes onChange event on the input element when the value changes from the parent component
+  React.useEffect(() => {
+    if (!inputRef.current) return;
+    const setValue = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value",
+    )?.set;
 
-      if (!setValue) return;
-      inputRef.current.value = "";
-      setValue.call(inputRef.current, value);
-      inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
-    }, [value]);
-    return (
-      <>
-        <Input
-          type={type}
-          id={id}
-          variant={variant}
-          value={value}
-          onChange={inputChange}
-          disabled={disabled}
-          ref={inputRef}
-          showCopyButton={showCopyButton}
-          showPasswordToggle={showPasswordToggle}
-        />
-        <Select
-          value={devicePSKBitCount?.toString()}
-          onValueChange={(e) => selectChange(e)}
-          disabled={disabled}
-        >
-          <SelectTrigger className="w-36 ml-2">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent className="w-36">
-            {bits.map(({ text, value, key }) => (
-              <SelectItem key={key} value={value} className="w-36">
-                {text}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <div className="flex ml-2 space-x-2">
-          {actionButtons?.map(({ text, onClick, variant, className }) => (
-            <Button
-              key={text}
-              type="button"
-              onClick={onClick}
-              disabled={disabled}
-              variant={variant}
-              className={className}
-              {...props}
-            >
+    if (!setValue) return;
+    inputRef.current.value = "";
+    setValue.call(inputRef.current, value);
+    inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+  }, [value]);
+  return (
+    <>
+      <Input
+        type={type}
+        id={id}
+        variant={variant}
+        value={value}
+        onChange={inputChange}
+        disabled={disabled}
+        ref={inputRef}
+        showCopyButton={showCopyButton}
+        showPasswordToggle={showPasswordToggle}
+      />
+      <Select
+        value={devicePSKBitCount?.toString()}
+        onValueChange={(e) => selectChange(e)}
+        disabled={disabled}
+      >
+        <SelectTrigger className="w-36 ml-2">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="w-36">
+          {bits.map(({ text, value, key }) => (
+            <SelectItem key={key} value={value} className="w-36">
               {text}
-            </Button>
+            </SelectItem>
           ))}
-        </div>
-      </>
-    );
-  }
+        </SelectContent>
+      </Select>
+      <div className="flex ml-2 space-x-2">
+        {actionButtons?.map(({ text, onClick, variant, className }) => (
+          <Button
+            key={text}
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            variant={variant}
+            className={className}
+            {...props}
+          >
+            {text}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+};
 Generator.displayName = "Button";
 
 export { Generator };