chore: Move ContextualBar and subcomponents to ui-client package

apps/meteor/.storybook/main.ts

@@ -28,6 +28,7 @@ export default {
 				'react$': require.resolve('../../../node_modules/react'),
 				// 'react/jsx-runtime': require.resolve('../../../node_modules/react/jsx-runtime'),
 				'@tanstack/react-query': require.resolve('../../../node_modules/@tanstack/react-query'),
+				'@rocket.chat/fuselage$': require.resolve('../../../node_modules/@rocket.chat/fuselage'),
 				'swiper/swiper.css$': 'swiper/css',
 				'swiper/modules/navigation/navigation.min.css$': 'swiper/css/navigation',
 				'swiper/modules/keyboard/keyboard.min.css$': 'swiper/css/keyboard',

apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx

@@ -1,16 +1,16 @@
 import { Avatar } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import type { IGame } from './GameCenter';
 import {
 	ContextualbarTitle,
 	ContextualbarHeader,
 	ContextualbarBack,
 	ContextualbarContent,
 	ContextualbarClose,
 	ContextualbarDialog,
-} from '../../components/Contextualbar';
+} from '@rocket.chat/ui-client';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { IGame } from './GameCenter';
 
 interface IGameCenterContainerProps {
 	handleClose: () => void;

apps/meteor/client/apps/gameCenter/GameCenterList.tsx

@@ -1,19 +1,19 @@
 import { Avatar, Icon, Table, TableBody, TableCell, TableHead, TableRow } from '@rocket.chat/fuselage';
-import { useSetModal } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import type { IGame } from './GameCenter';
-import GameCenterInvitePlayersModal from './GameCenterInvitePlayersModal';
 import {
 	ContextualbarHeader,
 	ContextualbarTitle,
 	ContextualbarClose,
 	ContextualbarContent,
 	ContextualbarDialog,
 	ContextualbarSkeleton,
-} from '../../components/Contextualbar';
+} from '@rocket.chat/ui-client';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { IGame } from './GameCenter';
+import GameCenterInvitePlayersModal from './GameCenterInvitePlayersModal';
 
 interface IGameCenterListProps {
 	handleClose: () => void;

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

@@ -1,6 +1,6 @@
+import { ContextualbarDialog } from '@rocket.chat/ui-client';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { ContextualbarDialog } from '../Contextualbar';
 import * as Status from '../UserStatus';
 import UserInfo from './UserInfo';
 import { UserCardRole } from '../UserCard';

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

@@ -1,14 +1,13 @@
 import type { IUser, Serialized } from '@rocket.chat/core-typings';
 import { Box, Margins, Tag } from '@rocket.chat/fuselage';
-import { useUserDisplayName } from '@rocket.chat/ui-client';
+import { useUserDisplayName, ContextualbarScrollableContent } from '@rocket.chat/ui-client';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ReactNode } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useTimeAgo } from '../../hooks/useTimeAgo';
 import { useUserCustomFields } from '../../hooks/useUserCustomFields';
-import { ContextualbarScrollableContent } from '../Contextualbar';
 import {
 	InfoPanel,
 	InfoPanelActionGroup,

apps/meteor/client/views/admin/ABAC/AdminABACRoomAttributesForm.tsx

@@ -10,12 +10,11 @@ import {
 	IconButton,
 	TextInput,
 } from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent } from '@rocket.chat/ui-client';
 import { useCallback, useId, useMemo } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import { ContextualbarScrollableContent } from '../../../components/Contextualbar';
-
 export type AdminABACRoomAttributesFormFormData = {
 	name: string;
 	attributeValues: { value: string }[];

apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx

@@ -1,10 +1,10 @@
 import { Box, Button, ButtonGroup, Margins, TextInput, Field, FieldLabel, FieldRow, FieldError, IconButton } from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ChangeEvent } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
 import { useEndpointUploadMutation } from '../../../hooks/useEndpointUploadMutation';
 import { useSingleFileInput } from '../../../hooks/useSingleFileInput';
 

apps/meteor/client/views/admin/customEmoji/CustomEmojiRoute.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@rocket.chat/fuselage';
+import { ContextualbarHeader, ContextualbarClose, ContextualbarDialog, ContextualbarTitle } from '@rocket.chat/ui-client';
 import { useRoute, useRouteParameter, usePermission } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useCallback, useRef } from 'react';
@@ -7,7 +8,6 @@ import { useTranslation } from 'react-i18next';
 import AddCustomEmoji from './AddCustomEmoji';
 import CustomEmoji from './CustomEmoji';
 import EditCustomEmojiWithData from './EditCustomEmojiWithData';
-import { ContextualbarHeader, ContextualbarClose, ContextualbarDialog, ContextualbarTitle } from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 

apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx

@@ -11,13 +11,12 @@ import {
 	FieldError,
 	IconButton,
 } from '@rocket.chat/fuselage';
