snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,110 @@
+import type { Meta } from '@storybook/react';
+
+import { UserCard, UserCardRole, UserCardAction } from '.';
+
+const user = {
+	name: 'guilherme.gazzo',
+	customStatus: '🛴 currently working on User Card',
+	roles: (
+		<>
+			<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.',
+	localTime: 'Local Time: 7:44 AM',
+};
+
+export default {
+	component: UserCard,
+	parameters: {
+		layout: 'centered',
+	},
+	args: {
+		user,
+		actions: (
+			<>
+				<UserCardAction icon='message' />
+				<UserCardAction icon='phone' />
+			</>
+		),
+	},
+} satisfies Meta<typeof UserCard>;
+
+export const Example = {};
+
+export const Nickname = {
+	args: {
+		user: {
+			...user,
+			nickname: 'nicknamenickname',
+		},
+	} as any,
+};
+
+export const LargeName = {
+	args: {
+		user: {
+			...user,
+			customStatus: '🛴 currently working on User Card  on User Card  on User Card  on User Card  on User Card ',
+			name: 'guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.',
+		},
+	} as any,
+};
+
+export const NoRoles = {
+	args: {
+		user: {
+			...user,
+			roles: undefined,
+		},
+	} as any,
+};
+
+export const NoActions = {
+	args: {
+		actions: undefined,
+	} as any,
+};
+
+export const NoLocalTime = {
+	args: {
+		user: {
+			...user,
+			localTime: undefined,
+		},
+	} as any,
+};
+
+export const NoBio = {
+	args: {
+		user: {
+			...user,
+			bio: undefined,
+		},
+	} as any,
+};
+
+export const NoBioAndNoLocalTime = {
+	args: {
+		user: {
+			...user,
+			bio: undefined,
+			localTime: undefined,
+		},
+	} as any,
+};
+
+export const NoBioNoLocalTimeNoRoles = {
+	args: {
+		user: {
+			...user,
+			bio: undefined,
+			localTime: undefined,
+			roles: undefined,
+		},
+	} as any,
+};
+
+export const Loading = () => <UserCard />;

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

@@ -0,0 +1,106 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button, IconButton } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useEmbeddedLayout } from '@rocket.chat/ui-client';
+import type { ReactNode, ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MarkdownText from '../MarkdownText';
+import * as Status from '../UserStatus';
+import UserCardActions from './UserCardActions';
+import UserCardDialog from './UserCardDialog';
+import UserCardInfo from './UserCardInfo';
+import UserCardRoles from './UserCardRoles';
+import UserCardUsername from './UserCardUsername';
+
+const clampStyle = css`
+	display: -webkit-box;
+	overflow: hidden;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	word-break: break-word;
+`;
+
+export type UserCardProps = {
+	user?: {
+		nickname?: string;
+		name?: string;
+		username?: string;
+		etag?: string;
+		customStatus?: ReactNode;
+		roles?: ReactNode;
+		bio?: ReactNode;
+		status?: ReactNode;
+		localTime?: ReactNode;
+	};
+	actions?: ReactNode;
+	onOpenUserInfo?: () => void;
+	onClose?: () => void;
+} & ComponentProps<typeof UserCardDialog>;
+
+const UserCard = ({
+	user: { name, username, etag, customStatus, roles, bio, status = <Status.Offline />, localTime, nickname } = {},
+	actions,
+	onOpenUserInfo,
+	onClose,
+	...props
+}: UserCardProps) => {
+	const { t } = useTranslation();
+	const isLayoutEmbedded = useEmbeddedLayout();
+
+	return (
+		<UserCardDialog aria-label={t('User_card')} {...props}>
+			<div>
+				{username && <UserAvatar username={username} etag={etag} size='x124' />}
+				<Box flexGrow={0} display='flex' marginBlockStart={12} alignItems='center' justifyContent='center'>
+					<UserCardActions aria-label={t('User_card_actions')}>{actions}</UserCardActions>
+				</Box>
+			</div>
+			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} marginInlineStart={16} width='1px'>
+				<Box marginBlockEnd={4} withTruncatedText display='flex' alignItems='center'>
+					<UserCardUsername status={status} name={name} />
+					{nickname && (
+						<Box
+							flexGrow={1}
+							flexShrink={1}
+							flexBasis={0}
+							title={nickname}
+							color='hint'
+							marginInlineStart={4}
+							fontScale='p2'
+							withTruncatedText
+						>
+							({nickname})
+						</Box>
+					)}
+				</Box>
+				{customStatus && (
+					<UserCardInfo marginBlockEnd={16}>
+						{typeof customStatus === 'string' ? (
+							<MarkdownText withTruncatedText variant='inlineWithoutBreaks' content={customStatus} parseEmoji={true} />
+						) : (
+							customStatus
+						)}
+					</UserCardInfo>
+				)}
+				<UserCardRoles>{roles}</UserCardRoles>
+				<UserCardInfo>{localTime}</UserCardInfo>
+				{bio && (
+					<UserCardInfo withTruncatedText={false} className={clampStyle} height='x60'>
+						{typeof bio === 'string' ? <MarkdownText variant='inline' content={bio} /> : bio}
+					</UserCardInfo>
+				)}
+				{onOpenUserInfo && !isLayoutEmbedded && (
+					<div>
+						<Button small onClick={onOpenUserInfo}>
+							{t('See_full_profile')}
+						</Button>
+					</div>
+				)}
+			</Box>
+			{onClose && <IconButton marginInlineStart={16} small aria-label={t('Close')} icon='cross' onClick={onClose} />}
+		</UserCardDialog>
+	);
+};
+
+export default UserCard;

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

