refactor: Explicit component props (18/23)

ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/BoldSpan.tsx

@@ -20,7 +20,7 @@ type MessageBlock =
 	| MessageParser.MarkupExcluding<MessageParser.Bold>
 	| MessageParser.InlineCode;
 
-type BoldSpanProps = {
+export type BoldSpanProps = {
 	children: MessageBlock[];
 };
 

ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/CodeSpan.tsx

@@ -22,7 +22,7 @@ export const codeStyles = StyleSheet.create({
 	},
 });
 
-type CodeSpanProps = {
+export type CodeSpanProps = {
 	code: string;
 };
 

ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/EmojiSpan.tsx

@@ -2,7 +2,7 @@ import { Text } from '@react-pdf/renderer';
 import type * as MessageParser from '@rocket.chat/message-parser';
 import emojione from 'emoji-toolkit';
 
-type EmojiSpanProps = MessageParser.Emoji;
+export type EmojiSpanProps = MessageParser.Emoji;
 
 const EmojiSpan = (emoji: EmojiSpanProps) => <Text>{emoji.value ? `:${emoji.value?.value}:` : emojione.toShort(emoji.unicode)}</Text>;
 

ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/InlineElements.tsx

@@ -8,7 +8,7 @@ import ItalicSpan from './ItalicSpan';
 import LinkSpan from './LinkSpan';
 import StrikeSpan from './StrikeSpan';
 
-type InlineElementsProps = {
+export type InlineElementsProps = {
 	children: MessageParser.Inlines[];
 };
 

ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/ItalicSpan.tsx

@@ -20,7 +20,7 @@ type MessageBlock =
 	| MessageParser.MarkupExcluding<MessageParser.Italic>
 	| MessageParser.InlineCode;
 
-type ItalicSpanProps = {
+export type ItalicSpanProps = {
 	children: MessageBlock[];
 };
 

ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/LinkSpan.tsx

@@ -6,7 +6,7 @@ import BoldSpan from './BoldSpan';
 import ItalicSpan from './ItalicSpan';
 import StrikeSpan from './StrikeSpan';
 
-type LinkSpanProps = {
+export type LinkSpanProps = {
 	label: MessageParser.Markup | MessageParser.Markup[];
 };
 

ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/StrikeSpan.tsx

@@ -21,7 +21,7 @@ type MessageBlock =
 	| MessageParser.MarkupExcluding<MessageParser.Strike>
 	| MessageParser.InlineCode;
 
-type StrikeSpanProps = {
+export type StrikeSpanProps = {
 	children: MessageBlock[];
 };
 

packages/fuselage-ui-kit/src/blocks/ActionsBlock.Action.tsx

@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
 import type { ReactElement } from 'react';
 
-type ActionProps = {
+export type ActionProps = {
 	element: UiKit.ActionsBlock['elements'][number];
 	parser: UiKit.SurfaceRenderer<ReactElement<any>>;
 	index: number;

packages/fuselage-ui-kit/src/blocks/ActionsBlock.tsx

@@ -6,7 +6,7 @@ import Action from './ActionsBlock.Action';
 import { useSurfaceType } from '../hooks/useSurfaceType';
 import type { BlockProps } from '../utils/BlockProps';
 
-type ActionsBlockProps = BlockProps<UiKit.ActionsBlock>;
+export type ActionsBlockProps = BlockProps<UiKit.ActionsBlock>;
 
 const ActionsBlock = ({ className, block, surfaceRenderer }: ActionsBlockProps) => {
 	const surfaceType = useSurfaceType();

packages/fuselage-ui-kit/src/blocks/CalloutBlock.tsx

@@ -3,7 +3,7 @@ import * as UiKit from '@rocket.chat/ui-kit';
 
 import type { BlockProps } from '../utils/BlockProps';
 
-type CalloutBlockProps = BlockProps<UiKit.CalloutBlock>;
+export type CalloutBlockProps = BlockProps<UiKit.CalloutBlock>;
 
 const CalloutBlock = ({ block, surfaceRenderer }: CalloutBlockProps) => (
 	<Callout

packages/fuselage-ui-kit/src/blocks/ContextBlock.Item.tsx

@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
 import type { ReactElement } from 'react';
 
-type ItemProps = {
+export type ItemProps = {
 	block: UiKit.ContextBlock['elements'][number];
 	surfaceRenderer: UiKit.SurfaceRenderer<ReactElement<any>>;
 	index: number;

packages/fuselage-ui-kit/src/blocks/ContextBlock.tsx

@@ -5,7 +5,7 @@ import { memo, useMemo } from 'react';
 import Item from './ContextBlock.Item';
 import type { BlockProps } from '../utils/BlockProps';
 
-type ContextBlockProps = BlockProps<UiKit.ContextBlock>;
+export type ContextBlockProps = BlockProps<UiKit.ContextBlock>;
 
 const ContextBlock = ({ className, block, surfaceRenderer }: ContextBlockProps) => {
 	const itemElements = useMemo(

packages/fuselage-ui-kit/src/blocks/DividerBlock.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import type { BlockProps } from '../utils/BlockProps';
 
-type DividerBlockProps = BlockProps<UiKit.DividerBlock>;
+export type DividerBlockProps = BlockProps<UiKit.DividerBlock>;
 
 const DividerBlock = ({ className }: DividerBlockProps) => <Divider className={className} marginBlock={24} />;
 

packages/fuselage-ui-kit/src/blocks/ImageBlock.tsx

@@ -29,7 +29,7 @@ const fetchImageState = (img: HTMLImageElement) => {
 	};
 };
 
-type ImageBlockProps = BlockProps<UiKit.ImageBlock>;
+export type ImageBlockProps = BlockProps<UiKit.ImageBlock>;
 
 const ImageBlock = ({ className, block, surfaceRenderer }: ImageBlockProps) => {
 	const surface = useSurfaceType();

packages/fuselage-ui-kit/src/blocks/InfoCard.tsx

@@ -4,7 +4,7 @@ import * as UiKit from '@rocket.chat/ui-kit';
 import IconElement from '../elements/IconElement';
 import type { BlockProps } from '../utils/BlockProps';
 
-type InfoCardProps = BlockProps<UiKit.InfoCardBlock>;
+export type InfoCardProps = BlockProps<UiKit.InfoCardBlock>;
 
 const InfoCard = ({ block, surfaceRenderer, context }: InfoCardProps) => {
 	const { rows, blockId } = block;

packages/fuselage-ui-kit/src/blocks/InputBlock.tsx

@@ -5,7 +5,7 @@ import { memo, useMemo } from 'react';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type InputBlockProps = BlockProps<UiKit.InputBlock>;
+export type InputBlockProps = BlockProps<UiKit.InputBlock>;
 
 const InputBlock = ({ className, block, surfaceRenderer, context }: InputBlockProps) => {
 	const inputElement = useMemo(

packages/fuselage-ui-kit/src/blocks/PreviewBlock.tsx

@@ -15,7 +15,7 @@ import { memo } from 'react';
 import ContextBlock from './ContextBlock';
 import type { BlockProps } from '../utils/BlockProps';
 
-type PreviewBlockProps = BlockProps<UiKit.PreviewBlock>;
+export type PreviewBlockProps = BlockProps<UiKit.PreviewBlock>;
 
 const PreviewBlock = ({ block, surfaceRenderer }: PreviewBlockProps) => (
 	<Box>

packages/fuselage-ui-kit/src/blocks/SectionBlock.Fields.tsx

@@ -10,7 +10,7 @@ const breakpoints = {
 	xl: 6,
 } as const;
 
-type FieldsProps = {
+export type FieldsProps = {
 	fields: readonly UiKit.TextObject[];
 	surfaceRenderer: UiKit.SurfaceRenderer<ReactElement<any>>;
 };

packages/fuselage-ui-kit/src/blocks/SectionBlock.tsx

@@ -5,7 +5,7 @@ import { memo, useMemo } from 'react';
 import Fields from './SectionBlock.Fields';
 import type { BlockProps } from '../utils/BlockProps';
 
-type SectionBlockProps = BlockProps<UiKit.SectionBlock>;
+export type SectionBlockProps = BlockProps<UiKit.SectionBlock>;
 
 const SectionBlock = ({ className, block, surfaceRenderer }: SectionBlockProps) => {
 	const { text, fields } = block;

packages/fuselage-ui-kit/src/blocks/TabNavigationBlock.tsx

@@ -5,7 +5,7 @@ import { memo, useState } from 'react';
 import { TabElement } from '../elements/TabElement';
 import type { BlockProps } from '../utils/BlockProps';
 
-type TabNavigationBlockProps = BlockProps<ExperimentalTabNavigationBlock>;
+export type TabNavigationBlockProps = BlockProps<ExperimentalTabNavigationBlock>;
 
 const TabNavigationBlock = (blockProps: TabNavigationBlockProps) => {
 	const {

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

@@ -23,7 +23,7 @@ import { useVideoConfDataStream } from './hooks/useVideoConfDataStream';
 import { useSurfaceType } from '../../hooks/useSurfaceType';
 import type { BlockProps } from '../../utils/BlockProps';
 
-type VideoConferenceBlockProps = BlockProps<UiKit.VideoConferenceBlock>;
+export type VideoConferenceBlockProps = BlockProps<UiKit.VideoConferenceBlock>;
 
 const MAX_USERS = 3;
 

packages/fuselage-ui-kit/src/contexts/AppIdContext.tsx

@@ -5,7 +5,7 @@ import { UiKitContext } from './UiKitContext';
 
 const AppIdContext = createContext<string | undefined>(undefined);
 
-type AppIdProviderProps = {
+export type AppIdProviderProps = {
 	children: ReactNode;
 	appId?: string;
 };

packages/fuselage-ui-kit/src/elements/ButtonElement.tsx

@@ -5,7 +5,7 @@ import type { MouseEventHandler } from 'react';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type ButtonElementProps = BlockProps<UiKit.ButtonElement>;
+export type ButtonElementProps = BlockProps<UiKit.ButtonElement>;
 
 const ButtonElement = ({ block, context, surfaceRenderer }: ButtonElementProps) => {
 	const [{ loading }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/ChannelsSelectElement.tsx

@@ -8,7 +8,7 @@ import { useChannelsData } from './hooks/useChannelsData';
 import { useUiKitState } from '../../hooks/useUiKitState';
 import type { BlockProps } from '../../utils/BlockProps';
 
-type ChannelsSelectElementProps = BlockProps<UiKit.ChannelsSelectElement>;
+export type ChannelsSelectElementProps = BlockProps<UiKit.ChannelsSelectElement>;
 
 const ChannelsSelectElement = ({ block, context }: ChannelsSelectElementProps) => {
 	const [{ value, loading }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/CheckboxElement.tsx

@@ -4,7 +4,7 @@ import * as UiKit from '@rocket.chat/ui-kit';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type CheckboxElementProps = BlockProps<UiKit.CheckboxElement>;
+export type CheckboxElementProps = BlockProps<UiKit.CheckboxElement>;
 
 const CheckboxElement = ({ block, context, surfaceRenderer }: CheckboxElementProps) => {
 	const [{ loading, value }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/DatePickerElement.tsx

@@ -5,7 +5,7 @@ import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type DatePickerElementProps = BlockProps<UiKit.DatePickerElement>;
+export type DatePickerElementProps = BlockProps<UiKit.DatePickerElement>;
 
 const DatePickerElement = ({ block, context }: DatePickerElementProps) => {
 	const [{ loading, value, error }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/IconButtonElement.tsx

@@ -5,7 +5,7 @@ import type { MouseEventHandler } from 'react';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type IconButtonElementProps = BlockProps<UiKit.IconButtonElement>;
+export type IconButtonElementProps = BlockProps<UiKit.IconButtonElement>;
 
 const IconButtonElement = ({ block, context }: IconButtonElementProps) => {
 	const [{ loading }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/IconElement.tsx

@@ -4,7 +4,7 @@ import type { ComponentProps } from 'react';
 
 import type { BlockProps } from '../utils/BlockProps';
 
-type IconElementProps = BlockProps<UiKit.FrameableIconElement>;
+export type IconElementProps = BlockProps<UiKit.FrameableIconElement>;
 
 const getVariantColor = (variant: UiKit.FrameableIconElement['variant']): string => {
 	switch (variant) {

packages/fuselage-ui-kit/src/elements/ImageElement.tsx

@@ -3,7 +3,7 @@ import * as UiKit from '@rocket.chat/ui-kit';
 import { Element } from './ImageElement.styles';
 import type { BlockProps } from '../utils/BlockProps';
 
-type ImageElementProps = BlockProps<UiKit.ImageElement>;
+export type ImageElementProps = BlockProps<UiKit.ImageElement>;
 
 const ImageElement = ({ block, context }: ImageElementProps) => {
 	const size = (context === UiKit.BlockContext.SECTION && 88) || (context === UiKit.BlockContext.CONTEXT && 20) || undefined;

packages/fuselage-ui-kit/src/elements/LinearScaleElement.tsx

@@ -5,7 +5,7 @@ import { memo, useMemo } from 'react';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type LinearScaleElementProps = BlockProps<UiKit.LinearScaleElement>;
+export type LinearScaleElementProps = BlockProps<UiKit.LinearScaleElement>;
 
 const LinearScaleElement = ({ className, block, context, surfaceRenderer }: LinearScaleElementProps) => {
 	const { minValue = 0, maxValue = 10, initialValue, preLabel, postLabel } = block;

packages/fuselage-ui-kit/src/elements/MarkdownTextElement.tsx

@@ -6,7 +6,9 @@ import { Suspense } from 'react';
 
 import { useAppTranslation } from '../hooks/useAppTranslation';
 
-const MarkdownTextElement = ({ textObject }: { textObject: TextObject }) => {
+export type MarkdownTextElementProps = { textObject: TextObject };
+
+const MarkdownTextElement = ({ textObject }: MarkdownTextElementProps) => {
 	const { t } = useAppTranslation();
 
 	const text = textObject.i18n ? t(textObject.i18n.key, { ...textObject.i18n.args }) : textObject.text;

packages/fuselage-ui-kit/src/elements/MultiStaticSelectElement.tsx

@@ -7,7 +7,7 @@ import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type MultiStaticSelectElementProps = BlockProps<UiKit.MultiStaticSelectElement>;
+export type MultiStaticSelectElementProps = BlockProps<UiKit.MultiStaticSelectElement>;
 
 const MultiStaticSelectElement = ({ block, context }: MultiStaticSelectElementProps) => {
 	const [{ loading, value, error }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/OverflowElement.tsx

@@ -7,7 +7,7 @@ import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type OverflowElementProps = BlockProps<UiKit.OverflowElement>;
+export type OverflowElementProps = BlockProps<UiKit.OverflowElement>;
 
 const OverflowElement = ({ block, context }: OverflowElementProps) => {
 	const [{ loading }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/PlainTextElement.tsx

@@ -2,7 +2,9 @@ import type { TextObject } from '@rocket.chat/ui-kit';
 
 import { useAppTranslation } from '../hooks/useAppTranslation';
 
-const PlainTextElement = ({ textObject }: { textObject: TextObject }) => {
+export type PlainTextElementProps = { textObject: TextObject };
+
+const PlainTextElement = ({ textObject }: PlainTextElementProps) => {
 	const { t } = useAppTranslation();
 
 	const text = textObject.i18n ? t(textObject.i18n.key, { ...textObject.i18n.args }) : textObject.text;

packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx

@@ -6,7 +6,7 @@ import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type PlainTextInputElementProps = BlockProps<UiKit.PlainTextInputElement>;
+export type PlainTextInputElementProps = BlockProps<UiKit.PlainTextInputElement>;
 
 const PlainTextInputElement = ({ block, context }: PlainTextInputElementProps) => {
 	const [{ loading, value, error }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/RadioButtonElement.tsx

@@ -4,7 +4,7 @@ import * as UiKit from '@rocket.chat/ui-kit';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type RadioButtonElementProps = BlockProps<UiKit.RadioButtonElement>;
+export type RadioButtonElementProps = BlockProps<UiKit.RadioButtonElement>;
 
 const RadioButtonElement = ({ block, context, surfaceRenderer }: RadioButtonElementProps) => {
 	const [{ loading, value }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/StaticSelectElement.tsx

@@ -6,7 +6,7 @@ import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type StaticSelectElementProps = BlockProps<UiKit.StaticSelectElement>;
+export type StaticSelectElementProps = BlockProps<UiKit.StaticSelectElement>;
 
 const StaticSelectElement = ({ block, context }: StaticSelectElementProps) => {
 	const [{ loading, value, error }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/TimePickerElement.tsx

@@ -5,7 +5,7 @@ import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type TimePickerElementProps = BlockProps<UiKit.TimePickerElement>;
+export type TimePickerElementProps = BlockProps<UiKit.TimePickerElement>;
 
 const TimePickerElement = ({ block, context }: TimePickerElementProps) => {
 	const [{ loading, value, error }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/ToggleSwitchElement.tsx

@@ -4,7 +4,7 @@ import * as UiKit from '@rocket.chat/ui-kit';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
-type ToggleSwitchElementProps = BlockProps<UiKit.ToggleSwitchElement>;
+export type ToggleSwitchElementProps = BlockProps<UiKit.ToggleSwitchElement>;
 
 const ToggleSwitchElement = ({ block, context, surfaceRenderer }: ToggleSwitchElementProps) => {
 	const [{ value, loading }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx

@@ -8,7 +8,7 @@ import { useUsersData } from './hooks/useUsersData';
 import { useUiKitState } from '../../hooks/useUiKitState';
 import type { BlockProps } from '../../utils/BlockProps';
 
-type MultiUsersSelectElementProps = BlockProps<UiKit.MultiUsersSelectElement>;
+export type MultiUsersSelectElementProps = BlockProps<UiKit.MultiUsersSelectElement>;
 
 const MultiUsersSelectElement = ({ block, context }: MultiUsersSelectElementProps) => {
 	const [{ loading, value }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx

@@ -8,7 +8,7 @@ import { useUsersData } from './hooks/useUsersData';
 import { useUiKitState } from '../../hooks/useUiKitState';
 import type { BlockProps } from '../../utils/BlockProps';
 
-type UsersSelectElementProps = BlockProps<UiKit.UsersSelectElement>;
+export type UsersSelectElementProps = BlockProps<UiKit.UsersSelectElement>;
 
 export type UserAutoCompleteOptionType = {
 	value: string;

packages/fuselage-ui-kit/src/surfaces/BannerSurface.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 
 import { Surface } from './Surface';
 
-type BannerSurfaceProps = {
+export type BannerSurfaceProps = {
 	children?: ReactNode;
 };
 

packages/fuselage-ui-kit/src/surfaces/ContextualBarSurface.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 
 import { Surface } from './Surface';
 
-type ContextualBarSurfaceProps = {
+export type ContextualBarSurfaceProps = {
 	children?: ReactNode;
 };
 

packages/fuselage-ui-kit/src/surfaces/MessageSurface.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 
 import { Surface } from './Surface';
 
-type MessageSurfaceProps = {
+export type MessageSurfaceProps = {
 	children?: ReactNode;
 };