🚨(frontend) create package eslint-config-people

We want to lint the e2e tests, we export the eslint config from the
app desk to a package in order to use it for the e2e tests and
for our apps.

src/frontend/apps/desk/.eslintrc.js

@@ -1,133 +1,14 @@
 module.exports = {
-  extends: [
-    'next',
-    'plugin:prettier/recommended',
-    'plugin:@tanstack/eslint-plugin-query/recommended',
-    'plugin:jsx-a11y/recommended',
-  ],
+  root: true,
+  extends: ['people/next'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
   settings: {
     next: {
       rootDir: __dirname,
     },
-    'jsx-a11y': {
-      polymorphicPropName: 'as',
-      components: {
-        Input: 'input',
-        Button: 'button',
-        Box: 'div',
-        Text: 'span',
-        Select: 'select',
-      },
-    },
   },
-  parserOptions: {
-    babelOptions: {
-      presets: [require.resolve('next/babel')],
-    },
-  },
-  rules: {
-    'block-scoped-var': 'error',
-    curly: ['error', 'all'],
-    'import/no-duplicates': ['error', { considerQueryString: false }],
-    'import/order': [
-      'error',
-      {
-        alphabetize: {
-          order: 'asc',
-        },
-        groups: [
-          'builtin',
-          'external',
-          'internal',
-          'parent',
-          'sibling',
-          'index',
-        ],
-        pathGroups: [
-          {
-            pattern: '@/**',
-            group: 'internal',
-          },
-        ],
-        pathGroupsExcludedImportTypes: ['builtin'],
-        'newlines-between': 'always',
-      },
-    ],
-    'no-alert': 'error',
-    'no-unused-vars': [
-      'error',
-      { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
-    ],
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'error',
-    'react/jsx-curly-brace-presence': [
-      'error',
-      { props: 'never', children: 'never', propElementValues: 'always' },
-    ],
-    'sort-imports': [
-      'error',
-      {
-        ignoreDeclarationSort: true,
-      },
-    ],
-  },
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx'],
-      extends: [
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/recommended-requiring-type-checking',
-      ],
-      parser: '@typescript-eslint/parser', // Specifies the ESLint parser
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-        project: ['./tsconfig.json'],
-      },
-      rules: {
-        '@typescript-eslint/no-explicit-any': 'error',
-        '@typescript-eslint/no-non-null-assertion': 'error',
-        'sort-imports': [
-          'error',
-          {
-            ignoreDeclarationSort: true,
-          },
-        ],
-      },
-    },
-    {
-      files: ['*.spec.*', '*.test.*', '**/__mock__/**/*'],
-      plugins: ['jest'],
-      extends: ['plugin:jest/recommended', 'plugin:testing-library/react'],
-      rules: {
-        '@typescript-eslint/ban-types': 'off',
-        '@typescript-eslint/no-empty-function': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/no-non-null-assertion': 'off',
-        '@typescript-eslint/no-unsafe-argument': 'off',
-        '@typescript-eslint/no-unsafe-assignment': 'off',
-        '@typescript-eslint/no-unsafe-call': 'off',
-        '@typescript-eslint/no-unsafe-member-access': 'off',
-        '@typescript-eslint/no-unsafe-return': 'off',
-        'testing-library/no-await-sync-events': [
-          'error',
-          { eventModules: ['fire-event'] },
-        ],
-        'testing-library/await-async-events': [
-          'error',
-          {
-            eventModule: 'userEvent',
-          },
-        ],
-        'testing-library/no-manual-cleanup': 'off',
-        '@typescript-eslint/no-unused-vars': [
-          'error',
-          { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
-        ],
-        'react/display-name': 0,
-        'jest/expect-expect': 'error',
-        '@typescript-eslint/unbound-method': 'off',
-        'jest/unbound-method': 'error',
-      },
-    },
-  ],
+  ignorePatterns: ['.eslintrc.js'],
 };

src/frontend/apps/desk/package.json

@@ -24,7 +24,6 @@
     "zustand": "4.4.7"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "5.17.1",
     "@tanstack/react-query-devtools": "5.17.12",
     "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
