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

ui/components/integrations/security-hub/security-hub-integration-card.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 
 import { AWSSecurityHubIcon } from "@/components/icons/services/IconServices";
 import { Button } from "@/components/shadcn";
-import { CustomLink } from "@/components/ui/custom/custom-link";
+import { CustomLink } from "@/components/shadcn/custom/custom-link";
 
 import { Card, CardContent, CardHeader } from "../../shadcn";
 

ui/components/integrations/security-hub/security-hub-integration-form.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-import { Checkbox } from "@heroui/checkbox";
-import { Divider } from "@heroui/divider";
-import { Radio, RadioGroup } from "@heroui/radio";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
@@ -15,16 +12,21 @@ import {
   ProviderTypeIcon,
 } from "@/components/icons/providers-badge/provider-type-icon";
 import { AWSRoleCredentialsForm } from "@/components/providers/workflow/forms/select-credentials-type/aws/credentials-type/aws-role-credentials-form";
-import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
-import { useToast } from "@/components/ui";
-import { CustomLink } from "@/components/ui/custom/custom-link";
+import { Checkbox, Separator } from "@/components/shadcn";
+import { useToast } from "@/components/shadcn";
+import { CustomLink } from "@/components/shadcn/custom/custom-link";
 import {
   Form,
   FormControl,
   FormField,
   FormMessage,
-} from "@/components/ui/form";
-import { FormButtons } from "@/components/ui/form/form-buttons";
+} from "@/components/shadcn/form";
+import { FormButtons } from "@/components/shadcn/form/form-buttons";
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/components/shadcn/radio-group/radio-group";
+import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
 import { getAWSCredentialsTemplateLinks } from "@/lib";
 import { AWSCredentialsRole } from "@/types";
 import {
@@ -289,8 +291,8 @@ export const SecurityHubIntegrationForm = ({
       return (
         <div className="flex flex-col gap-4">
           <RadioGroup
-            size="sm"
             aria-label="Credential type"
+            className="gap-2"
             value={useCustomCredentials ? "custom" : "provider"}
             onValueChange={(value) => {
               form.setValue("use_custom_credentials", value === "custom", {
@@ -299,17 +301,29 @@ export const SecurityHubIntegrationForm = ({
               });
             }}
           >
-            <Radio value="provider">
-              <span className="text-sm">Use provider credentials</span>
-            </Radio>
-            <Radio value="custom">
-              <span className="text-sm">Use custom credentials</span>
-            </Radio>
+            <div className="flex items-center gap-2">
+              <RadioGroupItem value="provider" id="credentials-provider" />
+              <label
+                htmlFor="credentials-provider"
+                className="cursor-pointer text-sm"
+              >
+                Use provider credentials
+              </label>
+            </div>
+            <div className="flex items-center gap-2">
+              <RadioGroupItem value="custom" id="credentials-custom" />
+              <label
+                htmlFor="credentials-custom"
+                className="cursor-pointer text-sm"
+              >
+                Use custom credentials
+              </label>
+            </div>
           </RadioGroup>
 
           {useCustomCredentials && (
             <>
-              <Divider />
+              <Separator />
               <AWSRoleCredentialsForm
                 control={form.control as unknown as Control<AWSCredentialsRole>}
                 setValue={form.setValue as any}
@@ -382,7 +396,7 @@ export const SecurityHubIntegrationForm = ({
                   )}
                 />
               </div>
-              <Divider />
+              <Separator />
             </>
           )}
 
@@ -392,16 +406,20 @@ export const SecurityHubIntegrationForm = ({
               name="send_only_fails"
               render={({ field }) => (
                 <FormControl>
-                  <Checkbox
-                    isSelected={Boolean(field.value)}
-                    onValueChange={field.onChange}
-                    size="sm"
-                    color="default"
-                  >
-                    <span className="text-sm">
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="send_only_fails"
+                      size="sm"
+                      checked={Boolean(field.value)}
+                      onCheckedChange={field.onChange}
+                    />
+                    <label
+                      htmlFor="send_only_fails"
+                      className="cursor-pointer text-sm"
+                    >
                       Send only findings with status FAIL
-                    </span>
-                  </Checkbox>
+                    </label>
+                  </div>
                 </FormControl>
               )}
             />
@@ -411,14 +429,20 @@ export const SecurityHubIntegrationForm = ({
               name="archive_previous_findings"
               render={({ field }) => (
                 <FormControl>
-                  <Checkbox
-                    isSelected={Boolean(field.value)}
-                    onValueChange={field.onChange}
-                    size="sm"
-                    color="default"
-                  >
-                    <span className="text-sm">Archive previous findings</span>
-                  </Checkbox>
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="archive_previous_findings"
+                      size="sm"
+                      checked={Boolean(field.value)}
+                      onCheckedChange={field.onChange}
+                    />
+                    <label
+                      htmlFor="archive_previous_findings"
+                      className="cursor-pointer text-sm"
+                    >
+                      Archive previous findings
+                    </label>
+                  </div>
                 </FormControl>
               )}
             />
@@ -429,17 +453,21 @@ export const SecurityHubIntegrationForm = ({
                 name="use_custom_credentials"
                 render={({ field }) => (
                   <FormControl>
-                    <Checkbox
-                      isSelected={field.value}
-                      onValueChange={field.onChange}
-                      size="sm"
-                      color="default"
-                    >
-                      <span className="text-sm">
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        id="use_custom_credentials"
+                        size="sm"
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                      <label
+                        htmlFor="use_custom_credentials"
+                        className="cursor-pointer text-sm"
+                      >
                         Use custom credentials (By default, AWS account ones
                         will be used)
-                      </span>
-                    </Checkbox>
+                      </label>
+                    </div>
                   </FormControl>
                 )}
               />
@@ -529,7 +557,7 @@ export const SecurityHubIntegrationForm = ({
       >
         <div className="flex flex-col gap-4">
           <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
-            <p className="text-default-500 flex items-center gap-2 text-sm">
+            <p className="text-text-neutral-tertiary flex items-center gap-2 text-sm">
               Need help configuring your AWS Security Hub integration?
             </p>
             <CustomLink

ui/components/integrations/security-hub/security-hub-integrations-manager.tsx

@@ -16,9 +16,9 @@ import {
   IntegrationSkeleton,
 } from "@/components/integrations/shared";
 import { Badge, Button } from "@/components/shadcn";
+import { useToast } from "@/components/shadcn";
 import { Modal } from "@/components/shadcn/modal";
-import { useToast } from "@/components/ui";
-import { DataTablePagination } from "@/components/ui/table/data-table-pagination";
+import { DataTablePagination } from "@/components/shadcn/table/data-table-pagination";
 import { triggerTestConnectionWithDelay } from "@/lib/integrations/test-connection-helper";
 import { MetaDataProps } from "@/types";
 import { IntegrationProps } from "@/types/integrations";