Merge branch 'master' into i18n

* master: (24 commits)
  refactor: sort imports in desktop-client alphabetically
  chore: remove unused imports from desktop-client
  adm-zip to 0.5.6
  style: prettify .eslintrc.js
  build: make eslint-plugin-prettier a dependency of desktop-client
  ci: lint desktop-client in CI
  style: fix or silence linting errors in desktop-client
  chore: update remaining test scripts
  github fix indentation in issue template
  github: update issue template
  fix: correct some re-exports which were breaking things
  fix: stop trying to transform node_modules
  fix: stop the web tests from running in node environment
  fix: add ts-jest presets which are equivalent to the old `transform` properties
  fix: add esModuleInterop so that the default imports issue goes away
  fix: stop typechecking javascript files
  chore: allow mobile package to pass with no tests
  build: replace babel-jest with ts-jest
  Update bug-report.yml
  Addition: Issue template
  ...

.eslintrc.js

@@ -1,10 +1,10 @@
 module.exports = {
-  plugins: ["prettier"],
+  plugins: ['prettier'],
-  extends: ["react-app"],
+  extends: ['react-app'],
   rules: {
-    "prettier/prettier": "error",
+    'prettier/prettier': 'error',
-    "no-unused-vars": "off",
+    'no-unused-vars': 'off',
-    "no-loop-func": "off",
+    'no-loop-func': 'off',
-    "no-restricted-globals": "off"
+    'no-restricted-globals': 'off'
   }
 };

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,76 @@
+name: Bug Report
+description: File a bug report also known as an issue or problem.
+title: '[Bug]: '
+labels: ['bug', 'needs triage']
+body:
+  - type: markdown
+    id: intro-md
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report! Please ensure you provide as much information as asked to better assist in confirming and identifying a fix for the bug report.
+  - type: dropdown
+    id: existing-issue
+    attributes:
+      label: 'Verified issue does not already exist?'
+      description: 'Please search to see if an issue already exists for the issue you encountered.'
+      options:
+        - 'I have searched and found no existing issue'
+    validations:
+      required: true
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Also tell us, what did you expect to happen?
+      placeholder: Tell us what you see!
+      value: 'A bug happened!'
+    validations:
+      required: true
+  - type: textarea
+    id: errors-received
+    attributes:
+      label: 'What error did you receive?'
+      description: 'If you received an error or a message on the screen, please provide that here.'
+    validations:
+      required: false
+  - type: markdown
+    id: env-info
+    attributes:
+      value: '## Environment Details'
+  - type: dropdown
+    id: hosting
+    attributes:
+      label: Where are you hosting Actual?
+      description: Where are you running your instance of Actual from?
+      options:
+        - Locally via Yarn
+        - Docker
+        - Fly.io
+        - NAS
+        - Other
+    validations:
+      required: false
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+        - Other
+  - type: dropdown
+    id: operating-system
+    attributes:
+      label: Operating System
+      description: What version of our software are you running?
+      options:
+        - Windows 11
+        - Windows 10
+        - Linux
+        - Mobile Device
+        - Other
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Feature Request?
+    url: https://github.com/actualbudget/actual/discussions/new?category=ideas
+    about: Website is hosted via GitHub Discussions under actualbudget/actual

.github/workflows/opened-issues-triage.yml

@@ -0,0 +1,14 @@
+name: Mark new issue for triage
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  needs-triage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions-ecosystem/action-add-labels@v1
+        with:
+          labels: needs triage

jest-babel-transformer-esm.js

@@ -1,24 +0,0 @@
-const { join, resolve } = require('path');
-const { createTransformer } = require('babel-jest');
-const packagePath = resolve('./');
-
-const packageGlob = join(packagePath, 'packages/*');
-
-module.exports = createTransformer({
-  babelrcRoots: packageGlob,
-
-  // TODO: This is awful and a mess and we should fix it.
-  //
-  // Forcing this on allows certain packages in node_modules to be
-  // exported as ESM, which jest usually errors on. node_modules are
-  // usually not transformed, but you can allowlist one in the
-  // `jest.config.js` for your project like this:
-  //
-  // transformIgnorePatterns: [
-  //   '/node_modules/(?!absurd-sql)'
-  // ],
-  //
-  // Without this explicit plugin, even though Jest transforms the
-  // module it won't recognize ESM
-  plugins: ['@babel/plugin-transform-modules-commonjs']
-});

jest-babel-transformer.js

@@ -1,9 +0,0 @@
-const { join, resolve } = require('path');
-const { createTransformer } = require('babel-jest');
-const packagePath = resolve('./');
-
-const packageGlob = join(packagePath, 'packages/*');
-
-module.exports = createTransformer({
-  babelrcRoots: packageGlob
-});

jest.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  projects: [
-    '<rootDir>/packages/loot-core',
-    '<rootDir>/packages/loot-core/jest.web.config.js',
-    '<rootDir>/packages/loot-design',
-    '<rootDir>/packages/loot-design/jest.rn.config.js'
-  ]
-};

package.json

@@ -25,16 +25,14 @@
     "start:browser": "npm-run-all --parallel 'start:browser-*'",
     "start:browser-backend": "yarn workspace loot-core watch:browser",
     "start:browser-frontend": "yarn workspace @actual-app/web start:browser",
-    "test": "./node_modules/.bin/jest --maxWorkers=4",
+    "test": "yarn workspaces foreach --parallel --verbose run test",
-    "test:debug": "node ./node_modules/.bin/jest --runInBand --useStderr",
+    "test:debug": "yarn workspaces foreach --verbose run test",
-    "test:debug-brk": "node --inspect-brk ./node_modules/.bin/jest --runInBand",
     "rebuild-electron": "./node_modules/.bin/electron-rebuild -f -m ./packages/loot-core",
     "rebuild-node": "yarn workspace loot-core rebuild",
-    "lint": "yarn workspace loot-core lint",
+    "lint": "yarn workspaces foreach --verbose run lint",
     "postinstall": "rm -rf ./packages/loot-design/node_modules/react && rm -rf ./packages/mobile/node_modules/react && rm -rf ./node_modules/react-native && patch-package"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.18.2",
     "cross-env": "^5.1.5",
     "husky": "^3.0.4",
     "npm-run-all": "^4.1.3",

packages/desktop-client/package.json

@@ -34,6 +34,7 @@
     "eslint-plugin-flowtype": "2.50.1",
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "7.11.1",
     "file-loader": "2.0.0",
     "focus-visible": "^4.1.1",
@@ -86,7 +87,8 @@
     "start:browser": "./bin/watch-browser",
     "watch": "cross-env PORT=3001 node scripts/start.js",
     "build": "cross-env INLINE_RUNTIME_CHUNK=false node scripts/build.js",
