Fix icon imports + lint errors

actualbudget · Jan 4, 2024 · 8e1d090 · 8e1d090
1 parent 19c163b
commit 8e1d090
Show file tree

Hide file tree

Showing 21 changed files with 107 additions and 103 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -244,13 +244,7 @@ module.exports = {
         './packages/api/*',
         './packages/api/app/**/*',
         './packages/crdt/**/*',
-        './packages/desktop-client/src/*',
-        './packages/desktop-client/src/components/**/*',
-        './packages/desktop-client/src/hooks/**/*',
-        // './packages/desktop-client/src/icons/**/*',
-        './packages/desktop-client/src/style/**/*',
-        './packages/desktop-client/src/types/**/*',
-        './packages/desktop-client/src/util/**/*',
+        './packages/desktop-client/**/*',
         // './packages/desktop-electron/**/*',
         // './packages/eslint-plugin-actual/**/*',
         // './packages/loot-core/*',

diff --git a/packages/desktop-client/playwright.config.js b/packages/desktop-client/playwright.config.js
@@ -41,7 +41,7 @@ expect.extend({
   },
 });
 
-// eslint-disable-next-line import/no-unused-modules
+// eslint-disable-next-line import/no-unused-modules, import/no-default-export
 export default defineConfig({
   timeout: 20000, // 20 seconds
   retries: 1,

diff --git a/packages/desktop-client/src/components/AnimatedRefresh.tsx b/packages/desktop-client/src/components/AnimatedRefresh.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { keyframes } from 'glamor';
 
-import Refresh from '../icons/v1/Refresh';
+import { SvgRefresh } from '../icons/v1';
 import { type CSSProperties } from '../style';
 
 import { View } from './common/View';
@@ -29,7 +29,7 @@ export function AnimatedRefresh({
     <View
       style={{ animation: animating ? `${spin} 1s infinite linear` : null }}
     >
-      <Refresh
+      <SvgRefresh
         width={width ? width : 14}
         height={height ? height : 14}
         style={iconStyle}

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -17,7 +17,7 @@ import { type LocalPrefs } from 'loot-core/src/types/prefs';
 import { useActions } from '../hooks/useActions';
 import { useFeatureFlag } from '../hooks/useFeatureFlag';
 import { useNavigate } from '../hooks/useNavigate';
-import { SvgArrowLeft } from '../icons/v1/ArrowLeft';
+import { SvgArrowLeft } from '../icons/v1';
 import {
   SvgAlertTriangle,
   SvgNavigationMenu,

diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx b/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 
 import { authorizeBank } from '../../gocardless';
 import { useActions } from '../../hooks/useActions';
-import ExclamationOutline from '../../icons/v1/ExclamationOutline';
+import { SvgExclamationOutline } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button } from '../common/Button';
 import { ExternalLink } from '../common/ExternalLink';
@@ -95,7 +95,9 @@ export function AccountSyncCheck() {
         }}
         onClick={() => setOpen(true)}
       >
-        <ExclamationOutline style={{ width: 14, height: 14, marginRight: 5 }} />{' '}
+        <SvgExclamationOutline
+          style={{ width: 14, height: 14, marginRight: 5 }}
+        />{' '}
         This account is experiencing connection problems. Let’s fix it.
       </Button>
 

diff --git a/packages/desktop-client/src/components/accounts/Balance.jsx b/packages/desktop-client/src/components/accounts/Balance.jsx
@@ -5,7 +5,7 @@ import q from 'loot-core/src/client/query-helpers';
 import { getScheduledAmount } from 'loot-core/src/shared/schedules';
 
 import { useSelectedItems } from '../../hooks/useSelected';
-import ArrowButtonRight1 from '../../icons/v2/ArrowButtonRight1';
+import { SvgArrowButtonRight1 } from '../../icons/v2';
 import { theme } from '../../style';
 import { Button } from '../common/Button';
 import { Text } from '../common/Text';
@@ -167,7 +167,7 @@ export function Balances({
           }}
         />
 
-        <ArrowButtonRight1
+        <SvgArrowButtonRight1
           style={{
             width: 10,
             height: 10,

diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.jsx b/packages/desktop-client/src/components/accounts/MobileAccountDetails.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useMemo } from 'react';
 
 import { useActions } from '../../hooks/useActions';
-import Add from '../../icons/v1/Add';
-import SearchAlternate from '../../icons/v2/SearchAlternate';
+import { SvgAdd } from '../../icons/v1';
+import { SvgSearchAlternate } from '../../icons/v2';
 import { theme } from '../../style';
 import { ButtonLink } from '../common/ButtonLink';
 import { InputWithContent } from '../common/InputWithContent';
@@ -30,7 +30,7 @@ function TransactionSearchInput({ accountName, onSearch }) {
     >
       <InputWithContent
         leftContent={
-          <SearchAlternate
+          <SvgSearchAlternate
             style={{
               width: 13,
               height: 13,
@@ -104,7 +104,7 @@ export function AccountDetails({
           }}
           activeStyle={{ background: 'transparent' }}
         >
-          <Add width={20} height={20} />
+          <SvgAdd width={20} height={20} />
         </ButtonLink>
       }
       padding={0}

diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.jsx b/packages/desktop-client/src/components/accounts/MobileAccounts.jsx
@@ -7,7 +7,7 @@ import { useActions } from '../../hooks/useActions';
 import { useCategories } from '../../hooks/useCategories';
 import { useNavigate } from '../../hooks/useNavigate';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
-import Add from '../../icons/v1/Add';
+import { SvgAdd } from '../../icons/v1';
 import { theme, styles } from '../../style';
 import { Button } from '../common/Button';
 import { Text } from '../common/Text';
@@ -171,7 +171,7 @@ function AccountList({
           hoveredStyle={noBackgroundColorStyle}
           onClick={onAddAccount}
         >
-          <Add width={20} height={20} />
+          <SvgAdd width={20} height={20} />
         </Button>
       }
       padding={0}

diff --git a/packages/desktop-client/src/components/accounts/Reconcile.jsx b/packages/desktop-client/src/components/accounts/Reconcile.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import * as queries from 'loot-core/src/client/queries';
 import { currencyToInteger } from 'loot-core/src/shared/util';
 
-import CheckCircle1 from '../../icons/v2/CheckCircle1';
+import { SvgCheckCircle1 } from '../../icons/v2';
 import { styles, theme } from '../../style';
 import { Button } from '../common/Button';
 import { InitialFocus } from '../common/InitialFocus';
@@ -52,7 +52,7 @@ export function ReconcilingMessage({
               justifyContent: 'center',
             }}
           >
-            <CheckCircle1
+            <SvgCheckCircle1
               style={{
                 width: 13,
                 height: 13,

diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx b/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx
@@ -6,10 +6,12 @@ import memoizeOne from 'memoize-one';
 import { rolloverBudget, reportBudget } from 'loot-core/src/client/queries';
 import * as monthUtils from 'loot-core/src/shared/months';
 
-import  { useFeatureFlag } from '../../hooks/useFeatureFlag';
-import ArrowThinLeft from '../../icons/v1/ArrowThinLeft';
-import ArrowThinRight from '../../icons/v1/ArrowThinRight';
-import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import {
+  SvgArrowThinLeft,
+  SvgArrowThinRight,
+  SvgDotsHorizontalTriple,
+} from '../../icons/v1';
 import { useResponsive } from '../../ResponsiveProvider';
 import { theme, styles } from '../../style';
 import { Button } from '../common/Button';
@@ -1494,7 +1496,7 @@ function BudgetPageMenu({
         }}
         {...tooltip.getOpenEvents()}
       >
-        <DotsHorizontalTriple
+        <SvgDotsHorizontalTriple
           width="20"
           height="20"
           style={{ color: theme.mobileHeaderText }}
@@ -1560,7 +1562,7 @@ function MonthSelector({ month, monthBounds, onPrevMonth, onNextMonth }) {
           background: theme.mobileHeaderTextHover,
         }}
       >
-        <ArrowThinLeft width="15" height="15" style={{ margin: -5 }} />
+        <SvgArrowThinLeft width="15" height="15" style={{ margin: -5 }} />
       </Button>
       <Text
         style={{
@@ -1587,7 +1589,7 @@ function MonthSelector({ month, monthBounds, onPrevMonth, onNextMonth }) {
           background: theme.mobileHeaderTextHover,
         }}
       >
-        <ArrowThinRight width="15" height="15" style={{ margin: -5 }} />
+        <SvgArrowThinRight width="15" height="15" style={{ margin: -5 }} />
       </Button>
     </View>
   );

diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.jsx b/packages/desktop-client/src/components/filters/FiltersMenu.jsx
@@ -23,7 +23,7 @@ import {
 } from 'loot-core/src/shared/rules';
 import { titleFirst, integerToCurrency } from 'loot-core/src/shared/util';
 
-import DeleteIcon from '../../icons/v0/Delete';
+import { SvgDelete } from '../../icons/v0';
 import { theme } from '../../style';
 import { Button } from '../common/Button';
 import { HoverTarget } from '../common/HoverTarget';
@@ -561,7 +561,7 @@ function FilterExpression({
         </div>
       </Button>
       <Button type="bare" onClick={onDelete} aria-label="Delete filter">
-        <DeleteIcon
+        <SvgDelete
           style={{
             width: 8,
             height: 8,

diff --git a/packages/desktop-client/src/components/filters/SavedFilters.jsx b/packages/desktop-client/src/components/filters/SavedFilters.jsx
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 
 import { send, sendCatch } from 'loot-core/src/platform/client/fetch';
 
-import ExpandArrow from '../../icons/v0/ExpandArrow';
+import { SvgExpandArrow } from '../../icons/v0';
 import { theme } from '../../style';
 import { Button } from '../common/Button';
 import { Menu } from '../common/Menu';
@@ -259,7 +259,7 @@ function SavedFilterMenuButton({
           {filterId.id && filterId.status !== 'saved' && (
             <Text>(modified)&nbsp;</Text>
           )}
-          <ExpandArrow width={8} height={8} style={{ marginRight: 5 }} />
+          <SvgExpandArrow width={8} height={8} style={{ marginRight: 5 }} />
         </Button>
       )}
       {menuOpen && (

diff --git a/packages/desktop-client/src/components/modals/EditRule.jsx b/packages/desktop-client/src/components/modals/EditRule.jsx
@@ -26,9 +26,8 @@ import {
 } from 'loot-core/src/shared/util';
 
 import { useSelected, SelectedProvider } from '../../hooks/useSelected';
-import AddIcon from '../../icons/v0/Add';
-import SubtractIcon from '../../icons/v0/Subtract';
-import InformationOutline from '../../icons/v1/InformationOutline';
+import { SvgAdd, SvgSubtract } from '../../icons/v0';
+import { SvgInformationOutline } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button } from '../common/Button';
 import { Modal } from '../common/Modal';
@@ -132,7 +131,7 @@ function EditorButtons({ onAdd, onDelete, style }) {
           style={{ padding: 7 }}
           aria-label="Delete entry"
         >
-          <SubtractIcon style={{ width: 8, height: 8, color: 'inherit' }} />
+          <SvgSubtract style={{ width: 8, height: 8, color: 'inherit' }} />
         </Button>
       )}
       {onAdd && (
@@ -142,7 +141,7 @@ function EditorButtons({ onAdd, onDelete, style }) {
           style={{ padding: 7 }}
           aria-label="Add entry"
         >
-          <AddIcon style={{ width: 10, height: 10, color: 'inherit' }} />
+          <SvgAdd style={{ width: 10, height: 10, color: 'inherit' }} />
         </Button>
       )}
     </>
@@ -373,7 +372,7 @@ function StageInfo() {
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
       >
-        <InformationOutline
+        <SvgInformationOutline
           style={{ width: 11, height: 11, color: theme.pageTextLight }}
         />
       </View>

diff --git a/packages/desktop-client/src/components/payees/ManagePayees.jsx b/packages/desktop-client/src/components/payees/ManagePayees.jsx
@@ -20,7 +20,7 @@ import {
   useSelectedItems,
 } from '../../hooks/useSelected';
 import { useStableCallback } from '../../hooks/useStableCallback';
-import ExpandArrow from '../../icons/v0/ExpandArrow';
+import { SvgExpandArrow } from '../../icons/v0';
 import { theme } from '../../style';
 import { Button } from '../common/Button';
 import { Search } from '../common/Search';
@@ -243,7 +243,7 @@ export const ManagePayees = forwardRef(
                 : selected.items.size +
                   ' ' +
                   plural(selected.items.size, 'payee', 'payees')}
-              <ExpandArrow width={8} height={8} style={{ marginLeft: 5 }} />
+              <SvgExpandArrow width={8} height={8} style={{ marginLeft: 5 }} />
             </Button>
             {menuOpen && (
               <PayeeMenu

diff --git a/packages/desktop-client/src/components/reports/Header.jsx b/packages/desktop-client/src/components/reports/Header.jsx
@@ -2,7 +2,7 @@ import { useLocation } from 'react-router-dom';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
-import ArrowLeft from '../../icons/v1/ArrowLeft';
+import { SvgArrowLeft } from '../../icons/v1';
 import { styles } from '../../style';
 import { Button } from '../common/Button';
 import { ButtonLink } from '../common/ButtonLink';
@@ -93,7 +93,7 @@ export function Header({
         to="/reports"
         style={{ marginBottom: '15', alignSelf: 'flex-start' }}
       >
-        <ArrowLeft width={10} height={10} style={{ marginRight: 5 }} /> Back
+        <SvgArrowLeft width={10} height={10} style={{ marginRight: 5 }} /> Back
       </ButtonLink>
       <View style={styles.veryLargeText}>{title}</View>
 

diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.jsx b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
@@ -1,12 +1,14 @@
 import React from 'react';
 
-import Calculator from '../../icons/v1/Calculator';
-import Chart from '../../icons/v1/Chart';
-import ChartBar from '../../icons/v1/ChartBar';
-import ChartPie from '../../icons/v1/ChartPie';
-import ListBullet from '../../icons/v1/ListBullet';
-import Queue from '../../icons/v1/Queue';
-import Tag from '../../icons/v1/Tag';
+import {
+  SvgCalculator,
+  SvgChart,
+  SvgChartBar,
+  SvgChartPie,
+  SvgListBullet,
+  SvgQueue,
+  SvgTag,
+} from '../../icons/v1';
 import { theme } from '../../style';
 import { View } from '../common/View';
 import { FilterButton } from '../filters/FiltersMenu';
@@ -48,7 +50,7 @@ export function ReportTopbar({
         }}
         style={{ marginRight: 15 }}
       >
-        <Queue width={15} height={15} />
+        <SvgQueue width={15} height={15} />
       </GraphButton>
       <GraphButton
         title={mode === 'total' ? 'Bar Graph' : 'Stacked Bar Graph'}
@@ -68,7 +70,7 @@ export function ReportTopbar({
         }}
         style={{ marginRight: 15 }}
       >
-        <ChartBar width={15} height={15} />
+        <SvgChartBar width={15} height={15} />
       </GraphButton>
       <GraphButton
         title="Area Graph"
@@ -82,7 +84,7 @@ export function ReportTopbar({
         style={{ marginRight: 15 }}
         disabled={mode === 'total' ? false : true}
       >
-        <Chart width={15} height={15} />
+        <SvgChart width={15} height={15} />
       </GraphButton>
       <GraphButton
         title="Donut Graph"
@@ -95,7 +97,7 @@ export function ReportTopbar({
         style={{ marginRight: 15 }}
         disabled={mode === 'total' ? false : true}
       >
-        <ChartPie width={15} height={15} />
+        <SvgChartPie width={15} height={15} />
       </GraphButton>
       <View
         style={{
@@ -117,7 +119,7 @@ export function ReportTopbar({
           graphType === 'TableGraph' || graphType === 'AreaGraph' ? true : false
         }
       >
-        <ListBullet width={15} height={15} />
+        <SvgListBullet width={15} height={15} />
       </GraphButton>
       <GraphButton
         selected={viewSummary}
@@ -127,7 +129,7 @@ export function ReportTopbar({
         style={{ marginRight: 15 }}
         title="Show Summary"
       >
-        <Calculator width={15} height={15} />
+        <SvgCalculator width={15} height={15} />
       </GraphButton>
       <GraphButton
         selected={viewLabels}
@@ -138,7 +140,7 @@ export function ReportTopbar({
         title="Show labels"
         disabled={true}
       >
-        <Tag width={15} height={15} />
+        <SvgTag width={15} height={15} />
       </GraphButton>
       <View
         style={{