chore: upgrade eslint to v9 and flat config

.eslintignore

@@ -1,2 +0,0 @@
-.next
-node_modules

.eslintrc.js

@@ -1,79 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const fs = require("fs")
-
-module.exports = {
-  extends: [
-    "next",
-    "prettier",
-    "react-app",
-    "react-app/jest",
-    "plugin:storybook/recommended",
-    "plugin:tailwindcss/recommended",
-  ],
-  parserOptions: {
-    babelOptions: {
-      presets: [require.resolve("next/babel")],
-    },
-  },
-  rules: {
-    "tailwindcss/no-custom-classname": "off",
-    "testing-library/prefer-screen-queries": "off",
-    "@next/next/no-html-link-for-pages": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-      },
-    ],
-    "sort-imports": [
-      "error",
-      {
-        ignoreCase: true,
-        ignoreDeclarationSort: true,
-      },
-    ],
-    "tailwindcss/classnames-order": "off",
-    "import/order": [
-      1,
-      {
-        groups: ["external", "builtin", "internal", "sibling", "parent", "index"],
-        pathGroups: [
-          ...getDirectoriesToSort().map((singleDir) => ({
-            pattern: `${singleDir}/**`,
-            group: "internal",
-          })),
-          {
-            pattern: "env",
-            group: "internal",
-          },
-          {
-            pattern: "theme",
-            group: "internal",
-          },
-          {
-            pattern: "public/**",
-            group: "internal",
-            position: "after",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["internal"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
-}
-
-function getDirectoriesToSort() {
-  const ignoredSortingDirectories = [".git", ".next", ".vscode", "node_modules"]
-  return getDirectories(process.cwd()).filter((f) => !ignoredSortingDirectories.includes(f))
-}
-
-function getDirectories(path) {
-  return fs.readdirSync(path).filter(function (file) {
-    return fs.statSync(path + "/" + file).isDirectory()
-  })
-}

app/page.tsx

@@ -1,5 +1,7 @@
+
 import { Metadata } from "next"
 import { Button } from "components/Button/Button"
+
 import { LP_GRID_ITEMS } from "lp-items"
 
 export const metadata: Metadata = {
@@ -25,7 +27,7 @@ export default function Web() {
       <section className="bg-white dark:bg-gray-900">
         <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
           <div className="mx-auto place-self-center">
-            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight dark:text-white md:text-5xl xl:text-6xl">
+            <h1 className="mb-4 size-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight dark:text-white md:text-5xl xl:text-6xl">
               Next.js Enterprise Boilerplate
             </h1>
             <p className="mb-6 max-w-2xl font-light text-gray-500 dark:text-gray-400 md:text-lg lg:mb-8 lg:text-xl">
@@ -50,7 +52,7 @@ export default function Web() {
           <div className="justify-center space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0 lg:grid-cols-3">
             {LP_GRID_ITEMS.map((singleItem) => (
               <div key={singleItem.title} className="flex flex-col items-center justify-center text-center">
-                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 p-1.5 text-blue-700 dark:bg-primary-900 lg:h-12 lg:w-12">
+                <div className="mb-4 flex size-10 items-center justify-center rounded-full bg-primary-100 p-1.5 text-blue-700 dark:bg-primary-900 lg:size-12">
                   {singleItem.icon}
                 </div>
                 <h3 className="mb-2 text-xl font-bold dark:text-white">{singleItem.title}</h3>

components/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as RadixTooltip from "@radix-ui/react-tooltip"
-import { cva, VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority"
 import React from "react"
 import { twMerge } from "tailwind-merge"
 

eslint.config.mjs

@@ -0,0 +1,106 @@
+import * as fs from "fs"
+
+import eslintPluginTailwindcss from "eslint-plugin-tailwindcss"
+import eslintPluginImport from "eslint-plugin-import"
+import eslintPluginNext from "@next/eslint-plugin-next"
+import eslintPluginStorybook from "eslint-plugin-storybook"
+import typescriptEslint from "typescript-eslint"
+
+const eslintIgnore = [
+  ".git/",
+  ".next/",
+  "node_modules/",
+  "dist/",
+  "build/",
+  "coverage/",
+  "*.min.js",
+  "*.config.js",
+  "*.d.ts",
+]
+
+const config = typescriptEslint.config(
+  {
+    ignores: eslintIgnore,
+  },
+  ...eslintPluginStorybook.configs["flat/recommended"],
+  ...eslintPluginTailwindcss.configs["flat/recommended"],
+  typescriptEslint.configs.recommended,
+  eslintPluginImport.flatConfigs.recommended,
+  {
+    plugins: {
+      "@next/next": eslintPluginNext,
+    },
+    rules: {
+      ...eslintPluginNext.configs.recommended.rules,
+      ...eslintPluginNext.configs["core-web-vitals"].rules,
+    },
+  },
+  {
+    settings: {
+      tailwindcss: {
+        callees: ["classnames", "clsx", "ctl", "cn", "cva"],
+      },
+
+      "import/resolver": {
+        typescript: true,
+        node: true,
+      },
+    },
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
+      "sort-imports": [
+        "error",
+        {
+          ignoreCase: true,
+          ignoreDeclarationSort: true,
+        },
+      ],
+      "import/order": [
+        "warn",
+        {
+          groups: ["external", "builtin", "internal", "sibling", "parent", "index"],
+          pathGroups: [
+            ...getDirectoriesToSort().map((singleDir) => ({
+              pattern: `${singleDir}/**`,
+              group: "internal",
+            })),
+            {
+              pattern: "env",
+              group: "internal",
+            },
+            {
+              pattern: "theme",
+              group: "internal",
+            },
+            {
+              pattern: "public/**",
+              group: "internal",
+              position: "after",
+            },
+          ],
+          pathGroupsExcludedImportTypes: ["internal"],
+          alphabetize: {
+            order: "asc",
+            caseInsensitive: true,
+          },
+        },
+      ],
+    },
+  }
+)
+
+function getDirectoriesToSort() {
+  const ignoredSortingDirectories = [".git", ".next", ".vscode", "node_modules"]
+  return fs
+    .readdirSync(process.cwd())
+    .filter((file) => fs.statSync(process.cwd() + "/" + file).isDirectory())
+    .filter((f) => !ignoredSortingDirectories.includes(f))
+}
+
+export default config

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/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -48,10 +48,10 @@
     "@vercel/otel": "^1.8.3",
     "class-variance-authority": "^0.7.0",
     "lodash": "^4.17.21",
-    "next": "^14.2.3",
+    "next": "15.1.6",
     "next-compose-plugins": "^2.2.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "tailwind-merge": "^2.3.0",
     "zod": "^3.23.8"
   },
@@ -60,7 +60,9 @@
     "@babel/plugin-syntax-flow": "^7.23.3",
     "@babel/plugin-transform-optional-chaining": "^7.23.4",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@eslint/eslintrc": "^3",
     "@jest/globals": "^29.7.0",
+    "@next/eslint-plugin-next": "15.1.6",
     "@opentelemetry/api": "1.7.0",
     "@opentelemetry/resources": "1.18.1",
     "@opentelemetry/sdk-node": "0.45.1",
@@ -79,38 +81,36 @@
     "@testing-library/react": "^14.1.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/jest": "^29.5.10",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^19",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/eslint-plugin": "8.21.0",
-    "@typescript-eslint/parser": "^6.12.0",
     "all-contributors-cli": "^6.26.1",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
-    "eslint": "8.54.0",
+    "eslint": "^9",
-    "eslint-config-next": "14.0.3",
+    "eslint-config-next": "15.1.6",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^10.0.1",
-    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-storybook": "^0.11.2",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-tailwindcss": "^3.18.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-tailwindcss": "^3.13.0",
     "fetch-mock": "^9.11.0",
     "gzip-size": "6.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "mkdirp": "^3.0.1",
     "patch-package": "^8.0.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "semantic-release": "^22.0.8",
     "storybook": "^7.5.3",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.1",
     "tsc": "^2.0.4",
-    "typescript": "5.4.5",
+    "typescript": "^5",
+    "typescript-eslint": "^8.21.0",
     "webpack": "5.89.0"
   },
   "engines": {

tsconfig.json

@@ -25,6 +25,6 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs", "jest.config.js", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs", "jest.config.js", ".next/types/**/*.ts", "eslint.config.mjs"],
   "exclude": ["node_modules"]
 }