chore(frontend): Migrate from NextUI to HeroUI via codemod (#6635)

frontend/__tests__/components/landing-translations.test.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import translations from "../../src/i18n/translation.json";
 import { UserAvatar } from "../../src/components/features/sidebar/user-avatar";
 
-vi.mock("@nextui-org/react", () => ({
+vi.mock("@heroui/react", () => ({
   Tooltip: ({ content, children }: { content: string; children: React.ReactNode }) => (
     <div>
       {children}

frontend/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0-rc.0",
-    "@nextui-org/react": "^2.6.11",
+    "@heroui/react": "2.6.14",
     "@react-router/node": "^7.1.5",
     "@react-router/serve": "^7.1.5",
     "@react-types/shared": "^3.27.0",

frontend/src/components/features/github/github-repo-selector.tsx

@@ -4,7 +4,7 @@ import {
   Autocomplete,
   AutocompleteItem,
   AutocompleteSection,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { useDispatch } from "react-redux";
 import posthog from "posthog-js";
 import { I18nKey } from "#/i18n/declaration";

frontend/src/components/shared/action-tooltip.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from "@nextui-org/react";
+import { Tooltip } from "@heroui/react";
 import { useTranslation } from "react-i18next";
 import ConfirmIcon from "#/assets/confirm";
 import RejectIcon from "#/assets/reject";

frontend/src/components/shared/buttons/action-button.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from "@nextui-org/react";
+import { Tooltip } from "@heroui/react";
 import { AgentState } from "#/types/agent-state";
 
 interface ActionButtonProps {

frontend/src/components/shared/buttons/icon-button.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 import React, { ReactElement } from "react";
 
 export interface IconButtonProps {

frontend/src/components/shared/buttons/tooltip-button.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from "@nextui-org/react";
+import { Tooltip } from "@heroui/react";
 import React, { ReactNode } from "react";
 import { cn } from "#/utils/utils";
 

frontend/src/components/shared/form-fieldset.tsx

@@ -1,4 +1,4 @@
-import { Autocomplete, AutocompleteItem } from "@nextui-org/react";
+import { Autocomplete, AutocompleteItem } from "@heroui/react";
 
 interface FormFieldsetProps {
   id: string;

frontend/src/components/shared/inputs/advanced-option-switch.tsx

@@ -1,4 +1,4 @@
-import { Switch } from "@nextui-org/react";
+import { Switch } from "@heroui/react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import { cn } from "#/utils/utils";

frontend/src/components/shared/inputs/agent-input.tsx

@@ -1,4 +1,4 @@
-import { Autocomplete, AutocompleteItem } from "@nextui-org/react";
+import { Autocomplete, AutocompleteItem } from "@heroui/react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 

frontend/src/components/shared/inputs/api-key-input.tsx

@@ -1,4 +1,4 @@
-import { Input, Tooltip } from "@nextui-org/react";
+import { Input, Tooltip } from "@heroui/react";
 import { useTranslation } from "react-i18next";
 import { FaCheckCircle, FaExclamationCircle } from "react-icons/fa";
 import { I18nKey } from "#/i18n/declaration";

frontend/src/components/shared/inputs/base-url-input.tsx

@@ -1,4 +1,4 @@
-import { Input } from "@nextui-org/react";
+import { Input } from "@heroui/react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 

frontend/src/components/shared/inputs/confirmation-mode-switch.tsx

@@ -1,4 +1,4 @@
-import { Switch } from "@nextui-org/react";
+import { Switch } from "@heroui/react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import { cn } from "#/utils/utils";

frontend/src/components/shared/inputs/custom-model-input.tsx

@@ -1,4 +1,4 @@
-import { Input } from "@nextui-org/react";
+import { Input } from "@heroui/react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 

frontend/src/components/shared/inputs/security-analyzers-input.tsx

@@ -1,4 +1,4 @@
-import { Autocomplete, AutocompleteItem } from "@nextui-org/react";
+import { Autocomplete, AutocompleteItem } from "@heroui/react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 

frontend/src/components/shared/modals/base-modal/base-modal.tsx

@@ -4,7 +4,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import React from "react";
 import { Action, FooterContent } from "./footer-content";
 import { HeaderContent } from "./header-content";

frontend/src/components/shared/modals/base-modal/footer-content.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 import React from "react";
 
 export interface Action {

frontend/src/components/shared/modals/security/invariant/invariant.tsx

@@ -4,7 +4,7 @@ import { IoAlertCircle } from "react-icons/io5";
 import { useTranslation } from "react-i18next";
 import { Editor, Monaco } from "@monaco-editor/react";
 import { editor } from "monaco-editor";
-import { Button, Select, SelectItem } from "@nextui-org/react";
+import { Button, Select, SelectItem } from "@heroui/react";
 import { useMutation } from "@tanstack/react-query";
 import { RootState } from "#/store";
 import {

frontend/src/components/shared/modals/settings/model-selector.tsx

@@ -2,7 +2,7 @@ import {
   Autocomplete,
   AutocompleteItem,
   AutocompleteSection,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";

frontend/src/components/shared/modals/settings/runtime-size-selector.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { Select, SelectItem } from "@nextui-org/react";
+import { Select, SelectItem } from "@heroui/react";
 import { I18nKey } from "#/i18n/declaration";
 
 interface RuntimeSizeSelectorProps {

frontend/src/routes/_oh.app/route.tsx

@@ -1,4 +1,4 @@
-import { useDisclosure } from "@nextui-org/react";
+import { useDisclosure } from "@heroui/react";
 import React from "react";
 import { Outlet } from "react-router";
 import { useDispatch, useSelector } from "react-redux";

frontend/tailwind.config.js

@@ -1,10 +1,10 @@
 /** @type {import('tailwindcss').Config} */
-import { nextui } from "@nextui-org/react";
+import { heroui } from "@heroui/react";
 import typography from '@tailwindcss/typography';
 export default {
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -19,7 +19,7 @@ export default {
   },
   darkMode: "class",
   plugins: [
-    nextui({
+    heroui({
       defaultTheme: "dark",
       layout: {
         radius: {