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/apps/ui/src/app/(content)/[[...slug]]/page.tsx

@@ -7,27 +7,26 @@ import { siteConfig } from "@/config/site"
 import { Metadata } from "next"
 
 interface DocPageProps {
-  params: {
+  params: Promise<{
     slug: string[]
-  }
+  }>
 }
 
-async function getDocFromParams({ params }: DocPageProps) {
+async function getDocFromParams(props: DocPageProps) {
+  const params = await props.params
   const slug = params.slug?.join("/") || ""
 
   const doc = allDocs.find((doc) => doc.slugAsParams === slug)
 
   if (!doc) {
-    null
+    return
   }
 
   return doc
 }
 
-export async function generateMetadata({
-  params,
-}: DocPageProps): Promise<Metadata> {
-  const doc = await getDocFromParams({ params })
+export async function generateMetadata(props: DocPageProps): Promise<Metadata> {
+  const doc = await getDocFromParams(props)
 
   if (!doc) {
     return {}
@@ -44,16 +43,14 @@ export async function generateMetadata({
   }
 }
 
-export async function generateStaticParams(): Promise<
-  DocPageProps["params"][]
-> {
+export async function generateStaticParams() {
   return allDocs.map((doc) => ({
     slug: doc.slugAsParams.split("/"),
   }))
 }
 
-export default async function DocPage({ params }: DocPageProps) {
-  const doc = await getDocFromParams({ params })
+export default async function DocPage(props: DocPageProps) {
+  const doc = await getDocFromParams(props)
 
   if (!doc) {
     notFound()

www/apps/ui/src/app/not-found.tsx

@@ -7,6 +7,7 @@ import {
   ComputerDesktopSolid,
   BuildingStorefront,
 } from "@medusajs/icons"
+import React from "react"
 
 const H1 = MDXComponents.h1!
 const P = MDXComponents.p!
@@ -18,8 +19,11 @@ export const metadata: Metadata = {
 export default function NotFound() {
   return (
     <div>
+      {/* @ts-expect-error React v19 doesn't recognize these as elements. */}
       <H1>Page Not Found</H1>
+      {/* @ts-expect-error React v19 doesn't recognize these as elements. */}
       <P>The page you were looking for isn&apos;t available.</P>
+      {/* @ts-expect-error React v19 doesn't recognize these as elements. */}
       <P>
         If you think this is a mistake, please
         <Link href="https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml">

www/apps/ui/src/components/component-example.tsx

@@ -28,7 +28,7 @@ export function ComponentExample({
   }, [name])
 
   const CodeElement = children as React.ReactElement
-  const Code = CodeElement.props.code
+  const Code = (CodeElement.props as Record<string, string>).code
 
   return (
     <div className="relative my-4 flex flex-col space-y-2" {...props}>

www/apps/ui/src/components/icon-search.tsx

@@ -8,7 +8,7 @@ import * as React from "react"
 
 const iconNames = Object.keys(Icons).filter((name) => name !== "default")
 
-const IconSearch = React.memo(function IconSearch() {
+const IconSearch = () => {
   const [query, setQuery] = React.useState<string | undefined>("")
 
   return (
@@ -23,7 +23,7 @@ const IconSearch = React.memo(function IconSearch() {
       </Container>
     </div>
   )
-})
+}
 
 const SearchResults = ({ query = "" }: { query?: string }) => {
   const cleanQuery = escapeStringRegexp(query.trim().replace(/\s/g, " "))