♻️ refactor: Refactor UI components to shared package w/ shadcn/ui (#60)

* ♻️ refactor(ui): Create `cn` utils fn using `tw-merge` and `clsx`
* ♻️ chore(student): Use shared UI components in a component
* 🔥 chore(ui): Remove unused shared UI components
* ✨ feat(ui): Reconfigure `ui` package with `shadcn/ui`
* ♻️ refactor(finance): Update imports for new `ui` package
* ♻️ refactor(student): Update imports for new `ui` package
* 🔥 chore: Remove individual `components.json` for `shadcn/ui`
* 💩 chore: Create temp pages to test shared `ui` package
* ♻️ refactor(ui): Use shared Tailwind config
* 🩹 chore(ui): Reorganize TSConfig file
* ⬆️ chore: Update lockfile
* ✨ feat(ui): Create components for `finance` service
* 🚚 chore(finance): Update import paths to shared `ui` package
* 🔥 chore(finance): Remove unused components after refactor
* ⬆️ chore: Update lockfile
* 🔨 chore: Create script to add `shadcn/ui` components from root
* 📌 chore(deps): Standardized deps version mismatch using pnpm catalog
* ➖ chore(finance): Remove refactored UI-related dependencies
* ✨ feat(ui): Create components for `library` service
* 🚚 chore(library): Update import paths to shared `ui` package
* 🔥 chore(library): Remove unused components after refactor
* ➖ chore(library): Remove refactored UI-related dependencies
* ✨ feat(ui): Create components for `student` service
* 🚚 chore(student): Update import paths to shared `ui` package
* 🔥 chore(student): Remove unused components after refactor
* ➖ chore(student): Remove refactored UI-related dependencies
* ⬆️ chore: Update lockfile
* 🐛 fix(student): Update missing imports
* 🔨 chore(ui): Now auto-formats file after adding new component

Closes HUB-27, closes HUB-28, closes HUB-29, closes HUB-30

Author: aryanprince

apps/finance/package.json

@@ -24,18 +24,12 @@
   },
   "dependencies": {
     "@campus-hub/ui": "workspace:*",
-    "@radix-ui/react-dialog": "catalog:",
-    "@radix-ui/react-dropdown-menu": "catalog:",
-    "@radix-ui/react-slot": "catalog:",
-    "@radix-ui/react-tooltip": "^1.0.7",
     "@t3-oss/env-nextjs": "catalog:",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/next": "catalog:",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",
-    "class-variance-authority": "catalog:",
-    "clsx": "catalog:",
     "date-fns": "catalog:",
     "drizzle-orm": "catalog:",
     "geist": "catalog:",
@@ -46,10 +40,7 @@
     "react": "catalog:react18",
     "react-dom": "catalog:react18",
     "server-only": "catalog:",
-    "sonner": "catalog:",
     "superjson": "catalog:",
-    "tailwind-merge": "catalog:",
-    "tailwindcss-animate": "catalog:",
     "tsx": "catalog:",
     "zod": "catalog:"
   },
@@ -61,7 +52,6 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:react18",
     "@types/react-dom": "catalog:react18",
-    "autoprefixer": "catalog:",
     "dotenv-cli": "catalog:",
     "drizzle-kit": "catalog:",
     "postcss": "catalog:",

apps/finance/src/app/layout.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { GeistSans } from "geist/font/sans";
 
+import { Toaster } from "@campus-hub/ui/components/ui/sonner";
+
 import { ThemeProvider } from "~/components/theme-provider";
-import { Toaster } from "~/components/ui/sonner";
 
 import "~/styles/globals.css";
 

apps/finance/src/app/page.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 
-import { buttonVariants } from "@campus-hub/ui/button";
+import { buttonVariants } from "@campus-hub/ui/components/ui/button";
 
 import { Footer } from "~/components/footer";
 

apps/finance/src/app/pay/invoice/[id]/loading.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "~/components/ui/skeleton";
+import { Skeleton } from "@campus-hub/ui/components/ui/skeleton";
 
 export default function Loading() {
   return (

apps/finance/src/app/pay/invoice/[id]/page.tsx

@@ -2,8 +2,8 @@ import Link from "next/link";
 import { format } from "date-fns";
 import { ArrowLeft } from "lucide-react";
 
-import { Badge } from "@campus-hub/ui/badge";
-import { buttonVariants } from "@campus-hub/ui/button";
+import { Badge } from "@campus-hub/ui/components/ui/badge";
+import { buttonVariants } from "@campus-hub/ui/components/ui/button";
 
 import type { invoice } from "~/server/db/schema/main-schema";
 import { env } from "~/env";

apps/finance/src/app/pay/invoice/[id]/pay-invoice-button.tsx

@@ -5,17 +5,17 @@ import { useRouter } from "next/navigation";
 import { CreditCard } from "lucide-react";
 import { toast } from "sonner";
 
-import { Button } from "@campus-hub/ui/button";
-
-import type { invoice } from "~/server/db/schema/main-schema";
+import { Button } from "@campus-hub/ui/components/ui/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "~/components/ui/dialog";
+} from "@campus-hub/ui/components/ui/dialog";
+
+import type { invoice } from "~/server/db/schema/main-schema";
 import { api } from "~/trpc/react";
 
 type Invoice = typeof invoice.$inferSelect;

apps/finance/src/app/pay/layout.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 
-import { buttonVariants } from "@campus-hub/ui/button";
+import { buttonVariants } from "@campus-hub/ui/components/ui/button";
 
 import { Footer } from "~/components/footer";
 import { ThemeToggle } from "~/components/theme-toggle";

apps/finance/src/app/test/page.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+
+import { Button } from "@campus-hub/ui/components/ui/button";
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Link href="/test/about">About</Link>
+      <Button>Click me</Button>
+    </div>
+  );
+}

apps/finance/src/components/finance-invoice-form.tsx

@@ -4,15 +4,15 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Check, Copy } from "lucide-react";
 
-import { Button } from "@campus-hub/ui/button";
-
-import { Input } from "~/components/ui/input";
+import { Button } from "@campus-hub/ui/components/ui/button";
+import { Input } from "@campus-hub/ui/components/ui/input";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "~/components/ui/tooltip";
+} from "@campus-hub/ui/components/ui/tooltip";
+
 import { sleep } from "~/lib/utils";
 
 export default function FinanceInvoiceForm() {

apps/finance/src/components/theme-toggle.tsx

@@ -4,14 +4,13 @@ import * as React from "react";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 
-import { Button } from "@campus-hub/ui/button";
-
+import { Button } from "@campus-hub/ui/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
+} from "@campus-hub/ui/components/ui/dropdown-menu";
 
 export function ThemeToggle() {
   const { setTheme } = useTheme();