chore: Introduce UserCardProvider

apps/meteor/app/ui-utils/client/lib/messageActionDefault.ts

@@ -10,7 +10,7 @@ import { dispatchToastMessage } from '../../../../client/lib/toast';
 import { messageArgs } from '../../../../client/lib/utils/messageArgs';
 import { router } from '../../../../client/providers/RouterProvider';
 import ForwardMessageModal from '../../../../client/views/room/modals/ForwardMessageModal/ForwardMessageModal';
-import ReactionList from '../../../../client/views/room/modals/ReactionListModal';
+import ReactionListModal from '../../../../client/views/room/modals/ReactionListModal';
 import ReportMessageModal from '../../../../client/views/room/modals/ReportMessageModal';
 import { hasAtLeastOnePermission, hasPermission } from '../../../authorization/client';
 import { ChatRoom, Subscriptions } from '../../../models/client';
@@ -266,10 +266,10 @@ Meteor.startup(async () => {
 		label: 'Reactions',
 		context: ['message', 'message-mobile', 'threads', 'videoconf', 'videoconf-threads'],
 		type: 'interaction',
-		action(this: unknown, _, { message: { reactions = {} } = messageArgs(this).msg }) {
+		action(this: unknown, _, { message: { reactions = {} } = messageArgs(this).msg, chat }) {
 			imperativeModal.open({
-				component: ReactionList,
-				props: { reactions, onClose: imperativeModal.close },
+				component: ReactionListModal,
+				props: { reactions, onOpenUserCard: chat?.userCard.openUserCard, onClose: imperativeModal.close },
 			});
 		},
 		condition({ message: { reactions } }) {

apps/meteor/app/ui/client/lib/ChatMessages.ts

@@ -45,7 +45,10 @@ export class ChatMessages implements ChatAPI {
 
 	public ActionManager: any;
 
-	public userCard: { open(username: string): (event: UIEvent) => void; close(): void };
+	public userCard: {
+		openUserCard(event: UIEvent, username: string): void;
+		closeUserCard(): void;
+	};
 
 	public emojiPicker: {
 		open(el: Element, cb: (emoji: string) => void): void;
@@ -160,8 +163,8 @@ export class ChatMessages implements ChatAPI {
 		this.readStateManager = new ReadStateManager(rid);
 
 		this.userCard = {
-			open: unimplemented,
-			close: unimplemented,
+			openUserCard: unimplemented,
+			closeUserCard: unimplemented,
 		};
 
 		this.emojiPicker = {

apps/meteor/client/components/GazzodownText.tsx

@@ -25,7 +25,9 @@ type GazzodownTextProps = {
 };
 
 const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTextProps) => {
+	const chat = useChat();
 	const highlights = useMessageListHighlights();
+
 	const highlightRegex = useMemo(() => {
 		if (!highlights?.length) {
 			return;
@@ -51,8 +53,6 @@ const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTe
 	const ownUserId = useUserId();
 	const showMentionSymbol = Boolean(useUserPreference<boolean>('mentionsWithSymbol'));
 
-	const chat = useChat();
-
 	const resolveUserMention = useCallback(
 		(mention: string) => {
 			if (mention === 'all' || mention === 'here') {
@@ -75,7 +75,7 @@ const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTe
 
 			return (event: UIEvent): void => {
 				event.stopPropagation();
-				chat?.userCard.open(username)(event);
+				chat?.userCard.openUserCard(event, username);
 			};
 		},
 		[chat?.userCard],

apps/meteor/client/components/UserCard/UserCard.stories.tsx

@@ -1,7 +1,7 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import UserCard from '.';
+import { UserCard, UserCardRole, UserCardAction } from '.';
 
 export default {
 	title: 'Components/UserCard',
@@ -14,16 +14,16 @@ export default {
 		customStatus: '🛴 currently working on User Card',
 		roles: (
 			<>
-				<UserCard.Role>Admin</UserCard.Role>
-				<UserCard.Role>Rocket.Chat</UserCard.Role>
-				<UserCard.Role>Team</UserCard.Role>
+				<UserCardRole>Admin</UserCardRole>
+				<UserCardRole>Rocket.Chat</UserCardRole>
+				<UserCardRole>Team</UserCardRole>
 			</>
 		),
 		bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus. Mauris in justo vel lorem ullamcorper hendrerit. Nam est metus, viverra a pellentesque vitae, ornare eget odio. Morbi tempor feugiat mattis. Morbi non felis tempor, aliquam justo sed, sagittis nibh. Mauris consequat ex metus. Praesent sodales sit amet nibh a vulputate. Integer commodo, mi vel bibendum sollicitudin, urna lectus accumsan ante, eget faucibus augue ex id neque. Aenean consectetur, orci a pellentesque mattis, tortor tellus fringilla elit, non ullamcorper risus nunc feugiat risus. Fusce sit amet nisi dapibus turpis commodo placerat. In tortor ante, vehicula sit amet augue et, imperdiet porta sem.',
 		actions: (
 			<>
-				<UserCard.Action icon='message' />
-				<UserCard.Action icon='phone' />
+				<UserCardAction icon='message' />
+				<UserCardAction icon='phone' />
 			</>
 		),
 		localTime: 'Local Time: 7:44 AM',

apps/meteor/client/components/UserCard/UserCard.tsx

@@ -1,13 +1,14 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Button, IconButton, Skeleton } from '@rocket.chat/fuselage';
+import { Box, Button, IconButton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactNode, ComponentProps, MouseEvent } from 'react';
+import type { ReactNode, ComponentProps } from 'react';
 import React, { forwardRef } from 'react';
 
 import { useEmbeddedLayout } from '../../hooks/useEmbeddedLayout';
 import MarkdownText from '../MarkdownText';
 import * as Status from '../UserStatus';
 import UserAvatar from '../avatar/UserAvatar';
+import UserCardActions from './UserCardActions';
 import UserCardContainer from './UserCardContainer';
 import UserCardInfo from './UserCardInfo';
 import UserCardRoles from './UserCardRoles';
@@ -22,9 +23,7 @@ const clampStyle = css`
 `;
 
 type UserCardProps = {
-	className?: string;
-	style?: ComponentProps<typeof Box>['style'];
-	open?: (e: MouseEvent<HTMLElement>) => void;
+	onOpenUserInfo?: () => void;
 	name?: string;
 	username?: string;
 	etag?: string;
@@ -36,61 +35,40 @@ type UserCardProps = {
 	localTime?: ReactNode;
 	onClose?: () => void;
 	nickname?: string;
-	isLoading?: boolean;
-};
+} & ComponentProps<typeof UserCardContainer>;
 
-const UserCard = forwardRef(function UserCard(
+const UserCard = forwardRef<HTMLElement, UserCardProps>(function UserCard(
 	{
-		className,
-		style,
-		open,
+		onOpenUserInfo,
 		name,
 		username,
 		etag,
-		customStatus = <Skeleton width='100%' />,
-		roles = (
-			<>
-				<Skeleton flexGrow={1} mi={2} />
-				<Skeleton flexGrow={1} mi={2} />
-				<Skeleton flexGrow={1} mi={2} />
-			</>
-		),
-		bio = <Skeleton width='100%' />,
+		customStatus,
+		roles,
+		bio,
 		status = <Status.Offline />,
 		actions,
-		localTime = <Skeleton width='100%' />,
+		localTime,
 		onClose,
 		nickname,
-		isLoading,
-	}: UserCardProps,
+		...props
+	},
 	ref,
 ) {
 	const t = useTranslation();
 	const isLayoutEmbedded = useEmbeddedLayout();
 
 	return (
-		<UserCardContainer data-qa='UserCard' className={className} ref={ref} style={style} minHeight='x214'>
-			<Box>
-				{!isLoading && username ? (
-					<UserAvatar username={username} etag={etag} size='x124' />
-				) : (
-					<Skeleton borderRadius='x4' width='x124' height='x124' variant='rect' />
-				)}
+		<UserCardContainer data-qa='UserCard' ref={ref} {...props}>
+			<div>
+				{username && <UserAvatar username={username} etag={etag} size='x124' />}
 				<Box flexGrow={0} display='flex' mbs={12} alignItems='center' justifyContent='center'>
-					{isLoading ? (
-						<>
-							<Skeleton variant='rect' height='x28' width='x28' borderRadius='x4' mi={2} />
-							<Skeleton variant='rect' height='x28' width='x28' borderRadius='x4' mi={2} />
-							<Skeleton variant='rect' height='x28' width='x28' borderRadius='x4' mi={2} />
-						</>
-					) : (
-						actions
-					)}
+					<UserCardActions>{actions}</UserCardActions>
 				</Box>
-			</Box>
+			</div>
 			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} mis={16} width='1px'>
 				<Box mbe={4} withTruncatedText display='flex' alignItems='center'>
-					{isLoading ? <Skeleton width='100%' /> : <UserCardUsername status={status} name={name} />}
+					<UserCardUsername status={status} name={name} />
 					{nickname && (
 						<Box flexGrow={1} flexShrink={1} flexBasis={0} title={nickname} color='hint' mis={4} fontScale='p2' withTruncatedText>
 							({nickname})
@@ -113,9 +91,9 @@ const UserCard = forwardRef(function UserCard(
 						{typeof bio === 'string' ? <MarkdownText variant='inline' content={bio} /> : bio}
 					</UserCardInfo>
 				)}
-				{!isLoading && open && !isLayoutEmbedded && (
+				{onOpenUserInfo && !isLayoutEmbedded && (
 					<div>
-						<Button small onClick={open}>
+						<Button small onClick={onOpenUserInfo}>
 							{t('See_full_profile')}
 						</Button>
 					</div>

apps/meteor/client/components/UserCard/UserCardAction.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 type UserCardActionProps = ComponentProps<typeof IconButton>;
 
 const UserCardAction = ({ label, icon, ...props }: UserCardActionProps): ReactElement => (
-	<IconButton icon={icon} small title={label} {...props} mi={2} />
+	<IconButton icon={icon} small title={label} {...props} />
 );
 
 export default UserCardAction;

apps/meteor/client/components/UserCard/UserCardActions.tsx

@@ -0,0 +1,15 @@
+import { useToolbar } from '@react-aria/toolbar';
+import { ButtonGroup } from '@rocket.chat/fuselage';
+import type { ReactElement, ComponentProps } from 'react';
+import React, { useRef } from 'react';
+
+type UserCardActionsProps = ComponentProps<typeof ButtonGroup>;
+
+const UserCardActions = (props: UserCardActionsProps): ReactElement => {
+	const ref = useRef<HTMLDivElement>(null);
+	const { toolbarProps } = useToolbar(props, ref);
+
+	return <ButtonGroup ref={ref} small {...toolbarProps} {...props} />;
+};
+
+export default UserCardActions;

apps/meteor/client/components/UserCard/UserCardContainer.tsx

@@ -3,7 +3,21 @@ import type { ComponentProps } from 'react';
 import React, { forwardRef } from 'react';
 
 const UserCardContainer = forwardRef(function UserCardContainer(props: ComponentProps<typeof Box>, ref) {
-	return <Box ref={ref} rcx-user-card bg='surface' elevation='2' p={24} display='flex' borderRadius='x4' width='439px' {...props} />;
+	return (
+		<Box
+			ref={ref}
+			role='dialog'
+			minHeight='x214'
+			rcx-user-card
+			bg='surface'
+			elevation='2'
+			p={24}
+			display='flex'
+			borderRadius='x4'
+			width='439px'
+			{...props}
+		/>
+	);
 });
 
 export default UserCardContainer;

apps/meteor/client/components/UserCard/UserCardSkeleton.tsx

@@ -0,0 +1,34 @@
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import React, { forwardRef } from 'react';
+
+import UserCardContainer from './UserCardContainer';
+
+const UserCardSkeleton = forwardRef<HTMLElement, ComponentProps<typeof UserCardContainer>>(function UserCardSkeleton(props, ref) {
+	return (
+		<UserCardContainer ref={ref} {...props}>
+			<Box>
+				<Skeleton borderRadius='x4' width='x124' height='x124' variant='rect' />
+				<Box flexGrow={0} display='flex' mbs={12} alignItems='center' justifyContent='center'>
+					{Array.from({ length: 3 }).map((_, i) => (
+						<Skeleton key={i} variant='rect' height='x28' width='x28' borderRadius='x4' mi={2} />
+					))}
+				</Box>
+			</Box>
+			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} mis={16} width='1px'>
+				<Box mbe={4} withTruncatedText display='flex' alignItems='center'>
+					<Skeleton width='100%' />
+				</Box>
+				<Skeleton width='100%' />
+				{Array.from({ length: 3 }).map((_, i) => (
+					<Skeleton key={i} flexGrow={1} mi={2} />
+				))}
+				{Array.from({ length: 2 }).map((_, i) => (
+					<Skeleton key={i} width='100%' />
+				))}
+			</Box>
+		</UserCardContainer>
+	);
+});
+
+export default UserCardSkeleton;

apps/meteor/client/components/UserCard/index.ts

@@ -3,12 +3,7 @@ import UserCardAction from './UserCardAction';
 import UserCardInfo from './UserCardInfo';
 import UserCardRole from './UserCardRole';
 import UserCardRoles from './UserCardRoles';
+import UserCardSkeleton from './UserCardSkeleton';
 import UserCardUsername from './UserCardUsername';
 
-export default Object.assign(UserCard, {
-	Action: UserCardAction,
-	Role: UserCardRole,
-	Roles: UserCardRoles,
-	Info: UserCardInfo,
-	Username: UserCardUsername,
-});
+export { UserCard, UserCardAction, UserCardInfo, UserCardRole, UserCardRoles, UserCardUsername, UserCardSkeleton };