UIFC-476-add-eslint-rules

Author: elsenhans

.eslintrc

@@ -1,17 +1,98 @@
 {
-  "extends": "@folio/eslint-config-stripes",
-  "parser": "@babel/eslint-parser",
+  "root": true,
   "env": {
     "jest": true
   },
+  "extends": [
+    "@folio/eslint-config-stripes",
+    "plugin:testing-library/react",
+    "plugin:jest-dom/recommended"
+  ],
+  "parser": "@babel/eslint-parser",
+  "plugins": [
+    "canonical"
+  ],
   "rules": {
-    "implicit-arrow-linebreak": "off",
+    "array-bracket-newline": ["error", { "multiline": true }],
+    "canonical/export-specifier-newline": "error",
+    "canonical/import-specifier-newline": "error",
+    "comma-dangle": [
+      "error", 
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "always-multiline",
+        "exports": "always-multiline",
+        "functions": "never"
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]],
+        "newlines-between": "always",
+        "pathGroups": [
+          {
+            "pattern": "@folio/**",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+    "key-spacing": [
+      "error",
+      {
+        "beforeColon": false,
+        "afterColon": true,
+        "mode": "strict"
+      }
+    ],
+    "max-len": ["warn", { "code": 120 }],
+    "newline-per-chained-call": ["warn", { "ignoreChainWithDepth": 2 }],
+    "no-multiple-empty-lines": "error",
+    "object-curly-newline": [
+      "error",
+      {
+        "ImportDeclaration": { "multiline": true, "minProperties": 2 },
+        "ExportDeclaration": { "multiline": true, "minProperties": 2 }
+      }
+    ],
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": "block-like", "next": "*" },
+      { "blankLine": "always", "prev": "*", "next": "block-like" }
+    ],
+    "quote-props": ["error", "as-needed"],
     "react/forbid-prop-types": [
       // rule was removed from eslint-config-stripes in v8.0.0
       "warn",
       {
         "forbid": ["any", "array"]
       }
-    ]
+    ],
+    "react/jsx-sort-props": "error",
+    "react/sort-prop-types": "error",
+    "sort-imports": ["error", { "ignoreCase": true, "ignoreDeclarationSort": true }],
+    "testing-library/no-await-sync-events": [
+      "error",
+      { "eventModules": ["fire-event"] }
+    ],
+    "testing-library/no-node-access": "off",
+    "testing-library/no-render-in-lifecycle": [
+      "error",
+      { "allowTestingFrameworkSetupHook": "beforeEach" }
+    ],
+    "testing-library/prefer-user-event": "warn"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

CHANGELOG.md

@@ -9,6 +9,7 @@
 * Use generic hook form stripes-leipzig-components ([UIFC-437](https://folio-org.atlassian.net/browse/UIFC-437))
 * Fix FileUploaderField value type inconsistency ([UIFC-465](https://folio-org.atlassian.net/browse/UIFC-465))
 * Include mod-settings global permissions ([UIFC-459](https://folio-org.atlassian.net/browse/UIFC-459))
+* Add eslint rules ([UIFC-476](https://folio-org.atlassian.net/browse/UIFC-476))
 
 ## [8.1.0](https://github.com/folio-org/ui-finc-select/tree/v8.1.0) (2025-08-21)
 * Address code duplications ([UIFC-342](https://folio-org.atlassian.net/browse/UIFC-342))

jest.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const config = require('@folio/jest-config-stripes');
 
-const esModules = ['@folio', '@k-int', 'ky', 'uuid'].join('|');
+const esModules = ['@folio', 'ky', 'uuid'].join('|');
 
 module.exports = {
   ...config,

package.json

@@ -25,7 +25,9 @@
     "@folio/stripes-core": "^11.0.0",
     "@folio/stripes-final-form": "^9.0.0",
     "@folio/stripes-smart-components": "^10.0.0",
-    "eslint": "^7.32.0",
+    "eslint-plugin-canonical": "^4.0.0",
+    "eslint-plugin-jest-dom": "^4.0.0",
+    "eslint-plugin-testing-library": "^6.0.0",
     "history": "^5.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/DataOptions/type.js

@@ -1,4 +1,4 @@
 export default [
   { value: 'Whitelist' },
-  { value: 'Blacklist' }
+  { value: 'Blacklist' },
 ];

src/components/Filters/Collections/CollectionsForm.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { FieldArray } from 'react-final-form-arrays';
+import { FormattedMessage } from 'react-intl';
 
 import { Accordion } from '@folio/stripes/components';
 
@@ -51,7 +51,7 @@ CollectionsForm.propTypes = {
   form: PropTypes.shape({
     mutators: PropTypes.shape({
       setCollection: PropTypes.func,
-    })
+    }),
   }),
   onToggle: PropTypes.func,
 };

src/components/Filters/Collections/CollectionsView.js

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import { get } from 'lodash';
+import PropTypes from 'prop-types';
 
 import FindCollections from './FindCollections/FindCollections';
 

src/components/Filters/Collections/FindCollections/FindCollections.js

@@ -9,7 +9,9 @@ const FindCollections = ({
   isEditable,
   selectRecords,
 }) => {
-  const searchLabel = isEditable ? <FormattedMessage id="ui-finc-select.plugin.buttonLabel.collection.add" /> : <FormattedMessage id="ui-finc-select.plugin.buttonLabel.collection.view" />;
+  const searchLabel = isEditable ?
+    <FormattedMessage id="ui-finc-select.plugin.buttonLabel.collection.add" /> :
+    <FormattedMessage id="ui-finc-select.plugin.buttonLabel.collection.view" />;
 
   return (
     <Pluggable

src/components/Filters/FilterFile/FilterFileForm.js

@@ -4,8 +4,8 @@ import { FormattedMessage } from 'react-intl';
 import { Accordion } from '@folio/stripes/components';
 import { useStripes } from '@folio/stripes/core';
 
-import DocumentsFieldArray from './UploadFile/DocumentsFieldArray';
 import fetchWithDefaultOptions from '../../DisplayUtils/fetchWithDefaultOptions';
+import DocumentsFieldArray from './UploadFile/DocumentsFieldArray';
 
 const FilterFileForm = ({
   accordionId,

src/components/Filters/FilterFile/FilterFileForm.test.js

@@ -1,14 +1,20 @@
-import { MemoryRouter } from 'react-router-dom';
-import { Form } from 'react-final-form';
 import arrayMutators from 'final-form-arrays';
+import { Form } from 'react-final-form';
+import { MemoryRouter } from 'react-router-dom';
 
-import { screen, waitFor } from '@folio/jest-config-stripes/testing-library/react';
+import {
+  screen,
+  waitFor,
+} from '@folio/jest-config-stripes/testing-library/react';
 import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
-import { StripesContext, useStripes } from '@folio/stripes/core';
+import {
+  StripesContext,
+  useStripes,
+} from '@folio/stripes/core';
 
 import renderWithIntlConfiguration from '../../../../test/jest/helpers/renderWithIntlConfiguration';
-import FilterFileForm from './FilterFileForm';
 import fetchWithDefaultOptions from '../../DisplayUtils/fetchWithDefaultOptions';
+import FilterFileForm from './FilterFileForm';
 
 const onToggle = jest.fn();
 const onSubmit = jest.fn();
@@ -27,8 +33,8 @@ const renderFilterFileForm = (stripes) => {
     <StripesContext.Provider value={stripes}>
       <MemoryRouter>
         <Form
-          onSubmit={onSubmit}
           mutators={arrayMutators}
+          onSubmit={onSubmit}
           render={() => (
             <FilterFileForm
               accordionId="accordionId"