feat(fuselage-ui-kit): Introduce TabNavigationBlock (#29908)

.changeset/perfect-adults-travel.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/fuselage-ui-kit": patch
+"@rocket.chat/uikit-playground": patch
+---
+
+feat(fuselage-ui-kit): Introduce `TabsNavigationBlock`

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

@@ -0,0 +1,44 @@
+import { Tabs } from '@rocket.chat/fuselage';
+import type { ExperimentalTabNavigationBlock } from '@rocket.chat/ui-kit';
+import type { ReactElement } from 'react';
+import { memo, useState } from 'react';
+
+import { TabElement } from '../elements/TabElement';
+import type { BlockProps } from '../utils/BlockProps';
+
+type TabNavigationBlockProps = BlockProps<ExperimentalTabNavigationBlock>;
+
+const TabNavigationBlock = (
+  blockProps: TabNavigationBlockProps
+): ReactElement => {
+  const {
+    block: { tabs },
+    context,
+    surfaceRenderer,
+  } = blockProps;
+
+  const [selected, select] = useState<number>();
+
+  return (
+    <Tabs marginBlock='x24'>
+      {tabs.map((innerBlock, idx) => {
+        if (selected !== undefined) {
+          innerBlock.selected = idx === selected;
+        }
+
+        return (
+          <TabElement
+            key={`${innerBlock.blockId}_${idx}`}
+            index={idx}
+            context={context}
+            surfaceRenderer={surfaceRenderer}
+            block={innerBlock}
+            select={select}
+          />
+        );
+      })}
+    </Tabs>
+  );
+};
+
+export default memo(TabNavigationBlock);

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

@@ -0,0 +1,33 @@
+import { TabsItem } from '@rocket.chat/fuselage';
+import * as UiKit from '@rocket.chat/ui-kit';
+import type { Dispatch, ReactElement } from 'react';
+
+import { useUiKitState } from '../hooks/useUiKitState';
+import type { BlockProps } from '../utils/BlockProps';
+
+export const TabElement = ({
+  block,
+  context,
+  surfaceRenderer,
+  index,
+  select,
+}: BlockProps<UiKit.ExperimentalTabElement> & {
+  select: Dispatch<number>;
+}): ReactElement => {
+  const [{ loading }, action] = useUiKitState(block, context);
+
+  const { title, selected, disabled } = block;
+
+  return (
+    <TabsItem
+      selected={selected}
+      disabled={loading ? true : disabled}
+      onClick={(e) => {
+        !disabled && select(index);
+        !disabled && action(e);
+      }}
+    >
+      {surfaceRenderer.renderTextObject(title, 0, UiKit.BlockContext.NONE)}
+    </TabsItem>
+  );
+};

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

@@ -1,3 +1,7 @@
+import * as UiKit from '@rocket.chat/ui-kit';
+import type { ReactElement } from 'react';
+
+import TabNavigationBlock from '../blocks/TabNavigationBlock';
 import { FuselageSurfaceRenderer } from './FuselageSurfaceRenderer';
 
 export class FuselageContextualBarSurfaceRenderer extends FuselageSurfaceRenderer {
@@ -11,6 +15,27 @@ export class FuselageContextualBarSurfaceRenderer extends FuselageSurfaceRendere
       'section',
       'preview',
       'callout',
+      'tab_navigation',
     ]);
   }
+
+  tab_navigation(
+    block: UiKit.ExperimentalTabNavigationBlock,
+    context: UiKit.BlockContext,
+    index: number
+  ): ReactElement | null {
+    if (context === UiKit.BlockContext.BLOCK) {
+      return (
+        <TabNavigationBlock
+          key={index}
+          block={block}
+          context={context}
+          index={index}
+          surfaceRenderer={this}
+        />
+      );
+    }
+
+    return null;
+  }
 }

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

@@ -49,7 +49,7 @@ const ContextualBarSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
           )}
         >
           <Margins blockEnd='x16'>
-            <DraggableList surface={3} blocks={blocks} onDragEnd={onDragEnd} />
+            <DraggableList surface={4} blocks={blocks} onDragEnd={onDragEnd} />
           </Margins>
         </Scrollbars>
       </Box>

