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

ui/components/invitations/workflow/forms/send-invitation-form.tsx

@@ -8,6 +8,9 @@ import * as z from "zod";
 
 import { sendInvite } from "@/actions/invitations/invitation";
 import { Button } from "@/components/shadcn";
+import { useToast } from "@/components/shadcn";
+import { CustomInput } from "@/components/shadcn/custom";
+import { Form } 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 } from "@/components/ui/form";
 import { ApiError } from "@/types";
 
 const sendInvitationFormSchema = z.object({

ui/components/invitations/workflow/skeleton-invitation-info.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 SkeletonInvitationInfo = () => {
   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 SkeletonInvitationInfo = () => {
             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/invitations/workflow/vertical-steps.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { cn } from "@heroui/theme";
 import { useControlledState } from "@react-stately/utils";
 import { domAnimation, LazyMotion, m } from "framer-motion";
 import type { ComponentProps } from "react";
 import React from "react";
 
+import { cn } from "@/lib/utils";
+
 export type VerticalStepProps = {
   className?: string;
   description?: React.ReactNode;
@@ -122,38 +123,37 @@ export const VerticalSteps = React.forwardRef<
         "[--active-color:var(--step-color)]",
         "[--complete-background-color:var(--step-color)]",
         "[--complete-border-color:var(--step-color)]",
-        "[--inactive-border-color:hsl(var(--heroui-default-300))]",
-        "[--inactive-color:hsl(var(--heroui-default-300))]",
+        "[--inactive-border-color:var(--border-neutral-tertiary)]",
+        "[--inactive-color:var(--border-neutral-tertiary)]",
       ];
 
       switch (color) {
-        case "primary":
-          userColor = "[--step-color:var(--bg-button-primary)]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
-          break;
         case "secondary":
-          userColor = "[--step-color:hsl(var(--heroui-secondary))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]";
+          userColor =
+            "[--step-color:var(--color-violet-600)] dark:[--step-color:var(--color-violet-400)]";
+          fgColor = "[--step-fg-color:var(--color-white)]";
           break;
         case "success":
-          userColor = "[--step-color:hsl(var(--heroui-success))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-success-foreground))]";
+          userColor = "[--step-color:var(--bg-pass-primary)]";
+          fgColor = "[--step-fg-color:var(--color-black)]";
           break;
         case "warning":
-          userColor = "[--step-color:hsl(var(--heroui-warning))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-warning-foreground))]";
+          userColor = "[--step-color:var(--bg-warning-primary)]";
+          fgColor = "[--step-fg-color:var(--color-black)]";
           break;
         case "danger":
-          userColor = "[--step-color:hsl(var(--heroui-error))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-error-foreground))]";
+          userColor = "[--step-color:var(--bg-fail-primary)]";
+          fgColor = "[--step-fg-color:var(--color-white)]";
           break;
         case "default":
-          userColor = "[--step-color:hsl(var(--heroui-default))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-default-foreground))]";
+          userColor =
+            "[--step-color:var(--color-zinc-300)] dark:[--step-color:var(--color-zinc-600)]";
+          fgColor = "[--step-fg-color:var(--text-neutral-primary)]";
           break;
+        case "primary":
         default:
-          userColor = "[--step-color:hsl(var(--heroui-primary))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
+          userColor = "[--step-color:var(--bg-button-primary)]";
+          fgColor = "[--step-fg-color:var(--color-black)]";
           break;
       }
 
@@ -161,7 +161,7 @@ export const VerticalSteps = React.forwardRef<
       if (!className?.includes("--step-color")) colorsVars.unshift(userColor);
       if (!className?.includes("--inactive-bar-color"))
         colorsVars.push(
-          "[--inactive-bar-color:hsl(var(--heroui-default-300))]",
+          "[--inactive-bar-color:var(--border-neutral-tertiary)]",
         );
 
       return colorsVars;
@@ -186,7 +186,7 @@ export const VerticalSteps = React.forwardRef<
                     ref={ref}
                     aria-current={status === "active" ? "step" : undefined}
                     className={cn(
-                      "group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5",
+                      "group flex w-full cursor-pointer items-center justify-center gap-4 rounded-[14px] px-3 py-2.5",
                       stepClassName,
                     )}
                     onClick={() => setCurrentStep(stepIdx)}
@@ -197,12 +197,9 @@ export const VerticalSteps = React.forwardRef<
                         <div className="relative">
                           <m.div
                             animate={status}
-                            className={cn(
-                              "border-medium text-large text-default-foreground relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold",
-                              {
-                                "shadow-lg": status === "complete",
-                              },
-                            )}
+                            className={`text-text-neutral-primary relative flex h-[34px] w-[34px] items-center justify-center rounded-full border-2 text-lg font-semibold ${
+                              status === "complete" ? "shadow-lg" : ""
+                            }`}
                             data-status={status}
                             initial={false}
                             transition={{ duration: 0.25 }}
@@ -238,22 +235,20 @@ export const VerticalSteps = React.forwardRef<
                     <div className="flex-1 text-left">
                       <div>
                         <div
-                          className={cn(
-                            "text-medium text-default-foreground font-medium transition-[color,opacity] duration-300 group-active:opacity-70",
-                            {
-                              "text-default-500": status === "inactive",
-                            },
-                          )}
+                          className={`text-base font-medium transition-[color,opacity] duration-300 group-active:opacity-70 ${
+                            status === "inactive"
+                              ? "text-text-neutral-tertiary"
+                              : "text-text-neutral-primary"
+                          }`}
                         >
                           {step.title}
                         </div>
                         <div
-                          className={cn(
-                            "text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70",
-                            {
-                              "text-default-500": status === "inactive",
-                            },
-                          )}
+                          className={`text-xs transition-[color,opacity] duration-300 group-active:opacity-70 lg:text-sm ${
+                            status === "inactive"
+                              ? "text-text-neutral-tertiary"
+                              : "text-text-neutral-secondary"
+                          }`}
                         >
                           {step.description}
                         </div>

ui/components/invitations/workflow/workflow-send-invite.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Progress } from "@heroui/progress";
-import { Spacer } from "@heroui/spacer";
 import { usePathname } from "next/navigation";
 import React from "react";
 
+import { Progress } from "@/components/shadcn/progress";
+
 import { VerticalSteps } from "./vertical-steps";
 
 const steps = [
@@ -36,24 +36,23 @@ export const WorkflowSendInvite = () => {
       <h1 className="mb-2 text-lg font-medium sm:text-xl" id="getting-started">
         Send invitation
       </h1>
-      <p className="sm:text-small text-default-500 mb-3 text-xs sm:mb-5">
+      <p className="text-text-neutral-tertiary mb-3 text-xs sm:mb-5 sm:text-sm">
         Follow the steps to send an invitation to the users.
       </p>
-      <Progress
-        classNames={{
-          base: "px-0.5 mb-3 sm:mb-5",
-          label: "text-xs sm:text-small",
-          value: "text-xs sm:text-small text-default-400",
-          indicator: "bg-button-primary",
-        }}
-        label="Steps"
-        maxValue={steps.length}
-        minValue={0}
-        showValueLabel={true}
-        size="sm"
-        value={currentStep + 1}
-        valueLabel={`${currentStep + 1} of ${steps.length}`}
-      />
+      <div className="mb-3 flex flex-col gap-2 px-0.5 sm:mb-5">
+        <div className="flex items-center justify-between">
+          <span className="text-xs sm:text-sm">Steps</span>
+          <span className="text-text-neutral-tertiary text-xs sm:text-sm">
+            {`${currentStep + 1} of ${steps.length}`}
+          </span>
+        </div>
+        <Progress
+          aria-label="Steps"
+          value={((currentStep + 1) / steps.length) * 100}
+          className="h-1"
+          indicatorClassName="bg-button-primary"
+        />
+      </div>
 
       {/* Desktop: Full vertical steps */}
       <div className="hidden sm:block">
@@ -71,13 +70,13 @@ export const WorkflowSendInvite = () => {
           <div className="font-medium">
             Current: {steps[currentStep]?.title}
           </div>
-          <div className="text-default-300 mt-1 text-xs">
+          <div className="text-text-neutral-tertiary mt-1 text-xs">
             {steps[currentStep]?.description}
           </div>
         </div>
       </div>
 
-      <Spacer y={2} />
+      <div className="h-2" />
     </section>
   );
 };