Add sort-import ESLint rule (#317)

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
     },
   },
   "plugins": [
+    "perfectionist",                 // https://github.com/azat-io/eslint-plugin-perfectionist
     "react"                          // https://github.com/yannickcr/eslint-plugin-react
   ],
   "extends": [
@@ -175,7 +176,37 @@ module.exports = {
     "react/sort-prop-types": 2,      // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md
     "react/no-did-mount-set-state": [2, "disallow-in-func"], // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md
     "react/self-closing-comp": 2,    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md
-    "react/jsx-wrap-multilines": 2,   // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md
-    "react/no-access-state-in-setstate": "error"
+    "react/jsx-wrap-multilines": 2,  // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md
+    "react/no-access-state-in-setstate": "error",
+
+/**
+ * Perfectionist                     // https://github.com/azat-io/eslint-plugin-perfectionist
+ */
+    "perfectionist/sort-imports": [  // https://eslint-plugin-perfectionist.azat.io/rules/sort-imports
+        "error",
+        {
+            "type": "natural",
+            "order": "asc",
+            "groups": [
+                "type",
+                "react",
+                ["builtin", "external"],
+                "internal-type",
+                "internal",
+                ["parent-type", "sibling-type", "index-type"],
+                ["parent", "sibling", "index"],
+                "side-effect",
+                "style",
+                "object",
+                "unknown"
+            ],
+            "custom-groups": {
+                "value": {
+                  "react": ["react", "react-*"]
+                }
+            },
+            "newlines-between": "always"
+        }
+    ]
   }
 }

actions/browser.js

@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ReducerIndex from '../reducers/index';
 import browserReducer from '../reducers/browser';
+import ReducerIndex from '../reducers/index';
 ReducerIndex.register("browser", browserReducer);
 
 export const CHANGE_BROWSER_PROPERTIES = 'CHANGE_BROWSER_PROPERTIES';

actions/display.js

@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ReducerIndex from '../reducers/index';
 import displayReducer from '../reducers/display';
+import ReducerIndex from '../reducers/index';
 ReducerIndex.register("display", displayReducer);
 
 export const TOGGLE_FULLSCREEN = 'TOGGLE_FULLSCREEN';

actions/editing.js

@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ReducerIndex from '../reducers/index';
 import editingReducer from '../reducers/editing';
+import ReducerIndex from '../reducers/index';
 ReducerIndex.register("editing", editingReducer);
 
 export const SET_EDIT_CONTEXT = 'SET_EDIT_CONTEXT';

actions/identify.js

@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ReducerIndex from '../reducers/index';
 import identifyReducer from '../reducers/identify';
+import ReducerIndex from '../reducers/index';
 ReducerIndex.register("identify", identifyReducer);
 
 import ConfigUtils from '../utils/ConfigUtils';

actions/locale.js

@@ -11,11 +11,12 @@ import ReducerIndex from '../reducers/index';
 import localeReducer from '../reducers/locale';
 ReducerIndex.register("locale", localeReducer);
 
-import axios from 'axios';
 import {getLanguageCountries} from '@ladjs/country-language';
+import axios from 'axios';
+import deepmerge from 'deepmerge';
+
 import ConfigUtils from '../utils/ConfigUtils';
 import {UrlParams} from '../utils/PermaLinkUtils';
-import deepmerge from 'deepmerge';
 
 export const CHANGE_LOCALE = 'CHANGE_LOCALE';
 

actions/search.js

@@ -10,8 +10,8 @@ import ReducerIndex from '../reducers/index';
 import searchReducer from '../reducers/search';
 ReducerIndex.register("search", searchReducer);
 
-import {v1 as uuidv1} from 'uuid';
 import axios from 'axios';
+import {v1 as uuidv1} from 'uuid';
 
 export const SEARCH_CHANGE = 'SEARCH_CHANGE';
 export const SEARCH_SET_REQUEST = 'SEARCH_SET_REQUEST';

actions/task.js

@@ -10,12 +10,12 @@ import ReducerIndex from '../reducers/index';
 import taskReducer from '../reducers/task';
 ReducerIndex.register("task", taskReducer);
 
