Migrate to HeroUI ok

.github/workflows/build.yml

@@ -14,13 +14,11 @@ jobs:
         steps:
             - uses: actions/checkout@v4
               # https://pnpm.io/continuous-integration#github-actions
-            - uses: pnpm/action-setup@v3
-              with:
-                  version: 8
-            - name: Use Node.js 20
+            - uses: pnpm/action-setup@v4
+            - name: Use Node.js 22
               uses: actions/setup-node@v4
               with:
-                  node-version: 20
+                  node-version: 22
                   cache: "pnpm"
             - run: pnpm install
             - run: pnpm build

.npmrc

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

app/(root)/arrangement/page.tsx

@@ -3,7 +3,7 @@ import EventCardPaginated from "@/app/(root)/arrangement/eventCardPaginated"
 import { type Metadata } from "next"
 import CalendarModal from "@/components/modals/calendarModal"
 import FloatingMenu from "@/components/floatingMenu"
-import { Card } from "@nextui-org/card"
+import { Card } from "@heroui/card"
 
 export const metadata: Metadata = {
     title: "Arrangementer | Root Linjeforening",

app/(root)/providers.tsx

@@ -1,20 +1,20 @@
 "use client"
 
-import { NextUIProvider } from "@nextui-org/react"
+import { HeroUIProvider } from "@heroui/react"
 import { ThemeProvider } from "next-themes"
 import { type ReactNode, useEffect } from "react"
 
 /**
  * En komponent som inneholder alle providers som skal brukes i nettsiden.
- * NextUIProvider er en provider som brukes av NextUI for å style komponenter.
+ * HeroUIProvider er en provider som brukes av HeroUI for å style komponenter.
  * ThemeProvider er en provider som brukes av next-themes for light mode og dark mode.
  * @param children Innholdet som skal rendres i komponenten
  * @see https://nextui.org/docs/frameworks/nextjs
  */
 export const Providers = ({ children }: { children: ReactNode }) => (
-    <NextUIProvider>
+    <HeroUIProvider>
         <ThemeProvider attribute={"class"} enableSystem>
             {children}
         </ThemeProvider>
-    </NextUIProvider>
+    </HeroUIProvider>
 )

components/buttons/button.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { Button as _Button, Link } from "@nextui-org/react"
+import { Button as _Button, Link } from "@heroui/react"
 import { LinkIcon } from "@heroicons/react/24/outline"
 import { defaultIconSize } from "@/components/icons/icon"
 

components/buttons/darkModeToggle.tsx

@@ -3,7 +3,7 @@
 import { useTheme } from "next-themes"
 import { MoonIcon, SunIcon } from "@heroicons/react/24/outline"
 import { useEffect, useState } from "react"
-import { Button, ButtonGroup } from "@nextui-org/button"
+import { Button, ButtonGroup } from "@heroui/button"
 import { defaultIconSize } from "@/components/icons/icon"
 
 const buttons = [

components/cards/infoCard.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react"
-import { Card, CardBody, CardFooter, CardHeader } from "@nextui-org/card"
+import { Card, CardBody, CardFooter, CardHeader } from "@heroui/card"
 
 interface EventCardProps extends ChildProps {
     cardTitle: string

components/cards/singleInfoCard.tsx

@@ -6,7 +6,7 @@ import { PortableText } from "@portabletext/react"
 import { components } from "@/sanity/lib/portabletext"
 import type { TypedObject } from "sanity"
 import ImageViewer from "@/components/imageViewer"
-import { Card, CardBody, CardFooter, CardHeader } from "@nextui-org/card"
+import { Card, CardBody, CardFooter, CardHeader } from "@heroui/card"
 
 interface SingleInfoCardProps extends ChildProps {
     image?: SanityImageObject

components/divider.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { Divider as _Divider } from "@nextui-org/react"
+import { Divider as _Divider } from "@heroui/react"
 
 export const Divider: Component = ({ className }) => (
     <_Divider className={`mx-auto w-3/4 ${className}`} />

components/dropdown/addToCalendarDropdown.tsx

@@ -3,7 +3,7 @@ import Dropdown, { type Key } from "@/components/dropdown/dropdown"
 import { ChevronDownIcon } from "@heroicons/react/24/outline"
 import { defaultIconSize } from "@/components/icons/icon"
 import { useMemo, useState } from "react"
-import { Tooltip } from "@nextui-org/react"
+import { Tooltip } from "@heroui/react"
 
 type CalendarKey = "google" | "outlook" | "apple" | "ics" | "copy"
 

components/dropdown/dropdown.tsx

@@ -6,7 +6,7 @@ import {
     DropdownMenu,
     DropdownItem,
     Button,
-} from "@nextui-org/react"
+} from "@heroui/react"
 
 export type Key = string | number
 

components/header/header.tsx

@@ -8,7 +8,7 @@ import {
     NavbarMenuToggle,
     NavbarMenu,
     NavbarMenuItem,
-} from "@nextui-org/react"
+} from "@heroui/react"
 import { useEffect, useState } from "react"
 import Image from "next/image"
 import paths from "@/components/header/paths"

components/imageGallery/gallery.tsx

@@ -4,7 +4,7 @@ import { LeftArrowIcon } from "../icons/icon"
 import SanityImage from "../sanityImage"
 import type { SanityImageSource } from "@sanity/image-url/lib/types/types"
 import { LinkButton } from "@/components/buttons/button"
-import { Card } from "@nextui-org/card"
+import { Card } from "@heroui/card"
 
 interface GalleryProps extends ChildProps {
     heading: string

components/imageGallery/galleryWithModal.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Modal, ModalContent, ModalHeader, ModalBody } from "@nextui-org/react"
+import { Modal, ModalContent, ModalHeader, ModalBody } from "@heroui/react"
 import type { ImageGallery } from "@/sanity/types"
 import { useMemo, useState } from "react"
 import { useSearchParams, useRouter, usePathname } from "next/navigation"

components/modals/calendarModal.tsx

@@ -91,7 +91,7 @@ const CalendarForm: Component<{ onChange: (form: FormData) => void }> = ({ onCha
 
     useEffect(() => {
         onChange(form)
-    }, [form])
+    }, [form, onChange])
 
     const defaultType = { value: "*", label: "Alle" }
     const eventTypes: EventType[] = ["bedpres", "social", "workshop", "other"]

components/modals/modal.tsx

@@ -6,7 +6,7 @@ import {
     ModalFooter,
     ModalHeader,
     ModalProps as _ModalProps,
-} from "@nextui-org/react"
+} from "@heroui/react"
 import { Button } from "@/components/buttons/button"
 import useToggle from "@/hooks/useToggle"
 import { type ReactNode } from "react"

components/select/select.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { Select as _Select, SelectItem } from "@nextui-org/react"
+import { Select as _Select, SelectItem } from "@heroui/react"
 
 interface SelectProps extends DefaultProps {
     label?: string
@@ -34,7 +34,7 @@ const Select: Component<SelectProps> = ({
             defaultSelectedKeys={defaultItem}
             {...props}>
             {items.map(({ value, label }) => (
-                <SelectItem key={value} value={value}>
+                <SelectItem key={value}>
                     {label}
                 </SelectItem>
             ))}

components/suspense.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { CircularProgress } from "@nextui-org/react"
+import { CircularProgress } from "@heroui/react"
 
 /**
  * En sirkulær progress bar som roterer.

package.json

@@ -14,7 +14,7 @@
     },
     "dependencies": {
         "@heroicons/react": "^2.1.1",
-        "@nextui-org/react": "^2.2.9",
+        "@heroui/react": "2.7.5",
         "@portabletext/react": "^3.0.11",
         "@sanity/asset-utils": "^1.3.0",
         "@sanity/client": "^6.8.0",
@@ -50,5 +50,15 @@
         "tailwindcss": "^3.4.1",
         "typescript": "~5.2.2"
     },
-    "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af"
-}
+    "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af",
+    "pnpm": {
+        "ignoredBuiltDependencies": [
+            "@heroui/shared-utils",
+            "esbuild"
+        ],
+        "onlyBuiltDependencies": [
+            "@heroui/shared-utils",
+            "esbuild"
+        ]
+    }
+}