refactor: JSX automatic runtime (#34498)

.vscode/client.code-snippets

@@ -4,7 +4,6 @@
     "prefix": "sbmodule",
     "body": [
       "import type { Meta, StoryFn } from '@storybook/react';",
-      "import React from 'react';",
       "",
       "import $1 from './$1';",
       "",

apps/meteor/.babelrc

@@ -9,6 +9,14 @@
 			}
 		]
 	],
+	"plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
 	"env": {
 		"coverage": {
 			"plugins": [

apps/meteor/.storybook/decorators.tsx

@@ -1,6 +1,5 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import type { Decorator } from '@storybook/react';
-import React from 'react';
 
 import ModalContextMock from '../client/stories/contexts/ModalContextMock';
 import RouterContextMock from '../client/stories/contexts/RouterContextMock';

apps/meteor/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal.tsx

@@ -1,5 +1,4 @@
 import { Button, Modal } from '@rocket.chat/fuselage';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 type PlaceChatOnHoldModalProps = {

apps/meteor/app/ui-message/client/messageBox/AddLinkComposerActionModal.tsx

@@ -1,6 +1,6 @@
 import { Field, FieldGroup, TextInput, FieldLabel, FieldRow, Box } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 

apps/meteor/client/NavBarV2/NavBar.tsx

@@ -2,7 +2,7 @@ import { useToolbar } from '@react-aria/toolbar';
 import { NavBar as NavBarComponent, NavBarSection, NavBarGroup, NavBarDivider } from '@rocket.chat/fuselage';
 import { usePermission, useTranslation, useUser } from '@rocket.chat/ui-contexts';
 import { useVoipState } from '@rocket.chat/ui-voip';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import {
 	NavBarItemOmniChannelCallDialPad,

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmniChannelCallDialPad.tsx

@@ -1,6 +1,5 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useVoipOutboundStates } from '../../contexts/CallContext';

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggle.tsx

@@ -1,5 +1,4 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import React from 'react';
 
 import NavBarItemOmnichannelCallToggleError from './NavBarItemOmnichannelCallToggleError';
 import NavBarItemOmnichannelCallToggleLoading from './NavBarItemOmnichannelCallToggleLoading';

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleError.tsx

@@ -1,6 +1,5 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 type NavBarItemOmnichannelCallToggleErrorProps = ComponentPropsWithoutRef<typeof NavBarItem>;

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleLoading.tsx

@@ -1,6 +1,5 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 type NavBarItemOmnichannelCallToggleLoadingProps = ComponentPropsWithoutRef<typeof NavBarItem>;

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelCallToggleReady.tsx

@@ -1,6 +1,6 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useCallerInfo, useCallRegisterClient, useCallUnregisterClient, useVoipNetworkStatus } from '../../contexts/CallContext';

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelContact.tsx

@@ -1,7 +1,6 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
 import { useRouter, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
-import React from 'react';
 
 type NavBarItemOmnichannelContactProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelLivechatToggle.tsx

@@ -2,7 +2,6 @@ import { Sidebar } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ComponentProps } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useOmnichannelAgentAvailable } from '../../hooks/omnichannel/useOmnichannelAgentAvailable';

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/NavBarItemOmnichannelQueue.tsx

@@ -1,7 +1,6 @@
 import { NavBarItem } from '@rocket.chat/fuselage';
 import { useRouter, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
-import React from 'react';
 
 type NavBarItemOmnichannelQueueProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 

apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemAuditMenu.tsx

@@ -2,7 +2,6 @@ import { NavBarItem } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
 import { useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuditMenu } from './hooks/useAuditMenu';

apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemDirectoryPage.tsx

@@ -2,7 +2,6 @@ import { NavBarItem } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useRouter, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
-import React from 'react';
 
 type NavBarItemDirectoryPageProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 

apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemHomePage.tsx

@@ -2,7 +2,6 @@ import { NavBarItem } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useRouter, useLayout, useSetting, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
-import React from 'react';
 
 type NavBarItemHomePageProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 

apps/meteor/client/NavBarV2/NavBarPagesToolbar/NavBarItemMarketPlaceMenu.tsx

@@ -2,7 +2,6 @@ import { NavBarItem } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
 import { useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useMarketPlaceMenu } from './hooks/useMarketPlaceMenu';

apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx

@@ -1,7 +1,6 @@
 import { Badge, Skeleton } from '@rocket.chat/fuselage';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { useTranslation, usePermission, useRouter } from '@rocket.chat/ui-contexts';
-import React from 'react';
 
 import { useUserDropdownAppsActionButtons } from '../../../hooks/useUserDropdownAppsActionButtons';
 import { useAppRequestStats } from '../../../views/marketplace/hooks/useAppRequestStats';

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemAdministrationMenu.tsx

@@ -2,7 +2,6 @@ import { NavBarItem } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
 import { useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAdministrationMenu } from './hooks/useAdministrationMenu';

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/NavBarItemLoginPage.tsx

@@ -1,7 +1,6 @@
 import { Button } from '@rocket.chat/fuselage';
 import { useSessionDispatch } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 type NavBarItemLoginPageProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx

@@ -3,7 +3,7 @@ import { Field, TextInput, FieldGroup, Modal, Button, Box, FieldLabel, FieldRow,
 import { useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ChangeEvent, ComponentProps, FormEvent } from 'react';
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 
 import UserStatusMenu from '../../../components/UserStatusMenu';
 import { USER_STATUS_TEXT_MAX_LENGTH } from '../../../lib/constants';

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenu.tsx

@@ -2,7 +2,7 @@ import type { IUser } from '@rocket.chat/core-typings';
 import { GenericMenu, useHandleMenuAction } from '@rocket.chat/ui-client';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import type { ComponentProps } from 'react';
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import UserMenuButton from './UserMenuButton';

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx

@@ -3,7 +3,7 @@ import { Box, IconButton } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useSetting, useUser } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import { UserStatus } from '../../../components/UserStatus';
 

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx

@@ -2,7 +2,6 @@ import type { IUser } from '@rocket.chat/core-typings';
 import { Box, Margins } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useSetting } from '@rocket.chat/ui-contexts';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import MarkdownText from '../../../components/MarkdownText';

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useAccountItems.tsx

@@ -3,7 +3,6 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { defaultFeaturesPreview, usePreferenceFeaturePreviewList } from '@rocket.chat/ui-client';
 import { useRouter } from '@rocket.chat/ui-contexts';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const useAccountItems = (): GenericMenuItemProps[] => {

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useCustomStatusModalHandler.tsx

@@ -1,5 +1,4 @@
 import { useSetModal, useUser } from '@rocket.chat/ui-contexts';
-import React from 'react';
 
 import EditStatusModal from '../EditStatusModal';
 

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx

@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useCustomStatusModalHandler } from './useCustomStatusModalHandler';

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx

@@ -2,7 +2,6 @@ import type { IUser } from '@rocket.chat/core-typings';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { useLogout } from '@rocket.chat/ui-contexts';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import UserMenuHeader from '../UserMenuHeader';

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx

@@ -3,7 +3,7 @@ import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useVoipAPI, useVoipState } from '@rocket.chat/ui-voip';
 import { useMutation } from '@tanstack/react-query';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undefined => {

apps/meteor/client/NavBarV2/NavBarVoipToolbar/NavBarItemVoipDialer.tsx

@@ -3,7 +3,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useLayout } from '@rocket.chat/ui-contexts';
 import { useVoipDialer, useVoipState } from '@rocket.chat/ui-voip';
 import type { HTMLAttributes } from 'react';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type NavBarItemVoipDialerProps = Omit<HTMLAttributes<HTMLElement>, 'is'> & {

apps/meteor/client/apps/gameCenter/GameCenter.tsx

@@ -1,6 +1,6 @@
 import type { IExternalComponent } from '@rocket.chat/apps-engine/definition/externalComponent';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import type { ReactElement } from 'react';
 
 import GameCenterContainer from './GameCenterContainer';

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

@@ -1,6 +1,5 @@
 import { Avatar } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type { IGame } from './GameCenter';

apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx

@@ -1,7 +1,7 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type { IGame } from './GameCenter';

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

@@ -1,7 +1,7 @@
 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 React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type { IGame } from './GameCenter';
@@ -20,7 +20,7 @@ const GameCenterList = ({ handleClose, handleOpenGame, games, isLoading }: IGame
 	const { t } = useTranslation();
 	const setModal = useSetModal();
 	const handleInvitePlayer = useCallback(
-		(game) => {
+		(game: IGame) => {
 			const handleClose = (): void => {
 				setModal(null);
 			};

apps/meteor/client/components/ActionManagerBusyState.tsx

@@ -1,6 +1,6 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useUiKitActionManager } from '../uikit/hooks/useUiKitActionManager';

apps/meteor/client/components/AutoCompleteAgent.tsx

@@ -1,7 +1,7 @@
 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import type { ReactElement } from 'react';
-import React, { memo, useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../lib/asyncState';

apps/meteor/client/components/AutoCompleteAgentWithoutExtension.tsx

@@ -1,7 +1,7 @@
 import type { ILivechatAgent } from '@rocket.chat/core-typings';
 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../lib/asyncState';

apps/meteor/client/components/AutoCompleteDepartment.tsx

@@ -1,7 +1,7 @@
 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import type { ComponentProps, ReactElement } from 'react';
-import React, { memo, useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useRecordList } from '../hooks/lists/useRecordList';

apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx

@@ -2,7 +2,7 @@ import { CheckOption, PaginatedMultiSelectFiltered } from '@rocket.chat/fuselage
 import type { PaginatedMultiSelectOption } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import type { ComponentProps } from 'react';
-import React, { memo, useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useRecordList } from '../hooks/lists/useRecordList';

apps/meteor/client/components/Backdrop.tsx

@@ -1,6 +1,5 @@
 import { Modal } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement } from 'react';
-import React from 'react';
 
 type BackdropProps = ComponentProps<typeof Modal.Backdrop>;
 

apps/meteor/client/components/ConfirmOwnerChangeModal.tsx

@@ -1,6 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import GenericModal from './GenericModal';

apps/meteor/client/components/Contextualbar/Contextualbar.tsx

@@ -1,7 +1,7 @@
 import { ContextualbarV2, Contextualbar as ContextualbarComponent } from '@rocket.chat/fuselage';
 import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import type { ComponentProps } from 'react';
-import React, { forwardRef, memo } from 'react';
+import { forwardRef, memo } from 'react';
 
 const Contextualbar = forwardRef<HTMLElement, ComponentProps<typeof ContextualbarComponent>>(function Contextualbar(props, ref) {
 	return (

apps/meteor/client/components/Contextualbar/ContextualbarAction.tsx

@@ -1,7 +1,7 @@
 import { ContextualbarAction as ContextualbarActionComponent, ContextualbarV2Action } from '@rocket.chat/fuselage';
 import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import type { ComponentProps } from 'react';
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 const ContextualbarAction = (props: ComponentProps<typeof ContextualbarActionComponent>) => (
 	<FeaturePreview feature='newNavigation'>

apps/meteor/client/components/Contextualbar/ContextualbarActions.tsx

@@ -1,7 +1,7 @@
 import { ContextualbarV2Actions, ContextualbarActions as ContextualbarActionsComponent } from '@rocket.chat/fuselage';
 import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import type { ComponentProps } from 'react';
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 const ContextualbarActions = (props: ComponentProps<typeof ContextualbarActionsComponent>) => (
 	<FeaturePreview feature='newNavigation'>

apps/meteor/client/components/Contextualbar/ContextualbarBack.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement, ComponentProps } from 'react';
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ContextualbarAction from './ContextualbarAction';

apps/meteor/client/components/Contextualbar/ContextualbarButton.tsx

@@ -1,7 +1,7 @@
 import { ContextualbarV2Button, ContextualbarButton as ContextualbarButtonComponent } from '@rocket.chat/fuselage';
 import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import type { ComponentProps } from 'react';
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 const ContextualbarButton = (props: ComponentProps<typeof ContextualbarButtonComponent>) => (
 	<FeaturePreview feature='newNavigation'>