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

* refactor: added eslint-plugin-import

* refactor: disable some rules for muiComponents

* fix: fixed import

.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,

src/components/AutoComplete/AutoComplete.tsx

@@ -6,6 +6,7 @@ import parse from 'autosuggest-highlight/parse';
 import MenuItem from '@material-ui/core/MenuItem';
 
 import { fontWeight } from '../../utils/styles/sizes';
+
 import { Wrapper, InputField, SuggestionContainer } from './styles';
 
 interface Props {
@@ -27,10 +28,13 @@ interface Props {
   onBlur?: (event: KeyboardEvent<HTMLInputElement>) => void;
 }
 
+/* eslint-disable react/jsx-sort-props  */
+/* eslint-disable verdaccio/jsx-spread */
 const renderInputComponent = (inputProps): JSX.Element => {
   const { ref, startAdornment, disableUnderline, onKeyDown, ...others } = inputProps;
   return (
     <InputField
+      fullWidth={true}
       InputProps={{
         inputRef: node => {
           ref(node);
@@ -39,7 +43,6 @@ const renderInputComponent = (inputProps): JSX.Element => {
         disableUnderline,
         onKeyDown,
       }}
-      fullWidth={true}
       {...others}
     />
   );

src/components/AvatarTooltip/AvatarTooltip.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
 import { isEmail } from '../../utils/url';
-
 import Tooltip from '../../muiComponents/Tooltip';
 import Avatar from '../../muiComponents/Avatar';
 

src/components/CopyToClipBoard/styles.ts

@@ -1,6 +1,7 @@
-import IconButton from '../../muiComponents/IconButton';
 import styled from 'react-emotion';
 
+import IconButton from '../../muiComponents/IconButton';
+
 export const ClipBoardCopy = styled('div')({
   '&&': {
     display: 'flex',

src/components/Dependencies/Dependencies.tsx

@@ -3,9 +3,9 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
 import CardContent from '@material-ui/core/CardContent';
 
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
+import NoItems from '../NoItems';
 
 import { CardWrap, Heading, Tags, Tag } from './styles';
-import NoItems from '../NoItems';
 
 type DepDetailProps = {
   name: string;

src/components/Dependencies/styles.ts

@@ -2,6 +2,7 @@ import styled from 'react-emotion';
 import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
 import Chip from '@material-ui/core/Chip';
+
 import { fontWeight } from '../../utils/styles/sizes';
 
 export const CardWrap = styled(Card)({

src/components/DetailContainer/DetailContainer.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { render } from '@testing-library/react';
 
 import DetailContainer from './DetailContainer';

src/components/DetailContainer/DetailContainerContentReadme.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { preventXSS } from '../../utils/sec-utils';
-
 import Readme from '../Readme';
 
 interface Props {

src/components/DetailSidebar/DetailSidebar.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement } from 'react';
-
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import List from '@material-ui/core/List';
@@ -11,7 +10,6 @@ import Dist from '../Dist/Dist';
 import Engine from '../Engines/Engines';
 import Install from '../Install';
 import Repository from '../Repository/Repository';
-
 import { DetailContext } from '../../pages/Version';
 
 import { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles';

src/components/Developers/Developers.test.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
+
+import { DetailContextProvider } from '../../pages/Version';
+
 import Developers, { DevelopersType } from './Developers';
 import { Fab } from './styles';
-import { DetailContextProvider } from '../../pages/Version';
 
 describe('test Developers', () => {
   const packageMeta = {

src/components/Developers/Developers.tsx

@@ -3,6 +3,7 @@ import Add from '@material-ui/icons/Add';
 
 import { DetailContext } from '../../pages/Version';
 import { AvatarTooltip } from '../AvatarTooltip';
+
 import { Details, Heading, Content, Fab } from './styles';
 
 export type DevelopersType = 'contributors' | 'maintainers';

src/components/Dist/Dist.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import { DetailContext } from '../../pages/Version';
+
 import Dist from './Dist';
 
 const withDistComponent = (packageMeta: React.ContextType<typeof DetailContext>['packageMeta']): JSX.Element => (

src/components/Dist/Dist.tsx

@@ -1,12 +1,12 @@
 import React, { FC, useContext } from 'react';
-
 import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
-import { Heading, DistListItem, DistChips } from './styles';
 import fileSizeSI from '../../utils/file-size';
 import { formatLicense } from '../../utils/package';
 
+import { Heading, DistListItem, DistChips } from './styles';
+
 const DistChip: FC<{ name: string }> = ({ name, children }) =>
   children ? (
     <DistChips

src/components/Engines/Engines.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+
 import Engine from './Engines';
 
 jest.mock('./img/node.png', () => '');

src/components/Engines/Engines.tsx

@@ -1,17 +1,15 @@
 import React, { Component, ReactElement } from 'react';
-
 import Grid from '@material-ui/core/Grid';
 import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version';
-import { Heading, EngineListItem } from './styles';
-
 import Avatar from '../../muiComponents/Avatar';
+import npm from '../Install/img/npm.svg';
 
+import { Heading, EngineListItem } from './styles';
 // @ts-ignore
 import node from './img/node.png';
-import npm from '../Install/img/npm.svg';
 
 const ICONS = {
   'node-JS': <Avatar src={node} />,

src/components/Engines/styles.ts

@@ -1,6 +1,7 @@
 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';
 
 export const Heading = styled(Typography)({

src/components/Footer/Footer.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
 import { goToVerdaccioWebsite } from '../../utils/windows';
 
+import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
+
 const renderTooltip = (): JSX.Element => (
   <ToolTip>
     <Earth name="earth" size="md" />

src/components/Footer/styles.ts

@@ -1,4 +1,5 @@
 import styled, { css } from 'react-emotion';
+
 import mq from '../../utils/styles/media';
 import Icon from '../Icon/Icon';
 import colors from '../../utils/styles/colors';

src/components/Header/Header.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { shallow } from 'enzyme';
+
 import Header from './Header';
 
 describe('<Header /> component with logged in state', () => {

src/components/Header/Header.tsx

@@ -1,7 +1,6 @@
 import React, { SyntheticEvent, Component, Fragment, ReactElement } from 'react';
 import { Link } from 'react-router-dom';
 import { css } from 'emotion';
-
 import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 import Info from '@material-ui/icons/Info';
@@ -15,7 +14,6 @@ import RegistryInfoDialog from '../RegistryInfoDialog/RegistryInfoDialog';
 import Label from '../Label/Label';
 import Search from '../Search/Search';
 import RegistryInfoContent from '../RegistryInfoContent/RegistryInfoContent';
-
 import IconButton from '../../muiComponents/IconButton';
 import Tooltip from '../../muiComponents/Tooltip';
 import Button from '../../muiComponents/Button';

src/components/Header/styles.ts

@@ -4,7 +4,6 @@ import Toolbar from '@material-ui/core/Toolbar';
 
 import colors from '../../utils/styles/colors';
 import mq from '../../utils/styles/media';
-
 import IconButton from '../../muiComponents/IconButton';
 import ExternalLink from '../Link';
 

src/components/Help/Help.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+
 import Help from './Help';
 
 describe('<Help /> component', () => {

src/components/Icon/Icon.tsx

@@ -3,7 +3,6 @@ import capitalize from 'lodash/capitalize';
 import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 
 import { Svg, Img, ImgWrapper } from './styles';
-
 import brazil from './img/brazil.svg';
 import china from './img/china.svg';
 import india from './img/india.svg';

src/components/Install/Install.test.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { DetailContext, DetailContextProps } from '../../pages/Version';
-import data from './__partials__/data.json';
 
+import data from './__partials__/data.json';
 import Install from './Install';
 
 const detailContextValue: Partial<DetailContextProps> = {

src/components/Label/Label.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'react-emotion';
+
 import { fontWeight } from '../../utils/styles/sizes';
 
 interface Props {

src/components/Layout/Layout.tsx

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

src/components/Login/Login.tsx

@@ -11,9 +11,10 @@ import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import { css } from 'emotion';
 
-import * as classes from './styles';
 import Button from '../../muiComponents/Button';
 
+import * as classes from './styles';
+
 interface FormFields {
   required: boolean;
   pristine: boolean;

src/components/Login/styles.ts

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

src/components/Logo/Logo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-
 import styled from 'react-emotion';
+
 import logo from './img/logo.svg';
 
 export enum Size {

src/components/NoItems/Noitems.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+
 import NoItems from './NoItems';
 
 console.error = jest.fn();

src/components/NotFound/Notfound.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { shallow } from 'enzyme';
+
 import NotFound from './NotFound';
 
 console.error = jest.fn();

src/components/Package/Package.test.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Package from './Package';
+
 import Tag from '../Tag';
+
+import Package from './Package';
 import { WrapperLink, Description, OverviewItem } from './styles';
 
 /**

src/components/Package/Package.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-
 import BugReport from '@material-ui/icons/BugReport';
 import Grid from '@material-ui/core/Grid';
 import HomeIcon from '@material-ui/icons/Home';
 import ListItem from '@material-ui/core/ListItem';
-
 import { PackageMetaInterface, Author as PackageAuthor } from 'types/packageMeta';
+
 import Tag from '../Tag';
 import fileSizeSI from '../../utils/file-size';
 import { formatDate, formatDateDistance } from '../../utils/package';
 import Tooltip from '../../muiComponents/Tooltip';
+import { isURL } from '../../utils/url';
+
 import {
   Author,
   Avatar,
@@ -27,7 +28,6 @@ import {
   Text,
   WrapperLink,
 } from './styles';
-import { isURL } from '../../utils/url';
 
 interface Bugs {
   url: string;

src/components/Package/styles.ts

@@ -1,6 +1,5 @@
 import styled from 'react-emotion';
 import { Link } from 'react-router-dom';
-
 import Grid from '@material-ui/core/Grid';
 import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';

src/components/PackageList/PackageList.tsx

@@ -1,5 +1,4 @@
 import React, { Fragment, ReactElement } from 'react';
-
 import Divider from '@material-ui/core/Divider';
 
 import Package from '../Package';

src/components/PackageList/Packagelist.test.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import PackageList from './PackageList';
-import Help from '../Help';
 import { BrowserRouter } from 'react-router-dom';
 
+import Help from '../Help';
+
+import PackageList from './PackageList';
+
 describe('<PackageList /> component', () => {
   test('should load the component with no packages', () => {
     const props = {

src/components/PackageList/styles.ts

@@ -1,4 +1,5 @@
 import { css } from 'emotion';
+
 import { fontWeight, fontSize } from '../../utils/styles/sizes';
 
 export const listTitle = css({

src/components/Readme/Readme.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+
 import Readme from './Readme';
 
 describe('<Readme /> component', () => {

src/components/RegistryInfoContent/RegistryInfoContent.tsx

@@ -1,16 +1,16 @@
 import React, { Component } from 'react';
 import { css } from 'emotion';
-
-import { Props, State } from './types';
-import { CommandContainer } from './styles';
-import CopyToClipBoard from '../CopyToClipBoard';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 
+import CopyToClipBoard from '../CopyToClipBoard';
 import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
 import { NODE_MANAGER } from '../../utils/constants';
 
+import { CommandContainer } from './styles';
+import { Props, State } from './types';
+
 /* eslint react/prop-types:0 */
 function TabContainer({ children }): JSX.Element {
   return (

src/components/RegistryInfoDialog/RegistryInfoDialog.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
-import { Title, Content } from './styles';
 
-import { Props } from './types';
 import Button from '../../muiComponents/Button';
 
+import { Title, Content } from './styles';
+import { Props } from './types';
+
 const LABEL = 'CLOSE';
 
 const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => (

src/components/RegistryInfoDialog/styles.ts

@@ -1,6 +1,7 @@
 import styled from 'react-emotion';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
+
 import colors from '../../utils/styles/colors';
 import { fontSize } from '../../utils/styles/sizes';
 

src/components/Repository/Repository.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+
 import Repository from './Repository';
 
 jest.mock('./img/git.png', () => '');

src/components/Repository/Repository.tsx

@@ -1,17 +1,15 @@
 /* eslint react/jsx-max-depth: 0 */
 
-import React, { Component, Fragment, ReactElement } from 'react';
 import List from '@material-ui/core/List';
-
-import { DetailContextConsumer } from '../../pages/Version';
-import CopyToClipBoard from '../CopyToClipBoard';
-
-import { Heading, GithubLink, RepositoryListItem, RepositoryListItemText } from './styles';
-
-import git from './img/git.png';
-import { isURL } from '../../utils/url';
+import React, { Component, Fragment, ReactElement } from 'react';
 
 import Avatar from '../../muiComponents/Avatar';
+import { DetailContextConsumer } from '../../pages/Version';
+import { isURL } from '../../utils/url';
+import CopyToClipBoard from '../CopyToClipBoard';
+
+import git from './img/git.png';
+import { GithubLink, Heading, RepositoryListItem, RepositoryListItemText } from './styles';
 
 class Repository extends Component {
   public render(): ReactElement<HTMLElement> {

src/components/Repository/styles.ts

@@ -2,11 +2,11 @@ import styled from 'react-emotion';
 import Grid from '@material-ui/core/Grid';
 import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
+import ListItemText from '@material-ui/core/ListItemText';
 
 import Github from '../../icons/GitHub';
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
-import ListItemText from '@material-ui/core/ListItemText';
 
 export const Heading = styled(Typography)({
   '&&': {

src/components/Search/Search.tsx

@@ -1,7 +1,6 @@
 import React, { KeyboardEvent, Component, ReactElement } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { css } from 'emotion';
-
 import { default as IconSearch } from '@material-ui/icons/Search';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import debounce from 'lodash/debounce';

src/components/UpLinks/UpLinks.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 
 import { DetailContext } from '../../pages/Version';
+
 import UpLinks from './UpLinks';
 
 describe('<UpLinks /> component', () => {

src/components/UpLinks/styles.ts

@@ -1,6 +1,7 @@
 import styled from 'react-emotion';
 import Typography from '@material-ui/core/Typography';
 import { default as MuiListItemText } from '@material-ui/core/ListItemText';
+
 import { fontWeight } from '../../utils/styles/sizes';
 
 export const Heading = styled(Typography)({

src/components/Versions/Versions.test.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router';
+import { render, cleanup } from '@testing-library/react';
+
 import { DetailContext, DetailContextProps } from '../../pages/Version';
 
 import Versions, { LABEL_CURRENT_TAGS, LABEL_VERSION_HISTORY } from './Versions';
 import data from './__partials__/data.json';
 
-import { render, cleanup } from '@testing-library/react';
-
 const detailContextValue: Partial<DetailContextProps> = {
   packageName: 'foo',
   packageMeta: data,

src/components/Versions/Versions.tsx

@@ -1,14 +1,12 @@
 import React, { useContext } from 'react';
 
 import { DetailContext } from '../../pages/Version';
+import { DIST_TAGS } from '../../../lib/constants';
 
 import { Heading } from './styles';
-
 import VersionsTagList from './VersionsTagList';
 import VersionsHistoryList from './VersionsHistoryList';
 
-import { DIST_TAGS } from '../../../lib/constants';
-
 export const NOT_AVAILABLE = 'Not available';
 export const LABEL_CURRENT_TAGS = 'Current Tags';
 export const LABEL_VERSION_HISTORY = 'Version History';

src/components/Versions/VersionsHistoryList.tsx

@@ -3,11 +3,12 @@ import List from '@material-ui/core/List';
 import Link from '@material-ui/core/Link';
 import ListItem from '@material-ui/core/ListItem';
 import { Link as RouterLink } from 'react-router-dom';
-import { Spacer, ListItemText } from './styles';
 
 import { Versions, Time } from '../../../types/packageMeta';
 import { formatDateDistance } from '../../utils/package';
 
+import { Spacer, ListItemText } from './styles';
+
 export const NOT_AVAILABLE = 'Not available';
 
 interface Props {

src/components/Versions/VersionsTagList.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import { Spacer, ListItemText } from './styles';
 
 import { DistTags } from '../../../types/packageMeta';
 
+import { Spacer, ListItemText } from './styles';
+
 interface Props {
   tags: DistTags;
 }

src/components/Versions/styles.ts

@@ -1,6 +1,7 @@
 import styled from 'react-emotion';
 import Typography from '@material-ui/core/Typography';
 import { default as MuiListItemText } from '@material-ui/core/ListItemText';
+
 import { fontWeight } from '../../utils/styles/sizes';
 
 export const Heading = styled(Typography)({

src/muiComponents/.eslintrc

@@ -0,0 +1,8 @@
+{
+    "rules": {
+      "verdaccio/jsx-spread": 0,
+      "react/display-name": 0,
+      "react/jsx-sort-props": 0
+    }
+  }
+  

src/muiComponents/Avatar/Avatar.tsx

@@ -4,8 +4,6 @@ import { default as MaterialUIAvatar, AvatarProps } from '@material-ui/core/Avat
 // The default element type of MUI's Avatar is 'div' and we don't allow the change of this prop
 type AvatarRef = HTMLElementTagNameMap['div'];
 
-/* eslint-disable verdaccio/jsx-spread */
-// eslint-disable-next-line react/display-name
 const Avatar = forwardRef<AvatarRef, AvatarProps>(function Avatar(props, ref) {
   return <MaterialUIAvatar {...props} ref={ref} />;
 });

src/muiComponents/Button/Button.tsx

@@ -3,8 +3,6 @@ import { default as MaterialUIButton, ButtonProps } from '@material-ui/core/Butt
 
 type ButtonRef = HTMLElementTagNameMap['button'];
 
-/* eslint-disable verdaccio/jsx-spread */
-// eslint-disable-next-line react/display-name
 const Button = forwardRef<ButtonRef, ButtonProps>(function Button(props, ref) {
   return <MaterialUIButton {...props} ref={ref} />;
 });

src/muiComponents/IconButton/IconButton.tsx

@@ -3,8 +3,6 @@ import { default as MaterialUIIconButton, IconButtonProps } from '@material-ui/c
 
 type IconButtonRef = HTMLElementTagNameMap['button'];
 
-/* eslint-disable verdaccio/jsx-spread */
-// eslint-disable-next-line react/display-name
 const IconButton = forwardRef<IconButtonRef, IconButtonProps>(function IconButton(props, ref) {
   return <MaterialUIIconButton {...props} ref={ref} />;
 });

src/muiComponents/TextField/TextField.tsx

@@ -4,17 +4,15 @@ import { default as MaterialUITextField, TextFieldProps } from '@material-ui/cor
 // The default element type of MUI's TextField is 'div'
 type TextFieldRef = HTMLElementTagNameMap['div'];
 
-/* eslint-disable verdaccio/jsx-spread */
-// eslint-disable-next-line react/display-name
 const TextField = forwardRef<TextFieldRef, TextFieldProps>(function ToolTip({ InputProps, classes, ...props }, ref) {
   return (
     <MaterialUITextField
       {...props}
+      innerRef={ref}
       InputProps={{
         ...InputProps,
         classes,
       }}
-      innerRef={ref}
     />
   );
 });

src/muiComponents/Tooltip/Tooltip.tsx

@@ -4,8 +4,6 @@ import { default as MaterialUITooltip, TooltipProps } from '@material-ui/core/To
 // The default element type of MUI's Tooltip is 'div' and the change of this prop is not allowed
 type TooltipRef = HTMLElementTagNameMap['div'];
 
-/* eslint-disable verdaccio/jsx-spread */
-// eslint-disable-next-line react/display-name
 const Tooltip = forwardRef<TooltipRef, TooltipProps>(function ToolTip(props, ref) {
   return <MaterialUITooltip {...props} innerRef={ref} />;
 });

src/pages/Version/Layout.tsx

@@ -1,5 +1,6 @@
 import React, { FC, ReactElement } from 'react';
 import Grid from '@material-ui/core/Grid';
+
 import DetailContainer from '../../components/DetailContainer';
 import DetailSidebar from '../../components/DetailSidebar';
 

src/pages/Version/Version.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
-
 import { MemoryRouter } from 'react-router';
+import { waitForElement } from '@testing-library/dom';
 
 import vueMetadata from '../../../test/fixtures/metadata/vue.json';
+import ErrorBoundary from '../../App/AppError';
 
 import Version from './Version';
-import { waitForElement } from '@testing-library/dom';
-import ErrorBoundary from '../../App/AppError';
 
 // :-) we mock this otherways fails on render, some weird issue on material-ui
 jest.mock('../../muiComponents/Avatar');

src/pages/Version/context.ts

@@ -1,4 +1,5 @@
 import React, { Consumer, Provider } from 'react';
+
 import { DetailContextProps, VersionPageConsumerProps } from './types';
 
 export const DetailContext = React.createContext<Partial<DetailContextProps>>({});

src/pages/Version/styles.ts

@@ -1,5 +1,6 @@
 import styled from 'react-emotion';
 import DialogTitle from '@material-ui/core/DialogTitle';
+
 import colors from '../../utils/styles/colors';
 import { fontSize } from '../../utils/styles/sizes';
 

src/router.tsx

@@ -3,8 +3,8 @@
 import React, { Component, ReactElement } from 'react';
 import { Router, Route, Switch } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
-import { AppContextConsumer, AppStateInterface } from './App/App';
 
+import { AppContextConsumer, AppStateInterface } from './App/App';
 import Header from './components/Header';
 
 const history = createBrowserHistory({

src/utils/calls.ts

@@ -1,6 +1,7 @@
-import API from './api';
 import { PackageMetaInterface } from 'types/packageMeta';
 
+import API from './api';
+
 export async function callReadme(packageName, packageVersion?: string): Promise<string | {}> {
   return await API.request<string | {}>(`package/readme/${packageName}${packageVersion ? `?v=${packageVersion}` : ''}`, 'GET');
 }

src/utils/login.test.ts

@@ -1,11 +1,12 @@
-import { isTokenExpire, makeLogin } from './login';
-
 import {
   generateTokenWithTimeRange,
   generateTokenWithExpirationAsString,
   generateTokenWithOutExpiration,
   generateInvalidToken,
 } from '../../jest/unit/components/__mocks__/token';
+
+import { isTokenExpire, makeLogin } from './login';
+
 /* eslint-disable no-console */
 console.error = jest.fn();
 

src/utils/login.ts

@@ -2,9 +2,11 @@ import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
 import isEmpty from 'lodash/isEmpty';
 import { Base64 } from 'js-base64';
-import API from './api';
+
 import { HEADERS } from '../../lib/constants';
 
+import API from './api';
+
 interface PayloadInterface {
   exp: number;
 }

src/utils/package.test.ts

@@ -1,7 +1,7 @@
-import { formatLicense, formatRepository, formatDate, formatDateDistance, getLastUpdatedPackageTime, getRecentReleases } from './package';
-
 import { packageMeta } from '../../jest/unit/components/store/packageMeta';
 
+import { formatLicense, formatRepository, formatDate, formatDateDistance, getLastUpdatedPackageTime, getRecentReleases } from './package';
+
 describe('formatLicense', (): void => {
   test('should check license field different values', (): void => {
     expect(formatLicense('MIT')).toEqual('MIT');

src/utils/package.ts

@@ -1,8 +1,9 @@
+import { isObject } from 'util';
+
 import { UpLinks } from '@verdaccio/types';
 import isString from 'lodash/isString';
 import format from 'date-fns/format';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import { isObject } from 'util';
 
 export const TIMEFORMAT = 'DD.MM.YYYY, HH:mm:ss';
 

src/utils/styles/global.ts

@@ -1,4 +1,5 @@
 import { injectGlobal } from 'emotion';
+
 import { fontSize, fontWeight } from './sizes';
 import colors from './colors';
 import { breakpoints } from './media';

tools/dev.server.js

@@ -1,9 +1,11 @@
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
-import config from './webpack.dev.config.babel';
 import ora from 'ora';
+
 import env from '../config/env';
 
+import config from './webpack.dev.config.babel';
+
 const compiler = webpack(config);
 const spinner = ora('Compiler is running...').start();
 compiler.hooks.done.tap('Verdaccio Dev Server', () => {

tools/verdaccio.js

@@ -1,7 +1,8 @@
 const fs = require('fs');
+const path = require('path');
+
 const startServer = require('verdaccio').default;
 const yalm = require('js-yaml');
-const path = require('path');
 
 const storageLocation = path.join(__dirname, '../partials/storage');
 const pluginsLocation = path.join(__dirname, '../partials/plugins');

tools/webpack.config.js

@@ -1,6 +1,7 @@
-const env = require('../config/env');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 
+const env = require('../config/env');
+
 module.exports = {
   entry: `${env.SRC_ROOT}/index.tsx`,
 

tools/webpack.dev.config.babel.js

@@ -1,9 +1,11 @@
 import webpack from 'webpack';
 import HTMLWebpackPlugin from 'html-webpack-plugin';
 import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
-import baseConfig from './webpack.config';
-import env from '../config/env';
 import StyleLintPlugin from 'stylelint-webpack-plugin';
+
+import env from '../config/env';
+
+import baseConfig from './webpack.config';
 import getPackageJson from './getPackageJson';
 
 export default {

tools/webpack.prod.config.babel.js

@@ -3,10 +3,12 @@ const HTMLWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const baseConfig = require('./webpack.config');
-const env = require('../config/env');
 const _ = require('lodash');
 const merge = require('webpack-merge');
+
+const env = require('../config/env');
+
+const baseConfig = require('./webpack.config');
 const getPackageJson = require('./getPackageJson');
 
 const { version, name, license } = getPackageJson('version', 'name', 'license');

yarn.lock

@@ -5176,6 +5176,23 @@ eslint-plugin-import@2.18.0:
     read-pkg-up "^2.0.0"
     resolve "^1.11.0"
 
+eslint-plugin-import@2.18.2:
+  version "2.18.2"
+  resolved "https://registry.verdaccio.org/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz#02f1180b90b077b33d447a17a2326ceb400aceb6"
+  integrity sha512-5ohpsHAiUBRNaBWAF08izwUGlbrJoJJ+W9/TBwsGoR1MnlgfwMIKrFeSjWbt6moabiXW9xNvtFz+97KHRfI4HQ==
+  dependencies:
+    array-includes "^3.0.3"
+    contains-path "^0.1.0"
+    debug "^2.6.9"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.2"
+    eslint-module-utils "^2.4.0"
+    has "^1.0.3"
+    minimatch "^3.0.4"
+    object.values "^1.1.0"
+    read-pkg-up "^2.0.0"
+    resolve "^1.11.0"
+
 eslint-plugin-jest@22.10.0:
   version "22.10.0"
   resolved "https://registry.verdaccio.org/eslint-plugin-jest/-/eslint-plugin-jest-22.10.0.tgz#a22be77f4dc692808b88ead0059620bda299a97d"