#180 Bump Next to v15 (#181)

* feat: update dependencies for React and Next.js

* chore: migrate ESLint configuration to new format

* chore: update eslint config and dependencies

* fix: sonarjs rules for todo tags and commented code

* chore: update ESLint configuration and dependencies for improved compatibility

* feat: change eslint config into .ts

* chore: migrate ESLint configuration back to .mjs format and add import order plugin

* chore: run lint auto fix to deal with imports

* refactor: fix remaining lint issues

* fix: ts issues

* fix: remaining ts issues

Author: mhussajn

.vscode/settings.json

@@ -1,3 +1,7 @@
 {
-  "eslint.workingDirectories": ["./frontend"]
+  "eslint.workingDirectories": ["./frontend"],
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always"
+  }
 }

frontend/.eslintrc.json

@@ -0,0 +1,62 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript';
+import importPlugin from 'eslint-plugin-import-x';
+import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
+import { configs as sonarjsConfigs } from 'eslint-plugin-sonarjs';
+import tseslint from 'typescript-eslint';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default tseslint.config(
+  js.configs.recommended,
+  sonarjsConfigs.recommended,
+  importPlugin.flatConfigs.recommended,
+  importPlugin.flatConfigs.typescript,
+  eslintConfigPrettier,
+  eslintPluginPrettier,
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
+  {
+    rules: {
+      'sonarjs/todo-tag': ['warn'],
+      'sonarjs/no-commented-code': ['warn'],
+      'import-x/order': [
+        'error',
+        {
+          pathGroups: [
+            {
+              pattern: '@app/**',
+              group: 'internal',
+              position: 'after',
+            },
+          ],
+          groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
+          alphabetize: { order: 'asc', caseInsensitive: true },
+          'newlines-between': 'always',
+        },
+      ],
+    },
+  },
+  // Typescript resolver is required for `eslint-import-plugin-x` to resolve
+  // typescript files.
+  {
+    settings: {
+      'import-x/resolver-next': [
+        createTypeScriptImportResolver({
+          alwaysTryTypes: true,
+        }),
+      ],
+    },
+  },
+);

frontend/eslint.config.mjs

@@ -6,30 +6,34 @@
   "scripts": {
     "build": "next build",
     "compile": "tsc --noEmit",
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "format": "prettier 'src/**/*.{js,jsx,ts,tsx}' --write",
     "postinstall": "cd .. && husky frontend/.husky",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "start": "next start",
     "test": "echo \"tests\""
   },
