♻️ (components) remove InputWithContent component #4566

MatissJanis · 2025-03-07T17:37:17Z

inlining some of its functionality in the consumers instead. This allows us to reduce the footprint of stuff we will need to include in the component library.

netlify · 2025-03-07T17:37:33Z

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	`e4e479c`
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/67cf1bf74e98940008719f0d
😎 Deploy Preview	https://deploy-preview-4566.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions · 2025-03-07T17:38:47Z

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
18	8.44 MB → 8.44 MB (+286 B)	+0.00%

Changeset

File	Δ	Size
`node_modules/clsx/dist/clsx.js`	🆕 +509 B	0 B → 509 B
`node_modules/clsx/dist/clsx.js?commonjs-module`	🆕 +27 B	0 B → 27 B
`src/components/common/Search.tsx`	📈 +892 B (+52.04%)	1.67 kB → 2.54 kB
`src/components/util/AmountInput.tsx`	📈 +817 B (+20.18%)	3.95 kB → 4.75 kB
`node_modules/react-grid-layout/build/ReactGridLayout.js`	📉 -1 B (-0.00%)	24.96 kB → 24.96 kB
`node_modules/react-grid-layout/build/GridItem.js`	📉 -1 B (-0.00%)	21.49 kB → 21.49 kB
`src/components/autocomplete/Autocomplete.tsx`	📉 -2 B (-0.01%)	16.6 kB → 16.6 kB
`node_modules/react-grid-layout/build/components/WidthProvider.js`	📉 -1 B (-0.02%)	5.22 kB → 5.22 kB
`home/runner/work/actual/actual/packages/component-library/src/icons/v2/Remove.tsx`	📉 -2 B (-0.34%)	586 B → 584 B
`home/runner/work/actual/actual/packages/component-library/src/icons/v2/SearchAlternate.tsx`	📉 -2 B (-0.39%)	507 B → 505 B
`src/components/mobile/transactions/TransactionListWithBalances.tsx`	📉 -304 B (-5.10%)	5.82 kB → 5.52 kB
`src/icons/v2/index.ts`	📉 -80 B (-6.10%)	1.28 kB → 1.2 kB
`src/components/common/InputWithContent.tsx`	🔥 -1.11 kB (-100%)	1.11 kB → 0 B
`node_modules/clsx/dist/clsx.mjs`	🔥 -368 B (-100%)	368 B → 0 B
`node_modules/clsx/dist/clsx.mjs?commonjs-proxy`	🔥 -64 B (-100%)	64 B → 0 B

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/index.js	5.41 MB → 5.42 MB (+353 B)	+0.01%

Smaller

Asset	File Size	% Changed
static/js/ReportRouter.js	1.59 MB → 1.59 MB (-67 B)	-0.00%

Unchanged

Asset	File Size	% Changed
static/js/es.js	59.63 kB	0%
static/js/en.js	108.43 kB	0%
static/js/de.js	120.56 kB	0%
static/js/en-GB.js	96.19 kB	0%
static/js/indexeddb-main-thread-worker-e59fee74.js	13.5 kB	0%
static/js/workbox-window.prod.es5.js	5.69 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/fr.js	119.83 kB	0%
static/js/uk.js	110.45 kB	0%
static/js/pt-BR.js	110.03 kB	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/nl.js	102.82 kB	0%
static/js/narrow.js	371.33 kB	0%
static/js/AppliedFilters.js	10.87 kB	0%
static/js/useAccountPreviewTransactions.js	1.69 kB	0%
static/js/wide.js	100.26 kB	0%

github-actions · 2025-03-07T17:38:49Z

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
1	2.57 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.js	2.57 MB	0%

MatissJanis · 2025-03-07T18:41:37Z

/update-vrt

coderabbitai · 2025-03-07T19:11:19Z

Walkthrough

This pull request removes the InputWithContent component and refactors several components that previously relied on it. The functionality formerly provided by InputWithContent in the Search component is now achieved through direct usage of View and Input components, incorporating new state management with a local focus state and additional optional properties like inputStyle. In the mobile transaction component, the TransactionSearchInput function replaces InputWithContent with the Search component, updates prop names (renaming onChangeValue to onChange and style to inputStyle), and adjusts styling attributes. Additionally, the AmountInput component has been refactored to use a revised structure with a View, a Button, and an Input imported from a different module, along with new focus state management.

Possibly related PRs

✨ component library - minimalistic infrastructure #4169: The changes in the main PR are related to the removal of the InputWithContent component, which is directly replaced by the Search component in the retrieved PR.
(typescript) Refactoring the mobile TransactionListWithBalance component into typescript. #4061: The changes in the main PR are directly related to the retrieved PR, as both involve the replacement of the InputWithContent component in the TransactionSearchInput function within the TransactionListWithBalances context.
[Mobile] Drag and drop on accounts to re-order #4476: The changes in the main PR involve the removal of the InputWithContent component, which is directly related to the modifications in the Search component that replace its functionality.

