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

ui/components/manage-groups/forms/add-group-form.tsx

@@ -1,16 +1,15 @@
 "use client";
-import { Divider } from "@heroui/divider";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SaveIcon } from "lucide-react";
 import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { createProviderGroup } from "@/actions/manage-groups";
-import { Button } from "@/components/shadcn";
+import { Button, Separator } from "@/components/shadcn";
+import { useToast } from "@/components/shadcn";
+import { CustomInput } from "@/components/shadcn/custom";
+import { Form } from "@/components/shadcn/form";
 import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
-import { useToast } from "@/components/ui";
-import { CustomInput } from "@/components/ui/custom";
-import { Form } from "@/components/ui/form";
 import { ApiError } from "@/types";
 
 const addGroupSchema = z.object({
@@ -157,9 +156,9 @@ export const AddGroupForm = ({
             {form.formState.errors.providers.message}
           </p>
         )}
-        <Divider orientation="horizontal" className="mb-2" />
+        <Separator orientation="horizontal" className="mb-2" />
 
-        <p className="text-small text-default-500">
+        <p className="text-text-neutral-tertiary text-sm">
           Roles can also be associated with the group. This step is optional and
           can be completed later if needed or from the Roles page.
         </p>

ui/components/manage-groups/forms/delete-group-form.tsx

@@ -9,8 +9,8 @@ import * as z from "zod";
 import { deleteProviderGroup } from "@/actions/manage-groups/manage-groups";
 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({
   groupId: z.string(),

ui/components/manage-groups/forms/edit-group-form.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Divider } from "@heroui/divider";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SaveIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -8,11 +7,11 @@ import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { updateProviderGroup } from "@/actions/manage-groups/manage-groups";
-import { Button } from "@/components/shadcn";
+import { Button, Separator } from "@/components/shadcn";
+import { useToast } from "@/components/shadcn";
+import { CustomInput } from "@/components/shadcn/custom";
+import { Form } from "@/components/shadcn/form";
 import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
-import { useToast } from "@/components/ui";
-import { CustomInput } from "@/components/ui/custom";
-import { Form } from "@/components/ui/form";
 import { ApiError } from "@/types";
 
 const editGroupSchema = z.object({
@@ -209,8 +208,8 @@ export const EditGroupForm = ({
           </p>
         )}
 
-        <Divider orientation="horizontal" className="mb-2" />
-        <p className="text-small text-default-500">
+        <Separator orientation="horizontal" className="mb-2" />
+        <p className="text-text-neutral-tertiary text-sm">
           The roles associated with the group can be edited directly here or
           from the Roles page.
         </p>

ui/components/manage-groups/skeleton-manage-groups.tsx

@@ -1,33 +1,17 @@
-import { Card } from "@heroui/card";
-import { Skeleton } from "@heroui/skeleton";
-import React from "react";
+import { Card, Skeleton } from "@/components/shadcn";
 
 export const SkeletonManageGroups = () => {
   return (
-    <Card className="flex h-full w-full flex-col gap-5 p-4" radius="sm">
+    <Card className="flex h-full w-full flex-col gap-5 rounded-lg p-4">
       {/* Table headers */}
       <div className="hidden justify-between md:flex">
-        <Skeleton className="w-1/12 rounded-lg">
-          <div className="bg-default-200 h-8"></div>
-        </Skeleton>
-        <Skeleton className="w-2/12 rounded-lg">
-          <div className="bg-default-200 h-8"></div>
-        </Skeleton>
-        <Skeleton className="w-2/12 rounded-lg">
-          <div className="bg-default-200 h-8"></div>
-        </Skeleton>
-        <Skeleton className="w-2/12 rounded-lg">
-          <div className="bg-default-200 h-8"></div>
-        </Skeleton>
-        <Skeleton className="w-2/12 rounded-lg">
-          <div className="bg-default-200 h-8"></div>
-        </Skeleton>
-        <Skeleton className="w-1/12 rounded-lg">
-          <div className="bg-default-200 h-8"></div>
-        </Skeleton>
-        <Skeleton className="w-1/12 rounded-lg">
-          <div className="bg-default-200 h-8"></div>
-        </Skeleton>
+        <Skeleton className="h-8 w-1/12 rounded-lg" />
+        <Skeleton className="h-8 w-2/12 rounded-lg" />
+        <Skeleton className="h-8 w-2/12 rounded-lg" />
+        <Skeleton className="h-8 w-2/12 rounded-lg" />
+        <Skeleton className="h-8 w-2/12 rounded-lg" />
+        <Skeleton className="h-8 w-1/12 rounded-lg" />
+        <Skeleton className="h-8 w-1/12 rounded-lg" />
       </div>
 
       {/* Table body */}
@@ -37,27 +21,13 @@ export const SkeletonManageGroups = () => {
             key={index}
             className="flex flex-col items-center justify-between md:flex-row md:gap-4"
           >
-            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-1/12">
-              <div className="bg-default-300 h-12"></div>
-            </Skeleton>
-            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
-              <div className="bg-default-300 h-12"></div>
-            </Skeleton>
-            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
-              <div className="bg-default-300 h-12"></div>
-            </Skeleton>
-            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
-              <div className="bg-default-300 h-12"></div>
-            </Skeleton>
-            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
-              <div className="bg-default-300 h-12"></div>
-            </Skeleton>
-            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
-              <div className="bg-default-300 h-12"></div>
-            </Skeleton>
-            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
-              <div className="bg-default-300 h-12"></div>
-            </Skeleton>
+            <Skeleton className="mb-2 h-12 w-full rounded-lg md:mb-0 md:w-1/12" />
+            <Skeleton className="mb-2 h-12 w-full rounded-lg md:mb-0 md:w-2/12" />
+            <Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-2/12" />
+            <Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-2/12" />
+            <Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-2/12" />
+            <Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-1/12" />
+            <Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-1/12" />
           </div>
         ))}
       </div>

ui/components/manage-groups/table/column-groups.tsx

@@ -2,8 +2,8 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 
-import { DateWithTime } from "@/components/ui/entities";
-import { DataTableColumnHeader } from "@/components/ui/table";
+import { DateWithTime } from "@/components/shadcn/entities";
+import { DataTableColumnHeader } from "@/components/shadcn/table";
 import { ProviderGroup } from "@/types";
 
 import { DataTableRowActions } from "./data-table-row-actions";
@@ -22,7 +22,7 @@ export const ColumnGroups: ColumnDef<ProviderGroup>[] = [
       const {
         attributes: { name },
       } = getProviderData(row);
-      return <p className="text-small font-medium">{name}</p>;
+      return <p className="text-sm font-medium">{name}</p>;
     },
   },
 

ui/components/manage-groups/table/skeleton-table-groups.tsx

@@ -1,39 +1,94 @@
-import React from "react";
-
-import { Card } from "@/components/shadcn/card/card";
 import { Skeleton } from "@/components/shadcn/skeleton/skeleton";
 
-export const SkeletonTableGroups = () => {
+const SkeletonTableRow = () => {
   return (
-    <Card variant="base" padding="md" className="flex flex-col gap-4">
-      {/* Table headers */}
-      <div className="hidden gap-4 md:flex">
-        <Skeleton className="h-8 w-1/12" />
-        <Skeleton className="h-8 w-2/12" />
-        <Skeleton className="h-8 w-2/12" />
-        <Skeleton className="h-8 w-2/12" />
-        <Skeleton className="h-8 w-2/12" />
-        <Skeleton className="h-8 w-1/12" />
-        <Skeleton className="h-8 w-1/12" />
+    <tr className="border-border-neutral-secondary border-b last:border-b-0">
+      {/* Name - text */}
+      <td className="px-3 py-4">
+        <Skeleton className="h-4 w-32 rounded" />
+      </td>
+      {/* Providers - count in circle */}
+      <td className="px-3 py-4">
+        <Skeleton className="size-8 rounded-full" />
+      </td>
+      {/* Roles - count in circle */}
+      <td className="px-3 py-4">
+        <Skeleton className="size-8 rounded-full" />
+      </td>
+      {/* Added - date */}
+      <td className="px-3 py-4">
+        <Skeleton className="h-4 w-24 rounded" />
+      </td>
+      {/* Actions */}
+      <td className="px-2 py-4">
+        <Skeleton className="size-6 rounded" />
+      </td>
+    </tr>
+  );
+};
+
+export const SkeletonTableGroups = () => {
+  const rows = 10;
+
+  return (
+    <div className="border-border-neutral-secondary bg-bg-neutral-secondary flex w-full flex-col gap-4 overflow-hidden rounded-[14px] border p-4 shadow-sm">
+      {/* Toolbar: Search + Total entries */}
+      <div className="flex items-center justify-between">
+        {/* Search icon button */}
+        <Skeleton className="size-10 rounded-md" />
+        {/* Total entries */}
+        <Skeleton className="h-4 w-28 rounded" />
       </div>
+
+      {/* Table */}
+      <table className="w-full">
+        <thead>
+          <tr className="border-border-neutral-secondary border-b">
+            {/* Name */}
+            <th className="px-3 py-3 text-left">
+              <Skeleton className="h-4 w-12 rounded" />
+            </th>
+            {/* Providers */}
+            <th className="px-3 py-3 text-left">
+              <Skeleton className="h-4 w-20 rounded" />
+            </th>
+            {/* Roles */}
+            <th className="px-3 py-3 text-left">
+              <Skeleton className="h-4 w-16 rounded" />
+            </th>
+            {/* Added */}
+            <th className="px-3 py-3 text-left">
+              <Skeleton className="h-4 w-14 rounded" />
+            </th>
+            {/* Actions - empty header */}
+            <th className="w-10 py-3" />
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: rows }).map((_, i) => (
+            <SkeletonTableRow key={i} />
+          ))}
+        </tbody>
+      </table>
 
-      {/* Table body */}
-      <div className="flex flex-col gap-3">
-        {[...Array(3)].map((_, index) => (
-          <div
-            key={index}
-            className="flex flex-col gap-4 md:flex-row md:items-center"
-          >
-            <Skeleton className="h-12 w-full md:w-1/12" />
-            <Skeleton className="h-12 w-full md:w-2/12" />
-            <Skeleton className="hidden h-12 md:block md:w-2/12" />
-            <Skeleton className="hidden h-12 md:block md:w-2/12" />
-            <Skeleton className="hidden h-12 md:block md:w-2/12" />
-            <Skeleton className="hidden h-12 md:block md:w-1/12" />
-            <Skeleton className="hidden h-12 md:block md:w-1/12" />
+      {/* Pagination */}
+      <div className="flex items-center justify-between pt-2">
+        {/* Rows per page */}
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-4 w-24 rounded" />
+          <Skeleton className="h-9 w-16 rounded-md" />
+        </div>
+        {/* Page info + navigation */}
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-4 w-24 rounded" />
+          <div className="flex gap-1">
+            <Skeleton className="size-9 rounded-md" />
+            <Skeleton className="size-9 rounded-md" />
+            <Skeleton className="size-9 rounded-md" />
+            <Skeleton className="size-9 rounded-md" />
           </div>
-        ))}
+        </div>
       </div>
-    </Card>
+    </div>
   );
 };