chore: Replace FramedIcon in favor of fuselage component

apps/meteor/client/components/GenericCard/GenericCard.tsx

@@ -1,6 +1,5 @@
-import { Card, CardTitle, CardBody, CardControls, CardHeader } from '@rocket.chat/fuselage';
+import { Card, CardTitle, CardBody, CardControls, CardHeader, FramedIcon } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
-import { FramedIcon } from '@rocket.chat/ui-client';
 import type { ComponentProps, ReactElement } from 'react';
 import React from 'react';
 
@@ -11,17 +10,21 @@ type GenericCardProps = {
 	body: string;
 	buttons?: ReactElement<typeof GenericCardButton>[];
 	icon?: ComponentProps<typeof FramedIcon>['icon'];
-	type?: ComponentProps<typeof FramedIcon>['type'];
+	type?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
 } & ComponentProps<typeof Card>;
 
 export const GenericCard: React.FC<GenericCardProps> = ({ title, body, buttons, icon, type, ...props }) => {
 	const cardId = useUniqueId();
 	const descriptionId = useUniqueId();
 
+	const iconType = type && {
+		[type]: true,
+	};
+
 	return (
 		<Card role='region' aria-labelledby={cardId} aria-describedby={descriptionId} {...props}>
 			<CardHeader>
-				{icon && <FramedIcon icon={icon} type={type || 'neutral'} />}
+				{icon && <FramedIcon icon={icon} {...(type && iconType)} />}
 				<CardTitle id={cardId}>{title}</CardTitle>
 			</CardHeader>
 			<CardBody id={descriptionId}>{body}</CardBody>

apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx

@@ -1,6 +1,5 @@
-import { Box, Card, CardBody, CardControls, CardTitle } from '@rocket.chat/fuselage';
+import { Box, Card, CardBody, CardControls, CardTitle, FramedIcon } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
-import { FramedIcon } from '@rocket.chat/ui-client';
 import type { ReactElement } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +8,8 @@ import { PRICING_LINK } from '../../utils/links';
 import InfoTextIconModal from '../InfoTextIconModal';
 
 type FeatureSet = {
-	type: 'neutral' | 'success';
+	success?: boolean;
+	neutral?: boolean;
 	title: string;
 	infoText?: string;
 };
@@ -19,68 +19,59 @@ type FeaturesCardProps = {
 	isEnterprise: boolean;
 };
 
+const getFeatureSet = (modules: string[], isEnterprise: boolean): FeatureSet[] => {
+	const featureSet: FeatureSet[] = [
+		{
+			success: isEnterprise,
+			title: 'Premium_and_unlimited_apps',
+		},
+		{
+			success: isEnterprise,
+			title: 'Premium_omnichannel_capabilities',
+		},
+		{
+			success: isEnterprise,
+			title: 'Unlimited_push_notifications',
+		},
+		{
+			success: modules.includes('videoconference-enterprise'),
+			title: 'Video_call_manager',
+		},
+		{
+			success: modules.includes('hide-watermark'),
+			title: 'Remove_RocketChat_Watermark',
+			infoText: 'Remove_RocketChat_Watermark_InfoText',
+		},
+		{
+			success: modules.includes('scalability'),
+			title: 'High_scalabaility',
+		},
+		{
+			success: modules.includes('custom-roles'),
+			title: 'Custom_roles',
+		},
+		{
+			success: modules.includes('auditing'),
+			title: 'Message_audit',
+		},
+	];
+
+	// eslint-disable-next-line no-nested-ternary
+	return featureSet.sort(({ success: a }, { success: b }) => (a === b ? 0 : a ? -1 : 1));
+};
+
 const FeaturesCard = ({ activeModules, isEnterprise }: FeaturesCardProps): ReactElement => {
 	const { t } = useTranslation();
 	const isSmall = useMediaQuery('(min-width: 1180px)');
 
-	const getFeatureSet = (modules: string[], isEnterprise: boolean): FeatureSet[] => {
-		const featureSet: FeatureSet[] = [
-			{
-				type: isEnterprise ? 'success' : 'neutral',
-				title: 'Premium_and_unlimited_apps',
-			},
-			{
-				type: isEnterprise ? 'success' : 'neutral',
-				title: 'Premium_omnichannel_capabilities',
-			},
-			{
-				type: isEnterprise ? 'success' : 'neutral',
-				title: 'Unlimited_push_notifications',
-			},
-			{
-				type: modules.includes('videoconference-enterprise') ? 'success' : 'neutral',
-				title: 'Video_call_manager',
-			},
-			{
-				type: modules.includes('hide-watermark') ? 'success' : 'neutral',
-				title: 'Remove_RocketChat_Watermark',
-				infoText: 'Remove_RocketChat_Watermark_InfoText',
-			},
-			{
-				type: modules.includes('scalability') ? 'success' : 'neutral',
-				title: 'High_scalabaility',
-			},
-			{
-				type: modules.includes('custom-roles') ? 'success' : 'neutral',
-				title: 'Custom_roles',
-			},
-			{
-				type: modules.includes('auditing') ? 'success' : 'neutral',
-				title: 'Message_audit',
-			},
-		];
-
-		const sortedFeatureSet = featureSet.sort((a, b) => {
-			if (a.type === 'success' && b.type !== 'success') {
-				return -1;
-			}
-			if (a.type !== 'success' && b.type === 'success') {
-				return 1;
-			}
-			return featureSet.indexOf(a) - featureSet.indexOf(b);
-		});
-
-		return sortedFeatureSet;
-	};
-
 	return (
 		<Card>
 			<CardTitle>{!isEnterprise ? t('Unlock_premium_capabilities') : t('Includes')}</CardTitle>
 			<CardBody>
 				<Box display='flex' flexWrap='wrap' justifyContent='space-between' flexDirection={isSmall ? 'row' : 'column'}>
-					{getFeatureSet(activeModules, isEnterprise).map(({ type, title, infoText }, index) => (
+					{getFeatureSet(activeModules, isEnterprise).map(({ success, title, infoText }, index) => (
 						<Box key={`feature_${index}`} display='flex' alignItems='center' mbe={4} width={isSmall ? '50%' : 'full'}>
-							<FramedIcon type={type} icon={type === 'success' ? 'check' : 'lock'} />
+							<FramedIcon success={success} icon={success ? 'check' : 'lock'} />
 							<Box is='p' fontScale='p2' mis={12} mie={2} color='font-secondary-info'>
 								{t(title)}
 							</Box>

apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx

@@ -1,5 +1,5 @@
 import type { IStats } from '@rocket.chat/core-typings';
-import { Button, Card, CardControls } from '@rocket.chat/fuselage';
+import { Button, Card, CardBody, CardControls } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -28,41 +28,43 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 
 	return (
 		<Card height='full'>
-			<WorkspaceCardSection
-				title={t('Users')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
-						<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
-						<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
-						<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
-						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
-					</>
-				}
-			/>
+			<CardBody flexDirection='column'>
+				<WorkspaceCardSection
+					title={t('Users')}
+					body={
+						<>
+							<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
+							<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
+							<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
+							<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
+							<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
+						</>
+					}
+				/>
 
-			<WorkspaceCardSection
-				title={t('Types')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
-						<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
-						<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
-						<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
-						<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
-					</>
-				}
-			/>
+				<WorkspaceCardSection
+					title={t('Types')}
+					body={
+						<>
+							<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
+							<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
+							<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
+							<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
+							<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
+						</>
+					}
+				/>
 
-			<WorkspaceCardSection
-				title={t('Uploads')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
-						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
-					</>
-				}
-			/>
+				<WorkspaceCardSection
+					title={t('Uploads')}
+					body={
+						<>
+							<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
+							<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
+						</>
+					}
+				/>
+			</CardBody>
 
 			<CardControls>
 				<Button disabled={!canViewEngagement} medium onClick={handleEngagement}>

apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx

@@ -113,17 +113,15 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 			[
 				isOverLimits
 					? {
-							type: 'danger',
+							danger: true,
 							icon: 'warning',
 							label: t('Plan_limits_reached'),
 					  }
 					: {
-							type: 'neutral',
 							icon: 'check',
 							label: t('Operating_withing_plan_limits'),
 					  },
 				(isAirgapped || !versions) && {
-					type: 'neutral',
 					icon: 'warning',
 					label: (
 						<Trans i18nKey='Check_support_availability'>
@@ -136,7 +134,6 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 
 				versionStatus?.label !== 'outdated' &&
 					versionStatus?.expiration && {
-						type: 'neutral',
 						icon: 'check',
 						label: (
 							<Trans i18nKey='Version_supported_until' values={{ date: formatDate(versionStatus?.expiration) }}>
@@ -147,7 +144,7 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 						),
 					},
 				versionStatus?.label === 'outdated' && {
-					type: 'danger',
+					danger: true,
 					icon: 'warning',
 					label: (
 						<Trans i18nKey='Version_not_supported'>
@@ -158,17 +155,16 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 				},
 				isRegistered
 					? {
-							type: 'neutral',
 							icon: 'check',
 							label: t('Workspace_registered'),
 					  }
 					: {
-							type: 'danger',
+							danger: true,
 							icon: 'warning',
 							label: t('Workspace_not_registered'),
 					  },
 			].filter(Boolean) as VersionActionItem[]
-		).sort((a) => (a.type === 'danger' ? -1 : 1));
+		).sort((a) => (a.danger ? -1 : 1));
 	}, [isOverLimits, t, isAirgapped, versions, versionStatus?.label, versionStatus?.expiration, formatDate, isRegistered]);
 
 	if (isLoading && !licenseData) {
@@ -193,7 +189,7 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 			</CardCol>
 
 			<CardBody flexDirection='column'>
-				{actionItems.length > 0 && actionItems.map((item, index) => <VersionCardActionItem key={index} actionItem={item} />)}
+				{actionItems.length > 0 && actionItems.map((item, index) => <VersionCardActionItem key={index} {...item} />)}
 			</CardBody>
 
 			{actionButton && (

apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionItem.tsx

@@ -1,24 +1,21 @@
-import { Box } from '@rocket.chat/fuselage';
+import { Box, FramedIcon } from '@rocket.chat/fuselage';
 import type { Keys } from '@rocket.chat/icons';
-import { FramedIcon } from '@rocket.chat/ui-client';
 import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 export type VersionActionItem = {
-	type: 'danger' | 'neutral';
+	danger?: boolean;
 	icon: Keys;
 	label: ReactNode;
 };
 
-type VersionCardActionItemProps = {
-	actionItem: VersionActionItem;
-};
+type VersionCardActionItemProps = VersionActionItem;
 
-const VersionCardActionItem = ({ actionItem }: VersionCardActionItemProps): ReactElement => {
+const VersionCardActionItem = ({ icon, label, danger }: VersionCardActionItemProps): ReactElement => {
 	return (
-		<Box display='flex' alignItems='center' color={actionItem.type === 'danger' ? 'danger' : 'secondary-info'} fontScale='p2m'>
-			<FramedIcon type={actionItem.type} icon={actionItem.icon} />
-			<Box mis={12}>{actionItem.label}</Box>
+		<Box display='flex' alignItems='center' color={danger ? 'danger' : 'secondary-info'} fontScale='p2m'>
+			<FramedIcon danger={danger} icon={icon} />
+			<Box mis={12}>{label}</Box>
 		</Box>
 	);
 };

packages/ui-client/src/components/index.ts

@@ -10,4 +10,3 @@ export * as UserStatus from './UserStatus';
 export * from './Header';
 export * from './MultiSelectCustom/MultiSelectCustom';
 export * from './FeaturePreview/FeaturePreview';
-export * from './FramedIcon';