feat: add flat config (#164)

## Context

This PR will move to the new flat config introduced in ESLint 9, this
config has also being updated with `playwright eslint`

## Changes

- Added: new flat config in `eslint.config.mjs`
- Added: support for playwright linting
- Updated: playwright config && workflows
- Removed: deprecated packages
- Docs have been updated with new file structure

## Checklist

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] I have tested my code for breaking changes and added the
corresponding footer in this PR if needed
- [x] I have added tests that prove my fix is effective or that my
feature works

Author: remcolakens

.eslintrc

@@ -25,7 +25,7 @@ jobs:
         id: waitForVercelPreviewDeployment
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          max_timeout: 300
+          max_timeout: 600
 
   test_e2e:
     runs-on: ubuntu-latest
@@ -45,3 +45,11 @@ jobs:
         run: pnpm test:e2e
         env:
           PLAYWRIGHT_TEST_BASE_URL: ${{ needs.test_setup.outputs.preview_url }}
+
+      - name: Upload test results
+        if: always() && !cancelled()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-test-results
+          path: src/e2e/test_output
+          retention-days: 7

.github/workflows/playwright.yml

@@ -30,8 +30,9 @@ test/**/next-env.d.ts
 test/tmp/**
 test/.trace
 test/traces
-e2e/test-results
-e2e/report
+test-results
+report
+test_output
 
 # Editors
 **/.idea

.gitignore

@@ -29,19 +29,17 @@
 │   └── CHANGELOG.md          # the changelog
 │   └── ci.md                 # docs for CI
 │   └── commit-convention.md  # docs for commit convention
-├── e2e                       # E2E tests
-│   └── example.spec.ts       # Example E2E test
 ├── public                    # Folder for static assets
 ├── src                       # Source folder
 │   ├── app                   # App folder
 │   ├── components            # Components folder
+│   ├── e2e                   # E2E tests folder
 │   ├── lib                   # Lib folder
 │   └── svgs                  # SVGs folder
 ├── .commitlintrc             # commitlint config (package)
 ├── .czrc                     # Config to commitizen
 ├── .editorconfig             # Config to normalize editors
 ├── .env.example              # Example file with required .env variables
-├── .eslintrc                 # Eslint config
 ├── .gitignore                # Files that will be ignored by git
 ├── .lintstagedrc.js          # Config file for "lint-staged" (package)
 ├── .npmrc                    # Config file for npm
@@ -51,18 +49,19 @@
 ├── .releaserc                # semantic-release config
 ├── .svgrrc                   # config for SVGR
 ├──  CODE_OF_CONDUCT.md       # the CODE OF CONDUCT
-├──  LICENSE                  # License information
-├──  README.md                # README documentation
 ├──  components.json          # Shadcn UI config
-├──  vitest.config.mts        # Config file for vitest
-├──  vitest.setup.ts          # Vitest setup file
+├──  eslint.config.mjs        # Eslint config
+├──  LICENSE                  # License information
 ├──  next-env.d.ts            # Next.js Typescript declaration file (leave unchanged)
 ├──  package.json             # The package.json of this project
 ├──  playwright.config.ts     # Config file for playwright
 ├──  pnpm-lock.yaml           # Lock file for packages (leave unchanged)
 ├──  postcss.config.js        # the postcss config file
+├──  README.md                # README documentation
 ├──  tailwind.config.ts       # the tailwind css config
