chore(ui-client): Review build configuration

[tassoevan]

Proposed changes (including videos or screenshots)

It normalizes the ESLint configuration for @rocket.chat/ui-client.

Issue(s)

ARCH-1892

Steps to test or reproduce

Further comments

Summary by CodeRabbit

• Chores

  • Removed Babel build configuration
  • Simplified ESLint configuration and updated ignore patterns
  • Added dompurify dependency for enhanced security

• Refactoring

  • Updated component type system for improved type safety
  • Restructured component exports and import patterns
  • Consolidated component prop type definitions

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is targeting the wrong base branch. It should target 7.14.0, but it targets 7.13.0

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 56ae291

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This PR refactors the packages/ui-client package to remove Babel configuration, simplify ESLint setup, and modernize TypeScript typing patterns by replacing ComponentProps with ComponentPropsWithoutRef, removing FC type annotations, eliminating explicit ReactElement return types, and converting multiple components to default exports.

Changes

Cohort / File(s)	Summary
Build configuration cleanup packages/ui-client/.babelrc.json, packages/ui-client/.eslintignore, packages/ui-client/.eslintrc.json, packages/ui-client/package.json	Removed .babelrc.json with Babel presets; simplified .eslintrc.json extends and ignorePatterns; updated .eslintignore to enable .storybook exclusion; moved dompurify to top-level dependencies and removed @babel/core devDependency
Component export refactoring: FeaturePreview packages/ui-client/src/components/FeaturePreview/FeaturePreview.tsx, packages/ui-client/src/components/FeaturePreview/FeaturePreviewOn.tsx, packages/ui-client/src/components/FeaturePreview/FeaturePreviewOff.tsx, packages/ui-client/src/components/FeaturePreview/FeaturePreview.spec.tsx, packages/ui-client/src/components/FeaturePreview/index.ts	Restructured FeaturePreview from named exports to default exports; introduced FeaturePreviewOnProps and FeaturePreviewOnProps types; split helper components into separate files; updated exports and index re-exports accordingly
Component export refactoring: DotLeader & TextSeparator packages/ui-client/src/components/DotLeader.tsx, packages/ui-client/src/components/DotLeader.stories.tsx, packages/ui-client/src/components/TextSeparator.tsx, packages/ui-client/src/components/TextSeparator.stories.tsx	Converted DotLeader to default export with exported DotLeaderProps type; updated imports and removed FC type; updated TextSeparator to use DotLeader default import and removed explicit ReactElement return type
Type system refactoring: React import standardization packages/ui-client/src/components/AnchorPortal.tsx, packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx, packages/ui-client/src/components/Header/Header.stories.tsx, packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx, packages/ui-client/src/components/Wizard/mocks/createMockWizardApi.ts, packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.ts	Converted runtime imports to type-only imports for React types (Meta, StoryFn, ComponentType, FeaturesAvailable, WizardAPI) where used only as type annotations
Type system refactoring: ComponentProps → ComponentPropsWithoutRef packages/ui-client/src/components/ExternalLink.tsx, packages/ui-client/src/components/Header/Header.tsx, packages/ui-client/src/components/Header/HeaderAvatar.tsx, packages/ui-client/src/components/Header/HeaderContent.tsx, packages/ui-client/src/components/Header/HeaderContentRow.tsx, packages/ui-client/src/components/Header/HeaderIcon.tsx, packages/ui-client/src/components/Header/HeaderState.tsx, packages/ui-client/src/components/Header/HeaderSubtitle.tsx, packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx, packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx, packages/ui-client/src/components/Header/HeaderTitle.tsx, packages/ui-client/src/components/Header/HeaderTitleButton.tsx, packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx, packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx, packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx, packages/ui-client/src/components/HeaderV2/Header.stories.tsx, packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx, packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx, packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagIcon.tsx, packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbar.tsx, packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx	Replaced ComponentProps with ComponentPropsWithoutRef in all Header and HeaderV2 component prop type definitions and imports, excluding ref from component props typing
Type system refactoring: Modal & Wizard components packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx, packages/ui-client/src/components/Modal/GenericModal/GenericModalSkeleton.tsx, packages/ui-client/src/components/Modal/ModalBackdrop.tsx, packages/ui-client/src/components/Modal/ModalRegion.tsx, packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx, packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx, packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx, packages/ui-client/src/components/Wizard/Wizard.tsx, packages/ui-client/src/components/Wizard/WizardActions.tsx, packages/ui-client/src/components/Wizard/WizardActions.stories.tsx, packages/ui-client/src/components/Wizard/WizardBackButton.tsx, packages/ui-client/src/components/Wizard/WizardNextButton.tsx	Replaced ComponentProps with ComponentPropsWithoutRef in Modal, MultiSelectCustom, and Wizard component props; exported previously internal props types; removed explicit ReactElement return types
Type system refactoring: UserStatus & other components packages/ui-client/src/components/UserStatus/Away.tsx, packages/ui-client/src/components/UserStatus/Busy.tsx, packages/ui-client/src/components/UserStatus/Loading.tsx, packages/ui-client/src/components/UserStatus/Offline.tsx, packages/ui-client/src/components/UserStatus/Online.tsx, packages/ui-client/src/components/UserStatus/UserStatus.tsx, packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx, packages/ui-client/src/components/TooltipComponent.tsx, packages/ui-client/src/helpers/imperativeModal.tsx	Replaced ComponentProps with ComponentPropsWithoutRef; updated UserStatus variants to use UserStatusProps; removed explicit ReactElement return types
FC removal & explicit type exports packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx, packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryWrapper.tsx, packages/ui-client/src/components/Header/HeaderDivider.tsx, packages/ui-client/src/components/Header/HeaderTag/HeaderTagSkeleton.tsx, packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx, packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx	Removed FC type annotations; exported previously internal props type aliases; adjusted function signatures to plain functions with explicit prop typing

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Areas requiring extra attention:

