chore: Introduce ui-avatar package to monorepo (#31482)

Co-authored-by: Douglas Fabris <[email protected]>

apps/meteor/client/components/RoomAutoComplete/Avatar.tsx

@@ -1,9 +1,8 @@
 import { Options } from '@rocket.chat/fuselage';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import type { FC } from 'react';
 import React from 'react';
 
-import RoomAvatar from '../avatar/RoomAvatar';
-
 type AvatarProps = {
 	value: string;
 	type: string;

apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx

@@ -1,11 +1,11 @@
 import { AutoComplete, Option, Box } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, ComponentProps } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
-import RoomAvatar from '../avatar/RoomAvatar';
 import Avatar from './Avatar';
 
 const generateQuery = (

apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx

@@ -1,12 +1,11 @@
 import { AutoComplete, Option, Chip, Box, Skeleton } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, ComponentProps } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
-import RoomAvatar from '../avatar/RoomAvatar';
-
 const generateQuery = (
 	term = '',
 ): {

apps/meteor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.tsx

@@ -2,13 +2,12 @@ import { isDirectMessageRoom } from '@rocket.chat/core-typings';
 import { AutoComplete, Box, Option, OptionAvatar, OptionContent, Chip } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
+import { RoomAvatar, UserAvatar } from '@rocket.chat/ui-avatar';
 import { useUser, useUserSubscriptions } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
-import RoomAvatar from '../avatar/RoomAvatar';
-import UserAvatar from '../avatar/UserAvatar';
 
 type UserAndRoomAutoCompleteMultipleProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'>;
 

apps/meteor/client/components/UserAutoComplete/UserAutoComplete.tsx

@@ -1,12 +1,11 @@
 import { AutoComplete, Option, Box, Chip, Options } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
-import UserAvatar from '../avatar/UserAvatar';
-
 const query = (
 	term = '',
 	conditions = {},

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx

@@ -1,12 +1,11 @@
 import { AutoComplete, Box, OptionAvatar, Option, OptionContent, Chip, OptionDescription } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
-import UserAvatar from '../avatar/UserAvatar';
-
 const query = (
 	term = '',
 ): {

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated.tsx

@@ -1,11 +1,11 @@
 import { MultiSelectFiltered, Icon, Box, Chip } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, AllHTMLAttributes } from 'react';
 import React, { memo, useState, useCallback, useMemo } from 'react';
 
-import UserAvatar from '../avatar/UserAvatar';
 import AutocompleteOptions, { OptionsContext } from './UserAutoCompleteMultipleOptions';
 
 type UserAutoCompleteMultipleFederatedProps = {

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx

@@ -1,10 +1,9 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Option, OptionDescription } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import UserAvatar from '../avatar/UserAvatar';
-
 type UserAutoCompleteMultipleOptionProps = {
 	label: {
 		_federated?: boolean;

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

@@ -1,13 +1,13 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, IconButton } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 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';

apps/meteor/client/components/UserInfo/UserInfoAvatar.tsx

@@ -1,8 +1,7 @@
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type { ComponentProps, ReactElement } from 'react';
 import React from 'react';
 
-import UserAvatar from '../avatar/UserAvatar';
-
 const UserInfoAvatar = ({ username, ...props }: ComponentProps<typeof UserAvatar>): ReactElement => (
 	<UserAvatar title={username} username={username} size='x332' {...props} />
 );

apps/meteor/client/components/avatar/RoomAvatarEditor.tsx

@@ -3,14 +3,14 @@ import type { IRoom, RoomAdminFieldsType } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useEffect } from 'react';
 
 import { getAvatarURL } from '../../../app/utils/client/getAvatarURL';
 import { useSingleFileInput } from '../../hooks/useSingleFileInput';
 import { isValidImageFormat } from '../../lib/utils/isValidImageFormat';
-import RoomAvatar from './RoomAvatar';
 
 type RoomAvatarEditorProps = {
 	room: Pick<IRoom, RoomAdminFieldsType>;

apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx

@@ -1,13 +1,13 @@
 import type { IUser, AvatarObject } from '@rocket.chat/core-typings';
-import { Box, Button, TextInput, Avatar, IconButton, Label } from '@rocket.chat/fuselage';
+import { Box, Button, Avatar, TextInput, IconButton, Label } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useToastMessageDispatch, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ChangeEvent } from 'react';
 import React, { useState, useCallback } from 'react';
 
 import { useSingleFileInput } from '../../../hooks/useSingleFileInput';
 import { isValidImageFormat } from '../../../lib/utils/isValidImageFormat';
-import UserAvatar from '../UserAvatar';
 import type { UserAvatarSuggestion } from './UserAvatarSuggestion';
 import UserAvatarSuggestions from './UserAvatarSuggestions';
 import { readFileAsDataURL } from './readFileAsDataURL';
@@ -81,11 +81,11 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
 					data-qa-id='UserAvatarEditor'
 					username={currentUsername || ''}
 					etag={etag}
-					onError={() => dispatchToastMessage({ type: 'error', message: t('error-invalid-image-url') })}
 					style={{
-						objectFit: 'contain',
 						imageOrientation: rotateImages ? 'from-image' : 'none',
+						objectFit: 'contain',
 					}}
+					onError={() => dispatchToastMessage({ type: 'error', message: t('error-invalid-image-url') })}
 				/>
 				<Box display='flex' flexDirection='column' flexGrow='1' justifyContent='space-between' mis={4}>
 					<Box display='flex' flexDirection='row' mbs='none'>

apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthorAvatar.tsx

@@ -1,8 +1,7 @@
+import { BaseAvatar } from '@rocket.chat/ui-avatar';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import BaseAvatar from '../../../../avatar/BaseAvatar';
-
 const AttachmentAuthorAvatar = ({ url }: { url: string }): ReactElement => <BaseAvatar url={url} size='x24' />;
 
 export default AttachmentAuthorAvatar;

apps/meteor/client/components/message/variants/RoomMessage.tsx

@@ -1,6 +1,7 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { Message, MessageLeftContainer, MessageContainer, CheckBox } from '@rocket.chat/fuselage';
 import { useToggle } from '@rocket.chat/fuselage-hooks';
+import { MessageAvatar } from '@rocket.chat/ui-avatar';
 import { useUserId } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useRef, memo } from 'react';
@@ -15,11 +16,11 @@ import {
 } from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
 import { useJumpToMessage } from '../../../views/room/MessageList/hooks/useJumpToMessage';
 import { useChat } from '../../../views/room/contexts/ChatContext';
+import Emoji from '../../Emoji';
 import IgnoredContent from '../IgnoredContent';
 import MessageHeader from '../MessageHeader';
 import MessageToolbarHolder from '../MessageToolbarHolder';
 import StatusIndicators from '../StatusIndicators';
-import MessageAvatar from '../header/MessageAvatar';
 import RoomMessageContent from './room/RoomMessageContent';
 
 type RoomMessageProps = {
@@ -81,7 +82,7 @@ const RoomMessage = ({
 			<MessageLeftContainer>
 				{!sequential && message.u.username && !selecting && showUserAvatar && (
 					<MessageAvatar
-						emoji={message.emoji}
+						emoji={message.emoji ? <Emoji emojiHandle={message.emoji} fillContainer /> : undefined}
 						avatarUrl={message.avatar}
 						username={message.u.username}
 						size='x36'

apps/meteor/client/components/message/variants/SystemMessage.tsx

@@ -11,6 +11,7 @@ import {
 	MessageUsername,
 	MessageNameContainer,
 } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -29,7 +30,6 @@ import {
 	useCountSelected,
 } from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
 import { useChat } from '../../../views/room/contexts/ChatContext';
-import UserAvatar from '../../avatar/UserAvatar';
 import Attachments from '../content/Attachments';
 import MessageActions from '../content/MessageActions';
 import { useMessageListShowRealName, useMessageListShowUsername } from '../list/MessageListContext';

apps/meteor/client/components/message/variants/ThreadMessage.tsx

@@ -1,6 +1,7 @@
 import { type IThreadMessage, type IThreadMainMessage, isVideoConfMessage } from '@rocket.chat/core-typings';
 import { Message, MessageLeftContainer, MessageContainer } from '@rocket.chat/fuselage';
 import { useToggle } from '@rocket.chat/fuselage-hooks';
+import { MessageAvatar } from '@rocket.chat/ui-avatar';
 import { useUserId } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { memo, useRef } from 'react';
@@ -9,11 +10,11 @@ import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/M
 import { useIsMessageHighlight } from '../../../views/room/MessageList/contexts/MessageHighlightContext';
 import { useJumpToMessage } from '../../../views/room/MessageList/hooks/useJumpToMessage';
 import { useChat } from '../../../views/room/contexts/ChatContext';
+import Emoji from '../../Emoji';
 import IgnoredContent from '../IgnoredContent';
 import MessageHeader from '../MessageHeader';
 import MessageToolbarHolder from '../MessageToolbarHolder';
 import StatusIndicators from '../StatusIndicators';
-import MessageAvatar from '../header/MessageAvatar';
 import ThreadMessageContent from './thread/ThreadMessageContent';
 
 type ThreadMessageProps = {
@@ -54,7 +55,7 @@ const ThreadMessage = ({ message, sequential, unread, showUserAvatar }: ThreadMe
 			<MessageLeftContainer>
 				{!sequential && message.u.username && showUserAvatar && (
 					<MessageAvatar
-						emoji={message.emoji}
+						emoji={message.emoji ? <Emoji emojiHandle={message.emoji} fillContainer /> : undefined}
 						avatarUrl={message.avatar}
 						username={message.u.username}
 						size='x36'

apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx

@@ -12,6 +12,7 @@ import {
 	CheckBox,
 	MessageStatusIndicatorItem,
 } from '@rocket.chat/fuselage';
+import { MessageAvatar } from '@rocket.chat/ui-avatar';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { memo } from 'react';
@@ -27,7 +28,7 @@ import { useMessageBody } from '../../../views/room/MessageList/hooks/useMessage
 import { useParentMessage } from '../../../views/room/MessageList/hooks/useParentMessage';
 import { isParsedMessage } from '../../../views/room/MessageList/lib/isParsedMessage';
 import { useGoToThread } from '../../../views/room/hooks/useGoToThread';
-import MessageAvatar from '../header/MessageAvatar';
+import Emoji from '../../Emoji';
 import { useShowTranslated } from '../list/MessageListContext';
 import ThreadMessagePreviewBody from './threadPreview/ThreadMessagePreviewBody';
 
@@ -101,7 +102,13 @@ const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }:
 			)}
 			<ThreadMessageRow onClick={!isSelecting ? () => goToThread({ rid: message.rid, tmid: message.tmid, msg: message._id }) : undefined}>
 				<ThreadMessageLeftContainer>
-					{!isSelecting && showUserAvatar && <MessageAvatar username={message.u.username} emoji={message.emoji} size='x18' />}
+					{!isSelecting && showUserAvatar && (
+						<MessageAvatar
+							emoji={message.emoji ? <Emoji emojiHandle={message.emoji} fillContainer /> : undefined}
+							username={message.u.username}
+							size='x18'
+						/>
+					)}
 					{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
 				</ThreadMessageLeftContainer>
 				<ThreadMessageContainer>

apps/meteor/client/sidebar/Item/Condensed.stories.tsx

@@ -1,10 +1,10 @@
 import { Box, IconButton } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { action } from '@storybook/addon-actions';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import * as Status from '../../components/UserStatus';
-import UserAvatar from '../../components/avatar/UserAvatar';
 import Condensed from './Condensed';
 
 export default {

apps/meteor/client/sidebar/Item/Extended.stories.tsx

@@ -1,10 +1,10 @@
 import { Box, IconButton, Badge } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { action } from '@storybook/addon-actions';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import * as Status from '../../components/UserStatus';
-import UserAvatar from '../../components/avatar/UserAvatar';
 import Extended from './Extended';
 
 export default {