-import {setIdentifyEnabled} from './identify';
-import {showIframeDialog} from './windows';
 import ConfigUtils from '../utils/ConfigUtils';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
 import MapUtils from '../utils/MapUtils';
 import {UrlParams} from '../utils/PermaLinkUtils';
+import {setIdentifyEnabled} from './identify';
+import {showIframeDialog} from './windows';
 
 export const SET_CURRENT_TASK = 'SET_CURRENT_TASK';
 export const SET_CURRENT_TASK_BLOCKED = 'SET_CURRENT_TASK_BLOCKED';

actions/theme.js

@@ -11,13 +11,14 @@ import themeReducer from '../reducers/theme';
 ReducerIndex.register("theme", themeReducer);
 
 import isEmpty from 'lodash.isempty';
+
 import {setIdentifyEnabled} from '../actions/identify';
 import {setCurrentTask} from '../actions/task';
 import ConfigUtils from '../utils/ConfigUtils';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
-import MapUtils from '../utils/MapUtils';
 import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
+import MapUtils from '../utils/MapUtils';
 import {UrlParams} from '../utils/PermaLinkUtils';
 import ServiceLayerUtils from '../utils/ServiceLayerUtils';
 import ThemeUtils from '../utils/ThemeUtils';

components/AppMenu.jsx

@@ -7,22 +7,25 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import mousetrap from 'mousetrap';
+
+import classnames from 'classnames';
 import {remove as removeDiacritics} from 'diacritics';
 import isEmpty from 'lodash.isempty';
-import classnames from 'classnames';
-import {setMenuMargin} from '../actions/windows';
+import isEqual from 'lodash.isequal';
+import mousetrap from 'mousetrap';
+import PropTypes from 'prop-types';
+
 import {setCurrentTask} from '../actions/task';
+import {setMenuMargin} from '../actions/windows';
 import InputContainer from '../components/InputContainer';
-import LocaleUtils from '../utils/LocaleUtils';
 import ConfigUtils from '../utils/ConfigUtils';
+import LocaleUtils from '../utils/LocaleUtils';
 import MiscUtils from '../utils/MiscUtils';
 import ThemeUtils from '../utils/ThemeUtils';
 import Icon from './Icon';
+
 import './style/AppMenu.css';
-import isEqual from 'lodash.isequal';
 
 
 class AppMenu extends React.Component {

components/AttributeForm.jsx

@@ -7,20 +7,23 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import isEmpty from 'lodash.isempty';
+
 import clone from 'clone';
+import isEmpty from 'lodash.isempty';
+import PropTypes from 'prop-types';
 import {v1 as uuidv1} from 'uuid';
+
 import {setEditContext, clearEditContext, getFeatureTemplate} from '../actions/editing';
-import {setCurrentTaskBlocked} from '../actions/task';
 import {LayerRole, refreshLayer} from '../actions/layers';
+import {setCurrentTaskBlocked} from '../actions/task';
+import CoordinatesUtils from '../utils/CoordinatesUtils';
+import LocaleUtils from '../utils/LocaleUtils';
 import AutoEditForm from './AutoEditForm';
 import LinkFeatureForm from './LinkFeatureForm';
 import QtDesignerForm from './QtDesignerForm';
 import ButtonBar from './widgets/ButtonBar';
-import CoordinatesUtils from '../utils/CoordinatesUtils';
-import LocaleUtils from '../utils/LocaleUtils';
+
 import './style/AttributeForm.css';
 
 class AttributeForm extends React.Component {
@@ -321,7 +324,7 @@ class AttributeForm extends React.Component {
             }
         }
     };
