refactor: removed forward ref for moved components in form-component/app-components

[adamhaeger]

Description

React 19 makes ref a regular prop, so forwardRef is no longer needed. This removes all forwardRef usage from the app-components/ components and switches them to plain function components that accept ref as a prop.

Verification

• Related issues are connected (if applicable)
• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

Summary by CodeRabbit

• Refactor

  • Updated ref handling across multiple UI components to a consistent prop-based approach.

• Chores

  • Switched Babel, TypeScript and build tooling to the automatic JSX runtime.
  • Adjusted linting rules to align with the automatic JSX configuration.

[phlipsterit]

Nice cleanup :)

[coderabbitai]

Warning

Rate limit exceeded

@adamhaeger has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 43 minutes and 11 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a8ebe7cd-569a-442a-aeca-a6c5cfd33e02

📥 Commits

Reviewing files that changed from the base of the PR and between b3d327c and 8c7da08.

📒 Files selected for processing (1)

• src/App/frontend/src/app-components/Label/Label.tsx

📝 Walkthrough

Walkthrough

This PR replaces React.forwardRef with explicit optional ref props across several UI components and updates Babel, TypeScript, esbuild and ESLint configs to use the automatic JSX runtime.

Changes

forwardRef to explicit ref prop migration

Layer / File(s)	Summary
Build configuration for automatic JSX runtime src/App/frontend/babel.config.json, src/App/frontend/tsconfig.json, src/App/frontend/webpack.common.js, src/App/frontend/eslint.config.mjs	Babel preset-react set to { runtime: "automatic" }, TypeScript compilerOptions.jsx changed to react-jsx, esbuild-loader jsx option set to automatic, and ESLint rule react/react-in-jsx-scope disabled.
Button component ref refactoring libs/form-component/src/app-components/Button/Button.tsx	Button refactored from a forwardRef wrapper to a named function component that accepts an optional ref?: Ref<HTMLButtonElement> in ButtonProps and forwards it to the design-system Button.
DatePickerInput component ref refactoring src/App/frontend/src/app-components/Datepicker/DatePickerInput.tsx	DatePickerInputProps gains ref?: Ref<HTMLInputElement>; component exported as a named function destructuring ref and passing it to PatternFormat; forwardRef wrapper and displayName removed.
Flex component ref refactoring src/App/frontend/src/app-components/Flex/Flex.tsx	Flex switched to a named export that destructures ref?: Ref<HTMLDivElement> from props and forwards it to the rendered Tag; forwardRef and displayName removed.
HelpText component ref refactoring src/App/frontend/src/app-components/HelpText/HelpText.tsx	HelpTextProps extended with ref?: Ref<HTMLButtonElement>; component rewritten as a named function that forwards ref to Popover.Trigger; forwardRef wrapper removed.
Label component ref refactoring src/App/frontend/src/app-components/Label/Label.tsx	LabelProps now includes ref?: Ref<HTMLLabelElement>; Label is a named function accepting ref via PropsWithChildren and forwarding it to the design-system label; forwardRef removed.
TimeSegment component and types ref refactoring src/App/frontend/src/app-components/TimePicker/types.ts, src/App/frontend/src/app-components/TimePicker/TimeSegment/TimeSegment.tsx	Types import Ref and TimeSegmentProps gets ref?: Ref<HTMLInputElement>; TimeSegment exported as a named function destructuring ref and passing it to Textfield; keyboard handling, typing buffer and sync logic preserved; displayName removed.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• phlipsterit

Poem

🐰 I nudge a ref from nested wrap to prop,
No more forwarding round the block,
Build tools tuned, lint rules take a hop,
Components wake without the flock,
A little rabbit skims the top!

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: removing forwardRef from form-component app-components and converting them to plain function components.
Description check	✅ Passed	The description clearly explains the rationale (React 19 makes ref a regular prop) and covers the main changes, though it is slightly vague about scope.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/remove-forward-ref

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}