(common) migrating to specific common component import paths pt4 (#1422)

Part 4 of the migration. Final moves.

Previous PR: https://github.com/actualbudget/actual/pull/1420

packages/desktop-client/src/components/DevelopmentTopBar.tsx

 import { theme } from '../style';
 
-import { ExternalLink } from './common';
+import ExternalLink from './common/ExternalLink';
 import View from './common/View';
 
 export default function DevelopmentTopBar() {

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

@@ -2,9 +2,9 @@ import React, { Component, useState } from 'react';
 
 import { theme } from '../style';
 
-import { ExternalLink } from './common';
 import Block from './common/Block';
 import Button from './common/Button';
+import ExternalLink from './common/ExternalLink';
 import LinkButton from './common/LinkButton';
 import Modal from './common/Modal';
 import Paragraph from './common/Paragraph';

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

@@ -31,8 +31,8 @@ import useSelected, {
 import ArrowRight from '../icons/v0/RightArrow2';
 import { colors } from '../style';
 
-import { ExternalLink } from './common';
 import Button from './common/Button';
+import ExternalLink from './common/ExternalLink';
 import Input from './common/Input';
 import LinkButton from './common/LinkButton';
 import Stack from './common/Stack';

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

@@ -15,8 +15,8 @@ import AnimatedLoading from '../icons/AnimatedLoading';
 import Delete from '../icons/v0/Delete';
 import { styles, colors } from '../style';
 
-import { ExternalLink } from './common';
 import Button, { ButtonWithLoading } from './common/Button';
+import ExternalLink from './common/ExternalLink';
 import LinkButton from './common/LinkButton';
 import Stack from './common/Stack';
 import Text from './common/Text';

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

@@ -28,8 +28,9 @@ import tokens from '../tokens';
 import AccountSyncCheck from './accounts/AccountSyncCheck';
 import AnimatedRefresh from './AnimatedRefresh';
 import { MonthCountSelector } from './budget/MonthCountSelector';
-import { ButtonLink, ExternalLink } from './common';
 import Button, { ButtonWithLoading } from './common/Button';
+import ButtonLink from './common/ButtonLink';
+import ExternalLink from './common/ExternalLink';
 import Paragraph from './common/Paragraph';
 import Text from './common/Text';
 import View from './common/View';

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

@@ -6,8 +6,8 @@ import { authorizeBank } from '../../gocardless';
 import { useActions } from '../../hooks/useActions';
 import ExclamationOutline from '../../icons/v1/ExclamationOutline';
 import { colors } from '../../style';
-import { ExternalLink } from '../common';
 import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import View from '../common/View';
 import { Tooltip } from '../tooltips';
 

packages/desktop-client/src/components/common/ButtonLink.tsx

+import React, { type ComponentProps } from 'react';
+import { useMatch, useNavigate } from 'react-router-dom';
+
+import { type CSSProperties } from 'glamor';
+
+import Button from './Button';
+
+type ButtonLinkProps = ComponentProps<typeof Button> & {
+  to: string;
+  activeStyle?: CSSProperties;
+};
+export default function ButtonLink({
+  to,
+  style,
+  activeStyle,
+  ...props
+}: ButtonLinkProps) {
+  const navigate = useNavigate();
+  const match = useMatch({ path: to });
+  return (
+    <Button
+      style={{
+        ...style,
+        ...(match ? activeStyle : {}),
+      }}
+      {...props}
+      onClick={e => {
+        props.onClick?.(e);
+        navigate(to);
+      }}
+    />
+  );
+}

packages/desktop-client/src/components/common.tsx → packages/desktop-client/src/components/common/ExternalLink.tsx

-import React, { type ComponentProps, type ReactNode, forwardRef } from 'react';
-import { useMatch, useNavigate } from 'react-router-dom';
+import React, { type ReactNode, forwardRef } from 'react';
 
-import { type CSSProperties } from 'glamor';
-
-import { colors } from '../style';
-
-import Button from './common/Button';
+import { colors } from '../../style';
 
 let externalLinkColors = {
   purple: colors.p4,
@@ -18,7 +13,7 @@ type ExternalLinkProps = {
   linkColor?: keyof typeof externalLinkColors;
 };
 
-export const ExternalLink = forwardRef<HTMLAnchorElement, ExternalLinkProps>(
+const ExternalLink = forwardRef<HTMLAnchorElement, ExternalLinkProps>(
   ({ children, to, linkColor = 'blue' }, ref) => (
     // we can’t use <ExternalLink /> here for obvious reasons
     // eslint-disable-next-line no-restricted-syntax
@@ -34,29 +29,4 @@ export const ExternalLink = forwardRef<HTMLAnchorElement, ExternalLinkProps>(
   ),
 );
 
-type ButtonLinkProps = ComponentProps<typeof Button> & {
-  to: string;
-  activeStyle?: CSSProperties;
-};
-export function ButtonLink({
-  to,
-  style,
-  activeStyle,
-  ...props
-}: ButtonLinkProps) {
-  const navigate = useNavigate();
-  const match = useMatch({ path: to });
-  return (
-    <Button
-      style={{
-        ...style,
-        ...(match ? activeStyle : {}),
-      }}
-      {...props}
-      onClick={e => {
-        props.onClick?.(e);
-        navigate(to);
-      }}
-    />
-  );
-}
+export default ExternalLink;

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

@@ -4,9 +4,9 @@ import { useDispatch } from 'react-redux';
 import { importBudget } from 'loot-core/src/client/actions/budgets';
 
 import { styles, colors } from '../../style';
-import { ExternalLink } from '../common';
 import Block from '../common/Block';
 import { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import Modal from '../common/Modal';
 import Paragraph from '../common/Paragraph';
 import View from '../common/View';

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

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { useActions } from '../../hooks/useActions';
 import { colors, styles } from '../../style';
-import { ExternalLink } from '../common';
 import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import Paragraph from '../common/Paragraph';
 import Text from '../common/Text';
 import View from '../common/View';

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

@@ -6,8 +6,8 @@ import { loggedIn } from 'loot-core/src/client/actions/user';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import { colors } from '../../../style';
-import { ExternalLink } from '../../common';
 import Button from '../../common/Button';
+import ExternalLink from '../../common/ExternalLink';
 import Paragraph from '../../common/Paragraph';
 import Text from '../../common/Text';
 import View from '../../common/View';

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

@@ -5,8 +5,8 @@ import { pushModal } from 'loot-core/src/client/actions/modals';
 
 import { authorizeBank } from '../../gocardless';
 import useGoCardlessStatus from '../../hooks/useGoCardlessStatus';
-import { ExternalLink } from '../common';
 import Button, { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import Modal from '../common/Modal';
 import Paragraph from '../common/Paragraph';
 import Text from '../common/Text';

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

@@ -6,8 +6,8 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import { getCreateKeyError } from 'loot-core/src/shared/errors';
 
 import { colors } from '../../style';
-import { ExternalLink } from '../common';
 import { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import InitialFocus from '../common/InitialFocus';
 import Input from '../common/Input';
 import Modal, { ModalButtons } from '../common/Modal';

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

@@ -4,8 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import { toRelaxedNumber } from 'loot-core/src/shared/util';
 
 import { colors } from '../../style';
-import { ExternalLink } from '../common';
 import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import FormError from '../common/FormError';
 import InitialFocus from '../common/InitialFocus';
 import InlineField from '../common/InlineField';

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

@@ -4,8 +4,8 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import { getTestKeyError } from 'loot-core/src/shared/errors';
 
 import { colors } from '../../style';
-import { ExternalLink } from '../common';
 import Button, { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import InitialFocus from '../common/InitialFocus';
 import Input from '../common/Input';
 import Modal, { ModalButtons } from '../common/Modal';

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

@@ -10,8 +10,8 @@ import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
 import { colors } from '../../style';
 import { Error, Warning } from '../alerts';
 import Autocomplete from '../autocomplete/Autocomplete';
-import { ExternalLink } from '../common';
 import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import LinkButton from '../common/LinkButton';
 import Menu from '../common/Menu';
 import Modal from '../common/Modal';

packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx

@@ -3,8 +3,8 @@ import React, { useState } from 'react';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import { Error } from '../alerts';
-import { ExternalLink } from '../common';
 import { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import Input from '../common/Input';
 import Modal, { ModalButtons } from '../common/Modal';
 import type { ModalProps } from '../common/Modal';

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

@@ -2,8 +2,8 @@ import * as monthUtils from 'loot-core/src/shared/months';
 
 import ArrowLeft from '../../icons/v1/ArrowLeft';
 import { styles } from '../../style';
-import { ButtonLink } from '../common';
 import Button from '../common/Button';
+import ButtonLink from '../common/ButtonLink';
 import Select from '../common/Select';
 import View from '../common/View';
 import { FilterButton, AppliedFilters } from '../filters/FiltersMenu';

packages/desktop-client/src/components/settings/Encryption.tsx

@@ -3,8 +3,8 @@ import { useSelector } from 'react-redux';
 
 import { useActions } from '../../hooks/useActions';
 import { colors } from '../../style';
-import { ExternalLink } from '../common';
 import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import Text from '../common/Text';
 import { useServerURL } from '../ServerContext';
 

packages/desktop-client/src/components/settings/index.tsx

@@ -13,8 +13,8 @@ import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { useResponsive } from '../../ResponsiveProvider';
 import { colors } from '../../style';
 import tokens from '../../tokens';
-import { ExternalLink } from '../common';
 import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
 import Input from '../common/Input';
 import Text from '../common/Text';
 import View from '../common/View';