[RFR] Replace tslint with eslint

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+build
+lib
+esm

.eslintrc

@@ -0,0 +1,22 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+        "react-app",
+        "plugin:prettier/recommended",
+        "prettier/@typescript-eslint",
+        "prettier/babel",
+        "prettier/react"
+    ],
+    "plugins": [
+        "@typescript-eslint",
+        "import",
+        "jsx-a11y",
+        "prettier",
+        "react",
+        "react-hooks"
+    ],
+    "rules": {
+        "no-use-before-define": "off",
+        "prettier/prettier": "error"
+    }
+}

.lintstagedrc

@@ -1,8 +1,7 @@
 {
   "*.{js,jsx,ts,tsx}": [
-      "prettier",
-      "tslint --fix",
+      "eslint --fix",
       "git add",
-      "jest --findRelatedTests"
+      "cross-env BABEL_ENV=cjs NODE_ICU_DATA=node_modules/full-icu jest --findRelatedTests"
     ]
 }

Makefile

@@ -98,7 +98,7 @@ serve-github-pages: ## Serve the doc from a Github Pages docker container
 
 lint: ## lint the code and check coding conventions
 	@echo "Running linter..."
-	@yarn -s tslint 'packages/*/src/**/*.*s'
+	@yarn -s lint
 
 prettier: ## prettify the source code using prettier
 	@echo "Running prettier..."

cypress/.eslintrc

@@ -0,0 +1,9 @@
+{
+    "extends": "../.eslintrc",
+    "plugins": [
+        "cypress"
+    ],
+      "env": {
+        "cypress/globals": true
+    }
+}

cypress/integration/create.js

@@ -239,13 +239,19 @@ describe('Create Page', () => {
 
     it('should show rich text input error message when form is submitted', () => {
         CreatePage.submit();
-        cy.get(CreatePage.elements.richTextInputError).should('exist').contains('Required');
+        cy.get(CreatePage.elements.richTextInputError)
+            .should('exist')
+            .contains('Required');
     });
 
     it('should not show rich text input error message when form is submitted and input is filled with text', () => {
         CreatePage.submit();
-        cy.get(CreatePage.elements.richTextInputError).should('exist').contains('Required');
-        cy.get(CreatePage.elements.input('body', 'rich-text-input')).type('text');
+        cy.get(CreatePage.elements.richTextInputError)
+            .should('exist')
+            .contains('Required');
+        cy.get(CreatePage.elements.input('body', 'rich-text-input')).type(
+            'text'
+        );
         cy.get(CreatePage.elements.richTextInputError).should('not.exist');
     });
 
@@ -271,6 +277,8 @@ describe('Create Page', () => {
         CreatePage.setValues(values);
         CreatePage.submit();
         EditPage.gotoTab(2);
-        cy.get(EditPage.elements.input('body', 'rich-text-input')).contains('Test body');
+        cy.get(EditPage.elements.input('body', 'rich-text-input')).contains(
+            'Test body'
+        );
     });
 });

cypress/integration/edit.js

