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

@@ -1,6 +1,6 @@
 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.tsx

@@ -1,62 +0,0 @@
-import React, { type ComponentProps, type ReactNode, forwardRef } from 'react';
-import { useMatch, useNavigate } from 'react-router-dom';
-
-import { type CSSProperties } from 'glamor';
-
-import { colors } from '../style';
-
-import Button from './common/Button';
-
-let externalLinkColors = {
-  purple: colors.p4,
-  blue: colors.b4,
-  muted: 'inherit',
-};
-type ExternalLinkProps = {
-  children?: ReactNode;
-  to: string;
-  linkColor?: keyof typeof externalLinkColors;
-};
-
-export 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
-    <a
-      ref={ref}
-      href={to}
-      target="_blank"
-      rel="noopener noreferrer"
-      style={{ color: externalLinkColors[linkColor] }}
-    >
-      {children}
-    </a>
-  ),
-);
-
-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);
-      }}
-    />
-  );
-}

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

@@ -0,0 +1,33 @@
+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/ExternalLink.tsx

@@ -0,0 +1,32 @@
+import React, { type ReactNode, forwardRef } from 'react';
+
+import { colors } from '../../style';
+
+let externalLinkColors = {
+  purple: colors.p4,
+  blue: colors.b4,
+  muted: 'inherit',
+};
+type ExternalLinkProps = {
+  children?: ReactNode;
+  to: string;
+  linkColor?: keyof typeof externalLinkColors;
+};
+
+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
+    <a
+      ref={ref}
+      href={to}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ color: externalLinkColors[linkColor] }}
+    >
+      {children}
+    </a>
+  ),
+);
+
+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';

upcoming-release-notes/1422.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Moving away from barrel `common` imports to more specific per-component imports (part 4)