feat: Message Preview

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

@@ -0,0 +1,90 @@
+import {
+  MessageGenericPreview,
+  MessageGenericPreviewContent,
+  MessageGenericPreviewDescription,
+  MessageGenericPreviewImage,
+  MessageGenericPreviewTitle,
+  MessageGenericPreviewFooter,
+  MessageGenericPreviewThumb,
+  Box,
+} from '@rocket.chat/fuselage';
+import * as UiKit from '@rocket.chat/ui-kit';
+import {
+  isPreviewBlockWithThumb,
+  isPreviewBlockWithPreview,
+} from '@rocket.chat/ui-kit';
+import React, { memo, ReactElement } from 'react';
+
+import { BlockProps } from '../utils/BlockProps';
+import ContextBlock from './ContextBlock';
+
+type PreviewBlockProps = BlockProps<UiKit.PreviewBlock>;
+
+const PreviewBlock = ({
+  block,
+  surfaceRenderer,
+}: PreviewBlockProps): ReactElement => (
+  <Box>
+    <MessageGenericPreview>
+      {isPreviewBlockWithPreview(block) && block.preview?.dimensions && (
+        <MessageGenericPreviewImage
+          width={block.preview.dimensions.width}
+          height={block.preview.dimensions.height}
+          url={block.preview.url}
+        />
+      )}
+      <MessageGenericPreviewContent
+        thumb={
+          isPreviewBlockWithThumb(block) ? (
+            <MessageGenericPreviewThumb>
+              <MessageGenericPreviewImage
+                height={192}
+                width={368}
+                url={block.thumb.url}
+              />
+            </MessageGenericPreviewThumb>
+          ) : undefined
+        }
+      >
+        {Array.isArray(block.title) ? (
+          <MessageGenericPreviewTitle
+            externalUrl={
+              isPreviewBlockWithPreview(block) ? block.externalUrl : undefined
+            }
+          >
+            {block.title.map((title) =>
+              surfaceRenderer.renderTextObject(
+                title,
+                0,
+                UiKit.BlockContext.NONE
+              )
+            )}
+          </MessageGenericPreviewTitle>
+        ) : null}
+        {Array.isArray(block.description) ? (
+          <MessageGenericPreviewDescription clamp>
+            {block.description.map((description) =>
+              surfaceRenderer.renderTextObject(
+                description,
+                0,
+                UiKit.BlockContext.NONE
+              )
+            )}
+          </MessageGenericPreviewDescription>
+        ) : null}
+        {block.footer && (
+          <MessageGenericPreviewFooter>
+            <ContextBlock
+              block={block.footer}
+              surfaceRenderer={surfaceRenderer}
+              context={UiKit.BlockContext.BLOCK}
+              index={0}
+            />
+          </MessageGenericPreviewFooter>
+        )}
+      </MessageGenericPreviewContent>
+    </MessageGenericPreview>
+  </Box>
+);
+
+export default memo(PreviewBlock);

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

@@ -0,0 +1,31 @@
+import { Box } from '@rocket.chat/fuselage';
+import * as UiKit from '@rocket.chat/ui-kit';
+import React, { FC } from 'react';
+
+import { BlockProps } from '../../utils/BlockProps';
+import { ContextElementItem } from './ContextElementItem';
+
+type ContextElementProps = BlockProps<UiKit.ContextBlock>;
+
+export const ContextElement: FC<ContextElementProps> = ({
+  block,
+  surfaceRenderer,
+  className,
+}) => (
+  <Box
+    className={className}
+    display='flex'
+    alignItems='center'
+    margin={-4}
+    withTruncatedText
+  >
+    {block.elements.map((element, i) => (
+      <ContextElementItem
+        index={i}
+        key={i}
+        element={element}
+        surfaceRenderer={surfaceRenderer}
+      />
+    ))}
+  </Box>
+);

packages/fuselage-ui-kit/src/elements/ContextElement/ContextElementItem.tsx

@@ -0,0 +1,38 @@
+import { Box } from '@rocket.chat/fuselage';
+import * as UiKit from '@rocket.chat/ui-kit';
+import { BlockContext, ElementType } from '@rocket.chat/ui-kit';
+import React, { FC } from 'react';
+
+import { BlockProps } from '../../utils/BlockProps';
+
+type ContextElementProps = BlockProps<UiKit.ContextBlock>;
+
+export const ContextElementItem: FC<{
+  element: ContextElementProps['block']['elements'][number];
+  surfaceRenderer: ContextElementProps['surfaceRenderer'];
+  index: number;
+}> = ({ element, surfaceRenderer, index }) => {
+  const renderedElement = surfaceRenderer.renderContext(
+    element,
+    BlockContext.CONTEXT,
+    undefined,
+    index
+  );
+
+  if (!renderedElement) {
+    return null;
+  }
+
+  switch (element.type) {
+    case ElementType.PLAIN_TEXT:
+    case ElementType.MARKDOWN:
+      return (
+        <Box is='span' withTruncatedText fontScale='c1' color='info' margin={4}>
+          {renderedElement}
+        </Box>
+      );
+
+    default:
+      return <>{renderedElement}</>;
+  }
+};

