feat(fuselage): Message preview component (#553)

packages/fuselage-ui-kit/src/stories/Message.stories.tsx

@@ -1,5 +1,17 @@
 /* eslint-disable new-cap */
-import { Message, Avatar } from '@rocket.chat/fuselage';
+import {
+  Message,
+  Avatar,
+  MessageLeftContainer,
+  MessageHeader,
+  MessageContainer,
+  MessageName,
+  MessageUsername,
+  MessageRole,
+  MessageTimestamp,
+  MessageToolbox,
+  MessageBody,
+} from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
@@ -23,7 +35,7 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
     errors: Record<string, string>;
   }) => (
     <Message clickable>
-      <Message.LeftContainer>
+      <MessageLeftContainer>
         <Avatar
           url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
               4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
@@ -38,17 +50,17 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
               UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
           size={'x36'}
         />
-      </Message.LeftContainer>
-      <Message.Container>
-        <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
-          <Message.Role>Admin</Message.Role>
-          <Message.Role>User</Message.Role>
-          <Message.Role>Owner</Message.Role>
-          <Message.Timestamp>12:00 PM</Message.Timestamp>
-        </Message.Header>
-        <Message.Body>
+      </MessageLeftContainer>
+      <MessageContainer>
+        <MessageHeader>
+          <MessageName>Haylie George</MessageName>
+          <MessageUsername>@haylie.george</MessageUsername>
+          <MessageRole>Admin</MessageRole>
+          <MessageRole>User</MessageRole>
+          <MessageRole>Owner</MessageRole>
+          <MessageTimestamp>12:00 PM</MessageTimestamp>
+        </MessageHeader>
+        <MessageBody>
           <kitContext.Provider
             value={{
               action: action('action'),
@@ -60,15 +72,15 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
           >
             {UiKitMessage(blocks)}
           </kitContext.Provider>
-        </Message.Body>
-      </Message.Container>
-      <Message.Toolbox.Wrapper>
-        <Message.Toolbox>
-          <Message.Toolbox.Item icon='quote' />
-          <Message.Toolbox.Item icon='clock' />
-          <Message.Toolbox.Item icon='thread' />
-        </Message.Toolbox>
-      </Message.Toolbox.Wrapper>
+        </MessageBody>
+      </MessageContainer>
+      <MessageToolbox.Wrapper>
+        <MessageToolbox>
+          <MessageToolbox.Item icon='quote' />
+          <MessageToolbox.Item icon='clock' />
+          <MessageToolbox.Item icon='thread' />
+        </MessageToolbox>
+      </MessageToolbox.Wrapper>
     </Message>
   );
   story.args = {

packages/fuselage-ui-kit/src/version.ts

@@ -1 +1 @@
-export default '0.29.0';
+export default '0.30.0';

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

@@ -10,17 +10,17 @@ import './Messages.styles.scss';
 
 import { prependClassName } from '../../helpers/prependClassName';
 import { Tag } from '../Tag';
-import { Divider } from './Divider';
-import { Metrics } from './Metrics';
-import { Toolbox } from './Toolbox';
+import { MessageDivider } from './MessageDivider';
+import { MessageMetrics } from './MessageMetrics';
+import { MessageToolbox } from './MessageToolbox';
 
-const Container: FC = function Container(props) {
+export const MessageContainer: FC = function MessageContainer(props) {
   return (
     <div className='rcx-box rcx-box--full rcx-message-container' {...props} />
   );
 };
 
-const ContainerFixed: FC = function Container(props) {
+export const MessageContainerFixed: FC = function MessageContainerFixed(props) {
   return (
     <div
       className='rcx-box rcx-box--full rcx-message-container rcx-message-container--fixed'
@@ -42,7 +42,7 @@ export const MessageLeftContainer = (
   />
 );
 
-const Header: FC = function Header({ children }) {
+export const MessageHeader: FC = function MessageHeader({ children }) {
   return (
     <div className='rcx-box rcx-box--full rcx-message-header'>
       <div className='rcx-box rcx-box--full rcx-message-header__wrapper'>
@@ -56,7 +56,7 @@ type MessageBodyProps = AllHTMLAttributes<HTMLDivElement> & {
   clamp?: 2 | 3 | 4;
 };
 
-const MessageBody = ({
+export const MessageBody = ({
   clamp,
   className,
   ...props
@@ -99,61 +99,69 @@ type MessageProps = AllHTMLAttributes<HTMLDivElement> & {
   sequential?: boolean;
 };
 
-const Message = forwardRef<HTMLDivElement, MessageProps>(function Message(
-  {
-    // is: Tag = 'div',
-    className,
-    clickable,
-    sequential,
-    ...props
-  },
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      className={prependClassName(
-        className,
-        [
-          'rcx-message',
-          (clickable || props.onClick) && 'rcx-message--clickable',
-          sequential && 'rcx-message--sequential',
-        ]
-          .filter(Boolean)
-          .join(' ')
-      )}
-      {...props}
-    />
-  );
-});
-
-const Timestamp: FC<{ children: string }> = function Timestamp(props) {
-  return (
-    <span
-      className='rcx-box rcx-box--full rcx-message-header__time'
-      {...props}
-    />
-  );
-};
+export const Message = forwardRef<HTMLDivElement, MessageProps>(
+  function Message(
+    {
+      // is: Tag = 'div',
+      className,
+      clickable,
+      sequential,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={prependClassName(
+          className,
+          [
+            'rcx-message',
+            (clickable || props.onClick) && 'rcx-message--clickable',
+            sequential && 'rcx-message--sequential',
+          ]
+            .filter(Boolean)
+            .join(' ')
+        )}
+        {...props}
+      />
+    );
+  }
+);
 
-const Name: FC<{ children: string }> = function Name(props) {
+export const MessageTimestamp: FC<{ children: string }> =
+  function MessageTimestamp(props) {
+    return (
+      <span
+        className='rcx-box rcx-box--full rcx-message-header__time'
+        {...props}
+      />
+    );
+  };
+
+export const MessageName: FC<{ children: string }> = function MessageName(
+  props
+) {
   return (
     <span
       className='rcx-box rcx-box--full rcx-message-header__name'
       {...props}
     />
   );
 };
-const Username: FC<{ children: string }> = function Name(props) {
-  return (
-    <span
-      className='rcx-box rcx-box--full rcx-message-header__username'
-      {...props}
-    />
-  );
-};
-
-const Role: FC<{ children: string }> = function Role(props) {
+export const MessageUsername: FC<{ children: string }> =
+  function MessageUsername(props) {
+    return (
+      <span
+        className='rcx-box rcx-box--full rcx-message-header__username'
+        {...props}
+      />
+    );
+  };
+
+export const MessageRole: FC<{ children: string }> = function MessageRole(
+  props
+) {
   return (
     <Tag
       onClick={undefined}
@@ -165,7 +173,7 @@ const Role: FC<{ children: string }> = function Role(props) {
   );
 };
 
-const Roles: FC = function Role(props) {
+export const MessageRoles: FC = function MessageRoles(props) {
   return (
     <div
       className='rcx-box rcx-box--full rcx-message-header__roles'
@@ -175,18 +183,18 @@ const Roles: FC = function Role(props) {
 };
 
 export default Object.assign(Message, {
-  Metrics,
-  Toolbox,
-  Container,
-  ContainerFixed,
+  Metrics: MessageMetrics,
+  Toolbox: MessageToolbox,
+  Container: MessageContainer,
+  ContainerFixed: MessageContainerFixed,
   LeftContainer: MessageLeftContainer,
-  Header,
+  Header: MessageHeader,
   Body: MessageBody,
   Block: MessageBlock,
-  Timestamp,
-  Name,
-  Username,
-  Roles,
-  Role,
-  Divider,
+  Timestamp: MessageTimestamp,
+  Name: MessageName,
+  Username: MessageUsername,
+  Roles: MessageRoles,
+  Role: MessageRole,
+  Divider: MessageDivider,
 });

packages/fuselage/src/components/Message/Divider/Divider.stories.mdx → packages/fuselage/src/components/Message/MessageDivider/Divider.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
 
-import { Divider } from '.';
+import { MessageDivider } from '.';
 import { Box } from '../..';
 
 <Meta title='Messages/Divider' parameters={{ jest: ['Divider/spec'] }} />
@@ -10,11 +10,11 @@ import { Box } from '../..';
 <Canvas>
   <Story name='Default'>
     <Box>
-      <Divider>Text</Divider>
-      <Divider unreadLabel={'Unread'}>Text</Divider>
-      <Divider unreadLabel={'Unread'} />
+      <MessageDivider>Text</MessageDivider>
+      <MessageDivider unreadLabel={'Unread'}>Text</MessageDivider>
+      <MessageDivider unreadLabel={'Unread'} />
     </Box>
   </Story>
 </Canvas>
 
-<ArgsTable of={Divider} />
+<ArgsTable of={MessageDivider} />

packages/fuselage/src/components/Message/Divider/index.tsx → packages/fuselage/src/components/Message/MessageDivider/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-const Divider: FC<{
+const MessageDivider: FC<{
   unreadLabel?: string;
 }> = ({ children, unreadLabel, ...props }) => (
   <div
@@ -27,4 +27,4 @@ const Divider: FC<{
     </div>
   </div>
 );
-export { Divider };
+export { MessageDivider };

packages/fuselage/src/components/Message/Metrics/index.tsx → packages/fuselage/src/components/Message/MessageMetrics/index.tsx

@@ -21,12 +21,12 @@ const MetricsItemLabel: FC = (props) => (
   <div className='rcx-message-metrics__item-label' {...props} />
 );
 
-const MetricsItem: FC & {
+export const MessageMetricsItem: FC & {
   Icon: FC<IconProps>;
   Label: FC<BoxProps>;
 } = (props) => <div className='rcx-message-metrics__item' {...props} />;
 
-export const Metrics: FC & {
+export const MessageMetrics: FC & {
   Item: FC<BoxProps> & { Icon: FC<IconProps>; Label: FC<BoxProps> };
   Following: FC<FollowingProps>;
   Reply: FC<ButtonProps>;
@@ -42,15 +42,15 @@ const MetricsFollowing: FC<FollowingProps> = ({ name }) => (
 );
 
 export const Reply: FC<ComponentProps<typeof Button>> = (props) => (
-  <MetricsItem>
+  <MessageMetricsItem>
     <Button {...props} {...{ small: true, primary: true }} />
-  </MetricsItem>
+  </MessageMetricsItem>
 );
 
-Metrics.Reply = Reply;
+MessageMetrics.Reply = Reply;
 
-Metrics.Item = MetricsItem;
-Metrics.Following = MetricsFollowing;
+MessageMetrics.Item = MessageMetricsItem;
+MessageMetrics.Following = MetricsFollowing;
 
-MetricsItem.Label = MetricsItemLabel;
-MetricsItem.Icon = MetricsItemIcon;
+MessageMetricsItem.Label = MetricsItemLabel;
+MessageMetricsItem.Icon = MetricsItemIcon;