refactor: Explicit component props (21/23)

packages/livechat/src/components/uiKit/message/StaticSelectElement/index.tsx

@@ -8,7 +8,7 @@ import { createClassName } from '../../../../helpers/createClassName';
 import { SelectInput } from '../../../Form/SelectInput';
 import { usePerformAction } from '../Block';
 
-type StaticSelectElementProps = uikit.StaticSelectElement & {
+export type StaticSelectElementProps = uikit.StaticSelectElement & {
 	parser: uikit.SurfaceRenderer<ComponentChild>;
 };
 

packages/livechat/src/providers/SDKProvider.tsx

@@ -18,7 +18,9 @@ export const useSDK = () => {
 	return context.sdk;
 };
 
-const SDKProvider = ({ children }: { serverURL: string; children: ComponentChildren }) => {
+export type SDKProviderProps = { serverURL: string; children: ComponentChildren };
+
+const SDKProvider = ({ children }: SDKProviderProps) => {
 	const sdk = useMemo(() => Livechat, []);
 
 	return <SDKContext.Provider value={{ sdk }}>{children}</SDKContext.Provider>;

packages/livechat/src/providers/ServerProvider.tsx

@@ -20,7 +20,9 @@ import { host } from '../components/App';
 import { useStore } from '../store';
 import { useSDK } from './SDKProvider';
 
-const ServerProvider = ({ children }: { children: ComponentChildren }) => {
+export type ServerProviderProps = { children: ComponentChildren };
+
+const ServerProvider = ({ children }: ServerProviderProps) => {
 	const sdk = useSDK();
 
 	const { token } = useStore();

packages/livechat/src/routes/Chat/connector.tsx

@@ -9,7 +9,7 @@ import { canRenderMessage } from '../../helpers/canRenderMessage';
 import { formatAgent } from '../../helpers/formatAgent';
 import { StoreContext } from '../../store';
 
-type ChatConnectorProps = {
+export type ChatConnectorProps = {
 	path: string;
 	default: boolean;
 	t: TFunction;

packages/livechat/src/routes/ChatFinished/component.tsx

@@ -7,7 +7,7 @@ import { Screen, ScreenContent, ScreenFooter } from '../../components/Screen';
 import { createClassName } from '../../helpers/createClassName';
 import Triggers from '../../lib/triggers';
 
-type ChatFinishedProps = {
+export type ChatFinishedProps = {
 	title: string;
 	greeting?: string;
 	message?: string;

packages/livechat/src/routes/ChatFinished/container.tsx

@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next';
 import ChatFinished from './component';
 import { StoreContext } from '../../store';
 
-type ChatFinishedContainerProps = {
+export type ChatFinishedContainerProps = {
 	ref?: any;
 	t: TFunction;
 	path: string;

packages/livechat/src/routes/GDPRAgreement/container.tsx

@@ -7,7 +7,7 @@ import { withTranslation } from 'react-i18next';
 import GDPRAgreement from './component';
 import { StoreContext } from '../../store';
 
-type GDPRContainerProps = {
+export type GDPRContainerProps = {
 	t: TFunction;
 	ref?: Ref<any>;
 };

packages/livechat/src/routes/LeaveMessage/index.tsx

@@ -21,7 +21,7 @@ import { parentCall } from '../../lib/parentCall';
 import { createToken } from '../../lib/random';
 import { StoreContext } from '../../store';
 
-type LeaveMessageProps = {
+export type LeaveMessageProps = {
 	path: string;
 };
 

packages/livechat/src/routes/Register/index.tsx

@@ -25,7 +25,7 @@ type FormPayloadCustomField = { [key: string]: string };
 
 export type RegisterFormValues = { name: string; email: string; department?: string; [key: string]: any };
 
-type RegisterProps = {
+export type RegisterProps = {
 	path: string;
 };
 

packages/livechat/src/routes/SwitchDepartment/index.tsx

@@ -18,7 +18,7 @@ import { StoreContext } from '../../store';
 
 type SwitchDepartmentFormData = { department: string };
 
-type SwitchDepartmentProps = {
+export type SwitchDepartmentProps = {
 	path: string;
 };
 

packages/livechat/src/routes/TriggerMessage/container.tsx

@@ -9,7 +9,7 @@ import { formatAgent } from '../../helpers/formatAgent';
 import { parentCall } from '../../lib/parentCall';
 import { StoreContext } from '../../store';
 
-type TriggerMessageContainerProps = {
+export type TriggerMessageContainerProps = {
 	path: string;
 	ref?: Ref<any>;
 };

packages/mock-providers/src/MockedDeviceContext.tsx

@@ -22,7 +22,7 @@ const mockDeviceContextValue: DeviceContextValue = {
 	setAudioInputDevice: () => undefined,
 };
 
-type MockedDeviceContextProps = Partial<DeviceContextValue> & {
+export type MockedDeviceContextProps = Partial<DeviceContextValue> & {
 	children: ReactNode;
 };
 

packages/mock-providers/src/MockedModalContext.tsx

@@ -2,7 +2,9 @@ import { ModalContext } from '@rocket.chat/ui-contexts';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
 
-export const MockedModalContext = ({ children }: { children: ReactNode }) => {
+export type MockedModalContextProps = { children: ReactNode };
+
+export const MockedModalContext = ({ children }: MockedModalContextProps) => {
 	const [currentModal, setCurrentModal] = useState<ReactNode>(null);
 
 	return (

packages/mock-providers/src/MockedRouterContext.tsx

@@ -1,7 +1,9 @@
 import { RouterContext } from '@rocket.chat/ui-contexts';
 import type { ContextType, ReactNode } from 'react';
 
-export const MockedRouterContext = ({ children, router }: { children: ReactNode; router?: Partial<ContextType<typeof RouterContext>> }) => {
+export type MockedRouterContextProps = { children: ReactNode; router?: Partial<ContextType<typeof RouterContext>> };
+
+export const MockedRouterContext = ({ children, router }: MockedRouterContextProps) => {
 	return (
 		<RouterContext.Provider
 			value={{

packages/mock-providers/src/MockedSettingsContext.tsx

@@ -29,6 +29,8 @@ const createSettingContextValue = ({ settings }: { settings?: Record<string, ISe
 	};
 };
 
-export const MockedSettingsContext = ({ settings, children }: { children: ReactNode; settings?: Record<string, ISetting['value']> }) => {
+export type MockedSettingsContextProps = { children: ReactNode; settings?: Record<string, ISetting['value']> };
+
+export const MockedSettingsContext = ({ settings, children }: MockedSettingsContextProps) => {
 	return <SettingsContext.Provider value={createSettingContextValue({ settings })}>{children}</SettingsContext.Provider>;
 };

packages/mock-providers/src/MockedUserContext.tsx

@@ -32,6 +32,8 @@ const createUserContextValue = ({ userPreferences }: { userPreferences?: Record<
 	};
 };
 
-export const MockedUserContext = ({ userPreferences, children }: { children: ReactNode; userPreferences?: Record<string, unknown> }) => {
+export type MockedUserContextProps = { children: ReactNode; userPreferences?: Record<string, unknown> };
+
+export const MockedUserContext = ({ userPreferences, children }: MockedUserContextProps) => {
 	return <UserContext.Provider value={createUserContextValue({ userPreferences })}>{children}</UserContext.Provider>;
 };

packages/ui-avatar/src/components/AppAvatar.tsx

@@ -1,7 +1,7 @@
 import type { BaseAvatarProps } from './BaseAvatar';
 import BaseAvatar from './BaseAvatar';
 
-type AppAvatarProps = Pick<BaseAvatarProps, 'size'> & {
+export type AppAvatarProps = Pick<BaseAvatarProps, 'size'> & {
 	iconFileContent: string;
 	iconFileData: string;
 };

packages/ui-avatar/src/components/MessageAvatar.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
 
 import UserAvatar from './UserAvatar';
 
-type MessageAvatarProps = {
+export type MessageAvatarProps = {
 	emoji?: ReactNode;
 	avatarUrl?: string;
 	username: string;

packages/ui-avatar/src/components/RoomAvatar.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import type { BaseAvatarProps } from './BaseAvatar';
 import Avatar from './BaseAvatar';
 
-type RoomAvatarProps = Pick<BaseAvatarProps, 'size'> & {
+export type RoomAvatarProps = Pick<BaseAvatarProps, 'size'> & {
 	url?: string;
 	room: {
 		_id: string;

packages/ui-avatar/src/components/UserAvatar.tsx

@@ -14,7 +14,7 @@ type UserIdProp = {
 	userId: string;
 	username?: never;
 };
-type UserAvatarProps = Omit<BaseAvatarProps, 'url' | 'title'> & {
+export type UserAvatarProps = Omit<BaseAvatarProps, 'url' | 'title'> & {
 	etag?: string | null;
 	url?: string;
 	title?: string;

packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.tsx

@@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js';
 import { Box, Palette } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes, ReactNode, MouseEvent } from 'react';
 
-type AnnouncementBannerProps = {
+export type AnnouncementBannerProps = {
 	children: ReactNode;
 	onClick?: (e: MouseEvent) => void;
 } & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is'>;

packages/ui-client/src/components/Contextualbar/ContextualbarBack.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import ContextualbarAction from './ContextualbarAction';
 
-type ContextualbarBackProps = Partial<ComponentProps<typeof ContextualbarAction>>;
+export type ContextualbarBackProps = Partial<ComponentProps<typeof ContextualbarAction>>;
 
 const ContextualbarBack = (props: ContextualbarBackProps) => {
 	const { t } = useTranslation();

packages/ui-client/src/components/Contextualbar/ContextualbarClose.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import ContextualbarAction from './ContextualbarAction';
 
-type ContextualbarCloseProps = Partial<ComponentProps<typeof ContextualbarAction>>;
+export type ContextualbarCloseProps = Partial<ComponentProps<typeof ContextualbarAction>>;
 
 const ContextualbarClose = (props: ContextualbarCloseProps) => {
 	const { t } = useTranslation();

packages/ui-client/src/components/Contextualbar/ContextualbarDialog.tsx

@@ -8,7 +8,7 @@ import { useCallback, useRef } from 'react';
 import Contextualbar from './Contextualbar';
 import ContextualbarResizable from './ContextualbarResizable';
 
-type ContextualbarDialogProps = AriaDialogProps & ComponentProps<typeof Contextualbar> & { onClose?: () => void };
+export type ContextualbarDialogProps = AriaDialogProps & ComponentProps<typeof Contextualbar> & { onClose?: () => void };
 
 /**
  * @prop onClose can be used to close contextualbar outside the room context with ESC key

packages/ui-client/src/components/Contextualbar/ContextualbarResizable.tsx

@@ -4,7 +4,7 @@ import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import { Resizable } from 're-resizable';
 import type { ComponentProps } from 'react';
 
-type ContextualbarResizableProps = { defaultWidth: string } & ComponentProps<typeof Resizable>;
+export type ContextualbarResizableProps = { defaultWidth: string } & ComponentProps<typeof Resizable>;
 
 const ContextualbarResizable = ({ defaultWidth, children, ...props }: ContextualbarResizableProps) => {
 	const [contextualbarWidth, setContextualbarWidth] = useLocalStorage('contextualbarWidth', defaultWidth);

packages/ui-client/src/components/CustomScrollbars/CustomScrollbars.tsx

@@ -5,7 +5,7 @@ import { useEffect, useRef, forwardRef, memo } from 'react';
 import type { OverlayScrollbars } from '.';
 import BaseScrollbars, { getScrollbarsOptions } from './BaseScrollbars';
 
-type CustomScrollbarsProps = {
+export type CustomScrollbarsProps = {
 	children: ReactNode;
 	overflowX?: boolean;
 	onScroll?: (args: OverlayScrollbars) => void;

packages/ui-client/src/components/CustomScrollbars/CustomVirtuaScrollbars.tsx

@@ -4,7 +4,7 @@ import { useEffect, memo, forwardRef, useRef } from 'react';
 
 import BaseScrollbars from './BaseScrollbars';
 
-type CustomScrollbarsProps = {
+export type CustomScrollbarsProps = {
 	children: ReactNode;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'is' | 'onScroll'>;
 

packages/ui-client/src/components/CustomScrollbars/VirtualizedScrollbars.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState, useRef, cloneElement, forwardRef, memo } from 'rea
 
 import BaseScrollbars, { getScrollbarsOptions } from './BaseScrollbars';
 
-type VirtualizedScrollbarsProps = {
+export type VirtualizedScrollbarsProps = {
 	overflowX?: boolean;
 	children: ReactElement<any>;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'is'>;

packages/ui-client/src/components/EmojiPicker/EmojiPickerPreview.tsx

@@ -3,7 +3,9 @@ import { Box } from '@rocket.chat/fuselage';
 import DOMPurify from 'dompurify';
 import type { AllHTMLAttributes } from 'react';
 
-const EmojiPickerPreview = ({ emoji, name, ...props }: { emoji: string; name: string } & Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>) => {
+export type EmojiPickerPreviewProps = { emoji: string; name: string } & Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>;
+
+const EmojiPickerPreview = ({ emoji, name, ...props }: EmojiPickerPreviewProps) => {
 	const previewEmojiClass = css`
 		span {
 			width: 40px;

packages/ui-client/src/components/ExternalLink.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
 
-type ExternalLinkProps = {
+export type ExternalLinkProps = {
 	to: string;
 } & ComponentPropsWithoutRef<typeof Box>;
 

packages/ui-client/src/components/FilePreviewIcon.tsx

@@ -1,6 +1,8 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
 
-const FilePreviewIcon = ({ format }: { format: string }) => {
+export type FilePreviewIconProps = { format: string };
+
+const FilePreviewIcon = ({ format }: FilePreviewIconProps) => {
 	return (
 		<Box
 			width='x48'

packages/ui-client/src/components/GenericMenu/GenericMenu.tsx

@@ -28,7 +28,7 @@ type GenericMenuConditionalProps =
 			sections?: never;
 	  };
 
-type GenericMenuProps = GenericMenuCommonProps & GenericMenuConditionalProps & Omit<ComponentProps<typeof Menu>, 'children'>;
+export type GenericMenuProps = GenericMenuCommonProps & GenericMenuConditionalProps & Omit<ComponentProps<typeof Menu>, 'children'>;
 
 const GenericMenu = ({ title, icon = 'menu', disabled, onAction, callbackAction, button, className, ...props }: GenericMenuProps) => {
 	const { t, i18n } = useTranslation();

packages/ui-client/src/components/GenericTable/GenericTable.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 
 import { CustomScrollbars } from '../CustomScrollbars';
 
-type GenericTableProps = {
+export type GenericTableProps = {
 	fixed?: boolean;
 	children: ReactNode;
 } & ComponentProps<typeof Table>;

packages/ui-client/src/components/GenericTable/GenericTableBody.tsx

@@ -1,6 +1,6 @@
 import { TableBody } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
 
-type GenericTableBodyProps = ComponentPropsWithoutRef<typeof TableBody>;
+export type GenericTableBodyProps = ComponentPropsWithoutRef<typeof TableBody>;
 
 export const GenericTableBody = (props: GenericTableBodyProps) => <TableBody {...props} />;

packages/ui-client/src/components/GenericTable/GenericTableCell.tsx

@@ -1,6 +1,6 @@
 import { TableCell } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
 
-type GenericTableCellProps = ComponentPropsWithoutRef<typeof TableCell>;
+export type GenericTableCellProps = ComponentPropsWithoutRef<typeof TableCell>;
 
 export const GenericTableCell = (props: GenericTableCellProps) => <TableCell {...props} />;

packages/ui-client/src/components/GenericTable/GenericTableHeader.tsx

@@ -3,7 +3,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 import { GenericTableRow } from './GenericTableRow';
 
-type GenericTableHeaderProps = ComponentPropsWithoutRef<typeof TableHead>;
+export type GenericTableHeaderProps = ComponentPropsWithoutRef<typeof TableHead>;
 
 export const GenericTableHeader = ({ children, ...props }: GenericTableHeaderProps) => (
 	<TableHead {...props}>

packages/ui-client/src/components/GenericTable/GenericTableLoadingRow.tsx

@@ -1,6 +1,8 @@
 import { Box, Skeleton, TableRow, TableCell } from '@rocket.chat/fuselage';
 
-export const GenericTableLoadingRow = ({ cols }: { cols: number }) => (
+export type GenericTableLoadingRowProps = { cols: number };
+
+export const GenericTableLoadingRow = ({ cols }: GenericTableLoadingRowProps) => (
 	<TableRow>
 		<TableCell>
 			<Box display='flex'>

packages/ui-client/src/components/GenericTable/GenericTableLoadingTable.tsx

@@ -1,6 +1,8 @@
 import { GenericTableLoadingRow } from './GenericTableLoadingRow';
 
-export const GenericTableLoadingTable = ({ headerCells }: { headerCells: number }) => (
+export type GenericTableLoadingTableProps = { headerCells: number };
+
+export const GenericTableLoadingTable = ({ headerCells }: GenericTableLoadingTableProps) => (
 	<>
 		{Array.from({ length: 10 }, (_, i) => (
 			<GenericTableLoadingRow key={i} cols={headerCells} />

packages/ui-client/src/components/GenericTable/GenericTableRow.tsx

@@ -1,6 +1,6 @@
 import { TableRow } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
 
-type GenericTableRowProps = ComponentPropsWithoutRef<typeof TableRow>;
+export type GenericTableRowProps = ComponentPropsWithoutRef<typeof TableRow>;
 
 export const GenericTableRow = (props: GenericTableRowProps) => <TableRow {...props} />;

packages/ui-client/src/components/GenericTable/SortIcon.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 
-type SortIconProps = {
+export type SortIconProps = {
 	direction?: 'asc' | 'desc';
 };
 

packages/ui-client/src/components/Header/Header.tsx

@@ -3,7 +3,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 import HeaderDivider from './HeaderDivider';
 
-type HeaderProps = ComponentPropsWithoutRef<typeof Box>;
+export type HeaderProps = ComponentPropsWithoutRef<typeof Box>;
 
 const Header = (props: HeaderProps) => (
 	<Box

packages/ui-client/src/components/Header/HeaderAvatar.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
 
-type HeaderAvatarProps = ComponentPropsWithoutRef<typeof Box>;
+export type HeaderAvatarProps = ComponentPropsWithoutRef<typeof Box>;
 
 const HeaderAvatar = (props: HeaderAvatarProps) => <Box mi={4} display='flex' alignItems='center' {...props} />;
 

packages/ui-client/src/components/Header/HeaderContent.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
 
-type HeaderContentProps = ComponentPropsWithoutRef<typeof Box>;
+export type HeaderContentProps = ComponentPropsWithoutRef<typeof Box>;
 
 const HeaderContent = (props: HeaderContentProps) => (
 	<Box flexGrow={1} width={1} flexShrink={1} mi={4} display='flex' justifyContent='center' flexDirection='column' {...props} />