use path alias

src/components/HomeResultItem.tsx

@@ -1,13 +1,13 @@
+import { LeftArrowIcon, RightArrowIcon } from '@/assets';
+import { useApi } from '@/hooks';
+import { IRoom } from '@/types';
 import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
 import { styled } from '@stitches/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
+import { HeartIcon, StarIcon } from 'lucide-react';
 import React, { useState } from 'react';
 
-import { HeartIcon, LeftArrowIcon, RightArrowIcon, StarIcon } from '../assets';
-import useApi from '../hooks/useApi';
-import { IRoom } from '../types';
-
 interface IProps {
   isWishListed: boolean;
   item: IRoom;

src/components/HomeResults.tsx

@@ -1,10 +1,10 @@
+import { useApi } from '@/hooks';
+import { IRoom } from '@/types';
 import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
 import { styled } from '@stitches/react';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect } from 'react';
 
-import useApi from '../hooks/useApi';
-import { IRoom } from '../types';
 import HomeResultItem from './HomeResultItem';
 
 const placeholderData = {

src/components/TextInput.tsx

@@ -25,7 +25,7 @@ interface IProps {
   validator: z.ZodString;
 }
 
-const TextInput: React.FC<IProps> = ({
+export const TextInput: React.FC<IProps> = ({
   form,
   label,
   name,
@@ -73,8 +73,6 @@ const TextInput: React.FC<IProps> = ({
   );
 };
 
-export default TextInput;
-
 const InputWrapper = styled('div', {
   borderRadius: '6px',
   paddingBottom: '.6rem',

src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './Common';
+export * from './Divider';
+export * from './TextInput';

src/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from "./useOutsideClick";
-export * from "./useApi";
+export * from './useApi';
+export * from './useOutsideClick';

src/hooks/useApi.ts

@@ -1,7 +1,7 @@
-import useRoomsApi from "./useRoomsApi";
-import { default as useWishlistApi } from "./useWishlistApi";
+import useRoomsApi from './useRoomsApi';
+import { default as useWishlistApi } from './useWishlistApi';
 
-const useApi = () => {
+export const useApi = () => {
   const wishlistApi = useWishlistApi();
   const roomsApi = useRoomsApi();
 
@@ -10,5 +10,3 @@ const useApi = () => {
     wishlistApi,
   };
 };
-
-export default useApi;

src/pages/Hosting/NewListing/Steps/Step1.tsx

@@ -1,13 +1,12 @@
+import { Column, Row, TextInput } from '@/components';
+import { useApi } from '@/hooks';
+import { styled } from '@stitches/react';
 import { useForm } from '@tanstack/react-form';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { zodValidator } from '@tanstack/zod-form-adapter';
 import { z } from 'zod';
 
-import { Column, Row } from '../../../../components/Common';
-import TextInput from '../../../../components/TextInput';
-import useApi from '../../../../hooks/useApi';
-import { styled } from '../../../../stitches.config';
 import Amenities from '../Amenities';
 
 const OnboardingFormStep1: React.FC = () => {

src/pages/Room/Reserve.tsx

@@ -1,15 +1,14 @@
+import { Divider, Row } from '@/components';
+import { useApi } from '@/hooks';
+import { IRoom } from '@/types';
 import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
 import { useMutation } from '@tanstack/react-query';
 import { useLocation } from '@tanstack/react-router';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import moment from 'moment';
 import React, { useState } from 'react';
 
-import { Row } from '../../components/Common';
-import { Divider } from '../../components/Divider';
-import useApi from '../../hooks/useApi';
 import { styled } from '../../stitches.config';
-import { IRoom } from '../../types';
 
 type IProps = {
   room: IRoom;

src/pages/Room/index.tsx

@@ -1,10 +1,10 @@
+import { Column, Row } from '@/components';
+import { useApi } from '@/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from '@tanstack/react-router';
 
-import { Column, Row } from '../../components/Common';
-import Header from '../../components/Header';
-import useApi from '../../hooks/useApi';
 import { styled } from '../../stitches.config';
+import Header from '../Hosting/Header';
 import Reserve from './Reserve';
 
 function RoomPage() {

src/pages/Wishlists.tsx

@@ -1,23 +1,23 @@
-import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
-import { styled } from "@stitches/react";
-import { useQuery } from "@tanstack/react-query";
+import { useApi } from '@/hooks';
+import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
+import { styled } from '@stitches/react';
+import { useQuery } from '@tanstack/react-query';
 
-import HomeResultItem from "../components/HomeResultItem";
-import useApi from "../hooks/useApi";
+import HomeResultItem from '../components/HomeResultItem';
 
 function Wishlists() {
   const { wishlistApi } = useApi();
   const { user } = useKindeAuth();
   const { data, isError, isLoading, isSuccess } = useQuery({
-    queryFn: () => wishlistApi.getWishLists(user?.id || ""),
-    queryKey: ["wishlists"],
+    queryFn: () => wishlistApi.getWishLists(user?.id || ''),
+    queryKey: ['wishlists'],
   });
 
   return (
     <Container>
-      <div style={{ fontSize: "50px" }}>Wishlists</div>
-      {isLoading && <div style={{ margin: "4rem" }}>loading...</div>}
-      {isError && <div style={{ margin: "4rem" }}> unable to fetch</div>}
+      <div style={{ fontSize: '50px' }}>Wishlists</div>
+      {isLoading && <div style={{ margin: '4rem' }}>loading...</div>}
+      {isError && <div style={{ margin: '4rem' }}> unable to fetch</div>}
       {!isLoading && (
         <ResultContainer>
           {isSuccess &&
@@ -34,19 +34,19 @@ function Wishlists() {
 
 export default Wishlists;
 
-const Container = styled("div", {
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "flex-start",
-  margin: "4rem",
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  margin: '4rem',
 });
 
-const ResultContainer = styled("div", {
-  alignContent: "space-around",
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "1rem",
-  justifyContent: "space-around",
+const ResultContainer = styled('div', {
+  alignContent: 'space-around',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '1rem',
+  justifyContent: 'space-around',
   //   zIndex: "1",
   //   top: "1rem",
   //   position: "absolute",

tsconfig.json

@@ -18,7 +18,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "types": ["node"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -1,9 +1,13 @@
-import react from "@vitejs/plugin-react-swc";
-import { defineConfig } from "vite";
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+  },
   server: {
     port: 3000,
   },