🚨(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.

.github/workflows/people.yml

@@ -77,6 +77,28 @@ jobs:
       - name: Test Desk App
         run: yarn test
 
+  lint-front:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: src/frontend/
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+          cache-dependency-path: src/frontend/yarn.lock
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        
+      - name: Check linting
+        run: yarn lint
+
   test-e2e:
     runs-on: ubuntu-latest
     

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

@@ -1,133 +1,14 @@
 module.exports = {
-  extends: [
+  root: true,
-    'next',
+  extends: ['people/next'],
-    'plugin:prettier/recommended',
+  parserOptions: {
-    'plugin:@tanstack/eslint-plugin-query/recommended',
+    tsconfigRootDir: __dirname,
-    'plugin:jsx-a11y/recommended',
+    project: ['./tsconfig.json'],
-  ],
+  },
   settings: {
     next: {
       rootDir: __dirname,
     },
-    'jsx-a11y': {
-      polymorphicPropName: 'as',
-      components: {
-        Input: 'input',
-        Button: 'button',
-        Box: 'div',
-        Text: 'span',
-        Select: 'select',
-      },
-    },
   },
-  parserOptions: {
+  ignorePatterns: ['.eslintrc.js'],
-    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',
-      },
-    },
-  ],
 };

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-people": "*",
-    "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",
     "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.locator("header").first()).toContainText("Desk");
-    await expect(page.getByLabel('Team name')).toBeVisible();
+    await expect(page.getByLabel("Team name")).toBeVisible();
   });
 
-  test('creates 2 teams and displayed them', async ({ page }) => {
+  test("creates 2 teams and displayed them", async ({ page }) => {
-    await page.getByLabel('Team name').fill('My new team');
+    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')) {
+  if (title?.includes("Sign in to your account")) {
-    await page.getByRole('textbox', { name: 'username' }).fill('user-e2e');
+    await page.getByRole("textbox", { name: "username" }).fill("user-e2e");
-    await page.getByRole('textbox', { name: 'password' }).fill('password-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,8 +10,8 @@ const baseURL = `http://localhost:${PORT}`;
 export default defineConfig({
   // Timeout per test
   timeout: 30 * 1000,
-  testDir: './__tests__',
+  testDir: "./__tests__",
-  outputDir: './test-results',
+  outputDir: "./test-results",
 
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -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',
+      name: "chromium",
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices["Desktop Chrome"] },
     },
 
     {
-      name: 'firefox',
+      name: "firefox",
-      use: { ...devices['Desktop Firefox'] },
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
+      name: "webkit",
-      use: { ...devices['Desktop Safari'] },
+      use: { ...devices["Desktop Safari"] },
     },
   ],
 });

src/frontend/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "workspaces": {
     "packages": [
-      "apps/*"
+      "apps/*",
+      "packages/*"
     ]
   },
   "scripts": {
@@ -15,7 +16,8 @@
     "app:build": "yarn APP_DESK run build",
     "app:test": "yarn APP_DESK run test",
     "ci:build": "yarn APP_DESK run build:ci",
-    "e2e:test": "yarn APP_E2E run test"
+    "e2e:test": "yarn APP_E2E run test",
+    "lint": "yarn APP_DESK run lint && yarn APP_E2E run lint"
   },
   "resolutions": {
     "@types/node": "20.10.8",

src/frontend/packages/eslint-config-people/common.js

@@ -0,0 +1,62 @@
+const eslintTS = {
+  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,
+      },
+    ],
+  },
+};
+
+const globalRules = {
+  "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/jsx-curly-brace-presence": [
+    "error",
+    { props: "never", children: "never", propElementValues: "always" },
+  ],
+  "sort-imports": [
+    "error",
+    {
+      ignoreDeclarationSort: true,
+    },
+  ],
+};
+
+module.exports = { eslintTS, globalRules };

src/frontend/packages/eslint-config-people/next.js

@@ -0,0 +1,65 @@
+const common = require("./common");
+
+module.exports = {
+  extends: [
+    "next",
+    "plugin:prettier/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended",
+    "plugin:jsx-a11y/recommended",
+  ],
+  settings: {
+    "jsx-a11y": {
+      polymorphicPropName: "as",
+      components: {
+        Input: "input",
+        Button: "button",
+        Box: "div",
+        Text: "span",
+        Select: "select",
+      },
+    },
+  },
+  rules: {
+    ...common.globalRules,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+  },
+  overrides: [
+    common.eslintTS,
+    {
+      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",
+      },
+    },
+  ],
+};

src/frontend/packages/eslint-config-people/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "eslint-config-people",
+  "version": "0.1.0",
+  "license": "MIT",
+  "dependencies": {
+    "@tanstack/eslint-plugin-query": "5.17.1",
+    "@typescript-eslint/eslint-plugin": "6.18.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",
+    "@next/eslint-plugin-next": "14.0.4",
+    "eslint-plugin-playwright": "0.22.1"
+  }
+}

src/frontend/packages/eslint-config-people/playwright.js

@@ -0,0 +1,19 @@
+const common = require("./common");
+
+module.exports = {
+  extends: ["next", "plugin:prettier/recommended"],
+  parserOptions: {
+    babelOptions: {
+      presets: [require.resolve("next/babel")],
+    },
+  },
+  rules: common.globalRules,
+  overrides: [
+    common.eslintTS,
+    {
+      files: ["*.spec.*", "*.test.*", "**/__mock__/**/*"],
+      extends: ["plugin:playwright/recommended"],
+      plugins: ["playwright"],
+    },
+  ],
+};

src/frontend/yarn.lock

@@ -3551,6 +3551,13 @@ eslint-plugin-jsx-a11y@6.8.0, eslint-plugin-jsx-a11y@^6.7.1:
     object.entries "^1.1.7"
     object.fromentries "^2.0.7"
 
+eslint-plugin-playwright@0.22.1:
+  version "0.22.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-0.22.1.tgz#fb4451771e262312a778bfee222d662b61d6d0f9"
+  integrity sha512-xUQ9mJH+CjifLG6vMowl3r49G/8JvW4G10IqHjc1WO44fffdhLZF/i4Def+U3y6LqUEBp0JAMnWUhEck7ksqrw==
+  dependencies:
+    globals "^13.23.0"
+
 eslint-plugin-prettier@5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.2.tgz#584c94d4bf31329b2d4cbeb10fd600d17d6de742"
@@ -4051,7 +4058,7 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.19.0, globals@^13.6.0:
+globals@^13.19.0, globals@^13.23.0, globals@^13.6.0:
   version "13.24.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
   integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==