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']);
  }
 }