chore(fuselage): Messages's components incorrect types (#1336)

packages/fuselage/src/components/Message/MessageBody.tsx

@@ -1,9 +1,9 @@
-import type { AllHTMLAttributes, ReactElement } from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
 import React from 'react';
 
 import { prependClassName } from '../../helpers/prependClassName';
 
-type MessageBodyProps = AllHTMLAttributes<HTMLDivElement> & {
+type MessageBodyProps = HTMLAttributes<HTMLDivElement> & {
   clamp?: 2 | 3 | 4;
 };
 

packages/fuselage/src/components/Message/MessageContainer.tsx

@@ -1,10 +1,6 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type MessageContainerProps = {
-  children?: ReactNode;
-};
-
-export const MessageContainer = (props: MessageContainerProps) => (
+export const MessageContainer = (props: HTMLAttributes<HTMLDivElement>) => (
   <div className='rcx-box rcx-box--full rcx-message-container' {...props} />
 );

packages/fuselage/src/components/Message/MessageContainerFixed.tsx

@@ -1,11 +1,9 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type MessageContainerFixedProps = {
-  children?: ReactNode;
-};
-
-export const MessageContainerFixed = (props: MessageContainerFixedProps) => (
+export const MessageContainerFixed = (
+  props: HTMLAttributes<HTMLDivElement>
+) => (
   <div
     className='rcx-box rcx-box--full rcx-message-container rcx-message-container--fixed'
     {...props}

packages/fuselage/src/components/Message/MessageEmoji.tsx

@@ -1,22 +1,18 @@
-import type { ReactNode } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
 
 import { MessageEmojiBase } from './MessageEmojiBase';
 
-type MessageEmojiProps = {
-  name: string;
-  className?: string;
-  image?: string;
+type MessageEmojiProps = ComponentProps<typeof MessageEmojiBase> & {
   big?: boolean;
-  children?: ReactNode;
 };
 
 export const MessageEmoji = ({
   name,
   className,
   image,
   big,
-  children,
+  ...props
 }: MessageEmojiProps) => (
   <MessageEmojiBase
     className={[
@@ -28,6 +24,6 @@ export const MessageEmoji = ({
       .join(' ')}
     name={name}
     image={image}
-    children={children}
+    {...props}
   />
 );

packages/fuselage/src/components/Message/MessageEmojiBase.tsx

@@ -1,22 +1,20 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
 type MessageEmojiBaseProps = {
   name: string;
-  className?: string;
-  children?: ReactNode;
   image?: string;
-};
+} & HTMLAttributes<HTMLSpanElement>;
 
 export const MessageEmojiBase = ({
   name,
-  className,
   image,
-  children,
+  className,
+  ...props
 }: MessageEmojiBaseProps) => (
   <span
     className={`${className || ''} ${name}`}
     style={image && image.length ? { backgroundImage: image } : undefined}
-    children={children}
+    {...props}
   />
 );

packages/fuselage/src/components/Message/MessageHeader.tsx

@@ -1,12 +1,11 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type MessageHeaderProps = {
-  children?: ReactNode;
-};
-
-export const MessageHeader = ({ children }: MessageHeaderProps) => (
-  <div className='rcx-box rcx-box--full rcx-message-header'>
+export const MessageHeader = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className='rcx-box rcx-box--full rcx-message-header' {...props}>
     <div className='rcx-box rcx-box--full rcx-message-header__wrapper'>
       {children}
     </div>

packages/fuselage/src/components/Message/MessageLeftContainer.tsx

@@ -1,12 +1,8 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
 import React from 'react';
 
-type MessageLeftContainerProps = {
-  children?: ReactNode;
-};
-
 export const MessageLeftContainer = (
-  props: MessageLeftContainerProps
+  props: HTMLAttributes<HTMLDivElement>
 ): ReactElement => (
   <div
     className='rcx-box rcx-box--full rcx-message-container rcx-message-container--left'

packages/fuselage/src/components/Message/MessageName.tsx

@@ -1,8 +1,6 @@
-import type { AllHTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type MessageNameProps = AllHTMLAttributes<HTMLSpanElement>;
-
-export const MessageName = (props: MessageNameProps) => (
+export const MessageName = (props: HTMLAttributes<HTMLSpanElement>) => (
   <span className='rcx-box rcx-box--full rcx-message-header__name' {...props} />
 );

packages/fuselage/src/components/Message/MessageNameContainer.tsx

@@ -1,11 +1,9 @@
-import type { AllHTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import React, { forwardRef } from 'react';
 
-type MessageNameContainerProps = AllHTMLAttributes<HTMLSpanElement>;
-
 export const MessageNameContainer = forwardRef<
   HTMLSpanElement,
-  MessageNameContainerProps
+  HTMLAttributes<HTMLSpanElement>
 >(function MessageNameContainer(props, ref) {
   return (
     <span

packages/fuselage/src/components/Message/MessageReactions/MessageReactionEmoji.tsx

@@ -1,25 +1,14 @@
-import type { ReactNode } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
 
 import { MessageEmojiBase } from '../MessageEmojiBase';
 
-type MessageReactionEmojiProps = {
-  name: string;
-  className?: string;
-  children?: ReactNode;
-  image?: string;
-};
-
 export const MessageReactionEmoji = ({
-  name,
   className,
-  image,
-  children,
-}: MessageReactionEmojiProps) => (
+  ...props
+}: ComponentProps<typeof MessageEmojiBase>) => (
   <MessageEmojiBase
     className={`rcx-message-reactions__emoji ${className || ''}`}
-    name={name}
-    image={image}
-    children={children}
+    {...props}
   />
 );

packages/fuselage/src/components/Message/MessageRole.tsx

@@ -1,12 +1,8 @@
-import type { ReactNode } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
 
 import { Tag } from '../Tag';
 
-type MessageRoleProps = {
-  children?: ReactNode;
-};
-
-export const MessageRole = (props: MessageRoleProps) => (
+export const MessageRole = (props: ComponentProps<typeof Tag>) => (
   <Tag className='rcx-box rcx-box--full rcx-message-header__role' {...props} />
 );

packages/fuselage/src/components/Message/MessageRoles.tsx

@@ -1,10 +1,6 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type MessageRolesProps = {
-  children?: ReactNode;
-};
-
-export const MessageRoles = (props: MessageRolesProps) => (
+export const MessageRoles = (props: HTMLAttributes<HTMLDivElement>) => (
   <div className='rcx-box rcx-box--full rcx-message-header__roles' {...props} />
 );

packages/fuselage/src/components/Message/MessageTimestamp.tsx

@@ -1,8 +1,6 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type MessageTimestampProps = { children: ReactNode; title?: string };
-
-export const MessageTimestamp = (props: MessageTimestampProps) => (
+export const MessageTimestamp = (props: HTMLAttributes<HTMLSpanElement>) => (
   <span className='rcx-box rcx-box--full rcx-message-header__time' {...props} />
 );

packages/fuselage/src/components/Message/MessageUsername.tsx

@@ -1,9 +1,7 @@
-import type { AllHTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type MessageUsernameProps = AllHTMLAttributes<HTMLSpanElement>;
-
-export const MessageUsername = (props: MessageUsernameProps) => (
+export const MessageUsername = (props: HTMLAttributes<HTMLSpanElement>) => (
   <span
     className='rcx-box rcx-box--full rcx-message-header__username'
     {...props}

packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageEmoji.tsx

@@ -1,25 +1,14 @@
-import type { ReactNode } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
 
 import { MessageEmojiBase } from '../MessageEmojiBase';
 
-type ThreadMessageEmojiProps = {
-  name: string;
-  className?: string;
-  image?: string;
-  children?: ReactNode;
-};
-
 export const ThreadMessageEmoji = ({
-  name,
   className,
-  image,
-  children,
-}: ThreadMessageEmojiProps) => (
+  ...props
+}: ComponentProps<typeof MessageEmojiBase>) => (
   <MessageEmojiBase
     className={`rcx-message-thread__emoji ${className || ''}`}
-    name={name}
-    image={image}
-    children={children}
+    {...props}
   />
 );