-    "build:browser": "./bin/build-browser"
+    "build:browser": "./bin/build-browser",
+    "lint": "eslint src"
   },
   "browserslist": [
     "electron 3.0"

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

@@ -6,8 +6,8 @@ import {
   init as initConnection,
   send
 } from 'loot-core/src/platform/client/fetch';
-import installPolyfills from '../polyfills';
 import { styles, hasHiddenScrollbars } from 'loot-design/src/style';
+import installPolyfills from '../polyfills';
 import FatalError from './FatalError';
 import ManagementApp from './manager/ManagementApp';
 import FinancesApp from './FinancesApp';

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

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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 import * as actions from 'loot-core/src/client/actions';

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   send,
   init as initConnection
@@ -12,7 +11,7 @@ import {
   Input,
   InlineField
 } from 'loot-design/src/components/common';
-import { styles, colors } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style';
 
 require('codemirror/lib/codemirror.css');
 require('codemirror/theme/monokai.css');

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

@@ -10,15 +10,15 @@ import { SpreadsheetProvider } from 'loot-core/src/client/SpreadsheetProvider';
 import checkForUpgradeNotifications from 'loot-core/src/client/upgrade-notifications';
 import { colors } from 'loot-design/src/style';
 import { View } from 'loot-design/src/components/common';
-import BankSyncStatus from './BankSyncStatus';
 import { BudgetMonthCountProvider } from 'loot-design/src/components/budget/BudgetMonthCountContext';
 import * as undo from 'loot-core/src/platform/client/undo';
-import { PageTypeProvider } from './Page';
-import { getLocationState } from '../util/location-state';
-import { ActiveLocationProvider } from './ActiveLocation';
-import { makeLocationState } from '../util/location-state';
 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';

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

@@ -2,7 +2,6 @@ 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 { send } from 'loot-core/src/platform/client/fetch';
 import {
   View,
   Text,
@@ -11,7 +10,6 @@ import {
   Menu
 } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
-import ExclamationSolid from 'loot-design/src/svg/v1/ExclamationSolid';
 
 function LoggedInUser({
   history,

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

@@ -6,25 +6,24 @@ 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 { getModalRoute } from '../util';
 
-import CreateAccount from './modals/CreateAccount';
 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';
 import ConfigureLinkedAccounts from 'loot-design/src/components/modals/ConfigureLinkedAccounts';
 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';
 import EditRule from './modals/EditRule';
 import MergeUnusedPayees from './modals/MergeUnusedPayees';
-import PlaidExternalMsg from 'loot-design/src/components/modals/PlaidExternalMsg';
 import ConfirmCategoryDelete from './modals/ConfirmCategoryDelete';
 import WelcomeScreen from './modals/WelcomeScreen';
-import ImportTransactions from 'loot-design/src/components/modals/ImportTransactions';
 import CreateEncryptionKey from './modals/CreateEncryptionKey';
 import FixEncryptionKey from './modals/FixEncryptionKey';
-import EditField from 'loot-design/src/components/modals/EditField';
 
 function Modals({
   history,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Modal, View, Text } from 'loot-design/src/components/common';
-import { colors, styles } from 'loot-design/src/style';
+import { styles } from 'loot-design/src/style';
 
 let PageTypeContext = React.createContext({ type: 'page' });
 

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

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { css } from 'glamor';
 import { Route, Switch, Redirect } from 'react-router-dom';
@@ -8,20 +7,14 @@ import {
   View,
   Text,
   Button,
-  ButtonLink,
   ButtonWithLoading,
-  AnchorLink,
+  AnchorLink
-  Link,
-  Input
 } from 'loot-design/src/components/common';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
 import { numberFormats } from 'loot-core/src/shared/util';
 import { styles, colors } from 'loot-design/src/style';
-import { Information, Warning, Error } from 'loot-design/src/components/alerts';
+import { Information } from 'loot-design/src/components/alerts';
-import Checkmark from 'loot-design/src/svg/v1/Checkmark';
-import CheveronDown from 'loot-design/src/svg/v1/CheveronDown';
 import ExpandArrow from 'loot-design/src/svg/ExpandArrow';
-import ExclamationSolid from 'loot-design/src/svg/v1/ExclamationSolid';
 import Platform from 'loot-core/src/client/platform';
 
 import useServerVersion from '../hooks/useServerVersion';

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

@@ -2,15 +2,12 @@ import React, { useState, useEffect } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { select } from 'glamor';
-import lively from '@jlongster/lively';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { styles, colors } from 'loot-design/src/style';
 import {
   Button,
   Input,
   InitialFocus,
-  View,
   Text
 } from 'loot-design/src/components/common';
 import { Sidebar } from 'loot-design/src/components/sidebar';

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+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/SyncNotifications.js

@@ -1,13 +1,3 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  Stack,
-  Button,
-  ButtonWithLoading
-} from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
-
 export function RepairSyncNotification() {}
 
 // TODO: sync button shouldn't show error status if it's a local file

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

@@ -1,10 +1,4 @@
-import React, {
+import React, { useState, useEffect, useRef, useContext } from 'react';
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  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';
@@ -22,11 +16,11 @@ import {
   P
 } from 'loot-design/src/components/common';
 import SheetValue from 'loot-design/src/components/spreadsheet/SheetValue';
-import { MonthCountSelector } from './budget/MonthCountSelector';
 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';
 import AnimatedRefresh from './AnimatedRefresh';

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

@@ -4,20 +4,16 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import { View } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
 import Intro from './tutorial/Intro';
 import BudgetSummary from './tutorial/BudgetSummary';
 import BudgetCategories from './tutorial/BudgetCategories';
 import BudgetInitial from './tutorial/BudgetInitial';
 import TransactionAdd from './tutorial/TransactionAdd';
 import TransactionEnter from './tutorial/TransactionEnter';
-import TransactionFinalize from './tutorial/TransactionFinalize';
 import BudgetNewIncome from './tutorial/BudgetNewIncome';
 import CategoryBalance from './tutorial/CategoryBalance';
 import Overspending from './tutorial/Overspending';
 import BudgetNextMonth from './tutorial/BudgetNextMonth';
-import DeleteTransactions from './tutorial/DeleteTransactions';
 import Final from './tutorial/Final';
 
 function generatePath(innerRect, outerRect) {

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import lively from '@jlongster/lively';
 
 class Tutorial extends React.Component {
   static childContextTypes = {

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

@@ -2,13 +2,7 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import {
+import { View, Text, Link, Button } from 'loot-design/src/components/common';
-  View,
-  Text,
-  Block,
-  Link,
-  Button
-} from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 import Close from 'loot-design/src/svg/v1/Close';
 

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

@@ -1,27 +1,9 @@
-import React, {
+import React, { useState, useEffect, useRef, useMemo } from 'react';
-  useState,
+import { Trans, useTranslation } from 'react-i18next';
-  useLayoutEffect,
-  useEffect,
-  useRef,
-  useMemo,
-  useReducer,
-  useCallback
-} from 'react';
 import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
 import { useSelector, useDispatch } from 'react-redux';
-import {
+import { Redirect, useParams, useHistory, useLocation } from 'react-router-dom';
-  Redirect,
-  withRouter,
-  useParams,
-  useHistory,
-  useLocation
-} from 'react-router-dom';
-import { css } from 'glamor';
-import Modal from 'react-modal';
-import Component from '@reactions/component';
 import { debounce } from 'debounce';
-import SpreadsheetContext from 'loot-design/src/components/spreadsheet/SpreadsheetContext';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
 import * as actions from 'loot-core/src/client/actions';
 import {
@@ -33,7 +15,6 @@ import {
   InitialFocus,
   Tooltip,
   Menu,
-  Block,
   Stack
 } from 'loot-design/src/components/common';
 import {
@@ -41,56 +22,47 @@ import {
   applyChanges,
   groupById
 } from 'loot-core/src/shared/util';
-import * as monthUtils from 'loot-core/src/shared/months';
-import TutorialPoint from 'loot-design/src/components/TutorialPoint';
 import DotsHorizontalTriple from 'loot-design/src/svg/v1/DotsHorizontalTriple';
 import Pencil1 from 'loot-design/src/svg/v2/Pencil1';
 import SearchAlternate from 'loot-design/src/svg/v2/SearchAlternate';
 import DownloadThickBottom from 'loot-design/src/svg/v2/DownloadThickBottom';
-import AnimatedRefresh from '../AnimatedRefresh';
 import Add from 'loot-design/src/svg/v1/Add';
 import format from 'loot-design/src/components/spreadsheet/format';
 import useSheetValue from 'loot-design/src/components/spreadsheet/useSheetValue';
 import CellValue from 'loot-design/src/components/spreadsheet/CellValue';
 import ArrowButtonRight1 from 'loot-design/src/svg/v2/ArrowButtonRight1';
-import CheveronDown from 'loot-design/src/svg/v1/CheveronDown';
 import CheckCircle1 from 'loot-design/src/svg/v2/CheckCircle1';
 import Loading from 'loot-design/src/svg/v1/AnimatedLoading';
 import ArrowsExpand3 from 'loot-design/src/svg/v2/ArrowsExpand3';
 import ArrowsShrink3 from 'loot-design/src/svg/v2/ArrowsShrink3';
 import * as queries from 'loot-core/src/client/queries';
 import q, { runQuery, pagedQuery } from 'loot-core/src/client/query-helpers';
-import { queryContext } from 'loot-core/src/client/query-hooks';
 import { SelectedItemsButton } from 'loot-design/src/components/table';
-import { Query } from 'loot-core/src/shared/query';
-import * as aql from 'loot-core/src/client/query-helpers';
 import {
   deleteTransaction,
   updateTransaction,
   ungroupTransactions
 } from 'loot-core/src/shared/transactions';
+import { styles, colors } from 'loot-design/src/style';
+import {
+  SelectedProviderWithItems,
+  useSelectedItems
+} from 'loot-design/src/components/useSelected';
+import { KeyHandlers } from 'loot-design/src/components/KeyHandlers';
+import {
+  SchedulesProvider,
+  useCachedSchedules
+} from 'loot-core/src/client/data-hooks/schedules';
+import { authorizeBank } from '../../plaid';
+import AnimatedRefresh from '../AnimatedRefresh';
+import { useActiveLocation } from '../ActiveLocation';
+import { FilterButton, AppliedFilters } from './Filters';
+import TransactionList from './TransactionList';
 import {
   SplitsExpandedProvider,
   useSplitsExpanded,
   isPreviewId
 } from './TransactionsTable';
-import { styles, colors } from 'loot-design/src/style';
-import TransactionList from './TransactionList';
-import { authorizeBank } from '../../plaid';
-import {
-  SelectedProviderWithItems,
-  useSelectedItems
-} from 'loot-design/src/components/useSelected';
-import { keys } from 'loot-design/src/util/keys';
-import { KeyHandlers } from 'loot-design/src/components/KeyHandlers';
-import { FilterButton, AppliedFilters } from './Filters';
-import {
-  SchedulesProvider,
-  useCachedSchedules
-} from 'loot-core/src/client/data-hooks/schedules';
-import { getPayeesById } from 'loot-core/src/client/reducers/queries';
-import { useActiveLocation } from '../ActiveLocation';
-import { Trans, useTranslation } from 'react-i18next';
 
 function EmptyMessage({ onAdd }) {
   const { t } = useTranslation();

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

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-import { Route, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import { View, Text, Button, Tooltip } from 'loot-design/src/components/common';
+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';

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

@@ -15,7 +15,6 @@ import {
   Tooltip,
   Stack,
   Button,
-  InitialFocus,
   Menu,
   CustomSelect
 } from 'loot-design/src/components/common';
@@ -31,9 +30,9 @@ import {
 } from 'loot-core/src/shared/rules';
 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';
-import { styles, colors } from 'loot-design/src/style';
 
 let filterFields = [
   'date',

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

@@ -2,7 +2,6 @@ import React, { useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import {
   format as formatDate,
-  parse as parseDate,
   parseISO,
   isValid as isDateValid
 } from 'date-fns';
@@ -17,14 +16,9 @@ import {
   useSelectedItems,
   useSelectedDispatch
 } from 'loot-design/src/components/useSelected';
-import {
+import { integerToCurrency } from 'loot-core/src/shared/util';
-  integerToAmount,
-  amountToInteger,
-  integerToCurrency
-} from 'loot-core/src/shared/util';
 import {
   getAccountsById,
-  getPayeesById,
   getCategoriesById
 } from 'loot-core/src/client/reducers/queries';
 import ArrowsSynchronize from 'loot-design/src/svg/v2/ArrowsSynchronize';

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

@@ -1,13 +1,5 @@
-import React, {
+import React, { useRef, useEffect, useCallback, useLayoutEffect } from 'react';
-  useRef,
-  useEffect,
-  useCallback,
-  useLayoutEffect,
-  useMemo
-} from 'react';
 import { useDispatch } from 'react-redux';
-import { TransactionTable } from './TransactionsTable';
-import lively from '@jlongster/lively';
 import {
   splitTransaction,
   updateTransaction,
@@ -16,8 +8,8 @@ import {
   applyTransactionDiff
 } from 'loot-core/src/shared/transactions';
 import { send } from 'loot-core/src/platform/client/fetch';
-import { pushModal } from 'loot-core/src/client/actions/modals';
 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

@@ -5,25 +5,16 @@ import React, {
   useCallback,
   useLayoutEffect,
   useEffect,
-  useImperativeHandle,
   useContext,
   useReducer
 } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   format as formatDate,
-  parse as parseDate,
   parseISO,
   isValid as isDateValid
 } from 'date-fns';
-import q, { runQuery } from 'loot-core/src/client/query-helpers';
+import { View, Text, Tooltip, Button } from 'loot-design/src/components/common';
-import {
-  View,
-  Text,
-  Stack,
-  Tooltip,
-  Button
-} from 'loot-design/src/components/common';
 import CategoryAutocomplete from 'loot-design/src/components/CategorySelect';
 import PayeeAutocomplete from 'loot-design/src/components/PayeeAutocomplete';
 import AccountAutocomplete from 'loot-design/src/components/AccountAutocomplete';
@@ -31,15 +22,12 @@ import DateSelect from 'loot-design/src/components/DateSelect';
 import RightArrow2 from 'loot-design/src/svg/RightArrow2';
 import LeftArrow2 from 'loot-design/src/svg/LeftArrow2';
 import Hyperlink2 from 'loot-design/src/svg/v2/Hyperlink2';
-import DeleteIcon from 'loot-design/src/svg/Delete';
 import CheveronDown from 'loot-design/src/svg/v1/CheveronDown';
 import CalendarIcon from 'loot-design/src/svg/v2/Calendar';
 import ArrowsSynchronize from 'loot-design/src/svg/v2/ArrowsSynchronize';
 import {
   integerToCurrency,
   amountToInteger,
-  applyChanges,
-  debugMemoFailure,
   titleFirst
 } from 'loot-core/src/shared/util';
 import evalArithmetic from 'loot-core/src/shared/arithmetic';
@@ -48,13 +36,12 @@ import {
   getPayeesById,
   getCategoriesById
 } from 'loot-core/src/client/reducers/queries';
-import { currentDay, dayFromDate, addDays } from 'loot-core/src/shared/months';
+import { currentDay } from 'loot-core/src/shared/months';
 import {
   splitTransaction,
   updateTransaction,
   deleteTransaction,
-  addSplitTransaction,
+  addSplitTransaction
-  ungroupTransaction
 } from 'loot-core/src/shared/transactions';
 import { styles, colors } from 'loot-design/src/style';
 import {
@@ -67,18 +54,16 @@ import {
   CustomCell,
   CellButton,
   useTableNavigator,
-  Table,
+  Table
-  ROW_HEIGHT
 } from 'loot-design/src/components/table';
 import {
   useSelectedDispatch,
   useSelectedItems
 } from 'loot-design/src/components/useSelected';
-import { keys } from 'loot-design/src/util/keys';
 import { useMergedRefs } from 'loot-design/src/components/useMergedRefs';
-import { getStatusProps } from '../schedules/StatusBadge';
 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,15 +1,23 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { render, fireEvent } from '@testing-library/react';
-import { debugDOM } from 'loot-core/src/mocks/util';
 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 {
   generateTransaction,
   generateAccount,
-  generateCategoryGroups
+  generateCategoryGroups,
+  TestProvider
 } from 'loot-core/src/mocks';
+import {
+  addSplitTransaction,
+  realizeTempTransactions,
+  splitTransaction,
+  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,6 +1,6 @@
-import React, { useState, useLayoutEffect } from 'react';
+import React from 'react';
-import { styles, colors } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style';
-import { View, Text } from 'loot-design/src/components/common';
+import { View } from 'loot-design/src/components/common';
 import { useBudgetMonthCount } from 'loot-design/src/components/budget/BudgetMonthCountContext';
 import CalendarIcon from 'loot-design/src/svg/v2/Calendar';
 

packages/desktop-client/src/components/budget/budget-sheets-old.js

@@ -1,3 +1,7 @@
+import React from 'react';
+
+/* eslint-disable */
+
 function BudgetSheetHeader({ row }) {
   return (
     <Row style={{ zIndex: 200, backgroundColor: colors.grey1, marginLeft: 20 }}>

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

@@ -1,14 +1,9 @@
-import React, { useEffect, useContext, useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import { bindActionCreators } from 'redux';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import memoizeOne from 'memoize-one';
 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 { TitlebarContext } from '../Titlebar';
 
 import * as rollover from 'loot-design/src/components/budget/rollover/rollover-components';
 import { RolloverContext } from 'loot-design/src/components/budget/rollover/RolloverContext';
@@ -19,7 +14,7 @@ import { ReportProvider } from 'loot-design/src/components/budget/report/ReportC
 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';
-import { styles, colors } from 'loot-design/src/style';
+import { styles } from 'loot-design/src/style';
 import {
   addCategory,
   updateCategory,
@@ -30,6 +25,7 @@ import {
   updateGroup,
   deleteGroup
 } from 'loot-core/src/shared/categories.js';
+import { TitlebarContext } from '../Titlebar';
 
 let _initialBudgetMonth = null;
 

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

@@ -1,23 +1,16 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import * as actions from 'loot-core/src/client/actions';
 import {
   View,
   Text,
   Button,
   ButtonWithLoading
 } from 'loot-design/src/components/common';
-import { colors, styles } from 'loot-design/src/style';
+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 {
+import { Title, Input } from './subscribe/common';
-  useBootstrapped,
-  Title,
-  Input,
-  Link,
-  ExternalLink
-} from './subscribe/common';
 
 export default function ConfigServer() {
   let dispatch = useDispatch();

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

@@ -2,13 +2,13 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { createBrowserHistory } from 'history';
 import { Switch, Redirect, Router, Route } from 'react-router-dom';
-import { send } from 'loot-core/src/platform/client/fetch';
 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 ServerURL from './ServerURL';
 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';
@@ -16,7 +16,6 @@ import Bootstrap from './subscribe/Bootstrap';
 import Error from './subscribe/Error';
 import ChangePassword from './subscribe/ChangePassword';
 import ConfigServer from './ConfigServer';
-import useServerVersion from '../../hooks/useServerVersion';
 
 function Version() {
   const version = useServerVersion();

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

@@ -14,7 +14,6 @@ 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';
-import { colors } from 'loot-design/src/style';
 
 function Modals({
   modalStack,

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

@@ -1,10 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import {
+import { View, Text, AnchorLink } from 'loot-design/src/components/common';
-  View,
-  Text,
-  AnchorLink,
-  Button
-} from 'loot-design/src/components/common';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 export default function ServerURL() {

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

@@ -1,14 +1,13 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import * as actions from 'loot-core/src/client/actions';
 import { View, Text, Button } from 'loot-design/src/components/common';
-import { colors, styles } from 'loot-design/src/style';
+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, Input, Link, ExternalLink } from './common';
+import { useBootstrapped, Title } from './common';
 import { useTranslation } from 'react-i18next';
 
 export default function Bootstrap() {

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

@@ -1,19 +1,11 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import * as actions from 'loot-core/src/client/actions';
+import { View, Text, Button } from 'loot-design/src/components/common';
-import {
+import { colors } from 'loot-design/src/style';
-  View,
-  Text,
-  Button,
-  ButtonWithLoading
-} from 'loot-design/src/components/common';
-import { colors, styles } 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, Input, Link, ExternalLink } from './common';
+import { Title } from './common';
 
 export default function ChangePassword() {
   let dispatch = useDispatch();

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

@@ -1,9 +1,5 @@
 import React, { useState } from 'react';
-import {
+import { View, ButtonWithLoading } from 'loot-design/src/components/common';
-  View,
-  Button,
-  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,12 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import {
+import { View, Text, Button } from 'loot-design/src/components/common';
-  View,
+import { colors } from 'loot-design/src/style';
-  Text,
-  Button,
-  ButtonWithLoading
-} from 'loot-design/src/components/common';
-import { colors, styles } from 'loot-design/src/style';
 
 function getErrorMessage(reason) {
   switch (reason) {

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

@@ -1,18 +1,17 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import * as actions from 'loot-core/src/client/actions';
 import {
   View,
   Text,
   Button,
   ButtonWithLoading
 } from 'loot-design/src/components/common';
-import { colors, styles } from 'loot-design/src/style';
+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, Link, ExternalLink } from './common';
+import { useBootstrapped, Title, Input } from './common';
 
 export default function Login() {
   let dispatch = useDispatch();

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

@@ -1,10 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import {
-  AnchorLink,
   Text,
   Button,
-  ButtonLink,
   Input as BaseInput
 } from 'loot-design/src/components/common';
 import { colors, styles } from 'loot-design/src/style';

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

@@ -4,8 +4,7 @@ import {
   Text,
   Block,
   Modal,
-  Button,
+  Button
-  Select
 } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 import { NativeCategorySelect } from 'loot-design/src/components/CategorySelect';

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

@@ -2,15 +2,7 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import { send } from 'loot-core/src/platform/client/fetch';
+import { View, Text, Modal, Button } from 'loot-design/src/components/common';
-import {
-  View,
-  Text,
-  Modal,
-  Button,
-  Strong,
-  P
-} from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 import { authorizeBank } from '../../plaid';
 

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

@@ -3,9 +3,7 @@ import { css } from 'glamor';
 import {
   View,
   Text,
-  Stack,
   Modal,
-  Button,
   ButtonWithLoading,
   ExternalLink,
   P,
@@ -14,7 +12,7 @@ import {
   InitialFocus
 } from 'loot-design/src/components/common';
 import { send } from 'loot-core/src/platform/client/fetch';
-import { styles, colors } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style';
 import { getCreateKeyError } from 'loot-core/src/shared/errors';
 
 export default function CreateEncryptionKey({

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

@@ -1,28 +1,21 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { bindActionCreators } from 'redux';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   initiallyLoadPayees,
   setUndoEnabled
 } from 'loot-core/src/client/actions/queries';
-import * as undo from 'loot-core/src/platform/client/undo';
 import q, { runQuery } from 'loot-core/src/client/query-helpers';
 import {
   View,
   Text,
   Modal,
   Button,
-  Select,
   Stack,
-  Input,
   CustomSelect,
   Tooltip
 } from 'loot-design/src/components/common';
-import GenericInput from '../util/GenericInput';
+import { send } from 'loot-core/src/platform/client/fetch';
-import { keys } from 'loot-design/src/util/keys';
+import { colors } from 'loot-design/src/style';
-import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
-import { getStatus } from 'loot-core/src/shared/schedules';
-import { colors, styles } from 'loot-design/src/style';
 import SubtractIcon from 'loot-design/src/svg/Subtract';
 import AddIcon from 'loot-design/src/svg/Add';
 import InformationOutline from 'loot-design/src/svg/v1/InformationOutline';
@@ -39,9 +32,6 @@ import {
 import useSelected, {
   SelectedProvider
 } from 'loot-design/src/components/useSelected';
-import SimpleTransactionsTable from '../accounts/SimpleTransactionsTable';
-import { StatusBadge } from '../schedules/StatusBadge';
-import DisplayId from '../util/DisplayId';
 import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
 import {
   integerToCurrency,
@@ -49,6 +39,10 @@ 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';
+import GenericInput from '../util/GenericInput';
 import { BetweenAmountInput } from '../util/AmountInput';
 
 function updateValue(array, value, update) {

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

@@ -12,7 +12,7 @@ import {
   ExternalLink
 } from 'loot-design/src/components/common';
 import { send } from 'loot-core/src/platform/client/fetch';
-import { styles, colors } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style';
 import { getTestKeyError } from 'loot-core/src/shared/errors';
 
 export default function FixEncryptionKey({

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

@@ -1,16 +1,8 @@
-import React, {
+import React, { useState, useEffect, useRef, useCallback } from 'react';
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  useMemo,
-  useImperativeHandle
-} 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 * as actions from 'loot-core/src/client/actions';
 import { initiallyLoadPayees } from 'loot-core/src/client/actions/queries';
 import q from 'loot-core/src/client/query-helpers';
 import { liveQueryContext } from 'loot-core/src/client/query-hooks';
@@ -37,14 +29,12 @@ import useSelected, {
   SelectedProvider
 } from 'loot-design/src/components/useSelected';
 import { integerToCurrency } from 'loot-core/src/shared/util';
-import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
+import { send } from 'loot-core/src/platform/client/fetch';
 import { pushModal } from 'loot-core/src/client/actions/modals';
 import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
 import ArrowRight from 'loot-design/src/svg/RightArrow2';
-import InformationOutline from 'loot-design/src/svg/v1/InformationOutline';
+import { colors } from 'loot-design/src/style';
-import ExpandArrow from 'loot-design/src/svg/ExpandArrow';
+import { getMonthYearFormat } from 'loot-core/src/shared/months';
-import { colors, styles } from 'loot-design/src/style';
-import { dayFromDate, getMonthYearFormat } from 'loot-core/src/shared/months';
 import {
   extractScheduleConds,
   getRecurringDescription

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

@@ -6,11 +6,10 @@ import {
   Modal,
   ModalButtons,
   Button,
-  P,
+  P
-  Stack
 } from 'loot-design/src/components/common';
 import { Information } from 'loot-design/src/components/alerts';
-import { colors, styles } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { replaceModal } from 'loot-core/src/client/actions/modals';
 

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

@@ -3,9 +3,7 @@ import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
 import {
   View,
-  Text,
   Modal,
-  Button,
   P,
   ExternalLink
 } from 'loot-design/src/components/common';

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

@@ -1,10 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { bindActionCreators } from 'redux';
 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 uuid from 'loot-core/src/platform/uuid';
+import { send, listen } from 'loot-core/src/platform/client/fetch';
-import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
 import { ManagePayees } from 'loot-design/src/components/payees';
 import { applyChanges } from 'loot-core/src/shared/util';
 

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

@@ -11,14 +11,13 @@ import { styles } from 'loot-design/src/style';
 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 { fromDateRepr } from './util';
+import { colors } from 'loot-design/src/style';
 import Header from './Header';
 import Change from './Change';
 import CashFlowGraph from './graphs/CashFlowGraph';
 import { cashFlowByDate } from './graphs/cash-flow-spreadsheet';
 import useReport from './useReport';
 import { useArgsMemo } from './util';
-import { colors } from 'loot-design/src/style';
 
 function CashFlow() {
   const [earliestMonth, setEarliestMonth] = useState(null);

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { colors, styles } from 'loot-design/src/style';
+import { styles } from 'loot-design/src/style';
 import {
   View,
   Select,
-  Link,
   Button,
   ButtonLink
 } from 'loot-design/src/components/common';

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

@@ -8,10 +8,10 @@ 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';
-import { colors } from 'loot-design/src/style';
 
 function CashFlowGraph({ style, start, end, graphData, isConcise, compact }) {
   return (

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { mergeObjects, flattenArray } from 'loot-core/src/shared/util';
 import * as monthUtils from 'loot-core/src/shared/months';
 import * as d from 'date-fns';
 import { AlignedText } from 'loot-design/src/components/common';
@@ -9,7 +8,7 @@ import {
   integerToAmount,
   amountToInteger
 } from 'loot-core/src/shared/util';
-import { fromDateRepr, runAll, index } from '../util';
+import { index } from '../util';
 
 export default function createSpreadsheet(start, end, accounts) {
   return async (spreadsheet, setData) => {

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

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

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

@@ -1,13 +1,10 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
 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 { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
 import { send } from 'loot-core/src/platform/client/fetch';
 import {
   View,
-  Text,
   Stack,
   Button,
   ButtonWithLoading,
@@ -18,19 +15,18 @@ import {
   TableHeader,
   Row,
   Field,
-  Cell,
   SelectCell
 } from 'loot-design/src/components/table';
 import { getRecurringDescription } from 'loot-core/src/shared/schedules';
-import { colors, styles } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style';
 import useSelected, {
   useSelectedDispatch,
   useSelectedItems,
   SelectedProvider
 } from 'loot-design/src/components/useSelected';
 import { Page } from '../Page';
-import { ScheduleAmountCell } from './SchedulesTable';
 import DisplayId from '../util/DisplayId';
+import { ScheduleAmountCell } from './SchedulesTable';
 
 let ROW_HEIGHT = 43;
 

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

@@ -1,8 +1,7 @@
-import React, { useEffect, useState, useReducer } from 'react';
+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 { css } from 'glamor';
 import { send, sendCatch } from 'loot-core/src/platform/client/fetch';
 import q, { runQuery, liveQuery } from 'loot-core/src/client/query-helpers';
 import { extractScheduleConds } from 'loot-core/src/shared/schedules';
@@ -13,31 +12,21 @@ import {
   FormLabel,
   Checkbox
 } from 'loot-design/src/components/forms';
-import { colors, styles } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style';
 import PayeeAutocomplete from 'loot-design/src/components/PayeeAutocomplete';
 import AccountAutocomplete from 'loot-design/src/components/AccountAutocomplete';
-import {
+import { Stack, View, Text, Button } from 'loot-design/src/components/common';
-  Stack,
-  Input,
-  InputWithContent,
-  View,
-  Text,
-  Button,
-  ModalButtons
-} from 'loot-design/src/components/common';
 import DateSelect from 'loot-design/src/components/DateSelect';
 import { SelectedItemsButton } from 'loot-design/src/components/table';
-import SimpleTransactionsTable from '../accounts/SimpleTransactionsTable';
-import { usePageType } from '../Page';
-import { Page } from '../Page';
 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';
 import { OpSelect } from '../modals/EditRule';
 import { AmountInput, BetweenAmountInput } from '../util/AmountInput';
-import { SchedulesProviderRaw } from 'loot-core/src/client/data-hooks/schedules';
-
-import RecurringSchedulePicker from 'loot-design/src/components/RecurringSchedulePicker';
 
 function mergeFields(defaults, initial) {
   let res = { ...defaults };

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

@@ -3,7 +3,7 @@ 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 { View, Text } from 'loot-design/src/components/common';
+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,19 +1,10 @@
 import React 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 {
+import { Text, P, Button, Stack } from 'loot-design/src/components/common';
-  View,
+import { colors } from 'loot-design/src/style';
-  Text,
-  P,
-  Button,
-  Stack
-} from 'loot-design/src/components/common';
 import { Page } from '../Page';
-import { SchedulesTable } from './SchedulesTable';
 import DisplayId from '../util/DisplayId';
-import { colors, styles } from 'loot-design/src/style';
 
 export default function PostsOfflineNotification() {
   let location = useLocation();

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

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { integerToCurrency } from 'loot-core/src/shared/util';
-import { colors, styles } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style';
 import {
   View,
   Text,
@@ -14,8 +14,7 @@ import {
   TableHeader,
   Row,
   Field,
-  Cell,
+  Cell
-  SelectCell
 } from 'loot-design/src/components/table';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { getScheduledAmount } from 'loot-core/src/shared/schedules';

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

@@ -1,16 +1,9 @@
-import React, { useMemo, useEffect, useState } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
-import {
+import { View, Button } from 'loot-design/src/components/common';
-  View,
-  Text,
-  Button,
-  Tooltip,
-  Menu
-} from 'loot-design/src/components/common';
-import { colors, styles } from 'loot-design/src/style';
 import { send } from 'loot-core/src/platform/client/fetch';
-import { Page } from '../Page';
 import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
+import { Page } from '../Page';
 import { SchedulesTable, ROW_HEIGHT } from './SchedulesTable';
 
 export default function Schedules() {

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

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

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

@@ -1,7 +1,7 @@
 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 { styles, colors } from 'loot-design/src/style';
 import { Title } from './common';
 
 function BudgetInitial({ targetRect, navigationProps }) {

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import { View, P, Button } from 'loot-design/src/components/common';
+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,7 +1,7 @@
 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 { styles, colors } from 'loot-design/src/style';
 import { Title } from './common';
 
 function BudgetSummary({ targetRect, navigationProps }) {

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

@@ -2,15 +2,8 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import {
+import { View, P, Button } from 'loot-design/src/components/common';
-  View,
-  Tooltip,
-  Pointer,
-  P,
-  Button
-} from 'loot-design/src/components/common';
 import Navigation from './Navigation';
-import { styles, colors } from 'loot-design/src/style';
 import { Standalone, Title, useMinimized } from './common';
 
 function BudgetNextMonth({ stepTwo, navigationProps }) {

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

@@ -1,7 +1,7 @@
 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 { styles, colors } from 'loot-design/src/style';
 import { Title } from './common';
 
 function BudgetSummary({ fromYNAB, targetRect, navigationProps }) {

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

@@ -1,7 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
-import { Tooltip, Pointer, P, Button } from 'loot-design/src/components/common';
+import { P, Button } from 'loot-design/src/components/common';
 import Navigation from './Navigation';
-import { styles, colors } from 'loot-design/src/style';
 import { Standalone, Title, useMinimized } from './common';
 
 function CategoryBalance({ targetRect, navigationProps }) {

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { P } from 'loot-design/src/components/common';
 import Navigation from './Navigation';
-import { styles, colors } from 'loot-design/src/style';
 import { Standalone, Title } from './common';
 
 function DeleteTransactions({ targetRect, navigationProps }) {

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

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

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

@@ -2,12 +2,10 @@ import React from 'react';
 import {
   View,
   Text,
-  Block,
   P,
   ModalButtons,
   Button
 } from 'loot-design/src/components/common';
-import { styles, colors } from 'loot-design/src/style';
 import { Standalone, Title, ExternalLink } from './common';
 
 function Intro({ fromYNAB, nextTutorialStage, closeTutorial }) {

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

@@ -2,21 +2,12 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from 'loot-core/src/client/actions';
-import * as spreadsheet from 'loot-core/src/client/sheetql/spreadsheet';
 import SheetValue from 'loot-design/src/components/spreadsheet/SheetValue';
 import NamespaceContext from 'loot-design/src/components/spreadsheet/NamespaceContext';
-import {
+import { P, View, Text, Button } from 'loot-design/src/components/common';
-  Tooltip,
-  Pointer,
-  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 { colors } from 'loot-design/src/style';
 import { Standalone, Title, useMinimized } from './common';
 
 function Overspending({ navigationProps, stepTwo }) {

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

@@ -1,7 +1,7 @@
 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 { styles, colors } from 'loot-design/src/style';
 import { Title } from './common';
 
 function TransactionAdd({ targetRect, navigationProps }) {

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { View, Tooltip, Pointer, P } from 'loot-design/src/components/common';
+import { P } from 'loot-design/src/components/common';
-import Navigation from './Navigation';
-import { styles, colors } from 'loot-design/src/style';
 import * as monthUtils from 'loot-core/src/shared/months';
+import Navigation from './Navigation';
 import { Standalone, Title } from './common';
 
 function TransactionEnter({ fromYNAB, navigationProps }) {

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { P } from 'loot-design/src/components/common';
 import { css } from 'glamor';
 import Navigation from './Navigation';
-import * as monthUtils from 'loot-core/src/shared/months';
 import { Standalone } from './common';
 
 function TransactionFinalize({ navigationProps }) {

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

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

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

@@ -1,10 +1,8 @@
-import React, { useMemo, useEffect, useState } from 'react';
+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 { getPayeesById } from 'loot-core/src/client/reducers/queries';
-import { groupById } from 'loot-core/src/shared/util';
 import { Text } from 'loot-design/src/components/common';
-import { colors, styles } from 'loot-design/src/style';
+import { colors } from 'loot-design/src/style';
 
 export default function DisplayId({ type, id, noneColor = colors.n8 }) {
   let DataComponent;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { format as formatDate, parse as parseDate, parseISO } from 'date-fns';
+import { getMonthYearFormat } from 'loot-core/src/shared/months';
-import { dayFromDate, getMonthYearFormat } from 'loot-core/src/shared/months';
 import { View, Input } from 'loot-design/src/components/common';
 import PayeeAutocomplete from 'loot-design/src/components/PayeeAutocomplete';
 import AccountAutocomplete from 'loot-design/src/components/AccountAutocomplete';

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

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

packages/desktop-client/src/index.js

@@ -7,7 +7,6 @@ import '@reach/listbox/styles.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './components/App';
 import {
   createStore,
   combineReducers,
@@ -21,9 +20,10 @@ 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 { handleGlobalEvents } from './global-events';
 import { initialState as initialAppState } from 'loot-core/src/client/reducers/app';
+import { handleGlobalEvents } from './global-events';
 import './locales';
+import App from './components/App';
 
 // See https://github.com/WICG/focus-visible. Only makes the blue
 // focus outline appear from keyboard events.

packages/loot-core/jest.config.js

@@ -1,16 +1,14 @@
 const isReactNative = process.env.REACT_APP_IS_REACT_NATIVE;
 
 module.exports = {
+  preset: 'ts-jest/presets/js-with-ts-esm',
   moduleFileExtensions: ['testing.js', 'electron.js']
     .concat(isReactNative ? ['ios.js', 'mobile.js'] : [])
-    .concat(['mjs', 'js', 'json']),
+    .concat(['mjs', 'js', 'ts', 'json']),
   setupFilesAfterEnv: ['<rootDir>/src/mocks/setup.js'],
   testEnvironment: 'node',
-  testPathIgnorePatterns: ['/node_modules/', '/lib/', 'index.web.test.js'],
+  testPathIgnorePatterns: ['/node_modules/', '/lib/', '.+/index.web.test.js'],
-  transformIgnorePatterns: ['__mocks__'],
+  transformIgnorePatterns: ['/node_modules/', '__mocks__'],
-  transform: {
-    '^.+\\.(js|ts|tsx)?$': '<rootDir>/../../jest-babel-transformer'
-  },
   globals: {
     __TESTING__: true
   }

packages/loot-core/jest.web.config.js

@@ -1,5 +1,6 @@
 module.exports = {
-  moduleFileExtensions: ['testing.js', 'web.js', 'mjs', 'js', 'json'],
+  preset: 'ts-jest/presets/js-with-ts-esm',
+  moduleFileExtensions: ['testing.js', 'web.js', 'mjs', 'js', 'ts', 'json'],
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['/node_modules/', '/lib/'].filter(Boolean),
   testMatch: ['**/*.web.test.js'],
@@ -7,9 +8,6 @@ module.exports = {
     '__mocks__',
     '/node_modules/(?!perf-deets|absurd-sql)'
   ],
-  transform: {
-    '^.+\\.(js|ts|tsx)?$': '<rootDir>/../../jest-babel-transformer-esm'
-  },
   globals: {
     __TESTING__: true
   }

packages/loot-core/package.json

@@ -9,7 +9,10 @@
     "build:api": "cross-env NODE_ENV=development webpack --config ./webpack/webpack.api.config.js",
     "build:browser": "cross-env NODE_ENV=production ./bin/build-browser",
     "watch:browser": "cross-env NODE_ENV=development ./bin/build-browser",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "test": "npm-run-all -cp 'test:*'",
+    "test:node": "jest -c jest.config.js",
+    "test:web": "jest -c jest.web.config.js"
   },
   "author": "",
   "license": "ISC",
@@ -39,8 +42,8 @@
     "@actual-app/api": "*",
     "@actual-app/import-ynab4": "*",
     "@babel/core": "~7.14.3",
-    "adm-zip": "cthackers/adm-zip#ff17ae85",
+    "@types/jest": "^27.5.0",
-    "babel-jest": "25.2.6",
+    "adm-zip": "^0.5.9",
     "babel-loader": "^8.0.6",
     "buffer": "^5.5.0",
     "cross-env": "^7.0.3",
@@ -52,7 +55,7 @@
     "fake-indexeddb": "^3.1.3",
     "fast-check": "2.13.0",
     "fast-glob": "^2.2.0",
-    "jest": "25.2.7",
+    "jest": "^28.1.0",
     "jsverify": "^0.8.4",
     "lru-cache": "^5.1.1",
     "memfs": "3.1.1",
@@ -60,6 +63,7 @@
     "mock-require": "^3.0.2",
     "mockdate": "^3.0.5",
     "murmurhash": "^0.0.2",
+    "npm-run-all": "^4.1.3",
     "perf-deets": "^1.0.15",
     "prettier": "^1.19.1",
     "sanitize-filename": "^1.6.1",
@@ -67,6 +71,9 @@
     "snapshot-diff": "^0.2.2",
     "source-map": "^0.7.3",
     "throttleit": "^1.0.0",
+    "ts-jest": "^28.0.1",
+    "ts-node": "^10.7.0",
+    "typescript": "^4.6.4",
     "uuid": "3.3.2",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.9",

packages/loot-core/src/server/accounts/sync.test.js

@@ -96,7 +96,7 @@ async function getAllPayees() {
   return (await db.getPayees()).filter(p => p.transfer_acct == null);
 }
 
-describe('Account sync', () => {
+describe.skip('Account sync', () => {
   test('reconcile creates payees correctly', async () => {
     monthUtils.currentDay = () => '2017-10-15';
     let mockTransactions = prepMockTransactions();
@@ -466,7 +466,7 @@ describe('Account sync', () => {
   });
 
   let testMapped = version => {
-    test(`reconcile matches unmapped and mapped payees (${version})`, async () => {
+    test.skip(`reconcile matches unmapped and mapped payees (${version})`, async () => {
       const { id: acctId } = await prepareDatabase();
 
       if (version === 'v1') {

packages/loot-core/src/server/accounts/transfer.test.js

@@ -33,7 +33,7 @@ async function prepareDatabase() {
   });
 }
 
-describe('Transfer', () => {
+describe.skip('Transfer', () => {
   test('transfers are properly inserted/updated/deleted', async () => {
     await prepareDatabase();
 

packages/loot-core/src/server/main.test.js

@@ -96,7 +96,7 @@ describe('Budgets', () => {
   });
 });
 
-describe('Accounts', () => {
+describe.skip('Accounts', () => {
   test('create accounts with correct starting balance', async () => {
     prefs.loadPrefs();
     prefs.savePrefs({ clientId: 'client', groupId: 'group' });
@@ -202,7 +202,7 @@ describe('Accounts', () => {
   });
 });
 
-describe('Budget', () => {
+describe.skip('Budget', () => {
   test('new budgets should be created', async () => {
     const spreadsheet = await sheet.loadSpreadsheet(db);
 
@@ -330,7 +330,7 @@ describe('Budget', () => {
 });
 
 describe('Categories', () => {
-  test('can be deleted', async () => {
+  test.skip('can be deleted', async () => {
     let spreadsheet = await sheet.loadSpreadsheet(db);
 
     await runMutator(async () => {

packages/loot-core/src/server/sync/index.js

@@ -25,6 +25,10 @@ import { rebuildMerkleHash } from './repair';
 const { PostError, SyncError } = require('../errors');
 const connection = require('../../platform/server/connection');
 
+export { default as makeTestMessage } from './make-test-message';
+export { default as resetSync } from './reset';
+export { default as repairSync } from './repair';
+
 let FULL_SYNC_DELAY = 1000;
 let SYNCING_MODE = 'enabled';
 
@@ -64,10 +68,6 @@ export function checkSyncingMode(mode) {
   }
 }
 
-export makeTestMessage from './make-test-message';
-export resetSync from './reset';
-export repairSync from './repair';
-
 function apply(msg, prev) {
   let { dataset, row, column, value } = msg;
 

packages/loot-core/src/server/sync/sync.test.js

@@ -18,7 +18,7 @@ afterEach(() => {
   setSyncingMode('disabled');
 });
 
-describe('Sync', () => {
+describe.skip('Sync', () => {
   it('should send messages to the server', async () => {
     prefs.loadPrefs();
     prefs.savePrefs({ groupId: 'group' });
@@ -171,7 +171,7 @@ function expectCellNotToExist(sheetName, name, voided) {
   expect(value).toBe(voided ? 0 : null);
 }
 
-describe('Sync projections', () => {
+describe.skip('Sync projections', () => {
   test('synced categories should have budgets created', async () => {
     let groupId, fooId, barId;
     await asSecondClient(async () => {

packages/loot-design/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["jwl-app", "@babel/react"]
-}

packages/loot-design/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["jwl-app", "@babel/preset-react"]
+}

packages/loot-design/jest.config.js

@@ -1,10 +1,7 @@
 module.exports = {
-  moduleFileExtensions: ['testing.js', 'web.js', 'mjs', 'js', 'json'],
+  moduleFileExtensions: ['testing.js', 'web.js', 'mjs', 'js', 'ts', 'json'],
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
-  transform: {
-    '.*': '<rootDir>/../../jest-babel-transformer'
-  },
   testPathIgnorePatterns: [
     '/node_modules/',
     '/lib/',

packages/loot-design/jest.rn.config.js

@@ -5,14 +5,12 @@ module.exports = {
     'mobile.js',
     'mjs',
     'js',
+    'ts',
     'json'
   ],
   moduleDirectories: ['<rootDir>/node_modules', 'node_modules'],
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
-  transform: {
-    '^.+\\.(js|ts|tsx)?$': '<rootDir>/../../jest-babel-transformer',
-  },
   testMatch: ['<rootDir>/src/components/mobile/**/*.test.js'],
   testPathIgnorePatterns: [
     '/node_modules/(?!loot-core).+\\.js$'

packages/loot-design/package.json

@@ -15,9 +15,12 @@
     "fast-glob": "^2.2.2",
     "formik": "^0.11.10",
     "glamor": "^2.20.40",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "memoize-one": "^4.0.0",
     "memoizee": "^0.4.12",
     "node-noop": "1.0.0",
+    "npm-run-all": "^4.1.3",
     "polished": "^1.8.1",
     "prettier": "^1.14.2",
     "prop-types": "15.6.0",
@@ -45,7 +48,10 @@
   "scripts": {
     "start": "react-scripts start",
     "start:mobile": "IS_REACT_NATIVE=1 react-scripts start",
-    "postinstall": "patch-package"
+    "postinstall": "patch-package",
+    "test": "npm-run-all -cp 'test:*'",
+    "test:web": "jest -c jest.config.js",
+    "test:react-native": "jest -c jest.rn.config.js"
   },
   "homepage": "./",
   "manifest": "manifest.json",

packages/mobile/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: "react-native"
+};

packages/mobile/package.json

@@ -8,12 +8,9 @@
     "android": "npx react-native run-android --appId com.shiftreset.actual",
     "android:prod": "rm -f ./android/app/build/generated/assets/react/release/index.android.bundle && npx react-native run-android --appId com.shiftreset.actual --variant=release",
     "ios": "react-native run-ios",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "postinstall": "patch-package"
   },
-  "jest": {
-    "preset": "react-native"
-  },
   "dependencies": {
     "@babel/core": "~7.12.9",
     "@babel/runtime": "~7.12.18",
@@ -25,6 +22,7 @@
     "@react-navigation/native-stack": "^6.1.0",
     "@reactions/component": "^2.0.2",
     "@sentry/react-native": "3.0.2",
+    "jest": "^28.1.0",
     "jsc-android": "^241213.1.0",
     "loot-core": "*",
     "memoize-one": "^4.0.0",

packages/mobile/test/jest.config.js

@@ -1,9 +1,6 @@
 module.exports = {
-  moduleFileExtensions: ['js', 'json', 'testing.js'],
+  moduleFileExtensions: ['js', 'ts', 'json', 'testing.js'],
   setupTestFrameworkScriptFile: './test/setup.js',
   testEnvironment: 'node',
   rootDir: '../',
-  transform: {
-    '^.+\\.js?$': 'babel-jest'
-  }
 };