♻️ moving more components to the new component-lib pkg

eslint.config.mjs

@@ -761,7 +761,7 @@ export default [
       'packages/desktop-client/src/components/budget/MobileBudget.tsx',
       'packages/desktop-client/src/components/budget/envelope/HoldMenu.tsx',
       'packages/desktop-client/src/components/budget/envelope/TransferMenu.tsx',
-      'packages/desktop-client/src/components/common/Menu.tsx',
+      'packages/component-library/src/Menu.tsx',
       'packages/desktop-client/src/components/FinancesApp.tsx',
       'packages/desktop-client/src/components/GlobalKeys.ts',
       'packages/desktop-client/src/components/LoggedInUser.tsx',

packages/component-library/package.json

@@ -15,10 +15,26 @@
   },
   "exports": {
     "./icons/*": "./src/icons/*.tsx",
+    "./aligned-text": "./src/AlignedText.tsx",
+    "./block": "./src/Block.tsx",
     "./button": "./src/Button.tsx",
+    "./card": "./src/Card.tsx",
+    "./form-error": "./src/FormError.tsx",
+    "./initial-focus": "./src/InitialFocus.ts",
+    "./inline-field": "./src/InlineField.tsx",
+    "./label": "./src/Label.tsx",
+    "./menu": "./src/Menu.tsx",
+    "./paragraph": "./src/Paragraph.tsx",
+    "./popover": "./src/Popover.tsx",
+    "./space-between": "./src/SpaceBetween.tsx",
+    "./stack": "./src/Stack.tsx",
     "./styles": "./src/styles.ts",
+    "./text": "./src/Text.tsx",
+    "./text-one-line": "./src/TextOneLine.tsx",
     "./theme": "./src/theme.ts",
     "./tokens": "./src/tokens.ts",
+    "./toggle": "./src/Toggle.tsx",
+    "./tooltip": "./src/Tooltip.tsx",
     "./view": "./src/View.tsx"
   }
 }

packages/desktop-client/src/components/common/Block.tsx → packages/component-library/src/Block.tsx

@@ -2,7 +2,7 @@ import { type HTMLProps, type Ref } from 'react';
 
 import { css, cx } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;

packages/desktop-client/src/components/common/Card.tsx → packages/component-library/src/Card.tsx

@@ -1,7 +1,6 @@
 import { type ComponentProps, forwardRef } from 'react';
 
-import { theme } from '../../style';
-
+import { theme } from './theme';
 import { View } from './View';
 
 type CardProps = ComponentProps<typeof View>;

packages/component-library/src/InitialFocus.ts

@@ -0,0 +1,36 @@
+import {
+  type ReactElement,
+  type Ref,
+  cloneElement,
+  useEffect,
+  useRef,
+} from 'react';
+
+type InitialFocusProps = {
+  children:
+    | ReactElement<{ inputRef: Ref<HTMLInputElement> }>
+    | ((node: Ref<HTMLInputElement>) => ReactElement);
+};
+
+export function InitialFocus({ children }: InitialFocusProps) {
+  const node = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (node.current) {
+      // This is needed to avoid a strange interaction with
+      // `ScopeTab`, which doesn't allow it to be focused at first for
+      // some reason. Need to look into it.
+      setTimeout(() => {
+        if (node.current) {
+          node.current.focus();
+          node.current.setSelectionRange(0, 10000);
+        }
+      }, 0);
+    }
+  }, []);
+
+  if (typeof children === 'function') {
+    return children(node);
+  }
+  return cloneElement(children, { inputRef: node });
+}

packages/desktop-client/src/components/common/InlineField.tsx → packages/component-library/src/InlineField.tsx

@@ -2,7 +2,7 @@ import { type ReactNode } from 'react';
 
 import { css } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type InlineFieldProps = {
   label: ReactNode;

packages/desktop-client/src/components/common/Label.tsx → packages/component-library/src/Label.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, type ReactNode, type CSSProperties } from 'react';
 
-import { theme, styles } from '../../style';
-
+import { styles } from './styles';
 import { Text } from './Text';
