Feature/up next 15 react 19 (#123)

* upgrade to next 15 and react 19 * disable oauth-app * upgrade @radix-ui/react-slider to the latest version * upgrade all radix packages
emiljohansson · Dec 22, 2024 · d9d01f8 · d9d01f8
1 parent 0d3c337
commit d9d01f8
Show file tree

Hide file tree

Showing 20 changed files with 1,190 additions and 885 deletions.
diff --git a/apps/code-not-found/next-env.d.ts b/apps/code-not-found/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/apps/code-not-found/package.json b/apps/code-not-found/package.json
@@ -9,9 +9,9 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
-		"next": "14.0.4",
-		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"next": "15.1.2",
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	},
 	"devDependencies": {
 		"config": "workspace:*",

diff --git a/apps/design/next-env.d.ts b/apps/design/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/design/package.json b/apps/design/package.json
@@ -9,15 +9,15 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
-		"@radix-ui/react-icons": "1.1.1",
-		"@radix-ui/react-label": "1.0.0",
-		"@radix-ui/react-progress": "1.0.0",
-		"@radix-ui/react-radio-group": "latest",
+		"@radix-ui/react-icons": "1.3.2",
+		"@radix-ui/react-label": "2.1.1",
+		"@radix-ui/react-progress": "1.1.1",
+		"@radix-ui/react-radio-group": "^1.2.2",
 		"framer-motion": "6.2.3",
 		"lib": "workspace:*",
-		"next": "14.0.4",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"next": "15.1.2",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"ui": "workspace:*"
 	},
 	"devDependencies": {

diff --git a/apps/games/next-env.d.ts b/apps/games/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/games/package.json b/apps/games/package.json
@@ -17,9 +17,9 @@
 		"lz-string": "1.5.0",
 		"million": "2.6.4",
 		"nanostores": "0.9.5",
-		"next": "14.0.4",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"next": "15.1.2",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"react-icons": "4.7.1",
 		"ui": "workspace:*"
 	},

diff --git a/apps/next/next-env.d.ts b/apps/next/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/next/package.json b/apps/next/package.json
@@ -18,11 +18,11 @@
 		"@emiljohansson/random-string": "1.1.2",
 		"@faker-js/faker": "7.4.0",
 		"@nanostores/react": "0.7.1",
-		"@radix-ui/react-accessible-icon": "1.0.2",
-		"@radix-ui/react-label": "1.0.0",
-		"@radix-ui/react-progress": "1.0.0",
-		"@radix-ui/react-select": "1.0.0",
-		"@radix-ui/react-tabs": "1.0.0",
+		"@radix-ui/react-accessible-icon": "1.1.1",
+		"@radix-ui/react-label": "2.1.1",
+		"@radix-ui/react-progress": "1.1.1",
+		"@radix-ui/react-select": "2.1.4",
+		"@radix-ui/react-tabs": "1.1.2",
 		"@supabase/ssr": "0.0.10",
 		"@vercel/analytics": "1.1.1",
 		"@vercel/kv": "1.0.0",
@@ -33,9 +33,9 @@
 		"lib": "workspace:*",
 		"lucide-react": "0.323.0",
 		"nanostores": "0.9.5",
-		"next": "14.0.4",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"next": "15.1.2",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"react-icons": "4.7.1",
 		"swr": "1.3.0",
 		"ui": "workspace:*"

