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/ui/table/data-table-column-header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/button";
 import { Column } from "@tanstack/react-table";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { HTMLAttributes } from "react";
@@ -80,10 +80,10 @@ export const DataTableColumnHeader = <TData, TValue>({
 
   return (
     <Button
-      className="flex h-10 w-full items-center justify-between whitespace-nowrap bg-transparent px-0 text-left align-middle text-tiny font-semibold text-foreground-500 outline-none dark:text-slate-400"
+      className="text-tiny text-foreground-500 flex h-10 w-full items-center justify-between bg-transparent px-0 text-left align-middle font-semibold whitespace-nowrap outline-none dark:text-slate-400"
       onPress={getToggleSortingHandler}
     >
-      <span className="block whitespace-nowrap break-normal">{title}</span>
+      <span className="block break-normal whitespace-nowrap">{title}</span>
       {renderSortIcon()}
     </Button>
   );

ui/components/ui/table/data-table-pagination.tsx

@@ -75,14 +75,14 @@ export function DataTablePagination({
 
   return (
     <div className="flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8">
-      <div className="whitespace-nowrap text-sm">
+      <div className="text-sm whitespace-nowrap">
         {totalEntries} entries in total
       </div>
       {totalEntries > 10 && (
         <div className="flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
           {/* Rows per page selector */}
-          <div className="flex items-center space-x-2">
-            <p className="whitespace-nowrap text-sm font-medium">
+          <div className="flex items-center gap-2">
+            <p className="text-sm font-medium whitespace-nowrap">
               Rows per page
             </p>
             <Select
@@ -114,7 +114,7 @@ export function DataTablePagination({
                 }
               }}
             >
-              <SelectTrigger className="h-8 w-[4.5rem]">
+              <SelectTrigger className="h-8 w-18">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent side="top">
@@ -133,7 +133,7 @@ export function DataTablePagination({
           <div className="flex items-center justify-center text-sm font-medium">
             Page {currentPage} of {totalPages}
           </div>
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center gap-2">
             <Link
               aria-label="Go to first page"
               className={`${baseLinkClass} ${isFirstPage ? disabledLinkClass : ""}`}

ui/components/ui/table/data-table.tsx

@@ -40,6 +40,7 @@ export function DataTable<TData, TValue>({
 }: DataTableProviderProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
   const table = useReactTable({
     data,
     columns,
@@ -59,7 +60,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <>
-      <div className="relative z-0 flex w-full flex-col justify-between gap-4 overflow-auto rounded-large p-4 shadow-small dark:bg-prowler-blue-400">
+      <div className="rounded-large shadow-small dark:bg-prowler-blue-400 relative z-0 flex w-full flex-col justify-between gap-4 overflow-auto p-4">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -110,7 +111,7 @@ export function DataTable<TData, TValue>({
         </Table>
       </div>
       {metadata && (
-        <div className="flex w-full items-center space-x-2 py-4">
+        <div className="flex w-full items-center gap-2 py-4">
           <DataTablePagination
             metadata={metadata}
             disableScroll={disableScroll}

ui/components/ui/table/severity-badge.tsx

@@ -1,4 +1,4 @@
-import { Chip } from "@nextui-org/react";
+import { Chip } from "@heroui/chip";
 import clsx from "clsx";
 import React from "react";
 
@@ -36,7 +36,7 @@ export const SeverityBadge = ({ severity }: { severity: Severity }) => {
 
   return (
     <Chip
-      className={clsx("gap-1 border-none capitalize text-default-600", {
+      className={clsx("text-default-600 gap-1 border-none capitalize", {
         "bg-system-severity-critical text-white dark:text-white":
           severity === "critical",
       })}

ui/components/ui/table/status-badge.tsx

@@ -1,4 +1,4 @@
-import { Chip } from "@nextui-org/react";
+import { Chip } from "@heroui/chip";
 import clsx from "clsx";
 import React from "react";
 
@@ -41,8 +41,8 @@ export const StatusBadge = ({
   return (
     <Chip
       className={clsx(
-        "relative w-full max-w-full border-none text-xs capitalize text-default-600",
-        status === "executing" && "border-1 border-solid border-transparent",
+        "text-default-600 relative w-full max-w-full border-none text-xs capitalize",
+        status === "executing" && "border border-solid border-transparent",
         className,
       )}
       size={size}
@@ -52,8 +52,8 @@ export const StatusBadge = ({
     >
       {status === "executing" ? (
         <div className="relative flex items-center justify-center gap-1">
-          <SpinnerIcon size={16} className="animate-spin text-default-500" />
-          <span className="pointer-events-none text-[0.6rem] text-default-500">
+          <SpinnerIcon size={16} className="text-default-500 animate-spin" />
+          <span className="text-default-500 pointer-events-none text-[0.6rem]">
             {loadingProgress}%
           </span>
           <span>executing</span>

ui/components/ui/table/status-finding-badge.tsx

@@ -1,4 +1,4 @@
-import { Chip } from "@nextui-org/react";
+import { Chip } from "@heroui/chip";
 import React from "react";
 
 export type FindingStatus = "FAIL" | "PASS" | "MANUAL" | "MUTED";
@@ -33,7 +33,7 @@ export const StatusFindingBadge = ({
       color={color}
       {...props}
     >
-      <span className="text-xs font-light tracking-wide text-default-600">
+      <span className="text-default-600 text-xs font-light tracking-wide">
         {status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()}
         {value !== undefined && `: ${value}`}
       </span>

ui/components/ui/table/table.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@nextui-org/react";
+import { cn } from "@heroui/theme";
 import * as React from "react";
 
 const Table = React.forwardRef<
@@ -22,7 +22,7 @@ const TableHeader = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      "[&>tr]:first:rounded-lg [&>tr]:first:shadow-small",
+      "[&>tr]:first:shadow-small [&>tr]:first:rounded-lg",
       className,
     )}
     {...props}
@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 whitespace-nowrap bg-default-100 px-2 text-left align-middle text-tiny font-semibold text-foreground-500 outline-none first:rounded-l-lg last:rounded-r-lg data-[focus-visible=true]:z-10 data-[hover=true]:text-foreground-400 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2 data-[focus-visible=true]:outline-focus dark:bg-prowler-blue-800 dark:text-slate-400 rtl:text-right rtl:first:rounded-l-[unset] rtl:first:rounded-r-lg rtl:last:rounded-l-lg rtl:last:rounded-r-[unset] [&:has([role=checkbox])]:pr-0",
+      "bg-default-100 text-tiny text-foreground-500 data-[hover=true]:text-foreground-400 data-[focus-visible=true]:outline-focus dark:bg-prowler-blue-800 h-10 px-2 text-left align-middle font-semibold whitespace-nowrap outline-none first:rounded-l-lg last:rounded-r-lg data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2 rtl:text-right rtl:first:rounded-l-[unset] rtl:first:rounded-r-lg rtl:last:rounded-l-lg rtl:last:rounded-r-[unset] dark:text-slate-400 [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}