refactor: migrate from nextui to heroui

Author: doinel1a

.npmrc

@@ -1 +1 @@
-public-hoist-pattern[]=*@nextui-org/*
+public-hoist-pattern[]=*@heroui/*

next.config.ts

@@ -8,7 +8,8 @@
  */
 import './src/env.js';
 
-/** @type {import('next').NextConfig} */
+import type { NextConfig } from 'next';
+
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
@@ -18,6 +19,6 @@ const nextConfig = {
     config.externals.push('pino-pretty', 'lokijs', 'encoding');
     return config;
   }
-};
+} satisfies NextConfig;
 
 export default nextConfig;

package.json

@@ -24,10 +24,10 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@nextui-org/button": "^2.2.9",
-    "@nextui-org/skeleton": "^2.2.5",
-    "@nextui-org/system": "^2.4.6",
-    "@nextui-org/theme": "^2.4.5",
+    "@heroui/button": "^2.2.9",
+    "@heroui/skeleton": "^2.2.5",
+    "@heroui/system": "^2.4.6",
+    "@heroui/theme": "^2.4.5",
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-slot": "^1.1.1",

pnpm-lock.yaml

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 
 import { Card, CardContent, CardHeader } from './ui/card';
 

src/components/counter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Skeleton } from '@nextui-org/skeleton';
+import { Skeleton } from '@heroui/skeleton';
 import dynamic from 'next/dynamic';
 
 const ThemeToggle = dynamic(() => import('./ui/theme-toggle'), {

src/components/navbar.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import React from 'react';
+
+import type { PropsWithChildren } from 'react';
+
+import { HeroUIProvider } from '@heroui/system';
+
+type THeroUiProvider = PropsWithChildren;
+
+export default function HeroUiProvider({ children }: THeroUiProvider) {
+  return <HeroUIProvider>{children}</HeroUIProvider>;
+}

src/components/providers/hero-ui.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 
 import type { PropsWithChildren } from 'react';
 
-import NextUiProvider from './next-ui';
+import HeroUiProvider from './hero-ui';
 import ThemeProvider from './theme';
 import Web3Provider from './web3';
 
 type TRootProvider = PropsWithChildren;
 
 export default function RootProvider({ children }: TRootProvider) {
   return (
-    <NextUiProvider>
+    <HeroUiProvider>
       <ThemeProvider>
         <Web3Provider>{children}</Web3Provider>
       </ThemeProvider>
-    </NextUiProvider>
+    </HeroUiProvider>
   );
 }

src/components/providers/next-ui.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import type { Chain } from 'viem';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 
 type TChainsList = {
   title: string;

src/components/providers/root.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 import { Laptop, MoonStar, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 

src/components/switch-chain/chains-list.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { PropsWithChildren } from 'react';
 
-import { Skeleton } from '@nextui-org/skeleton';
+import { Skeleton } from '@heroui/skeleton';
 
 import { cn } from '@/lib/utils';
 

src/components/ui/theme-toggle.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef, useState } from 'react';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 import dynamic from 'next/dynamic';
 import { useAccount } from 'wagmi';
 

src/components/wallet/dropdown/commons/dynamic-fallback.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import type { ComponentProps } from 'react';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { useAccount } from 'wagmi';
 

src/components/wallet/dropdown/index.tsx

@@ -3,10 +3,10 @@
 
 import type { Config } from 'tailwindcss';
 
-import { nextui } from '@nextui-org/theme';
+import { heroui } from '@heroui/theme';
 
 // based on shadcn's styles
-const nextUIStyleOverride = {
+const heroUIStyleOverride = {
   layout: {
     disabledOpacity: '0.5', // shadcn: 0.9
     radius: {
@@ -27,7 +27,7 @@ const config = {
   darkMode: ['class'],
   content: [
     './src/**/*.{ts,tsx}',
-    './node_modules/@nextui-org/theme/dist/components/**/*.{js,ts,jsx,tsx}'
+    './node_modules/@heroui/theme/dist/components/**/*.{js,ts,jsx,tsx}'
   ],
   theme: {
     container: {
@@ -94,7 +94,7 @@ const config = {
       }
     }
   },
-  plugins: [nextui(nextUIStyleOverride), require('tailwindcss-animate')]
+  plugins: [heroui(heroUIStyleOverride), require('tailwindcss-animate')]
 } satisfies Config;
 
 export default config;