diff --git a/packages/desktop-client/src/components/LoggedInUser.js b/packages/desktop-client/src/components/LoggedInUser.js index 558c2917468969f5160b206ddf7fb2d685601312..30fe66b065073c7995098248c93680431149ad71 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 bd5d37fe68d57048afea6daa15f58a9028c16319..3b46eb879d79b67ace753a218554e8d4796890c3 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 db6302c25f3815510e49085b3364d675e1ee7fdc..867a87a590edb713751763e90892885fd76f5f86 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 c0d61d3cdc9ce039328d1d630767c61c450409b5..df0a73319b15ad64b905e3d0c71487b2bcc6148a 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 17bd824172341dbfabdfa421442ab791f725739b..03f831b49d9e93490cae618189daa3dc821e44d8 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 0a236c3b32394f6883752b86dc8edc1e3a9a5e7c..d3f8ef124eceb3a804141b64bf95f2aaf7ae358e 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 0cf4741820606510afb0e69d75c9d5499c4c6a9c..4c9ecb5b72df34330ce807d28c4a6abf1c8716b7 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 7b2ed03e5399a2d6752b964fd38256c6c308a8b1..7e9c6e792f2abc774608f9f76b5385b188ed15b2 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 191109f669ddf91ca1af116f64d84f3850ed7f13..f698c9a36e62216a3a8a1916a5ede8151b016218 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 32845461c3910f296ffa53cf8de9146eecb034ae..0772f71d9ab0932ef0beb0613d107bc33ad6fc9f 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 4c1dacdda21bf18cd9d7281c365a535e018e4da1..cfc8c44ecad56955801037b8db75fa4d0099c7d1 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 a56afd3e73e6bdf8ab80a852b764e0a7c1346d3b..6533e11ab781ca853f49e40fdce3f3214396d7e0 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 78496230c138fbfb6f30f718d60c2e07d21ee156..0f6523c52571ed9c59092a521e4fa216248dbc89 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 97782af2279d56c5c19808296ec3b308a829ecbd..376679a242e8f4dae76a533a17ddc847f0afe4db 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 68573a38f218bdc7df55ca9d58bc788dc3717356..74e1228080f73b74432ee17742894dc41aa58d4f 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 f5c001457132945a6312eba3138e4af091cb18a3..97e6f280d550c463105456af8bb450b95066c2da 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 7f9c192f9a172f27eb7ad494b5506c2c6e3938b3..9ce50237205f993e28903c524432b18ef37ffe09 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 8118eae545228924ec09c3873aaa417c25364c36..8950da820d541915dd45717d20012c520c29f1ab 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 7549da2ceb386ed0adaf5b3a15b28f7c5e1000e9..94b63a0df059049a73988275b331c46d179831fd 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 4c54eafceef065d5964506a067d71d68ad9b2800..cbef33dcf234f5bea15433ab4e86adc7c7509c49 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 987752f157786bf5ad6176d50062c7350ebcf28d..3397be89c2c270ef4de54fce6f0c56b6a5f2c263 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 eabf7657582aa7e7c717faca9a2d712b785b73c0..38b16ce506cbcf56ecf4342370f3a3803c074a11 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 6b82f0ae0f89bed09a176ea38ddcee20b12c59fd..f58ce2ef862d07acfac12a9448e57c314442d974 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 e03dbd87bb29029d457ca61e39cfa27689c23f93..e037fb369f30d7fae8a0178dc6dcc2c058d8c08c 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 e2333b96b7d572fc6299bdda6c3a81abf198c3b9..fba46b0c34f31aabba19cb68c33fe63bd0a911af 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 910f487b33c693aa2275ee6dd1e124f07c6c3e00..7e3dc8f7a272721ae2c79dcce4cb842939a1045a 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 4b31e81e546f03eecfd82fa33f6acefcce4da7f1..7e4cac4cfb737156b6fcd1dd66b823cb8fd88058 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 afd58c3083f98103a07b4737d83df8f784c4698b..b2ed9fc035deb56351012dd18debd2d28e600535 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 c42734ed731aaa1fb0605fdb01d1de6869e5b825..34502fb48a2be36303725e5e8876851004ded819 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 dc61bdc3178b44ba7377ff350c628f947b725c28..997dffc4fb6b059acbeeacd2767ac9fcfa1b57aa 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 0ab090f6cd9f944e0c2f76ee14baa15ed8eb8283..b3369675554a3ec081a132adbc24bf2d8e853b89 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 1852588477ffdba3d005d38dbe3b3efac5e9bfb7..4e7a54100184b1463d26d47a4fbbb0d7da894a99 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 e8f04581f9235e85c8cf776cdb0a02d5d2aa045f..45d2d5887ef794578349f25fd6f191fffc214cf0 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 2cd6ef0d6adc4876d2390af2f8cc69f61817784c..6b0048edb41c3199c87629c3c666e8464367fa5e 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 89dc7439e7aab653e21791361f44c33837f1afd0..89e9ea370a207d4332a4ef21b26b78ff29b02a5e 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 51d5f501f68c64123ba93693aa3b4eb389d222b8..50027dccec458325500e66c1b9ca36ec764ffae2 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 d505a2299f58e4946f33addef5198fe229a4c184..f24f1b6ca0ae72793ec2e6e9bc747466163b1b4d 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 b94e6e581c6e5d8653fa0a9399795cff4d86d04a..83488b45ccddddb28cd361e8981dcb0ff6ffd457 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 032870e190dae27743bc67597a7af13fc3388b9c..bc7896786b774e5cd430e7c4212a0837796abee5 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 23e84f06e3a8de41ae3445f01a859b62d18554a8..7c901b5c23530565c573f2894173270789d57a2a 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 74ea84acbb43a7c6a3f6cf45fe67abaf8b84a8d6..5371392dbcc1a08371ed3b144dfea41ad7a59f24 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 0000000000000000000000000000000000000000..ddccbde45a74dd9902d407f262dd85552dc2688c --- /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)