Merge pull request #86 from contentful/eslint-configuration

build: Used ESLint instead of TSLint
contentful · Feb 13, 2019 · a86888e · a86888e
2 parents 5c8dcfc + af63780
commit a86888e
Show file tree

Hide file tree

Showing 27 changed files with 532 additions and 691 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc b/.eslintrc
diff --git a/package.json b/package.json
@@ -7,18 +7,20 @@
     "@commitlint/config-conventional": "^7.5.0",
     "babel-eslint": "^10.0.1",
     "commitizen": "^3.0.4",
-    "eslint": "^4.9.0",
-    "eslint-config-airbnb": "16.1.0",
-    "eslint-config-dev": "^2.0.0",
-    "eslint-config-prettier": "^4.0.0",
-    "eslint-plugin-import": "^2.15.0",
-    "eslint-plugin-jsx-a11y": "^6.2.0",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.4",
     "husky": "^1.3.1",
     "lerna": "^3.11.0",
-    "prettier": "^1.16.1",
-    "pretty-quick": "^1.8.0"
+    "prettier": "^1.16.4",
+    "pretty-quick": "^1.10.0",
+    "@typescript-eslint/eslint-plugin": "1.3.0",
+    "@typescript-eslint/parser": "1.3.0",
+    "eslint": "5.13.0",
+    "eslint-config-dev": "2.0.0",
+    "eslint-config-prettier": "4.0.0",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-react": "7.12.4",
+    "eslint-plugin-jest": "22.2.2"
   },
   "scripts": {
     "commit": "git-cz",
@@ -38,7 +40,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint && yarn pretty-quick --staged",
+      "pre-commit": "yarn pretty-quick --staged",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
       "pre-push": "yarn lint && yarn type-check && yarn test"
     }

diff --git a/packages/forma-36-react-components/.eslintignore b/packages/forma-36-react-components/.eslintignore
@@ -0,0 +1,2 @@
+/node_modules/
+/dist/
diff --git a/packages/forma-36-react-components/.eslintrc.js b/packages/forma-36-react-components/.eslintrc.js
@@ -0,0 +1,55 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+    'plugin:react/recommended',
+    'plugin:jsx-a11y/recommended',
+    'prettier/react',
+    'plugin:jest/recommended',
+    'plugin:jest/style',
+  ],
+  parserOptions: {
+    ecmaVersion: 7,
+    project: 'tsconfig.json',
+    sourceType: 'module',
+  },
+  env: {
+    jest: true,
+    browser: true,
+    node: true,
+  },
+  settings: {
+    react: {
+      version: '16.3.0',
+    },
+  },
+  rules: {
+    'react/prefer-stateless-function': [0, { ignorePureComponents: true }],
+    'react/jsx-filename-extension': { extensions: ['.js', '.jsx'] },
+    'react/forbid-prop-types': 0,
+    'react/destructuring-assignment': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/sort-comp': 0,
+    'react/jsx-wrap-multilines': 0,
+    'function-paren-newline': 0,
+    'react/button-has-type': 'error',
+    'react/jsx-no-target-blank': 'error',
+    'react/jsx-no-bind': ['error', { allowArrowFunctions: true }],
+    'react/no-access-state-in-setstate': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/camelcase': ['warn', { properties: 'never' }],
+    '@typescript-eslint/explicit-member-accessibility': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'after-used',
+        ignoreRestSiblings: true,
+      },
+    ],
+    '@typescript-eslint/no-for-in-array': 'error',
+    '@typescript-eslint/no-var-requires': 'off',
+  },
+};
diff --git a/packages/forma-36-react-components/package.json b/packages/forma-36-react-components/package.json
@@ -56,13 +56,6 @@
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.8.0",
     "enzyme-to-json": "^3.3.5",
-    "eslint": "^5.12.1",
-    "eslint-config-airbnb": "17.1.0",
-    "eslint-config-prettier": "^4.0.0",
-    "eslint-plugin-import": "^2.15.0",
-    "eslint-plugin-jsx-a11y": "^6.2.0",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.4",
     "file-loader": "^3.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.0.0",
@@ -77,7 +70,6 @@
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.2.0",
     "postcss-url": "^8.0.0",
-    "pretty-quick": "^1.4.1",
     "react": "^16.6.3",
     "react-docgen-typescript-loader": "3.0.1",
     "react-dom": "^16.6.3",
