chore: migrate nextui to heroui (#141)

frontend/components/DeleteConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
+import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/react';
 
 type Props = {
   isOpen: boolean;

frontend/components/ProjectDialog.tsx

@@ -11,7 +11,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { ProjectType, ProjectDialogMessages } from '@/types/project';
 
 type Props = {

frontend/components/PublicityChip.tsx

@@ -1,4 +1,4 @@
-import { Chip } from '@nextui-org/react';
+import { Chip } from '@heroui/react';
 
 type Props = {
   isPublic: boolean;

frontend/components/ThemeSwitch.tsx

@@ -2,7 +2,7 @@
 
 import { FC } from 'react';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { SwitchProps, useSwitch } from '@nextui-org/react';
+import { SwitchProps, useSwitch } from '@heroui/react';
 import { useTheme } from 'next-themes';
 import { useIsSSR } from '@react-aria/ssr';
 import clsx from 'clsx';

frontend/messages/en.json

@@ -302,7 +302,7 @@
     "edit_project": "Edit Project",
     "publicity": "Publicity",
     "public": "Public",
-    "update": "Update",
+    "private": "Private",
     "delete_project": "Delete Project",
     "delete": "Delete",
     "close": "Close",

frontend/package.json

@@ -9,8 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.6.11",
+    "@heroui/react": "^2.6.11",
-    "@nextui-org/theme": "^2.4.5",
+    "@heroui/system": "^2.4.10",
+    "@heroui/theme": "^2.4.5",
     "@react-aria/ssr": "^3.9.7",
     "@react-aria/visually-hidden": "^3.8.19",
     "@types/node": "22.13.5",
@@ -33,7 +34,6 @@
     "react": "^18.3.1",
     "react-apexcharts": "^1.7.0",
     "react-dom": "18.3.1",
-    "react-toastify": "^10.0.6",
     "sharp": "^0.33.5",
     "tailwind-variants": "^0.3.1",
     "tailwindcss": "^3.4.17",

frontend/src/app/[locale]/DemoImage.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Image } from '@nextui-org/react';
+import { Image } from '@heroui/react';
 import { useState, useEffect } from 'react';
 import { useTheme } from 'next-themes';
 

frontend/src/app/[locale]/DropdownAccount.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Button, DropdownTrigger, Dropdown, DropdownMenu, DropdownItem } from '@nextui-org/react';
+import { Button, DropdownTrigger, Dropdown, DropdownMenu, DropdownItem } from '@heroui/react';
 import { ChevronDown, PenTool, ArrowRightFromLine, ArrowRightToLine } from 'lucide-react';
 import { useContext } from 'react';
 import { TokenContext } from '@/utils/TokenProvider';

frontend/src/app/[locale]/DropdownLanguage.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Button, DropdownTrigger, Dropdown, DropdownMenu, DropdownItem } from '@nextui-org/react';
+import { Button, DropdownTrigger, Dropdown, DropdownMenu, DropdownItem } from '@heroui/react';
 import { Globe, ChevronDown } from 'lucide-react';
 import { locales } from '@/config/selection';
 

frontend/src/app/[locale]/HeaderNavbarMenu.tsx

@@ -15,7 +15,7 @@ import {
   Chip,
   ListboxItem,
   Listbox,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { ArrowRightFromLine, ArrowRightToLine, File, Globe, MoveUpRight, PenTool } from 'lucide-react';
 import { ThemeSwitch } from '@/components/ThemeSwitch';
 import { GithubIcon } from '@/components/icons';

frontend/src/app/[locale]/PaneMainFeatures.tsx

@@ -1,4 +1,4 @@
-import { Card, CardHeader, CardBody, Avatar } from '@nextui-org/react';
+import { Card, CardHeader, CardBody, Avatar } from '@heroui/react';
 import { Scale, Folder, Check, Globe } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 

frontend/src/app/[locale]/PaneMainTitle.tsx

@@ -1,5 +1,5 @@
 import { title, subtitle } from '@/components/primitives';
-import { Button, Link as NextUiLink } from '@nextui-org/react';
+import { Button, Link as NextUiLink } from '@heroui/react';
 import { MoveUpRight } from 'lucide-react';
 import { Link } from '@/src/i18n/routing';
 import { useTranslations } from 'next-intl';

frontend/src/app/[locale]/account/AccountPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { useState, useEffect, useContext } from 'react';
 import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
-import { Button, Card, CardHeader, CardFooter } from '@nextui-org/react';
+import { Button, Card, CardHeader, CardFooter } from '@heroui/react';
 import { TokenContext } from '@/utils/TokenProvider';
 import Avatar from 'boring-avatars';
 import { fetchMyProjects } from '@/utils/projectsControl';

frontend/src/app/[locale]/account/authPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { useState, useContext } from 'react';
-import { Input, Button, Card, CardHeader, CardBody } from '@nextui-org/react';
+import { Input, Button, Card, CardHeader, CardBody } from '@heroui/react';
 import { Link } from '@/src/i18n/routing';
 import { ChevronRight, Eye, EyeOff } from 'lucide-react';
 import { UserType, AuthMessages } from '@/types/user';

frontend/src/app/[locale]/admin/AdminPage.tsx

@@ -3,13 +3,12 @@ import React from 'react';
 import { useState, useEffect, useContext } from 'react';
 import { UserType, AdminMessages } from '@/types/user';
 import { TokenContext } from '@/utils/TokenProvider';
-import { ToastContext } from '@/utils/ToastProvider';
 import { useRouter } from '@/src/i18n/routing';
 import UsersTable from './UsersTable';
 import Config from '@/config/config';
 import { LocaleCodeType } from '@/types/locale';
 import { updateUserRole } from '@/utils/usersControl';
-import { Button } from '@nextui-org/react';
+import { Button, addToast } from '@heroui/react';
 import { roles } from '@/config/selection';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 const apiServer = Config.apiServer;
@@ -45,7 +44,6 @@ async function fetchUsers(jwt: string) {
 export default function AdminPage({ messages, locale }: Props) {
   const router = useRouter();
   const tokenContext = useContext(TokenContext);
-  const toastContext = useContext(ToastContext);
   const [users, setUsers] = useState<UserType[]>([]);
   const [myself, setMyself] = useState<UserType | null>(null);
 
@@ -85,7 +83,10 @@ export default function AdminPage({ messages, locale }: Props) {
     if (userEdit.id) {
       const data = await updateUserRole(tokenContext.token.access_token, userEdit.id, role);
       if (data.user) {
-        toastContext.showToast(messages.roleChanged, 'dark');
+        addToast({
+          title: 'Info',
+          description: messages.roleChanged,
+        });
         setUsers((prevUsers) => {
           return prevUsers.map((user) => {
             if (user.id === userEdit.id) {
@@ -104,10 +105,16 @@ export default function AdminPage({ messages, locale }: Props) {
       const data = await updateUserRole(tokenContext.token.access_token, myself.id, userRoleIndex);
 
       if (data && data.user) {
-        toastContext.showToast(messages.lostAdminAuth, 'dark');
+        addToast({
+          title: 'Info',
+          description: messages.lostAdminAuth,
+        });
         router.push(`/`, { locale: locale });
       } else {
-        toastContext.showToast(messages.atLeast, 'error');
+        addToast({
+          title: 'Info',
+          description: messages.atLeast,
+        });
       }
     }
   };

frontend/src/app/[locale]/admin/UsersTable.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownItem,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { ChevronDown } from 'lucide-react';
 import { UserType, AdminMessages } from '@/types/user';
 import { roles } from '@/config/selection';

frontend/src/app/[locale]/page.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from 'next-intl';
-import { Divider } from '@nextui-org/react';
+import { Divider } from '@heroui/react';
 import { title, subtitle } from '@/components/primitives';
 import PaneMainTitle from './PaneMainTitle';
 import PaneMainFeatures from './PaneMainFeatures';

frontend/src/app/[locale]/projects/ProjectsPage.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useState, useContext } from 'react';
-import { Button } from '@nextui-org/react';
+import { Button } from '@heroui/react';
 import { Plus } from 'lucide-react';
 import { TokenContext } from '@/utils/TokenProvider';
 import { ProjectDialogMessages, ProjectType, ProjectsMessages } from '@/types/project';

frontend/src/app/[locale]/projects/ProjectsTable.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback, ReactNode } from 'react';
-import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@nextui-org/react';
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@heroui/react';
 import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { ProjectType, ProjectsMessages } from '@/types/project';
 import dayjs from 'dayjs';

frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { useState, useEffect } from 'react';
-import { Listbox, ListboxItem } from '@nextui-org/react';
+import { Listbox, ListboxItem } from '@heroui/react';
 import { Home, Files, FlaskConical, Users, Settings } from 'lucide-react';
 import { usePathname, useRouter } from '@/src/i18n/routing';
 import useGetCurrentIds from '@/utils/useGetCurrentIds';

frontend/src/app/[locale]/projects/[projectId]/folders/FolderDialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { useState, useEffect } from 'react';
-import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
+import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/react';
 import { FolderType, FoldersMessages } from '@/types/folder';
 
 type Props = {

frontend/src/app/[locale]/projects/[projectId]/folders/FolderEditMenu.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@nextui-org/react';
+import { Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@heroui/react';
 import { MoreVertical } from 'lucide-react';
 import { FolderType, FoldersMessages } from '@/types/folder';
 

frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { FolderType, FoldersMessages } from '@/types/folder';
 import { useState, useEffect, useContext } from 'react';
-import { Button, Listbox, ListboxItem } from '@nextui-org/react';
+import { Button, Listbox, ListboxItem } from '@heroui/react';
 import { Folder, Plus } from 'lucide-react';
 import { usePathname, useRouter } from '@/src/i18n/routing';
 import { TokenContext } from '@/utils/TokenProvider';

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CaseDialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { useState, useEffect } from 'react';
-import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
+import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/react';
 import { CasesMessages } from '@/types/case';
 
 type Props = {

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx

@@ -13,7 +13,7 @@ import {
   DropdownItem,
   Selection,
   SortDescriptor,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { Plus, MoreVertical, Trash } from 'lucide-react';
 import { CaseType, CasesMessages } from '@/types/case';

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx

@@ -1,4 +1,4 @@
-import { Image, Button, Tooltip, Card, CardBody } from '@nextui-org/react';
+import { Image, Button, Tooltip, Card, CardBody } from '@heroui/react';
 import { AttachmentType, CaseMessages } from '@/types/case';
 import { Trash, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react';
 import { isImage } from './isImage';

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { useState, useEffect, useContext, ChangeEvent, DragEvent } from 'react';
-import { Input, Textarea, Select, SelectItem, Button, Divider, Tooltip } from '@nextui-org/react';
+import { Input, Textarea, Select, SelectItem, Button, Divider, Tooltip, addToast } from '@heroui/react';
 import { useRouter } from '@/src/i18n/routing';
 import { Save, Plus, ArrowLeft, Circle } from 'lucide-react';
 import { priorities, testTypes, templates } from '@/config/selection';
@@ -10,7 +10,6 @@ import { fetchCase, updateCase } from '@/utils/caseControl';
 import { updateSteps } from './stepControl';
 import { fetchCreateAttachments, fetchDownloadAttachment, fetchDeleteAttachment } from './attachmentControl';
 import { TokenContext } from '@/utils/TokenProvider';
-import { ToastContext } from '@/utils/ToastProvider';
 import { useFormGuard } from '@/utils/formGuard';
 import { CaseType, AttachmentType, CaseMessages, StepType } from '@/types/case';
 import { PriorityMessages } from '@/types/priority';
@@ -54,7 +53,6 @@ export default function CaseEditor({
   locale,
 }: Props) {
   const tokenContext = useContext(TokenContext);
-  const toastContext = useContext(ToastContext);
   const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
   const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
@@ -242,7 +240,10 @@ export default function CaseEditor({
                 await updateSteps(tokenContext.token.access_token, Number(caseId), testCase.Steps);
               }
 
-              toastContext.showToast(messages.updatedTestCase, 'dark');
+              addToast({
+                title: 'Info',
+                description: messages.updatedTestCase,
+              });
               setIsUpdating(false);
               setIsDirty(false);
             }}
@@ -298,10 +299,8 @@ export default function CaseEditor({
             label={messages.priority}
             className="mt-3 max-w-xs"
           >
-            {priorities.map((priority, index) => (
+            {priorities.map((priority) => (
-              <SelectItem key={priority.uid} value={index}>
+              <SelectItem key={priority.uid}>{priorityMessages[priority.uid]}</SelectItem>
-                {priorityMessages[priority.uid]}
-              </SelectItem>
             ))}
           </Select>
         </div>
@@ -321,10 +320,8 @@ export default function CaseEditor({
             label={messages.type}
             className="mt-3 max-w-xs"
           >
-            {testTypes.map((type, index) => (
+            {testTypes.map((type) => (
-              <SelectItem key={type.uid} value={index}>
+              <SelectItem key={type.uid}>{testTypeMessages[type.uid]}</SelectItem>
-                {testTypeMessages[type.uid]}
-              </SelectItem>
             ))}
           </Select>
         </div>
@@ -344,10 +341,8 @@ export default function CaseEditor({
             label={messages.template}
             className="mt-3 max-w-xs"
           >
-            {templates.map((template, index) => (
+            {templates.map((template) => (
-              <SelectItem key={template.uid} value={index}>
+              <SelectItem key={template.uid}>{messages[template.uid]}</SelectItem>
-                {messages[template.uid]}
-              </SelectItem>
             ))}
           </Select>
         </div>

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx

@@ -1,4 +1,4 @@
-import { Textarea, Button, Tooltip, Avatar } from '@nextui-org/react';
+import { Textarea, Button, Tooltip, Avatar } from '@heroui/react';
 import { CaseMessages, StepType } from '@/types/case';
 import { Plus, Trash } from 'lucide-react';
 

frontend/src/app/[locale]/projects/[projectId]/home/ProjectHome.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { useState, useEffect, useContext } from 'react';
 import { title, subtitle } from '@/components/primitives';
-import { Card, CardBody, Chip, Divider } from '@nextui-org/react';
+import { Card, CardBody, Chip, Divider } from '@heroui/react';
 import { Folder, Clipboard, FlaskConical } from 'lucide-react';
 import { ProgressSeriesType } from '@/types/run';
 import { HomeMessages } from './page';

frontend/src/app/[locale]/projects/[projectId]/members/AddMemberDialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { useState, useEffect, useContext } from 'react';
-import { Button, Input, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
+import { Button, Input, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/react';
 import { TokenContext } from '@/utils/TokenProvider';
 import { UserType } from '@/types/user';
 import { searchUsers } from '@/utils/usersControl';

frontend/src/app/[locale]/projects/[projectId]/members/CandidatesTable.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useCallback } from 'react';
-import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react';
+import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@heroui/react';
 import { UserType } from '@/types/user';
 import Avatar from 'boring-avatars';
 import { MembersMessages } from '@/types/member';

frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { useState, useEffect, useContext } from 'react';
-import { Button } from '@nextui-org/react';
+import { Button } from '@heroui/react';
 import { Plus } from 'lucide-react';
 import { MemberType, UserType } from '@/types/user';
 import { MembersMessages } from '@/types/member';

frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownItem,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { ChevronDown } from 'lucide-react';
 import { MemberType, UserType } from '@/types/user';
 import { memberRoles } from '@/config/selection';

frontend/src/app/[locale]/projects/[projectId]/runs/RunDialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { useState, useEffect } from 'react';
-import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
+import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/react';
 import { RunType, RunsMessages } from '@/types/run';
 
 type Props = {

frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useState, useContext } from 'react';
-import { Button } from '@nextui-org/react';
+import { Button } from '@heroui/react';
 import { Plus } from 'lucide-react';
 import RunsTable from './RunsTable';
 import { fetchRuns, createRun, updateRun, deleteRun } from './runsControl';

frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx

@@ -12,7 +12,7 @@ import {
   DropdownMenu,
   DropdownItem,
   SortDescriptor,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { MoreVertical } from 'lucide-react';
 import { RunsMessages, RunType } from '@/types/run';

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx

@@ -17,7 +17,8 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownItem,
-} from '@nextui-org/react';
+  addToast,
+} from '@heroui/react';
 import { Save, Circle, ArrowLeft, Folder, ChevronDown, CopyPlus, CopyMinus, RotateCw } from 'lucide-react';
 import RunProgressChart from './RunPregressDonutChart';
 import TestCaseSelector from './TestCaseSelector';
@@ -35,7 +36,6 @@ import {
 } from '../runsControl';
 import { fetchFolders } from '../../folders/foldersControl';
 import { TokenContext } from '@/utils/TokenProvider';
-import { ToastContext } from '@/utils/ToastProvider';
 import { useTheme } from 'next-themes';
 import { useFormGuard } from '@/utils/formGuard';
 import { PriorityMessages } from '@/types/priority';
@@ -75,7 +75,6 @@ export default function RunEditor({
   locale,
 }: Props) {
   const tokenContext = useContext(TokenContext);
-  const toastContext = useContext(ToastContext);
   const { theme, setTheme } = useTheme();
   const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
   const [folders, setFolders] = useState<FolderType[]>([]);
@@ -174,7 +173,10 @@ export default function RunEditor({
     await updateRunCases(tokenContext.token.access_token, Number(runId), testCases);
     await initTestCases();
 
-    toastContext.showToast(messages.updatedTestRun, 'dark');
+    addToast({
+      title: 'Info',
+      description: messages.updatedTestRun,
+    });
     setIsUpdating(false);
     setIsDirty(false);
   };
@@ -279,10 +281,8 @@ export default function RunEditor({
                 label={messages.status}
                 className="mt-3 max-w-xs"
               >
-                {testRunStatus.map((status, index) => (
+                {testRunStatus.map((status) => (
-                  <SelectItem key={status.uid} value={index}>
+                  <SelectItem key={status.uid}>{runStatusMessages[status.uid]}</SelectItem>
-                    {runStatusMessages[status.uid]}
-                  </SelectItem>
                 ))}
               </Select>
             </div>

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useContext } from 'react';
-import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Avatar, Textarea } from '@nextui-org/react';
+import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Avatar, Textarea } from '@heroui/react';
 import { testTypes, templates } from '@/config/selection';
 import { RunMessages } from '@/types/run';
 import { CaseType, StepType } from '@/types/case';

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx

@@ -13,7 +13,7 @@ import {
   DropdownItem,
   Selection,
   SortDescriptor,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import {
   ChevronDown,
   MoveDiagonal,

frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { useState, useEffect, useContext } from 'react';
-import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react';
+import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@heroui/react';
 import Avatar from 'boring-avatars';
 import { Pencil, Trash } from 'lucide-react';
 import { SettingsMessages } from '@/types/settings';

frontend/src/app/[locale]/providers.tsx

@@ -1,31 +1,28 @@
 'use client';
 
 import * as React from 'react';
-import { NextUIProvider } from '@nextui-org/react';
+import { HeroUIProvider } from '@heroui/react';
+import { ToastProvider } from '@heroui/react';
 import { useRouter } from 'next/navigation';
 import { ThemeProvider as NextThemesProvider, ThemeProviderProps } from 'next-themes';
-import ToastProvider from '@/utils/ToastProvider';
-import { ToastProps } from '@/types/toast';
 import TokenProvider from '@/utils/TokenProvider';
 import { TokenProps } from '@/types/user';
 
 export interface ProvidersProps {
   children: React.ReactNode;
   themeProps?: ThemeProviderProps;
-  toastProps?: ToastProps;
   tokenProps?: TokenProps;
 }
 
-export function Providers({ children, themeProps, toastProps, tokenProps }: ProvidersProps) {
+export function Providers({ children, themeProps, tokenProps }: ProvidersProps) {
   const router = useRouter();
 
   return (
-    <NextUIProvider navigate={router.push}>
+    <HeroUIProvider navigate={router.push}>
       <NextThemesProvider {...themeProps}>
-        <ToastProvider {...toastProps}>
+        <ToastProvider />
-          <TokenProvider {...tokenProps}>{children}</TokenProvider>
+        <TokenProvider {...tokenProps}>{children}</TokenProvider>
-        </ToastProvider>
       </NextThemesProvider>
-    </NextUIProvider>
+    </HeroUIProvider>
   );
 }

frontend/tailwind.config.js

@@ -1,4 +1,4 @@
-import { nextui } from '@nextui-org/theme';
+const { heroui } = require('@heroui/react');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -7,14 +7,14 @@ module.exports = {
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
   ],
+  darkMode: 'class',
   theme: {
     extend: {},
   },
-  darkMode: 'class',
   plugins: [
-    nextui({
+    heroui({
       themes: {
         light: {
           colors: {

frontend/types/toast.ts

@@ -1,12 +1,4 @@
-export type ToastProps = {
-  children?: React.ReactNode;
-};
-
 export type ToastMessages = {
   needSignedIn: string;
   sessionExpired: string;
 };
-
-export type ToastContextType = {
-  showToast: (text: string, mode: 'error' | 'dark') => void;
-};

frontend/utils/ToastProvider.tsx

@@ -1,35 +0,0 @@
-import { createContext } from 'react';
-import { ToastContextType, ToastProps } from '@/types/toast';
-
-// TODO Temporary use until NextUI's Toast is released.
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-
-const defaultContext = {
-  showToast: (text: string, mode: 'error' | 'dark') => {},
-};
-const ToastContext = createContext<ToastContextType>(defaultContext);
-
-const ToastProvider = ({ children }: ToastProps) => {
-  const showToast = (text: string, mode: string) => {
-    if (mode === 'error') {
-      toast.error(text);
-    } else {
-      toast(text, { theme: 'dark' });
-    }
-  };
-
-  const toastContext = {
-    showToast,
-  };
-
-  return (
-    <ToastContext.Provider value={toastContext}>
-      <ToastContainer position="bottom-right" hideProgressBar={true} />
-      {children}
-    </ToastContext.Provider>
-  );
-};
-
-export { ToastContext };
-export default ToastProvider;

frontend/utils/TokenProvider.tsx

@@ -13,7 +13,7 @@ import {
   checkSignInPage as tokenCheckSignInPage,
   fetchMyRoles,
 } from './token';
-import { ToastContext } from './ToastProvider';
+import { addToast } from '@heroui/react';
 const LOCAL_STORAGE_KEY = 'unittcms-auth-token';
 
 function storeTokenToLocalStorage(token: TokenType) {
@@ -53,7 +53,6 @@ const TokenContext = createContext<TokenContextType>(defaultContext);
 const TokenProvider = ({ toastMessages, locale, children }: TokenProps) => {
   const router = useRouter();
   const pathname = usePathname();
-  const toastContext = useContext(ToastContext);
 
   const [hasRestoreFinished, setHasRestoreFinished] = useState(false);
   const [token, setToken] = useState<TokenType>({
@@ -137,11 +136,19 @@ const TokenProvider = ({ toastMessages, locale, children }: TokenProps) => {
     if (!ret.ok) {
       if (ret.reason === 'notoken') {
         if (toastMessages) {
-          toastContext.showToast(toastMessages.needSignedIn, 'error');
+          addToast({
+            title: 'Info',
+            description: toastMessages.needSignedIn,
+            color: 'danger',
+          });
         }
       } else if (ret.reason === 'expired') {
         if (toastMessages) {
-          toastContext.showToast(toastMessages.sessionExpired, 'error');
+          addToast({
+            title: 'Info',
+            description: toastMessages.sessionExpired,
+            color: 'danger',
+          });
         }
       }