feat(eslint-config): add order rule in import

* refactor: added eslint-plugin-import

* refactor: disable some rules for muiComponents

* fix: fixed import

Author: priscilawebdev

.eslintignore

@@ -3,6 +3,7 @@ coverage/
 static/
 .github/
 .circleci/
+build
 *.md
 *.lock
 *.yaml

.eslintrc

@@ -5,7 +5,8 @@
     "plugin:jest/recommended",
     "plugin:prettier/recommended",
     "plugin:verdaccio/recommended",
-    "plugin:jsx-a11y/recommended"
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/typescript"
   ],
   "plugins": [
     "react",
@@ -14,7 +15,8 @@
     "verdaccio",
     "jsx-a11y",
     "codeceptjs",
-    "react-hooks"
+    "react-hooks",
+    "import"
   ],
   "settings": {
     "react": {
@@ -28,6 +30,7 @@
     }
   },
   "rules": {
+    "import/order": ["error", {"newlines-between": "always"}],
     "babel/no-invalid-this": 0,
     "no-invalid-this": 0,
     "no-console": ["error", { "allow": ["warn", "error"] }],

package.json

@@ -49,6 +49,7 @@
     "enzyme-to-json": "3.4.0",
     "eslint": "6.5.1",
     "eslint-plugin-codeceptjs": "1.1.0",
+    "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-prettier": "3.1.0",
     "eslint-plugin-react": "7.14.3",
@@ -148,7 +149,7 @@
     }
   ],
   "scripts": {
-    "type-check": "tsc --noEmit",
+    "type-check": "tsc --noEmit --pretty",
     "type-check:watch": "npm run type-check -- --watch",
     "release": "standard-version -a",
     "test:clean": "npx jest --clearCache",

src/App/App.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import storage from '../utils/storage';
-import App from './App';
 
+import storage from '../utils/storage';
 import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
 
+import App from './App';
+
 jest.mock('../utils/storage', () => {
   class LocalStorageMock {
     private store: object;

src/App/App.tsx

@@ -3,7 +3,6 @@ import isNil from 'lodash/isNil';
 
 import storage from '../utils/storage';
 import { makeLogin, isTokenExpire } from '../utils/login';
-
 import Loading from '../components/Loading';
 import LoginModal from '../components/Login';
 import Header from '../components/Header';
@@ -14,7 +13,7 @@ import 'typeface-roboto/index.css';
 import '../utils/styles/global';
 import 'normalize.css';
 import Footer from '../components/Footer';
-import { FormError } from 'src/components/Login/Login';
+import { FormError } from '../components/Login/Login';
 
 export const AppContext = React.createContext<{}>({});
 export const AppContextProvider = AppContext.Provider;

src/App/styles.ts

@@ -1,4 +1,5 @@
 import { css } from 'emotion';
+
 import colors from '../utils/styles/colors';
 
 export const alertError = css({

src/components/ActionBar/ActionBar.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+
 import { ActionBar } from './ActionBar';
 
 const mockPackageMeta: jest.Mock = jest.fn(() => ({

src/components/ActionBar/ActionBar.tsx

@@ -1,16 +1,16 @@
 import React, { Component, ReactElement } from 'react';
-
 import BugReportIcon from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
 import List from '@material-ui/core/List';
 
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
-import { Fab, ActionListItem } from './styles';
 import { isURL, extractFileName, downloadFile } from '../../utils/url';
 import api from '../../utils/api';
 import Tooltip from '../../muiComponents/Tooltip';
 
+import { Fab, ActionListItem } from './styles';
+
 export interface Action {
   icon: string;
   title: string;

src/components/Author/Author.tsx

@@ -1,13 +1,12 @@
 import React, { FC, useContext } from 'react';
-
 import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
-import { Heading, AuthorListItem, AuthorListItemText } from './styles';
 import { isEmail } from '../../utils/url';
-
 import Avatar from '../../muiComponents/Avatar';
 
+import { Heading, AuthorListItem, AuthorListItemText } from './styles';
+
 const Author: FC = () => {
   const { packageMeta } = useContext(DetailContext);
 

src/components/Author/styles.ts

@@ -1,9 +1,10 @@
 import styled from 'react-emotion';
 import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
-import { fontWeight } from '../../utils/styles/sizes';
 import ListItemText from '@material-ui/core/ListItemText';
 
+import { fontWeight } from '../../utils/styles/sizes';
+
 export const Heading = styled(Typography)({
   '&&': {
     fontWeight: fontWeight.bold,