@@ -94,11 +86,7 @@
     "storybook-host": "^5.0.3",
     "style-loader": "^0.23.1",
     "travis-deploy-once": "^4.4.1",
-    "tslint": "5.12.1",
-    "tslint-config-airbnb": "5.11.1",
-    "tslint-config-prettier": "1.17.0",
-    "tslint-react": "3.6.0",
-    "typescript": "3.2.4",
+    "typescript": "3.3.3",
     "webpack": "4.29.0",
     "webpack-cli": "^3.2.1"
   },
@@ -129,9 +117,8 @@
     "build": "yarn build:clean && yarn build:scripts && yarn build:styles && yarn build:types && yarn build:umd && yarn size && yarn build:post-clean",
     "size": "size-limit",
     "generate": "yarn plop --plopfile ./tools/plopfile.js",
-    "eslint": "eslint src test tools",
-    "tslint": "tslint -p tsconfig.json -t verbose '**/*.{ts,tsx}'",
-    "lint": "yarn eslint && yarn tslint",
+    "eslint": "eslint ./",
+    "lint": "yarn eslint",
     "add-component": "yarn generate component",
     "add-documentation": "yarn generate documentation",
     "prepublishOnly": "yarn lint && yarn test && yarn build",

diff --git a/packages/forma-36-react-components/src/components/Asset/Asset.stories.tsx b/packages/forma-36-react-components/src/components/Asset/Asset.stories.tsx
@@ -4,7 +4,7 @@ import { text, select } from '@storybook/addon-knobs';
 import { host } from 'storybook-host';
 import { withInfo } from '@storybook/addon-info';
 
