Message preview

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

@@ -0,0 +1,60 @@
+import {
+  MessagePreview,
+  MessagePreviewContent,
+  MessagePreviewDescription,
+  MessagePreviewImage,
+  MessagePreviewTitle,
+  MessagePreviewFooter,
+  MessagePreviewThumb,
+} from '@rocket.chat/fuselage';
+import * as UiKit from '@rocket.chat/ui-kit';
+import React, { memo, ReactElement } from 'react';
+
+import { BlockProps } from '../utils/BlockProps';
+
+type PreviewBlockProps = BlockProps<UiKit.PreviewBlock>;
+
+const PreviewBlock = ({
+  block,
+  surfaceRenderer,
+}: PreviewBlockProps): ReactElement => (
+  <MessagePreview>
+    <MessagePreviewContent
+      thumb={
+        block.thumb && (
+          <MessagePreviewThumb>
+            <MessagePreviewImage
+              height={192}
+              width={368}
+              url={block.thumb.url}
+            />
+          </MessagePreviewThumb>
+        )
+      }
+    >
+      <MessagePreviewTitle>
+        {block.title.map((title) =>
+          surfaceRenderer.renderTextObject(title, 0, UiKit.BlockContext.NONE)
+        )}
+      </MessagePreviewTitle>
+      <MessagePreviewDescription clamp>
+        {surfaceRenderer.renderTextObject(
+          block.description,
+          0,
+          UiKit.BlockContext.NONE
+        )}
+      </MessagePreviewDescription>
+      <MessagePreviewFooter>
+        {block.footer?.map((footer, index) =>
+          surfaceRenderer.renderTextObject(
+            footer,
+            index,
+            UiKit.BlockContext.NONE
+          )
+        )}
+      </MessagePreviewFooter>
+    </MessagePreviewContent>
+  </MessagePreview>
+);
+
+export default memo(PreviewBlock);

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

@@ -151,3 +151,5 @@ export const ContextWithTextAndImages = createStory(
 );
 
 export const Conditional = createStory(payloads.conditional);
+
+export const Preview = createStory(payloads.preview);

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,29 @@
+// import * as UiKit from '@rocket.chat/ui-kit';
+import { PreviewBlock } from '@rocket.chat/ui-kit/dist/cjs/blocks/layout/PreviewBlock';
+
+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: 'plain_text',
+        text: 'google.com',
+      },
+    ],
+  },
+];

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,

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

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

packages/fuselage/src/components/Message/MessageDivider/spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Divider } from '../..';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Divider />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

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

@@ -1,6 +1,15 @@
 import React, { FC } from 'react';
 import './MessagePreview.styles.scss';
 
+export * from './MessagePreviewContent';
+export * from './MessagePreviewDescription';
+export * from './MessagePreviewFooter';
+export * from './MessagePreviewImage';
+export * from './MessagePreviewLink';
+export * from './MessagePreviewThumb';
+export * from './MessagePreviewTitle';
+export * from './MessatePreviewGenericFile';
+
 export const MessagePreview: FC<React.HTMLAttributes<HTMLDivElement>> = (
   props
 ) => <div {...props} className='rcx-message-generic-preview' />;

packages/ui-kit/src/blocks/LayoutBlock.ts

@@ -4,9 +4,11 @@ import { ContextBlock } from './layout/ContextBlock';
 import { DividerBlock } from './layout/DividerBlock';
 import { ImageBlock } from './layout/ImageBlock';
 import { InputBlock } from './layout/InputBlock';
+import { PreviewBlock } from './layout/PreviewBlock';
 import { SectionBlock } from './layout/SectionBlock';
 
 export type LayoutBlock =
+  | PreviewBlock
   | ActionsBlock
   | ConditionalBlock
   | ContextBlock

packages/ui-kit/src/blocks/LayoutBlockType.ts

