Separate external, monorepo and internal imports (#237)

* style: enforce ordering of imports

* style: sort imports in loot-core

* style: sort imports in desktop-client

* style: sort imports in loot-design

* style: manual fixes

.eslintrc.js

@@ -1,10 +1,35 @@
 module.exports = {
-  plugins: ['prettier'],
+  plugins: ['prettier', 'import'],
   extends: ['react-app'],
   rules: {
     'prettier/prettier': 'error',
     'no-unused-vars': 'off',
     'no-loop-func': 'off',
-    'no-restricted-globals': 'off'
+    'no-restricted-globals': 'off',
+
+    'import/no-useless-path-segments': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin', // Built-in types are first
+          'external',
+          ['sibling', 'parent'], // Then sibling and parent types. They can be mingled together
+          'index' // Then the index file
+        ],
+        'newlines-between': 'always',
+        pathGroups: [
+          // Enforce that React (and react-related packages) is the first import
+          { group: 'builtin', pattern: 'react?(-*)', position: 'before' },
+          // Separate imports from Actual from "real" external imports
+          {
+            group: 'external',
+            pattern: 'loot-{core,design}/**/*',
+            position: 'after'
+          }
+        ],
+        pathGroupsExcludedImportTypes: ['react']
+      }
+    ]
   }
 };

packages/desktop-client/package.json

@@ -32,7 +32,7 @@
     "eslint-config-react-app": "3.0.5",
     "eslint-loader": "2.1.1",
     "eslint-plugin-flowtype": "2.50.1",
-    "eslint-plugin-import": "2.14.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "7.11.1",

packages/desktop-client/src/components/AnimatedRefresh.js

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { css } from 'glamor';
+
 import { View } from 'loot-design/src/components/common';
 import Refresh from 'loot-design/src/svg/v1/Refresh';
 

packages/desktop-client/src/components/App.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
+
 import { css } from 'glamor';
+
 import * as actions from 'loot-core/src/client/actions';
 import {
   init as initConnection,
   send
 } from 'loot-core/src/platform/client/fetch';
 import { styles, hasHiddenScrollbars } from 'loot-design/src/style';
+
 import installPolyfills from '../polyfills';
 import FatalError from './FatalError';
 import ManagementApp from './manager/ManagementApp';

packages/desktop-client/src/components/AppBackground.js

@@ -1,8 +1,11 @@
 import React from 'react';
-import { View, Block } from 'loot-design/src/components/common';
+
 import { css } from 'glamor';
+
+import { View, Block } from 'loot-design/src/components/common';
 import AnimatedLoading from 'loot-design/src/svg/v1/AnimatedLoading';
 import { colors } from 'loot-design/src/style';