-import { GenericModal } from '@rocket.chat/ui-client';
+import { GenericModal, ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useSetModal, useAbsoluteUrl, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent } from 'react';
 import { useCallback, useState, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
 import { useEndpointMutation } from '../../../hooks/useEndpointMutation';
 import { useEndpointUploadMutation } from '../../../hooks/useEndpointUploadMutation';
 import { useSingleFileInput } from '../../../hooks/useSingleFileInput';

apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx

@@ -1,11 +1,11 @@
 import { Field, FieldLabel, FieldRow, TextInput, Box, Margins, Button, ButtonGroup, IconButton } from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useMethod } from '@rocket.chat/ui-contexts';
 import type { ReactElement, FormEvent } from 'react';
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { validate, createSoundData } from './lib';
-import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
 import { useSingleFileInput } from '../../../hooks/useSingleFileInput';
 
 type AddCustomSoundProps = {

apps/meteor/client/views/admin/customSounds/CustomSoundsPage.tsx

@@ -1,12 +1,12 @@
 import { Button } from '@rocket.chat/fuselage';
+import { ContextualbarTitle, ContextualbarClose, ContextualbarHeader, ContextualbarDialog } from '@rocket.chat/ui-client';
 import { useRoute, useRouteParameter } from '@rocket.chat/ui-contexts';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AddCustomSound from './AddCustomSound';
 import CustomSoundsTable from './CustomSoundsTable';
 import EditCustomSound from './EditCustomSound';
-import { ContextualbarTitle, ContextualbarClose, ContextualbarHeader, ContextualbarDialog } from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 
 const CustomSoundsPage = () => {

apps/meteor/client/views/admin/customSounds/EditSound.tsx

@@ -1,12 +1,11 @@
 import { Box, Button, ButtonGroup, Margins, TextInput, Field, FieldLabel, FieldRow, IconButton } from '@rocket.chat/fuselage';
-import { GenericModal } from '@rocket.chat/ui-client';
+import { GenericModal, ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useMethod } from '@rocket.chat/ui-contexts';
 import type { ReactElement, SyntheticEvent } from 'react';
 import { useCallback, useState, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { validate, createSoundData } from './lib';
-import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
 import { useSingleFileInput } from '../../../hooks/useSingleFileInput';
 
 type EditSoundProps = {

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusForm.tsx

@@ -1,14 +1,12 @@
 import type { IUserStatus } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { FieldGroup, Button, ButtonGroup, TextInput, Field, FieldLabel, FieldRow, FieldError, Select, Box } from '@rocket.chat/fuselage';
-import { GenericModal } from '@rocket.chat/ui-client';
+import { GenericModal, ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useSetModal, useRoute, useToastMessageDispatch, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useId, useCallback } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
-import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
-
 type CustomUserStatusFormFormData = {
 	name: string;
 	statusType: string;

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusRoute.tsx

@@ -1,4 +1,5 @@
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { ContextualbarHeader, ContextualbarClose, ContextualbarTitle, ContextualbarDialog } from '@rocket.chat/ui-client';
 import { useRoute, useRouteParameter, usePermission, useTranslation, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useCallback, useRef, useEffect } from 'react';
@@ -7,7 +8,6 @@ import CustomUserActiveConnections from './CustomUserActiveConnections';
 import CustomUserStatusFormWithData from './CustomUserStatusFormWithData';
 import CustomUserStatusService from './CustomUserStatusService';
 import CustomUserStatusTable from './CustomUserStatusTable';
-import { ContextualbarHeader, ContextualbarClose, ContextualbarTitle, ContextualbarDialog } from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusService.tsx

@@ -11,11 +11,11 @@ import {
 	StatesSubtitle,
 	ToggleSwitch,
 } from '@rocket.chat/fuselage';
+import { ContextualbarContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { ContextualbarContent, ContextualbarFooter } from '../../../components/Contextualbar';
 import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
 import { links } from '../../../lib/links';
 import { useActiveConnections } from '../../hooks/useActiveConnections';

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminPage.tsx

@@ -1,9 +1,9 @@
+import { ContextualbarDialog } from '@rocket.chat/ui-client';
 import { useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
 import { useTranslation } from 'react-i18next';
 
 import DeviceManagementAdminTable from './DeviceManagementAdminTable';
 import DeviceManagementInfo from './DeviceManagementInfo';
-import { ContextualbarDialog } from '../../../components/Contextualbar';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 
 const DeviceManagementAdminPage = () => {

apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx

@@ -1,18 +1,18 @@
 import type { DeviceManagementPopulatedSession } from '@rocket.chat/core-typings';
 import { Box, Button, ButtonGroup, StatusBullet } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
-import { useRoute, useUserPresence } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
 import {
 	ContextualbarHeader,
 	ContextualbarClose,
 	ContextualbarScrollableContent,
 	ContextualbarFooter,
 	ContextualbarTitle,
-} from '../../../../components/Contextualbar';
+} from '@rocket.chat/ui-client';
+import { useRoute, useUserPresence } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import { InfoPanel, InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../components/InfoPanel';
 import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';

apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfoWithData.tsx

@@ -1,17 +1,17 @@
 import type { Serialized, DeviceManagementPopulatedSession } from '@rocket.chat/core-typings';
 import { Box, States, StatesIcon, StatesTitle, StatesSubtitle } from '@rocket.chat/fuselage';
-import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
-import { useTranslation } from 'react-i18next';
-
-import DeviceManagementInfo from './DeviceManagementInfo';
 import {
 	ContextualbarHeader,
 	ContextualbarClose,
 	ContextualbarContent,
 	ContextualbarTitle,
 	ContextualbarSkeletonBody,
-} from '../../../../components/Contextualbar';
+} from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import DeviceManagementInfo from './DeviceManagementInfo';
 import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
 
 const convertSessionFromAPI = ({

apps/meteor/client/views/admin/moderation/ModConsoleReportDetails.tsx

@@ -1,12 +1,12 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Tabs, TabsItem, ContextualbarHeader, ContextualbarTitle } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarClose, ContextualbarDialog } from '@rocket.chat/ui-client';
 import { useTranslation, useRouter, useRouteParameter } from '@rocket.chat/ui-contexts';
 import { useState } from 'react';
 
 import UserMessages from './UserMessages';
 import UserReportInfo from './UserReports/UserReportInfo';
-import { ContextualbarClose, ContextualbarDialog } from '../../../components/Contextualbar';
 
 type ModConsoleReportDetailsProps = {
 	userId: IUser['_id'];

apps/meteor/client/views/admin/moderation/UserMessages.tsx

@@ -1,13 +1,13 @@
 import { Box, Callout, Message, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import MessageContextFooter from './MessageContextFooter';
 import ContextMessage from './helpers/ContextMessage';
-import { ContextualbarFooter } from '../../../components/Contextualbar';
 import GenericNoResults from '../../../components/GenericNoResults';
 
 // TODO: We should use Contextualbar components here

apps/meteor/client/views/admin/moderation/UserReports/UserReportInfo.tsx

@@ -10,13 +10,13 @@ import {
 	FieldLabel,
 	FieldRow,
 } from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import UserContextFooter from './UserContextFooter';
-import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../../components/Contextualbar';
 import GenericNoResults from '../../../../components/GenericNoResults';
 import { FormSkeleton } from '../../../../components/Skeleton';
 import { UserCardRole } from '../../../../components/UserCard';

apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx

@@ -13,15 +13,13 @@ import {
 	ToggleSwitch,
 	FieldGroup,
 } from '@rocket.chat/fuselage';
-import { GenericModal } from '@rocket.chat/ui-client';
+import { GenericModal, ContextualbarScrollableContent } from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useRoute, useAbsoluteUrl, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ComponentProps } from 'react';
 import { useCallback, useId, useMemo } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
-import { ContextualbarScrollableContent } from '../../../components/Contextualbar';
-
 type EditOAuthAddAppPayload = {
 	name: string;
 	active: boolean;

apps/meteor/client/views/admin/oauthApps/OAuthAddApp.tsx

@@ -11,15 +11,14 @@ import {
 	ToggleSwitch,
 	FieldGroup,
 } from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useRoute, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useCallback, useId } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import { ContextualbarScrollableContent } from '../../../components/Contextualbar';
-
 type OAuthAddAppPayload = {
 	name: string;
 	active: boolean;

apps/meteor/client/views/admin/permissions/EditRolePage.tsx

@@ -1,14 +1,13 @@
 import type { IRole } from '@rocket.chat/core-typings';
 import { Box, ButtonGroup, Button, Margins } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { GenericModal } from '@rocket.chat/ui-client';
+import { GenericModal, ContextualbarFooter, ContextualbarScrollableContent } from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useRoute, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import RoleForm from './RoleForm';
-import { ContextualbarFooter, ContextualbarScrollableContent } from '../../../components/Contextualbar';
 
 export type EditRolePageFormData = {
 	roleId: string;

apps/meteor/client/views/admin/permissions/PermissionsContextBar.tsx

@@ -1,11 +1,11 @@
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarHeader, ContextualbarTitle, ContextualbarClose, ContextualbarDialog } from '@rocket.chat/ui-client';
 import { useRouteParameter, useRoute, useTranslation, useSetModal } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useEffect } from 'react';
 
 import CustomRoleUpsellModal from './CustomRoleUpsellModal';
 import EditRolePageWithData from './EditRolePageWithData';
-import { ContextualbarHeader, ContextualbarTitle, ContextualbarClose, ContextualbarDialog } from '../../../components/Contextualbar';
 import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
 
 const PermissionsContextBar = (): ReactElement | null => {