Suggested labels

:sparkles: Merged

Suggested reviewers

joel-jeremy
lelemm

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f355d8f and fe0271f.

📒 Files selected for processing (1)

packages/desktop-client/src/components/common/Search.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (5)

GitHub Check: build (macos-latest)
GitHub Check: build (windows-latest)
GitHub Check: Wait for Netlify build to finish
GitHub Check: Analyze
GitHub Check: build (ubuntu-latest)

🔇 Additional comments (8)

packages/desktop-client/src/components/common/Search.tsx (8)

17-19: LGTM! Type definition is well structured with the new properties

The additional properties in SearchProps provide good flexibility:

Adding '100%' as a possible value for width allows for responsive layouts

The new height property enables better control of the component's dimensions

The inputStyle property allows for custom styling from consuming components

These changes enhance the component's reusability while maintaining type safety.

29-30: Default values for new props look good

Good job providing a default value for inputStyle while leaving height optional. This approach maintains backward compatibility while adding new capabilities.

33-35: Focus state management is well implemented

The addition of local focus state management is a good practice for handling UI states and styling. This replaces functionality that was likely handled by the removed InputWithContent component.

36-36: Clear button padding calculation is clever

The calculation for clear button padding based on the component height ensures proportional spacing even when the height changes. The fallback to 24px maintains backward compatibility.

39-60: View component styling is comprehensive

The styling approach effectively:

Begins with default input styles

Adds component-specific styling

Applies user-provided custom styles via inputStyle

Conditionally applies focus styling

This layered approach provides good defaults while maintaining customization flexibility.

61-70: Search icon styling is well implemented

The search icon implementation with conditional styling based on input value is a nice touch. The responsive margins and sizing ensure consistent appearance across different component sizes.

72-107: Input component implementation is comprehensive

The implementation:

Properly forwards the inputRef

Handles keyboard events (Escape to clear)

Manages focus/blur events to update parent container styling

Uses appropriate styling overrides to ensure visual consistency

This approach maintains all the functionality while properly handling state management.

109-122: Clear button implementation is user-friendly

The clear button implementation:

Only appears when there's input to clear

Has proper accessibility attributes (title)

Uses responsive padding based on the component height

Has appropriate visual styling

Great job maintaining good UX with this implementation.

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

...unts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8a5b734 and f355d8f.

⛔ Files ignored due to path filters (3)