@@ -72,9 +72,10 @@ describe('Edit Page', () => {
 
         CreatePostPage.navigate();
 
-        cy.get(CreatePostPage.elements.input('body', 'rich-text-input')).should(el =>
-            // When the Quill editor is empty, it add the "ql-blank" CSS class
-            expect(el).to.have.class('ql-blank')
+        cy.get(CreatePostPage.elements.input('body', 'rich-text-input')).should(
+            el =>
+                // When the Quill editor is empty, it add the "ql-blank" CSS class
+                expect(el).to.have.class('ql-blank')
         );
     });
 

cypress/integration/list.js

@@ -207,30 +207,33 @@ describe('List Page', () => {
     describe('expand panel', () => {
         it('should show an expand button opening the expand element', () => {
             cy.contains('1-10 of 13'); // wait for data
-            cy.get('[role="expand"]')
+            cy.get('[aria-label="Expand"]')
                 .eq(0)
-                .click();
-            cy.get('[role="expand-content"]').should(el =>
+                .click()
+                .should(el => expect(el).to.have.attr('aria-expanded', 'true'))
+                .should(el => expect(el).to.have.attr('aria-label', 'Close'));
+
+            cy.get('#13-expand').should(el =>
                 expect(el).to.contain(
                     'Curabitur eu odio ullamcorper, pretium sem at, blandit libero. Nulla sodales facilisis libero, eu gravida tellus ultrices nec. In ut gravida mi. Vivamus finibus tortor tempus egestas lacinia. Cras eu arcu nisl. Donec pretium dolor ipsum, eget feugiat urna iaculis ut.'
                 )
             );
-            cy.get('.datagrid-body').should(el =>
-                expect(el).to.not.contain('[role="expand-content"]')
-            );
         });
 
         it('should accept multiple expands', () => {
             cy.contains('1-10 of 13'); // wait for data
-            cy.get('[role="expand"]')
+            cy.get('[aria-label="Expand"]')
                 .eq(0)
-                .click();
-            cy.get('[role="expand"]')
-                .eq(1)
-                .click();
-            cy.get('[role="expand-content"]').should(el =>
-                expect(el).to.have.length(2)
-            );
+                .click()
+                .should(el => expect(el).to.have.attr('aria-expanded', 'true'))
+                .should(el => expect(el).to.have.attr('aria-label', 'Close'));
+            cy.get('#13-expand').should(el => expect(el).to.exist);
+            cy.get('[aria-label="Expand"]')
+                .eq(0)
+                .click()
+                .should(el => expect(el).to.have.attr('aria-expanded', 'true'))
+                .should(el => expect(el).to.have.attr('aria-label', 'Close'));
+            cy.get('#12-expand').should(el => expect(el).to.exist);
         });
     });
 

cypress/support/CreatePage.js

@@ -6,7 +6,7 @@ export default url => ({
             if (type === 'rich-text-input') {
                 return `.ra-input-${name} .ql-editor`;
             }
-            return `.create-page ${type}[name='${name}']`
+            return `.create-page ${type}[name='${name}']`;
         },
         inputs: `.ra-input`,
         richTextInputError: '.create-page .ra-rich-text-input-error',

cypress/support/EditPage.js

@@ -6,7 +6,7 @@ export default url => ({
             if (type === 'rich-text-input') {
                 return `.ra-input-${name} .ql-editor`;
             }
-            return `.edit-page [name='${name}']`
+            return `.edit-page [name='${name}']`;
         },
         inputs: `.ra-input`,
         tabs: `.form-tab`,

cypress/support/ListPage.js

@@ -15,9 +15,9 @@ export default url => ({
         recordRows: '.datagrid-body tr',
         viewsColumn: '.datagrid-body tr td:nth-child(7)',
         datagridHeaders: 'th',
-        sortBy: name => `th span[data-sort=\"${name}\"]`,
+        sortBy: name => `th span[data-sort="${name}"]`,
         svg: (name, criteria = '') =>
-            `th span[data-sort=\"${name}\"] svg${criteria}`,
+            `th span[data-sort="${name}"] svg${criteria}`,
         logout: '.logout',
         bulkActionsToolbar: '[data-test=bulk-actions-toolbar]',
         customBulkActionsButton:

examples/data-generator/src/commands.js

@@ -58,7 +58,7 @@ export default (db, { serializeDate }) => {
                 (total_ex_taxes + delivery_fees + taxes).toFixed(2)
             ),
             status: status,
-            returned: status == 'delivered' ? weightedBoolean(10) : false,
+            returned: status === 'delivered' ? weightedBoolean(10) : false,
         };
     });
 };

examples/data-generator/src/finalize.js

@@ -22,15 +22,15 @@ export default function(db) {
         customers[command.customer_id].nbProducts += command.basket.length;
         return customers;
     }, {});
-    Object.keys(customersBySpending).map(customer_id => {
+    Object.keys(customersBySpending).forEach(customer_id => {
         if (customersBySpending[customer_id].nbProducts > 10) {
             db.customers[customer_id].groups.push('collector');
         }
     });
 
     // add 'ordered_once' group
     db.customers
-        .filter(customer => customer.nb_commands == 1)
+        .filter(customer => customer.nb_commands === 1)
         .forEach(customer => customer.groups.push('ordered_once'));
 
     // add 'compulsive' group

examples/data-generator/src/invoices.js

@@ -1,7 +1,3 @@
-import { random, lorem } from 'faker/locale/en';
-import subDays from 'date-fns/sub_days';
-import { randomDate } from './utils';
-
 export default (db, { serializeDate }) => {
     let id = 0;
 

examples/simple/src/posts/PostList.js

@@ -48,11 +48,13 @@ const PostFilter = props => (
     </Filter>
 );
 
-const exporter = (posts) => {
+const exporter = posts => {
     const data = posts.map(post => ({
         ...post,
-        backlinks: lodashGet(post, 'backlinks', []).map(backlink => backlink.url),
-    }))
+        backlinks: lodashGet(post, 'backlinks', []).map(
+            backlink => backlink.url
+        ),
+    }));
     return downloadCSV(convertToCSV({ data }), 'posts');
 };
 

examples/simple/src/posts/PostShow.js

@@ -45,7 +45,7 @@ const PostShow = props => (
                         <TextField source="id" />
                         <TextField source="title" />
                         {controllerProps.record &&
-                            controllerProps.record.title ==
+                            controllerProps.record.title ===
                                 'Fusce massa lorem, pulvinar a posuere ut, accumsan ac nisi' && (
                                 <TextField source="teaser" />
                             )}

examples/simple/src/tags/TagList.js

@@ -5,13 +5,11 @@ import {
     List,
     SaveButton,
     ShowButton,
-    TextField,
     TextInput,
 } from 'react-admin';
 import {
     DragPreview,
     IgnoreFormProps,
-    NodeView,
     NodeForm,
     Tree,
     NodeActions,

examples/simple/src/users/UserList.js

@@ -14,10 +14,10 @@ import {
     TextField,
     TextInput,
 } from 'react-admin';
-export const UserIcon = PeopleIcon;
 
 import Aside from './Aside';
 import UserEditEmbedded from './UserEditEmbedded';
+export const UserIcon = PeopleIcon;
 
 const UserFilter = ({ permissions, ...props }) => (
     <Filter {...props}>

package.json

@@ -10,7 +10,7 @@
         "test-e2e-local": "cd cypress && yarn -s start",
         "test": "yarn -s test-unit && yarn -s test-e2e",
         "doc": "cd docs && jekyll server . --watch",
-        "lint": "tslint ./packages/**/src ./examples/**/src ./cypress/**",
+        "lint": "eslint --ext .js,.ts,.tsx \"./packages/**/src/**/*.{js,ts,tsx}\" \"./examples/**/src/**/*.{js,ts,tsx}\" \"./cypress/**/*.{js,ts,tsx}\"",
         "prettier": "prettier --config ./.prettierrc.js --write --list-different \"packages/*/src/**/*.{js,json,ts,tsx,css,md}\" \"examples/*/src/**/*.{js,ts,json,tsx,css,md}\" \"cypress/**/*.{js,ts,json,tsx,css,md}\"",
         "run-simple": "cd examples/simple && yarn -s start",
         "run-tutorial": "yarn run -s build && cd examples/tutorial && yarn -s start",
@@ -36,12 +36,24 @@
         }
     },
     "devDependencies": {
-        "@types/jest": "^23.3.5",
+        "@types/jest": "^24.0.13",
         "@types/react": "^16.4.16",
         "@types/react-redux": "^6.0.9",
         "@types/recompose": "^0.27.0",
+        "@typescript-eslint/eslint-plugin": "^1.9.0",
+        "@typescript-eslint/parser": "^1.9.0",
         "cheerio": "~1.0.0-rc.2",
         "cross-env": "^5.2.0",
+        "eslint": "^5.16.0",
+        "eslint-config-prettier": "^4.3.0",
+        "eslint-plugin-cypress": "^2.2.1",
+        "eslint-plugin-flowtype": "^3.9.1",
+        "eslint-plugin-import": "^2.17.3",
+        "eslint-plugin-jsx-a11y": "^6.2.1",
+        "eslint-plugin-prettier": "^3.1.0",
+        "eslint-plugin-react": "^7.13.0",
+        "eslint-config-react-app": "^4.0.1",    
+        "eslint-plugin-react-hooks": "^1.6.0",
         "express": "~4.16.3",
         "full-icu": "~1.2.1",
         "husky": "^2.3.0",
@@ -53,10 +65,6 @@
         "prettier": "~1.17.1",
         "raf": "~3.4.0",
         "ts-jest": "^23.10.5",
-        "tslint": "^5.12.1",
-        "tslint-config-prettier": "^1.18.0",
-        "tslint-plugin-prettier": "^2.0.1",
-        "tslint-react": "^3.6.0",
         "wait-on": "^2.1.0"
     },
     "workspaces": [

packages/ra-core/src/actions/dataActions/crudUpdateMany.ts

@@ -1,4 +1,4 @@
-import { Identifier, Record } from '../../types';
+import { Identifier } from '../../types';
 import { UPDATE_MANY } from '../../dataFetchActions';
 import { FETCH_END, FETCH_ERROR } from '../fetchActions';
 import { NotificationSideEffect, RefreshSideEffect } from '../../sideEffect';

packages/ra-core/src/controller/field/ReferenceArrayFieldController.tsx

@@ -96,8 +96,7 @@ export class UnconnectedReferenceArrayFieldController extends Component<Props> {
         const referenceBasePath = basePath.replace(resource, reference); // FIXME obviously very weak
 
         return children({
-            // tslint:disable-next-line:triple-equals
-            loadedOnce: data != undefined,
+            loadedOnce: data != undefined, // eslint-disable-line eqeqeq
             ids,
             data,
             referenceBasePath,

packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx

@@ -446,13 +446,12 @@ describe('<ReferenceArrayInputController />', () => {
                 crudGetMany={crudGetMany}
             />
         );
-        expect(
-            crudGetMany.mock.calls[0]
-        ).toEqual([defaultProps.reference, [5, 6]]);
+        expect(crudGetMany.mock.calls[0]).toEqual([
+            defaultProps.reference,
+            [5, 6],
+        ]);
         wrapper.setProps({ input: { value: [6] } });
-        expect(
-            crudGetMany.mock.calls.length
-        ).toEqual(1);
+        expect(crudGetMany.mock.calls.length).toEqual(1);
     });
 
     it('should only call crudGetOne and not crudGetMatching when only the record changes', () => {

packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx

@@ -140,7 +140,9 @@ interface EnhancedProps {
  *     <SelectArrayInput optionText="name" />
  * </ReferenceArrayInput>
  */
-export class UnconnectedReferenceArrayInputController extends Component<Props & EnhancedProps> {
+export class UnconnectedReferenceArrayInputController extends Component<
+    Props & EnhancedProps
+> {
     public static defaultProps = {
         allowEmpty: false,
         filter: {},
@@ -232,7 +234,10 @@ export class UnconnectedReferenceArrayInputController extends Component<Props &
                     'The value of ReferenceArrayInput should be an array'
                 );
             }
-            const idsToFetch = difference(ids, get(currentProps, 'input.value', []));
+            const idsToFetch = difference(
+                ids,
+                get(currentProps, 'input.value', [])
+            );
             if (idsToFetch.length) crudGetMany(reference, idsToFetch);
         }
     };

packages/ra-core/src/form/FormDataConsumer.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode, SFC } from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { getFormValues, FormName } from 'redux-form';
 import get from 'lodash/get';

packages/ra-core/src/form/validate.ts

@@ -170,7 +170,6 @@ export const maxValue = memoize(
  * const ageValidators = [number('Must be a number')];
  * <TextInput name="age" validate={ageValidators} />
  */
-// tslint:disable-next-line:variable-name
 export const number = memoize(
     (message = 'ra.validation.number') => (value, values, props) =>
         !isEmpty(value) && isNaN(Number(value))

packages/ra-core/src/i18n/TranslationProvider.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactElement, createContext, Component } from 'react';
+import React, { Children, ReactElement, Component } from 'react';
 import Polyglot from 'node-polyglot';
 import { connect, MapStateToProps } from 'react-redux';
 import defaultMessages from 'ra-language-english';