feat: configure eslint and fix all eslint issues

IFRCGo · Jun 29, 2023 · b9f8a1e · b9f8a1e
1 parent 5fb3885
commit b9f8a1e
Show file tree

Hide file tree

Showing 12 changed files with 615 additions and 160 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,13 +1,18 @@
 module.exports = {
-  env: {
-    browser: true,
-    commonjs: true,
-    es2021: true,
-  },
-  extends: 'airbnb-base',
-  overrides: [
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-  },
+    env: {
+        browser: true,
+        commonjs: true,
+        es2021: true,
+    },
+    extends: ['airbnb-base', 'airbnb-typescript/base'],
+    root: true,
+    parserOptions: {
+        ecmaVersion: 'latest',
+        project: './tsconfig.json',
+    },
+    ignorePatterns: ['gh-pages/'],
+    rules: {
+        indent: ['error', 4],
+        '@typescript-eslint/indent': ['error', 4],
+    },
 };
diff --git a/gh-pages/.eslintrc.json b/gh-pages/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+    "root": true,
+    "extends": [
+        "airbnb",
+        "airbnb-typescript",
+        "next/core-web-vitals",
+        "plugin:tailwindcss/recommended"
+    ],
+    "parserOptions": {
+        "project": "./tsconfig.json"
+    },
+    "rules": {
+        "indent": ["error", 4],
+        "react/jsx-indent": [2, 4],
+        "react/jsx-indent-props": [2, 4],
+        "@typescript-eslint/indent": [ "error", 4]
+    }
+}
diff --git a/gh-pages/app/layout.tsx b/gh-pages/app/layout.tsx
@@ -1,21 +1,21 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+import './globals.css';
+import { Inter } from 'next/font/google';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata = {
     title: 'IFRC GO Icons',
     description: 'React Icons library for IFRC GO project',
-}
+};
 
 export default function RootLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode
+    children: React.ReactNode
 }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
+    return (
+        <html lang="en">
+            <body className={inter.className}>{children}</body>
+        </html>
+    );
 }
diff --git a/gh-pages/app/page.tsx b/gh-pages/app/page.tsx
@@ -1,25 +1,26 @@
-"use client";
-const icons = require('@ifrc-go/icons');
-const pkg = require('package.json');
+'use client';
 
 import toast, { Toaster } from 'react-hot-toast';
+
+import { useState, useCallback, ElementType } from 'react';
 import SadFaceIcon from './svg/sadface.svg';
 import GoIcon from './svg/logo.svg';
 import DotIcon from './svg/dot.svg';
 import SearchIcon from './svg/search.svg';
 import { useDebounce } from './useDebounce';
 
