♻️ (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).

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);

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;

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();

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();
 

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()) {

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';

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';
 

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';
 

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,

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? } = {};
 

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';

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';
 

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';

packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx

@@ -9,22 +9,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,
-  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';
 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';

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;

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 = {

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 {

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';

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 (

packages/desktop-client/src/components/Stack.tsx → 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) => {

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';

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';

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') {