refactor: add reusable components, and fix imports

frontend/jest.config.cjs

@@ -2,7 +2,7 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@/(.*)$': ['<rootDir>/src/$1', '<rootDir>/lib/$1'],
   },
   transformIgnorePatterns: [
     "/node_modules/(?!react-toastify)"

frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx

@@ -1,17 +1,8 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { NavigationMenu } from '@/components/ui/navigation-menu';
 import { buttonVariants } from '@/components/ui/button';
-
-interface BottomBarProps {
-  projects: string[];
-  selectedProject: string | null;
-  setSelectedProject: Dispatch<SetStateAction<string>>;
-
-  status: string[];
-  selectedStatus: string | null;
-  setSelectedStatus: Dispatch<SetStateAction<string>>;
-}
+import { BottomBarProps } from './bottom-bar-utils';
 
 const BottomBar: React.FC<BottomBarProps> = ({ projects, selectedProject, setSelectedProject, status, selectedStatus, setSelectedStatus }) => {
   return (

frontend/src/components/HomeComponents/BottomBar/__tests__/bottom-bar-utils.test.ts

@@ -1,4 +1,4 @@
-import { RouteProps, routeList } from '../bottom-bar-utils';
+import { BottomBarProps, RouteProps, routeList } from '../bottom-bar-utils';
 
 describe('RouteProps interface', () => {
     it('should have href and label properties', () => {
@@ -8,6 +8,25 @@ describe('RouteProps interface', () => {
     });
 });
 
+describe('BottomBarProps interface', () => {
+    it('should have project and status properties', () => {
+        const example: BottomBarProps = {
+            projects: [""],
+            selectedProject: "",
+            setSelectedProject: jest.fn(),
+            status: [""],
+            selectedStatus: "",
+            setSelectedStatus: jest.fn(),
+        };
+        expect(example).toHaveProperty('projects');
+        expect(example).toHaveProperty('selectedProject');
+        expect(example).toHaveProperty('setSelectedProject');
+        expect(example).toHaveProperty('status');
+        expect(example).toHaveProperty('selectedStatus');
+        expect(example).toHaveProperty('setSelectedStatus');
+    });
+});
+
 describe('routeList array', () => {
     it('should be an array', () => {
         expect(Array.isArray(routeList)).toBe(true);

frontend/src/components/HomeComponents/BottomBar/bottom-bar-utils.ts

@@ -1,8 +1,20 @@
+import { Dispatch, SetStateAction } from "react";
+
 export interface RouteProps {
     href: string;
     label: string;
 }
 
+export interface BottomBarProps {
+    projects: string[];
+    selectedProject: string | null;
+    setSelectedProject: Dispatch<SetStateAction<string>>;
+
+    status: string[];
+    selectedStatus: string | null;
+    setSelectedStatus: Dispatch<SetStateAction<string>>;
+  }  
+
 export const routeList: RouteProps[] = [
     { href: "#", label: "Home" },
     { href: "#tasks", label: "Tasks" },

frontend/src/components/HomeComponents/FAQ/FAQ.tsx

@@ -1,16 +1,12 @@
 import { Accordion } from "@/components/ui/accordion";
 import { FAQItem } from "./FAQItem";
 import { FAQList } from "./faq-utils";
+import { BlueHeading } from "@/lib/utils";
 
 export const FAQ = () => {
   return (
     <section id="faq" className="container py-24 sm:py-32">
-      <h2 className="text-3xl md:text-4xl font-bold mb-4">
-        Frequently Asked{" "}
-        <span className="inline bg-gradient-to-r from-[#61DAFB] to-[#1fc0f1] text-transparent bg-clip-text">
-          Questions
-        </span>
-      </h2>
+      <BlueHeading prefix={"Frequently Asked"} suffix={"Questions"}></BlueHeading>
 
       <Accordion type="single" collapsible className="w-full AccordionRoot">
         {FAQList.map(({ question, answer, value }) => (

frontend/src/components/HomeComponents/Footer/__tests__/Footer.test.tsx

@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Footer } from '../Footer';
 
-// mock the imports
 jest.mock('../../../../assets/logo.png', () => 'logo-path');
 jest.mock('../../../../assets/logo_light.png', () => 'logo-light-path');
 

frontend/src/components/HomeComponents/Navbar/__tests__/navbar-utils.test.ts

@@ -25,7 +25,7 @@ jest.mock("@/lib/controller", () => ({
   tasksCollection: {},
 }));
 
-jest.mock("@/lib/URLs", () => ({
+jest.mock("@/components/utils/URLs.ts", () => ({
   url: {
     backendURL: "http://localhost:3000/",
   },

frontend/src/components/HomeComponents/Navbar/navbar-utils.ts

@@ -1,7 +1,7 @@
 import { toast } from "react-toastify";
 import { tasksCollection } from "@/lib/controller";
 import { deleteDoc, doc, getDocs, setDoc, updateDoc } from "firebase/firestore";
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 
 export interface RouteProps {
     href: string;

frontend/src/components/HomeComponents/SetupGuide/SetupGuide.tsx

@@ -1,4 +1,4 @@
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { Props } from "../../utils/types";
 import { CopyableCode } from "./CopyableCode";
 

frontend/src/components/HomeComponents/SetupGuide/__tests__/SetupGuide.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { SetupGuide } from '../SetupGuide';
 import { Props } from '../../../utils/types';
-import { url } from '@/lib/URLs';
+import { url } from '@/components/utils/URLs';
 
 // Mocking the CopyableCode component
 jest.mock('../CopyableCode', () => ({

frontend/src/components/HomeComponents/Tasks/Tasks.tsx

@@ -20,7 +20,7 @@ import { Label } from "@/components/ui/label"
 import CopyToClipboard from "react-copy-to-clipboard";
 import { formattedDate, getDisplayedPages, handleCopy, handleDate, markTaskAsCompleted, markTaskAsDeleted, Props, sortTasks, sortTasksById } from "./tasks-utils";
 import Pagination from "./Pagination";
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import BottomBar from "../BottomBar/BottomBar";
 

frontend/src/components/HomeComponents/Tasks/__tests__/Pagination.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import Pagination from '../Pagination'; // Adjust the import path as necessary
+import Pagination from '../Pagination';
 
 describe('Pagination', () => {
     const mockPaginate = jest.fn();

frontend/src/components/HomeComponents/Tasks/tasks-utils.ts

@@ -1,5 +1,5 @@
 import { Task } from "@/components/utils/types";
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { format, parseISO } from "date-fns";
 import { toast } from "react-toastify";
 

frontend/src/components/HomePage.tsx

@@ -5,7 +5,7 @@ import { Footer } from "./HomeComponents/Footer/Footer";
 import { SetupGuide } from "./HomeComponents/SetupGuide/SetupGuide";
 import { FAQ } from "./HomeComponents/FAQ/FAQ";
 import { Tasks } from "./HomeComponents/Tasks/Tasks";
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { useNavigate } from "react-router";
 
 export const HomePage: React.FC = () => {

frontend/src/components/LandingComponents/FAQ/FAQ.tsx

@@ -1,16 +1,12 @@
 import { Accordion } from "@/components/ui/accordion";
 import { FAQItem } from "./FAQItem";
 import { FAQList } from "./faq-utils";
+import { BlueHeading } from "@/lib/utils";
 
 export const FAQ = () => {
   return (
     <section id="faq" className="container py-24 sm:py-32">
-      <h2 className="text-3xl md:text-4xl font-bold mb-4">
-        Frequently Asked{" "}
-        <span className="inline bg-gradient-to-r from-[#61DAFB] to-[#1fc0f1] text-transparent bg-clip-text">
-          Questions
-        </span>
-      </h2>
+      <BlueHeading prefix="Frequently Asked" suffix="Questions" />
 
       <Accordion type="single" collapsible className="w-full AccordionRoot">
         {FAQList.map(({ question, answer, value }) => (

frontend/src/components/LandingComponents/Hero/Hero.tsx

@@ -1,4 +1,4 @@
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { Button } from "../../ui/button";
 import { buttonVariants } from "../../ui/button";
 import { HeroCards } from "./HeroCards";

frontend/src/components/LandingComponents/Hero/__tests__/Hero.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Hero } from '../Hero';
-import { url } from '@/lib/URLs';
+import { url } from '@/components/utils/URLs';
 
 // mocking the HeroCards component
 jest.mock('../HeroCards', () => ({

frontend/src/components/ui/accordion.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/utils/utils";
 
 const Accordion = AccordionPrimitive.Root;
 

frontend/src/components/ui/avatar.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/utils/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

frontend/src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

frontend/src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

frontend/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Card = React.forwardRef<
   HTMLDivElement,

frontend/src/components/ui/dialog.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Dialog = DialogPrimitive.Root
 

frontend/src/components/ui/dropdown-menu.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/utils/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

frontend/src/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}

frontend/src/components/ui/label.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

frontend/src/components/ui/navigation-menu.tsx

@@ -3,7 +3,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/utils/utils";
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,

frontend/src/components/ui/select.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Select = SelectPrimitive.Root
 

frontend/src/components/ui/sheet.tsx

@@ -3,7 +3,7 @@ import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Sheet = SheetPrimitive.Root
 

frontend/src/components/ui/table.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Table = React.forwardRef<
   HTMLTableElement,

frontend/src/lib/utils.tsx

@@ -0,0 +1,11 @@
+export const BlueHeading = ({ prefix, suffix }: { prefix: any, suffix: any }) => {
+  return (
+    <h2 className="text-3xl md:text-4xl font-bold mb-4">
+      {prefix}{" "}
+      <span className="inline bg-gradient-to-r from-[#61DAFB] to-[#1fc0f1] text-transparent bg-clip-text">
+        {suffix}
+      </span>
+    </h2>
+  );
+};
+