+
 import Background from './Background';
 
 function AppBackground({ initializing, loadingText }) {

packages/desktop-client/src/components/Background.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { css } from 'glamor';
 
 import BG from './manager/bg.svg';

packages/desktop-client/src/components/BankSyncStatus.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
+
 import * as actions from 'loot-core/src/client/actions';
 import { View, Text } from 'loot-design/src/components/common';
 import { colors, styles } from 'loot-design/src/style';
+
 import AnimatedRefresh from './AnimatedRefresh';
 
 function BankSyncStatus({ accountsSyncing }) {

packages/desktop-client/src/components/Debugger.js

@@ -1,10 +1,12 @@
 import React from 'react';
+
+import CodeMirror from 'codemirror';
+
 import {
   send,
   init as initConnection
 } from 'loot-core/src/platform/client/fetch';
 import * as spreadsheet from 'loot-core/src/client/sheetql/spreadsheet';
-import CodeMirror from 'codemirror';
 import {
   View,
   Button,

packages/desktop-client/src/components/FatalError.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   View,
   Stack,

packages/desktop-client/src/components/FinancesApp.js

@@ -1,10 +1,12 @@
 import React, { useMemo } from 'react';
 import { Router, Route, Redirect, Switch, useLocation } from 'react-router-dom';
-import { createBrowserHistory } from 'history';
 import { connect } from 'react-redux';
 import { DndProvider } from 'react-dnd';
 import Backend from 'react-dnd-html5-backend';
+
+import { createBrowserHistory } from 'history';
 import hotkeys from 'hotkeys-js';
+
 import * as actions from 'loot-core/src/client/actions';
 import { SpreadsheetProvider } from 'loot-core/src/client/SpreadsheetProvider';
 import checkForUpgradeNotifications from 'loot-core/src/client/upgrade-notifications';
@@ -14,12 +16,12 @@ import { BudgetMonthCountProvider } from 'loot-design/src/components/budget/Budg
 import * as undo from 'loot-core/src/platform/client/undo';
 import { PayeesProvider } from 'loot-core/src/client/data-hooks/payees';
 import { AccountsProvider } from 'loot-core/src/client/data-hooks/accounts';
+
 import { getLocationState } from '../util/location-state';
 import { makeLocationState } from '../util/location-state';
 import { PageTypeProvider } from './Page';
 import { ActiveLocationProvider } from './ActiveLocation';
 import BankSyncStatus from './BankSyncStatus';
-
 import Titlebar, { TitlebarProvider } from './Titlebar';
 import FloatableSidebar, { SidebarProvider } from './FloatableSidebar';
 import Account from './accounts/Account';

packages/desktop-client/src/components/FloatableSidebar.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+
 import mitt from 'mitt';
+
 import * as actions from 'loot-core/src/client/actions';
 import { View } from 'loot-design/src/components/common';
 import { SIDEBAR_WIDTH } from 'loot-design/src/components/sidebar';

packages/desktop-client/src/components/GlobalKeys.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
+
 import Platform from 'loot-core/src/client/platform';
 
 class GlobalKeys extends React.Component {

packages/desktop-client/src/components/LoggedInUser.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
+
 import * as actions from 'loot-core/src/client/actions';
 import {
   View,

packages/desktop-client/src/components/MobileWebMessage.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import {
   View,
   Text,

packages/desktop-client/src/components/Modals.js

@@ -1,12 +1,13 @@
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
+
+import { bindActionCreators } from 'redux';
 import { createLocation } from 'history';
 import Component from '@reactions/component';
+
 import * as actions from 'loot-core/src/client/actions';
 import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
-
 import CreateLocalAccount from 'loot-design/src/components/modals/CreateLocalAccount';
 import CloseAccount from 'loot-design/src/components/modals/CloseAccount';
 import SelectLinkedAccounts from 'loot-design/src/components/modals/SelectLinkedAccounts';
@@ -15,6 +16,7 @@ import LoadBackup from 'loot-design/src/components/modals/LoadBackup';
 import PlaidExternalMsg from 'loot-design/src/components/modals/PlaidExternalMsg';
 import ImportTransactions from 'loot-design/src/components/modals/ImportTransactions';
 import EditField from 'loot-design/src/components/modals/EditField';
+
 import CreateAccount from './modals/CreateAccount';
 import ManagePayeesWithData from './payees/ManagePayeesWithData';
 import ManageRules from './modals/ManageRules';

packages/desktop-client/src/components/Notifications.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import {
   View,

packages/desktop-client/src/components/Page.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
+
 import { Modal, View, Text } from 'loot-design/src/components/common';
 import { styles } from 'loot-design/src/style';
 

packages/desktop-client/src/components/Settings.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
-import { css } from 'glamor';
 import { Route, Switch, Redirect } from 'react-router-dom';
+
+import { css } from 'glamor';
+
 import * as actions from 'loot-core/src/client/actions';
 import {
   View,

packages/desktop-client/src/components/SidebarWithData.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+
+import { bindActionCreators } from 'redux';
+
 import { send } from 'loot-core/src/platform/client/fetch';
 import { styles, colors } from 'loot-design/src/style';
 import {

packages/desktop-client/src/components/SpreadsheetInterface.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import Cell from 'loot-design/src/components/spreadsheet/Cell';
 import { View } from 'loot-design/src/components/common';
 

packages/desktop-client/src/components/Titlebar.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
 import { Switch, Route, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import * as queries from 'loot-core/src/client/queries';
 import { listen } from 'loot-core/src/platform/client/fetch';
@@ -20,6 +21,7 @@ import ArrowButtonRight1 from 'loot-design/src/svg/v2/ArrowButtonRight1';
 import NavigationMenu from 'loot-design/src/svg/v2/NavigationMenu';
 import ArrowLeft from 'loot-design/src/svg/v1/ArrowLeft';
 import AlertTriangle from 'loot-design/src/svg/v2/AlertTriangle';
+
 import { MonthCountSelector } from './budget/MonthCountSelector';
 import AccountSyncCheck from './accounts/AccountSyncCheck';
 import LoggedInUser from './LoggedInUser';

packages/desktop-client/src/components/Tutorial.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+
 import * as actions from 'loot-core/src/client/actions';
+
 import Intro from './tutorial/Intro';
 import BudgetSummary from './tutorial/BudgetSummary';
 import BudgetCategories from './tutorial/BudgetCategories';

packages/desktop-client/src/components/TutorialPoints.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+
 import PropTypes from 'prop-types';
 
 class Tutorial extends React.Component {

packages/desktop-client/src/components/UpdateNotification.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import { View, Text, Link, Button } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';

packages/desktop-client/src/components/accounts/Account.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { bindActionCreators } from 'redux';
 import { useSelector, useDispatch } from 'react-redux';
 import { Redirect, useParams, useHistory, useLocation } from 'react-router-dom';
+
+import { bindActionCreators } from 'redux';
 import { debounce } from 'debounce';
+
 import { send, listen } from 'loot-core/src/platform/client/fetch';
 import * as actions from 'loot-core/src/client/actions';
 import {
@@ -52,6 +54,7 @@ import {
   SchedulesProvider,
   useCachedSchedules
 } from 'loot-core/src/client/data-hooks/schedules';
+
 import { authorizeBank } from '../../plaid';
 import AnimatedRefresh from '../AnimatedRefresh';
 import { useActiveLocation } from '../ActiveLocation';

packages/desktop-client/src/components/accounts/AccountSyncCheck.js

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import { View, Button, Tooltip } from 'loot-design/src/components/common';
 import ExclamationOutline from 'loot-design/src/svg/v1/ExclamationOutline';
 import { colors } from 'loot-design/src/style';
+
 import { reauthorizeBank } from '../../plaid';
 
 function getErrorMessage(type, code) {

packages/desktop-client/src/components/accounts/Filters.js

@@ -1,11 +1,13 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react';
 import { useSelector } from 'react-redux';
+
 import scopeTab from 'react-modal/lib/helpers/scopeTab';
 import {
   parse as parseDate,
   format as formatDate,
   isValid as isDateValid
 } from 'date-fns';
+
 import { send } from 'loot-core/src/platform/client/fetch';
 import { getMonthYearFormat } from 'loot-core/src/shared/months';
 import { titleFirst } from 'loot-core/src/shared/util';
@@ -31,6 +33,7 @@ import {
 import DeleteIcon from 'loot-design/src/svg/Delete';
 import SettingsSliderAlternate from 'loot-design/src/svg/v2/SettingsSliderAlternate';
 import { colors } from 'loot-design/src/style';
+
 import GenericInput from '../util/GenericInput';
 import { Value } from '../modals/ManageRules';
 

packages/desktop-client/src/components/accounts/SimpleTransactionsTable.js

@@ -1,10 +1,12 @@
 import React, { useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
+
 import {
   format as formatDate,
   parseISO,
   isValid as isDateValid
 } from 'date-fns';
+
 import {
   Table,
   Row,
@@ -23,6 +25,7 @@ import {
 } from 'loot-core/src/client/reducers/queries';
 import ArrowsSynchronize from 'loot-design/src/svg/v2/ArrowsSynchronize';
 import { styles } from 'loot-design/src/style';
+
 import DisplayId from '../util/DisplayId';
 
 function serializeTransaction(transaction, dateFormat) {

packages/desktop-client/src/components/accounts/TransactionList.js

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { useDispatch } from 'react-redux';
+
 import {
   splitTransaction,
   updateTransaction,
@@ -9,7 +10,9 @@ import {
 } from 'loot-core/src/shared/transactions';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { getChangedValues, applyChanges } from 'loot-core/src/shared/util';
+
 import { TransactionTable } from './TransactionsTable';
+
 const uuid = require('loot-core/src/platform/uuid');
 
 // When data changes, there are two ways to update the UI:

packages/desktop-client/src/components/accounts/TransactionsTable.js

@@ -9,11 +9,13 @@ import React, {
   useReducer
 } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+
 import {
   format as formatDate,
   parseISO,
   isValid as isDateValid
 } from 'date-fns';
+
 import { View, Text, Tooltip, Button } from 'loot-design/src/components/common';
 import CategoryAutocomplete from 'loot-design/src/components/CategorySelect';
 import PayeeAutocomplete from 'loot-design/src/components/PayeeAutocomplete';
@@ -63,6 +65,7 @@ import {
 import { useMergedRefs } from 'loot-design/src/components/useMergedRefs';
 import { useCachedSchedules } from 'loot-core/src/client/data-hooks/schedules';
 import { getScheduledAmount } from 'loot-core/src/shared/schedules';
+
 import { getStatusProps } from '../schedules/StatusBadge';
 
 let TABLE_BACKGROUND_COLOR = colors.n11;

packages/desktop-client/src/components/accounts/TransactionsTable.test.js

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import { act } from 'react-dom/test-utils';
 import { render, fireEvent } from '@testing-library/react';
 import { format as formatDate, parse as parseDate } from 'date-fns';
+
 import { integerToCurrency } from 'loot-core/src/shared/util';
 import { initServer } from 'loot-core/src/platform/client/fetch';
 import {
@@ -17,7 +19,9 @@ import {
   updateTransaction
 } from 'loot-core/src/shared';
 import { SelectedProviderWithItems } from 'loot-design/src/components';
+
 import { SplitsExpandedProvider, TransactionTable } from './TransactionsTable';
+
 const uuid = require('loot-core/src/platform/uuid');
 
 const accounts = [generateAccount('Bank of America')];

packages/desktop-client/src/components/budget/MonthCountSelector.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { colors } from 'loot-design/src/style';
 import { View } from 'loot-design/src/components/common';
 import { useBudgetMonthCount } from 'loot-design/src/components/budget/BudgetMonthCountContext';

packages/desktop-client/src/components/budget/index.js

@@ -1,16 +1,14 @@
 import React, { useContext, useMemo } from 'react';
 import { connect } from 'react-redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { getValidMonthBounds } from 'loot-design/src/components/budget/MonthsContext';
-
 import * as rollover from 'loot-design/src/components/budget/rollover/rollover-components';
 import { RolloverContext } from 'loot-design/src/components/budget/rollover/RolloverContext';
-
 import * as report from 'loot-design/src/components/budget/report/components';
 import { ReportProvider } from 'loot-design/src/components/budget/report/ReportContext';
-
 import DynamicBudgetTable from 'loot-design/src/components/budget/DynamicBudgetTable';
 import SpreadsheetContext from 'loot-design/src/components/spreadsheet/SpreadsheetContext';
 import { View } from 'loot-design/src/components/common';
@@ -25,6 +23,7 @@ import {
   updateGroup,
   deleteGroup
 } from 'loot-core/src/shared/categories.js';
+
 import { TitlebarContext } from '../Titlebar';
 
 let _initialBudgetMonth = null;

packages/desktop-client/src/components/debug/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import styled from 'styled-components';
+
 import { send } from 'loot-core/src/platform/client/fetch';
 
 const Container = styled.div`

packages/desktop-client/src/components/manager/ConfigServer.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+
 import {
   View,
   Text,
@@ -10,6 +11,7 @@ import {
 import { colors } from 'loot-design/src/style';
 import { signOut, loggedIn } from 'loot-core/src/client/actions/user';
 import { send } from 'loot-core/src/platform/client/fetch';
+
 import { Title, Input } from './subscribe/common';
 
 export default function ConfigServer() {

packages/desktop-client/src/components/manager/ManagementApp.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { createBrowserHistory } from 'history';
 import { Switch, Redirect, Router, Route } from 'react-router-dom';
+
+import { createBrowserHistory } from 'history';
+
 import * as actions from 'loot-core/src/client/actions';
 import { View, Text } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+
 import LoggedInUser from '../LoggedInUser';
 import Notifications from '../Notifications';
 import useServerVersion from '../../hooks/useServerVersion';
 import ServerURL from './ServerURL';
-
 import Modals from './Modals';
 import Login from './subscribe/Login';
 import Bootstrap from './subscribe/Bootstrap';

packages/desktop-client/src/components/manager/Modals.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
 import Component from '@reactions/component';
+
 import { send } from 'loot-core/src/platform/client/fetch';
 import * as actions from 'loot-core/src/client/actions';
 import { View } from 'loot-design/src/components/common';
@@ -12,6 +14,7 @@ import ImportYNAB4 from 'loot-design/src/components/manager/ImportYNAB4';
 import ImportYNAB5 from 'loot-design/src/components/manager/ImportYNAB5';
 import ImportActual from 'loot-design/src/components/manager/ImportActual';
 import DeleteFile from 'loot-design/src/components/manager/DeleteFile';
+
 import CreateEncryptionKey from '../modals/CreateEncryptionKey';
 import FixEncryptionKey from '../modals/FixEncryptionKey';
 

packages/desktop-client/src/components/manager/ServerURL.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+
 import { View, Text, AnchorLink } from 'loot-design/src/components/common';
 import { send } from 'loot-core/src/platform/client/fetch';
 

packages/desktop-client/src/components/manager/subscribe/Bootstrap.js

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+
 import { View, Text, Button } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 import { loggedIn } from 'loot-core/src/client/actions/user';
 import { createBudget } from 'loot-core/src/client/actions/budgets';
 import { send } from 'loot-core/src/platform/client/fetch';
+
 import { ConfirmPasswordForm } from './ConfirmPasswordForm';
 import { useBootstrapped, Title } from './common';
 

packages/desktop-client/src/components/manager/subscribe/ChangePassword.js

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+
 import { View, Text, Button } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 import { send } from 'loot-core/src/platform/client/fetch';
+
 import { ConfirmPasswordForm } from './ConfirmPasswordForm';
 import { Title } from './common';
 

packages/desktop-client/src/components/manager/subscribe/ConfirmPasswordForm.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
+
 import { View, ButtonWithLoading } from 'loot-design/src/components/common';
+
 import { Input } from './common';
 
 export function ConfirmPasswordForm({ buttons, onSetPassword, onError }) {

packages/desktop-client/src/components/manager/subscribe/Error.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+
 import { View, Text, Button } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 

packages/desktop-client/src/components/manager/subscribe/Login.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+
 import {
   View,
   Text,
@@ -11,6 +12,7 @@ import { colors } from 'loot-design/src/style';
 import { loggedIn } from 'loot-core/src/client/actions/user';
 import { createBudget } from 'loot-core/src/client/actions/budgets';
 import { send } from 'loot-core/src/platform/client/fetch';
+
 import { useBootstrapped, Title, Input } from './common';
 
 export default function Login() {

packages/desktop-client/src/components/manager/subscribe/common.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+
 import {
   Text,
   Button,

packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   View,
   Text,

packages/desktop-client/src/components/modals/CreateAccount.js

@@ -1,9 +1,12 @@
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import { View, Text, Modal, Button } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+
 import { authorizeBank } from '../../plaid';
 
 class CreateAccount extends React.Component {

packages/desktop-client/src/components/modals/CreateEncryptionKey.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
+
 import { css } from 'glamor';
+
 import {
   View,
   Text,

packages/desktop-client/src/components/modals/EditRule.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+
 import {
   initiallyLoadPayees,
   setUndoEnabled
@@ -39,6 +40,7 @@ import {
   amountToInteger
 } from 'loot-core/src/shared/util';
 import * as monthUtils from 'loot-core/src/shared/months';
+
 import SimpleTransactionsTable from '../accounts/SimpleTransactionsTable';
 import { StatusBadge } from '../schedules/StatusBadge';
 import DisplayId from '../util/DisplayId';

packages/desktop-client/src/components/modals/FixEncryptionKey.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import {
   View,
   Text,

packages/desktop-client/src/components/modals/ManageRules.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+
 import { css } from 'glamor';
 import { format as formatDate, parseISO } from 'date-fns';
+
 import * as undo from 'loot-core/src/platform/client/undo';
 import { initiallyLoadPayees } from 'loot-core/src/client/actions/queries';
 import q from 'loot-core/src/client/query-helpers';

packages/desktop-client/src/components/modals/MergeUnusedPayees.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+
 import {
   View,
   Text,

packages/desktop-client/src/components/modals/WelcomeScreen.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import {
   View,

packages/desktop-client/src/components/payees/ManagePayeesWithData.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import * as undo from 'loot-core/src/platform/client/undo';
 import { send, listen } from 'loot-core/src/platform/client/fetch';

packages/desktop-client/src/components/reports/CashFlow.js

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
+
 import * as d from 'date-fns';
+
 import {
   View,
   Text,
@@ -12,6 +14,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 import { colors } from 'loot-design/src/style';
+
 import Header from './Header';
 import Change from './Change';
 import CashFlowGraph from './graphs/CashFlowGraph';

packages/desktop-client/src/components/reports/Change.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { styles } from 'loot-design/src/style';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 import { Block } from 'loot-design/src/components/common';

packages/desktop-client/src/components/reports/Container.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { View } from 'loot-design/src/components/common';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
+import { View } from 'loot-design/src/components/common';
+
 class Container extends React.Component {
   render() {
     const { style, children } = this.props;

packages/desktop-client/src/components/reports/DateRange.js

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import * as d from 'date-fns';
+
 import { colors } from 'loot-design/src/style';
 import { Block } from 'loot-design/src/components/common';
 

packages/desktop-client/src/components/reports/Header.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { styles } from 'loot-design/src/style';
 import {
   View,

packages/desktop-client/src/components/reports/NetWorth.js

@@ -1,13 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
 import * as d from 'date-fns';
+
 import * as actions from 'loot-core/src/client/actions';
 import { View, P } from 'loot-design/src/components/common';
 import { styles } from 'loot-design/src/style';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 import { send } from 'loot-core/src/platform/client/fetch';
+
 import Header from './Header';
 import { fromDateRepr } from './util';
 import useReport from './useReport';

packages/desktop-client/src/components/reports/Overview.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
 import { VictoryBar, VictoryGroup, VictoryVoronoiContainer } from 'victory';
+
 import * as actions from 'loot-core/src/client/actions';
 import { View, Block, AnchorLink } from 'loot-design/src/components/common';
 import { colors, styles } from 'loot-design/src/style';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';
+
 import { useArgsMemo } from './util';
 import theme from './chart-theme';
 import Container from './Container';

packages/desktop-client/src/components/reports/Tooltip.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import { VictoryTooltip } from 'victory';
 import { css, before } from 'glamor';
+
 import { colors } from 'loot-design/src/style';
 
 class Tooltip extends React.Component {

packages/desktop-client/src/components/reports/graphs/CashFlowGraph.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   VictoryChart,
   VictoryBar,
@@ -8,7 +9,9 @@ import {
   VictoryGroup
 } from 'victory';
 import * as d from 'date-fns';
+
 import { colors } from 'loot-design/src/style';
+
 import Container from '../Container';
 import Tooltip from '../Tooltip';
 import theme from '../chart-theme';

packages/desktop-client/src/components/reports/graphs/NetWorthGraph.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   VictoryChart,
   VictoryBar,
@@ -8,6 +9,7 @@ import {
   VictoryGroup
 } from 'victory';
 import * as d from 'date-fns';
+
 import Container from '../Container';
 import Tooltip from '../Tooltip';
 import theme from '../chart-theme';

packages/desktop-client/src/components/reports/graphs/cash-flow-spreadsheet.js

@@ -1,9 +1,12 @@
 import React from 'react';
-import * as monthUtils from 'loot-core/src/shared/months';
+
 import * as d from 'date-fns';
+
+import * as monthUtils from 'loot-core/src/shared/months';
 import { AlignedText } from 'loot-design/src/components/common';
 import { integerToCurrency, integerToAmount } from 'loot-core/src/shared/util';
 import q from 'loot-core/src/client/query-helpers';
+
 import { fromDateRepr, fromDateReprToDay, runAll, index } from '../util';
 
 export function simpleCashFlow(start, end) {

packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import * as monthUtils from 'loot-core/src/shared/months';
+
 import * as d from 'date-fns';
+
+import * as monthUtils from 'loot-core/src/shared/months';
 import { AlignedText } from 'loot-design/src/components/common';
 import q, { runQuery } from 'loot-core/src/client/query-helpers';
 import {
@@ -8,6 +10,7 @@ import {
   integerToAmount,
   amountToInteger
 } from 'loot-core/src/shared/util';
+
 import { index } from '../util';
 
 export default function createSpreadsheet(start, end, accounts) {

packages/desktop-client/src/components/reports/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
+
 import { View } from 'loot-design/src/components/common';
+
 import Overview from './Overview';
 import NetWorth from './NetWorth';
 import CashFlow from './CashFlow';

packages/desktop-client/src/components/reports/util.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+
 import { runQuery } from 'loot-core/src/client/query-helpers';
 
 export function useArgsMemo(func) {

packages/desktop-client/src/components/schedules/DiscoverSchedules.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
+
 import q, { runQuery } from 'loot-core/src/client/query-helpers';
 import Platform from 'loot-core/src/client/platform';
 import { send } from 'loot-core/src/platform/client/fetch';
@@ -24,6 +25,7 @@ import useSelected, {
   useSelectedItems,
   SelectedProvider
 } from 'loot-design/src/components/useSelected';
+
 import { Page } from '../Page';
 import DisplayId from '../util/DisplayId';
 import { ScheduleAmountCell } from './SchedulesTable';

packages/desktop-client/src/components/schedules/EditSchedule.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useReducer } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
+
 import { pushModal } from 'loot-core/src/client/actions/modals';
 import { send, sendCatch } from 'loot-core/src/platform/client/fetch';
 import q, { runQuery, liveQuery } from 'loot-core/src/client/query-helpers';
@@ -22,6 +23,7 @@ import useSelected, {
   SelectedProvider
 } from 'loot-design/src/components/useSelected';
 import RecurringSchedulePicker from 'loot-design/src/components/RecurringSchedulePicker';
+
 import SimpleTransactionsTable from '../accounts/SimpleTransactionsTable';
 import { usePageType } from '../Page';
 import { Page } from '../Page';

packages/desktop-client/src/components/schedules/LinkSchedule.js

@@ -1,9 +1,11 @@
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation, useHistory } from 'react-router-dom';
+
 import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { Text } from 'loot-design/src/components/common';
+
 import { Page } from '../Page';
 import { SchedulesTable } from './SchedulesTable';
 

packages/desktop-client/src/components/schedules/PostsOfflineNotification.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
+
 import { send } from 'loot-core/src/platform/client/fetch';
 import { Text, P, Button, Stack } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+
 import { Page } from '../Page';
 import DisplayId from '../util/DisplayId';
 

packages/desktop-client/src/components/schedules/SchedulesTable.js

@@ -1,5 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
+
 import { integerToCurrency } from 'loot-core/src/shared/util';
 import { colors } from 'loot-design/src/style';
 import {
@@ -20,6 +21,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { getScheduledAmount } from 'loot-core/src/shared/schedules';
 import DotsHorizontalTriple from 'loot-design/src/svg/v1/DotsHorizontalTriple';
 import Check from 'loot-design/src/svg/v2/Check';
+
 import DisplayId from '../util/DisplayId';
 import { StatusBadge } from './StatusBadge';
 

packages/desktop-client/src/components/schedules/StatusBadge.js

@@ -1,8 +1,8 @@
 import React from 'react';
+
 import { colors } from 'loot-design/src/style';
 import { View, Text } from 'loot-design/src/components/common';
 import { titleFirst } from 'loot-core/src/shared/util';
-
 import EditSkull1 from 'loot-design/src/svg/v2/EditSkull1';
 import AlertTriangle from 'loot-design/src/svg/v2/AlertTriangle';
 import CalendarIcon from 'loot-design/src/svg/v2/Calendar';

packages/desktop-client/src/components/schedules/index.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
+
 import { View, Button } from 'loot-design/src/components/common';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
+
 import { Page } from '../Page';
 import { SchedulesTable, ROW_HEIGHT } from './SchedulesTable';
 

packages/desktop-client/src/components/tools/FixSplitsTool.js

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
+
 import { send } from 'loot-core/src/platform/client/fetch';
 import { colors } from 'loot-design/src/style';
 import { View, P, ButtonWithLoading } from 'loot-design/src/components/common';
+
 import { Page } from '../Page';
 
 function renderResults(results) {

packages/desktop-client/src/components/tutorial/BudgetCategories.js

@@ -1,6 +1,8 @@
 import React from 'react';
+
 import { Tooltip, Pointer, P } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+
 import Navigation from './Navigation';
 import { Title } from './common';
 

packages/desktop-client/src/components/tutorial/BudgetInitial.js

@@ -1,8 +1,11 @@
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import { P, Button } from 'loot-design/src/components/common';
+
 import { Title, Standalone, useMinimized } from './common';
 import Navigation from './Navigation';
 

packages/desktop-client/src/components/tutorial/BudgetNewIncome.js

@@ -1,6 +1,8 @@
 import React from 'react';
+
 import { Tooltip, Pointer, P } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+
 import Navigation from './Navigation';
 import { Title } from './common';
 

packages/desktop-client/src/components/tutorial/BudgetNextMonth.js

@@ -1,8 +1,11 @@
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import { View, P, Button } from 'loot-design/src/components/common';
+
 import Navigation from './Navigation';
 import { Standalone, Title, useMinimized } from './common';
 

packages/desktop-client/src/components/tutorial/BudgetSummary.js

@@ -1,6 +1,8 @@
 import React from 'react';
+
 import { Tooltip, Pointer, P } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+
 import Navigation from './Navigation';
 import { Title } from './common';
 

packages/desktop-client/src/components/tutorial/CategoryBalance.js

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { P, Button } from 'loot-design/src/components/common';
+
 import Navigation from './Navigation';
 import { Standalone, Title, useMinimized } from './common';
 

packages/desktop-client/src/components/tutorial/DeleteTransactions.js

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { P } from 'loot-design/src/components/common';
+
 import Navigation from './Navigation';
 import { Standalone, Title } from './common';
 

packages/desktop-client/src/components/tutorial/Final.js

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { P, ModalButtons, Button } from 'loot-design/src/components/common';
+
 import { Standalone, Title, ExternalLink } from './common';
 
 function Final({ targetRect, navigationProps }) {

packages/desktop-client/src/components/tutorial/Intro.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   View,
   Text,
@@ -6,6 +7,7 @@ import {
   ModalButtons,
   Button
 } from 'loot-design/src/components/common';
+
 import { Standalone, Title, ExternalLink } from './common';
 
 function Intro({ fromYNAB, nextTutorialStage, closeTutorial }) {

packages/desktop-client/src/components/tutorial/Navigation.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Button, ModalButtons } from 'loot-design/src/components/common';
 
 function Navigation({

packages/desktop-client/src/components/tutorial/Overspending.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
+
 import * as actions from 'loot-core/src/client/actions';
 import SheetValue from 'loot-design/src/components/spreadsheet/SheetValue';
 import NamespaceContext from 'loot-design/src/components/spreadsheet/NamespaceContext';
 import { P, View, Text, Button } from 'loot-design/src/components/common';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';
+
 import Navigation from './Navigation';
 import { Standalone, Title, useMinimized } from './common';
 

packages/desktop-client/src/components/tutorial/TransactionAdd.js

@@ -1,6 +1,8 @@
 import React from 'react';
+
 import { Tooltip, Pointer, P } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+
 import Navigation from './Navigation';
 import { Title } from './common';
 

packages/desktop-client/src/components/tutorial/TransactionEnter.js

@@ -1,6 +1,8 @@
 import React from 'react';
+
 import { P } from 'loot-design/src/components/common';
 import * as monthUtils from 'loot-core/src/shared/months';
+
 import Navigation from './Navigation';
 import { Standalone, Title } from './common';
 

packages/desktop-client/src/components/tutorial/TransactionFinalize.js

@@ -1,6 +1,9 @@
 import React from 'react';
-import { P } from 'loot-design/src/components/common';
+
 import { css } from 'glamor';
+
+import { P } from 'loot-design/src/components/common';
+
 import Navigation from './Navigation';
 import { Standalone } from './common';
 

packages/desktop-client/src/components/tutorial/common.js

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
+
 import { View, AnchorLink } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
+
 import AnimateIn from './AnimateIn';
 
 export function Title({ children }) {

packages/desktop-client/src/components/util/AmountInput.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import {
   integerToCurrency,
   currencyToInteger

packages/desktop-client/src/components/util/DisplayId.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { CachedPayees } from 'loot-core/src/client/data-hooks/payees';
 import { CachedAccounts } from 'loot-core/src/client/data-hooks/accounts';
 import { Text } from 'loot-design/src/components/common';

packages/desktop-client/src/components/util/GenericInput.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+
 import { getMonthYearFormat } from 'loot-core/src/shared/months';
 import { View, Input } from 'loot-design/src/components/common';
 import PayeeAutocomplete from 'loot-design/src/components/PayeeAutocomplete';

packages/desktop-client/src/hooks/useServerVersion.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+
 import { send } from 'loot-core/src/platform/client/fetch';
 
 function useServerVersion() {

packages/desktop-client/src/index.js

@@ -7,20 +7,23 @@ import '@reach/listbox/styles.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
 import {
   createStore,
   combineReducers,
   applyMiddleware,
   bindActionCreators
 } from 'redux';
-import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+
 import constants from 'loot-core/src/client/constants';
 import reducers from 'loot-core/src/client/reducers';
 import { send } from 'loot-core/src/platform/client/fetch';
 import q, { runQuery } from 'loot-core/src/client/query-helpers';
 import * as actions from 'loot-core/src/client/actions';
-import thunk from 'redux-thunk';
 import { initialState as initialAppState } from 'loot-core/src/client/reducers/app';
+
 import { handleGlobalEvents } from './global-events';
 import App from './components/App';
 

packages/loot-core/package.json

@@ -50,6 +50,7 @@
     "damerau-levenshtein": "^1.0.4",
     "date-fns": "2.0.0-alpha.27",
     "eslint": "5.6.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^3.1.4",
     "esm": "^3.0.82",
     "fake-indexeddb": "^3.1.3",

packages/loot-core/src/client/SpreadsheetProvider.js

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useEffect, useMemo } from 'react';
+
 import LRU from 'lru-cache';
+
 import SpreadsheetContext from 'loot-design/src/components/spreadsheet/SpreadsheetContext';
+
 import { listen, send } from '../platform/client/fetch';
 
 function makeSpreadsheet() {

packages/loot-core/src/client/actions/budgets.js

@@ -5,6 +5,7 @@ import { send } from '../../platform/client/fetch';
 import { setAppState } from './app';
 import { startTutorialFirstTime } from './tutorial';
 import { getDownloadError } from '../../shared/errors';
+
 const uuid = require('../../platform/uuid');
 
 export function updateStatusText(text) {

packages/loot-core/src/client/actions/notifications.js

@@ -1,4 +1,5 @@
 import constants from '../constants';
+
 const uuid = require('../../platform/uuid');
 
 export function addNotification(notification) {

packages/loot-core/src/client/actions/queries.js

@@ -1,4 +1,5 @@
 import throttle from 'throttleit';
+
 import { send } from '../../platform/client/fetch';
 import constants from '../constants';
 import { addNotification, addGenericErrorNotification } from './notifications';