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

2 years ago · dc1d8ce92e
parent 357a3a50fa
commit dc1d8ce92e
11 changed files with 297 additions and 8 deletions
--- a/.changeset/perfect-adults-travel.md
+++ b/.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`
--- a/packages/fuselage-ui-kit/src/blocks/TabNavigationBlock.tsx
+++ b/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);
--- a/packages/fuselage-ui-kit/src/elements/TabElement.tsx
+++ b/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>
+  );
+};
--- a/packages/fuselage-ui-kit/src/surfaces/FuselageContextualBarRenderer.tsx
+++ b/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;
+  }
 }
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
+++ b/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>
--- a/packages/uikit-playground/src/Payload/BlocksTree.ts
+++ b/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;
--- a/packages/uikit-playground/src/Payload/tabNavigation/disabled.ts
+++ b/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',
+    }],
+}];
--- a/packages/uikit-playground/src/Payload/tabNavigation/index.ts
+++ b/packages/uikit-playground/src/Payload/tabNavigation/index.ts
@ -0,0 +1,3 @@
+export { plain } from './plain'
+export { disabled } from './disabled'
+export { selected } from './selected'
--- a/packages/uikit-playground/src/Payload/tabNavigation/plain.ts
+++ b/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',
+    }],
+}];
--- a/packages/uikit-playground/src/Payload/tabNavigation/selected.ts
+++ b/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',
+    }],
+}];
--- a/yarn.lock
+++ b/yarn.lock
@ -7289,7 +7289,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.160, @rocket.chat/css-in-js@npm:~0.31.23-dev.170":
+"@rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.160":
  version: 0.31.23
  resolution: "@rocket.chat/css-in-js@npm:0.31.23"
  dependencies:
@ -7302,6 +7302,19 @@ __metadata:
  languageName: node
  linkType: hard

+"@rocket.chat/css-in-js@npm:^0.31.24, @rocket.chat/css-in-js@npm:~0.31.23-dev.170":
+  version: 0.31.24
+  resolution: "@rocket.chat/css-in-js@npm:0.31.24"
+  dependencies:
+    "@emotion/hash": ^0.9.0
+    "@rocket.chat/css-supports": ^0.31.24
+    "@rocket.chat/memo": ^0.31.24
+    "@rocket.chat/stylis-logical-props-middleware": ^0.31.24
+    stylis: ~4.1.3
+  checksum: aa343748e7eebdbcd95d6593fd9e039479fe7fe5fd579f81910ccf6130018a8d20a96556c19b16b356a6ce07e90b544520a839699a682fdbd943400b24ba6269
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/css-in-js@npm:next":
  version: 0.31.23-dev.160
  resolution: "@rocket.chat/css-in-js@npm:0.31.23-dev.160"
@ -7315,7 +7328,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.160, @rocket.chat/css-supports@npm:~0.31.23-dev.170":
+"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.160":
  version: 0.31.23
  resolution: "@rocket.chat/css-supports@npm:0.31.23"
  dependencies:
@ -7324,6 +7337,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@rocket.chat/css-supports@npm:^0.31.24, @rocket.chat/css-supports@npm:~0.31.23-dev.170":
+  version: 0.31.24
+  resolution: "@rocket.chat/css-supports@npm:0.31.24"
+  dependencies:
+    "@rocket.chat/memo": ^0.31.24
+  checksum: 4efe737d588566ea7a95f1f29a33dc90987aae9e6c2f0b2b7995f9c813728dd72f62472f2a2f3e1bf0350ce3ad75807ec0c842ac6e61b6ddc8f89c69dc1086d0
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/ddp-client@workspace:^, @rocket.chat/ddp-client@workspace:ee/packages/ddp-client":
  version: 0.0.0-use.local
  resolution: "@rocket.chat/ddp-client@workspace:ee/packages/ddp-client"
@ -7840,13 +7862,20 @@ __metadata:
  languageName: node
  linkType: hard

-"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.160, @rocket.chat/memo@npm:~0.31.23-dev.170":
+"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.160":
  version: 0.31.23
  resolution: "@rocket.chat/memo@npm:0.31.23"
  checksum: 070debb940749a2e4463cf767dd65c6967cea664a5bd67c22a812d611f6c3c46d6fe4bb0bf329e43dcd927493413add37c45ae3b05ec08f0b24e9d7385caebdd
  languageName: node
  linkType: hard

+"@rocket.chat/memo@npm:^0.31.24, @rocket.chat/memo@npm:~0.31.23-dev.170":
+  version: 0.31.24
+  resolution: "@rocket.chat/memo@npm:0.31.24"
+  checksum: f63baeac39f50f67ced26c0770334b7e6fa35c81e227b813b7e49015bcd7f102aafff3b6a1fef3e2720ee483e729882dd5734ea339dcfdc30e6f193681a02487
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/memo@npm:next":
  version: 0.31.23-dev.160
  resolution: "@rocket.chat/memo@npm:0.31.23-dev.160"
@ -8661,7 +8690,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@rocket.chat/styled@npm:~0.31.23-dev.160, @rocket.chat/styled@npm:~0.31.23-dev.170":
+"@rocket.chat/styled@npm:~0.31.23-dev.160":
  version: 0.31.23
  resolution: "@rocket.chat/styled@npm:0.31.23"
  dependencies:
@ -8670,6 +8699,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@rocket.chat/styled@npm:~0.31.23-dev.170":
+  version: 0.31.24
+  resolution: "@rocket.chat/styled@npm:0.31.24"
+  dependencies:
+    "@rocket.chat/css-in-js": ^0.31.24
+  checksum: 357f05974d1e33adc9a085ecb16aeba2eeb2d68328cb8e3606e5570fb6979092648164ec3d8dce2d6a34a672afd7163963e5ee155225c7ed9b7872f100232c27
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/stylis-logical-props-middleware@npm:^0.31.23, @rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.160":
  version: 0.31.23
  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23"
@ -8681,6 +8719,17 @@ __metadata:
  languageName: node
  linkType: hard

+"@rocket.chat/stylis-logical-props-middleware@npm:^0.31.24":
+  version: 0.31.24
+  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.24"
+  dependencies:
+    "@rocket.chat/css-supports": ^0.31.24
+  peerDependencies:
+    stylis: 4.0.10
+  checksum: 11a6e1395976005e3156b9838ab1ef0d1e8d827bca8804a9befd54c32eccf62415b8940ca99999588f6001c291f560d92e134a0d4e4078fe477389b0f99bb7ff
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/tools@workspace:^, @rocket.chat/tools@workspace:packages/tools":
  version: 0.0.0-use.local
  resolution: "@rocket.chat/tools@workspace:packages/tools"
@ -8809,11 +8858,11 @@ __metadata:
  linkType: soft

 "@rocket.chat/ui-kit@npm:next":
-  version: 0.32.0-dev.331
-  resolution: "@rocket.chat/ui-kit@npm:0.32.0-dev.331"
+  version: 0.32.0-dev.333
+  resolution: "@rocket.chat/ui-kit@npm:0.32.0-dev.333"
  peerDependencies:
    "@rocket.chat/icons": "*"
-  checksum: c3bbebd6b2105bf52fa1077209dacdd067ddd0191380802b161611f1077d9ef203cd40e0c9bf3da21df37199ffc6415261bde082c495a0b1374f960e9dbb1434
+  checksum: 4693fcd692e9b7ef91f8519fb6320e61d0a65475e9e6789b9715e68f9b332c498658f75430335160142e5dd53c842b25812d263dd71eb4613bceca9be495d5d5
  languageName: node
  linkType: hard