docs: update to next 15 + eslint 9 (#9839)

* update next

* updated react

* update eslint

* finish updating eslint

* fix content lint errors

* fix docs test

* fix vale action

* fix installation errors

www/packages/docs-ui/src/components/Notification/Item/index.tsx

@@ -18,16 +18,26 @@ export type NotificationItemProps = {
   closeButtonText?: string
 } & React.HTMLAttributes<HTMLDivElement>
 
-export const NotificationItem = ({
-  className = "",
-  placement = "bottom",
-  show = true,
-  layout = "default",
-  setShow,
-  onClose,
-  children,
-  ...rest
-}: NotificationItemProps) => {
+type EmptyLayoutProps = {
+  onClose?: () => void
+}
+
+export const NotificationItem = React.forwardRef<
+  HTMLDivElement,
+  NotificationItemProps
+>(function NotificationItem(
+  {
+    className = "",
+    placement = "bottom",
+    show = true,
+    layout = "default",
+    setShow,
+    onClose,
+    children,
+    ...rest
+  },
+  ref
+) {
   const handleClose = () => {
     setShow?.(false)
     onClose?.()
@@ -44,6 +54,7 @@ export const NotificationItem = ({
         !show && "!opacity-0",
         className
       )}
+      ref={ref}
     >
       {layout === "default" && (
         <NotificationItemLayoutDefault {...rest} handleClose={handleClose}>
@@ -53,11 +64,17 @@ export const NotificationItem = ({
       {layout === "empty" &&
         Children.map(children, (child) => {
           if (child) {
-            return React.cloneElement(child, {
-              onClose: handleClose,
-            })
+            return React.cloneElement<EmptyLayoutProps>(
+              child as React.ReactElement<
+                EmptyLayoutProps,
+                React.FunctionComponent<EmptyLayoutProps>
+              >,
+              {
+                onClose: handleClose,
+              }
+            )
           }
         })}
     </div>
   )
-}
+})

www/packages/docs-ui/src/components/Notification/index.tsx

@@ -1,10 +1,13 @@
+"use client"
+
 import {
   NotificationContextType,
   NotificationItemType,
   useNotifications,
 } from "@/providers"
-import React from "react"
+import React, { useEffect, useRef } from "react"
 import { NotificationItem } from "./Item"
+// @ts-expect-error can't install the types package because it doesn't support React v19
 import { CSSTransition, TransitionGroup } from "react-transition-group"
 import clsx from "clsx"
 
@@ -12,6 +15,15 @@ export const NotificationContainer = () => {
   const { notifications, removeNotification } =
     useNotifications() as NotificationContextType
 
+  const notificationRefs = useRef([])
+
+  useEffect(() => {
+    notificationRefs.current = notificationRefs.current.slice(
+      0,
+      notifications.length
+    )
+  }, [notifications])
+
   const handleClose = (notification: NotificationItemType) => {
     notification.onClose?.()
     if (notification.id) {
@@ -33,7 +45,7 @@ export const NotificationContainer = () => {
           className
         )}
       >
-        {notifications.filter(condition).map((notification) => (
+        {notifications.filter(condition).map((notification, index) => (
           <CSSTransition
             key={notification.id}
             timeout={200}
@@ -41,10 +53,12 @@ export const NotificationContainer = () => {
               enter: "animate-slideInRight animate-fast",
               exit: "animate-slideOutRight animate-fast",
             }}
+            nodeRef={notificationRefs.current[index]}
           >
             <NotificationItem
               {...notification}
               onClose={() => handleClose(notification)}
+              ref={notificationRefs.current[index]}
               className={clsx(
                 notification.className,
                 "!relative !top-0 !bottom-0 !right-0"