-└──  tsconfig.json            # Typescript config
+├──  tsconfig.json            # Typescript config
+├──  vitest.config.mts        # Config file for vitest
+└──  vitest.setup.ts          # Vitest setup file
 ```
 
 ## Usage
@@ -77,7 +76,7 @@ If you are new to pnpm you need to [install it on your local machine](https://pn
 pnpm install
 
 # Install playwright for end-to-end tests
-pnpm exec playwright install --with-deps
+pnpm dlx playwright install
 
 # Start local webserver at port 3000
 pnpm dev

README.md

@@ -0,0 +1,47 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import pluginJs from '@eslint/js';
+import playwright from 'eslint-plugin-playwright';
+import prettierPlugin from 'eslint-plugin-prettier/recommended';
+import tailwind from 'eslint-plugin-tailwindcss';
+import testingLibrary from 'eslint-plugin-testing-library';
+
+const compat = new FlatCompat({
+	// import.meta.dirname is available after Node.js v20.11.0
+	baseDirectory: import.meta.dirname,
+});
+
+/** @type {import('eslint').Linter.Config[]} */
+const eslintConfig = [
+	pluginJs.configs.recommended,
+	...tailwind.configs['flat/recommended'],
+	...compat.config({
+		extends: ['next/core-web-vitals', 'next/typescript'],
+		rules: {
+			'no-console': 'error',
+			'react/prop-types': 'off',
+			'react/react-in-jsx-scope': 'off',
+			'@typescript-eslint/no-empty-function': 'off',
+			'@typescript-eslint/no-unused-vars': 'error',
+			'@typescript-eslint/no-explicit-any': 'error',
+		},
+	}),
+	{
+		...testingLibrary.configs['flat/react'],
+		files: ['src/**/*.test.{ts,tsx}'],
+	},
+	{
+		...playwright.configs['flat/recommended'],
+		files: ['src/e2e/**'],
+		rules: {
+			...playwright.configs['flat/recommended'].rules,
+		},
+	},
+	{
+		...prettierPlugin,
+		rules: {
+			'prettier/prettier': 'error',
+		},
+	},
+];
+
+export default eslintConfig;

eslint.config.mjs

@@ -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.

next-env.d.ts

@@ -25,28 +25,27 @@
 		"@commitlint/cli": "^19.6.1",
 		"@commitlint/config-conventional": "^19.6.0",
 		"@commitlint/cz-commitlint": "^19.6.1",
+		"@eslint/eslintrc": "^3.2.0",
+		"@eslint/js": "^9.19.0",
 		"@playwright/test": "^1.50.0",
 		"@remcolakens/simple-component-generator": "^1.0.5",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
 		"@svgr/cli": "^8.1.0",
-		"@vitejs/plugin-react": "^4.3.4",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "29.5.14",
 		"@types/node": "^22.10.10",
 		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
-		"@typescript-eslint/eslint-plugin": "^8.21.0",
-		"@typescript-eslint/parser": "^8.21.0",
+		"@vitejs/plugin-react": "^4.3.4",
 		"autoprefixer": "^10.4.20",
 		"commitizen": "^4.3.1",
 		"eslint": "^9.19.0",
 		"eslint-config-next": "^15.1.6",
-		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-playwright": "^2.2.0",
 		"eslint-plugin-prettier": "5.2.3",
-		"eslint-plugin-react": "^7.37.4",
 		"eslint-plugin-tailwindcss": "^3.18.0",
 		"eslint-plugin-testing-library": "^7.1.1",
 		"husky": "^9.1.7",
@@ -60,10 +59,10 @@
 		"rimraf": "^6.0.1",
 		"semantic-release": "^24.2.1",
 		"shadcn": "^2.1.8",
+		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.3",
 		"vite-tsconfig-paths": "^5.1.4",
-		"vitest": "^3.0.4",
-		"tailwindcss": "^3.4.17"
+		"vitest": "^3.0.4"
 	},
 	"dependencies": {
 		"class-variance-authority": "^0.7.1",

package.json

@@ -1,16 +1,22 @@
 import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
-	testMatch: 'e2e/*.spec.ts',
-	testDir: 'e2e',
-	reporter: [['html', { open: 'never', outputFolder: 'e2e/report' }]],
-	outputDir: 'e2e/test-results/',
+	testDir: 'src/e2e',
+	testMatch: 'src/e2e/*.spec.{ts,tsx}',
+	reporter: [
+		[
+			'html',
+			{ open: 'never', outputFolder: 'src/e2e/test_output/playwright-report' },
+		],
+	],
+	outputDir: 'src/e2e/test_output/test-results',
 
 	workers: process.env.CI ? 1 : undefined,
 	fullyParallel: true,
 
 	forbidOnly: process.env.CI ? true : false,
 	retries: process.env.CI ? 3 : 0,
+	maxFailures: 25,
 
 	use: {
 		baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL ?? 'http://localhost:3000',
@@ -35,7 +41,7 @@ export default defineConfig({
 		{
 			name: 'mobile webkit',
 			use: {
-				...devices['iPhone 14'],
+				...devices['iPhone 15'],
 			},
 		},
 		{

playwright.config.ts

@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 export default function Home() {
 	return (
-		<div className="grid min-h-screen grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 p-8 pb-20 font-[family-name:var(--font-geist-sans)] sm:p-20">
+		<div className="grid min-h-screen grid-rows-[20px_1fr_20px] place-items-center gap-16 p-8 pb-20 font-[family-name:var(--font-geist-sans)] sm:p-20">
 			<main className="row-start-2 flex flex-col items-center gap-8 sm:items-start">
 				<Image
 					className="dark:invert"