chore: change import alias

.eslintrc.yml

@@ -28,5 +28,5 @@ rules:
 settings:
   'import/resolver':
     alias:
-      map: [['@components', './src/components']]
+      map: [['~/components', './src/components']]
       extensions: ['.ts', '.js', '.jsx', '.ts', '.tsx', '.json']

README.md

@@ -7,7 +7,7 @@ CRUD implemenation with React;
 
 - React
 - TypeScript
-- TailwindCSS
+- daisyUI & TailwindCSS
 - Storybook
 
 ## Contribution

package.json

@@ -78,7 +78,7 @@
   },
   "dependencies": {
     "@growthbook/growthbook-react": "^0.20.0",
-    "daisyui": "^2.50.0",
+    "daisyui": "^3.9.4",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.6",
     "react": "^18.2.0",

src/components/App.tsx

@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
 
-import Header from '@components/Header';
-import Alert from '@components/Alert';
-import Breadcrumbs from '@components/Breadcrumbs';
+import Header from '~/components/Header';
+import Alert from '~/components/Alert';
+import Breadcrumbs from '~/components/Breadcrumbs';
 
 // Create a GrowthBook instance
 const growthbook = new GrowthBook({

src/components/PostPreview.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
-import { db } from '@services/db';
+import { db } from '~/services/db';
 
 interface IAuthor {
   userId: string;

src/index.tsx

@@ -4,14 +4,14 @@ import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';
 
 import './index.css';
 
-const App = lazy(async () => import('@components/App'));
-const Home = lazy(async () => import('@pages/index'));
-const NoMatch = lazy(async () => import('@pages/[all]'));
+const App = lazy(async () => import('~/components/App'));
+const Home = lazy(async () => import('~/pages/index'));
+const NoMatch = lazy(async () => import('~/pages/[all]'));
 
-const NewPost = lazy(async () => import('@pages/posts/new'));
-const BlogPost = lazy(async () => import('@pages/posts/[postId]'));
-const EditPost = lazy(async () => import('@pages/posts/[postId]/edit'));
-const UserInfo = lazy(async () => import('@pages/users/[userName]'));
+const NewPost = lazy(async () => import('~/pages/posts/new'));
+const BlogPost = lazy(async () => import('~/pages/posts/[postId]'));
+const EditPost = lazy(async () => import('~/pages/posts/[postId]/edit'));
+const UserInfo = lazy(async () => import('~/pages/users/[userName]'));
 
 const root = createRoot(document.getElementById('app'));
 

src/pages/index.tsx

@@ -2,12 +2,12 @@ import { Fragment } from 'react';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { useFeature } from '@growthbook/growthbook-react';
 
-import { db } from '@services/db';
-import PostPreview from '@components/PostPreview';
-import Search from '@components/Search';
+import { db } from '~/services/db';
+import PostPreview from '~/components/PostPreview';
+import Search from '~/components/Search';
 
-import type { IBlogPost } from '@components/PostPreview';
-import { timestampToLocaleString } from '@services/timestampToLocaleString';
+import type { IBlogPost } from '~/components/PostPreview';
+import { timestampToLocaleString } from '~/services/timestampToLocaleString';
 
 function handleDeleteStory(id: string) {
   db.posts.delete(id);

src/pages/posts/[postId]/edit.tsx

@@ -3,10 +3,10 @@ import { useState } from 'react';
 import { redirect, useParams } from 'react-router-dom';
 import { useLiveQuery } from 'dexie-react-hooks';
 
-import { db } from '@services/db';
+import { db } from '~/services/db';
 
-import { Input } from '@components/Input';
-import type { IBlogPost } from '@components/PostPreview';
+import { Input } from '~/components/Input';
+import type { IBlogPost } from '~/components/PostPreview';
 
 interface IBlogPostProps {
   post: IBlogPost;

src/pages/posts/[postId]/index.tsx

@@ -1,8 +1,8 @@
 import { useNavigate, useParams } from 'react-router-dom';
 import { useLiveQuery } from 'dexie-react-hooks';
 
-import { db } from '@services/db';
-import type { IBlogPost } from '@components/PostPreview';
+import { db } from '~/services/db';
+import type { IBlogPost } from '~/components/PostPreview';
 
 function Post({ heading, text }: IBlogPost) {
   const navigate = useNavigate();

src/pages/posts/new.tsx

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 
-import { db } from '@services/db';
+import { db } from '~/services/db';
 
-import { Input } from '@components/Input';
+import { Input } from '~/components/Input';
 
 function getRandomInt(max: number) {
   return Math.floor(Math.random() * max);

src/pages/users/[userName].tsx

@@ -1,8 +1,8 @@
 import { useParams } from 'react-router-dom';
 import { useLiveQuery } from 'dexie-react-hooks';
 
-import { db } from '@services/db';
-import type { IUser } from '@components/PostPreview';
+import { db } from '~/services/db';
+import type { IUser } from '~/components/PostPreview';
 
 function Info({ name }: IUser) {
   return (

tsconfig.json

@@ -30,9 +30,7 @@
     "moduleResolution": "Node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     "paths": {
-      "@components/*": ["./src/components/*"],
-      "@pages/*": ["./src/pages/*"],
-      "@services/*": ["./src/services/*"]
+      "~/*": ["./src/*"],
     },                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
@@ -103,5 +101,6 @@
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  }
+  },
+  "include": ["src"],
 }

vite.config.ts

@@ -32,16 +32,8 @@ export default defineConfig({
   resolve: {
     alias: [
       {
-        find: '@components',
-        replacement: '/src/components',
-      },
-      {
-        find: '@pages',
-        replacement: '/src/pages',
-      },
-      {
-        find: '@services',
-        replacement: '/src/services',
+        find: '~/',
+        replacement: '/src/',
       },
     ],
   },