Migrate to HeroUI

package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@nextui-org/react": "^2.4.8",
-    "@nextui-org/use-infinite-scroll": "^2.1.5",
+    "@heroui/react": "latest",
+    "@heroui/use-infinite-scroll": "latest",
     "@tabler/icons-react": "^3.11.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "framer-motion": "^10",
+    "framer-motion": "^11",
     "immutable": "^4.3.6",
     "nighthouse": "^3.0.2",
     "react": "^18.3.1",
@@ -18,7 +18,7 @@
     "react-intersection-observer": "^9.13.0",
     "react-router-dom": "^6.25.1",
     "react-scripts": "^5.0.1",
-    "react-stately": "^3.33.0",
+    "react-stately": "^3.35.0",
     "tailwindcss": "^3.4.6",
     "typescript": "^4.9.3",
     "web-vitals": "^4.2.2"

src/App.tsx

@@ -4,12 +4,12 @@ import { ModelContextProvider } from '@luna/contexts/api/model/ModelContext';
 import { SearchContextProvider } from '@luna/contexts/filter/SearchContext';
 import { WindowDimensionsContextProvider } from '@luna/contexts/env/WindowDimensionsContext';
 import { router } from '@luna/routes';
-import { NextUIProvider } from '@nextui-org/react';
+import { HeroUIProvider } from '@heroui/react';
 import { RouterProvider } from 'react-router-dom';
 
 export function App() {
   return (
-    <NextUIProvider>
+    <HeroUIProvider>
       <ColorSchemeContextProvider>
         <WindowDimensionsContextProvider>
           <AuthContextProvider>
@@ -21,6 +21,6 @@ export function App() {
           </AuthContextProvider>
         </WindowDimensionsContextProvider>
       </ColorSchemeContextProvider>
-    </NextUIProvider>
+    </HeroUIProvider>
   );
 }

src/components/ApiTokenButton.tsx

@@ -1,6 +1,6 @@
 import { Token } from '@luna/contexts/api/auth/types';
 import { ApiTokenModal } from '@luna/components/ApiTokenModal';
-import { Button, Tooltip, useDisclosure } from '@nextui-org/react';
+import { Button, Tooltip, useDisclosure } from '@heroui/react';
 import { IconKey } from '@tabler/icons-react';
 
 export interface ApiTokenButtonProps {

src/components/ApiTokenModal.tsx

@@ -6,7 +6,7 @@ import {
   ModalHeader,
   Skeleton,
   Snippet,
-} from '@nextui-org/react';
+} from '@heroui/react';
 
 export interface ApiTokenModalProps {
   token: Token | null;

src/components/ColorSchemeButton.tsx

@@ -1,5 +1,5 @@
 import { ColorSchemeContext } from '@luna/contexts/env/ColorSchemeContext';
-import { Button, Tooltip } from '@nextui-org/react';
+import { Button, Tooltip } from '@heroui/react';
 import { IconMoon, IconSun } from '@tabler/icons-react';
 import { useCallback, useContext } from 'react';
 

src/components/DisplayCard.tsx

@@ -1,5 +1,5 @@
 import { DISPLAY_ASPECT_RATIO, Display } from '@luna/components/Display';
-import { Card, CardFooter } from '@nextui-org/react';
+import { Card, CardFooter } from '@heroui/react';
 import React, { memo } from 'react';
 
 interface DisplayCardProps {

src/components/FormInput.tsx

@@ -1,4 +1,4 @@
-import { Input, Tooltip } from '@nextui-org/react';
+import { Input, Tooltip } from '@heroui/react';
 import { ReactNode, useCallback } from 'react';
 
 export interface FormInputProps {

src/components/RouteLink.tsx

@@ -1,8 +1,12 @@
-import { Button } from '@nextui-org/react';
+import { Button } from '@heroui/react';
 import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
-import { ReactNode, useCallback, useState } from 'react';
+import { ElementType, ReactNode, useCallback, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence as AnimatePresenceFM, motion } from 'framer-motion';
+
+// Workaround for https://github.com/framer/motion/issues/1509
+// See https://github.com/withastro/astro/issues/8195#issuecomment-2613930022
+const AnimatePresence = AnimatePresenceFM as ElementType;
 
 interface RouteLinkParams {
   icon: ReactNode;

src/components/SearchBar.tsx

@@ -1,5 +1,5 @@
 import { useDebounce } from '@luna/hooks/useDebounce';
-import { Input } from '@nextui-org/react';
+import { Input } from '@heroui/react';
 import { IconSearch } from '@tabler/icons-react';
 import { useCallback, useState } from 'react';
 

src/components/TitledCard.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody, CardHeader } from '@nextui-org/react';
+import { Card, CardBody, CardHeader } from '@heroui/react';
 import { ReactNode } from 'react';
 
 export interface TitledCardProps {

src/components/UserAddModal.tsx

@@ -10,7 +10,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { useCallback, useContext, useEffect, useState } from 'react';
 
 export interface UserAddModalProps {

src/components/UserDeleteModal.tsx

@@ -9,7 +9,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { useCallback, useContext, useEffect, useState } from 'react';
 
 export interface UserDeleteModalProps {

src/components/UserDetailsModal.tsx

@@ -11,7 +11,7 @@ import {
   ModalHeader,
   Select,
   SelectItem,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { useContext, useEffect, useState } from 'react';
 
 export interface UserShowModalProps {

src/components/UserEditModal.tsx

@@ -11,7 +11,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { useCallback, useContext, useEffect, useState } from 'react';
 
 export interface UserEditModalProps {

src/components/UserSnippet.tsx

@@ -1,7 +1,7 @@
 import { Token, User } from '@luna/contexts/api/auth/types';
 import { ApiTokenButton } from '@luna/components/ApiTokenButton';
 import { RoleSnippet } from '@luna/components/RoleSnippet';
-import { User as UserComponent } from '@nextui-org/react';
+import { User as UserComponent } from '@heroui/react';
 
 export interface UserSnippetProps {
   user: User;

src/screens/home/HomeScreen.tsx

@@ -1,7 +1,7 @@
 import { Breakpoint, useBreakpoint } from '@luna/hooks/useBreakpoint';
 import { HomeContentContext } from '@luna/screens/home/HomeContent';
 import { Sidebar } from '@luna/screens/home/sidebar/Sidebar';
-import { Button } from '@nextui-org/react';
+import { Button } from '@heroui/react';
 import { IconMenu2 } from '@tabler/icons-react';
 import React, {
   ReactNode,

src/screens/home/admin/MonitorInspectorTable.tsx

@@ -4,7 +4,7 @@ import {
   TableCell,
   TableColumn,
   TableRow,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { ReactNode, useCallback, useMemo } from 'react';
 import { TableBody, TableHeader } from 'react-stately';
 

src/screens/home/admin/MonitorInspectorValue.tsx

@@ -1,5 +1,5 @@
 import { isBounded } from '@luna/utils/bounded';
-import { Chip } from '@nextui-org/react';
+import { Chip } from '@heroui/react';
 
 export interface MonitorInspectorValueProps {
   value: any;

src/screens/home/admin/MonitorView.tsx

@@ -8,7 +8,7 @@ import { MonitorInspector } from '@luna/screens/home/admin/MonitorInspector';
 import { HomeContent } from '@luna/screens/home/HomeContent';
 import { throttle } from '@luna/utils/schedule';
 import { Vec2 } from '@luna/utils/vec2';
-import { Button } from '@nextui-org/react';
+import { Button } from '@heroui/react';
 import { IconRefresh } from '@tabler/icons-react';
 import { Set } from 'immutable';
 import {

src/screens/home/admin/RegistrationKeysView.tsx

@@ -15,7 +15,7 @@ import {
   TableHeader,
   TableRow,
   Tooltip,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { useAsyncList } from '@react-stately/data';
 import { IconEye, IconPencil, IconPlus, IconTrash } from '@tabler/icons-react';
 import { useContext, useState } from 'react';

src/screens/home/admin/ResourcesToolbar.tsx

@@ -3,7 +3,7 @@ import {
   resourcesLayouts,
 } from '@luna/screens/home/admin/ResourcesLayout';
 import { ResourcesLayoutIcon } from '@luna/screens/home/admin/ResourcesLayoutIcon';
-import { Tab, Tabs } from '@nextui-org/react';
+import { Tab, Tabs } from '@heroui/react';
 import { Key } from 'react';
 
 export interface ResourcesToolbarProps {

src/screens/home/admin/RolesView.tsx

@@ -14,7 +14,7 @@ import {
   TableHeader,
   TableRow,
   Tooltip,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { useAsyncList } from '@react-stately/data';
 import {
   IconCategoryPlus,

src/screens/home/admin/UsersView.tsx

@@ -18,7 +18,7 @@ import {
   TableHeader,
   TableRow,
   Tooltip,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { useAsyncList } from '@react-stately/data';
 import {
   IconEye,
@@ -53,7 +53,7 @@ export function UsersView() {
             page,
             perPage: 50,
             filter: filterText ? { text: filterText } : undefined,
-            sorting: sortDescriptor.column
+            sorting: sortDescriptor?.column
               ? {
                   key: sortDescriptor.column,
                   ascending: sortDescriptor.direction === 'ascending',

src/screens/home/displays/DisplayInspectorApiTokenCard.tsx

@@ -1,7 +1,7 @@
 import { ApiTokenModal } from '@luna/components/ApiTokenModal';
 import { TitledCard } from '@luna/components/TitledCard';
 import { AuthContext } from '@luna/contexts/api/auth/AuthContext';
-import { Button, Tooltip, useDisclosure } from '@nextui-org/react';
+import { Button, Tooltip, useDisclosure } from '@heroui/react';
 import { IconClipboard, IconKey } from '@tabler/icons-react';
 import { useCallback, useContext } from 'react';
 

src/screens/home/displays/DisplayInspectorInputCard.tsx

@@ -1,5 +1,5 @@
 import { TitledCard } from '@luna/components/TitledCard';
-import { Switch } from '@nextui-org/react';
+import { Switch } from '@heroui/react';
 import { IconDeviceGamepad2 } from '@tabler/icons-react';
 
 export function DisplayInspectorInputCard() {

src/screens/home/displays/DisplayInspectorOptionsCard.tsx

@@ -1,5 +1,5 @@
 import { TitledCard } from '@luna/components/TitledCard';
-import { Tab, Tabs } from '@nextui-org/react';
+import { Tab, Tabs } from '@heroui/react';
 import { IconAdjustments } from '@tabler/icons-react';
 
 export interface DisplayInspectorOptionsCardProps {

src/screens/home/displays/DisplaysToolbar.tsx

@@ -1,5 +1,5 @@
 import { useDebounce } from '@luna/hooks/useDebounce';
-import { Slider } from '@nextui-org/react';
+import { Slider } from '@heroui/react';
 import { IconArrowsDiagonal } from '@tabler/icons-react';
 import { useState } from 'react';
 

src/screens/home/sidebar/Sidebar.tsx

@@ -12,7 +12,7 @@ import {
   ModalContent,
   ModalHeader,
   ScrollShadow,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { useCallback, useContext, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 

src/screens/loading/LoadingScreen.tsx

@@ -1,6 +1,6 @@
 import { Center } from '@luna/components/Center';
 import { Logo } from '@luna/components/Logo';
-import { Spinner } from '@nextui-org/react';
+import { Spinner } from '@heroui/react';
 
 export function LoadingScreen() {
   return (

src/screens/login/LoginCard.tsx

@@ -7,7 +7,7 @@ import {
   CardFooter,
   CardHeader,
   Divider,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { FormEvent, useCallback, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 

src/screens/login/SignupCard.tsx

@@ -7,7 +7,7 @@ import {
   CardFooter,
   CardHeader,
   Divider,
-} from '@nextui-org/react';
+} from '@heroui/react';
 import { FormEvent, useCallback, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 

tailwind.config.js

@@ -1,21 +1,21 @@
-const { nextui } = require('@nextui-org/react');
+const { heroui } = require("@heroui/react");
 const path = require('path');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './src/**/*.{js,jsx,ts,tsx}',
     path.join(
-      // Use `require.resolve` to locate `node_modules/@nextui-org/theme`
+      // Use `require.resolve` to locate `node_modules/@heroui/theme`
       // dynamically (node_modules might be in a parent directory if luna is
       // part of an npm workspace, as e.g. in luna-desktop)
-      path.dirname(require.resolve('@nextui-org/theme/package.json')),
+      path.dirname(require.resolve('@heroui/theme/package.json')),
       'dist/**/*.{js,ts,jsx,tsx}'
     ),
   ],
   theme: {
     extend: {},
   },
   darkMode: 'class',
-  plugins: [nextui()],
+  plugins: [heroui()],
 };