Use Path Aliases

src/api/category.ts

@@ -1,4 +1,4 @@
-import categoryData from "../data/categories.json";
+import categoryData from "@/data/categories.json";
 
 export function getCategories() {
   return categoryData;

src/components/CategoryList.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 import CategoryList from "./CategoryList";
 
 const categories: ICategory[] = [

src/components/CategoryList.tsx

@@ -1,6 +1,6 @@
 import CategoryListItem from "./CategoryListItem";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 
 interface CategoryListProps {
   categories: ICategory[];

src/components/CategoryListItem.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 import CategoryListItem from "./CategoryListItem";
 
 const category: ICategory = { id: 1, title: "hats", imageUrl: "some-url" };

src/components/CategoryListItem.tsx

@@ -1,4 +1,4 @@
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 
 interface CategoryItemProps {
   category: ICategory;

src/components/NavigationBar.tsx

@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 
-import CrownLogo from "../assets/crown.svg";
+import CrownLogo from "@/assets/crown.svg";
 
 export default function NavigationBar() {
   return (

src/components/UI/Button.tsx

@@ -1,5 +1,6 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
-import tw from "../../utils/tw-identity";
+
+import tw from "@/utils/tw-identity";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;

src/components/UI/FormInput.tsx

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from "react";
 
-import tw from "../../utils/tw-identity";
+import tw from "@/utils/tw-identity";
 
 interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;

src/components/authentication/SignInForm.test.tsx

@@ -9,7 +9,7 @@ const mockedMethods = vi.hoisted(function () {
   };
 });
 
-vi.mock("../../utils/firebase", function () {
+vi.mock("@/utils/firebase", function () {
   return {
     signInAuthUserWithEmailAndPassword: mockedMethods.signInAuthUserFn,
   };

src/components/authentication/SignInForm.tsx

@@ -1,16 +1,16 @@
 import { AuthError, getRedirectResult } from "firebase/auth";
 import { ChangeEvent, FormEvent, useEffect, useState } from "react";
 
-import Button from "../UI/Button";
-import FormInput from "../UI/FormInput";
+import Button from "@/components/UI/Button";
+import FormInput from "@/components/UI/FormInput";
 
 import {
   auth,
   createUserDocumentFromAuth,
   signInAuthUserWithEmailAndPassword,
   signInWithGooglePopup,
   signInWithGoogleRedirect,
-} from "../../utils/firebase";
+} from "@/utils/firebase";
 
 const INITIAL_FORM_FIELDS = {
   email: "",

src/components/authentication/SignUpForm.test.tsx

@@ -10,7 +10,7 @@ const mockedMethods = vi.hoisted(function () {
   };
 });
 
-vi.mock("../../utils/firebase", function () {
+vi.mock("@/utils/firebase", function () {
   return {
     createAuthUserWithEmailAndPassword: mockedMethods.createAuthUserFn,
     createUserDocumentFromAuth: mockedMethods.createUserDocumentFn,

src/components/authentication/SignUpForm.tsx

@@ -1,13 +1,13 @@
 import { AuthError } from "firebase/auth";
 import { ChangeEvent, FormEvent, useState } from "react";
 
-import Button from "../UI/Button";
-import FormInput from "../UI/FormInput";
+import Button from "@/components/UI/Button";
+import FormInput from "@/components/UI/FormInput";
 
 import {
   createAuthUserWithEmailAndPassword,
   createUserDocumentFromAuth,
-} from "../../utils/firebase";
+} from "@/utils/firebase";
 
 const INITIAL_FORM_FIELDS = {
   displayName: "",

src/pages/AuthenticationPage.tsx

@@ -1,5 +1,5 @@
-import SignInForm from "../components/authentication/SignInForm";
-import SignUpForm from "../components/authentication/SignUpForm";
+import SignInForm from "@/components/authentication/SignInForm";
+import SignUpForm from "@/components/authentication/SignUpForm";
 
 export default function AuthenticationPage() {
   return (

src/pages/HomePage.test.tsx

@@ -1,9 +1,9 @@
 import { render } from "@testing-library/react";
 
-import * as CategoryList from "../components/CategoryList";
+import * as CategoryList from "@/components/CategoryList";
 import HomePage from "./HomePage";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 
 const { categories } = vi.hoisted(function () {
   const categories: ICategory[] = [

src/pages/HomePage.tsx

@@ -1,8 +1,8 @@
 import { useLoaderData } from "react-router-dom";
 
-import CategoryList from "../components/CategoryList";
+import CategoryList from "@/components/CategoryList";
 
-import { ICategory } from "../models/Category";
+import { ICategory } from "@/models/Category";
 
 export default function HomePage() {
   const categories = useLoaderData() as ICategory[];

src/pages/layouts/RootLayout.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import { Outlet } from "react-router-dom";
-import NavigationBar from "../../components/NavigationBar";
+
+import NavigationBar from "@/components/NavigationBar";
 
 export default function RootLayout() {
   return (

src/utils/firebase.ts

@@ -16,7 +16,7 @@ import {
   setDoc,
 } from "firebase/firestore";
 
-import firebaseApp from "../config/firebase";
+import firebaseApp from "@/config/firebase";
 
 const FIREBASE_AUTH_EMULATOR = import.meta.env.VITE_FIREBASE_AUTH_EMULATOR_HOST;
 

tsconfig.app.json

@@ -20,6 +20,9 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] },
+
     "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
   "include": ["src"]

vite.config.ts

@@ -1,5 +1,7 @@
 /// <reference types="vitest" />
 
+import path from "path";
+
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import svgr, { VitePluginSvgrOptions } from "vite-plugin-svgr";
@@ -22,4 +24,9 @@ export default defineConfig({
     setupFiles: "./tests/setup.ts",
     exclude: [...configDefaults.exclude, "./firebase", "./config"],
   },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
 });