Add eslint workflow check and fix errors (#29)

* Install tailwind prettier plugin and editorconfig

* Update lint and lint:fix scripts with prettier

* Auto format

* Add git blame ignore revs

* Fix eslint errors

* Add eslint workflow

* Add -- to pass flags to sub process

* Add format declaration to eslint workflow

* Add dependency for sarif file formatter

* Split up eslint and prettier lint runs

* Fix prettier config

* Use correct ext for prettier ext

* Format with prettier

* Run prettier after eslint uploads, fail prettier on error

* Use cjs ext for prettier after rebase

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Use spaces instead of tabs
+[*]
+indent_style = space
+
+# Insert new line at the end of files
+[*]
+insert_final_newline = true

.git-blame-ignore-revs

@@ -0,0 +1,3 @@
+# .git-blame-ignore-revs
+# Ignore changes in git blame for specific revisions
+4f8e868bd796996bc91e1b6139a77427ac97a30e # Add prettier plugin for tailwind css sort classes

.github/workflows/eslint.yml

@@ -0,0 +1,54 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: Eslint and Prettier
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install ESLint
+        run: |
+          npm install [email protected]
+          npm install @microsoft/[email protected]
+
+      - name: Run ESLint
+        run: npx eslint .
+          --config .eslintrc.cjs
+          --ext .js,.jsx,.ts,.tsx
+          --format @microsoft/eslint-formatter-sarif
+          --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true
+
+      - name: Run Prettier
+        run: npx prettier src/
+          --check
+          --config .prettierrc.cjs
+        continue-on-error: false

.prettierrc.js → .prettierrc.cjs

@@ -1,11 +1,10 @@
 // prettier.config.js, .prettierrc.js, prettier.config.mjs, or .prettierrc.mjs
 
 /** @type {import("prettier").Config} */
-const config = {
+module.exports = {
+    plugins: ['prettier-plugin-tailwindcss'],
     trailingComma: 'es5',
     tabWidth: 4,
     semi: false,
     singleQuote: true,
 }
-
-export default config

package.json

@@ -6,7 +6,8 @@
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",
-        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0; prettier --check \"src/**/*.{ts,tsx}\"",
+        "lint:fix": "eslint . --ext ts,tsx --fix; prettier --write \"src/**/*.{ts,tsx}\"",
         "preview": "vite preview"
     },
     "dependencies": {
@@ -40,6 +41,7 @@
         "eslint-plugin-react-refresh": "^0.4.5",
         "postcss": "^8.4.32",
         "prettier": "3.1.1",
+        "prettier-plugin-tailwindcss": "^0.5.9",
         "tailwindcss": "^3.3.6",
         "typescript": "^5.2.2",
         "vite": "^5.0.8"

src/App.tsx

@@ -5,7 +5,7 @@ import { Footer } from '@/components/Footer/Footer.tsx'
 
 function App() {
     return (
-        <div className="relative w-screen min-h-screen bg-orange-50">
+        <div className="relative min-h-screen w-screen bg-orange-50">
             <Navigation />
             <HomePage />
             <Footer />

src/components/Auth/Auth.tsx

@@ -82,7 +82,7 @@ export default function Auth({ view }: AuthProps) {
             />
             <button
                 title={!formValid ? 'Email required' : ''}
-                className="block my-4 disabled:bg-orange-200 disabled:text-gray-600 rounded-full bg-orange-400 w-full py-2"
+                className="my-4 block w-full rounded-full bg-orange-400 py-2 disabled:bg-orange-200 disabled:text-gray-600"
                 disabled={!formValid}
                 onClick={sendResetEmail}
             >
@@ -100,7 +100,7 @@ export default function Auth({ view }: AuthProps) {
         <>
             <button
                 onClick={signInWithGoogle}
-                className="w-full mb-4 flex bg-white rounded-full gap-2 items-center px-4 py-2 justify-center"
+                className="mb-4 flex w-full items-center justify-center gap-2 rounded-full bg-white px-4 py-2"
             >
                 <FcGoogle size="1rem" />
                 <div>Sign in with Google</div>
@@ -130,20 +130,20 @@ export default function Auth({ view }: AuthProps) {
             />
             <button
                 title={!formValid ? 'All fields must be valid' : ''}
-                className="block my-4 disabled:bg-orange-200 disabled:text-gray-600 rounded-full bg-orange-400 w-full py-2"
+                className="my-4 block w-full rounded-full bg-orange-400 py-2 disabled:bg-orange-200 disabled:text-gray-600"
                 disabled={!formValid}
                 onClick={signInWithEmail}
             >
                 Sign in
             </button>
             <button
-                className="underline text-sm text-center w-full mb-2"
+                className="mb-2 w-full text-center text-sm underline"
                 onClick={() => setState('signUp')}
             >
                 Don't have an account? Sign up!
             </button>
             <button
-                className="underline text-sm text-center w-full"
+                className="w-full text-center text-sm underline"
                 onClick={() => setState('forgottenPassword')}
             >
                 Forgot password?
@@ -183,7 +183,7 @@ export default function Auth({ view }: AuthProps) {
             </div>
             <button
                 title={!formValid ? 'All fields must be valid' : ''}
-                className="block my-4 disabled:bg-orange-200 disabled:text-gray-600 rounded-full bg-orange-400 w-full py-2"
+                className="my-4 block w-full rounded-full bg-orange-400 py-2 disabled:bg-orange-200 disabled:text-gray-600"
                 disabled={!formValid}
                 onClick={signUpNewUser}
             >
@@ -215,7 +215,7 @@ export default function Auth({ view }: AuthProps) {
             </div>
             <button
                 title={!formValid ? 'All fields must be valid' : ''}
-                className="block my-4 disabled:bg-orange-200 disabled:text-gray-600 rounded-full bg-orange-400 w-full py-2"
+                className="my-4 block w-full rounded-full bg-orange-400 py-2 disabled:bg-orange-200 disabled:text-gray-600"
                 disabled={!formValid}
                 onClick={updatePassword}
             >

src/components/Auth/AuthPageLayout.tsx

@@ -8,7 +8,7 @@ export default function AuthPageLayout({ children }: AuthPageLayoutProps) {
     return (
         <>
             <Navigation />
-            <div className="w-screen h-screen flex justify-center items-center bg-orange-950">
+            <div className="flex h-screen w-screen items-center justify-center bg-orange-950">
                 {children}
             </div>
         </>

src/components/Auth/LoginButton.tsx

@@ -2,7 +2,7 @@ export default function LoginButton() {
     return (
         <a
             href="/login"
-            className="py-3 px-8 m-1 rounded-full bg-orange-500 text-white font-bold hover:bg-orange-600"
+            className="m-1 rounded-full bg-orange-500 px-8 py-3 font-bold text-white hover:bg-orange-600"
         >
             <button>Login</button>
         </a>

src/components/Auth/LogoutButton.tsx

@@ -5,7 +5,7 @@ export default function LogoutButton() {
         if (error) throw error
     }
     return (
-        <a className="py-3 px-8 m-1 rounded-full bg-orange-500 text-white font-bold hover:bg-orange-600">
+        <a className="m-1 rounded-full bg-orange-500 px-8 py-3 font-bold text-white hover:bg-orange-600">
             <button onClick={signOut}>Logout</button>
         </a>
     )

src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 export const Footer = () => {
     return (
-        <footer className="flex justify-center text-center text-xs p-8">
+        <footer className="flex justify-center p-8 text-center text-xs">
             © 2023 Help is Here
             <br /> Made with love by Abi and Xue
         </footer>

src/components/Form/ValidatedInput.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 type ValidatedInputProps = {
     validator: (val: string) => boolean
@@ -15,28 +15,26 @@ export default function ValidatedInput({
     placeholder,
     type = 'text',
 }: ValidatedInputProps) {
-    useEffect(() => {
-        setError(validate(''))
-    }, [])
+    const [error, setError] = useState<string>('')
 
     const validate = (val: string) => {
-        if (!val.trim()) {
+        const isValid = validator(val)
+        if (isValid) {
+            onValid(val)
+            return 'Looks good!'
+        } else if (!val.trim()) {
             onInvalid(val)
             return 'Required'
-        } else if (!validator(val)) {
+        } else {
             onInvalid(val)
             return 'Invalid'
-        } else {
-            onValid(val)
-            return 'Looks good!'
         }
     }
-    const [error, setError] = useState<string>('Looks good!')
     return (
         <>
             <input
                 type={type}
-                className={`px-4 py-2 rounded-full block w-full border border-solid ${
+                className={`block w-full rounded-full border border-solid px-4 py-2 ${
                     error == 'Looks good!'
                         ? 'border-green-500'
                         : 'border-red-500'
@@ -46,7 +44,7 @@ export default function ValidatedInput({
                 onChange={(e) => setError(validate(e.target.value))}
             ></input>
             <span
-                className={`text-xs ms-4 ${
+                className={`ms-4 text-xs ${
                     error == 'Looks good!' ? 'text-green-500' : 'text-red-500'
                 }`}
             >

src/components/Home/About.tsx

@@ -1,11 +1,11 @@
 import aboutImage from '../../assets/about.svg'
 export const About = () => {
     return (
-        <section className="flex justify-center flex-col py-12 bg-white px-8">
-            <h4 className="md:text-6xl text-4xl flex justify-center">About</h4>
-            <div className="flex md:flex-row flex-col justify-center">
+        <section className="flex flex-col justify-center bg-white px-8 py-12">
+            <h4 className="flex justify-center text-4xl md:text-6xl">About</h4>
+            <div className="flex flex-col justify-center md:flex-row">
                 <img src={aboutImage} alt="About" className="md:w-1/3" />
-                <span className="p-12 md:w-1/3 flex justify-center flex-col leading-8">
+                <span className="flex flex-col justify-center p-12 leading-8 md:w-1/3">
                     Help is Here is more than just a website; it's a
                     community-curated sanctuary dedicated to supporting mental
                     well-being.

src/components/Home/CTA.tsx

@@ -1,9 +1,9 @@
 export const CTA = () => {
     return (
-        <section className="flex justify-center py-12 px-8">
+        <section className="flex justify-center px-8 py-12">
             <a
                 href="/resources"
-                className="rounded-full bg-orange-500 text-white text-center px-8 md:px-12 py-4 md:py-8 md:text-4xl text-2xl "
+                className="rounded-full bg-orange-500 px-8 py-4 text-center text-2xl text-white md:px-12 md:py-8 md:text-4xl "
             >
                 Explore All Resources
             </a>