🔧 Configure path alias for cleaner imports (#1497)

2025-02-17 19:55:20 +00:00
parent 322975dd6e
commit ed34e5e170
30 changed files with 121 additions and 102 deletions
--- a/frontend/src/components/Admin/AddUser.tsx
+++ b/frontend/src/components/Admin/AddUser.tsx
@@ -1,6 +1,10 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { Controller, type SubmitHandler, useForm } from "react-hook-form"

+import { type UserCreate, UsersService } from "@/client"
+import type { ApiError } from "@/client/core/ApiError"
+import useCustomToast from "@/hooks/useCustomToast"
+import { emailPattern, handleError } from "@/utils"
 import {
  Button,
  DialogActionTrigger,
@@ -12,10 +16,6 @@ import {
 } from "@chakra-ui/react"
 import { useState } from "react"
 import { FaPlus } from "react-icons/fa"
-import { type UserCreate, UsersService } from "../../client"
-import type { ApiError } from "../../client/core/ApiError"
-import useCustomToast from "../../hooks/useCustomToast"
-import { emailPattern, handleError } from "../../utils"
 import { Checkbox } from "../ui/checkbox"
 import {
  DialogBody,
--- a/frontend/src/components/Admin/DeleteUser.tsx
+++ b/frontend/src/components/Admin/DeleteUser.tsx
@@ -3,7 +3,8 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { useForm } from "react-hook-form"
 import { FiTrash2 } from "react-icons/fi"
-import { UsersService } from "../../client"
+
+import { UsersService } from "@/client"
 import {
  DialogActionTrigger,
  DialogBody,
@@ -13,8 +14,8 @@ import {
  DialogHeader,
  DialogRoot,
  DialogTrigger,
-} from "../../components/ui/dialog"
-import useCustomToast from "../../hooks/useCustomToast"
+} from "@/components/ui/dialog"
+import useCustomToast from "@/hooks/useCustomToast"

 const DeleteUser = ({ id }: { id: string }) => {
  const [isOpen, setIsOpen] = useState(false)
--- a/frontend/src/components/Admin/EditUser.tsx
+++ b/frontend/src/components/Admin/EditUser.tsx
@@ -13,10 +13,11 @@ import {
 } from "@chakra-ui/react"
 import { useState } from "react"
 import { FaExchangeAlt } from "react-icons/fa"
-import { type UserPublic, type UserUpdate, UsersService } from "../../client"
-import type { ApiError } from "../../client/core/ApiError"
-import useCustomToast from "../../hooks/useCustomToast"
-import { emailPattern, handleError } from "../../utils"
+
+import { type UserPublic, type UserUpdate, UsersService } from "@/client"
+import type { ApiError } from "@/client/core/ApiError"
+import useCustomToast from "@/hooks/useCustomToast"
+import { emailPattern, handleError } from "@/utils"
 import { Checkbox } from "../ui/checkbox"
 import {
  DialogBody,
--- a/frontend/src/components/Common/ItemActionsMenu.tsx
+++ b/frontend/src/components/Common/ItemActionsMenu.tsx
@@ -2,7 +2,7 @@ import { IconButton } from "@chakra-ui/react"
 import { BsThreeDotsVertical } from "react-icons/bs"
 import { MenuContent, MenuRoot, MenuTrigger } from "../ui/menu"

-import type { ItemPublic } from "../../client"
+import type { ItemPublic } from "@/client"
 import DeleteItem from "../Items/DeleteItem"
 import EditItem from "../Items/EditItem"

--- a/frontend/src/components/Common/Navbar.tsx
+++ b/frontend/src/components/Common/Navbar.tsx
@@ -1,5 +1,6 @@
 import { Flex, Image, useBreakpointValue } from "@chakra-ui/react"
 import { Link } from "@tanstack/react-router"
+
 import Logo from "/assets/images/fastapi-logo.svg"
 import UserMenu from "./UserMenu"

--- a/frontend/src/components/Common/Sidebar.tsx
+++ b/frontend/src/components/Common/Sidebar.tsx
@@ -2,10 +2,10 @@ import { Box, Flex, IconButton, Text } from "@chakra-ui/react"
 import { useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { FaBars } from "react-icons/fa"
-
 import { FiLogOut } from "react-icons/fi"
-import type { UserPublic } from "../../client"
-import useAuth from "../../hooks/useAuth"
+
+import type { UserPublic } from "@/client"
+import useAuth from "@/hooks/useAuth"
 import {
  DrawerBackdrop,
  DrawerBody,
--- a/frontend/src/components/Common/SidebarItems.tsx
+++ b/frontend/src/components/Common/SidebarItems.tsx
@@ -1,10 +1,10 @@
 import { Box, Flex, Icon, Text } from "@chakra-ui/react"
 import { useQueryClient } from "@tanstack/react-query"
 import { Link as RouterLink } from "@tanstack/react-router"
-
 import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi"
 import type { IconType } from "react-icons/lib"
-import type { UserPublic } from "../../client"
+
+import type { UserPublic } from "@/client"

 const items = [
  { icon: FiHome, title: "Dashboard", path: "/" },
--- a/frontend/src/components/Common/UserActionsMenu.tsx
+++ b/frontend/src/components/Common/UserActionsMenu.tsx
@@ -2,7 +2,7 @@ import { IconButton } from "@chakra-ui/react"
 import { BsThreeDotsVertical } from "react-icons/bs"
 import { MenuContent, MenuRoot, MenuTrigger } from "../ui/menu"

-import type { UserPublic } from "../../client"
+import type { UserPublic } from "@/client"
 import DeleteUser from "../Admin/DeleteUser"
 import EditUser from "../Admin/EditUser"

--- a/frontend/src/components/Common/UserMenu.tsx
+++ b/frontend/src/components/Common/UserMenu.tsx
@@ -1,9 +1,9 @@
 import { Box, Button, Flex, Text } from "@chakra-ui/react"
 import { Link } from "@tanstack/react-router"
 import { FaUserAstronaut } from "react-icons/fa"
-
 import { FiLogOut, FiUser } from "react-icons/fi"
-import useAuth from "../../hooks/useAuth"
+
+import useAuth from "@/hooks/useAuth"
 import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from "../ui/menu"

 const UserMenu = () => {
--- a/frontend/src/components/Items/AddItem.tsx
+++ b/frontend/src/components/Items/AddItem.tsx
@@ -11,10 +11,11 @@ import {
 } from "@chakra-ui/react"
 import { useState } from "react"
 import { FaPlus } from "react-icons/fa"
-import { type ItemCreate, ItemsService } from "../../client"
-import type { ApiError } from "../../client/core/ApiError"
-import useCustomToast from "../../hooks/useCustomToast"
-import { handleError } from "../../utils"
+
+import { type ItemCreate, ItemsService } from "@/client"
+import type { ApiError } from "@/client/core/ApiError"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"
 import {
  DialogBody,
  DialogCloseTrigger,
--- a/frontend/src/components/Items/DeleteItem.tsx
+++ b/frontend/src/components/Items/DeleteItem.tsx
@@ -3,7 +3,8 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { useForm } from "react-hook-form"
 import { FiTrash2 } from "react-icons/fi"
-import { ItemsService } from "../../client"
+
+import { ItemsService } from "@/client"
 import {
  DialogActionTrigger,
  DialogBody,
@@ -13,8 +14,8 @@ import {
  DialogHeader,
  DialogRoot,
  DialogTrigger,
-} from "../../components/ui/dialog"
-import useCustomToast from "../../hooks/useCustomToast"
+} from "@/components/ui/dialog"
+import useCustomToast from "@/hooks/useCustomToast"

 const DeleteItem = ({ id }: { id: string }) => {
  const [isOpen, setIsOpen] = useState(false)
--- a/frontend/src/components/Items/EditItem.tsx
+++ b/frontend/src/components/Items/EditItem.tsx
@@ -10,9 +10,10 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { type SubmitHandler, useForm } from "react-hook-form"
 import { FaExchangeAlt } from "react-icons/fa"
-import { type ApiError, type ItemPublic, ItemsService } from "../../client"
-import useCustomToast from "../../hooks/useCustomToast"
-import { handleError } from "../../utils"
+
+import { type ApiError, type ItemPublic, ItemsService } from "@/client"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"
 import {
  DialogBody,
  DialogCloseTrigger,
--- a/frontend/src/components/UserSettings/Appearance.tsx
+++ b/frontend/src/components/UserSettings/Appearance.tsx
@@ -1,6 +1,7 @@
 import { Container, Heading, Stack } from "@chakra-ui/react"
 import { useTheme } from "next-themes"
-import { Radio, RadioGroup } from "../../components/ui/radio"
+
+import { Radio, RadioGroup } from "@/components/ui/radio"

 const Appearance = () => {
  const { theme, setTheme } = useTheme()
--- a/frontend/src/components/UserSettings/ChangePassword.tsx
+++ b/frontend/src/components/UserSettings/ChangePassword.tsx
@@ -1,11 +1,11 @@
 import { Box, Button, Container, Heading, VStack } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiLock } from "react-icons/fi"
-import { type ApiError, type UpdatePassword, UsersService } from "../../client"
-import useCustomToast from "../../hooks/useCustomToast"
-import { confirmPasswordRules, handleError, passwordRules } from "../../utils"
+
+import { type ApiError, type UpdatePassword, UsersService } from "@/client"
+import useCustomToast from "@/hooks/useCustomToast"
+import { confirmPasswordRules, handleError, passwordRules } from "@/utils"
 import { PasswordInput } from "../ui/password-input"

 interface UpdatePasswordForm extends UpdatePassword {
--- a/frontend/src/components/UserSettings/DeleteConfirmation.tsx
+++ b/frontend/src/components/UserSettings/DeleteConfirmation.tsx
@@ -2,7 +2,8 @@ import { Button, ButtonGroup, Text } from "@chakra-ui/react"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { useForm } from "react-hook-form"
-import { type ApiError, UsersService } from "../../client"
+
+import { type ApiError, UsersService } from "@/client"
 import {
  DialogActionTrigger,
  DialogBody,
@@ -13,10 +14,10 @@ import {
  DialogRoot,
  DialogTitle,
  DialogTrigger,
-} from "../../components/ui/dialog"
-import useAuth from "../../hooks/useAuth"
-import useCustomToast from "../../hooks/useCustomToast"
-import { handleError } from "../../utils"
+} from "@/components/ui/dialog"
+import useAuth from "@/hooks/useAuth"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"

 const DeleteConfirmation = () => {
  const [isOpen, setIsOpen] = useState(false)
--- a/frontend/src/components/UserSettings/UserInformation.tsx
+++ b/frontend/src/components/UserSettings/UserInformation.tsx
@@ -16,10 +16,10 @@ import {
  type UserPublic,
  type UserUpdateMe,
  UsersService,
-} from "../../client"
-import useAuth from "../../hooks/useAuth"
-import useCustomToast from "../../hooks/useCustomToast"
-import { emailPattern, handleError } from "../../utils"
+} from "@/client"
+import useAuth from "@/hooks/useAuth"
+import useCustomToast from "@/hooks/useCustomToast"
+import { emailPattern, handleError } from "@/utils"
 import { Field } from "../ui/field"

 const UserInformation = () => {
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -9,8 +9,8 @@ import {
  type UserPublic,
  type UserRegister,
  UsersService,
-} from "../client"
-import { handleError } from "../utils"
+} from "@/client"
+import { handleError } from "@/utils"

 const isLoggedIn = () => {
  return localStorage.getItem("access_token") !== null
--- a/frontend/src/hooks/useCustomToast.ts
+++ b/frontend/src/hooks/useCustomToast.ts
@@ -1,6 +1,6 @@
 "use client"

-import { toaster } from "../components/ui/toaster"
+import { toaster } from "@/components/ui/toaster"

 const useCustomToast = () => {
  const showSuccessToast = (description: string) => {
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -1,7 +1,7 @@
 import { Outlet, createRootRoute } from "@tanstack/react-router"
 import React, { Suspense } from "react"

-import NotFound from "../components/Common/NotFound"
+import NotFound from "@/components/Common/NotFound"

 const loadDevtools = () =>
  Promise.all([
--- a/frontend/src/routes/_layout.tsx
+++ b/frontend/src/routes/_layout.tsx
@@ -1,9 +1,9 @@
 import { Flex } from "@chakra-ui/react"
 import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"

-import Navbar from "../components/Common/Navbar"
-import Sidebar from "../components/Common/Sidebar"
-import { isLoggedIn } from "../hooks/useAuth"
+import Navbar from "@/components/Common/Navbar"
+import Sidebar from "@/components/Common/Sidebar"
+import { isLoggedIn } from "@/hooks/useAuth"

 export const Route = createFileRoute("/_layout")({
  component: Layout,
--- a/frontend/src/routes/_layout/admin.tsx
+++ b/frontend/src/routes/_layout/admin.tsx
@@ -3,16 +3,16 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { z } from "zod"

-import { type UserPublic, UsersService } from "../../client"
-import AddUser from "../../components/Admin/AddUser"
-import { UserActionsMenu } from "../../components/Common/UserActionsMenu"
-import PendingUsers from "../../components/Pending/PendingUsers"
+import { type UserPublic, UsersService } from "@/client"
+import AddUser from "@/components/Admin/AddUser"
+import { UserActionsMenu } from "@/components/Common/UserActionsMenu"
+import PendingUsers from "@/components/Pending/PendingUsers"
 import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
-} from "../../components/ui/pagination.tsx"
+} from "@/components/ui/pagination.tsx"

 const usersSearchSchema = z.object({
  page: z.number().catch(1),
--- a/frontend/src/routes/_layout/index.tsx
+++ b/frontend/src/routes/_layout/index.tsx
@@ -1,7 +1,7 @@
 import { Box, Container, Text } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"

-import useAuth from "../../hooks/useAuth"
+import useAuth from "@/hooks/useAuth"

 export const Route = createFileRoute("/_layout/")({
  component: Dashboard,
--- a/frontend/src/routes/_layout/items.tsx
+++ b/frontend/src/routes/_layout/items.tsx
@@ -6,21 +6,21 @@ import {
  Table,
  VStack,
 } from "@chakra-ui/react"
+import { useQuery } from "@tanstack/react-query"
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { FiSearch } from "react-icons/fi"
 import { z } from "zod"

-import { useQuery } from "@tanstack/react-query"
-import { ItemsService } from "../../client"
-import { ItemActionsMenu } from "../../components/Common/ItemActionsMenu"
-import AddItem from "../../components/Items/AddItem"
-import PendingItems from "../../components/Pending/PendingItems"
+import { ItemsService } from "@/client"
+import { ItemActionsMenu } from "@/components/Common/ItemActionsMenu"
+import AddItem from "@/components/Items/AddItem"
+import PendingItems from "@/components/Pending/PendingItems"
 import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
-} from "../../components/ui/pagination.tsx"
+} from "@/components/ui/pagination.tsx"

 const itemsSearchSchema = z.object({
  page: z.number().catch(1),
--- a/frontend/src/routes/_layout/settings.tsx
+++ b/frontend/src/routes/_layout/settings.tsx
@@ -1,11 +1,11 @@
 import { Container, Heading, Tabs } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"

-import Appearance from "../../components/UserSettings/Appearance"
-import ChangePassword from "../../components/UserSettings/ChangePassword"
-import DeleteAccount from "../../components/UserSettings/DeleteAccount"
-import UserInformation from "../../components/UserSettings/UserInformation"
-import useAuth from "../../hooks/useAuth"
+import Appearance from "@/components/UserSettings/Appearance"
+import ChangePassword from "@/components/UserSettings/ChangePassword"
+import DeleteAccount from "@/components/UserSettings/DeleteAccount"
+import UserInformation from "@/components/UserSettings/UserInformation"
+import useAuth from "@/hooks/useAuth"

 const tabsConfig = [
  { value: "my-profile", title: "My profile", component: UserInformation },
--- a/frontend/src/routes/login.tsx
+++ b/frontend/src/routes/login.tsx
@@ -5,15 +5,15 @@ import {
  redirect,
 } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiLock, FiMail } from "react-icons/fi"
+
+import type { Body_login_login_access_token as AccessToken } from "@/client"
+import { Button } from "@/components/ui/button"
+import { Field } from "@/components/ui/field"
+import { InputGroup } from "@/components/ui/input-group"
+import { PasswordInput } from "@/components/ui/password-input"
+import useAuth, { isLoggedIn } from "@/hooks/useAuth"
 import Logo from "/assets/images/fastapi-logo.svg"
-import type { Body_login_login_access_token as AccessToken } from "../client"
-import { Button } from "../components/ui/button"
-import { Field } from "../components/ui/field"
-import { InputGroup } from "../components/ui/input-group"
-import { PasswordInput } from "../components/ui/password-input"
-import useAuth, { isLoggedIn } from "../hooks/useAuth"
 import { emailPattern, passwordRules } from "../utils"

 export const Route = createFileRoute("/login")({
--- a/frontend/src/routes/recover-password.tsx
+++ b/frontend/src/routes/recover-password.tsx
@@ -2,15 +2,15 @@ import { Container, Heading, Input, Text } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
 import { createFileRoute, redirect } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiMail } from "react-icons/fi"
-import { type ApiError, LoginService } from "../client"
-import { Button } from "../components/ui/button"
-import { Field } from "../components/ui/field"
-import { InputGroup } from "../components/ui/input-group"
-import { isLoggedIn } from "../hooks/useAuth"
-import useCustomToast from "../hooks/useCustomToast"
-import { emailPattern, handleError } from "../utils"
+
+import { type ApiError, LoginService } from "@/client"
+import { Button } from "@/components/ui/button"
+import { Field } from "@/components/ui/field"
+import { InputGroup } from "@/components/ui/input-group"
+import { isLoggedIn } from "@/hooks/useAuth"
+import useCustomToast from "@/hooks/useCustomToast"
+import { emailPattern, handleError } from "@/utils"

 interface FormData {
  email: string
--- a/frontend/src/routes/reset-password.tsx
+++ b/frontend/src/routes/reset-password.tsx
@@ -2,14 +2,14 @@ import { Container, Heading, Text } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
 import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiLock } from "react-icons/fi"
-import { type ApiError, LoginService, type NewPassword } from "../client"
-import { Button } from "../components/ui/button"
-import { PasswordInput } from "../components/ui/password-input"
-import { isLoggedIn } from "../hooks/useAuth"
-import useCustomToast from "../hooks/useCustomToast"
-import { confirmPasswordRules, handleError, passwordRules } from "../utils"
+
+import { type ApiError, LoginService, type NewPassword } from "@/client"
+import { Button } from "@/components/ui/button"
+import { PasswordInput } from "@/components/ui/password-input"
+import { isLoggedIn } from "@/hooks/useAuth"
+import useCustomToast from "@/hooks/useCustomToast"
+import { confirmPasswordRules, handleError, passwordRules } from "@/utils"

 interface NewPasswordForm extends NewPassword {
  confirm_password: string
--- a/frontend/src/routes/signup.tsx
+++ b/frontend/src/routes/signup.tsx
@@ -5,16 +5,16 @@ import {
  redirect,
 } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiLock, FiUser } from "react-icons/fi"
+
+import type { UserRegister } from "@/client"
+import { Button } from "@/components/ui/button"
+import { Field } from "@/components/ui/field"
+import { InputGroup } from "@/components/ui/input-group"
+import { PasswordInput } from "@/components/ui/password-input"
+import useAuth, { isLoggedIn } from "@/hooks/useAuth"
+import { confirmPasswordRules, emailPattern, passwordRules } from "@/utils"
 import Logo from "/assets/images/fastapi-logo.svg"
-import type { UserRegister } from "../client"
-import { Button } from "../components/ui/button"
-import { Field } from "../components/ui/field"
-import { InputGroup } from "../components/ui/input-group"
-import { PasswordInput } from "../components/ui/password-input"
-import useAuth, { isLoggedIn } from "../hooks/useAuth"
-import { confirmPasswordRules, emailPattern, passwordRules } from "../utils"

 export const Route = createFileRoute("/signup")({
  component: SignUp,
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -5,7 +5,6 @@
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
-
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
@@ -13,13 +12,19 @@
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
-
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
  },
  "include": ["src/**/*.ts", "tests/**/*.ts", "playwright.config.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,8 +1,14 @@
+import path from "node:path"
 import { TanStackRouterVite } from "@tanstack/router-vite-plugin"
 import react from "@vitejs/plugin-react-swc"
 import { defineConfig } from "vite"

 // https://vitejs.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
  plugins: [react(), TanStackRouterVite()],
 })