From 73289148dfe7f0b01870f9d9f002739f1dd7719a Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Sun, 30 Jul 2023 16:28:33 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(common)=20migrating=20to?=
=?UTF-8?q?=20specific=20common=20component=20import=20paths=20pt4=20(#142?=
=?UTF-8?q?2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Part 4 of the migration. Final moves.
Previous PR: https://github.com/actualbudget/actual/pull/1420
---
.../src/components/DevelopmentTopBar.tsx | 2 +-
.../src/components/FatalError.js | 2 +-
.../src/components/ManageRules.js | 2 +-
.../src/components/Notifications.tsx | 2 +-
.../desktop-client/src/components/Titlebar.js | 3 +-
.../components/accounts/AccountSyncCheck.js | 2 +-
.../desktop-client/src/components/common.tsx | 62 -------------------
.../src/components/common/ButtonLink.tsx | 33 ++++++++++
.../src/components/common/ExternalLink.tsx | 32 ++++++++++
.../src/components/manager/ImportYNAB5.js | 2 +-
.../src/components/manager/WelcomeScreen.js | 2 +-
.../manager/subscribe/Bootstrap.tsx | 2 +-
.../src/components/modals/CreateAccount.js | 2 +-
.../components/modals/CreateEncryptionKey.js | 2 +-
.../components/modals/CreateLocalAccount.js | 2 +-
.../src/components/modals/FixEncryptionKey.js | 2 +-
.../modals/GoCardlessExternalMsg.js | 2 +-
.../modals/GoCardlessInitialise.tsx | 2 +-
.../src/components/reports/Header.js | 2 +-
.../src/components/settings/Encryption.tsx | 2 +-
.../src/components/settings/index.tsx | 2 +-
upcoming-release-notes/1422.md | 6 ++
22 files changed, 90 insertions(+), 80 deletions(-)
delete mode 100644 packages/desktop-client/src/components/common.tsx
create mode 100644 packages/desktop-client/src/components/common/ButtonLink.tsx
create mode 100644 packages/desktop-client/src/components/common/ExternalLink.tsx
create mode 100644 upcoming-release-notes/1422.md
diff --git a/packages/desktop-client/src/components/DevelopmentTopBar.tsx b/packages/desktop-client/src/components/DevelopmentTopBar.tsx
index 8bf786a64..581f06f79 100644
--- a/packages/desktop-client/src/components/DevelopmentTopBar.tsx
+++ b/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() {
diff --git a/packages/desktop-client/src/components/FatalError.js b/packages/desktop-client/src/components/FatalError.js
index 59a50cae9..23c2346e4 100644
--- a/packages/desktop-client/src/components/FatalError.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/ManageRules.js b/packages/desktop-client/src/components/ManageRules.js
index 4d427ae58..ad50910ce 100644
--- a/packages/desktop-client/src/components/ManageRules.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index e2599bb75..02ff9c8fa 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/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';
diff --git a/packages/desktop-client/src/components/Titlebar.js b/packages/desktop-client/src/components/Titlebar.js
index 34e0f1074..779e8ee66 100644
--- a/packages/desktop-client/src/components/Titlebar.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js b/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
index 03f831b49..05f58c7cf 100644
--- a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/common.tsx b/packages/desktop-client/src/components/common.tsx
deleted file mode 100644
index a74afd246..000000000
--- a/packages/desktop-client/src/components/common.tsx
+++ /dev/null
@@ -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);
- }}
- />
- );
-}
diff --git a/packages/desktop-client/src/components/common/ButtonLink.tsx b/packages/desktop-client/src/components/common/ButtonLink.tsx
new file mode 100644
index 000000000..77688daf5
--- /dev/null
+++ b/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);
+ }}
+ />
+ );
+}
diff --git a/packages/desktop-client/src/components/common/ExternalLink.tsx b/packages/desktop-client/src/components/common/ExternalLink.tsx
new file mode 100644
index 000000000..e4fa656b5
--- /dev/null
+++ b/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;
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB5.js b/packages/desktop-client/src/components/manager/ImportYNAB5.js
index 2be944234..b30257402 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB5.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/manager/WelcomeScreen.js b/packages/desktop-client/src/components/manager/WelcomeScreen.js
index 6276a641b..1fc42330d 100644
--- a/packages/desktop-client/src/components/manager/WelcomeScreen.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
index 3d6e792e5..80d49ef10 100644
--- a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
+++ b/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';
diff --git a/packages/desktop-client/src/components/modals/CreateAccount.js b/packages/desktop-client/src/components/modals/CreateAccount.js
index e5bfbd9dd..751cd30f3 100644
--- a/packages/desktop-client/src/components/modals/CreateAccount.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
index 5644581ac..8f312e40b 100644
--- a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/modals/CreateLocalAccount.js b/packages/desktop-client/src/components/modals/CreateLocalAccount.js
index e037fb369..7a15bd7cd 100644
--- a/packages/desktop-client/src/components/modals/CreateLocalAccount.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/modals/FixEncryptionKey.js b/packages/desktop-client/src/components/modals/FixEncryptionKey.js
index a617d33b5..099bd3498 100644
--- a/packages/desktop-client/src/components/modals/FixEncryptionKey.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
index 7e3dc8f7a..a17520d5a 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
index c18a02ac7..39f8e4005 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
+++ b/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';
diff --git a/packages/desktop-client/src/components/reports/Header.js b/packages/desktop-client/src/components/reports/Header.js
index 2f1849796..b46aeba22 100644
--- a/packages/desktop-client/src/components/reports/Header.js
+++ b/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';
diff --git a/packages/desktop-client/src/components/settings/Encryption.tsx b/packages/desktop-client/src/components/settings/Encryption.tsx
index 0b0908509..6df29b85a 100644
--- a/packages/desktop-client/src/components/settings/Encryption.tsx
+++ b/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';
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index 375835c99..271845687 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/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';
diff --git a/upcoming-release-notes/1422.md b/upcoming-release-notes/1422.md
new file mode 100644
index 000000000..55e38310d
--- /dev/null
+++ b/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)
--
GitLab