ESLint no-default-exports 11 - icons (last one for desktop-client…

… package) (actualbudget#2173) * ESLint no-default-exports 10 - icons * Fix icon imports + lint errors * Release notes * Fix typecheck error * Fix icon import * Fix lint error
FlorianLang06 · Jan 6, 2024 · ca631f0 · ca631f0
1 parent bb01373
commit ca631f0
Show file tree

Hide file tree

Showing 448 changed files with 1,122 additions and 1,439 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/package.json b/packages/desktop-client/package.json
@@ -74,7 +74,7 @@
     "watch": "cross-env BROWSER=none yarn start",
     "build": "cross-env INLINE_RUNTIME_CHUNK=false craco build",
     "build:browser": "cross-env ./bin/build-browser",
-    "generate:icons": "rm src/icons/*/*.tsx; cd src/icons && svgr --typescript --expand-props start -d . .",
+    "generate:icons": "rm src/icons/*/*.tsx; cd src/icons && svgr --template template.ts --index-template index-template.ts --typescript --expand-props start -d . .",
     "test": "craco test",
     "e2e": "npx playwright test --browser=chromium",
     "vrt": "cross-env VRT=true npx playwright test --browser=chromium"

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/AppBackground.tsx b/packages/desktop-client/src/components/AppBackground.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { css } from 'glamor';
 
-import AnimatedLoading from '../icons/AnimatedLoading';
+import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { theme } from '../style';
 
 import { Background } from './Background';

diff --git a/packages/desktop-client/src/components/MobileBackButton.tsx b/packages/desktop-client/src/components/MobileBackButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useNavigate } from '../hooks/useNavigate';
-import CheveronLeft from '../icons/v1/CheveronLeft';
+import { SvgCheveronLeft } from '../icons/v1';
 import { type CSSProperties, styles, theme } from '../style';
 
 import { Button } from './common/Button';
@@ -30,7 +30,7 @@ export function MobileBackButton({ style }: MobileBackButtonProps) {
       }}
       onPointerUp={() => navigate(-1)}
     >
-      <CheveronLeft
+      <SvgCheveronLeft
         style={{ width: 30, height: 30, margin: -10, marginLeft: -5 }}
       />
       <Text

diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
@@ -4,7 +4,7 @@ import q from 'loot-core/src/client/query-helpers';
 import { useLiveQuery } from 'loot-core/src/client/query-hooks';
 import { send } from 'loot-core/src/platform/client/fetch';
 
-import CustomNotesPaper from '../icons/v2/CustomNotesPaper';
+import { SvgCustomNotesPaper } from '../icons/v2';
 import { type CSSProperties, theme } from '../style';
 
 import { Button } from './common/Button';
@@ -100,7 +100,7 @@ export function NotesButton({
         }}
         {...tooltip.getOpenEvents()}
       >