diff --git a/apps/next/src/app/layout.tsx b/apps/next/src/app/layout.tsx
@@ -59,7 +59,7 @@ export const metadata: Metadata = {
 }
 
 export default async function Layout({ children }: PropsWithChildren<unknown>) {
-	const headersList = headers()
+	const headersList = await headers()
 	const pathname = headersList.get('x-url-pathname') || ''
 	const projects = await getProjects()
 	const currentProject = (projects as Tables<'project'>[]).find(
@@ -92,19 +92,19 @@ export default async function Layout({ children }: PropsWithChildren<unknown>) {
 			</head>
 			<body
 				className={`
-					${inter.className} 
+					${inter.className}
 					bg-[length:15px_15px] bg-dots
-					bg-slate-50 dark:bg-gray-900 
-					dark:text-white 
+					bg-slate-50 dark:bg-gray-900
+					dark:text-white
 					flex flex-col h-full`}
 			>
 				{/* background-image: conic-gradient(at 92% 8%, rgb(134, 143, 151) 90deg, transparent 0deg, transparent 225deg, transparent 0deg);
 				background-size: 15px 15px; */}
 				<nav
 					className="
 						flex justify-between items-center
-						bg-white dark:bg-black 
-						border-b border-slate-200 dark:border-zinc-700 
+						bg-white dark:bg-black
+						border-b border-slate-200 dark:border-zinc-700
 						px-4 py-3
 					"
 				>

diff --git a/apps/next/src/app/login/callback/page.tsx b/apps/next/src/app/login/callback/page.tsx
@@ -1,13 +1,12 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
 import { createTokens } from '../tokens'
 
-export default async function Page({
-	searchParams,
-}: {
-	searchParams: { [key: string]: string }
-}) {
+export default async function Page() {
 	console.log('GET /login/callback')
-
-	const code = searchParams.code || 'error'
+	const searchParams = useSearchParams()
+	const code = searchParams.get('code') || 'error'
 	const json = await createTokens(code)
 
 	return (

diff --git a/apps/next/src/lib/supabase.ts b/apps/next/src/lib/supabase.ts
@@ -2,8 +2,8 @@ import { createServerClient } from '@supabase/ssr'
 import { cookies } from 'next/headers'
 import { Database } from './database.types'
 
-const createClient = () => {
-	const cookieStore = cookies()
+const createClient = async () => {
+	const cookieStore = await cookies()
 
 	return createServerClient<Database>(
 		process.env.SUPABASE_URL!,
@@ -19,7 +19,7 @@ const createClient = () => {
 }
 
 export async function getProjects() {
-	const supabase = createClient()
+	const supabase = await createClient()
 	const { data: projects } = await supabase
 		.from('project')
 		.select('*')

diff --git a/apps/oauth-app/package.json b/apps/oauth-app/package.json
@@ -3,10 +3,10 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "PORT=3006 next dev",
-		"build": "PORT=3006 next build",
-		"start": "PORT=3006 next start",
-		"lint": "next lint"
+		"x_dev": "PORT=3006 next dev",
+		"x_build": "PORT=3006 next build",
+		"x_start": "PORT=3006 next start",
+		"x_lint": "next lint"
 	},
 	"dependencies": {
 		"@types/node": "18.0.1",
@@ -16,11 +16,11 @@
 		"eslint": "8.54.0",
 		"eslint-config-next": "14.0.3",
 		"jsonwebtoken": "9.0.2",
-		"next": "14.0.4",
+		"next": "15.1.2",
 		"node-cache": "5.1.2",
 		"postcss": "8.4.31",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"tailwindcss": "3.4.0",
 		"typescript": "5.0.4"
 	},

diff --git a/apps/oauth-app/src/app/callback/page.tsx b/apps/oauth-app/src/app/callback/page.tsx
@@ -1,42 +1,61 @@
+'use client'
+
 import { Silkscreen } from 'next/font/google'
+import { useSearchParams } from 'next/navigation'
+import { Suspense, useEffect, useState } from 'react'
 
 const silkscreen = Silkscreen({ weight: '400', subsets: ['latin'] })
 
-export default async function Page({
-	searchParams,
-}: {
-	searchParams: { [key: string]: string | string[] | undefined }
-}) {
-	const code = searchParams.code
+function Code() {
+	const [json, setJson] = useState()
+	const searchParams = useSearchParams()
+	const code = searchParams.get('code')
 	console.log({ code })
-	const formData = new URLSearchParams({
-		grant_type: 'authorization_code',
-		code,
-		redirect_uri: 'http://localhost:3000',
-	} as Record<string, string>)
-	const response = await fetch('http://localhost:3006/token', {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-			Accept: 'application/json',
-		},
-		body: formData.toString(),
-	})
-	const json = await response.json()
-	console.log({ json })
-	// // console.log(headers())
-	// // console.log(userAgent({ headers: headers() as Headers }))
-	// const authCode = crypto.randomBytes(16).toString('hex')
-	// const authCodes = getCache<{ [key: string]: boolean }>('authCodes') || {}
-	// authCodes[authCode] = true
-	// setCache('authCodes', authCodes, 120)
 
+	useEffect(() => {
+		async function createTokens() {
+			const formData = new URLSearchParams({
+				grant_type: 'authorization_code',
+				code,
+				redirect_uri: 'http://localhost:3000',
+			} as Record<string, string>)
+			const response = await fetch('http://localhost:3006/token', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Accept: 'application/json',
+				},
+				body: formData.toString(),
+			})
+			const json = await response.json()
+			console.log({ json })
+			setJson(json)
+			// // console.log(headers())
+			// // console.log(userAgent({ headers: headers() as Headers }))
+			// const authCode = crypto.randomBytes(16).toString('hex')
+			// const authCodes = getCache<{ [key: string]: boolean }>('authCodes') || {}
+			// authCodes[authCode] = true
+			// setCache('authCodes', authCodes, 120)
+		}
+		createTokens()
+	}, [code])
+
+	return (
+		<>
+			<div>{code}</div>
+			{json && <code>{JSON.stringify(json)}</code>}
+		</>
+	)
+}
+
+export default function Page() {
 	return (
 		<main
 			className={`${silkscreen.className} flex min-h-screen flex-col items-center justify-between p-24`}
 		>
-			<div>{code}</div>
-			<code>{JSON.stringify(json)}</code>
+			<Suspense>
+				<Code />
+			</Suspense>
 		</main>
 	)
 }
diff --git a/apps/password-manager/next-env.d.ts b/apps/password-manager/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/apps/password-manager/package.json b/apps/password-manager/package.json
@@ -9,17 +9,17 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
-		"@radix-ui/react-icons": "1.1.1",
-		"@radix-ui/react-label": "1.0.0",
+		"@radix-ui/react-icons": "1.3.2",
+		"@radix-ui/react-label": "2.1.1",
 		"@supabase/auth-helpers-nextjs": "0.2.7",
 		"@supabase/auth-helpers-react": "0.2.3",
 		"@supabase/supabase-js": "1.35.6",
 		"@supabase/ui": "0.36.5",
 		"crypto-js": "4.2.0",
 		"lib": "workspace:*",
-		"next": "14.0.4",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"next": "15.1.2",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"ui": "workspace:*"
 	},
 	"devDependencies": {

diff --git a/packages/config/package.json b/packages/config/package.json
@@ -4,9 +4,9 @@
 	"main": "eslint-preset.js",
 	"license": "MIT",
 	"dependencies": {
-		"next": "14.0.4",
-		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"next": "15.1.2",
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	},
 	"devDependencies": {
 		"@typescript-eslint/eslint-plugin": "6.12.0",

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -11,9 +11,9 @@
 	"dependencies": {
 		"@preact/signals-core": "1.5.0",
 		"@preact/signals-react": "1.3.7",
-		"next": "14.0.4",
-		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"next": "15.1.2",
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
 	},
 	"devDependencies": {
 		"config": "workspace:*",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -15,24 +15,24 @@
 		}
 	},
 	"scripts": {
-		"build": "tsup",
+		"build": "tsup && tailwindcss -i ./src/globals.css -o ./dist/index.css",
 		"dev": "tsup --watch",
 		"lint": "eslint ./**/*.tsx"
 	},
 	"peerDependencies": {
 		"react": "18.2.0"
 	},
 	"dependencies": {
-		"@radix-ui/react-checkbox": "1.0.0",
-		"@radix-ui/react-icons": "1.1.1",
-		"@radix-ui/react-progress": "1.0.0",
-		"@radix-ui/react-select": "1.0.0",
-		"@radix-ui/react-slider": "1.0.0",
+		"@radix-ui/react-checkbox": "1.1.3",
+		"@radix-ui/react-icons": "1.3.2",
+		"@radix-ui/react-progress": "1.1.1",
+		"@radix-ui/react-select": "2.1.4",
+		"@radix-ui/react-slider": "1.2.2",
 		"framer-motion": "6.2.3",
 		"lib": "workspace:*",
-		"next": "14.0.4",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"next": "15.1.2",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"react-icons": "4.7.1"
 	},
 	"devDependencies": {

diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
@@ -2,6 +2,7 @@
 const sharedConfig = require('config/tailwind.config.js')
 
 module.exports = {
+	content: ['./src/**/*.tsx'],
 	// prefix ui lib classes to avoid conflicting with the app
 	// prefix: 'ui-',
 	presets: [sharedConfig],