packages/uikit-playground/src/Payload/BlocksTree.ts

@@ -59,6 +59,11 @@ import {
   sectionWithMenu,
   sectionWithdatePicker,
 } from './section';
+import {
+  disabled,
+  plain,
+  selected,
+} from './tabNavigation';
 
 const BlocksTree: Item = [
   {
@@ -328,6 +333,23 @@ const BlocksTree: Item = [
       },
     ],
   },
+  {
+    label: 'TabNavigation',
+    branches: [
+      {
+        label: 'Plain',
+        payload: plain,
+      },
+      {
+        label: 'Disabled',
+        payload: disabled,
+      },
+      {
+        label: 'Selected',
+        payload: selected,
+      }
+    ],
+  }
 ];
 
 export default BlocksTree;

packages/uikit-playground/src/Payload/tabNavigation/disabled.ts

@@ -0,0 +1,36 @@
+import { LayoutBlock } from "@rocket.chat/ui-kit";
+
+export const disabled: readonly LayoutBlock[] = [{
+    type: 'tab_navigation',
+    tabs: [{
+        type: 'tab',
+        disabled: true,
+        title: {
+            type: 'plain_text',
+            text: 'tab 1',
+        },
+        appId: 'tab_navigation',
+        blockId: 'tab1',
+        actionId: 'tab1',
+    },
+    {
+        type: 'tab',
+        title: {
+            type: 'plain_text',
+            text: 'tab 2',
+        },
+        appId: 'tab_navigation',
+        blockId: 'tab2',
+        actionId: 'tab2',
+    },
+    {
+        type: 'tab',
+        title: {
+            type: 'plain_text',
+            text: 'tab 3',
+        },
+        appId: 'tab_navigation',
+        blockId: 'tab3',
+        actionId: 'tab3',
+    }],
+}];

packages/uikit-playground/src/Payload/tabNavigation/index.ts

@@ -0,0 +1,3 @@
+export { plain } from './plain'
+export { disabled } from './disabled'
+export { selected } from './selected'

packages/uikit-playground/src/Payload/tabNavigation/plain.ts

@@ -0,0 +1,35 @@
+import { LayoutBlock } from "@rocket.chat/ui-kit";
+
+export const plain: readonly LayoutBlock[] = [{
+    type: 'tab_navigation',
+    tabs: [{
+        type: 'tab',
+        title: {
+            type: 'plain_text',
+            text: 'tab 1',
+        },
+        appId: 'tab_navigation',
+        blockId: 'tab1',
+        actionId: 'tab1',
+    },
+    {
+        type: 'tab',
+        title: {
+            type: 'plain_text',
+            text: 'tab 2',
+        },
+        appId: 'tab_navigation',
+        blockId: 'tab2',
+        actionId: 'tab2',
+    },
+    {
+        type: 'tab',
+        title: {
+            type: 'plain_text',
+            text: 'tab 3',
+        },
+        appId: 'tab_navigation',
+        blockId: 'tab3',
+        actionId: 'tab3',
+    }],
+}];

packages/uikit-playground/src/Payload/tabNavigation/selected.ts

@@ -0,0 +1,36 @@
+import { LayoutBlock } from "@rocket.chat/ui-kit";
+
+export const selected: readonly LayoutBlock[] = [{
+    type: 'tab_navigation',
+    tabs: [{
+        type: 'tab',
+        title: {
+            type: 'plain_text',
+            text: 'tab 1',
+        },
+        appId: 'tab_navigation',
+        blockId: 'tab1',
+        actionId: 'tab1',
+    },
+    {
+        type: 'tab',
+        title: {
+            type: 'plain_text',
+            text: 'tab 2',
+        },
+        appId: 'tab_navigation',
+        blockId: 'tab2',
+        actionId: 'tab2',
+    },
+    {
+        type: 'tab',
+        title: {
+            type: 'plain_text',
+            text: 'tab 3',
+        },
+        selected: true,
+        appId: 'tab_navigation',
+        blockId: 'tab3',
+        actionId: 'tab3',
+    }],
+}];