use bun for tests, add cleanup

.nvmrc

@@ -0,0 +1 @@
+v18.18

app/account/page.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+
+export default function Account() {
+  return (
+    <div className="min-h-[80dvh] flex flex-col place-content-center place-items-center">
+      <Image
+        src="/coming-soon.svg"
+        alt="Coming Soon"
+        width={960}
+        height={540}
+      />
+
+      <p className="mt-5">Coming Soon...</p>
+    </div>
+  );
+}

app/cart/page.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+
+export default function Cart() {
+  return (
+    <div className="min-h-[80dvh] flex flex-col place-content-center place-items-center">
+      <Image
+        src="/coming-soon.svg"
+        alt="Coming Soon"
+        width={960}
+        height={540}
+      />
+
+      <p className="mt-5">Coming Soon...</p>
+    </div>
+  );
+}

app/categories/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/modules/categories/categories.page';

app/global.scss

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+  :root, html[data-theme='light'] {
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
 
@@ -36,7 +36,7 @@
     --radius: 0.5rem;
   }
 
-  .dark {
+  html[data-theme='dark'] {
     --background: 224 71% 4%;
     --foreground: 213 31% 91%;
 

app/products/[category]/layout.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export default function Layout({ children }: PropsWithChildren) {
+  return <>{children}</>;
+}

app/products/[category]/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <>
+      <Skeleton className="h-8 w-60 my-5" />
+
+      <div className="grid gap-4 grid-cols-2">
+        <Skeleton className="w-full h-56" />
+        <Skeleton className="w-full h-56" />
+        <Skeleton className="w-full h-56" />
+        <Skeleton className="w-full h-56" />
+      </div>
+    </>
+  );
+}

app/wishlist/page.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+
+export default function Wishlist() {
+  return (
+    <div className="min-h-[80dvh] flex flex-col place-content-center place-items-center">
+      <Image
+        src="/coming-soon.svg"
+        alt="Coming Soon"
+        width={960}
+        height={540}
+      />
+
+      <p className="mt-5">Coming Soon...</p>
+    </div>
+  );
+}

bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = ["./test-setup.ts"]

package.json

@@ -27,17 +27,19 @@
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^2.13.0"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^13.3.8",
     "@next/bundle-analyzer": "^14.1.0",
     "@testing-library/react": "^14.1.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.17",
+    "bun-types": "^1.0.26",
     "cheerio": "1.0.0-rc.12",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
@@ -47,8 +49,6 @@
     "postcss": "^8",
     "sass": "^1.70.0",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5",
-    "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.2.2"
+    "typescript": "^5"
   }
 }