chore: add eslint to enforce code quality

.eslintrc.yml

@@ -0,0 +1,50 @@
+parser: '@typescript-eslint/parser'
+
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: latest
+  sourceType: module
+
+env:
+  node: true
+
+plugins:
+  - '@typescript-eslint'
+  - 'prettier'
+
+extends:
+  - eslint:recommended
+  - plugin:@typescript-eslint/eslint-recommended
+  - plugin:@typescript-eslint/recommended
+  - plugin:prettier/recommended
+
+settings:
+  import/resolver:
+    typescript:
+    node: true
+
+rules:
+  '@typescript-eslint/no-unused-vars':
+    - error
+    - argsIgnorePattern: '^_'
+
+  no-empty: off
+
+  padding-line-between-statements:
+    - error
+    - blankLine: always
+      prev: '*'
+      next: return
+    - blankLine: always
+      prev: '*'
+      next: if
+    - blankLine: always
+      prev: 'if'
+      next: '*'
+    - blankLine: always
+      prev: '*'
+      next: switch
+    - blankLine: always
+      prev: switch
+      next: '*'

.lintstagedrc.yml

@@ -1,2 +1,3 @@
 'package.json': 'sort-package-json'
+'*.{js,jsx,ts,tsx}': 'eslint --fix'
 '*.{js,jsx,ts,tsx,md,html,css,json,yml,yaml}': 'prettier --write'

package.json

@@ -30,12 +30,17 @@
     "@types/byte-size": "^8.1.0",
     "@types/node": "^20.5.8",
     "@types/uuid": "^9.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "apexcharts": "^3.42.0",
     "autoprefixer": "^10.4.15",
     "byte-size": "^8.1.1",
     "commitlint": "^17.7.1",
     "daisyui": "^3.6.4",
     "dayjs": "^1.11.9",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "husky": "^8.0.3",
     "is-ip": "^5.0.1",
     "ky": "^1.0.0",

src/components/Collapse.tsx

@@ -15,12 +15,14 @@ export const Collapse: ParentComponent<Props> = (props) => {
   const getCollapseClassName = () => {
     const openedClassName = 'collapse-open'
     const closedClassName = 'collapse-close'
+
     return props.isOpen ? openedClassName : closedClassName
   }
 
   const getCollapseContentClassName = () => {
     const openedClassName = 'opacity-100'
     const closedClassName = 'opacity-0'
+
     return props.isOpen ? openedClassName : closedClassName
   }
 
@@ -36,7 +38,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
     <div
       class={twMerge(
         getCollapseClassName(),
-        'collapse collapse-arrow mb-2 select-none overflow-visible border-secondary bg-base-200',
+        'collapse-arrow collapse mb-2 select-none overflow-visible border-secondary bg-base-200',
       )}
     >
       <div

src/components/SubscriptionInfo.tsx

@@ -34,6 +34,7 @@ export const SubscriptionInfo = (props: {
   if (!props.subscriptionInfo) {
     return
   }
+
   const info = getSubscriptionsInfo(props.subscriptionInfo)
 
   return (

src/i18n/index.tsx

@@ -20,7 +20,7 @@ const useLanguage = () => {
 
 const I18nUpdator: ParentComponent = (props) => {
   const { setLang } = useLanguage()
-  const [_, { locale }] = useI18n()
+  const [, { locale }] = useI18n()
 
   createEffect(() => {
     setLang(locale())

src/index.css

@@ -13,7 +13,7 @@
 :root,
 [data-theme='wireframe'],
 [data-theme='cyberpunk'] {
-  font-family: 'Fira Sans', 'Twemoji Mozilla';
+  font-family: 'Fira Sans', 'Twemoji Mozilla', system-ui, monospace;
 }
 
 ::-webkit-scrollbar {

src/pages/Config.tsx

@@ -61,10 +61,7 @@ const DNSQueryForm = () => {
   return (
     <div class="flex flex-col">
       <form use:form={form} class="flex flex-col gap-2 sm:flex-row">
-        <input
+        <input name="name" class="input input-bordered w-full sm:flex-1" />
-          name="name"
-          class="input input-bordered w-full max-w-xs sm:flex-1"
-        />
         <div class="flex items-center gap-2">
           <select name="type" class="select select-bordered">
             <option>A</option>
@@ -168,10 +165,11 @@ const ConfigForm = () => {
       <form class="contents" use:form={form}>
         <For each={portsList}>
           {(item) => (
-            <div class="form-control w-64 max-w-xs">
+            <div class="form-control w-64 max-w-sm">
               <label class="label">
                 <span class="label-text">{item.label}</span>
               </label>
+
               <input
                 name={item.key}
                 type="number"
@@ -183,7 +181,7 @@ const ConfigForm = () => {
         </For>
       </form>
 
-      <div class="flex items-center gap-2">
+      <div class="flex flex-wrap items-center gap-2">
         <Button loading={updatingGEODatabases()} onClick={onUpdateGEODatabases}>
           {t('updateGEODatabases')}
         </Button>
@@ -329,7 +327,7 @@ const ConfigForXd = () => {
         <input
           class="w-100 input input-bordered max-w-md"
           value={urlForLatencyTest()}
-          onChange={(e) => setUrlForLatencyTest(e.target?.value!)}
+          onChange={(e) => setUrlForLatencyTest(e.target.value)}
         />
       </div>
     </div>

src/pages/Setup.tsx

@@ -63,6 +63,7 @@ export default () => {
       }
 
       onSetupSuccess(id)
+
       return
     }
 
@@ -100,6 +101,7 @@ export default () => {
       })
     }
   })
+
   return (
     <div class="mx-auto flex flex-col items-center gap-4 py-10 sm:w-2/3">
       <form class="contents" use:form={form}>

src/types.d.ts

@@ -1,7 +1,7 @@
 declare module 'solid-js' {
   namespace JSX {
     interface Directives {
-      [name: string]: {}
+      [name: string]: unknown
     }
   }
 }

tailwind.config.ts

@@ -1,5 +1,8 @@
+import daisyui from 'daisyui'
+import { Config } from 'tailwindcss'
+
 export default {
   content: ['./src/**/*.{css,tsx}'],
-  plugins: [require('daisyui')],
+  plugins: [daisyui],
   daisyui: { themes: true },
-}
+} as Config