packages/fuselage-ui-kit/src/elements/ContextElement/index.tsx

@@ -0,0 +1 @@
+export * from './ContextElement';

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

@@ -1,17 +1,5 @@
 /* eslint-disable new-cap */
-import {
-  Message,
-  Avatar,
-  MessageLeftContainer,
-  MessageHeader,
-  MessageContainer,
-  MessageName,
-  MessageUsername,
-  MessageRole,
-  MessageTimestamp,
-  MessageToolbox,
-  MessageBody,
-} from '@rocket.chat/fuselage';
+import { Message, Avatar } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
@@ -35,7 +23,7 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
     errors: Record<string, string>;
   }) => (
     <Message clickable>
-      <MessageLeftContainer>
+      <Message.LeftContainer>
         <Avatar
           url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
               4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
@@ -50,17 +38,17 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
               UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
           size={'x36'}
         />
-      </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>
+      </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>
           <kitContext.Provider
             value={{
               action: action('action'),
@@ -72,15 +60,15 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
           >
             {UiKitMessage(blocks)}
           </kitContext.Provider>
-        </MessageBody>
-      </MessageContainer>
-      <MessageToolbox.Wrapper>
-        <MessageToolbox>
-          <MessageToolbox.Item icon='quote' />
-          <MessageToolbox.Item icon='clock' />
-          <MessageToolbox.Item icon='thread' />
-        </MessageToolbox>
-      </MessageToolbox.Wrapper>
+        </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>
     </Message>
   );
   story.args = {
@@ -151,3 +139,8 @@ export const ContextWithTextAndImages = createStory(
 );
 
 export const Conditional = createStory(payloads.conditional);
+
+export const Preview = createStory(payloads.preview);
+export const PreviewWithExternalUrl = createStory(
+  payloads.previewWithExternalUrl
+);

packages/fuselage-ui-kit/src/stories/payloads/index.ts

@@ -5,3 +5,4 @@ export * from './divider';
 export * from './image';
 export * from './input';
 export * from './section';
+export * from './preview';

packages/fuselage-ui-kit/src/stories/payloads/preview.ts

@@ -0,0 +1,66 @@
+// import * as UiKit from '@rocket.chat/ui-kit';
+import { PreviewBlock } from '@rocket.chat/ui-kit';
+
+import img from './img';
+
+export const preview: PreviewBlock[] = [
+  {
+    type: 'preview',
+    title: [
+      {
+        type: 'plain_text',
+        text: 'I Need a Marg',
+        emoji: true,
+      },
+    ],
+    description: [
+      {
+        type: 'plain_text',
+        text: 'I Need a Description',
+        emoji: true,
+      },
+    ],
+    thumb: { url: img },
+    footer: {
+      type: 'context',
+      elements: [
+        {
+          type: 'plain_text',
+          text: 'google.com',
+        },
+      ],
+    },
+  },
+];
+
+export const previewWithExternalUrl: PreviewBlock[] = [
+  {
+    type: 'preview',
+    title: [
+      {
+        type: 'plain_text',
+        text: 'I Need a Marg',
+        emoji: true,
+      },
+    ],
+    description: [
+      {
+        type: 'plain_text',
+        text: 'I Need a Description',
+        emoji: true,
+      },
+    ],
+    // thumb: { url: img },
+    footer: {
+      type: 'context',
+      elements: [
+        {
+          type: 'plain_text',
+          text: 'google.com',
+        },
+      ],
+    },
+    externalUrl:
+      'https://rocketchat.github.io/Rocket.Chat.Fuselage/?path=/story/*',
+  },
+];

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

@@ -6,6 +6,7 @@ import ContextBlock from '../blocks/ContextBlock';
 import DividerBlock from '../blocks/DividerBlock';
 import ImageBlock from '../blocks/ImageBlock';
 import InputBlock from '../blocks/InputBlock';
+import PreviewBlock from '../blocks/PreviewBlock';
 import SectionBlock from '../blocks/SectionBlock';
 import ButtonElement from '../elements/ButtonElement';
 import DatePickerElement from '../elements/DatePickerElement';
@@ -18,7 +19,15 @@ import StaticSelectElement from '../elements/StaticSelectElement';
 
 export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement> {
   public constructor() {
-    super(['actions', 'context', 'divider', 'image', 'input', 'section']);
+    super([
+      'actions',
+      'context',
+      'divider',
+      'image',
+      'input',
+      'section',
+      'preview',
+    ]);
   }
 
   public plain_text(
@@ -65,6 +74,25 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
     return null;
   }
 
+  preview(
+    block: UiKit.PreviewBlock,
+    context: UiKit.BlockContext,
+    index: number
+  ): ReactElement | null {
+    if (context !== UiKit.BlockContext.BLOCK) {
+      return null;
+    }
+    return (
+      <PreviewBlock
+        key={index}
+        block={block}
+        context={context}
+        index={index}
+        surfaceRenderer={this}
+      />
+    );
+  }
+
   context(
     block: UiKit.ContextBlock,
     context: UiKit.BlockContext,