-import { useState, useCallback, ElementType } from 'react';
+const icons = require('@ifrc-go/icons');
+const pkg = require('package.json');
 
 function Icons({ search }: { search: string }) {
     const filteredIcons: Record<string, ElementType> = search.length > 1 ? Object.keys(icons)
-    .filter(key => key.match(new RegExp(search, "i")))
-    .reduce((acc, key) => {
-        acc[key] = icons[key];
-        return acc;
-    }, {} as Record<string, ElementType>) : icons;
+        .filter((key) => key.match(new RegExp(search, 'i')))
+        .reduce((acc, key) => {
+            acc[key] = icons[key];
+            return acc;
+        }, {} as Record<string, ElementType>) : icons;
 
-    const [selectedIcon, setSelectedIcon]  = useState<string>();
+    const [selectedIcon, setSelectedIcon] = useState<string>();
 
     const handleIconClick = useCallback((value: string) => {
         navigator.clipboard.writeText(value);
@@ -30,32 +31,39 @@ function Icons({ search }: { search: string }) {
     if (search && Object.keys(filteredIcons).length === 0) {
         return (
             <div className="flex flex-col items-center py-20 text-sm
-                leading-6 text-slate-600 md:py-24 lg:py-32">
+                leading-6 text-slate-600 md:py-24 lg:py-32"
+            >
                 <SadFaceIcon className="h-8" />
                 <p className="mt-6">
-                    Sorry! we don’t have icons for{' '}
-                    <span className="font-semibold text-slate-900">{`“${search}”`}</span>.
+                    Sorry! we don’t have icons for
+                    {' '}
+                    <span className="font-semibold text-slate-900">{`“${search}”`}</span>
+                    .
                 </p>
             </div>
-        )
+        );
     }
 
     return (
         <div className="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]
-            gap-6 pb-16 pt-10">
+            gap-6 pb-16 pt-10"
+        >
             {Object.entries(filteredIcons).map(([key, Component]) => (
-                <div className={`mx-auto cursor-pointer rounded-lg p-6 text-3xl text-slate-900
+                <div
+                    className={`mx-auto cursor-pointer rounded-lg p-6 text-3xl text-slate-900
                         hover:shadow-md ${key === selectedIcon ? 'bg-slate-100' : 'bg-white'}`}
                     role="button"
                     aria-label={key}
                     key={key}
                     onClick={() => handleIconClick(key)}
+                    onKeyDown={() => handleIconClick(key)}
+                    tabIndex={0}
                 >
                     <Component />
                 </div>
             ))}
         </div>
-    )
+    );
 }
 
 function Header() {
@@ -97,7 +105,7 @@ function Header() {
                 </div>
             </div>
         </header>
-    )
+    );
 }
 
 export default function App() {
@@ -109,7 +117,8 @@ export default function App() {
             <Header />
             <main className="relative flex grow flex-col">
                 <div className="container mx-auto flex max-w-7xl flex-col
-                    px-4 sm:flex-row sm:items-center sm:px-6 lg:px-8">
+                    px-4 sm:flex-row sm:items-center sm:px-6 lg:px-8"
+                >
                     <div className="relative inset-0 flex-auto shadow-[inset_0_-1px_0_rgba(22,27,59,0.04)]">
                         <input
                             type="search"
@@ -125,15 +134,17 @@ export default function App() {
                                 [&::-webkit-search-results-decoration]:appearance-none"
                         />
                         <SearchIcon className="pointer-events-none absolute inset-y-0
-                            left-0 h-full w-5 fill-slate-500 transition" />
+                            left-0 h-full w-5 fill-slate-500 transition"
+                        />
                     </div>
                 </div>
                 <div className="container mx-auto max-w-7xl grow px-4 sm:px-6 lg:px-8">
                     <Icons search={debouncedSearch} />
                 </div>
                 <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                     <footer className="flex max-w-7xl flex-col items-center gap-10 border-t
-                        border-slate-400/20 pb-20 pt-10 sm:flex-row">
+                        border-slate-400/20 pb-20 pt-10 sm:flex-row"
+                    >
                         <p className="flex items-center gap-3 text-sm leading-6 text-slate-900">
                             <GoIcon className="h-8" />
                             <span>
@@ -148,17 +159,19 @@ export default function App() {
                     </footer>
                 </div>
             </main>
-            <Toaster position="bottom-center" containerStyle={{
-                position: 'sticky',
-                bottom: '2.5rem',
-            }}
+            <Toaster
+                position="bottom-center"
+                containerStyle={{
+                    position: 'sticky',
+                    bottom: '2.5rem',
+                }}
                 toastOptions={{
                     style: {
-                        maxWidth: 500
-                    }
+                        maxWidth: 500,
+                    },
                 }}
             />
 
         </div>
-    )
+    );
 }
diff --git a/gh-pages/app/useDebounce.ts b/gh-pages/app/useDebounce.ts
@@ -1,15 +1,16 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
+// eslint-disable-next-line import/prefer-default-export
 export function useDebounce<T>(value: T, delay?: number): T {
-    const [debouncedValue, setDebouncedValue] = useState<T>(value)
+    const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
     useEffect(() => {
-        const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
+        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
 
         return () => {
-            clearTimeout(timer)
-        }
-    }, [value, delay])
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
 
-    return debouncedValue
+    return debouncedValue;
 }
diff --git a/gh-pages/package.json b/gh-pages/package.json
@@ -1,6 +1,7 @@
 {
   "name": "go-icons-gh-pages",
   "version": "0.1.0",
+  "license": "MIT",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -15,7 +16,7 @@
     "@types/react-dom": "18.2.4",
     "autoprefixer": "10.4.14",
     "clsx": "^1.2.1",
-    "eslint": "8.41.0",
+    "eslint": "^8.2.0",
     "eslint-config-next": "13.4.4",
     "next": "13.4.4",
     "postcss": "8.4.24",
@@ -27,6 +28,14 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-tailwindcss": "^3.13.0"
   }
 }
diff --git a/gh-pages/svgo.config.js b/gh-pages/svgo.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+    plugins: [
+        {
+            name: 'preset-default',
+        },
+        {
+            name: 'removeDimensions',
+        },
+    ],
+};