feat(ui): migrate from HeroUI to shadcn/ui (#11532)

ui/components/users/forms/create-tenant-form.test.tsx

@@ -19,7 +19,8 @@ vi.mock("@/actions/users/tenants", () => ({
 }));
 
 const mockToast = vi.fn();
-vi.mock("@/components/ui", () => ({
+vi.mock("@/components/shadcn", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   useToast: () => ({ toast: mockToast }),
 }));
 

ui/components/users/forms/create-tenant-form.tsx

@@ -8,9 +8,9 @@ import {
   switchTenant,
   SwitchTenantState,
 } from "@/actions/users/tenants";
-import { useToast } from "@/components/ui";
-import { CustomServerInput } from "@/components/ui/custom";
-import { FormButtons } from "@/components/ui/form";
+import { useToast } from "@/components/shadcn";
+import { CustomServerInput } from "@/components/shadcn/custom";
+import { FormButtons } from "@/components/shadcn/form";
 import { reloadPage } from "@/lib/navigation";
 
 export const CreateTenantForm = ({

ui/components/users/forms/delete-form.tsx

@@ -8,8 +8,8 @@ import * as z from "zod";
 import { deleteUser } from "@/actions/users/users";
 import { DeleteIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
-import { useToast } from "@/components/ui";
-import { Form } from "@/components/ui/form";
+import { useToast } from "@/components/shadcn";
+import { Form } from "@/components/shadcn/form";
 
 const formSchema = z.object({
   userId: z.string(),

ui/components/users/forms/delete-tenant-form.test.tsx

@@ -23,7 +23,8 @@ vi.mock("@/actions/users/tenants", () => ({
 }));
 
 const mockToast = vi.fn();
-vi.mock("@/components/ui", () => ({
+vi.mock("@/components/shadcn", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   useToast: () => ({ toast: mockToast }),
 }));
 

ui/components/users/forms/delete-tenant-form.tsx

@@ -15,6 +15,8 @@ import {
   deleteTenantThenSignOut,
   switchThenDeleteTenant,
 } from "@/actions/users/tenants";
+import { useToast } from "@/components/shadcn";
+import { FormButtons } from "@/components/shadcn/form";
 import { Input } from "@/components/shadcn/input/input";
 import {
   Select,
@@ -23,8 +25,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/shadcn/select/select";
-import { useToast } from "@/components/ui";
-import { FormButtons } from "@/components/ui/form";
 import { reloadPage } from "@/lib/navigation";
 import { TenantOption } from "@/types/users";
 

ui/components/users/forms/edit-form.tsx

@@ -8,6 +8,9 @@ import * as z from "zod";
 
 import { updateUser, updateUserRole } from "@/actions/users/users";
 import { Card } from "@/components/shadcn";
+import { useToast } from "@/components/shadcn";
+import { CustomInput } from "@/components/shadcn/custom";
+import { Form, FormButtons } from "@/components/shadcn/form";
 import {
   Select,
   SelectContent,
@@ -15,9 +18,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/shadcn/select/select";
-import { useToast } from "@/components/ui";
-import { CustomInput } from "@/components/ui/custom";
-import { Form, FormButtons } from "@/components/ui/form";
 import { editUserFormSchema } from "@/types";
 
 export const EditForm = ({
@@ -121,12 +121,12 @@ export const EditForm = ({
           variant="inner"
           className="flex flex-row items-center justify-center gap-4"
         >
-          <div className="text-small flex items-center">
+          <div className="flex items-center text-sm">
             <UserIcon className="mr-2 h-4 w-4" />
             <span className="text-text-neutral-secondary">Name:</span>
             <span className="ml-2 font-semibold">{userName}</span>
           </div>
-          <div className="text-small flex items-center">
+          <div className="flex items-center text-sm">
             <ShieldIcon className="mr-2 h-4 w-4" />
             <span className="text-text-neutral-secondary">Role:</span>
             <span className="ml-2 font-semibold">

ui/components/users/forms/edit-tenant-form.tsx

@@ -3,9 +3,9 @@
 import { Dispatch, SetStateAction, useActionState, useEffect } from "react";
 
 import { updateTenantName } from "@/actions/users/tenants";
-import { useToast } from "@/components/ui";
-import { CustomServerInput } from "@/components/ui/custom";
-import { FormButtons } from "@/components/ui/form";
+import { useToast } from "@/components/shadcn";
+import { CustomServerInput } from "@/components/shadcn/custom";
+import { FormButtons } from "@/components/shadcn/form";
 
 export const EditTenantForm = ({
   tenantId,

ui/components/users/forms/expel-user-form.tsx

@@ -5,7 +5,7 @@ import { Dispatch, SetStateAction, useTransition } from "react";
 import { removeUserFromTenant } from "@/actions/users/users";
 import { DeleteIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
-import { useToast } from "@/components/ui";
+import { useToast } from "@/components/shadcn";
 
 interface ExpelUserFormProps {
   userId: string;

ui/components/users/forms/switch-tenant-form.test.tsx

@@ -14,7 +14,8 @@ vi.mock("@/actions/users/tenants", () => ({
 }));
 
 const mockToast = vi.fn();
-vi.mock("@/components/ui", () => ({
+vi.mock("@/components/shadcn", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   useToast: () => ({ toast: mockToast }),
 }));
 

ui/components/users/forms/switch-tenant-form.tsx

@@ -4,8 +4,8 @@ import { useSession } from "next-auth/react";
 import { Dispatch, SetStateAction, useActionState, useEffect } from "react";
 
 import { switchTenant } from "@/actions/users/tenants";
-import { useToast } from "@/components/ui";
-import { FormButtons } from "@/components/ui/form";
+import { useToast } from "@/components/shadcn";
+import { FormButtons } from "@/components/shadcn/form";
 import { reloadPage } from "@/lib/navigation";
 
 export const SwitchTenantForm = ({