@@ -0,0 +1,8 @@
+import { IconButton } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+export type UserCardActionProps = ComponentProps<typeof IconButton>;
+
+const UserCardAction = ({ label, icon, ...props }: UserCardActionProps) => <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 { ComponentProps } from 'react';
+import { useRef } from 'react';
+
+export type UserCardActionsProps = ComponentProps<typeof ButtonGroup>;
+
+const UserCardActions = (props: UserCardActionsProps) => {
+	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/UserCardDialog.tsx

@@ -0,0 +1,30 @@
+import type { AriaDialogProps } from '@react-aria/dialog';
+import { useDialog } from '@react-aria/dialog';
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import { useRef } from 'react';
+
+export type UserCardDialogProps = AriaDialogProps & ComponentProps<typeof Box>;
+
+const UserCardDialog = (props: UserCardDialogProps) => {
+	const ref = useRef(null);
+	const { dialogProps } = useDialog(props, ref);
+
+	return (
+		<Box
+			ref={ref}
+			minHeight='x214'
+			rcx-user-card
+			backgroundColor='surface'
+			elevation='2'
+			padding={24}
+			display='flex'
+			borderRadius='x4'
+			width='439px'
+			{...props}
+			{...dialogProps}
+		/>
+	);
+};
+
+export default UserCardDialog;

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

@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+const UserCardInfo = (props: ComponentProps<typeof Box>) => (
+	<Box marginBlock={8} is='span' fontScale='p2' color='hint' withTruncatedText {...props} />
+);
+
+export default UserCardInfo;

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

@@ -0,0 +1,12 @@
+import { Box, Tag } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+
+export type UserCardRoleProps = { children: ReactNode };
+
+const UserCardRole = ({ children }: UserCardRoleProps) => (
+	<Box margin={2} fontScale='c2'>
+		<Tag>{children}</Tag>
+	</Box>
+);
+
+export default UserCardRole;

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

@@ -0,0 +1,16 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+
+import UserCardInfo from './UserCardInfo';
+
+export type UserCardRolesProps = { children: ReactNode };
+
+const UserCardRoles = ({ children }: UserCardRolesProps) => (
+	<Box margin='neg-x2'>
+		<UserCardInfo flexWrap='wrap' display='flex' flexShrink={0}>
+			{children}
+		</UserCardInfo>
+	</Box>
+);
+
+export default UserCardRoles;

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

@@ -0,0 +1,33 @@
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+import UserCardDialog from './UserCardDialog';
+
+const UserCardSkeleton = (props: ComponentProps<typeof UserCardDialog>) => {
+	return (
+		<UserCardDialog {...props}>
+			<Box>
+				<Skeleton borderRadius='x4' width='x124' height='x124' variant='rect' />
+				<Box flexGrow={0} display='flex' marginBlockStart={12} alignItems='center' justifyContent='center'>
+					{Array.from({ length: 3 }).map((_, i) => (
+						<Skeleton key={i} variant='rect' height='x28' width='x28' borderRadius='x4' marginInline={2} />
+					))}
+				</Box>
+			</Box>
+			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} marginInlineStart={16} width='1px'>
+				<Box marginBlockEnd={4} withTruncatedText display='flex' alignItems='center'>
+					<Skeleton width='100%' />
+				</Box>
+				<Skeleton width='100%' />
+				{Array.from({ length: 3 }).map((_, i) => (
+					<Skeleton key={i} flexGrow={1} marginInline={2} />
+				))}
+				{Array.from({ length: 2 }).map((_, i) => (
+					<Skeleton key={i} width='100%' />
+				))}
+			</Box>
+		</UserCardDialog>
+	);
+};
+
+export default UserCardSkeleton;

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

@@ -0,0 +1,31 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactNode, ComponentProps } from 'react';
+
+import * as UserStatus from '../UserStatus';
+
+export type UserCardUsernameProps = ComponentProps<typeof Box> & {
+	name: ReactNode;
+	status: ReactNode;
+};
+
+const UserCardUsername = ({ name, status = <UserStatus.Offline />, ...props }: UserCardUsernameProps) => (
+	<Box
+		display='flex'
+		title={name}
+		flexGrow={2}
+		flexShrink={1}
+		flexBasis={0}
+		alignItems='center'
+		fontScale='h4'
+		color='default'
+		withTruncatedText
+		{...props}
+	>
+		{status}
+		<Box marginInlineStart={8} flexGrow={1} withTruncatedText>
+			{name}
+		</Box>
+	</Box>
+);
+
+export default UserCardUsername;

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

@@ -0,0 +1,9 @@
+import UserCard from './UserCard';
+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 { UserCard, UserCardAction, UserCardInfo, UserCardRole, UserCardRoles, UserCardUsername, UserCardSkeleton };