feat: upgrade to React 19, Next.js 15, React Compiler, HeroUI and Tailwind 4 (#8748)

Co-authored-by: Alan Buscaglia <alanbuscaglia@MacBook-Pro.local>
Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>
Co-authored-by: César Arroba <cesar@prowler.com>
Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { Select, SelectItem } from "@heroui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Select, SelectItem } from "@nextui-org/react";
 import { SaveIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
@@ -92,7 +92,7 @@ export const SendInvitationForm = ({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmitClient)}
-        className="flex flex-col space-y-4"
+        className="flex flex-col gap-4"
       >
         {/* Email Field */}
         <CustomInput
@@ -102,7 +102,7 @@ export const SendInvitationForm = ({
           label="Email"
           labelPlacement="inside"
           placeholder="Enter the email address"
-          variant="bordered"
+          variant="flat"
           isRequired
           isInvalid={!!form.formState.errors.email}
         />
@@ -119,7 +119,7 @@ export const SendInvitationForm = ({
                 classNames={{
                   selectorIcon: "right-2",
                 }}
-                variant="bordered"
+                variant="flat"
                 isDisabled={isSelectorDisabled}
                 selectedKeys={[field.value]}
                 onSelectionChange={(selected) =>
@@ -144,7 +144,7 @@ export const SendInvitationForm = ({
         />
 
         {/* Submit Button */}
-        <div className="flex w-full justify-end sm:space-x-6">
+        <div className="flex w-full justify-end sm:gap-6">
           <CustomButton
             type="submit"
             ariaLabel="Send Invitation"

ui/components/invitations/workflow/skeleton-invitation-info.tsx

@@ -1,61 +1,62 @@
-import { Card, Skeleton } from "@nextui-org/react";
+import { Card } from "@heroui/card";
+import { Skeleton } from "@heroui/skeleton";
 import React from "react";
 
 export const SkeletonInvitationInfo = () => {
   return (
-    <Card className="h-full w-full space-y-5 p-4" radius="sm">
+    <Card className="flex h-full w-full flex-col gap-5 p-4" radius="sm">
       {/* Table headers */}
       <div className="hidden justify-between md:flex">
         <Skeleton className="w-1/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-2/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-2/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-2/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-2/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-1/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-1/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
       </div>
 
       {/* Table body */}
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {[...Array(3)].map((_, index) => (
           <div
             key={index}
-            className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
+            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="h-12 bg-default-300"></div>
+              <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="h-12 bg-default-300"></div>
+              <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="h-12 bg-default-300"></div>
+              <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="h-12 bg-default-300"></div>
+              <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="h-12 bg-default-300"></div>
+              <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="h-12 bg-default-300"></div>
+              <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="h-12 bg-default-300"></div>
+              <div className="bg-default-300 h-12"></div>
             </Skeleton>
           </div>
         ))}

ui/components/invitations/workflow/vertical-steps.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { ButtonProps } from "@nextui-org/react";
-import { cn } from "@nextui-org/react";
+import type { ButtonProps } from "@heroui/button";
+import { cn } from "@heroui/theme";
 import { useControlledState } from "@react-stately/utils";
 import { domAnimation, LazyMotion, m } from "framer-motion";
 import type { ComponentProps } from "react";
@@ -117,38 +117,38 @@ 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(--nextui-default-300))]",
-        "[--inactive-color:hsl(var(--nextui-default-300))]",
+        "[--inactive-border-color:hsl(var(--heroui-default-300))]",
+        "[--inactive-color:hsl(var(--heroui-default-300))]",
       ];
 
       switch (color) {
         case "primary":
-          userColor = "[--step-color:hsl(var(--nextui-primary))]";
-          fgColor = "[--step-fg-color:hsl(var(--nextui-primary-foreground))]";
+          userColor = "[--step-color:hsl(var(--heroui-primary))]";
+          fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
           break;
         case "secondary":
-          userColor = "[--step-color:hsl(var(--nextui-secondary))]";
-          fgColor = "[--step-fg-color:hsl(var(--nextui-secondary-foreground))]";
+          userColor = "[--step-color:hsl(var(--heroui-secondary))]";
+          fgColor = "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]";
           break;
         case "success":
-          userColor = "[--step-color:hsl(var(--nextui-success))]";
-          fgColor = "[--step-fg-color:hsl(var(--nextui-success-foreground))]";
+          userColor = "[--step-color:hsl(var(--heroui-success))]";
+          fgColor = "[--step-fg-color:hsl(var(--heroui-success-foreground))]";
           break;
         case "warning":
-          userColor = "[--step-color:hsl(var(--nextui-warning))]";
-          fgColor = "[--step-fg-color:hsl(var(--nextui-warning-foreground))]";
+          userColor = "[--step-color:hsl(var(--heroui-warning))]";
+          fgColor = "[--step-fg-color:hsl(var(--heroui-warning-foreground))]";
           break;
         case "danger":
-          userColor = "[--step-color:hsl(var(--nextui-error))]";
-          fgColor = "[--step-fg-color:hsl(var(--nextui-error-foreground))]";
+          userColor = "[--step-color:hsl(var(--heroui-error))]";
+          fgColor = "[--step-fg-color:hsl(var(--heroui-error-foreground))]";
           break;
         case "default":
-          userColor = "[--step-color:hsl(var(--nextui-default))]";
-          fgColor = "[--step-fg-color:hsl(var(--nextui-default-foreground))]";
+          userColor = "[--step-color:hsl(var(--heroui-default))]";
+          fgColor = "[--step-fg-color:hsl(var(--heroui-default-foreground))]";
           break;
         default:
-          userColor = "[--step-color:hsl(var(--nextui-primary))]";
-          fgColor = "[--step-fg-color:hsl(var(--nextui-primary-foreground))]";
+          userColor = "[--step-color:hsl(var(--heroui-primary))]";
+          fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
           break;
       }
 
@@ -156,7 +156,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(--nextui-default-300))]",
+          "[--inactive-bar-color:hsl(var(--heroui-default-300))]",
         );
 
       return colorsVars;
@@ -181,7 +181,7 @@ export const VerticalSteps = React.forwardRef<
                     ref={ref}
                     aria-current={status === "active" ? "step" : undefined}
                     className={cn(
-                      "group flex w-full cursor-pointer items-center justify-center gap-4 rounded-large px-3 py-2.5",
+                      "group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5",
                       stepClassName,
                     )}
                     onClick={() => setCurrentStep(stepIdx)}
@@ -193,7 +193,7 @@ export const VerticalSteps = React.forwardRef<
                           <m.div
                             animate={status}
                             className={cn(
-                              "relative flex h-[34px] w-[34px] items-center justify-center rounded-full border-medium text-large font-semibold text-default-foreground",
+                              "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",
                               },
@@ -221,7 +221,7 @@ export const VerticalSteps = React.forwardRef<
                           >
                             <div className="flex items-center justify-center">
                               {status === "complete" ? (
-                                <CheckIcon className="h-6 w-6 text-[var(--active-fg-color)]" />
+                                <CheckIcon className="h-6 w-6 text-(--active-fg-color)" />
                               ) : (
                                 <span>{stepIdx + 1}</span>
                               )}
@@ -234,7 +234,7 @@ export const VerticalSteps = React.forwardRef<
                       <div>
                         <div
                           className={cn(
-                            "text-medium font-medium text-default-foreground transition-[color,opacity] duration-300 group-active:opacity-70",
+                            "text-medium text-default-foreground font-medium transition-[color,opacity] duration-300 group-active:opacity-70",
                             {
                               "text-default-500": status === "inactive",
                             },
@@ -244,7 +244,7 @@ export const VerticalSteps = React.forwardRef<
                         </div>
                         <div
                           className={cn(
-                            "text-tiny text-default-600 transition-[color,opacity] duration-300 group-active:opacity-70 lg:text-small",
+                            "text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70",
                             {
                               "text-default-500": status === "inactive",
                             },
@@ -260,7 +260,7 @@ export const VerticalSteps = React.forwardRef<
                   <div
                     aria-hidden="true"
                     className={cn(
-                      "pointer-events-none absolute left-3 top-[calc(64px_*_var(--idx)_+_1)] flex h-1/2 -translate-y-1/3 items-center px-4",
+                      "pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4",
                     )}
                     style={{
                       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -270,8 +270,8 @@ export const VerticalSteps = React.forwardRef<
                   >
                     <div
                       className={cn(
-                        "relative h-full w-0.5 bg-[var(--inactive-bar-color)] transition-colors duration-300",
-                        "after:absolute after:block after:h-0 after:w-full after:bg-[var(--active-border-color)] after:transition-[height] after:duration-300 after:content-['']",
+                        "relative h-full w-0.5 bg-(--inactive-bar-color) transition-colors duration-300",
+                        "after:absolute after:block after:h-0 after:w-full after:bg-(--active-border-color) after:transition-[height] after:duration-300 after:content-['']",
                         {
                           "after:h-full": stepIdx < currentStep,
                         },

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { Progress, Spacer } from "@nextui-org/react";
+import { Progress } from "@heroui/progress";
+import { Spacer } from "@heroui/spacer";
 import { usePathname } from "next/navigation";
 import React from "react";
 
@@ -31,34 +32,51 @@ export const WorkflowSendInvite = () => {
   const currentStep = currentStepIndex === -1 ? 0 : currentStepIndex;
 
   return (
-    <section className="max-w-sm">
-      <h1 className="mb-2 text-xl font-medium" id="getting-started">
+    <section className="w-full max-w-none p-3 sm:max-w-sm sm:p-0">
+      <h1 className="mb-2 text-lg font-medium sm:text-xl" id="getting-started">
         Send invitation
       </h1>
-      <p className="mb-5 text-small text-default-500">
+      <p className="sm:text-small text-default-500 mb-3 text-xs sm:mb-5">
         Follow the steps to send an invitation to the users.
       </p>
       <Progress
         classNames={{
-          base: "px-0.5 mb-5",
-          label: "text-small",
-          value: "text-small text-default-400",
+          base: "px-0.5 mb-3 sm:mb-5",
+          label: "text-xs sm:text-small",
+          value: "text-xs sm:text-small text-default-400",
         }}
         label="Steps"
         maxValue={steps.length - 1}
         minValue={0}
         showValueLabel={true}
-        size="md"
+        size="sm"
         value={currentStep}
         valueLabel={`${currentStep + 1} of ${steps.length}`}
       />
-      <VerticalSteps
-        hideProgressBars
-        currentStep={currentStep}
-        stepClassName="border border-default-200 dark:border-default-50 aria-[current]:bg-default-100 dark:aria-[current]:bg-prowler-blue-800 cursor-default"
-        steps={steps}
-      />
-      <Spacer y={4} />
+
+      {/* Desktop: Full vertical steps */}
+      <div className="hidden sm:block">
+        <VerticalSteps
+          hideProgressBars
+          currentStep={currentStep}
+          stepClassName="border border-default-200 dark:border-default-50 aria-[current]:bg-default-100 dark:aria-[current]:bg-prowler-blue-800 cursor-default"
+          steps={steps}
+        />
+      </div>
+
+      {/* Mobile: Compact current step indicator */}
+      <div className="sm:hidden">
+        <div className="text-default-400 border-l-2 border-blue-500 py-1 pl-3 text-xs">
+          <div className="font-medium">
+            Current: {steps[currentStep]?.title}
+          </div>
+          <div className="text-default-300 mt-1 text-xs">
+            {steps[currentStep]?.description}
+          </div>
+        </div>
+      </div>
+
+      <Spacer y={2} />
     </section>
   );
 };