-import Asset, { types } from './Asset';
+import { Asset, types } from './Asset';
 
 storiesOf('Components|Asset', module)
   .addDecorator(

diff --git a/packages/forma-36-react-components/src/components/Asset/Asset.test.tsx b/packages/forma-36-react-components/src/components/Asset/Asset.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { axe } from 'jest-axe';
-import Asset from './Asset';
+import { Asset } from './Asset';
 
 it('renders the component', () => {
   const output = shallow(

diff --git a/packages/forma-36-react-components/src/components/Dropdown/Dropdown/Dropdown.test.js b/packages/forma-36-react-components/src/components/Dropdown/Dropdown/Dropdown.test.js
@@ -53,7 +53,7 @@ it('toggleElement dispactions onClick event', () => {
   );
 
   output.find('Button').simulate('click');
-  expect(onClickFunc).toBeCalled();
+  expect(onClickFunc).toHaveBeenCalled();
 });
 
 it('renders the component with a submenu', () => {

diff --git a/...rma-36-react-components/src/components/Dropdown/DropdownListItem/DropdownListItem.test.js b/...rma-36-react-components/src/components/Dropdown/DropdownListItem/DropdownListItem.test.js
@@ -30,12 +30,6 @@ it('renders the component as disabled', () => {
   expect(output).toMatchSnapshot();
 });
 
-it('renders the component as disabled', () => {
-  const output = shallow(<DropdownListItem isDisabled>entry</DropdownListItem>);
-
-  expect(output).toMatchSnapshot();
-});
-
 it('calls onClick', () => {
   const mockOnClick = jest.fn();
   const dropDownItem = mount(

diff --git a/...ents/src/components/Dropdown/DropdownListItem/__snapshots__/DropdownListItem.test.js.snap b/...ents/src/components/Dropdown/DropdownListItem/__snapshots__/DropdownListItem.test.js.snap
@@ -27,15 +27,6 @@ exports[`renders the component as disabled 1`] = `
 </li>
 `;
 
-exports[`renders the component as disabled 2`] = `
-<li
-  className="DropdownListItem DropdownListItem--disabled"
-  data-test-id="cf-ui-dropdown-list-item"
->
-  entry
-</li>
-`;
-
 exports[`renders the component with an additional class name 1`] = `
 <li
   className="DropdownListItem my-extra-class"

diff --git a/packages/forma-36-react-components/src/components/Form/Form/Form.test.js b/packages/forma-36-react-components/src/components/Form/Form/Form.test.js
@@ -55,7 +55,7 @@ it('renders the component with condensed spacing', () => {
   expect(output).toMatchSnapshot();
 });
 
-it('renders the component with condensed spacing', () => {
+it('renders the component with condensed spacing (prevent default)', () => {
   const mockOnSubmit = jest.fn();
   const output = shallow(
     <Form extraClassNames="my-extra-class" onSubmit={mockOnSubmit}>

diff --git a/packages/forma-36-react-components/src/components/InViewport/InViewport.test.js b/packages/forma-36-react-components/src/components/InViewport/InViewport.test.js
@@ -49,7 +49,7 @@ it('dispatches onOverflowTop', () => {
   expect(onOverflowTopMock).toHaveBeenCalled();
 });
 
-it('dispatches onOverflowTop', () => {
+it('dispatches onOverflowLeft', () => {
   const onOverflowLeftMock = jest.fn();
   const output = mount(
     <InViewport

diff --git a/...a-36-react-components/src/components/Skeleton/SkeletonContainer/SkeletonContainer.test.js b/...a-36-react-components/src/components/Skeleton/SkeletonContainer/SkeletonContainer.test.js
@@ -74,16 +74,6 @@ it('renders the component with a custom aspect ratio', () => {
   expect(output).toMatchSnapshot();
 });
 
-it('renders the component with a custom aspect ratio', () => {
-  const output = shallow(
-    <SkeletonContainer preserveAspectRatio="xMidYMin slice">
-      <SkeletonBodyText />
-    </SkeletonContainer>,
-  );
-
-  expect(output).toMatchSnapshot();
-});
-
 it('renders the component with a custom clip id', () => {
   const output = shallow(
     <SkeletonContainer clipId="some-clip-id">

diff --git a/...ts/src/components/Skeleton/SkeletonContainer/__snapshots__/SkeletonContainer.test.js.snap b/...ts/src/components/Skeleton/SkeletonContainer/__snapshots__/SkeletonContainer.test.js.snap
@@ -332,89 +332,6 @@ exports[`renders the component with a custom aspect ratio 1`] = `
 </svg>
 `;
 
-exports[`renders the component with a custom aspect ratio 2`] = `
-<svg
-  aria-label="Loading component..."
-  className="SkeletonContainer"
-  height="100%"
-  preserveAspectRatio="xMidYMin slice"
-  role="img"
-  width="100%"
->
-  <title>
-    Loading component...
-  </title>
-  <rect
-    clipPath="url(#cf-ui-skeleton-clip-id)"
-    height="100%"
-    style={
-      Object {
-        "fill": "url(#cf-ui-skeleton-clip-gradient)",
-      }
-    }
-    width="100%"
-    x="0"
-    y="0"
-  />
-  <defs>
-    <clipPath
-      id="cf-ui-skeleton-clip-id"
-    >
-      <SkeletonBodyText
-        lineHeight={16}
-        marginBottom={8}
-        numberOfLines={2}
-        offsetLeft={0}
-        offsetTop={0}
-      />
-    </clipPath>
-    <linearGradient
-      id="cf-ui-skeleton-clip-gradient"
-    >
-      <stop
-        offset="0%"
-        stopColor="#e5ebed"
-        stopOpacity={1}
-      >
-        <animate
-          attributeName="stop-color"
-          dur="2s"
-          id="animation1"
-          repeatCount="indefinite"
-          values="#e5ebed; #f7f9fa; #e5ebed"
-        />
-      </stop>
-      <stop
-        offset="50%"
-        stopColor="#f7f9fa"
-        stopOpacity={1}
-      >
-        <animate
-          attributeName="stop-color"
-          begin="animation1.begin+0.25s"
-          dur="2s"
-          repeatCount="indefinite"
-          values="#e5ebed; #f7f9fa; #e5ebed"
-        />
-      </stop>
-      <stop
-        offset="100%"
-        stopColor="#e5ebed"
-        stopOpacity={1}
-      >
-        <animate
-          attributeName="stop-color"
-          begin="animation1.begin+0.5s"
-          dur="2s"
-          repeatCount="indefinite"
-          values="#e5ebed; #f7f9fa; #e5ebed"
-        />
-      </stop>
-    </linearGradient>
-  </defs>
-</svg>
-`;
-
 exports[`renders the component with a custom clip id 1`] = `
 <svg
   aria-label="Loading component..."

diff --git a/packages/forma-36-react-components/src/components/TextInput/TextInput.test.js b/packages/forma-36-react-components/src/components/TextInput/TextInput.test.js
@@ -77,7 +77,7 @@ it('renders the component with small width', () => {
   expect(output).toMatchSnapshot();
 });
 
-it('renders the component with small width', () => {
+it('renders the component with maxLength', () => {
   const output = shallow(
     <TextInput id="someInput" name="userEmail" maxLength={10} />,
   );