refactor: move UserCard and UserInfo to ui-client

Merged
GG
19d ago
+162-150

Proposed changes (including videos or screenshots)

Moves the UserCard and UserInfo components from apps/meteor/client/components into @rocket.chat/ui-client, with no visual change. This lays the ground for the user information redesign in #41650, so the restyling happens in the shared package rather than in the web app.

Moved along with them (they only depend on ui-contexts, react-i18next and date-fns):

  • lib/utils/dateFormat (+ spec and its timezone jest environment)
  • useFormatTime, useTimezoneTime, useUTCClock, UTCClock
  • useTimeAgo / useShortTimeAgo — now translate through useTranslation() instead of the global i18n instance
  • useUserCustomFields (+ spec)

All web app importers now import these from @rocket.chat/ui-client.

Injected instead of moved: MarkdownText depends on the emoji registry and the parser settings, and gazzodown already depends on ui-client, so it can't move. The components read the renderer from a new MarkdownTextContext, which MeteorProvider fills with the web app's MarkdownText. Without a provider the content renders as plain text, which is what stories and unit tests use. This is why the UserInfo snapshots changed.

ui-client gains date-fns and @react-aria/dialog (used by UserCardDialog) as dependencies, at the versions already in the lockfile.

Issue(s)

CORE-1962 · review on #41650

Steps to test or reproduce

  1. Open a room and click a user's name: the user card shows the custom status and bio with markdown/emoji rendered.
  2. Open the user info contextual bar (room members, admin users): bio and custom fields render markdown; local time, last login and created at display as before.

Further comments

#41650 will need a rebase: its changes to these files apply in packages/ui-client/src/components/{UserCard,UserInfo}, and its new UserInfoCopyableText / useClipboardWithToast can move in with the same approach.

Summary by CodeRabbit

  • Improvements
    • User cards and profile information now use shared interface components across more areas of the app.
    • Relative times, dates, and clock displays are handled consistently across messaging, administration, and other views.
    • Markdown text rendering can now be provided through a shared interface context.
    • Existing display behavior remains unchanged.