From 60e5f1ae85b42237ee68fd510d378dd1da832e62 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Sun, 30 Jul 2023 13:22:13 +0100
Subject: [PATCH] :recycle: (common) migrating to specific common component
import paths (#1418)
Just moving away from the barrel `common` export to a bit more specific
imports.
Part 1 of the migration (other imports to follow in other PRs).
---
.../src/components/LoggedInUser.js | 6 +-
.../src/components/NotesButton.tsx | 5 +-
.../src/components/SidebarWithData.js | 7 +-
.../desktop-client/src/components/Titlebar.js | 2 +-
.../components/accounts/AccountSyncCheck.js | 5 +-
.../src/components/accounts/Header.js | 20 +++--
.../accounts/MobileAccountDetails.js | 5 +-
.../src/components/accounts/MobileAccounts.js | 5 +-
.../src/components/accounts/Reconcile.js | 3 +-
.../components/autocomplete/Autocomplete.tsx | 5 +-
.../src/components/budget/misc.js | 10 +--
.../budget/report/BudgetSummary.tsx | 18 ++---
.../components/budget/report/components.tsx | 6 +-
.../budget/rollover/BudgetSummary.tsx | 16 ++--
.../budget/rollover/HoldTooltip.tsx | 6 +-
.../budget/rollover/TransferTooltip.tsx | 6 +-
.../budget/rollover/rollover-components.tsx | 15 ++--
.../desktop-client/src/components/common.tsx | 14 +---
.../src/components/common/MenuTooltip.tsx | 2 +-
.../src/components/{ => common}/Stack.tsx | 4 +-
.../src/components/filters/FiltersMenu.js | 8 +-
.../src/components/filters/SavedFilters.js | 7 +-
.../src/components/manager/BudgetList.js | 3 +-
.../components/modals/CreateLocalAccount.js | 21 +++--
.../src/components/modals/EditRule.js | 8 +-
.../modals/GoCardlessExternalMsg.js | 16 ++--
.../src/components/payees/index.js | 7 +-
.../src/components/reports/CashFlow.js | 5 +-
.../reports/graphs/cash-flow-spreadsheet.tsx | 2 +-
.../reports/graphs/net-worth-spreadsheet.tsx | 2 +-
.../src/components/schedules/LinkSchedule.js | 4 +-
.../components/schedules/SchedulesTable.js | 6 +-
.../src/components/schedules/index.js | 4 +-
.../src/components/select/DateSelect.js | 4 +-
.../select/RecurringSchedulePicker.js | 9 ++-
.../desktop-client/src/components/sidebar.js | 6 +-
.../desktop-client/src/components/table.tsx | 15 ++--
.../desktop-client/src/components/tooltips.js | 81 +------------------
.../transactions/MobileTransaction.js | 4 +-
.../transactions/TransactionsTable.js | 5 +-
.../src/components/util/AmountInput.js | 4 +-
upcoming-release-notes/1418.md | 6 ++
42 files changed, 184 insertions(+), 203 deletions(-)
rename packages/desktop-client/src/components/{ => common}/Stack.tsx (96%)
create mode 100644 upcoming-release-notes/1418.md
diff --git a/packages/desktop-client/src/components/LoggedInUser.js b/packages/desktop-client/src/components/LoggedInUser.js
index 558c29174..30fe66b06 100644
--- a/packages/desktop-client/src/components/LoggedInUser.js
+++ b/packages/desktop-client/src/components/LoggedInUser.js
@@ -4,8 +4,12 @@ import { useSelector } from 'react-redux';
import { useActions } from '../hooks/useActions';
import { colors, styles } from '../style';
-import { View, Text, Button, Tooltip, Menu } from './common';
+import Button from './common/Button';
+import Menu from './common/Menu';
+import Text from './common/Text';
+import View from './common/View';
import { useServerURL } from './ServerContext';
+import { Tooltip } from './tooltips';
export default function LoggedInUser({ hideIfNoServer, style, color }) {
let userData = useSelector(state => state.userData);
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index bd5d37fe6..3b46eb879 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -9,7 +9,10 @@ import { send } from 'loot-core/src/platform/client/fetch';
import CustomNotesPaper from '../icons/v2/CustomNotesPaper';
import { colors } from '../style';
-import { View, Button, Tooltip, useTooltip, Text } from './common';
+import Button from './common/Button';
+import Text from './common/Text';
+import View from './common/View';
+import { Tooltip, useTooltip } from './tooltips';
type NotesTooltipProps = {
editable?: boolean;
diff --git a/packages/desktop-client/src/components/SidebarWithData.js b/packages/desktop-client/src/components/SidebarWithData.js
index db6302c25..867a87a59 100644
--- a/packages/desktop-client/src/components/SidebarWithData.js
+++ b/packages/desktop-client/src/components/SidebarWithData.js
@@ -11,8 +11,13 @@ import { useActions } from '../hooks/useActions';
import ExpandArrow from '../icons/v0/ExpandArrow';
import { styles, colors } from '../style';
-import { Button, Input, InitialFocus, Text, Tooltip, Menu } from './common';
+import Button from './common/Button';
+import InitialFocus from './common/InitialFocus';
+import Input from './common/Input';
+import Menu from './common/Menu';
+import Text from './common/Text';
import { Sidebar } from './sidebar';
+import { Tooltip } from './tooltips';
function EditableBudgetName({ prefs, savePrefs }) {
let dispatch = useDispatch();
diff --git a/packages/desktop-client/src/components/Titlebar.js b/packages/desktop-client/src/components/Titlebar.js
index c0d61d3cd..df0a73319 100644
--- a/packages/desktop-client/src/components/Titlebar.js
+++ b/packages/desktop-client/src/components/Titlebar.js
@@ -34,7 +34,6 @@ import {
ButtonLink,
Button,
ButtonWithLoading,
- Tooltip,
ExternalLink,
} from './common';
import Paragraph from './common/Paragraph';
@@ -43,6 +42,7 @@ import LoggedInUser from './LoggedInUser';
import { useServerURL } from './ServerContext';
import useSheetValue from './spreadsheet/useSheetValue';
import { ThemeSelector } from './ThemeSelector';
+import { Tooltip } from './tooltips';
export let TitlebarContext = createContext();
diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js b/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
index 17bd82417..03f831b49 100644
--- a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
+++ b/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
@@ -6,7 +6,10 @@ import { authorizeBank } from '../../gocardless';
import { useActions } from '../../hooks/useActions';
import ExclamationOutline from '../../icons/v1/ExclamationOutline';
import { colors } from '../../style';
-import { View, Button, Tooltip, ExternalLink } from '../common';
+import { ExternalLink } from '../common';
+import Button from '../common/Button';
+import View from '../common/View';
+import { Tooltip } from '../tooltips';
function getErrorMessage(type, code) {
switch (type.toUpperCase()) {
diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js
index 0a236c3b3..d3f8ef124 100644
--- a/packages/desktop-client/src/components/accounts/Header.js
+++ b/packages/desktop-client/src/components/accounts/Header.js
@@ -11,17 +11,15 @@ import SvgRemove from '../../icons/v2/Remove';
import SearchAlternate from '../../icons/v2/SearchAlternate';
import { styles, colors } from '../../style';
import AnimatedRefresh from '../AnimatedRefresh';
-import {
- View,
- Button,
- MenuButton,
- MenuTooltip,
- Input,
- InputWithContent,
- InitialFocus,
- Menu,
- Stack,
-} from '../common';
+import Button from '../common/Button';
+import InitialFocus from '../common/InitialFocus';
+import Input from '../common/Input';
+import InputWithContent from '../common/InputWithContent';
+import Menu from '../common/Menu';
+import MenuButton from '../common/MenuButton';
+import MenuTooltip from '../common/MenuTooltip';
+import Stack from '../common/Stack';
+import View from '../common/View';
import { FilterButton } from '../filters/FiltersMenu';
import { FiltersStack } from '../filters/SavedFilters';
import { KeyHandlers } from '../KeyHandlers';
diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
index 0cf474182..4c9ecb5b7 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
@@ -5,8 +5,11 @@ import Add from '../../icons/v1/Add';
import CheveronLeft from '../../icons/v1/CheveronLeft';
import SearchAlternate from '../../icons/v2/SearchAlternate';
import { colors, styles } from '../../style';
-import { Button, InputWithContent, Label, View } from '../common';
+import Button from '../common/Button';
+import InputWithContent from '../common/InputWithContent';
+import Label from '../common/Label';
import Text from '../common/Text';
+import View from '../common/View';
import CellValue from '../spreadsheet/CellValue';
import { TransactionList } from '../transactions/MobileTransaction';
diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
index 7b2ed03e5..7e9c6e792 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccounts.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccounts.js
@@ -7,7 +7,10 @@ import * as queries from 'loot-core/src/client/queries';
import { useActions } from '../../hooks/useActions';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import { colors, styles } from '../../style';
-import { Button, Text, TextOneLine, View } from '../common';
+import Button from '../common/Button';
+import Text from '../common/Text';
+import TextOneLine from '../common/TextOneLine';
+import View from '../common/View';
import { Page } from '../Page';
import CellValue from '../spreadsheet/CellValue';
diff --git a/packages/desktop-client/src/components/accounts/Reconcile.js b/packages/desktop-client/src/components/accounts/Reconcile.js
index 191109f66..f698c9a36 100644
--- a/packages/desktop-client/src/components/accounts/Reconcile.js
+++ b/packages/desktop-client/src/components/accounts/Reconcile.js
@@ -5,9 +5,10 @@ import { currencyToInteger } from 'loot-core/src/shared/util';
import CheckCircle1 from '../../icons/v2/CheckCircle1';
import { styles, colors } from '../../style';
-import { View, Text, Button, Input, InitialFocus, Tooltip } from '../common';
+import { View, Text, Button, Input, InitialFocus } from '../common';
import format from '../spreadsheet/format';
import useSheetValue from '../spreadsheet/useSheetValue';
+import { Tooltip } from '../tooltips';
export function ReconcilingMessage({
balanceQuery,
diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
index 32845461c..0772f71d9 100644
--- a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -15,7 +15,10 @@ import { type CSSProperties, css } from 'glamor';
import Remove from '../../icons/v2/Remove';
import { colors } from '../../style';
-import { View, Input, Tooltip, Button } from '../common';
+import Button from '../common/Button';
+import Input from '../common/Input';
+import View from '../common/View';
+import { Tooltip } from '../tooltips';
const inst: { lastChangeType? } = {};
diff --git a/packages/desktop-client/src/components/budget/misc.js b/packages/desktop-client/src/components/budget/misc.js
index 4c1dacdda..cfc8c44ec 100644
--- a/packages/desktop-client/src/components/budget/misc.js
+++ b/packages/desktop-client/src/components/budget/misc.js
@@ -13,14 +13,7 @@ import ExpandArrow from '../../icons/v0/ExpandArrow';
import CheveronDown from '../../icons/v1/CheveronDown';
import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
import { styles, colors } from '../../style';
-import {
- View,
- Text,
- Button,
- Tooltip,
- Menu,
- IntersectionBoundary,
-} from '../common';
+import { View, Text, Button, Menu } from '../common';
import NotesButton from '../NotesButton';
import {
useDraggable,
@@ -30,6 +23,7 @@ import {
} from '../sort';
import NamespaceContext from '../spreadsheet/NamespaceContext';
import { Row, InputCell, ROW_HEIGHT } from '../table';
+import { Tooltip, IntersectionBoundary } from '../tooltips';
import BudgetSummaries from './BudgetSummaries';
import { INCOME_HEADER_HEIGHT, MONTH_BOX_SHADOW } from './constants';
diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
index a56afd3e7..6533e11ab 100644
--- a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
@@ -16,22 +16,20 @@ import DotsHorizontalTriple from '../../../icons/v1/DotsHorizontalTriple';
import ArrowButtonDown1 from '../../../icons/v2/ArrowButtonDown1';
import ArrowButtonUp1 from '../../../icons/v2/ArrowButtonUp1';
import { colors, styles } from '../../../style';
-import {
- View,
- Text,
- Button,
- Tooltip,
- Menu,
- Stack,
- HoverTarget,
- AlignedText,
-} from '../../common';
+import AlignedText from '../../common/AlignedText';
+import Button from '../../common/Button';
+import HoverTarget from '../../common/HoverTarget';
+import Menu from '../../common/Menu';
+import Stack from '../../common/Stack';
+import Text from '../../common/Text';
+import View from '../../common/View';
import NotesButton from '../../NotesButton';
import PrivacyFilter from '../../PrivacyFilter';
import CellValue from '../../spreadsheet/CellValue';
import format from '../../spreadsheet/format';
import NamespaceContext from '../../spreadsheet/NamespaceContext';
import useSheetValue from '../../spreadsheet/useSheetValue';
+import { Tooltip } from '../../tooltips';
import { MONTH_BOX_SHADOW } from '../constants';
import { makeAmountFullStyle } from '../util';
diff --git a/packages/desktop-client/src/components/budget/report/components.tsx b/packages/desktop-client/src/components/budget/report/components.tsx
index 78496230c..0f6523c52 100644
--- a/packages/desktop-client/src/components/budget/report/components.tsx
+++ b/packages/desktop-client/src/components/budget/report/components.tsx
@@ -7,11 +7,15 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
import useFeatureFlag from '../../../hooks/useFeatureFlag';
import CheveronDown from '../../../icons/v1/CheveronDown';
import { styles, colors } from '../../../style';
-import { Button, View, Text, Tooltip, Menu, useTooltip } from '../../common';
+import Button from '../../common/Button';
+import Menu from '../../common/Menu';
+import Text from '../../common/Text';
+import View from '../../common/View';
import CellValue from '../../spreadsheet/CellValue';
import format from '../../spreadsheet/format';
import useSheetValue from '../../spreadsheet/useSheetValue';
import { Field, SheetCell } from '../../table';
+import { Tooltip, useTooltip } from '../../tooltips';
import BalanceWithCarryover from '../BalanceWithCarryover';
import { MONTH_RIGHT_PADDING } from '../constants';
import { makeAmountGrey } from '../util';
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
index 97782af22..376679a24 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -9,15 +9,12 @@ import DotsHorizontalTriple from '../../../icons/v1/DotsHorizontalTriple';
import ArrowButtonDown1 from '../../../icons/v2/ArrowButtonDown1';
import ArrowButtonUp1 from '../../../icons/v2/ArrowButtonUp1';
import { colors, styles } from '../../../style';
-import {
- View,
- Block,
- Button,
- Tooltip,
- Menu,
- HoverTarget,
- AlignedText,
-} from '../../common';
+import AlignedText from '../../common/AlignedText';
+import Block from '../../common/Block';
+import Button from '../../common/Button';
+import HoverTarget from '../../common/HoverTarget';
+import Menu from '../../common/Menu';
+import View from '../../common/View';
import NotesButton from '../../NotesButton';
import PrivacyFilter from '../../PrivacyFilter';
import CellValue from '../../spreadsheet/CellValue';
@@ -25,6 +22,7 @@ import format from '../../spreadsheet/format';
import NamespaceContext from '../../spreadsheet/NamespaceContext';
import useSheetName from '../../spreadsheet/useSheetName';
import useSheetValue from '../../spreadsheet/useSheetValue';
+import { Tooltip } from '../../tooltips';
import { MONTH_BOX_SHADOW } from '../constants';
import HoldTooltip from './HoldTooltip';
diff --git a/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx
index 68573a38f..74e122808 100644
--- a/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx
@@ -9,8 +9,12 @@ import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
import evalArithmetic from 'loot-core/src/shared/arithmetic';
import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
-import { View, Button, Tooltip, InitialFocus, Input } from '../../common';
+import Button from '../../common/Button';
+import InitialFocus from '../../common/InitialFocus';
+import Input from '../../common/Input';
+import View from '../../common/View';
import NamespaceContext from '../../spreadsheet/NamespaceContext';
+import { Tooltip } from '../../tooltips';
type HoldTooltipProps = {
onSubmit: (amount: number) => void;
diff --git a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx
index f5c001457..97e6f280d 100644
--- a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx
@@ -10,8 +10,12 @@ import evalArithmetic from 'loot-core/src/shared/arithmetic';
import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
import CategoryAutocomplete from '../../autocomplete/CategorySelect';
-import { View, Button, Tooltip, InitialFocus, Input } from '../../common';
+import Button from '../../common/Button';
+import InitialFocus from '../../common/InitialFocus';
+import Input from '../../common/Input';
+import View from '../../common/View';
import NamespaceContext from '../../spreadsheet/NamespaceContext';
+import { Tooltip } from '../../tooltips';
import { addToBeBudgetedGroup, CategoryGroupsContext } from '../util';
type TransferTooltipProps = {
diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
index 7f9c192f9..9ce502372 100644
--- a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -8,19 +8,16 @@ import useFeatureFlag from '../../../hooks/useFeatureFlag';
import CheveronDown from '../../../icons/v1/CheveronDown';
import { styles, colors } from '../../../style';
import CategoryAutocomplete from '../../autocomplete/CategorySelect';
-import {
- View,
- Text,
- useTooltip,
- InitialFocus,
- Tooltip,
- Button,
- Menu,
-} from '../../common';
+import Button from '../../common/Button';
+import InitialFocus from '../../common/InitialFocus';
+import Menu from '../../common/Menu';
+import Text from '../../common/Text';
+import View from '../../common/View';
import CellValue from '../../spreadsheet/CellValue';
import format from '../../spreadsheet/format';
import useSheetValue from '../../spreadsheet/useSheetValue';
import { Row, Field, SheetCell } from '../../table';
+import { Tooltip, useTooltip } from '../../tooltips';
import BalanceWithCarryover from '../BalanceWithCarryover';
import { MONTH_RIGHT_PADDING } from '../constants';
import {
diff --git a/packages/desktop-client/src/components/common.tsx b/packages/desktop-client/src/components/common.tsx
index 8118eae54..8950da820 100644
--- a/packages/desktop-client/src/components/common.tsx
+++ b/packages/desktop-client/src/components/common.tsx
@@ -7,27 +7,18 @@ import { colors } from '../style';
import Button from './common/Button';
-export { default as AlignedText } from './common/AlignedText';
export { default as AnchorLink } from './common/AnchorLink';
export { default as Block } from './common/Block';
export { default as Button, ButtonWithLoading } from './common/Button';
export { default as Card } from './common/Card';
export { default as Select } from './common/Select';
-export { default as FormError } from './common/FormError';
-export { default as HoverTarget } from './common/HoverTarget';
export { default as InitialFocus } from './common/InitialFocus';
-export { default as InlineField } from './common/InlineField';
export { default as Input } from './common/Input';
-export { default as InputWithContent } from './common/InputWithContent';
export { default as Label } from './common/Label';
export { default as Menu } from './common/Menu';
-export { default as MenuButton } from './common/MenuButton';
-export { default as MenuTooltip } from './common/MenuTooltip';
export { default as Modal, ModalButtons } from './common/Modal';
-export { default as Search } from './common/Search';
-export { default as Stack } from './Stack';
+export { default as Stack } from './common/Stack';
export { default as Text } from './common/Text';
-export { default as TextOneLine } from './common/TextOneLine';
export { default as View } from './common/View';
export { default as LinkButton } from './common/LinkButton';
@@ -84,6 +75,3 @@ export function ButtonLink({
/>
);
}
-
-export * from './tooltips';
-export { useTooltip } from './tooltips';
diff --git a/packages/desktop-client/src/components/common/MenuTooltip.tsx b/packages/desktop-client/src/components/common/MenuTooltip.tsx
index 7549da2ce..94b63a0df 100644
--- a/packages/desktop-client/src/components/common/MenuTooltip.tsx
+++ b/packages/desktop-client/src/components/common/MenuTooltip.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { Tooltip } from '../common';
+import { Tooltip } from '../tooltips';
export default function MenuTooltip({ width, onClose, children }) {
return (
diff --git a/packages/desktop-client/src/components/Stack.tsx b/packages/desktop-client/src/components/common/Stack.tsx
similarity index 96%
rename from packages/desktop-client/src/components/Stack.tsx
rename to packages/desktop-client/src/components/common/Stack.tsx
index 4c54eafce..cbef33dcf 100644
--- a/packages/desktop-client/src/components/Stack.tsx
+++ b/packages/desktop-client/src/components/common/Stack.tsx
@@ -7,8 +7,8 @@ import React, {
type ReactNode,
} from 'react';
-import Text from './common/Text';
-import View from './common/View';
+import Text from './Text';
+import View from './View';
function getChildren(key, children) {
return Children.toArray(children).reduce((list, child) => {
diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js
index 987752f15..3397be89c 100644
--- a/packages/desktop-client/src/components/filters/FiltersMenu.js
+++ b/packages/desktop-client/src/components/filters/FiltersMenu.js
@@ -26,8 +26,14 @@ import { titleFirst } from 'loot-core/src/shared/util';
import DeleteIcon from '../../icons/v0/Delete';
import SettingsSliderAlternate from '../../icons/v2/SettingsSliderAlternate';
import { colors } from '../../style';
-import { View, Text, Tooltip, Stack, Button, Menu, Select } from '../common';
+import Button from '../common/Button';
+import Menu from '../common/Menu';
+import Select from '../common/Select';
+import Stack from '../common/Stack';
+import Text from '../common/Text';
+import View from '../common/View';
import { Value } from '../ManageRules';
+import { Tooltip } from '../tooltips';
import GenericInput from '../util/GenericInput';
import { CondOpMenu } from './SavedFilters';
diff --git a/packages/desktop-client/src/components/filters/SavedFilters.js b/packages/desktop-client/src/components/filters/SavedFilters.js
index eabf76575..38b16ce50 100644
--- a/packages/desktop-client/src/components/filters/SavedFilters.js
+++ b/packages/desktop-client/src/components/filters/SavedFilters.js
@@ -4,7 +4,12 @@ import { send, sendCatch } from 'loot-core/src/platform/client/fetch';
import ExpandArrow from '../../icons/v0/ExpandArrow';
import { colors } from '../../style';
-import { View, Text, Button, Menu, MenuTooltip, Stack } from '../common';
+import Button from '../common/Button';
+import Menu from '../common/Menu';
+import MenuTooltip from '../common/MenuTooltip';
+import Stack from '../common/Stack';
+import Text from '../common/Text';
+import View from '../common/View';
import { FormField, FormLabel } from '../forms';
import { FieldSelect } from '../modals/EditRule';
import GenericInput from '../util/GenericInput';
diff --git a/packages/desktop-client/src/components/manager/BudgetList.js b/packages/desktop-client/src/components/manager/BudgetList.js
index 6b82f0ae0..f58ce2ef8 100644
--- a/packages/desktop-client/src/components/manager/BudgetList.js
+++ b/packages/desktop-client/src/components/manager/BudgetList.js
@@ -15,7 +15,8 @@ import Key from '../../icons/v2/Key';
import RefreshArrow from '../../icons/v2/RefreshArrow';
import { styles, colors } from '../../style';
import tokens from '../../tokens';
-import { View, Text, Button, Tooltip, Menu } from '../common';
+import { View, Text, Button, Menu } from '../common';
+import { Tooltip } from '../tooltips';
function getFileDescription(file) {
if (file.state === 'unknown') {
diff --git a/packages/desktop-client/src/components/modals/CreateLocalAccount.js b/packages/desktop-client/src/components/modals/CreateLocalAccount.js
index e03dbd87b..e037fb369 100644
--- a/packages/desktop-client/src/components/modals/CreateLocalAccount.js
+++ b/packages/desktop-client/src/components/modals/CreateLocalAccount.js
@@ -4,18 +4,15 @@ import { useNavigate } from 'react-router-dom';
import { toRelaxedNumber } from 'loot-core/src/shared/util';
import { colors } from '../../style';
-import {
- View,
- Modal,
- ModalButtons,
- Button,
- Input,
- InlineField,
- FormError,
- InitialFocus,
- Text,
- ExternalLink,
-} from '../common';
+import { ExternalLink } from '../common';
+import Button from '../common/Button';
+import FormError from '../common/FormError';
+import InitialFocus from '../common/InitialFocus';
+import InlineField from '../common/InlineField';
+import Input from '../common/Input';
+import Modal, { ModalButtons } from '../common/Modal';
+import Text from '../common/Text';
+import View from '../common/View';
function CreateLocalAccount({ modalProps, actions }) {
let navigate = useNavigate();
diff --git a/packages/desktop-client/src/components/modals/EditRule.js b/packages/desktop-client/src/components/modals/EditRule.js
index e2333b96b..fba46b0c3 100644
--- a/packages/desktop-client/src/components/modals/EditRule.js
+++ b/packages/desktop-client/src/components/modals/EditRule.js
@@ -30,8 +30,14 @@ import AddIcon from '../../icons/v0/Add';
import SubtractIcon from '../../icons/v0/Subtract';
import InformationOutline from '../../icons/v1/InformationOutline';
import { colors } from '../../style';
-import { View, Text, Modal, Button, Stack, Select, Tooltip } from '../common';
+import Button from '../common/Button';
+import Modal from '../common/Modal';
+import Select from '../common/Select';
+import Stack from '../common/Stack';
+import Text from '../common/Text';
+import View from '../common/View';
import { StatusBadge } from '../schedules/StatusBadge';
+import { Tooltip } from '../tooltips';
import SimpleTransactionsTable from '../transactions/SimpleTransactionsTable';
import { BetweenAmountInput } from '../util/AmountInput';
import DisplayId from '../util/DisplayId';
diff --git a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
index 910f487b3..7e3dc8f7a 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
+++ b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
@@ -10,17 +10,15 @@ import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
import { colors } from '../../style';
import { Error, Warning } from '../alerts';
import Autocomplete from '../autocomplete/Autocomplete';
-import {
- View,
- Modal,
- Button,
- LinkButton,
- Menu,
- Tooltip,
- ExternalLink,
-} from '../common';
+import { ExternalLink } from '../common';
+import Button from '../common/Button';
+import LinkButton from '../common/LinkButton';
+import Menu from '../common/Menu';
+import Modal from '../common/Modal';
import Paragraph from '../common/Paragraph';
+import View from '../common/View';
import { FormField, FormLabel } from '../forms';
+import { Tooltip } from '../tooltips';
import { COUNTRY_OPTIONS } from './countries';
diff --git a/packages/desktop-client/src/components/payees/index.js b/packages/desktop-client/src/components/payees/index.js
index 4b31e81e5..7e4cac4cf 100644
--- a/packages/desktop-client/src/components/payees/index.js
+++ b/packages/desktop-client/src/components/payees/index.js
@@ -25,7 +25,11 @@ import ExpandArrow from '../../icons/v0/ExpandArrow';
import Merge from '../../icons/v0/Merge';
import ArrowThinRight from '../../icons/v1/ArrowThinRight';
import { colors } from '../../style';
-import { View, Text, Input, Button, Tooltip, Menu } from '../common';
+import Button from '../common/Button';
+import Input from '../common/Input';
+import Menu from '../common/Menu';
+import Text from '../common/Text';
+import View from '../common/View';
import {
Table,
TableHeader,
@@ -36,6 +40,7 @@ import {
CellButton,
useTableNavigator,
} from '../table';
+import { Tooltip } from '../tooltips';
let getPayeesById = memoizeOne(payees => groupById(payees));
diff --git a/packages/desktop-client/src/components/reports/CashFlow.js b/packages/desktop-client/src/components/reports/CashFlow.js
index afd58c308..b2ed9fc03 100644
--- a/packages/desktop-client/src/components/reports/CashFlow.js
+++ b/packages/desktop-client/src/components/reports/CashFlow.js
@@ -8,8 +8,11 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
import useFilters from '../../hooks/useFilters';
import { colors, styles } from '../../style';
-import { View, Text, Block, AlignedText } from '../common';
+import AlignedText from '../common/AlignedText';
+import Block from '../common/Block';
import Paragraph from '../common/Paragraph';
+import Text from '../common/Text';
+import View from '../common/View';
import Change from './Change';
import { cashFlowByDate } from './graphs/cash-flow-spreadsheet';
diff --git a/packages/desktop-client/src/components/reports/graphs/cash-flow-spreadsheet.tsx b/packages/desktop-client/src/components/reports/graphs/cash-flow-spreadsheet.tsx
index c42734ed7..34502fb48 100644
--- a/packages/desktop-client/src/components/reports/graphs/cash-flow-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/cash-flow-spreadsheet.tsx
@@ -7,7 +7,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
import * as monthUtils from 'loot-core/src/shared/months';
import { integerToCurrency, integerToAmount } from 'loot-core/src/shared/util';
-import { AlignedText } from '../../common';
+import AlignedText from '../../common/AlignedText';
import { runAll, indexCashFlow } from '../util';
export function simpleCashFlow(start, end) {
diff --git a/packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx b/packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx
index dc61bdc31..997dffc4f 100644
--- a/packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx
@@ -11,7 +11,7 @@ import {
amountToInteger,
} from 'loot-core/src/shared/util';
-import { AlignedText } from '../../common';
+import AlignedText from '../../common/AlignedText';
import { index } from '../util';
export default function createSpreadsheet(
diff --git a/packages/desktop-client/src/components/schedules/LinkSchedule.js b/packages/desktop-client/src/components/schedules/LinkSchedule.js
index 0ab090f6c..b33696755 100644
--- a/packages/desktop-client/src/components/schedules/LinkSchedule.js
+++ b/packages/desktop-client/src/components/schedules/LinkSchedule.js
@@ -4,7 +4,9 @@ import { useLocation, useNavigate } from 'react-router-dom';
import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
import { send } from 'loot-core/src/platform/client/fetch';
-import { Search, Text, View } from '../common';
+import Search from '../common/Search';
+import Text from '../common/Text';
+import View from '../common/View';
import { Page } from '../Page';
import { SchedulesTable } from './SchedulesTable';
diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.js b/packages/desktop-client/src/components/schedules/SchedulesTable.js
index 185258847..4e7a54100 100644
--- a/packages/desktop-client/src/components/schedules/SchedulesTable.js
+++ b/packages/desktop-client/src/components/schedules/SchedulesTable.js
@@ -10,8 +10,12 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
import Check from '../../icons/v2/Check';
import { colors } from '../../style';
-import { View, Text, Button, Tooltip, Menu } from '../common';
+import Button from '../common/Button';
+import Menu from '../common/Menu';
+import Text from '../common/Text';
+import View from '../common/View';
import { Table, TableHeader, Row, Field, Cell } from '../table';
+import { Tooltip } from '../tooltips';
import DisplayId from '../util/DisplayId';
import { StatusBadge } from './StatusBadge';
diff --git a/packages/desktop-client/src/components/schedules/index.js b/packages/desktop-client/src/components/schedules/index.js
index e8f04581f..45d2d5887 100644
--- a/packages/desktop-client/src/components/schedules/index.js
+++ b/packages/desktop-client/src/components/schedules/index.js
@@ -4,7 +4,9 @@ import { useSchedules } from 'loot-core/src/client/data-hooks/schedules';
import { send } from 'loot-core/src/platform/client/fetch';
import { usePushModal } from '../../util/router-tools';
-import { View, Button, Search } from '../common';
+import Button from '../common/Button';
+import Search from '../common/Search';
+import View from '../common/View';
import { Page } from '../Page';
import { SchedulesTable, ROW_HEIGHT } from './SchedulesTable';
diff --git a/packages/desktop-client/src/components/select/DateSelect.js b/packages/desktop-client/src/components/select/DateSelect.js
index 2cd6ef0d6..6b0048edb 100644
--- a/packages/desktop-client/src/components/select/DateSelect.js
+++ b/packages/desktop-client/src/components/select/DateSelect.js
@@ -23,7 +23,9 @@ import {
import { stringToInteger } from 'loot-core/src/shared/util';
import { colors } from '../../style';
-import { View, Input, Tooltip } from '../common';
+import Input from '../common/Input';
+import View from '../common/View';
+import { Tooltip } from '../tooltips';
import DateSelectLeft from './DateSelect.left.png';
import DateSelectRight from './DateSelect.right.png';
diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
index 89dc7439e..89e9ea370 100644
--- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
+++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
@@ -8,8 +8,13 @@ import { getRecurringDescription } from 'loot-core/src/shared/schedules';
import AddIcon from '../../icons/v0/Add';
import SubtractIcon from '../../icons/v0/Subtract';
import { colors } from '../../style';
-import { Button, Select, Input, Tooltip, View, Text, Stack } from '../common';
-import { useTooltip } from '../tooltips';
+import Button from '../common/Button';
+import Input from '../common/Input';
+import Select from '../common/Select';
+import Stack from '../common/Stack';
+import Text from '../common/Text';
+import View from '../common/View';
+import { useTooltip, Tooltip } from '../tooltips';
import DateSelect from './DateSelect';
diff --git a/packages/desktop-client/src/components/sidebar.js b/packages/desktop-client/src/components/sidebar.js
index 51d5f501f..50027dcce 100644
--- a/packages/desktop-client/src/components/sidebar.js
+++ b/packages/desktop-client/src/components/sidebar.js
@@ -18,7 +18,11 @@ import ArrowButtonLeft1 from '../icons/v2/ArrowButtonLeft1';
import CalendarIcon from '../icons/v2/Calendar';
import { styles, colors } from '../style';
-import { View, Block, AlignedText, AnchorLink, Button } from './common';
+import AlignedText from './common/AlignedText';
+import AnchorLink from './common/AnchorLink';
+import Block from './common/Block';
+import Button from './common/Button';
+import View from './common/View';
import { useSidebar } from './FloatableSidebar';
import { useDraggable, useDroppable, DropHighlight } from './sort';
import CellValue from './spreadsheet/CellValue';
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index d505a2299..f24f1b6ca 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -30,15 +30,11 @@ import ExpandArrow from '../icons/v0/ExpandArrow';
import Checkmark from '../icons/v1/Checkmark';
import { styles, colors } from '../style';
-import {
- View,
- Text,
- Button,
- Input,
- Tooltip,
- IntersectionBoundary,
- Menu,
-} from './common';
+import Button from './common/Button';
+import Input from './common/Input';
+import Menu from './common/Menu';
+import Text from './common/Text';
+import View from './common/View';
import FixedSizeList from './FixedSizeList';
import { KeyHandlers } from './KeyHandlers';
import {
@@ -49,6 +45,7 @@ import {
import { type Binding } from './spreadsheet';
import format from './spreadsheet/format';
import useSheetValue from './spreadsheet/useSheetValue';
+import { Tooltip, IntersectionBoundary } from './tooltips';
export const ROW_HEIGHT = 32;
const TABLE_BACKGROUND_COLOR = colors.n11;
diff --git a/packages/desktop-client/src/components/tooltips.js b/packages/desktop-client/src/components/tooltips.js
index b94e6e581..83488b45c 100644
--- a/packages/desktop-client/src/components/tooltips.js
+++ b/packages/desktop-client/src/components/tooltips.js
@@ -1,7 +1,7 @@
import React, { Component, createContext, createRef, useState } from 'react';
import ReactDOM from 'react-dom';
-import { css, before } from 'glamor';
+import { css } from 'glamor';
import { styles } from '../style';
@@ -338,82 +338,3 @@ export class Tooltip extends Component {
);
}
}
-
-export function Pointer({
- pointerDirection = 'up',
- pointerPosition = 'left',
- backgroundColor,
- borderColor = '#c0c0c0',
- border = true,
- color,
- style,
- innerStyle,
- pointerStyle,
- children,
-}) {
- return (
- <div {...css({ position: 'relative' }, style)}>
- <div
- {...css(
- {
- zIndex: 3000,
- backgroundColor: backgroundColor,
- color: color,
- padding: 10,
- boxShadow: '0 2px 6px rgba(0, 0, 0, .25)',
- border: border && '1px solid ' + borderColor,
- borderRadius: 2,
- },
- before({
- position: 'absolute',
- display: 'inline-block',
- backgroundColor,
- border: border && '1px solid ' + borderColor,
- borderLeft: 0,
- borderBottom: 0,
- width: 7,
- height: 7,
- boxShadow: '1px -1px 1px rgba(0, 0, 0, .05)',
- ...(pointerDirection === 'up'
- ? {
- transform: 'rotate(-45deg)',
- top: border ? -4 : -3,
- // eslint-disable-next-line rulesdir/typography
- content: '" "',
- ...(pointerPosition === 'center'
- ? { left: 'calc(50% - 3.5px)' }
- : pointerPosition === 'left'
- ? { left: 40 }
- : { right: 40 }),
- }
- : pointerDirection === 'down'
- ? {
- transform: 'rotate(135deg)',
- bottom: border ? -4 : -3,
- // eslint-disable-next-line rulesdir/typography
- content: '" "',
- ...(pointerPosition === 'center'
- ? { left: 'calc(50% - 3.5px)' }
- : pointerPosition === 'left'
- ? { left: 40 }
- : { right: 40 }),
- }
- : pointerDirection === 'right'
- ? {
- transform: 'rotate(45deg)',
- // eslint-disable-next-line rulesdir/typography
- content: '" "',
- top: 'calc(50% - 3.5px)',
- right: -3,
- }
- : {}),
- ...pointerStyle,
- }),
- innerStyle,
- )}
- >
- {children}
- </div>
- </div>
- );
-}
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index 032870e19..bc7896786 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -25,7 +25,9 @@ import {
import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
import CheckCircle1 from '../../icons/v2/CheckCircle1';
import { styles, colors } from '../../style';
-import { Text, TextOneLine, View } from '../common';
+import Text from '../common/Text';
+import TextOneLine from '../common/TextOneLine';
+import View from '../common/View';
const zIndices = { SECTION_HEADING: 10 };
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index 23e84f06e..7c901b5c2 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -57,7 +57,9 @@ import { styles, colors } from '../../style';
import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
import CategoryAutocomplete from '../autocomplete/CategorySelect';
import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
-import { View, Text, Tooltip, Button } from '../common';
+import Button from '../common/Button';
+import Text from '../common/Text';
+import View from '../common/View';
import { getStatusProps } from '../schedules/StatusBadge';
import DateSelect from '../select/DateSelect';
import {
@@ -73,6 +75,7 @@ import {
Table,
UnexposedCellContent,
} from '../table';
+import { Tooltip } from '../tooltips';
function getDisplayValue(obj, name) {
return obj ? obj[name] : '';
diff --git a/packages/desktop-client/src/components/util/AmountInput.js b/packages/desktop-client/src/components/util/AmountInput.js
index 74ea84acb..5371392db 100644
--- a/packages/desktop-client/src/components/util/AmountInput.js
+++ b/packages/desktop-client/src/components/util/AmountInput.js
@@ -7,7 +7,9 @@ import {
import Add from '../../icons/v1/Add';
import Subtract from '../../icons/v1/Subtract';
-import { View, Button, InputWithContent } from '../common';
+import Button from '../common/Button';
+import InputWithContent from '../common/InputWithContent';
+import View from '../common/View';
export function AmountInput({ id, defaultValue = 0, onChange, style }) {
let [negative, setNegative] = useState(defaultValue <= 0);
diff --git a/upcoming-release-notes/1418.md b/upcoming-release-notes/1418.md
new file mode 100644
index 000000000..ddccbde45
--- /dev/null
+++ b/upcoming-release-notes/1418.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Moving away from barell `common` imports to more specific per-component imports (part 1)
--
GitLab