-        <CustomNotesPaper style={{ width, height }} />
+        <SvgCustomNotesPaper style={{ width, height }} />
       </Button>
       {tooltipOpen && (
         <NotesTooltip

diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
@@ -9,8 +9,8 @@ import { useSelector } from 'react-redux';
 import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
 
 import { useActions } from '../hooks/useActions';
-import AnimatedLoading from '../icons/AnimatedLoading';
-import Delete from '../icons/v0/Delete';
+import { AnimatedLoading } from '../icons/AnimatedLoading';
+import { SvgDelete } from '../icons/v0';
 import { styles, theme, type CSSProperties } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button';
@@ -209,7 +209,7 @@ function Notification({
             style={{ flexShrink: 0, color: 'currentColor' }}
             onClick={onRemove}
           >
-            <Delete style={{ width: 9, height: 9, color: 'currentColor' }} />
+            <SvgDelete style={{ width: 9, height: 9, color: 'currentColor' }} />
           </Button>
         )}
       </Stack>

diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx
@@ -3,9 +3,7 @@ import React, { useState } from 'react';
 import type { Theme } from 'loot-core/src/types/prefs';
 
 import { useActions } from '../hooks/useActions';
-import MoonStars from '../icons/v2/MoonStars';
-import Sun from '../icons/v2/Sun';
-import System from '../icons/v2/System';
+import { SvgMoonStars, SvgSun, SvgSystem } from '../icons/v2';
 import { useResponsive } from '../ResponsiveProvider';
 import { type CSSProperties, themeOptions, useTheme } from '../style';
 
@@ -24,7 +22,11 @@ export function ThemeSelector({ style }: ThemeSelectorProps) {
 
   const { isNarrowWidth } = useResponsive();
 
-  const themeIcons = { light: Sun, dark: MoonStars, auto: System } as const;
+  const themeIcons = {
+    light: SvgSun,
+    dark: SvgMoonStars,
+    auto: SvgSystem,
+  } as const;
 
   async function onMenuSelect(newTheme: string) {
     setMenuOpen(false);
@@ -34,7 +36,7 @@ export function ThemeSelector({ style }: ThemeSelectorProps) {
     });
   }
 
-  const Icon = themeIcons?.[theme] || Sun;
+  const Icon = themeIcons?.[theme] || SvgSun;
 
   return isNarrowWidth ? null : (
     <Button

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -17,11 +17,13 @@ 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 ArrowLeft from '../icons/v1/ArrowLeft';
-import AlertTriangle from '../icons/v2/AlertTriangle';
-import NavigationMenu from '../icons/v2/NavigationMenu';
-import ViewHide from '../icons/v2/ViewHide';
-import ViewShow from '../icons/v2/ViewShow';
+import { SvgArrowLeft } from '../icons/v1';
+import {
+  SvgAlertTriangle,
+  SvgNavigationMenu,
+  SvgViewHide,
+  SvgViewShow,
+} from '../icons/v2';
 import { useResponsive } from '../ResponsiveProvider';
 import { theme, type CSSProperties, styles } from '../style';
 
@@ -118,9 +120,9 @@ function PrivacyButton({ style }) {
       style={style}
     >
       {isPrivacyEnabled ? (
-        <ViewHide style={privacyIconStyle} />
+        <SvgViewHide style={privacyIconStyle} />
       ) : (
-        <ViewShow style={privacyIconStyle} />
+        <SvgViewShow style={privacyIconStyle} />
       )}
     </Button>
   );
@@ -247,12 +249,12 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
       >
         {isMobile ? (
           syncState === 'error' ? (
-            <AlertTriangle width={14} height={14} />
+            <SvgAlertTriangle width={14} height={14} />
           ) : (
             <AnimatedRefresh width={18} height={18} animating={syncing} />
           )
         ) : syncState === 'error' ? (
-          <AlertTriangle width={13} />
+          <SvgAlertTriangle width={13} />
         ) : (
           <AnimatedRefresh animating={syncing} />
         )}
@@ -410,7 +412,7 @@ export function Titlebar({ style }) {
             }
           }}
         >
-          <NavigationMenu
+          <SvgNavigationMenu
             className="menu"
             style={{ width: 15, height: 15, color: theme.pageText, left: 0 }}
           />
@@ -423,7 +425,7 @@ export function Titlebar({ style }) {
           element={
             location.state?.goBack ? (
               <Button type="bare" onClick={() => navigate(-1)}>
-                <ArrowLeft
+                <SvgArrowLeft
                   width={10}
                   height={10}
                   style={{ marginRight: 5, color: 'currentColor' }}

diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
-import Close from '../icons/v1/Close';
+import { SvgClose } from '../icons/v1';
 import { theme } from '../style';
 
 import { Button } from './common/Button';
@@ -81,7 +81,10 @@ export function UpdateNotification() {
                 style={{ display: 'inline', padding: '1px 7px 2px 7px' }}
                 onClick={() => closeNotification(setAppState)}
               >
-                <Close width={9} style={{ color: theme.buttonPrimaryText }} />
+                <SvgClose
+                  width={9}
+                  style={{ color: theme.buttonPrimaryText }}
+                />
               </Button>
             </Text>
           </View>

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/Header.jsx b/packages/desktop-client/src/components/accounts/Header.jsx
@@ -1,12 +1,14 @@
 import React, { useState, useRef } from 'react';
 
 import { useSyncServerStatus } from '../../hooks/useSyncServerStatus';
-import AnimatedLoading from '../../icons/AnimatedLoading';
-import Add from '../../icons/v1/Add';
-import ArrowsExpand3 from '../../icons/v2/ArrowsExpand3';
-import ArrowsShrink3 from '../../icons/v2/ArrowsShrink3';
-import DownloadThickBottom from '../../icons/v2/DownloadThickBottom';
-import Pencil1 from '../../icons/v2/Pencil1';
+import { AnimatedLoading } from '../../icons/AnimatedLoading';
+import { SvgAdd } from '../../icons/v1';
+import {
+  SvgArrowsExpand3,
+  SvgArrowsShrink3,
+  SvgDownloadThickBottom,
+  SvgPencil1,
+} from '../../icons/v2';
 import { theme, styles } from '../../style';
 import { AnimatedRefresh } from '../AnimatedRefresh';
 import { Button } from '../common/Button';
@@ -172,7 +174,7 @@ export function AccountHeader({
                   className="hover-visible"
                   onClick={() => onExposeName(true)}
                 >
-                  <Pencil1
+                  <SvgPencil1
                     style={{
                       width: 11,
                       height: 11,
@@ -224,7 +226,7 @@ export function AccountHeader({
                 </>
               ) : (
                 <>
-                  <DownloadThickBottom
+                  <SvgDownloadThickBottom
                     width={13}
                     height={13}
                     style={{ marginRight: 4 }}
@@ -236,7 +238,8 @@ export function AccountHeader({
           )}
           {!showEmptyMessage && (
             <Button type="bare" onClick={onAddTransaction}>
-              <Add width={10} height={10} style={{ marginRight: 3 }} /> Add New
+              <SvgAdd width={10} height={10} style={{ marginRight: 3 }} /> Add
+              New
             </Button>
           )}
           <View style={{ flexShrink: 0 }}>
@@ -278,9 +281,9 @@ export function AccountHeader({
             }
           >
             {splitsExpanded.state.mode === 'collapse' ? (
-              <ArrowsShrink3 style={{ width: 14, height: 14 }} />
+              <SvgArrowsShrink3 style={{ width: 14, height: 14 }} />
             ) : (
-              <ArrowsExpand3 style={{ width: 14, height: 14 }} />
+              <SvgArrowsExpand3 style={{ width: 14, height: 14 }} />
             )}
           </Button>
           {account ? (

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,