• FeaturePreview refactor (packages/ui-client/src/components/FeaturePreview/*): Complex restructuring with new files, split components, and export reorganization; verify that the new component hierarchy maintains API compatibility and that cloneElement usage with featureToggleEnabled prop works correctly across test scenarios.
• Export pattern changes: Multiple components converted to default exports; ensure all imports across the codebase are updated consistently and that re-exports in index files are correct.
• ComponentProps → ComponentPropsWithoutRef migration: While repetitive, verify that the ref-exclusion is intentional for all affected components and that no forwardRef-based patterns are broken.
• Build configuration removal: Confirm that removal of .babelrc.json doesn't break the build pipeline and that parent config or tooling properly handles JSX/TypeScript transpilation.

Possibly related PRs

• chore(web-ui-registration): Review build configuration #37584: Removes per-package Babel config and @babel/core devDependencies across multiple packages in parallel efforts.
• chore: bump fuselage packages #37420: Implements the same ComponentProps → ComponentPropsWithoutRef type refactoring pattern in other ui-related packages.
• chore(ui-avatar): Review build configuration #37608: Simplifies package-level ESLint configurations with similar .eslintignore and extends restructuring.

Suggested labels

chore, refactoring, type-safety

Suggested reviewers

• ggazzo
• dougfabris

Poem

🐰 A Rabbit's Refactoring Song

Babel's gone, and types shine bright,
Components leap to new heights—
Default exports, refs take flight,
PropTypes flow, the code's just right!
~Hoppy rabbit waves paw ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chore/ui-client-build-configuration

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between f5eedbe and 56ae291.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (67)

• packages/ui-client/.babelrc.json (0 hunks)
• packages/ui-client/.eslintignore (0 hunks)
• packages/ui-client/.eslintrc.json (1 hunks)
• packages/ui-client/package.json (1 hunks)
• packages/ui-client/src/components/AnchorPortal.tsx (1 hunks)
• packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx (1 hunks)
• packages/ui-client/src/components/DotLeader.stories.tsx (1 hunks)
• packages/ui-client/src/components/DotLeader.tsx (1 hunks)
• packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx (1 hunks)
• packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryWrapper.tsx (1 hunks)
• packages/ui-client/src/components/ExternalLink.tsx (1 hunks)
• packages/ui-client/src/components/FeaturePreview/FeaturePreview.spec.tsx (1 hunks)
• packages/ui-client/src/components/FeaturePreview/FeaturePreview.tsx (2 hunks)
• packages/ui-client/src/components/FeaturePreview/FeaturePreviewOff.tsx (1 hunks)
• packages/ui-client/src/components/FeaturePreview/FeaturePreviewOn.tsx (1 hunks)
• packages/ui-client/src/components/FeaturePreview/index.ts (1 hunks)
• packages/ui-client/src/components/Header/Header.stories.tsx (1 hunks)
• packages/ui-client/src/components/Header/Header.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderAvatar.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderContent.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderContentRow.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderDivider.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderIcon.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderState.tsx (2 hunks)
• packages/ui-client/src/components/Header/HeaderSubtitle.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderTag/HeaderTagSkeleton.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderTitle.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderTitleButton.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx (1 hunks)
• packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx (2 hunks)
• packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx (1 hunks)
• packages/ui-client/src/components/HeaderV2/Header.stories.tsx (2 hunks)
• packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx (1 hunks)
• packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx (1 hunks)
• packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagIcon.tsx (1 hunks)
• packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbar.tsx (1 hunks)
• packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx (1 hunks)
• packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx (2 hunks)
• packages/ui-client/src/components/Modal/GenericModal/GenericModalSkeleton.tsx (1 hunks)
• packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx (1 hunks)
• packages/ui-client/src/components/Modal/ModalBackdrop.tsx (2 hunks)
• packages/ui-client/src/components/Modal/ModalRegion.tsx (1 hunks)
• packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx (3 hunks)
• packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx (2 hunks)
• packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx (1 hunks)
• packages/ui-client/src/components/TextSeparator.stories.tsx (1 hunks)
• packages/ui-client/src/components/TextSeparator.tsx (1 hunks)
• packages/ui-client/src/components/TooltipComponent.tsx (1 hunks)
• packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx (3 hunks)
• packages/ui-client/src/components/UserStatus/Away.tsx (1 hunks)
• packages/ui-client/src/components/UserStatus/Busy.tsx (1 hunks)
• packages/ui-client/src/components/UserStatus/Loading.tsx (1 hunks)
• packages/ui-client/src/components/UserStatus/Offline.tsx (1 hunks)
• packages/ui-client/src/components/UserStatus/Online.tsx (1 hunks)
• packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx (1 hunks)
• packages/ui-client/src/components/UserStatus/UserStatus.tsx (1 hunks)
• packages/ui-client/src/components/Wizard/Wizard.tsx (1 hunks)
• packages/ui-client/src/components/Wizard/WizardActions.stories.tsx (2 hunks)
• packages/ui-client/src/components/Wizard/WizardActions.tsx (1 hunks)
• packages/ui-client/src/components/Wizard/WizardBackButton.tsx (1 hunks)
• packages/ui-client/src/components/Wizard/WizardNextButton.tsx (1 hunks)
• packages/ui-client/src/components/Wizard/mocks/createMockWizardApi.ts (1 hunks)
• packages/ui-client/src/helpers/imperativeModal.tsx (1 hunks)
• packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.ts (1 hunks)

---

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.}

[github-actions]

📦 Docker Image Size Report

📈 Changes

Service	Current	Baseline	Change	Percent
sum of all images	1.2GiB	1.2GiB	+12MiB
rocketchat	358MiB	346MiB	+12MiB
omnichannel-transcript-service	132MiB	132MiB	-227B
queue-worker-service	132MiB	132MiB	+636B
ddp-streamer-service	127MiB	127MiB	+490B
account-service	114MiB	114MiB	-623B
stream-hub-service	111MiB	111MiB	+141B
authorization-service	111MiB	111MiB	+415B
presence-service	111MiB	111MiB	-4.6KiB

📊 Historical Trend

---
config:
  theme: "dark"
  xyChart:
    width: 900
    height: 400
---
xychart
  title "Image Size Evolution by Service (Last 30 Days + This PR)"
  x-axis ["11/15 22:28", "11/16 01:28", "11/17 23:50", "11/18 22:53", "11/19 23:02", "11/21 16:49", "11/24 17:34", "11/25 19:24 (PR)"]
  y-axis "Size (GB)" 0 --> 0.5
  line "account-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "authorization-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "ddp-streamer-service" [0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12]
  line "omnichannel-transcript-service" [0.14, 0.14, 0.14, 0.14, 0.14, 0.13, 0.13, 0.13]
  line "presence-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "queue-worker-service" [0.14, 0.14, 0.14, 0.14, 0.14, 0.13, 0.13, 0.13]
  line "rocketchat" [0.36, 0.36, 0.35, 0.35, 0.35, 0.34, 0.34, 0.35]
  line "stream-hub-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]

Loading

Statistics (last 7 days):

• 📊 Average: 1.5GiB
• ⬇️ Minimum: 1.2GiB
• ⬆️ Maximum: 1.6GiB
• 🎯 Current PR: 1.2GiB

ℹ️ About this report

This report compares Docker image sizes from this build against the develop baseline.

• Tag: pr-37607
• Baseline: develop
• Timestamp: 2025-11-25 19:24:56 UTC
• Historical data points: 7

---

Updated: Tue, 25 Nov 2025 19:24:56 GMT

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.82%. Comparing base (f5eedbe) to head (56ae291).
⚠️ Report is 2 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #37607      +/-   ##
===========================================
- Coverage    68.83%   68.82%   -0.02%     
===========================================
  Files         3361     3361              
  Lines       114340   114291      -49     
  Branches     20619    20618       -1     
===========================================
- Hits         78706    78658      -48     
- Misses       33536    33539       +3     
+ Partials      2098     2094       -4     

Flag	Coverage Δ
e2e	57.32% <ø> (-0.02%)	⬇️
e2e-api	42.28% <ø> (+0.05%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.