refactor: bring down eslint warnings to zero (#1714)

- install `@eslint-react/eslint-plugin` dependency
- configure `@eslint-react/eslint-plugin` in eslint config
- modernize `lint` command in `package.json`
- disable or fix various reported lint issues
- fix `div` being nested in `p` for settings
- replace deprecated `event.keyCode` with `event.key`
- update isEscKeyPress method and unit tests which used deprecated `event.keyCode`
- allow `eslint` v8 as peer dependency for `@eslint-react/eslint-plugin`

8 files changed, 16 insertions, 8 deletions

diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
index b4eeace8b..1e9ff9022 100644
--- a/src/components/ui/FAB.tsx
+++ b/src/components/ui/FAB.tsx
@@ -36,6 +36,7 @@ class Button extends Component<IProps> {
     };
 
     return (
+      // eslint-disable-next-line @eslint-react/dom/no-missing-button-type
       <button {...buttonProps} type="button">
         {children}
       </button>
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx
index 2e70d1b35..d31463010 100644
--- a/src/components/ui/SearchInput.tsx
+++ b/src/components/ui/SearchInput.tsx
@@ -98,6 +98,7 @@ class SearchInput extends Component<IProps, IState> {
           />
         </label>
         {value.length > 0 && (
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions
           <span onClick={() => this.reset()} onKeyDown={noop}>
             <Icon icon={mdiCloseCircleOutline} />
           </span>
diff --git a/src/components/ui/Tabs/Tabs.tsx b/src/components/ui/Tabs/Tabs.tsx
index a5ec148aa..d1e397122 100644
--- a/src/components/ui/Tabs/Tabs.tsx
+++ b/src/components/ui/Tabs/Tabs.tsx
@@ -35,6 +35,7 @@ class Tab extends Component<IProps, IState> {
 
   render(): ReactElement {
     const { children: childElements } = this.props;
+    // eslint-disable-next-line @eslint-react/no-children-to-array
     const children = Children.toArray(childElements); // removes all null values
 
     if (children.length === 1) {
@@ -44,9 +45,10 @@ class Tab extends Component<IProps, IState> {
     return (
       <div className="content-tabs">
         <div className="content-tabs__tabs">
+          {/* eslint-disable-next-line @eslint-react/no-children-map */}
           {Children.map(children, (child, i) => (
             <button
-              // eslint-disable-next-line react/no-array-index-key
+              // eslint-disable-next-line react/no-array-index-key, @eslint-react/no-array-index-key
               key={i}
               className={classnames({
                 'content-tabs__item': true,
@@ -60,9 +62,10 @@ class Tab extends Component<IProps, IState> {
           ))}
         </div>
         <div className="content-tabs__content">
+          {/* eslint-disable-next-line @eslint-react/no-children-map */}
           {Children.map(children, (child, i) => (
             <div
-              // eslint-disable-next-line react/no-array-index-key
+              // eslint-disable-next-line react/no-array-index-key, @eslint-react/no-array-index-key
               key={i}
               className={classnames({
                 'content-tabs__item': true,
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 5c606f274..ba4353dae 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -223,7 +223,7 @@ class ButtonComponent extends Component<IProps, IState> {
     ) : (
       <button
         id={id}
-        // eslint-disable-next-line react/button-has-type
+        // eslint-disable-next-line react/button-has-type, @eslint-react/dom/no-missing-button-type
         type={type}
         onClick={onClick}
         className={classnames({
diff --git a/src/components/ui/imageUpload/index.tsx b/src/components/ui/imageUpload/index.tsx
index 876572484..092271ab0 100644
--- a/src/components/ui/imageUpload/index.tsx
+++ b/src/components/ui/imageUpload/index.tsx
@@ -129,7 +129,9 @@ class ImageUpload extends Component<IProps, IState> {
             </>
           ) : (
             <Dropzone
+              // eslint-disable-next-line react/jsx-no-bind
               onDropAccepted={this.onDropAccepted.bind(this)}
+              // eslint-disable-next-line react/jsx-no-bind
               onDropRejected={this.onDropRejected.bind(this)}
               multiple={multiple}
               accept={{
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index c61efe570..225517ba8 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -172,7 +172,7 @@ class Input extends Component<IProps, IState> {
             onFocus={onFocus}
             onBlur={onBlur}
             disabled={disabled}
-            onKeyPress={this.onInputKeyPress.bind(this)}
+            onKeyUp={this.onInputKeyPress.bind(this)}
             min={min}
             max={max}
             step={step}
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index 2716ebc2d..397fd97ed 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -197,6 +197,7 @@ class SelectComponent extends Component<IProps, IState> {
     this.arrowKeysHandler = this.arrowKeysHandler.bind(this);
   }
 
+  // eslint-disable-next-line @eslint-react/no-unsafe-component-will-mount
   UNSAFE_componentWillMount(): void {
     const { value } = this.props;
 
@@ -417,6 +418,7 @@ class SelectComponent extends Component<IProps, IState> {
               ref={this.scrollContainerRef}
             >
               {Object.keys(options!).map((key, i) => (
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                 <div
                   key={key}
                   onClick={() => this.select(key)}
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index 4a0e77afe..e332f7a47 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -40,10 +40,9 @@ class TextareaComponent extends Component<IProps> {
     const { data } = this.props;
 
     if (this.textareaRef?.current && data) {
-      Object.keys(data).map(
-        // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
-        key => (this.textareaRef.current!.dataset[key] = data[key]),
-      );
+      Object.keys(data).forEach(key => {
+        this.textareaRef.current!.dataset[key] = data[key];
+      });
     }
   }