Refactor (#11)

* refactor code

* refactor and added doc comment

* refactor item class and fix conflict on search

* added husky and eslint

* update lint-staged cmd

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/no-explicit-any" : "off"
+    }
+}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged

.prettierrc

@@ -1,5 +1,5 @@
 {
-    "printWidth": 80,
+    "printWidth": 100,
     "trailingComma": "all",
     "singleQuote": true,
     "semi": false

README.md

@@ -170,15 +170,19 @@ const searchJs = SearchJS({
 - `github-light`
 
 ##### Github Dark (github-dark)
+
 <img width="350" src="https://raw.githubusercontent.com/necessarylion/search-js/main/demo/github-dark.png" />
 
 ##### Github Light (github-light)
+
 <img width="350" src="https://raw.githubusercontent.com/necessarylion/search-js/main/demo/github-light.png" />
 
 ##### Light Theme with color code
+
 <img width="350" src="https://raw.githubusercontent.com/necessarylion/search-js/main/demo/dark-theme.png" />
 
 ##### Dark Theme with color code
+
 <img width="350" src="https://raw.githubusercontent.com/necessarylion/search-js/main/demo/light-theme.png" />
 
 #### Custom theme color
@@ -191,11 +195,10 @@ Override below css variables for custom theme color.
 root {
   --search-js-backdrop-bg: rgba(101, 108, 133, 0.8);
   --search-js-modal-bg: #f5f6f7;
-  --search-js-modal-box-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px
-      8px 0 #555a64;
+  --search-js-modal-box-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64;
   --search-js-modal-footer-box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
-  --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0
-      1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+  --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
+    0 1px 2px 1px rgba(30, 35, 90, 0.4);
   --search-js-keyboard-button-bg: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
   --search-js-search-input-bg: white;
   --search-js-item-bg: white;
@@ -212,15 +215,10 @@ root {
   --search-js-backdrop-bg: rgba(47, 55, 69, 0.7);
   --search-js-modal-bg: #1b1b1d;
   --search-js-modal-box-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  --search-js-modal-footer-box-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px
-      8px 0 rgba(0, 0, 0, 0.2);
-  --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #282d55, inset 0 0
-      1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3);
-  --search-js-keyboard-button-bg: linear-gradient(
-    -26.5deg,
-    var(--ifm-color-emphasis-200) 0%,
-    var(--ifm-color-emphasis-100) 100%
-  );
+  --search-js-modal-footer-box-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+  --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
+    0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  --search-js-keyboard-button-bg: linear-gradient(-26.5deg, transparent 0%, transparent 100%);
   --search-js-search-input-bg: black;
   --search-js-item-bg: #1c1e21;
   --search-js-text-color: #b3b3b3;

index.html

@@ -25,7 +25,7 @@
     }
 
     const searchJs = SearchJS({
-      theme: 'github-dark',
+      theme: 'github-light',
       width: '600px',
       positionTop: '50px',
       data: [],