@@ -32,15 +31,8 @@
     "@types/node": "*",
     "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.18.1",
     "dotenv": "16.3.1",
-    "eslint": "8.0.1",
-    "eslint-config-next": "14.0.4",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jest": "27.6.2",
-    "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-prettier": "5.1.2",
-    "eslint-plugin-testing-library": "6.2.0",
+    "eslint-config-people": "*",
     "fetch-mock": "9.11.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",

src/frontend/apps/e2e/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ["people/playwright"],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+  },
+};

src/frontend/apps/e2e/__tests__/app-desk/app.spec.ts

@@ -1,29 +1,29 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from "@playwright/test";
 
-import { keyCloakSignIn } from './common';
+import { keyCloakSignIn } from "./common";
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/');
+  await page.goto("/");
   await keyCloakSignIn(page);
 });
 
 test.describe("App", () => {
   test("should display the main elements", async ({ page }) => {
-    await expect(page.locator('header').first()).toContainText('Desk');
-    await expect(page.getByLabel('Team name')).toBeVisible();
+    await expect(page.locator("header").first()).toContainText("Desk");
+    await expect(page.getByLabel("Team name")).toBeVisible();
   });
 
-  test('creates 2 teams and displayed them', async ({ page }) => {
-    await page.getByLabel('Team name').fill('My new team');
+  test("creates 2 teams and displayed them", async ({ page }) => {
+    await page.getByLabel("Team name").fill("My new team");
     await page.click('button:has-text("Create Team")');
-    await page.getByLabel('Team name').fill('My second new team');
+    await page.getByLabel("Team name").fill("My second new team");
     await page.click('button:has-text("Create Team")');
 
     await expect(
-      page.locator('li').getByText('My new team').first(),
+      page.locator("li").getByText("My new team").first(),
     ).toBeVisible();
     await expect(
-      page.locator('li').getByText('My second new team').first(),
+      page.locator("li").getByText("My second new team").first(),
     ).toBeVisible();
   });
 });

src/frontend/apps/e2e/__tests__/app-desk/common.ts

@@ -1,13 +1,13 @@
-import { Page } from '@playwright/test';
+import { Page } from "@playwright/test";
 
 export const keyCloakSignIn = async (page: Page) => {
-  const title = await page.locator('h1').first().textContent({
+  const title = await page.locator("h1").first().textContent({
     timeout: 5000,
   });
 
-  if (title?.includes('Sign in to your account')) {
-    await page.getByRole('textbox', { name: 'username' }).fill('user-e2e');
-    await page.getByRole('textbox', { name: 'password' }).fill('password-e2e');
+  if (title?.includes("Sign in to your account")) {
+    await page.getByRole("textbox", { name: "username" }).fill("user-e2e");
+    await page.getByRole("textbox", { name: "password" }).fill("password-e2e");
 
     await page.click('input[type="submit"]');
   }

src/frontend/apps/e2e/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "lint": "eslint . --ext .ts",
     "install": "playwright install --with-deps",
     "test": "playwright test",
     "test:ui": "yarn test --ui"
@@ -10,6 +11,7 @@
   "devDependencies": {
     "@playwright/test": "1.40.1",
     "@types/node": "*",
+    "eslint-config-people": "*",
     "typescript": "*"
   }
 }

src/frontend/apps/e2e/playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 const PORT = process.env.PORT || 3200;
 
@@ -10,9 +10,9 @@ const baseURL = `http://localhost:${PORT}`;
 export default defineConfig({
   // Timeout per test
   timeout: 30 * 1000,
-  testDir: './__tests__',
-  outputDir: './test-results',
-  
+  testDir: "./__tests__",
+  outputDir: "./test-results",
+
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -22,17 +22,19 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [['html', { outputFolder: './report' }]],
+  reporter: [["html", { outputFolder: "./report" }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL: baseURL,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   webServer: {
-    command:  `cd ../.. && yarn app:${process.env.CI ? "start -p " : "dev --port "} ${PORT}`,
+    command: `cd ../.. && yarn app:${
+      process.env.CI ? "start -p " : "dev --port "
+    } ${PORT}`,
     url: baseURL,
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
@@ -41,18 +43,18 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
     },
   ],
 });