packages/desktop-client/e2e/settings.mobile.test.ts-snapshots/Mobile-Settings-checks-that-settings-page-can-be-opened-4-chromium-linux.png is excluded by !**/*.png
packages/desktop-client/e2e/settings.mobile.test.ts-snapshots/Mobile-Settings-checks-that-settings-page-can-be-opened-5-chromium-linux.png is excluded by !**/*.png
packages/desktop-client/e2e/settings.mobile.test.ts-snapshots/Mobile-Settings-checks-that-settings-page-can-be-opened-6-chromium-linux.png is excluded by !**/*.png

📒 Files selected for processing (2)

packages/desktop-client/src/components/common/Search.tsx (2 hunks)
packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx (2 hunks)

🧰 Additional context used

🪛 GitHub Check: lint

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

[warning] 7-7:
There should be no empty line within import group

[warning] 9-9:
@actual-app/components/icons/v2 import should occur before import of @actual-app/components/input

[warning] 10-10:
@actual-app/components/theme import should occur before import of @actual-app/components/view

🪛 GitHub Actions: Test

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

[warning] 7-7: There should be no empty line within import group import/order

[warning] 9-9: @actual-app/components/icons/v2 import should occur before import of @actual-app/components/input import/order

[warning] 10-10: @actual-app/components/theme import should occur before import of @actual-app/components/view import/order

⏰ Context from checks skipped due to timeout of 90000ms (4)

GitHub Check: Visual regression
GitHub Check: Functional
GitHub Check: build (windows-latest)
GitHub Check: build (ubuntu-latest)

🔇 Additional comments (6)

packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx (3)

6-6: Added necessary theme import.

The addition of the theme import is essential for accessing theme-related properties used in the component, particularly for the mobilePageBackground property used in the TransactionSearchInput component.

13-13: Replaced InputWithContent with Search import.

This change aligns with the PR objective to remove the InputWithContent component, replacing it with the Search component. This is a good refactoring step for reducing the component library footprint.

42-55: Migrated from InputWithContent to Search component with updated props.

The refactoring properly replaces InputWithContent with the Search component, making appropriate prop adjustments:

Renamed onChangeValue to onChange for better API consistency

Added explicit width and height properties

Changed style to inputStyle and updated border styling to use borderColor

These changes maintain the same functionality while using the more focused Search component.

packages/desktop-client/src/components/common/Search.tsx (3)

18-20: Enhanced SearchProps type with additional styling options.

The type definition has been improved with:

Support for a percentage-based width (100%)

Optional height property

Optional inputStyle property for additional styling customization

These changes provide better flexibility for consumers of the component.

35-37: Added focus state management and dynamic padding calculation.

The component now manages its own focus state, which improves user experience by providing visual feedback. The calculated padding ensures the clear button is properly positioned regardless of the input height.

40-123: Refactored component structure to remove dependency on InputWithContent.

The Search component has been completely rewritten to:

Directly utilize View and Input components instead of InputWithContent

Maintain the same visual appearance and behavior

Implement proper focus state management

Preserve the clear button functionality

Use consistent styling applied via component props

This is a solid implementation that successfully inlines the functionality previously provided by InputWithContent.

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

MatissJanis · 2025-03-10T16:41:16Z

/update-vrt

lelemm

small nit: would it look better if its centered?

MatissJanis · 2025-03-10T16:49:08Z

Mobile users won't see the hover effect. I kept it 8px there to align with the search icon on the other side. To be consistent.

♻️ (components) remove InputWithContent component

85ac7ee

inlining some of its functionality in the consumers instead. This allows us to reduce the footprint of stuff we will need to include in the component library.

actual-github-bot bot changed the title ~~♻️ (components) remove InputWithContent component~~ [WIP] ♻️ (components) remove InputWithContent component Mar 7, 2025

actual-github-bot bot added the 🚧 WIP label Mar 7, 2025

github-actions bot and others added 2 commits March 7, 2025 18:48

Update VRT

1dc1b9d

Merge branch 'master' into matiss/input-with-content

8a5b734

MatissJanis changed the title ~~[WIP] ♻️ (components) remove InputWithContent component~~ ♻️ (components) remove InputWithContent component Mar 7, 2025

actual-github-bot bot added 🔍 ready for review and removed 🚧 WIP labels Mar 7, 2025

Merge branch 'master' into matiss/input-with-content

2928b39

lelemm reviewed Mar 10, 2025

View reviewed changes

...unts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png Outdated Show resolved Hide resolved

lelemm self-assigned this Mar 10, 2025

MatissJanis added 2 commits March 10, 2025 16:31

Increase click target for mobile

f355d8f

Patch linter

fe0271f

coderabbitai bot reviewed Mar 10, 2025

View reviewed changes

packages/desktop-client/src/components/common/Search.tsx Outdated Show resolved Hide resolved

lelemm reviewed Mar 10, 2025

View reviewed changes

github-actions bot and others added 2 commits March 10, 2025 16:49

Update VRT

84f24c5

Trigger Actions

e4e479c

lelemm approved these changes Mar 10, 2025

View reviewed changes

actual-github-bot bot added ✅ approved and removed 🔍 ready for review labels Mar 10, 2025

MatissJanis merged commit 0b9b440 into master Mar 10, 2025
21 checks passed

MatissJanis deleted the matiss/input-with-content branch March 10, 2025 17:21

actual-github-bot bot removed the ✅ approved label Mar 10, 2025

actual-github-bot bot added the ✨ merged label Mar 10, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

♻️ (components) remove InputWithContent component #4566

♻️ (components) remove InputWithContent component #4566

Uh oh!

MatissJanis commented Mar 7, 2025

Uh oh!

netlify bot commented Mar 7, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 7, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 7, 2025 •

edited

Loading

Uh oh!

MatissJanis commented Mar 7, 2025

Uh oh!

coderabbitai bot commented Mar 7, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

MatissJanis commented Mar 10, 2025

Uh oh!

lelemm left a comment

Uh oh!

MatissJanis commented Mar 10, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

♻️ (components) remove InputWithContent component #4566

♻️ (components) remove InputWithContent component #4566

Uh oh!

Conversation

MatissJanis commented Mar 7, 2025

Uh oh!

netlify bot commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for actualbudget ready!

Uh oh!

github-actions bot commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Stats — desktop-client

Uh oh!

github-actions bot commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Stats — loot-core

Uh oh!

MatissJanis commented Mar 7, 2025

Uh oh!

coderabbitai bot commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MatissJanis commented Mar 10, 2025

Uh oh!

lelemm left a comment

Choose a reason for hiding this comment

Uh oh!

MatissJanis commented Mar 10, 2025

Uh oh!

Uh oh!

Uh oh!

netlify bot commented Mar 7, 2025 •

edited

Loading

github-actions bot commented Mar 7, 2025 •

edited

Loading

github-actions bot commented Mar 7, 2025 •

edited

Loading

coderabbitai bot commented Mar 7, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)