@@ -8,6 +8,7 @@ export enum LayoutBlockType {
   CONTEXT = 'context',
   INPUT = 'input',
   CONDITIONAL = 'conditional',
+  PREVIEW = 'preview',
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

packages/ui-kit/src/blocks/layout/ContextBlock.ts

@@ -2,6 +2,8 @@ import { LayoutBlockish } from '../LayoutBlockish';
 import { TextObject } from '../TextObject';
 import { ImageElement } from '../elements/ImageElement';
 
+export type ContextBlockElements = TextObject | ImageElement;
+
 export type ContextBlock = LayoutBlockish<{
   type: 'context';
   elements: readonly (TextObject | ImageElement)[];

packages/ui-kit/src/blocks/layout/PreviewBlock.ts

@@ -0,0 +1,36 @@
+import { LayoutBlockType } from '../LayoutBlockType';
+import { TextObject } from '../TextObject';
+
+type Image = {
+  url: string;
+  dimensions?: {
+    width: number;
+    height: number;
+  };
+};
+
+export type PreviewBlock = {
+  type: `${LayoutBlockType.PREVIEW}`;
+  title: TextObject[];
+  description: TextObject;
+  footer?: TextObject[];
+} & (
+  | {
+      preview: Image;
+      externalUrl?: string;
+      oembedUrl?: string;
+      thumb: undefined;
+    }
+  | {
+      thumb: Image;
+    }
+  | Record<string, never>
+);
+
+type PreviewBlockWithThumb = PreviewBlock & {
+  thumb: Image;
+};
+
+export const isPreviewBlockWithThumb = (
+  previewBlock: PreviewBlock
+): previewBlock is PreviewBlockWithThumb => 'thumb' in previewBlock;

packages/ui-kit/src/index.ts

@@ -27,6 +27,7 @@ export { BlockElement } from './blocks/BlockElement';
 export { ActionsBlock } from './blocks/layout/ActionsBlock';
 export { ConditionalBlock } from './blocks/layout/ConditionalBlock';
 export { ContextBlock } from './blocks/layout/ContextBlock';
+export { PreviewBlock } from './blocks/layout/PreviewBlock';
 export { DividerBlock } from './blocks/layout/DividerBlock';
 export { ImageBlock } from './blocks/layout/ImageBlock';
 export { InputBlock } from './blocks/layout/InputBlock';

packages/ui-kit/src/rendering/BlockRenderers.ts

@@ -12,13 +12,13 @@ import { LayoutBlockRenderer } from './LayoutBlockRenderer';
 import { TextObjectRenderer } from './TextObjectRenderer';
 
 export type BlockRenderers<T> = {
-  [B in TextObject as B['type']]: TextObjectRenderer<T, B>;
+  [B in RenderableLayoutBlock as B['type']]?: LayoutBlockRenderer<T, B>;
 } &
   {
-    [B in BlockElement as B['type']]?: BlockElementRenderer<T, B>;
+    [B in TextObject as B['type']]: TextObjectRenderer<T, B>;
   } &
   {
-    [B in RenderableLayoutBlock as B['type']]?: LayoutBlockRenderer<T, B>;
+    [B in BlockElement as B['type']]?: BlockElementRenderer<T, B>;
   } & {
     /** @deprecated */
     plainText?: TextObjectRenderer<T, PlainText>;

packages/ui-kit/src/rendering/surfaces/UiKitParserMessage.ts

@@ -2,6 +2,7 @@ import { ActionsBlock } from '../../blocks/layout/ActionsBlock';
 import { ContextBlock } from '../../blocks/layout/ContextBlock';
 import { DividerBlock } from '../../blocks/layout/DividerBlock';
 import { ImageBlock } from '../../blocks/layout/ImageBlock';
+import { PreviewBlock } from '../../blocks/layout/PreviewBlock';
 import { SectionBlock } from '../../blocks/layout/SectionBlock';
 import { SurfaceRenderer } from '../SurfaceRenderer';
 
@@ -10,14 +11,15 @@ type MessageSurfaceLayoutBlock =
   | ContextBlock
   | DividerBlock
   | ImageBlock
-  | SectionBlock;
+  | SectionBlock
+  | PreviewBlock;
 
 export abstract class UiKitParserMessage<OutputElement> extends SurfaceRenderer<
   OutputElement,
   MessageSurfaceLayoutBlock
 > {
   public constructor() {
-    super(['actions', 'context', 'divider', 'image', 'section']);
+    super(['actions', 'context', 'divider', 'image', 'section', 'preview']);
   }
 }