Add lint workflow (#272)

* add lint workflow

* add prettier check

* add typescript eslint rules

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-    "extends": "next/core-web-vitals"
+    "extends": ["next/core-web-vitals", "next/typescript"]
 }

.github/workflows/lint.yml

@@ -0,0 +1,27 @@
+name: lint
+
+on:
+    push:
+        branches: [main, development]
+    pull_request:
+        branches: [main, development]
+
+jobs:
+    lint:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [20.x]
+
+        steps:
+            - name: Setup repo
+              uses: actions/checkout@v4
+
+            - name: Setup Node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node-version }}
+
+            - run: npm ci
+            - run: npm run lint

.prettierignore

@@ -2,6 +2,7 @@
 **/node_modules
 **/.next
 **/.husky
+**/.github
 public/*
 LICENSE
 .prettierignore

app/error.tsx

@@ -4,13 +4,7 @@ import styles from "./Error.module.scss";
 import Link from "next/link";
 import clsx from "clsx";
 
-const Error = ({
-    error,
-    reset
-}: {
-    error: Error & { digest?: string };
-    reset: () => void;
-}) => {
+const Error = ({ error }: { error: Error & { digest?: string } }) => {
     const [showDetails, setShowDetails] = useState(false);
 
     const handleToggleDetails = () => {

app/register/(general)/(form)/transportation/page.tsx

@@ -1,6 +1,4 @@
-import Checkboxes, {
-    CheckboxOption
-} from "@/components/Form/Checkboxes/Checkboxes";
+import Checkboxes from "@/components/Form/Checkboxes/Checkboxes";
 import styles from "./styles.module.scss";
 import React from "react";
 import {

app/register/challenge/page.tsx

@@ -11,12 +11,7 @@ import FOREGROUND from "@/public/registration/pro/foreground.svg";
 import EXAMPLE_CHALLENGE_GRAPHIC from "@/public/registration/example_challenge_graphic.svg";
 
 import NavigationButton from "@/components/Form/NavigationButton/NavigationButton";
-import {
-    isAuthenticated,
-    authenticate,
-    getRegistrationOrDefault,
-    getChallenge
-} from "@/util/api";
+import { isAuthenticated, authenticate, getChallenge } from "@/util/api";
 import { usePathname, useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
 import Loading from "@/components/Loading/Loading";

components/Form/Checkboxes/Checkboxes.tsx

@@ -38,7 +38,6 @@ const Checkboxes: React.FC<PropTypes> = ({
     name,
     label,
     options = [],
-    hideErrors,
     className,
     style,
     threeColEnabled,
@@ -57,6 +56,7 @@ const Checkboxes: React.FC<PropTypes> = ({
     const isValueOther = (value: string) =>
         options.every(option => option.value !== value);
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const selectedValues: any[] = useMemo(() => {
         return value || [];
     }, [field]);
@@ -86,6 +86,7 @@ const Checkboxes: React.FC<PropTypes> = ({
         checked: boolean,
         { value, isRadio, isOther }: CheckboxOption
     ) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let newSelectedValues: any[] = [];
 
         // if checked === true and the option isn't already selected, select it

components/Form/Checkboxes/StyledCheckbox/StyledCheckbox.tsx

@@ -20,7 +20,6 @@ const StyledCheckbox: React.FC<PropTypes> = ({
     label,
     checked,
     className,
-    radio,
     style,
     blue,
     ...props

components/Form/Checkboxes/StyledInput/StyledInput.tsx

@@ -11,10 +11,8 @@ type StyledInputProps = {
 };
 
 const StyledInput: React.FC<StyledInputProps> = ({
-    name,
     className,
     multiline,
-    required,
     ...props
 }) => {
     return multiline ? (

components/Form/DropdownBox/Dropdown.tsx

@@ -26,7 +26,7 @@ const Dropdown: React.FC<DropdownProps> = ({
     const [field, meta, helpers] = useField(name);
     const showFeedback = meta.error && meta.touched;
 
-    let formattedOptions = options.map(option => ({
+    const formattedOptions = options.map(option => ({
         label: option,
         value: option
     }));

components/Form/NavigationButton/NavigationButton.tsx

@@ -25,6 +25,7 @@ const NavigationButton: React.FC<NavButtonProps> = ({
     // Function to handle the Enter key press
     const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
         if (event.key === "Enter" || event.key === "Return") {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onClick?.(event as any); // Trigger the onClick function
         }
     };

components/Form/TextInput/TextInput.tsx

@@ -21,7 +21,7 @@ const TextInput: React.FC<TextInputProps> = ({
     required,
     ...props
 }) => {
-    const [field, meta] = useField(name);
+    const [, meta] = useField(name);
     const showFeedback = meta.error && meta.touched;
 
     return (

components/Registration/Registration.tsx

@@ -7,7 +7,7 @@ import React, {
     useRef,
     useState
 } from "react";
-import { Form, Formik, FormikHelpers, FormikProps } from "formik";
+import { Form, Formik, FormikProps } from "formik";
 import { RegistrationData } from "@/util/types";
 import { usePathname, useRouter } from "next/navigation";
 import NavigationButton from "../Form/NavigationButton/NavigationButton";
@@ -129,10 +129,7 @@ const Registration: React.FC<PropTypes> = ({
         );
     };
 
-    const handleSubmit = async (
-        values: RegistrationData,
-        helpers: FormikHelpers<RegistrationData>
-    ) => {
+    const handleSubmit = async (values: RegistrationData) => {
         const schemaKeys = Object.keys(schema.fields);
         const newIgnore = Object.fromEntries(
             Object.entries(ignoredFields).filter(

components/Registration/RegistrationResponseGroup.tsx

@@ -43,6 +43,7 @@ const RegistrationResponseGroup: React.FC<{
                         responseProvided = true;
                     }
                     const fieldOptionsHaveLabels = field.options.every(
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         (option: any) => option.label
                     );
                     if (fieldOptionsHaveLabels) {

package.json

@@ -6,7 +6,7 @@
         "dev": "next dev",
         "build": "next build",
         "start": "next start",
-        "lint": "next lint",
+        "lint": "next lint && npx prettier . --check",
         "format": "npx prettier . --write",
         "prepare": "husky"
     },