+import { theme } from './theme';
 
 type LabelProps = {
   title: ReactNode;

packages/desktop-client/src/components/common/Menu.tsx → packages/component-library/src/Menu.tsx

@@ -8,9 +8,8 @@ import {
   type CSSProperties,
 } from 'react';
 
-import { theme } from '../../style';
-
 import { Text } from './Text';
+import { theme } from './theme';
 import { Toggle } from './Toggle';
 import { View } from './View';
 

packages/desktop-client/src/components/common/Paragraph.tsx → packages/component-library/src/Paragraph.tsx

@@ -2,7 +2,7 @@ import { type HTMLProps } from 'react';
 
 import { css } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type ParagraphProps = HTMLProps<HTMLDivElement> & {
   style?: CSSProperties;

packages/desktop-client/src/components/common/Popover.tsx → packages/component-library/src/Popover.tsx

@@ -3,7 +3,7 @@ import { Popover as ReactAriaPopover } from 'react-aria-components';
 
 import { css } from '@emotion/css';
 
-import { styles } from '../../style';
+import { styles } from './styles';
 
 type PopoverProps = ComponentProps<typeof ReactAriaPopover>;
 

packages/desktop-client/src/components/common/Text.tsx → packages/component-library/src/Text.tsx

@@ -7,7 +7,7 @@ import React, {
 
 import { css, cx } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type TextProps = HTMLProps<HTMLSpanElement> & {
   innerRef?: Ref<HTMLSpanElement>;

packages/desktop-client/src/components/common/Toggle.tsx → packages/component-library/src/Toggle.tsx

@@ -2,8 +2,7 @@ import React, { type CSSProperties } from 'react';
 
 import { css } from '@emotion/css';
 
-import { theme } from '../../style';
-
+import { theme } from './theme';
 import { View } from './View';
 
 type ToggleProps = {

packages/desktop-client/src/components/common/Tooltip.tsx → packages/component-library/src/Tooltip.tsx

@@ -8,8 +8,7 @@ import React, {
 } from 'react';
 import { Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components';
 
-import { styles } from '../../style';
-
+import { styles } from './styles';
 import { View } from './View';
 
 type TooltipProps = Partial<ComponentProps<typeof AriaTooltip>> & {

packages/desktop-client/src/components/common/AlignedText.ts

@@ -0,0 +1,4 @@
+import { AlignedText as ActualComponentAlignedText } from '@actual-app/components/aligned-text';
+
+/** @deprecated please import AlignedText from '@actual-app/components/aligned-text' */
+export const AlignedText = ActualComponentAlignedText;

packages/desktop-client/src/components/common/Block.ts

@@ -0,0 +1,4 @@
+import { Block as ActualComponentBlock } from '@actual-app/components/block';
+
+/** @deprecated please import Block from '@actual-app/components/block' */
+export const Block = ActualComponentBlock;

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

@@ -1,12 +1,11 @@
 import React, { forwardRef, type ElementType, type HTMLProps } from 'react';
 
+import { AnimatedLoading } from '@actual-app/components/icons/AnimatedLoading';
+import { styles, type CSSProperties } from '@actual-app/components/styles';
+import { theme } from '@actual-app/components/theme';
+import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 
-import { AnimatedLoading } from '../../icons/AnimatedLoading';
-import { styles, theme, type CSSProperties } from '../../style';
-
-import { View } from './View';
-
 type ButtonProps = HTMLProps<HTMLButtonElement> & {
   pressed?: boolean;
   hover?: boolean;

packages/desktop-client/src/components/common/Card.ts

@@ -0,0 +1,4 @@
+import { Card as ActualComponentCard } from '@actual-app/components/card';
+
+/** @deprecated please import Card from '@actual-app/components/card' */
+export const Card = ActualComponentCard;

packages/desktop-client/src/components/common/FormError.ts

@@ -0,0 +1,4 @@
+import { FormError as ActualComponentFormError } from '@actual-app/components/form-error';
+
+/** @deprecated please import FormError from '@actual-app/components/form-error' */
+export const FormError = ActualComponentFormError;

packages/desktop-client/src/components/common/InitialFocus.ts

@@ -1,36 +1,4 @@
-import {
-  type ReactElement,
-  type Ref,
-  cloneElement,
-  useEffect,
-  useRef,
-} from 'react';
+import { InitialFocus as ActualComponentInitialFocus } from '@actual-app/components/initial-focus';
 
-type InitialFocusProps = {
-  children:
-    | ReactElement<{ inputRef: Ref<HTMLInputElement> }>
-    | ((node: Ref<HTMLInputElement>) => ReactElement);
-};
-
-export function InitialFocus({ children }: InitialFocusProps) {
-  const node = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (node.current) {
-      // This is needed to avoid a strange interaction with
-      // `ScopeTab`, which doesn't allow it to be focused at first for
-      // some reason. Need to look into it.
-      setTimeout(() => {
-        if (node.current) {
-          node.current.focus();
-          node.current.setSelectionRange(0, 10000);
-        }
-      }, 0);
-    }
-  }, []);
-
-  if (typeof children === 'function') {
-    return children(node);
-  }
-  return cloneElement(children, { inputRef: node });
-}
+/** @deprecated please import InitialFocus from '@actual-app/components/initial-focus' */
+export const InitialFocus = ActualComponentInitialFocus;

packages/desktop-client/src/components/common/InlineField.ts

@@ -0,0 +1,4 @@
+import { InlineField as ActualComponentInlineField } from '@actual-app/components/inline-field';
+
+/** @deprecated please import InlineField from '@actual-app/components/inline-field' */
+export const InlineField = ActualComponentInlineField;

packages/desktop-client/src/components/common/Label.ts

@@ -0,0 +1,4 @@
+import { Label as ActualComponentLabel } from '@actual-app/components/label';
+
+/** @deprecated please import Label from '@actual-app/components/label' */
+export const Label = ActualComponentLabel;

packages/desktop-client/src/components/common/Menu.ts

@@ -0,0 +1,10 @@
+import {
+  Menu as ActualComponentMenu,
+  type MenuItem as ActualComponentMenuItem,
+} from '@actual-app/components/menu';
+
+/** @deprecated please import Menu from '@actual-app/components/menu' */
+export const Menu = ActualComponentMenu;
+
+/** @deprecated please import MenuItem from '@actual-app/components/menu' */
+export type MenuItem = ActualComponentMenuItem;

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

@@ -16,22 +16,23 @@ import {
 import { useHotkeysContext } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
+import { Button } from '@actual-app/components/button';
+import { AnimatedLoading } from '@actual-app/components/icons/AnimatedLoading';
+import { styles } from '@actual-app/components/styles';
+import { Text } from '@actual-app/components/text';
+import { TextOneLine } from '@actual-app/components/text-one-line';
+import { theme } from '@actual-app/components/theme';
+import { tokens } from '@actual-app/components/tokens';
+import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 import { AutoTextSize } from 'auto-text-size';
 
 import { useModalState } from '../../hooks/useModalState';
-import { AnimatedLoading } from '../../icons/AnimatedLoading';
 import { SvgLogo } from '../../icons/logo';
 import { SvgDelete } from '../../icons/v0';
-import { styles, theme } from '../../style';
-import { tokens } from '../../tokens';
 import { useResponsive } from '../responsive/ResponsiveProvider';
 
-import { Button } from './Button2';
 import { Input } from './Input';
-import { Text } from './Text';
-import { TextOneLine } from './TextOneLine';
-import { View } from './View';
 
 type ModalProps = ComponentPropsWithRef<typeof ReactAriaModal> & {
   name: string;

packages/desktop-client/src/components/common/Paragraph.ts

@@ -0,0 +1,4 @@
+import { Paragraph as ActualComponentParagraph } from '@actual-app/components/paragraph';
+
+/** @deprecated please import Paragraph from '@actual-app/components/paragraph' */
+export const Paragraph = ActualComponentParagraph;

packages/desktop-client/src/components/common/Popover.ts

@@ -0,0 +1,4 @@
+import { Popover as ActualComponentPopover } from '@actual-app/components/popover';
+
+/** @deprecated please import Popover from '@actual-app/components/popover' */
+export const Popover = ActualComponentPopover;

packages/desktop-client/src/components/common/SpaceBetween.ts

@@ -0,0 +1,4 @@
+import { SpaceBetween as ActualComponentSpaceBetween } from '@actual-app/components/space-between';
+
+/** @deprecated please import SpaceBetween from '@actual-app/components/space-between' */
+export const SpaceBetween = ActualComponentSpaceBetween;

packages/desktop-client/src/components/common/Stack.ts

@@ -0,0 +1,4 @@
+import { Stack as ActualComponentStack } from '@actual-app/components/stack';
+
+/** @deprecated please import Stack from '@actual-app/components/stack' */
+export const Stack = ActualComponentStack;

packages/desktop-client/src/components/common/Text.ts

@@ -0,0 +1,4 @@
+import { Text as ActualComponentText } from '@actual-app/components/text';
+
+/** @deprecated please import Text from '@actual-app/components/text' */
+export const Text = ActualComponentText;

packages/desktop-client/src/components/common/TextOneLine.ts

@@ -0,0 +1,4 @@
+import { TextOneLine as ActualComponentTextOneLine } from '@actual-app/components/text-one-line';
+
+/** @deprecated please import TextOneLine from '@actual-app/components/text-one-line' */
+export const TextOneLine = ActualComponentTextOneLine;

packages/desktop-client/src/components/common/Toggle.ts

@@ -0,0 +1,4 @@
+import { Toggle as ActualComponentToggle } from '@actual-app/components/toggle';
+
+/** @deprecated please import Toggle from '@actual-app/components/toggle' */
+export const Toggle = ActualComponentToggle;

packages/desktop-client/src/components/common/Tooltip.ts

@@ -0,0 +1,4 @@
+import { Tooltip as ActualComponentTooltip } from '@actual-app/components/tooltip';
+
+/** @deprecated please import Tooltip from '@actual-app/components/tooltip' */
+export const Tooltip = ActualComponentTooltip;

packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx

@@ -9,6 +9,13 @@ import React, {
 import { ListBox, Section, Header, Collection } from 'react-aria-components';
 import { useTranslation } from 'react-i18next';
 
+import { Button } from '@actual-app/components/button';
+import { Menu, type MenuItemObject } from '@actual-app/components/menu';
+import { Popover } from '@actual-app/components/popover';
+import { styles } from '@actual-app/components/styles';
+import { Text } from '@actual-app/components/text';
+import { View } from '@actual-app/components/view';
+
 import { setNotificationInset } from 'loot-core/client/actions';
 import * as monthUtils from 'loot-core/shared/months';
 import { isPreviewId } from 'loot-core/shared/transactions';
@@ -29,12 +36,7 @@ import { AnimatedLoading } from '../../../icons/AnimatedLoading';
 import { SvgDelete } from '../../../icons/v0';
 import { SvgDotsHorizontalTriple } from '../../../icons/v1';
 import { useDispatch } from '../../../redux';
-import { styles, theme } from '../../../style';
-import { Button } from '../../common/Button2';
-import { Menu, type MenuItemObject } from '../../common/Menu';
-import { Popover } from '../../common/Popover';
-import { Text } from '../../common/Text';
-import { View } from '../../common/View';
+import { theme } from '../../../style';
 import { useScrollListener } from '../../ScrollProvider';
 import { FloatingActionBar } from '../FloatingActionBar';
 

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

@@ -17,23 +17,25 @@ import React, {
 } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
+import { Button } from '@actual-app/components/button';
+import { AnimatedLoading } from '@actual-app/components/icons/AnimatedLoading';
+import { Menu, type MenuItem } from '@actual-app/components/menu';
+import { Popover } from '@actual-app/components/popover';
+import { type CSSProperties, styles } from '@actual-app/components/styles';
+import { Text } from '@actual-app/components/text';
+import { theme } from '@actual-app/components/theme';
+import { View } from '@actual-app/components/view';
+
 import { useModalState } from '../hooks/useModalState';
 import {
   AvoidRefocusScrollProvider,
   useProperFocus,
 } from '../hooks/useProperFocus';
 import { useSelectedItems } from '../hooks/useSelected';
-import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete, SvgExpandArrow } from '../icons/v0';
 import { SvgCheckmark } from '../icons/v1';
-import { type CSSProperties, styles, theme } from '../style';
 
-import { Button } from './common/Button2';
 import { Input } from './common/Input';
-import { Menu, type MenuItem } from './common/Menu';
-import { Popover } from './common/Popover';
-import { Text } from './common/Text';
-import { View } from './common/View';
 import { FixedSizeList } from './FixedSizeList';
 import {
   ConditionalPrivacyFilter,