diff --git a/.changeset/popular-donkeys-laugh.md b/.changeset/popular-donkeys-laugh.md new file mode 100644 index 00000000000..4fed70427f7 --- /dev/null +++ b/.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 diff --git a/apps/meteor/client/views/room/contextualBar/Apps/Apps.tsx b/apps/meteor/client/views/room/contextualBar/Apps/Apps.tsx index 1c353ff9a32..0c83a409701 100644 --- a/apps/meteor/client/views/room/contextualBar/Apps/Apps.tsx +++ b/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 <> - {modalParser.text(view.title, BlockContext.NONE, 0)} + {contextualBarParser.text(view.title, BlockContext.NONE, 0)} {onClose && } - + {view.close && ( )} {view.submit && ( )} diff --git a/packages/fuselage-ui-kit/src/contexts/SurfaceContext.ts b/packages/fuselage-ui-kit/src/contexts/SurfaceContext.ts index 62bd57bd4bf..21d56b91e45 100644 --- a/packages/fuselage-ui-kit/src/contexts/SurfaceContext.ts +++ b/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('message'); diff --git a/packages/fuselage-ui-kit/src/contexts/kitContext.ts b/packages/fuselage-ui-kit/src/contexts/kitContext.ts index 6eebb8cea7a..f4a0687e5af 100644 --- a/packages/fuselage-ui-kit/src/contexts/kitContext.ts +++ b/packages/fuselage-ui-kit/src/contexts/kitContext.ts @@ -49,6 +49,6 @@ export const useUiKitStateValue = ( return { value: (values && (values[actionId]?.value as T)) ?? initialValue, - error: errors && errors[actionId], + error: errors?.[actionId], }; }; diff --git a/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurface.tsx b/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurface.tsx new file mode 100644 index 00000000000..b419dea19e8 --- /dev/null +++ b/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 => ( + + {children} + +); + +export default ContextualBarSurface; diff --git a/packages/fuselage-ui-kit/src/surfaces/FuselageContextualBarRenderer.tsx b/packages/fuselage-ui-kit/src/surfaces/FuselageContextualBarRenderer.tsx new file mode 100644 index 00000000000..ebe6453ba36 --- /dev/null +++ b/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', + ]); + } +} diff --git a/packages/fuselage-ui-kit/src/surfaces/index.ts b/packages/fuselage-ui-kit/src/surfaces/index.ts index 25114be862d..489fe921ddb 100644 --- a/packages/fuselage-ui-kit/src/surfaces/index.ts +++ b/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 +); diff --git a/packages/fuselage-ui-kit/src/utils/UiKitComponent.tsx b/packages/fuselage-ui-kit/src/utils/UiKitComponent.tsx index f43057a6abc..3d1c5a12afe 100644 --- a/packages/fuselage-ui-kit/src/utils/UiKitComponent.tsx +++ b/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[]; }; diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json index a309352c04f..c60b02b9ca0 100644 --- a/packages/uikit-playground/package.json +++ b/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", diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx new file mode 100644 index 00000000000..e7cbc469e19 --- /dev/null +++ b/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) => ( + + + + {'Contextual Bar'} + + + + + + ( +
+ )} + > + + + + + + + + + + + + + + +); + +export default ContextualBarSurface; diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx index 5c21fe2d36e..1022dad9386 100644 --- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx +++ b/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': () => , '2': () => , '3': () => , + '4': () => , }; return ( diff --git a/packages/uikit-playground/src/Components/SurfaceSelect/options.ts b/packages/uikit-playground/src/Components/SurfaceSelect/options.ts index 8fdf49677cf..315b864a8fe 100644 --- a/packages/uikit-playground/src/Components/SurfaceSelect/options.ts +++ b/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; diff --git a/yarn.lock b/yarn.lock index b3fc2efa939..8cc8eada135 100644 --- a/yarn.lock +++ b/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"