From f4b4416ea52d564bc2dbe543a82084ed98843ccc Mon Sep 17 00:00:00 2001
From: Markus Hatvan <markus_hatvan@aon.at>
Date: Fri, 30 Jul 2021 10:54:54 +0200
Subject: chore: migrate from tslint to @typescript-eslint (#1706)

- update .eslintrc to work for .js and .ts
- update devDependencies
- lint properly both root /src and nested /packages
- update webhint recommended setting for tsconfig.json to shrink output
- Manage all eslint rules from the repo root
- escape single quotes in scripts to please windows build

Co-authored-by: Vijay A <avijayr@protonmail.com>
---
 packages/forms/src/button/index.tsx       |  29 +++++---
 packages/forms/src/error/index.tsx        |  13 +---
 packages/forms/src/input/index.tsx        |  63 ++++++++--------
 packages/forms/src/input/scorePassword.ts |   6 +-
 packages/forms/src/label/index.tsx        |  13 ++--
 packages/forms/src/select/index.tsx       | 119 +++++++++++++++++-------------
 packages/forms/src/textarea/index.tsx     |  22 +++---
 packages/forms/src/toggle/index.tsx       |   2 +-
 packages/forms/src/wrapper/index.tsx      |   9 +--
 9 files changed, 142 insertions(+), 134 deletions(-)

(limited to 'packages/forms/src')

diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index ecb2876ca..c08c4e97d 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -8,14 +8,24 @@ import Loader from 'react-loader';
 import { IFormField, IWithStyle } from '../typings/generic';
 import { Theme } from '../../../theme';
 
-type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted';
+type ButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'inverted';
 
 interface IProps extends IFormField, IWithStyle {
   className?: string;
   disabled?: boolean;
   id?: string;
   type?: 'button' | 'reset' | 'submit' | undefined;
-  onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
+  onClick: (
+    event:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLAnchorElement>,
+  ) => void;
   buttonType?: ButtonType;
   stretch?: boolean;
   loaded?: boolean;
@@ -25,10 +35,6 @@ interface IProps extends IFormField, IWithStyle {
   target?: string;
 }
 
-interface IState {
-  busy: boolean;
-}
-
 const styles = (theme: Theme) => ({
   button: {
     borderRadius: theme.borderRadiusSmall,
@@ -40,7 +46,8 @@ const styles = (theme: Theme) => ({
     outline: 'none',
     alignItems: 'center',
     padding: 0,
-    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as Property.Width<string>,
+    width: (props: IProps) =>
+      (props.stretch ? '100%' : 'auto') as Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
     // height: theme.buttonHeight,
@@ -125,7 +132,8 @@ const styles = (theme: Theme) => ({
     transition: 'all 0.3s',
     marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
     marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
-    position: (props: IProps): Property.Position => props.stretch ? 'absolute' : 'inherit',
+    position: (props: IProps): Property.Position =>
+      props.stretch ? 'absolute' : 'inherit',
   },
   icon: {
     margin: [1, 10, 0, -5],
@@ -175,7 +183,6 @@ class ButtonComponent extends Component<IProps> {
       buttonType,
       loaded,
       icon,
-      busy: busyProp,
       href,
       target,
     } = this.props;
@@ -185,7 +192,9 @@ class ButtonComponent extends Component<IProps> {
     let showLoader = false;
     if (loaded) {
       showLoader = !loaded;
-      console.warn('Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead');
+      console.warn(
+        'Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead',
+      );
     }
     if (busy) {
       showLoader = busy;
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
index a487bb281..243321d97 100644
--- a/packages/forms/src/error/index.tsx
+++ b/packages/forms/src/error/index.tsx
@@ -11,18 +11,9 @@ interface IProps {
 
 class ErrorComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      message,
-    } = this.props;
+    const { classes, message } = this.props;
 
-    return (
-      <p
-        className={classes.message}
-      >
-        {message}
-      </p>
-    );
+    return <p className={classes.message}>{message}</p>;
   }
 }
 
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index b96dbc12d..41751710a 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -17,7 +17,10 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
+interface IProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    IFormField,
+    IWithStyle {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
@@ -62,23 +65,24 @@ class InputComponent extends Component<IProps, IState> {
       }
 
       if (data) {
-        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
       }
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const {
-      scorePassword,
-      onChange,
-    } = this.props;
+    const { scorePassword, onChange } = this.props;
 
     if (onChange) {
       onChange(e);
     }
 
     if (this.inputRef && this.inputRef.current && scorePassword) {
-      this.setState({ passwordScore: scorePasswordFunc(this.inputRef.current.value) });
+      this.setState({
+        passwordScore: scorePasswordFunc(this.inputRef.current.value),
+      });
     }
   }
 
@@ -117,10 +121,7 @@ class InputComponent extends Component<IProps, IState> {
       noMargin,
     } = this.props;
 
-    const {
-      showPassword,
-      passwordScore,
-    } = this.state;
+    const { showPassword, passwordScore } = this.state;
 
     const inputType = type === 'password' && showPassword ? 'text' : type;
 
@@ -144,12 +145,9 @@ class InputComponent extends Component<IProps, IState> {
               [`${classes.wrapper}`]: true,
               [`${classes.disabled}`]: disabled,
               [`${classes.hasError}`]: error,
-            })}>
-            {prefix && (
-              <span className={classes.prefix}>
-                {prefix}
-              </span>
-            )}
+            })}
+          >
+            {prefix && <span className={classes.prefix}>{prefix}</span>}
             <input
               id={id}
               type={inputType}
@@ -168,30 +166,29 @@ class InputComponent extends Component<IProps, IState> {
               max={max}
               step={step}
             />
-            {suffix && (
-              <span className={classes.suffix}>
-                {suffix}
-              </span>
-            )}
+            {suffix && <span className={classes.suffix}>{suffix}</span>}
             {showPasswordToggle && (
               <button
                 type="button"
                 className={classes.formModifier}
-                onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
+                onClick={() =>
+                  this.setState(prevState => ({
+                    showPassword: !prevState.showPassword,
+                  }))
+                }
                 tabIndex={-1}
               >
-                <Icon
-                  path={!showPassword ? mdiEye : mdiEyeOff}
-                  size={1}
-                />
+                <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} />
               </button>
             )}
           </div>
           {scorePassword && (
-            <div className={classnames({
-              [`${classes.passwordScore}`]: true,
-              [`${classes.hasError}`]: error,
-            })}>
+            <div
+              className={classnames({
+                [`${classes.passwordScore}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+            >
               <meter
                 value={passwordScore < 5 ? 5 : passwordScore}
                 low={30}
@@ -202,9 +199,7 @@ class InputComponent extends Component<IProps, IState> {
             </div>
           )}
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts
index 0b7719ec1..bc30de4b8 100644
--- a/packages/forms/src/input/scorePassword.ts
+++ b/packages/forms/src/input/scorePassword.ts
@@ -11,7 +11,7 @@ interface IVariations {
 }
 
 export function scorePasswordFunc(password: string): number {
-  let score: number = 0;
+  let score = 0;
   if (!password) {
     return score;
   }
@@ -32,8 +32,8 @@ export function scorePasswordFunc(password: string): number {
   };
 
   let variationCount = 0;
-  Object.keys(variations).forEach((key) => {
-    variationCount += (variations[key] === true) ? 1 : 0;
+  Object.keys(variations).forEach(key => {
+    variationCount += variations[key] === true ? 1 : 0;
   });
 
   score += (variationCount - 1) * 10;
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index 1b33ba22c..ad503b785 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -7,7 +7,9 @@ import { IFormField } from '../typings/generic';
 
 import styles from './styles';
 
-interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> {
+interface ILabel
+  extends IFormField,
+    React.LabelHTMLAttributes<HTMLLabelElement> {
   classes: Classes;
   isRequired: boolean;
 }
@@ -38,11 +40,12 @@ class LabelComponent extends Component<ILabel> {
         htmlFor={htmlFor}
       >
         {showLabel && (
-          <span className={classes.label}>{title}{isRequired && ' *'}</span>
+          <span className={classes.label}>
+            {title}
+            {isRequired && ' *'}
+          </span>
         )}
-        <div className={classes.content}>
-          {children}
-        </div>
+        <div className={classes.content}>{children}</div>
       </label>
     );
   }
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index e5b59cb19..4a5775579 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -1,4 +1,8 @@
-import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi/js';
+import {
+  mdiArrowRightDropCircleOutline,
+  mdiCloseCircle,
+  mdiMagnify,
+} from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import React, { Component, createRef } from 'react';
@@ -58,7 +62,7 @@ const styles = (theme: Theme) => ({
   label: {
     '& > div': {
       marginTop: 5,
-    }
+    },
   },
   popup: {
     opacity: 0,
@@ -153,9 +157,13 @@ class SelectComponent extends Component<IProps> {
   };
 
   private componentRef = createRef<HTMLDivElement>();
+
   private inputRef = createRef<HTMLInputElement>();
+
   private searchInputRef = createRef<HTMLInputElement>();
+
   private scrollContainerRef = createRef<HTMLDivElement>();
+
   private activeOptionRef = createRef<HTMLDivElement>();
 
   private keyListener: any;
@@ -168,7 +176,7 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  componentDidUpdate(prevProps: IProps, prevState: IState) {
+  componentDidUpdate() {
     const { open } = this.state;
 
     if (this.searchInputRef && this.searchInputRef.current) {
@@ -183,7 +191,9 @@ class SelectComponent extends Component<IProps> {
       const { data } = this.props;
 
       if (data) {
-        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
       }
     }
 
@@ -194,7 +204,10 @@ class SelectComponent extends Component<IProps> {
     const { value } = this.props;
 
     if (this.componentRef && this.componentRef.current) {
-      this.componentRef.current.removeEventListener('keydown', this.keyListener);
+      this.componentRef.current.removeEventListener(
+        'keydown',
+        this.keyListener,
+      );
     }
 
     if (value) {
@@ -210,13 +223,18 @@ class SelectComponent extends Component<IProps> {
     window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
   }
 
-  setFilter(needle: string = '') {
+  setFilter(needle = '') {
     const { options } = this.props;
 
     let filteredOptions = {};
     if (needle) {
-      Object.keys(options).map((key) => {
-        if (key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) || options[key].toLocaleLowerCase().startsWith(needle.toLocaleLowerCase())) {
+      Object.keys(options).map(key => {
+        if (
+          key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) ||
+          options[key]
+            .toLocaleLowerCase()
+            .startsWith(needle.toLocaleLowerCase())
+        ) {
           Object.assign(filteredOptions, {
             [`${key}`]: options[key],
           });
@@ -234,7 +252,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   select(key: string) {
-    this.setState((state: IState) => ({
+    this.setState(() => ({
       value: key,
       open: false,
     }));
@@ -247,11 +265,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   arrowKeysHandler(e: KeyboardEvent) {
-    const {
-      selected,
-      open,
-      options,
-    } = this.state;
+    const { selected, open, options } = this.state;
 
     if (!open) return;
 
@@ -264,7 +278,10 @@ class SelectComponent extends Component<IProps> {
         this.setState((state: IState) => ({
           selected: state.selected - 1,
         }));
-      } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
+      } else if (
+        e.keyCode === 40 &&
+        selected < Object.keys(options!).length - 1
+      ) {
         this.setState((state: IState) => ({
           selected: state.selected + 1,
         }));
@@ -272,7 +289,12 @@ class SelectComponent extends Component<IProps> {
         this.select(Object.keys(options!)[selected]);
       }
 
-      if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
+      if (
+        this.activeOptionRef &&
+        this.activeOptionRef.current &&
+        this.scrollContainerRef &&
+        this.scrollContainerRef.current
+      ) {
         const containerTopOffset = this.scrollContainerRef.current.offsetTop;
         const optionTopOffset = this.activeOptionRef.current.offsetTop;
 
@@ -282,10 +304,15 @@ class SelectComponent extends Component<IProps> {
       }
     }
 
-    switch (e.keyCode){
-      case 37: case 39: case 38:  case 40: // Arrow keys
-      case 32:  break; // Space
-      default: break; // do not block other keys
+    switch (e.keyCode) {
+      case 37:
+      case 39:
+      case 38:
+      case 40: // Arrow keys
+      case 32:
+        break; // Space
+      default:
+        break; // do not block other keys
     }
   }
 
@@ -307,13 +334,7 @@ class SelectComponent extends Component<IProps> {
       required,
     } = this.props;
 
-    const {
-      open,
-      needle,
-      value,
-      selected,
-      options,
-    } = this.state;
+    const { open, needle, value, selected, options } = this.state;
 
     let selection = '';
     if (!value && defaultValue && options![defaultValue]) {
@@ -325,10 +346,7 @@ class SelectComponent extends Component<IProps> {
     }
 
     return (
-      <Wrapper
-        className={className}
-        identifier="franz-select"
-      >
+      <Wrapper className={className} identifier="franz-select">
         <Label
           title={label}
           showLabel={showLabel}
@@ -345,14 +363,19 @@ class SelectComponent extends Component<IProps> {
           >
             <button
               type="button"
-               className={classnames({
-                 [`${inputClassName}`]: inputClassName,
-                 [`${classes.select}`]: true,
-                 [`${classes.hasError}`]: error,
-               })}
-              onClick= {!disabled ? () => this.setState((state: IState) => ({
-                open: !state.open,
-              })) : () => {}}
+              className={classnames({
+                [`${inputClassName}`]: inputClassName,
+                [`${classes.select}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+              onClick={
+                !disabled
+                  ? () =>
+                      this.setState((state: IState) => ({
+                        open: !state.open,
+                      }))
+                  : () => {}
+              }
             >
               {selection}
               <Icon
@@ -366,10 +389,7 @@ class SelectComponent extends Component<IProps> {
             </button>
             {showSearch && open && (
               <div className={classes.searchContainer}>
-                <Icon
-                  path={mdiMagnify}
-                  size={0.8}
-                />
+                <Icon path={mdiMagnify} size={0.8} />
                 <input
                   type="text"
                   value={needle}
@@ -384,10 +404,7 @@ class SelectComponent extends Component<IProps> {
                     className={classes.clearNeedle}
                     onClick={() => this.setFilter()}
                   >
-                    <Icon
-                      path={mdiCloseCircle}
-                      size={0.7}
-                    />
+                    <Icon path={mdiCloseCircle} size={0.7} />
                   </button>
                 )}
               </div>
@@ -399,7 +416,7 @@ class SelectComponent extends Component<IProps> {
               })}
               ref={this.scrollContainerRef}
             >
-              {Object.keys(options!).map(((key, i) => (
+              {Object.keys(options!).map((key, i) => (
                 <div
                   key={key}
                   onClick={() => this.select(key)}
@@ -413,7 +430,7 @@ class SelectComponent extends Component<IProps> {
                 >
                   {options![key]}
                 </div>
-              )))}
+              ))}
             </div>
           </div>
           <input
@@ -427,9 +444,7 @@ class SelectComponent extends Component<IProps> {
             ref={this.inputRef}
           />
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx
index 31c572d1c..2d89d1c9f 100644
--- a/packages/forms/src/textarea/index.tsx
+++ b/packages/forms/src/textarea/index.tsx
@@ -14,7 +14,10 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, IFormField, IWithStyle {
+interface IProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    IFormField,
+    IWithStyle {
   focus?: boolean;
   data: IData;
   textareaClassName?: string;
@@ -37,14 +40,14 @@ class TextareaComponent extends Component<IProps> {
     const { data } = this.props;
 
     if (this.textareaRef && this.textareaRef.current && data) {
-      Object.keys(data).map(key => this.textareaRef.current!.dataset[key] = data[key]);
+      Object.keys(data).map(
+        key => (this.textareaRef.current!.dataset[key] = data[key]),
+      );
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
-    const {
-      onChange,
-    } = this.props;
+    const { onChange } = this.props;
 
     if (onChange) {
       onChange(e);
@@ -57,7 +60,6 @@ class TextareaComponent extends Component<IProps> {
       className,
       disabled,
       error,
-      focus,
       id,
       textareaClassName,
       label,
@@ -94,9 +96,9 @@ class TextareaComponent extends Component<IProps> {
               [`${classes.wrapper}`]: true,
               [`${classes.disabled}`]: disabled,
               [`${classes.hasError}`]: error,
-            })}>
+            })}
+          >
             <textarea
-              autoFocus={focus}
               id={id}
               name={name}
               placeholder={placeholder}
@@ -115,9 +117,7 @@ class TextareaComponent extends Component<IProps> {
             </textarea>
           </div>
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index b146236df..a9970c8f1 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -3,7 +3,7 @@ import { Property } from 'csstype';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { IFormField, IWithStyle, Omit } from '../typings/generic';
+import { IFormField, IWithStyle } from '../typings/generic';
 import { Theme } from '../../../theme';
 
 import { Error } from '../error';
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index cf179bc5e..3ae551e2c 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -12,18 +12,13 @@ interface IProps extends IWithStyle {
 
 const styles = {
   container: {
-    marginBottom: (props: IProps) => props.noMargin ? 0 : 20,
+    marginBottom: (props: IProps) => (props.noMargin ? 0 : 20),
   },
 };
 
 class WrapperComponent extends Component<IProps> {
   render() {
-    const {
-      children,
-      classes,
-      className,
-      identifier,
-    } = this.props;
+    const { children, classes, className, identifier } = this.props;
 
     return (
       <div
-- 
cgit v1.2.3-70-g09d2