-    checkValidity = (form, changed=false) => {
+    checkValidity = (form, changed = false) => {
         if (form) {
             this.setState({formValid: form.checkValidity()});
             if (changed) {

components/AutoEditForm.jsx

@@ -7,12 +7,15 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import omit from 'lodash.omit';
 import NumericInput from 'react-numeric-input2';
+
+import omit from 'lodash.omit';
+import PropTypes from 'prop-types';
+
 import EditComboField from './EditComboField';
 import EditUploadField from './EditUploadField';
 import ToggleSwitch from './widgets/ToggleSwitch';
+
 import './style/AutoEditForm.css';
 
 export default class AutoEditForm extends React.Component {

components/CoordinateDisplayer.jsx

@@ -7,8 +7,10 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+
+import PropTypes from 'prop-types';
+
 import CoordinatesUtils from '../utils/CoordinatesUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 

components/EditComboField.jsx

@@ -7,7 +7,9 @@
  */
 
 import React from 'react';
+
 import PropTypes from 'prop-types';
+
 import LocaleUtils from '../utils/LocaleUtils';
 
 

components/EditUploadField.jsx

@@ -7,15 +7,18 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import mime from 'mime-to-extensions';
-import Icon from './Icon';
+import PropTypes from 'prop-types';
 import {v1 as uuidv1} from 'uuid';
-import ModalDialog from './ModalDialog';
-import ButtonBar from './widgets/ButtonBar';
+
 import ConfigUtils from '../utils/ConfigUtils';
-import LocaleUtils from '../utils/LocaleUtils';
 import {showImageEditor} from '../utils/ImageEditor';
+import LocaleUtils from '../utils/LocaleUtils';
+import Icon from './Icon';
+import ModalDialog from './ModalDialog';
+import ButtonBar from './widgets/ButtonBar';
+
 import './style/EditUploadField.css';
 
 

components/FullscreenSwitcher.jsx

@@ -7,10 +7,13 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+
+import PropTypes from 'prop-types';
+
 import {toggleFullscreen} from '../actions/display';
 import LocaleUtils from '../utils/LocaleUtils';
+
 import './style/FullscreenSwitcher.css';
 
 class FullscreenSwitcher extends React.Component {

components/Icon.jsx

@@ -7,10 +7,13 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
 import ConfigUtils from '../utils/ConfigUtils';
 import LocaleUtils from '../utils/LocaleUtils';
+
 import './style/Icon.css';
 
 export default class Icon extends React.Component {

components/IdentifyViewer.jsx

@@ -6,16 +6,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import isEmpty from 'lodash.isempty';
+
+import clone from 'clone';
 import FileSaver from 'file-saver';
 import htmlReactParser, {domToReact} from 'html-react-parser';
-import clone from 'clone';
-import omit from 'lodash.omit';
 import JSZip from 'jszip';
-import {LayerRole, addLayerFeatures, removeLayer} from '../actions/layers';
+import isEmpty from 'lodash.isempty';
+import omit from 'lodash.omit';
+import PropTypes from 'prop-types';
+
 import {setActiveLayerInfo} from '../actions/layerinfo';
+import {LayerRole, addLayerFeatures, removeLayer} from '../actions/layers';
 import {zoomToExtent} from '../actions/map';
 import {openExternalUrl} from '../actions/task';
 import ConfigUtils from '../utils/ConfigUtils';
@@ -25,6 +27,7 @@ import LocaleUtils from '../utils/LocaleUtils';
 import MiscUtils from '../utils/MiscUtils';
 import VectorLayerUtils from '../utils/VectorLayerUtils';
 import Icon from './Icon';
+
 import './style/IdentifyViewer.css';
 
 
@@ -159,19 +162,19 @@ class IdentifyViewer extends React.Component {
         displayResultTree: PropTypes.bool,
         enableExport: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
         exportGeometry: PropTypes.bool,
+        highlightAllResults: PropTypes.bool,
         identifyResults: PropTypes.object,
         iframeDialogsInitiallyDocked: PropTypes.bool,
         layers: PropTypes.array,
         longAttributesDisplay: PropTypes.oneOf(['ellipsis', 'wrap']),
         mapcrs: PropTypes.string,
+        openExternalUrl: PropTypes.func,
         removeLayer: PropTypes.func,
         replaceImageUrls: PropTypes.bool,
         setActiveLayerInfo: PropTypes.func,
-        openExternalUrl: PropTypes.func,
         showLayerTitles: PropTypes.bool,
         theme: PropTypes.object,
-        zoomToExtent: PropTypes.func,
-        highlightAllResults: PropTypes.bool
+        zoomToExtent: PropTypes.func
     };
     static defaultProps = {
         longAttributesDisplay: 'ellipsis',