deps: @nextui-org/react to @heroui/react (#368)

* api: transition to new endpoint, fallback to existing one to ease migration

* deps: nextui -> heroui (project name changed)

* todo: found some bugs in the table pagination, they dont seem to be our fault

* api: remove backup logic, not needed

* deps: missed caret syntax

* api: use new api on homepage as well

* api: go back to `api.pcsx2.net` everything functions as expected

package.json

@@ -24,7 +24,7 @@
     "@docusaurus/plugin-client-redirects": "^3.6.1",
     "@docusaurus/preset-classic": "^3.6.1",
     "@mdx-js/react": "^3.1.0",
-    "@nextui-org/react": "^2.4.8",
+    "@heroui/react": "^2.6.14",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "framer-motion": "^11.11.17",

src/components/CompatibilityButton/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 
 const categoryColorMapping = {
   perfect: {

src/components/DownloadTable/index.js

@@ -7,7 +7,7 @@ import {
   TableCell,
   TableBody,
   Pagination,
-} from "@nextui-org/react";
+} from "@heroui/react";
 
 export function DownloadTable({
   pageSize,
@@ -59,6 +59,7 @@ export function DownloadTable({
           }}
           bottomContent={
             <div className="flex w-full justify-center">
+              {/* TODO - keep an eye on https://github.com/heroui-inc/heroui/pull/4536 in next release, as it might fix the issues around the pagination component */}
               <Pagination
                 isCompact
                 showControls

src/components/ReleaseDownloadButton/index.js

@@ -6,13 +6,13 @@ import {
   DropdownItem,
   DropdownSection,
   DropdownMenu,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { BsWindows, BsApple } from "react-icons/bs";
 import { FaLinux } from "react-icons/fa";
 import { IoIosCloudyNight } from "react-icons/io";
 import { GiBrickWall } from "react-icons/gi";
 import { useMediaQuery } from "../../utils/mediaQuery";
-import { semanticColors } from "@nextui-org/theme";
+import { semanticColors } from "@heroui/theme";
 import { useTheme } from "next-themes";
 
 // Function to get the latest release for a specific platform

src/mdx/PRLink/PCSX2PRLink.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { GoGitCommit, GoGitPullRequest } from "react-icons/go";
-import { Avatar, Tooltip, AvatarGroup } from "@nextui-org/react";
+import { Avatar, Tooltip, AvatarGroup } from "@heroui/react";
 import { IconContext } from "react-icons";
 
 function generatePRLinks(prNums) {

src/pages/compat/index.js

@@ -12,7 +12,7 @@ import {
   Chip,
   Link,
   Input,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { MdLibraryBooks, MdForum } from "react-icons/md";
 import Fuse from "fuse.js";
 import { DateTime } from "luxon";

src/pages/downloads/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Layout from "@theme/Layout";
-import { Switch } from "@nextui-org/react";
+import { Switch } from "@heroui/react";
 import Admonition from "@theme/Admonition";
 import { ReleaseDownloadButton } from "../../components/ReleaseDownloadButton";
 import { DownloadTable } from "../../components/DownloadTable";
@@ -84,7 +84,7 @@ export default function Downloads() {
 
   const fetchLatestReleases = async () => {
     try {
-      const resp = await fetch(`${baseApiUrl}/latestReleasesAndPullRequests`);
+      let resp = await fetch(`${baseApiUrl}/latestReleasesAndPullRequests`);
       if (resp.status === 429) {
         setApiErrorMsg("You are Being Rate-Limited. Try Again Later!");
       } else if (resp.status !== 200) {
@@ -249,9 +249,10 @@ export default function Downloads() {
                         tableColumns={releaseTableColumns}
                         renderRowFunc={renderReleaseCell}
                         fetchMoreFunc={async (offset) => {
-                          return await fetch(
+                          let resp = await fetch(
                             `${baseApiUrl}/stableReleases?offset=${offset}`,
                           );
+                          return resp;
                         }}
                         tableType={"stable"}
                       />
@@ -348,9 +349,10 @@ export default function Downloads() {
                         tableColumns={releaseTableColumns}
                         renderRowFunc={renderReleaseCell}
                         fetchMoreFunc={async (offset) => {
-                          return await fetch(
+                          let resp = await fetch(
                             `${baseApiUrl}/nightlyReleases?offset=${offset}`,
                           );
+                          return resp;
                         }}
                         tableType={"nightly"}
                       />

src/pages/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Link from "@docusaurus/Link";
 import Layout from "@theme/Layout";
-import { Button, Card, CardFooter, Image } from "@nextui-org/react";
+import { Button, Card, CardFooter, Image } from "@heroui/react";
 import { ReleaseDownloadButton } from "../components/ReleaseDownloadButton";
 import { useTheme } from "next-themes";
 import { NumberTicker } from "../components/NumberTicker";
@@ -61,7 +61,7 @@ export default function Home() {
 
   const fetchLatestReleases = async () => {
     try {
-      const resp = await fetch(`${baseApiUrl}/latestReleasesAndPullRequests`);
+      let resp = await fetch(`${baseApiUrl}/latestReleasesAndPullRequests`);
       if (resp.status === 429) {
         setApiErrorMsg("You are Being Rate-Limited. Try Again Later!");
       } else if (resp.status !== 200) {

src/theme/NavbarItem/NavbarNavLink.js

@@ -1,6 +1,6 @@
 import React from "react";
 import NavbarNavLink from "@theme-original/NavbarItem/NavbarNavLink";
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 import { GoHeart } from "react-icons/go";
 import Link from "@docusaurus/Link";
 import { useMediaQuery } from "../../utils/mediaQuery";

src/theme/Root.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { NextUIProvider } from "@nextui-org/react";
+import { HeroUIProvider } from "@heroui/react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import CookieConsent, { getCookieConsentValue } from "react-cookie-consent";
 
@@ -51,7 +51,7 @@ export default function Root({ children }) {
   }, []);
 
   return (
-    <NextUIProvider>
+    <HeroUIProvider>
       <NextThemesProvider attribute="class" defaultTheme="dark">
         <CookieConsent
           location="bottom"
@@ -69,6 +69,6 @@ export default function Root({ children }) {
         </CookieConsent>
         {children}
       </NextThemesProvider>
-    </NextUIProvider>
+    </HeroUIProvider>
   );
 }

tailwind.config.js

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