refactor(web) add eslint (#222)

* fix(tsconfig.json): changed skipLibCheck to false.
refactor(eslint): moved configuration from package.json to .eslintrc.js and added a typescript plugin for future use

* feat: wip eslint and types

* feat: fix identation

* feat: get rid of last any types

web/src/screens/settings/RegexPlayground.tsx

@@ -1,106 +1,105 @@
 import { useRef, useState } from "react";
 
 export const RegexPlayground = () => {
-    const regexRef = useRef<HTMLInputElement>(null);
-    const [output, setOutput] = useState<Array<React.ReactElement>>();
+  const regexRef = useRef<HTMLInputElement>(null);
+  const [output, setOutput] = useState<Array<React.ReactElement>>();
 
-    const onInput = (text: string) => {
-        if (!regexRef || !regexRef.current)
-            return;
+  const onInput = (text: string) => {
+    if (!regexRef || !regexRef.current)
+      return;
         
-        const regexp = new RegExp(regexRef.current.value, "g");
+    const regexp = new RegExp(regexRef.current.value, "g");
 
-        const results: Array<React.ReactElement> = [];
-        text.split("\n").forEach((line, index) => {
-            const matches = line.matchAll(regexp);
+    const results: Array<React.ReactElement> = [];
+    text.split("\n").forEach((line, index) => {
+      const matches = line.matchAll(regexp);
 
-            let lastIndex = 0;
-            // @ts-ignore
-            for (const match of matches) {
-                if (match.index === undefined)
-                    continue;
+      let lastIndex = 0;
+      for (const match of matches) {
+        if (match.index === undefined)
+          continue;
 
-                if (!match.length)
-                    continue;
+        if (!match.length)
+          continue;
 
-                const start = match.index;
+        const start = match.index;
 
-                let length = 0;
-                match.forEach((group) => length += group.length);
+        let length = 0;
+        match.forEach((group) => length += group.length);
 
-                results.push(
-                    <span key={`match-${start}`}>
-                        {line.substring(lastIndex, start)}
-                        <span className="bg-blue-300 text-black font-bold">
-                            {line.substring(start, start + length)}
-                        </span>
-                    </span>
-                );
-                lastIndex = start + length;
-            }
+        results.push(
+          <span key={`match-${start}`}>
+            {line.substring(lastIndex, start)}
+            <span className="bg-blue-300 text-black font-bold">
+              {line.substring(start, start + length)}
+            </span>
+          </span>
+        );
+        lastIndex = start + length;
+      }
 
-            if (lastIndex < line.length) {
-                results.push(
-                    <span key={`last-${lastIndex + 1}`}>
-                        {line.substring(lastIndex)}
-                    </span>
-                );
-            }
+      if (lastIndex < line.length) {
+        results.push(
+          <span key={`last-${lastIndex + 1}`}>
+            {line.substring(lastIndex)}
+          </span>
+        );
+      }
             
-            if (lastIndex > 0)
-                results.push(<br key={`line-delim-${index}`}/>);
-        });
+      if (lastIndex > 0)
+        results.push(<br key={`line-delim-${index}`}/>);
+    });
 
-        setOutput(results);
-    }
+    setOutput(results);
+  };
 
-    return (
-        <div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
-            <div className="py-6 px-4 sm:p-6 lg:pb-8">
-                <div>
-                    <h2 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Application</h2>
-                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+  return (
+    <div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
+      <div className="py-6 px-4 sm:p-6 lg:pb-8">
+        <div>
+          <h2 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Application</h2>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                         Regex playground. Experiment with your filters here. WIP.
-                    </p>
-                </div>
-            </div>
-            <div className="px-6 py-4">
-                <label
-                    htmlFor="input-regex"
-                    className="block text-sm font-medium text-gray-600 dark:text-gray-300"
-                >
-                    RegExp filter
-                </label>
-                <input
-                    ref={regexRef}
-                    id="input-regex"
-                    type="text"
-                    autoComplete="true"
-                    className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
-                />
-                <label
-                    htmlFor="input-lines"
-                    className="block text-sm font-medium text-gray-600 dark:text-gray-300"
-                >
-                    Lines to match
-                </label>
-                <div
-                    id="input-lines"
-                    className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
-                    onInput={(e) => onInput(e.currentTarget.innerText ?? "")}
-                    contentEditable
-                ></div>
-            </div>
-            <div className="py-4 px-4 sm:p-6 lg:pb-8">
-                <div>
-                    <h3 className="text-md leading-6 font-medium text-gray-900 dark:text-white">
-                        Matches
-                    </h3>
-                    <p className="mt-1 text-lg text-gray-500 dark:text-gray-400">
-                        {output}
-                    </p>
-                </div>
-            </div>
+          </p>
         </div>
-    );
-}
+      </div>
+      <div className="px-6 py-4">
+        <label
+          htmlFor="input-regex"
+          className="block text-sm font-medium text-gray-600 dark:text-gray-300"
+        >
+                    RegExp filter
+        </label>
+        <input
+          ref={regexRef}
+          id="input-regex"
+          type="text"
+          autoComplete="true"
+          className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+        />
+        <label
+          htmlFor="input-lines"
+          className="block text-sm font-medium text-gray-600 dark:text-gray-300"
+        >
+                    Lines to match
+        </label>
+        <div
+          id="input-lines"
+          className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+          onInput={(e) => onInput(e.currentTarget.innerText ?? "")}
+          contentEditable
+        ></div>
+      </div>
+      <div className="py-4 px-4 sm:p-6 lg:pb-8">
+        <div>
+          <h3 className="text-md leading-6 font-medium text-gray-900 dark:text-white">
+                        Matches
+          </h3>
+          <p className="mt-1 text-lg text-gray-500 dark:text-gray-400">
+            {output}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};