refactor: Explicit component props (17/23)

apps/meteor/client/views/teams/contextualBar/TeamAutocomplete/TeamAutocomplete.tsx

@@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query';
 import type { ComponentProps } from 'react';
 import { memo, useMemo, useState } from 'react';
 
-type TeamAutocompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'>;
+export type TeamAutocompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'>;
 
 const TeamAutocomplete = ({ value, onChange, ...props }: TeamAutocompleteProps) => {
 	const [filter, setFilter] = useState('');

apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/BaseRemoveUsersModal.tsx

@@ -11,7 +11,7 @@ const STEPS = {
 	CONFIRM_DELETE: 'CONFIRM_DELETE',
 };
 
-type BaseRemoveUsersModalProps = {
+export type BaseRemoveUsersModalProps = {
 	onClose: () => void;
 	onCancel: () => void;
 	onConfirm: (deletedRooms: { [key: string]: Serialized<IRoom> }) => void;

apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersFirstStep.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import ChannelDesertionTable from '../../../ChannelDesertionTable';
 
-type RemoveUsersFirstStepProps = {
+export type RemoveUsersFirstStepProps = {
 	onClose: () => void;
 	onCancel: () => void;
 	onConfirm: () => void;

apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersModal.tsx

@@ -6,7 +6,7 @@ import { useQuery } from '@tanstack/react-query';
 import BaseRemoveUsersModal from './BaseRemoveUsersModal';
 import { teamsQueryKeys, usersQueryKeys } from '../../../../../lib/queryKeys';
 
-type RemoveUsersModalProps = {
+export type RemoveUsersModalProps = {
 	onClose: () => void;
 	onCancel: () => void;
 	onConfirm: (deletedRooms: { [key: string]: Serialized<IRoom> }) => void;

apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersSecondStep.tsx

@@ -3,7 +3,7 @@ import { Icon } from '@rocket.chat/fuselage';
 import { GenericModal } from '@rocket.chat/ui-client';
 import { useTranslation } from 'react-i18next';
 
-type RemoveUsersSecondStepProps = {
+export type RemoveUsersSecondStepProps = {
 	onClose: () => void;
 	onCancel: () => void;
 	onConfirm: (deletedRooms: { [key: string]: Serialized<IRoom> }) => void;

apps/meteor/tests/mocks/client/FakeChatProvider.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import { ChatContext } from '../../../client/views/room/contexts/ChatContext';
 import { createFakeSubscription } from '../data';
 
-type FakeChatProviderProps = {
+export type FakeChatProviderProps = {
 	children?: ReactNode;
 };
 

apps/meteor/tests/mocks/client/FakeRoomProvider.tsx

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 import { RoomContext } from '../../../client/views/room/contexts/RoomContext';
 import { createFakeRoom, createFakeSubscription } from '../data';
 
-type FakeRoomProviderProps = {
+export type FakeRoomProviderProps = {
 	children?: ReactNode;
 	roomOverrides?: Partial<IRoom>;
 	subscriptionOverrides?: Partial<ISubscription>;

apps/meteor/tests/mocks/client/ModalContextMock.tsx

@@ -2,7 +2,7 @@ import { ModalContext } from '@rocket.chat/ui-contexts';
 import type { ContextType, ReactNode } from 'react';
 import { useMemo } from 'react';
 
-type ModalContextMockProps = {
+export type ModalContextMockProps = {
 	children: ReactNode;
 };
 

apps/meteor/tests/mocks/client/RouterContextMock.tsx

@@ -55,7 +55,7 @@ const buildRoutePath = (to: To): LocationPathname | `${LocationPathname}?${Locat
 	throw new Error('Invalid route');
 };
 
-type RouterContextMockProps = {
+export type RouterContextMockProps = {
 	children?: ReactNode;
 	navigate?: (toOrDelta: number | To) => void;
 	currentPath?: MutableRefObject<string | undefined>;

apps/meteor/tests/mocks/client/ServerProviderMock.tsx

@@ -78,7 +78,7 @@ const contextValue: ServerContextValue = {
 	writeStream,
 };
 
-type ServerProviderMockProps = {
+export type ServerProviderMockProps = {
 	children?: ReactNode;
 	callEndpoint?: ContextType<typeof ServerContext>['callEndpoint'];
 };

apps/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx

@@ -13,7 +13,9 @@ import EditMenu from '../ScreenThumbnail/EditMenu/EditMenu';
 import ScreenThumbnailWrapper from '../ScreenThumbnail/ScreenThumbnailWrapper';
 import Thumbnail from '../ScreenThumbnail/Thumbnail';
 
-const ScreenThumbnail = ({ screen, disableDelete }: { screen: ScreenType; disableDelete: boolean }) => {
+export type ScreenThumbnailProps = { screen: ScreenType; disableDelete: boolean };
+
+const ScreenThumbnail = ({ screen, disableDelete }: ScreenThumbnailProps) => {
 	const { dispatch } = useContext(context);
 	const [name, setName] = useState<string>(screen?.name);
 	const toast = useToastBarDispatch();

apps/uikit-playground/src/Components/DropDown/DropDown.tsx

@@ -4,7 +4,7 @@ import { Fragment } from 'react';
 import Items from './Items';
 import type { Item, ItemBranch } from './types';
 
-type DropDownProps = {
+export type DropDownProps = {
 	readonly blocksTree: Item;
 };
 

apps/uikit-playground/src/Components/DropDown/ItemsIcon.tsx

@@ -1,6 +1,8 @@
 import { Icon } from '@rocket.chat/fuselage';
 
-const ItemsIcon = ({ layer, lastNode, hover }: { layer: number; lastNode: boolean; hover: boolean }) => {
+export type ItemsIconProps = { layer: number; lastNode: boolean; hover: boolean };
+
+const ItemsIcon = ({ layer, lastNode, hover }: ItemsIconProps) => {
 	const selectIcon = (layer: number, hover: boolean) => {
 		if (layer === 1) {
 			return <Icon name='folder' size='x12' color={hover ? '#fff' : '#1d74f5'} />;

apps/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx

@@ -8,7 +8,9 @@ import type { idType } from '../../../Context/initialState';
 import SurfaceRender from '../../Preview/Display/Surface/SurfaceRender';
 import RenderPayload from '../../RenderPayload/RenderPayload';
 
-const UIKitWrapper = ({ id, data }: { id: string; data: idType }) => {
+export type UIKitWrapperProps = { id: string; data: idType };
+
+const UIKitWrapper = ({ id, data }: UIKitWrapperProps) => {
 	const {
 		state: { screens },
 	} = useContext(context);

apps/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx

@@ -15,7 +15,9 @@ import EditableLabel from '../../ScreenThumbnail/EditableLabel/EditableLabel';
 import ScreenThumbnailWrapper from '../../ScreenThumbnail/ScreenThumbnailWrapper';
 import Thumbnail from '../../ScreenThumbnail/Thumbnail';
 
-const ProjectsThumbnail = ({ id, name: _name, date, blocks }: { id: string; name: string; date: string; blocks: ILayoutBlock[] }) => {
+export type ProjectsThumbnailProps = { id: string; name: string; date: string; blocks: ILayoutBlock[] };
+
+const ProjectsThumbnail = ({ id, name: _name, date, blocks }: ProjectsThumbnailProps) => {
 	const [name, setName] = useState<string>(_name);
 	const navigate = useNavigate();
 	const { dispatch } = useContext(context);

apps/uikit-playground/src/Components/NavBar/BurgerIcon/BurgerIcon.tsx

@@ -6,7 +6,9 @@ import Line from './Line';
 import Wrapper from './Wrapper';
 import { context } from '../../../Context';
 
-const BurgerIcon = ({ children }: { children?: ReactNode }) => {
+export type BurgerIconProps = { children?: ReactNode };
+
+const BurgerIcon = ({ children }: BurgerIconProps) => {
 	const isReducedMotionPreferred = usePrefersReducedMotion();
 	const {
 		state: { navMenuToggle },

apps/uikit-playground/src/Components/NavBar/BurgerIcon/Line.tsx

@@ -1,7 +1,9 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 
-const Line = ({ animated, moved }: { animated: boolean; moved?: boolean }) => {
+export type LineProps = { animated: boolean; moved?: boolean };
+
+const Line = ({ animated, moved }: LineProps) => {
 	const animatedStyle = animated
 		? css`
 				will-change: transform;

apps/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx

@@ -2,7 +2,9 @@ import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const Wrapper = ({ children }: { children: ReactNode }) => (
+export type WrapperProps = { children: ReactNode };
+
+const Wrapper = ({ children }: WrapperProps) => (
 	<Box
 		is='span'
 		display='inline-flex'

apps/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx

@@ -1,6 +1,8 @@
 import { Banner, Icon } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const MessageSurface = ({ children }: { children: ReactNode }) => <Banner icon={<Icon name='info' size='x20' />}>{children}</Banner>;
+export type MessageSurfaceProps = { children: ReactNode };
+
+const MessageSurface = ({ children }: MessageSurfaceProps) => <Banner icon={<Icon name='info' size='x20' />}>{children}</Banner>;
 
 export default MessageSurface;

apps/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx

@@ -12,7 +12,9 @@ import {
 import { Scrollbars } from 'rc-scrollbars';
 import type { ReactNode } from 'react';
 
-const ContextualBarSurface = ({ children }: { children: ReactNode }) => (
+export type ContextualBarSurfaceProps = { children: ReactNode };
+
+const ContextualBarSurface = ({ children }: ContextualBarSurfaceProps) => (
 	<Contextualbar>
 		<ContextualbarHeader>
 			<Avatar url='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' />

apps/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx

@@ -15,7 +15,9 @@ import {
 } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const MessageSurface = ({ children }: { children: ReactNode }) => (
+export type MessageSurfaceProps = { children: ReactNode };
+
+const MessageSurface = ({ children }: MessageSurfaceProps) => (
 	<Message>
 		<MessageLeftContainer>
 			<Avatar

apps/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx

@@ -12,7 +12,9 @@ import {
 } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const ModalSurface = ({ children }: { children: ReactNode }) => (
+export type ModalSurfaceProps = { children: ReactNode };
+
+const ModalSurface = ({ children }: ModalSurfaceProps) => (
 	<Modal>
 		<ModalHeader>
 			<ModalThumb url='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' />

apps/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx

@@ -6,7 +6,9 @@ import MessageSurface from './MessageSurface';
 import ModalSurface from './ModalSurface';
 import { SurfaceOptions } from './constant';
 
-const SurfaceRender = ({ type = SurfaceOptions.Message, children }: { type?: SurfaceOptions; children: ReactNode }) => (
+export type SurfaceRenderProps = { type?: SurfaceOptions; children: ReactNode };
+
+const SurfaceRender = ({ type = SurfaceOptions.Message, children }: SurfaceRenderProps) => (
 	<>
 		{SurfaceOptions.Message === type && <MessageSurface>{children}</MessageSurface>}
 		{SurfaceOptions.Banner === type && <BannerSurface>{children}</BannerSurface>}

apps/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/DeleteElementBtn.tsx

@@ -4,7 +4,9 @@ import { useContext } from 'react';
 
 import { context, updatePayloadAction } from '../../../../Context';
 
-const Display = ({ elementIndex }: { elementIndex: number }) => {
+export type DisplayProps = { elementIndex: number };
+
+const Display = ({ elementIndex }: DisplayProps) => {
 	const { state, dispatch } = useContext(context);
 
 	const deleteElement = () => {

apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx

@@ -11,7 +11,7 @@ type PreviewSizeType = {
 	inlineSize: number;
 };
 
-type SplitPlaneContainerProps = {
+export type SplitPlaneContainerProps = {
 	previewSize: Partial<PreviewSizeType>;
 };
 

apps/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx

@@ -3,7 +3,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode, ComponentProps } from 'react';
 import { useRef, useState, useEffect } from 'react';
 
-type ThumbnailProps = ComponentProps<typeof Box> & {
+export type ThumbnailProps = ComponentProps<typeof Box> & {
 	of: ReactNode;
 };
 

apps/uikit-playground/src/Components/Templates/Container/Container.tsx

@@ -3,7 +3,9 @@ import { Box } from '@rocket.chat/fuselage';
 import Section from './Section';
 import type { templateType } from '../../../utils/templates';
 
-const Container = ({ templates }: { templates: templateType[] }) => (
+export type ContainerProps = { templates: templateType[] };
+
+const Container = ({ templates }: ContainerProps) => (
 	<Box maxWidth='800px' margin='80px' width='90%' height='max-content'>
 		{templates?.map((template, i) => <Section key={i} template={template} index={i} />)}
 	</Box>

apps/uikit-playground/src/Components/Templates/Container/Payload.tsx

@@ -10,7 +10,9 @@ import SurfaceRender from '../../Preview/Display/Surface/SurfaceRender';
 import type { SurfaceOptions } from '../../Preview/Display/Surface/constant';
 import RenderPayload from '../../RenderPayload/RenderPayload';
 
-const Payload = ({ blocks, surface }: { surface: SurfaceOptions; blocks: LayoutBlock[] }) => {
+export type PayloadProps = { surface: SurfaceOptions; blocks: LayoutBlock[] };
+
+const Payload = ({ blocks, surface }: PayloadProps) => {
 	const { dispatch } = useContext(context);
 	const blocksWithUniqueIds: ILayoutBlock[] = useMemo(
 		() =>

apps/uikit-playground/src/Components/Templates/Container/Section.tsx

@@ -3,7 +3,9 @@ import { Box, Label } from '@rocket.chat/fuselage';
 import Payload from './Payload';
 import type { templateType } from '../../../utils/templates';
 
-const Section = ({ template, index }: { template: templateType; index: number }) => (
+export type SectionProps = { template: templateType; index: number };
+
+const Section = ({ template, index }: SectionProps) => (
 	<Box mbs='25px' width='100%' key={index}>
 		<Box mbe='5px'>
 			<Label fontSize={24} fontWeight={800}>

apps/uikit-playground/src/Components/navMenu/Menu/MenuItem.tsx

@@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js';
 import { Box, Label } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 
-type MenuItemProps = {
+export type MenuItemProps = {
 	name: string;
 } & ComponentProps<typeof Box>;
 

apps/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx

@@ -1,7 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const Wrapper = ({ children }: { children: ReactNode }) => (
+export type WrapperProps = { children: ReactNode };
+
+const Wrapper = ({ children }: WrapperProps) => (
 	<Box
 		pbs='80px'
 		pis='50px'

apps/uikit-playground/src/Components/navMenu/Menu/index.tsx

@@ -8,7 +8,9 @@ import Wrapper from './Wrapper';
 import { context, templatesToggleAction, updatePayloadAction } from '../../../Context';
 import SurfaceSelect from '../../SurfaceSelect';
 
-const Menu = ({ isOpen }: { isOpen: boolean }) => {
+export type MenuProps = { isOpen: boolean };
+
+const Menu = ({ isOpen }: MenuProps) => {
 	const {
 		state: { screens, activeScreen },
 		dispatch,

apps/uikit-playground/src/Pages/SignInSignUp.tsx

@@ -22,7 +22,9 @@ const labels = {
 	},
 };
 
-const SignInSignUp = ({ route }: { route: string }) => {
+export type SignInSignUpProps = { route: string };
+
+const SignInSignUp = ({ route }: SignInSignUpProps) => {
 	const navigate = useNavigate();
 	const clickHandler = () => {
 		navigate(route === routes.login ? routes.signup : routes.login);

apps/uikit-playground/src/hooks/useAuth.tsx

@@ -11,7 +11,9 @@ const AuthContext = createContext<{
 	logout?: () => void;
 }>({});
 
-export const AuthProvider = ({ children }: { children: ReactNode }) => {
+export type AuthProviderProps = { children: ReactNode };
+
+export const AuthProvider = ({ children }: AuthProviderProps) => {
 	const [user, setUser] = useLocalStorage<userType>('user', null);
 	const navigate = useNavigate();
 

ee/packages/pdf-worker/src/templates/ChatTranscript/components/Divider.tsx

@@ -19,7 +19,9 @@ const styles = StyleSheet.create({
 	},
 });
 
-export const Divider = ({ divider }: { divider: string }) => (
+export type DividerProps = { divider: string };
+
+export const Divider = ({ divider }: DividerProps) => (
 	<View style={styles.wrapper} wrap={false}>
 		<View style={styles.line} />
 		<Text style={styles.text}>{divider}</Text>

ee/packages/pdf-worker/src/templates/ChatTranscript/components/Files.tsx

@@ -38,7 +38,9 @@ const styles = StyleSheet.create({
 	},
 });
 
-export const Files = ({ files, invalidMessage }: { files: PDFFile[]; invalidMessage: string }) => (
+export type FilesProps = { files: PDFFile[]; invalidMessage: string };
+
+export const Files = ({ files, invalidMessage }: FilesProps) => (
 	<View style={styles.container}>
 		{files?.map((file, index) => (
 			<View style={styles.file} key={index} wrap>

ee/packages/pdf-worker/src/templates/ChatTranscript/components/Header.tsx

@@ -49,7 +49,9 @@ const styles = StyleSheet.create({
 	},
 });
 
-export const Header = ({ title, subtitle, values }: { title: string; subtitle: string; values: { key: string; value: string }[] }) => (
+export type HeaderProps = { title: string; subtitle: string; values: { key: string; value: string }[] };
+
+export const Header = ({ title, subtitle, values }: HeaderProps) => (
 	<View style={styles.header} fixed>
 		<View style={styles.headerText}>
 			<Text style={styles.title}>{title}</Text>

ee/packages/pdf-worker/src/templates/ChatTranscript/components/Message.tsx

@@ -6,7 +6,7 @@ import { Markup } from '../markup';
 import { Divider } from './Divider';
 import { Files } from './Files';
 import { MessageHeader } from './MessageHeader';
-import { Quotes } from './Quotes';
+import Quotes from './Quotes';
 import { isSystemMessage, markupEntriesGreaterThan10, messageLongerThanPage, splitByTens } from './utils';
 
 const styles = StyleSheet.create({
@@ -51,7 +51,9 @@ const processMessage = (message: PDFMessage) => {
 	);
 };
 
-const Message = ({ message, invalidFileMessage }: { message: PDFMessage; invalidFileMessage: string }) => (
+export type MessageProps = { message: PDFMessage; invalidFileMessage: string };
+
+const Message = ({ message, invalidFileMessage }: MessageProps) => (
 	<View style={styles.wrapper} wrap={!!message.quotes || messageLongerThanPage(message.msg) || (message.files && message.files.length > 0)}>
 		{message.divider && <Divider divider={message.divider} />}
 		<MessageHeader name={message.u.name || message.u.username} time={message.ts} />