+  "resolutions": {
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4"
+  },
   "dependencies": {
     "@editorjs/checklist": "^1.6.0",
     "@editorjs/editorjs": "^2.30.8",
     "@editorjs/header": "^2.8.7",
     "@editorjs/list": "^1.10.0",
     "@editorjs/paragraph": "^2.11.6",
-    "@headlessui/react": "^2.0.4",
+    "@headlessui/react": "^2.2.0",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.9.0",
     "@supabase/ssr": "0.5",
     "@supabase/supabase-js": "^2.44.4",
     "clsx": "^2.1.0",
     "framer-motion": "^12.4.3",
-    "next": "14.2.24",
-    "react": "^18",
-    "react-dom": "^18",
+    "next": "15.1.7",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-easy-crop": "^5.0.7",
     "react-hook-form": "^7.52.0",
     "react-hot-toast": "^2.4.1",
@@ -43,24 +47,29 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@eslint/js": "^9.21.0",
     "@tailwindcss/typography": "^0.5.13",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@types/eslint-config-prettier": "^6.11.3",
+    "@types/node": "22.13.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "@typescript-eslint/parser": "^8.25.0",
     "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-sonarjs": "^0.24.0",
+    "eslint": "^9.21.0",
+    "eslint-config-next": "^15.1.7",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-import-resolver-typescript": "^3.8.3",
+    "eslint-plugin-import-x": "^4.6.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-sonarjs": "^3.0.2",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
-    "postcss": "^8",
-    "prettier": "3.2.5",
+    "postcss": "8.4.39",
+    "prettier": "^3.5.2",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.24.1"
   },
   "packageManager": "[email protected]",
   "engines": {

frontend/package.json

@@ -1,19 +1,19 @@
 'use server';
 
+import { createClient as createSupabaseClient } from '@supabase/supabase-js';
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 
-import { createClient } from '@app/utils/supabase/server';
-import { createClient as createSupabaseClient } from '@supabase/supabase-js';
-import { routes } from '@app/constants';
 import {
   AddEmployeeForm,
   addEmployeeFormNames,
 } from '@app/components/pages/People/addEmployee/AddEmployeeFormProvider';
+import { routes } from '@app/constants';
 import { userStatus } from '@app/types/user';
+import { createClient } from '@app/utils/supabase/server';
 
 export async function login(formData: FormData) {
-  const supabase = createClient();
+  const supabase = await createClient();
 
   // type-casting here for convenience
   // in practice, you should validate your inputs
@@ -86,6 +86,7 @@ export async function createEmployee(data: AddEmployeeForm & { status: keyof typ
   const { error } = await supabase.auth.admin.createUser({
     email: data[addEmployeeFormNames.email],
     email_confirm: true,
+    // eslint-disable-next-line sonarjs/no-hardcoded-passwords
     password: 'password',
     user_metadata: {
       ...userMeta,

frontend/src/app/favicon.ico renamed to frontend/public/favicon.ico

@@ -2,7 +2,7 @@ import { MainLadder as MainLadderPage } from '@app/components/pages/People/addEm
 import { createClient } from '@app/utils/supabase/server';
 
 const getLadders = async () => {
-  const supabase = createClient();
+  const supabase = await createClient();
   const { data: ladders, error } = await supabase.from('ladder').select();
 
   if (!error) {

frontend/src/actions/user.ts

@@ -1,12 +1,13 @@
+import { redirect } from 'next/navigation';
+
 import { ProjectScope } from '@app/components/pages/mySpace/addProject/ProjectScope';
 import { BandWithBuckets } from '@app/types/library';
 import { UserLadder } from '@app/types/user';
 import { mapKeysToCamelCase } from '@app/utils';
 import { createClient } from '@app/utils/supabase/server';
-import { redirect } from 'next/navigation';
 
 export default async function Score() {
-  const supabase = createClient();
+  const supabase = await createClient();
   const {
     data: { user },
     error,

frontend/src/app/(app)/(addEmployee)/people/add-new/main-ladder/[[...id]]/page.tsx

@@ -1,12 +1,13 @@
+import { redirect } from 'next/navigation';
+
 import { Sidebar } from '@app/components/modules/Sidebar';
 import { Topbar } from '@app/components/modules/Topbar';
 import { User } from '@app/types/user';
 import { mapKeysToCamelCase } from '@app/utils';
 import { createClient } from '@app/utils/supabase/server';
-import { redirect } from 'next/navigation';
 
 const getUser = async () => {
-  const supabase = createClient();
+  const supabase = await createClient();
   const {
     data: { user },
     error,

frontend/src/app/(app)/(addProject)/my-space/add-new/project-scope/page.tsx

@@ -1,11 +1,11 @@
 import { BucketDetails } from '@app/components/pages/BucketDetails';
-import { createClient } from '@app/utils/supabase/server';
-import { mapKeysToCamelCase } from '@app/utils';
 import { Bucket } from '@app/types/library';
+import { mapKeysToCamelCase } from '@app/utils';
+import { createClient } from '@app/utils/supabase/server';
 
-export default async function BucketDetailed({ params }: { params: { bucket: string; ladder: string } }) {
-  const { bucket: bucketSlug, ladder: ladderSlug } = params;
-  const supabase = createClient();
+export default async function BucketDetailed({ params }: { params: Promise<{ bucket: string; ladder: string }> }) {
+  const { bucket: bucketSlug, ladder: ladderSlug } = await params;
+  const supabase = await createClient();
   const { data: bucket } = await supabase
     .from('bucket')
     .select(