feat: Introduce contextualBar surface renderer for UiKit blocks (#29697)

.changeset/popular-donkeys-laugh.md

@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/fuselage-ui-kit": minor
+"@rocket.chat/uikit-playground": minor
+---
+
+feat: Introduce contextualBar surface renderer for UiKit blocks

apps/meteor/client/views/room/contextualBar/Apps/Apps.tsx

@@ -1,6 +1,6 @@
 import type { IUIKitSurface } from '@rocket.chat/apps-engine/definition/uikit';
 import { ButtonGroup, Button, Box, Avatar } from '@rocket.chat/fuselage';
-import { UiKitComponent, UiKitModal, modalParser } from '@rocket.chat/fuselage-ui-kit';
+import { UiKitComponent, UiKitContextualBar, contextualBarParser } from '@rocket.chat/fuselage-ui-kit';
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
 import { BlockContext } from '@rocket.chat/ui-kit';
 import React from 'react';
@@ -27,24 +27,24 @@ const Apps = ({ view, onSubmit, onClose, onCancel, appId }: AppsProps): JSX.Elem
 	<>
 		<ContextualbarHeader>
 			<Avatar url={getURL(`/api/apps/${appId}/icon`)} />
-			<ContextualbarTitle>{modalParser.text(view.title, BlockContext.NONE, 0)}</ContextualbarTitle>
+			<ContextualbarTitle>{contextualBarParser.text(view.title, BlockContext.NONE, 0)}</ContextualbarTitle>
 			{onClose && <ContextualbarClose onClick={onClose} />}
 		</ContextualbarHeader>
 		<ContextualbarScrollableContent>
 			<Box is='form' method='post' action='#' onSubmit={onSubmit}>
-				<UiKitComponent render={UiKitModal} blocks={view.blocks as LayoutBlock[]} />
+				<UiKitComponent render={UiKitContextualBar} blocks={view.blocks as LayoutBlock[]} />
 			</Box>
 		</ContextualbarScrollableContent>
 		<ContextualbarFooter>
 			<ButtonGroup align='end'>
 				{view.close && (
 					<Button danger={view.close.style === 'danger'} onClick={onCancel}>
-						{modalParser.text(view.close.text, BlockContext.NONE, 0)}
+						{contextualBarParser.text(view.close.text, BlockContext.NONE, 0)}
 					</Button>
 				)}
 				{view.submit && (
 					<Button {...getButtonStyle(view)} onClick={onSubmit}>
-						{modalParser.text(view.submit.text, BlockContext.NONE, 1)}
+						{contextualBarParser.text(view.submit.text, BlockContext.NONE, 1)}
 					</Button>
 				)}
 			</ButtonGroup>

packages/fuselage-ui-kit/src/contexts/SurfaceContext.ts

@@ -1,6 +1,11 @@
 import { createContext, useContext } from 'react';
 
-type SurfaceContextValue = 'attachment' | 'banner' | 'message' | 'modal';
+type SurfaceContextValue =
+  | 'attachment'
+  | 'banner'
+  | 'message'
+  | 'modal'
+  | 'contextualBar';
 
 export const SurfaceContext = createContext<SurfaceContextValue>('message');
 

packages/fuselage-ui-kit/src/contexts/kitContext.ts

@@ -49,6 +49,6 @@ export const useUiKitStateValue = <T extends string | number | undefined>(
 
   return {
     value: (values && (values[actionId]?.value as T)) ?? initialValue,
-    error: errors && errors[actionId],
+    error: errors?.[actionId],
   };
 };

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

@@ -0,0 +1,18 @@
+import { Margins } from '@rocket.chat/fuselage';
+import type { ReactElement, ReactNode } from 'react';
+
+import { Surface } from './Surface';
+
+type ContextualBarSurfaceProps = {
+  children?: ReactNode;
+};
+
+const ContextualBarSurface = ({
+  children,
+}: ContextualBarSurfaceProps): ReactElement => (
+  <Surface type='contextualBar'>
+    <Margins blockEnd='x16'>{children}</Margins>
+  </Surface>
+);
+
+export default ContextualBarSurface;

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

@@ -0,0 +1,15 @@
+import { FuselageSurfaceRenderer } from './FuselageSurfaceRenderer';
+
+export class FuselageContextualBarSurfaceRenderer extends FuselageSurfaceRenderer {
+  public constructor() {
+    super([
+      'actions',
+      'context',
+      'divider',
+      'image',
+      'input',
+      'section',
+      'preview',
+    ]);
+  }
+}

packages/fuselage-ui-kit/src/surfaces/index.ts

@@ -5,11 +5,14 @@ import ModalSurface from './ModalSurface';
 import { createSurfaceRenderer } from './createSurfaceRenderer';
 import { FuselageMessageSurfaceRenderer } from './MessageSurfaceRenderer';
 import { FuselageModalSurfaceRenderer } from './FuselageModalSurfaceRenderer';
+import { FuselageContextualBarSurfaceRenderer } from './FuselageContextualBarRenderer';
+import ContextualBarSurface from './ContextualBarSurface';
 
 // export const attachmentParser = new FuselageSurfaceRenderer();
 export const bannerParser = new FuselageSurfaceRenderer();
 export const messageParser = new FuselageMessageSurfaceRenderer();
 export const modalParser = new FuselageModalSurfaceRenderer();
+export const contextualBarParser = new FuselageContextualBarSurfaceRenderer();
 
 // export const UiKitAttachment = createSurfaceRenderer(AttachmentSurface, attachmentParser);
 export const UiKitBanner = createSurfaceRenderer(BannerSurface, bannerParser);
@@ -18,3 +21,7 @@ export const UiKitMessage = createSurfaceRenderer(
   messageParser
 );
 export const UiKitModal = createSurfaceRenderer(ModalSurface, modalParser);
+export const UiKitContextualBar = createSurfaceRenderer(
+  ContextualBarSurface,
+  contextualBarParser
+);

packages/fuselage-ui-kit/src/utils/UiKitComponent.tsx

@@ -1,10 +1,19 @@
 import type * as UiKit from '@rocket.chat/ui-kit';
 import type { ReactElement } from 'react';
 
-import type { UiKitBanner, UiKitMessage, UiKitModal } from '../surfaces';
+import type {
+  UiKitBanner,
+  UiKitContextualBar,
+  UiKitMessage,
+  UiKitModal,
+} from '../surfaces';
 
 type UiKitComponentProps = {
-  render: typeof UiKitBanner | typeof UiKitMessage | typeof UiKitModal;
+  render:
+    | typeof UiKitBanner
+    | typeof UiKitMessage
+    | typeof UiKitModal
+    | typeof UiKitContextualBar;
   blocks: UiKit.LayoutBlock[];
 };
 

packages/uikit-playground/package.json

@@ -26,6 +26,7 @@
     "@rocket.chat/ui-contexts": "workspace:~",
     "codemirror": "^6.0.1",
     "eslint4b-prebuilt": "^6.7.2",
+    "rc-scrollbars": "^1.1.6",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^17.0.2",

packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx

@@ -0,0 +1,67 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  ButtonGroup,
+  Contextualbar,
+  ContextualbarAction,
+  ContextualbarFooter,
+  ContextualbarHeader,
+  ContextualbarTitle,
+  Margins,
+} from '@rocket.chat/fuselage';
+import { Scrollbars } from 'rc-scrollbars';
+import { useLayoutSizes } from '@rocket.chat/ui-contexts';
+
+import DraggableList from '../../../Draggable/DraggableList';
+import type { DraggableListProps } from '../../../Draggable/DraggableList';
+
+const ContextualBarSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
+  <Contextualbar height='100%' width={useLayoutSizes().contextualBar} position='absolute'>
+    <ContextualbarHeader>
+      <Avatar url='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' />
+      <ContextualbarTitle>{'Contextual Bar'}</ContextualbarTitle>
+      <ContextualbarAction data-qa='ContextualbarActionClose' title='Close' name='cross' />
+    </ContextualbarHeader>
+
+    <Box height='100%' p='12px'>
+      <Box
+        height='100%'
+        display='flex'
+        flexShrink={1}
+        flexDirection='column'
+        flexGrow={1}
+        overflow='hidden'
+      >
+        <Scrollbars
+          autoHide
+          autoHideTimeout={2000}
+          autoHideDuration={500}
+          style={{
+            width: '100%',
+            height: '100%',
+            flexGrow: 1,
+            willChange: 'transform',
+            overflowY: 'hidden',
+          }}
+          renderThumbVertical={({ style, ...props }): JSX.Element => (
+            <div {...props} style={{ ...style, backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: '7px' }} />
+          )}
+        >
+          <Margins blockEnd='x16'>
+            <DraggableList surface={3} blocks={blocks} onDragEnd={onDragEnd} />
+          </Margins>
+        </Scrollbars>
+      </Box>
+    </Box>
+
+    <ContextualbarFooter>
+      <ButtonGroup stretch>
+        <Button>Cancel</Button>
+        <Button primary>Submit</Button>
+      </ButtonGroup>
+    </ContextualbarFooter>
+  </Contextualbar>
+);
+
+export default ContextualBarSurface;

packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx

@@ -8,6 +8,7 @@ import type { Block } from '../../../Draggable/DraggableList';
 import BannerSurface from './BannerSurface';
 import MessageSurface from './MessageSurface';
 import ModalSurface from './ModalSurface';
+import ContextualBarSurface from './ContextualBarSurface';
 import { reorder } from './Reorder';
 
 const Surface: FC = () => {
@@ -39,6 +40,7 @@ const Surface: FC = () => {
     '1': () => <MessageSurface blocks={uniqueBlocks} onDragEnd={onDragEnd} />,
     '2': () => <BannerSurface blocks={uniqueBlocks} onDragEnd={onDragEnd} />,
     '3': () => <ModalSurface blocks={uniqueBlocks} onDragEnd={onDragEnd} />,
+    '4': () => <ContextualBarSurface blocks={uniqueBlocks} onDragEnd={onDragEnd}/>,
   };
   return (
     <Box pb='40px' pi='x20'>

packages/uikit-playground/src/Components/SurfaceSelect/options.ts

@@ -4,6 +4,7 @@ const options: SelectOption[] = [
   ['1', 'Message Preview'],
   ['2', 'Banner Preview'],
   ['3', 'Modal Preview'],
+  ['4', 'ContextualBar Preview'],
 ];
 
 export default options;

yarn.lock

@@ -11021,6 +11021,7 @@ __metadata:
     eslint-plugin-react-hooks: ^4.6.0
     eslint-plugin-react-refresh: ^0.4.1
     eslint4b-prebuilt: ^6.7.2
+    rc-scrollbars: ^1.1.6
     react: ^17.0.2
     react-beautiful-dnd: ^13.1.1
     react-dom: ^17.0.2
@@ -34530,6 +34531,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rc-scrollbars@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "rc-scrollbars@npm:1.1.6"
+  dependencies:
+    dom-css: ^2.1.0
+    raf: ^3.4.1
+  peerDependencies:
+    react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 6d511fc14c1f932319ecef13de78e64453af349b2eec962b4d6f515e4bca4ca1b5555b6b875c1b5cae193b15069aff16cd7fa02550084b0e58bbeb398f74b80a
+  languageName: node
+  linkType: hard
+
 "rc@npm:^1.0.1, rc@npm:^1.1.6, rc@npm:^1.2.7":
   version: 1.2.8
   resolution: "rc@npm:1.2.8"