M2-4835: Linting rules for mindlogger-web-refactor (#370)

resolves: [M2-4835](https://mindlogger.atlassian.net/browse/M2-4835)

# Objective

This PR creates a GitHub Action to run linting tasks on pull requests submitted to the repository. As part of the ticket, I took the opportunity to update the ESlint rules on the project to be more in line with those on [mindlogger-admin](https://github.com/ChildMindInstitute/mindlogger-admin). These updates have raised a number of linting issues, but **won't block** the merging of pull requests. While I've addressed some of the smaller items (and any error ones), I expect that these will be addressed in the normal course of feature development so that we can eventually require linting checks to pass in order to merge PRs.

## Prettier Code Formatting

Prettier has been configured in the project as the code formatter of choice, but it is currently conflicting with a number of code formatting ESLint rules. The prettier ESLint plugin disables these rules if it is placed as an inherited configuration at the end of the `extends` array, so I have made this change. The prettier ESLint plugin also enables Prettier as an ESLint rule, so that code formatting issues become errors. This should be okay, since Prettier fixes them for you.

.eslintignore

@@ -1,7 +1,11 @@
-node_modules/
-dist/
-.prettierrc.js
-.eslintrc.js
-env.d.ts
-public
-.gitignore
+# Ignore everything
+/*
+
+# Except for the src directory
+!src
+
+# And any top-level JS or TS files
+!/*.js
+!/*.jsx
+!/*.ts
+!/*.tsx

.eslintrc.js

@@ -6,7 +6,14 @@ module.exports = {
  jest: true,
  },
  parser: '@typescript-eslint/parser',
- plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier', 'eslint-plugin-import'],
+ plugins: [
+ 'react',
+ 'react-hooks',
+ '@typescript-eslint',
+ 'prettier',
+ 'eslint-plugin-import',
+ 'unused-imports',
+ ],
  overrides: [
  {
  files: ['*.ts', '*.tsx'],
@@ -24,41 +31,16 @@ module.exports = {
  'plugin:@typescript-eslint/eslint-recommended',
  'plugin:@typescript-eslint/recommended',
  'plugin:@typescript-eslint/recommended-requiring-type-checking',
+ 'plugin:prettier/recommended',
  ],
  rules: {
- 'linebreak-style': ['error', 'unix'],
- 'no-empty-function': 'off',
- '@typescript-eslint/no-empty-function': 'off',
- '@typescript-eslint/no-explicit-any': 'off',
- '@typescript-eslint/no-unsafe-assignment': 'off',
- '@typescript-eslint/no-unsafe-call': 'off',
- '@typescript-eslint/no-floating-promises': 'off',
+ // Error
  '@typescript-eslint/no-misused-promises': ['error', { checksVoidReturn: false }],
- 'prettier/prettier': 'error',
- 'react/display-name': 'off',
- 'react/prop-types': 'off',
  'react-hooks/rules-of-hooks': 'error',
- 'react-hooks/exhaustive-deps': 'warn',
- 'react/jsx-uses-react': 'off',
- 'react/react-in-jsx-scope': 'off',
- 'no-console': "warn",
- 'no-case-declarations': 'off',
- '@typescript-eslint/unbound-method': 'off',
- '@typescript-eslint/no-unsafe-member-access': 'off',
- '@typescript-eslint/no-unsafe-argument': 'off',
- '@typescript-eslint/restrict-template-expressions': 'off',
- '@typescript-eslint/no-unsafe-return': 'off',
- '@typescript-eslint/restrict-plus-operands': 'off',
- '@typescript-eslint/no-non-null-assertion': 'off',
  'import/order': [
  'error',
  {
- groups: [
- ['external', 'builtin'],
- 'internal',
- ['sibling', 'parent'],
- 'index',
- ],
+ groups: [['external', 'builtin'], 'internal', ['sibling', 'parent'], 'index'],
  pathGroups: [
  {
  pattern: '@(react)',
@@ -77,7 +59,73 @@ module.exports = {
  caseInsensitive: true,
  },
  },
- ]
+ ],
+ 'unused-imports/no-unused-imports': 'error',
+ 'import/no-cycle': 'error',
+ 'constructor-super': 'error',
+ 'no-this-before-super': 'error',
+ 'no-useless-computed-key': 'error',
+ 'no-useless-constructor': 'off',
+ 'no-useless-rename': 'error',
+ 'no-var': 'error',
+ 'object-shorthand': 'error',
+ 'prefer-template': 'error',
+ 'no-restricted-syntax': ['error', 'ForInStatement', 'SequenceExpression'],
+ 'no-caller': 'error',
+ 'no-template-curly-in-string': 'error',
+ 'array-callback-return': 'error',
+ 'no-eval': 'error',
+ 'no-extend-native': 'error',
+ eqeqeq: ['error', 'always'],
+ 'no-lone-blocks': 'error',
+ 'no-proto': 'error',
+ 'no-script-url': 'error',
+ 'no-self-compare': 'error',
+ 'no-sequences': 'error',
+ 'no-throw-literal': 'error',
+ 'no-undef-init': 'error',
+ 'no-nested-ternary': 'error',
+ 'no-unneeded-ternary': 'error',
+ 'no-debugger': 'error',
+ 'no-empty': 'error',
+ 'no-unused-labels': 'error',
+ 'prefer-const': 'error',
+
+ // Warn
+ '@typescript-eslint/no-empty-function': 'warn',
+ '@typescript-eslint/no-explicit-any': 'warn',
+ '@typescript-eslint/no-unsafe-assignment': 'warn',
+ '@typescript-eslint/no-unsafe-call': 'warn',
+ '@typescript-eslint/no-floating-promises': 'warn',
+ 'react/display-name': 'warn',
+ 'react/prop-types': 'warn',
+ 'react-hooks/exhaustive-deps': 'warn',
+ 'no-console': 'warn',
+ '@typescript-eslint/no-non-null-assertion': 'warn',
+ 'unused-imports/no-unused-vars': [
+ 'warn',
+ {
+ vars: 'all',
+ varsIgnorePattern: '^_',
+ args: 'after-used',
+ argsIgnorePattern: '^_',
+ },
+ ],
+
+ // Off
+ 'react/jsx-uses-react': 'off',
+ 'react/react-in-jsx-scope': 'off',
+ 'no-case-declarations': 'off',
+ '@typescript-eslint/unbound-method': 'off',
+ '@typescript-eslint/no-unsafe-member-access': 'off',
+ '@typescript-eslint/no-unsafe-argument': 'off',
+ '@typescript-eslint/restrict-template-expressions': 'off',
+ '@typescript-eslint/no-unsafe-return': 'off',
+ '@typescript-eslint/restrict-plus-operands': 'off',
+ '@typescript-eslint/no-unused-vars': 'off',
+ 'no-extra-semi': 'off',
+ 'prefer-destructuring': 'off',
+ camelcase: 'off',
  },
  },
  ],
@@ -86,4 +134,4 @@ module.exports = {
  version: 'detect',
  },
  },
-};
+};

.github/workflows/ci.yml

@@ -0,0 +1,54 @@
+name: CI
+on: [pull_request]
+
+env:
+ NODE_VERSION: 20.11.0
+
+jobs:
+ lint:
+ name: Lint
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+
+ - uses: actions/setup-node@v4
+ with:
+ node-version: ${{ env.NODE_VERSION }}
+
+ - uses: actions/cache@v4
+ with:
+ path: |
+ ~/node_modules
+ key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}
+
+ - run: yarn install --frozen-lockfile
+
+ - uses: wearerequired/lint-action@v2
+ with:
+ eslint: true
+ eslint_extensions: mjs,js,jsx,mts,ts,tsx
+ prettier: true
+ prettier_extensions: mjs,js,jsx,mts,ts,tsx
+ continue_on_error: false
+ tests:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+
+ - uses: actions/setup-node@v4
+ with:
+ node-version: ${{ env.NODE_VERSION }}
+
+ - name: Install deps
+ run: yarn install --frozen-lockfile
+
+ - uses: actions/cache@v4
+ with:
+ path: |
+ ~/node_modules
+ key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}
+
+ - name: Running tests
+ env:
+ REACT_APP_API_DOMAIN: http://localhost:8080
+ run: yarn test

.prettierignore

@@ -1,3 +1,13 @@
-/node_modules
-/public
-/src/i18n/
+# Ignore everything
+/*
+
+# Except for the src directory
+!src
+
+# And any top-level JS or TS files
+!/*.js
+!/*.mjs
+!/*.jsx
+!/*.ts
+!/*.mts
+!/*.tsx

.prettierrc.js

@@ -1,11 +1,13 @@
 module.exports = {
- arrowParens: 'avoid',
- bracketSameLine: true,
+ arrowParens: 'always',
+ bracketSameLine: false,
  bracketSpacing: true,
- singleQuote: false,
+ singleQuote: true,
+ jsxSingleQuote: false,
  trailingComma: 'all',
- printWidth: 120,
+ semi: true,
+ printWidth: 100,
  tabWidth: 2,
  useTabs: false,
- semi: false
-}
+ endOfLine: 'lf',
+};

package.json

@@ -69,10 +69,12 @@
  "@vitest/coverage-v8": "^1.2.0",
  "@vitest/ui": "^1.2.1",
  "eslint": "^8.56.0",
+ "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-import": "^2.29.1",
  "eslint-plugin-prettier": "^5.1.3",
  "eslint-plugin-react": "^7.33.2",
  "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-unused-imports": "^3.0.0",
  "husky": "^8.0.2",
  "jest": "^29.7.0",
  "jest-canvas-mock": "^2.5.2",