refactor: improve accessibility, maintainability, scalability and UI/UX

web/.eslintrc.json

@@ -1,5 +1,6 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["next/core-web-vitals", "plugin:jsx-a11y/recommended"],
+  "plugins": ["eslint-plugin-unused-imports", "eslint-plugin-jsx-a11y"],
   "rules": {
     "semi": [
       "error",
@@ -8,6 +9,9 @@
     "quotes": [
       "error",
       "single"
-    ]
+    ],
+    "unused-imports/no-unused-imports": "error",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/click-events-have-key-events": "off"
   }
 }

web/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

web/app/components/AsideButton.tsx

@@ -1,22 +1,27 @@
-import Image, { StaticImageData } from 'next/image';
-
 import Button from './Button';
 
 interface AsideButtonPropsType {
-    image: StaticImageData;
-    pageName: string;
-    innerRef?: (node: any) => void;
-    onClick?: () => void;
+  image: React.ReactNode;
+  pageName: string;
+  innerRef?: (node: any) => void;
+  onClick?: () => void;
 }
 
-
-export default function AsideButton({ image, pageName, innerRef, onClick }: AsideButtonPropsType) {
-    return (
-        <Button innerRef={innerRef} onClick={onClick} className='z-10 flex-col w-full !gap-1 !pb-2 !shadow-none !text-black' name={pageName}>
-            <Image
-                width={25} height={25}
-                src={image} alt={`ícone da página ${pageName}`}
-            />
-        </Button>
-    );
-}
+export default function AsideButton({
+  image,
+  pageName,
+  innerRef,
+  onClick,
+}: AsideButtonPropsType) {
+  return (
+    <Button
+      innerRef={innerRef}
+      onClick={onClick}
+      className="z-10 flex-col w-full !gap-1 !pb-2 !shadow-none !text-black"
+      name={pageName}
+      aria-label={`Ir para página ${pageName}`}
+    >
+      {image}
+    </Button>
+  );
+}

web/app/components/AsideSchedulePopUp/ClassInfoBox.tsx

@@ -1,53 +1,56 @@
 import { ClassType, DisciplineType } from '@/app/utils/api/searchDiscipline';
 import { HTMLProps, MouseEventHandler, useEffect, useState } from 'react';
-
 import useSelectedClasses from '@/app/hooks/useSelectedClasses';
 import ClassInfo from '../ClassInfo';
-import Image from 'next/image';
-
-import addIcon from '@/public/icons/add.jpg';
-import removeIcon from '@/public/icons/remove.jpg';
+import { twMerge } from 'tailwind-merge';
+import { FiPlus, FiMinus } from 'react-icons/fi';
 
 interface ClassInfoBoxPropsType extends HTMLProps<HTMLDivElement> {
-    currentDiscipline: DisciplineType,
-    currentClass: ClassType,
+  currentDiscipline: DisciplineType;
+  currentClass: ClassType;
 }
 
-export default function ClassInfoBox({ currentDiscipline, currentClass, ...props }: ClassInfoBoxPropsType) {
-    const { classesChange, selectedClasses } = useSelectedClasses();
-    const [selected, setSelected] = useState(false);
+export default function ClassInfoBox({
+  currentDiscipline,
+  currentClass,
+  ...props
+}: ClassInfoBoxPropsType) {
+  const { classesChange, selectedClasses } = useSelectedClasses();
+  const [selected, setSelected] = useState(false);
 
-    useEffect(() => {
-        if (selectedClasses.get(currentDiscipline.id)?.has(currentClass.id)) setSelected(true);
-        else setSelected(false);
-    }, [selectedClasses, classesChange, currentDiscipline, currentClass]);
+  useEffect(() => {
+    if (selectedClasses.get(currentDiscipline.id)?.has(currentClass.id))
+      setSelected(true);
+    else setSelected(false);
+  }, [selectedClasses, classesChange, currentDiscipline, currentClass]);
 
-    return (
-        <div
-            className={`grid grid-cols-7 ${selected ? 'bg-primary bg-opacity-40' : 'hover:bg-gray-300'} hover:bg-opacity-40 hover:cursor-pointer rounded-md py-1 px-2 ${props.className || ''}`}
-        >
-            <ClassInfo currentClass={{
-                class: currentClass,
-                discipline: {
-                    id: currentDiscipline.id,
-                    name: currentDiscipline.name,
-                    code: currentDiscipline.code
-                }
-            }} />
-            <button
-                onClick={props.onClick as MouseEventHandler<HTMLButtonElement> | undefined}
-                className='hover:cursor-pointer col-start-7 flex justify-center items-center'>
-                {selected ?
-                    <Image
-                        width={25} height={25}
-                        src={removeIcon} alt='ícone remover matéria'
-                    />
-                    : <Image
-                        width={25} height={25}
-                        src={addIcon} alt='ícone adicionar matéria'
-                    />
-                }
-            </button>
-        </div>
-    );
-}
+  return (
+    <div
+      className={twMerge(
+        'grid grid-cols-7 hover:bg-opacity-40 hover:cursor-pointer rounded-md py-1 px-2',
+        selected ? 'bg-primary/40' : 'hover:bg-gray-300',
+        props.className
+      )}
+    >
+      <ClassInfo
+        currentClass={{
+          class: currentClass,
+          discipline: {
+            id: currentDiscipline.id,
+            name: currentDiscipline.name,
+            code: currentDiscipline.code,
+          },
+        }}
+      />
+      <button
+        onClick={
+          props.onClick as MouseEventHandler<HTMLButtonElement> | undefined
+        }
+        aria-label="Selecionar/Desselecionar aula"
+        className="hover:cursor-pointer col-start-7 flex justify-center items-center"
+      >
+        {selected ? <FiMinus size={24} /> : <FiPlus size={24} />}
+      </button>
+    </div>
+  );
+}