feat(ui-kit): Add new UIKit components (#1074)

- Callout
- Checkbox
- Radio Button
- Time Picker
- Toggle Switch
- Tab Navigation

packages/ui-kit/README.md

@@ -22,6 +22,16 @@
 
 <!--install-->
 
+Firstly, install the peer dependencies (prerequisites):
+
+```sh
+npm i @rocket.chat/icons
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/icons
+```
+
 Add `@rocket.chat/ui-kit` as a dependency:
 
 ```sh

packages/ui-kit/package.json

@@ -43,6 +43,7 @@
     "@babel/preset-env": "~7.21.4",
     "@rocket.chat/eslint-config-alt": "workspace:~",
     "@rocket.chat/prettier-config": "workspace:~",
+    "@rocket.chat/icons": "workspace:~",
     "@types/jest": "~29.5.0",
     "babel-loader": "~9.1.2",
     "bump": "workspace:~",
@@ -59,5 +60,8 @@
     "typescript": "~5.0.4",
     "webpack": "~5.78.0",
     "webpack-cli": "~5.0.1"
+  },
+  "peerDependencies": {
+    "@rocket.chat/icons": "*"
   }
 }

packages/ui-kit/src/blocks/ActionableElement.ts

@@ -1,5 +1,6 @@
 import type { ButtonElement } from './elements/ButtonElement';
 import type { ChannelsSelectElement } from './elements/ChannelsSelectElement';
+import type { CheckboxElement } from './elements/CheckboxElement';
 import type { ConversationsSelectElement } from './elements/ConversationsSelectElement';
 import type { DatePickerElement } from './elements/DatePickerElement';
 import type { LinearScaleElement } from './elements/LinearScaleElement';
@@ -9,7 +10,10 @@ import type { MultiStaticSelectElement } from './elements/MultiStaticSelectEleme
 import type { MultiUsersSelectElement } from './elements/MultiUsersSelectElement';
 import type { OverflowElement } from './elements/OverflowElement';
 import type { PlainTextInputElement } from './elements/PlainTextInputElement';
+import type { RadioButtonElement } from './elements/RadioButtonElement';
 import type { StaticSelectElement } from './elements/StaticSelectElement';
+import type { TimePickerElement } from './elements/TimePickerElement';
+import type { ToggleSwitchElement } from './elements/ToggleSwitchElement';
 import type { UsersSelectElement } from './elements/UsersSelectElement';
 
 export type ActionableElement =
@@ -25,4 +29,8 @@ export type ActionableElement =
   | OverflowElement
   | PlainTextInputElement
   | StaticSelectElement
-  | UsersSelectElement;
+  | UsersSelectElement
+  | ToggleSwitchElement
+  | RadioButtonElement
+  | CheckboxElement
+  | TimePickerElement;

packages/ui-kit/src/blocks/BlockElement.ts

@@ -1,5 +1,6 @@
 import type { ButtonElement } from './elements/ButtonElement';
 import type { ChannelsSelectElement } from './elements/ChannelsSelectElement';
+import type { CheckboxElement } from './elements/CheckboxElement';
 import type { ConversationsSelectElement } from './elements/ConversationsSelectElement';
 import type { DatePickerElement } from './elements/DatePickerElement';
 import type { ImageElement } from './elements/ImageElement';
@@ -10,7 +11,10 @@ import type { MultiStaticSelectElement } from './elements/MultiStaticSelectEleme
 import type { MultiUsersSelectElement } from './elements/MultiUsersSelectElement';
 import type { OverflowElement } from './elements/OverflowElement';
 import type { PlainTextInputElement } from './elements/PlainTextInputElement';
+import type { RadioButtonElement } from './elements/RadioButtonElement';
 import type { StaticSelectElement } from './elements/StaticSelectElement';
+import type { TimePickerElement } from './elements/TimePickerElement';
+import type { ToggleSwitchElement } from './elements/ToggleSwitchElement';
 import type { UsersSelectElement } from './elements/UsersSelectElement';
 
 export type BlockElement =
@@ -27,4 +31,8 @@ export type BlockElement =
   | OverflowElement
   | PlainTextInputElement
   | StaticSelectElement
-  | UsersSelectElement;
+  | UsersSelectElement
+  | ToggleSwitchElement
+  | RadioButtonElement
+  | CheckboxElement
+  | TimePickerElement;

packages/ui-kit/src/blocks/BlockElementType.ts

@@ -23,6 +23,10 @@ export enum BlockElementType {
   MULTI_CHANNELS_SELECT = 'multi_channels_select',
   MULTI_CONVERSATIONS_SELECT = 'multi_conversations_select',
   MULTI_USERS_SELECT = 'multi_users_select',
+  TOGGLE_SWITCH = 'toggle_switch',
+  RADIO_BUTTON = 'radio_button',
+  CHECKBOX = 'checkbox',
+  TIME_PICKER = 'time_picker',
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

packages/ui-kit/src/blocks/LayoutBlock.ts

@@ -1,4 +1,5 @@
 import type { ActionsBlock } from './layout/ActionsBlock';
+import type { CalloutBlock } from './layout/CalloutBlock';
 import type { ConditionalBlock } from './layout/ConditionalBlock';
 import type { ContextBlock } from './layout/ContextBlock';
 import type { DividerBlock } from './layout/DividerBlock';
@@ -20,4 +21,5 @@ export type LayoutBlock =
   | SectionBlock
   | VideoConferenceBlock
   | PreviewBlock
+  | CalloutBlock
   | TabNavigationBlock;

packages/ui-kit/src/blocks/LayoutBlockType.ts

@@ -9,8 +9,9 @@ export enum LayoutBlockType {
   INPUT = 'input',
   CONDITIONAL = 'conditional',
   PREVIEW = 'preview',
-  TAB_NAVIGATION = 'tab_navigation',
   VIDEO_CONF = 'video_conf',
+  CALLOUT = 'callout',
+  TAB_NAVIGATION = 'tab_navigation',
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

packages/ui-kit/src/blocks/elements/CheckboxElement.ts

@@ -0,0 +1,8 @@
+import type { Actionable } from '../Actionable';
+import type { Option } from '../Option';
+
+export type CheckboxElement = Actionable<{
+  type: 'checkbox';
+  options: Option[];
+  initialOptions?: Option[];
+}>;

packages/ui-kit/src/blocks/elements/RadioButtonElement.ts

@@ -0,0 +1,8 @@
+import type { Actionable } from '../Actionable';
+import type { Option } from '../Option';
+
+export type RadioButtonElement = Actionable<{
+  type: 'radio_button';
+  options: Option[];
+  initialOption?: Option;
+}>;

packages/ui-kit/src/blocks/elements/TimePickerElement.ts

@@ -0,0 +1,8 @@
+import type { Actionable } from '../Actionable';
+import type { TextObject } from '../TextObject';
+
+export type TimePickerElement = Actionable<{
+  type: 'time_picker';
+  placeholder?: TextObject;
+  initialTime?: number;
+}>;

packages/ui-kit/src/blocks/elements/ToggleSwitchElement.ts

@@ -0,0 +1,8 @@
+import type { Actionable } from '../Actionable';
+import type { Option } from '../Option';
+
+export type ToggleSwitchElement = Actionable<{
+  type: 'toggle_switch';
+  options: Option[];
+  initialOptions?: Option[];
+}>;

packages/ui-kit/src/blocks/isActionsBlockElement.ts

@@ -12,6 +12,10 @@ export const isActionsBlockElement = (
     case BlockElementType.MULTI_STATIC_SELECT:
     case BlockElementType.OVERFLOW:
     case BlockElementType.STATIC_SELECT:
+    case BlockElementType.TOGGLE_SWITCH:
+    case BlockElementType.CHECKBOX:
+    case BlockElementType.RADIO_BUTTON:
+    case BlockElementType.TIME_PICKER:
       return true;
 
     default:

packages/ui-kit/src/blocks/layout/ActionsBlock.ts

@@ -1,6 +1,7 @@
 import type { LayoutBlockish } from '../LayoutBlockish';
 import type { ButtonElement } from '../elements/ButtonElement';
 import type { ChannelsSelectElement } from '../elements/ChannelsSelectElement';
+import type { CheckboxElement } from '../elements/CheckboxElement';
 import type { ConversationsSelectElement } from '../elements/ConversationsSelectElement';
 import type { DatePickerElement } from '../elements/DatePickerElement';
 import type { LinearScaleElement } from '../elements/LinearScaleElement';
@@ -9,7 +10,10 @@ import type { MultiConversationsSelectElement } from '../elements/MultiConversat
 import type { MultiStaticSelectElement } from '../elements/MultiStaticSelectElement';
 import type { MultiUsersSelectElement } from '../elements/MultiUsersSelectElement';
 import type { OverflowElement } from '../elements/OverflowElement';
+import type { RadioButtonElement } from '../elements/RadioButtonElement';
 import type { StaticSelectElement } from '../elements/StaticSelectElement';
+import type { TimePickerElement } from '../elements/TimePickerElement';
+import type { ToggleSwitchElement } from '../elements/ToggleSwitchElement';
 import type { UsersSelectElement } from '../elements/UsersSelectElement';
 
 export type ActionsBlock = LayoutBlockish<{
@@ -27,5 +31,9 @@ export type ActionsBlock = LayoutBlockish<{
     | OverflowElement
     | StaticSelectElement
     | UsersSelectElement
+    | ToggleSwitchElement
+    | CheckboxElement
+    | RadioButtonElement
+    | TimePickerElement
   )[];
 }>;

packages/ui-kit/src/blocks/layout/CalloutBlock.ts

@@ -0,0 +1,12 @@
+import type { Keys } from '@rocket.chat/icons';
+
+import type { LayoutBlockish } from '../LayoutBlockish';
+import type { TextObject } from '../TextObject';
+
+export type CalloutBlock = LayoutBlockish<{
+  type: 'callout';
+  title?: TextObject;
+  icon?: Keys;
+  text: TextObject;
+  variant?: 'info' | 'danger' | 'warning' | 'success';
+}>;

packages/ui-kit/src/blocks/layout/InputBlock.ts

@@ -1,5 +1,6 @@
 import type { LayoutBlockish } from '../LayoutBlockish';
 import type { ChannelsSelectElement } from '../elements/ChannelsSelectElement';
+import type { CheckboxElement } from '../elements/CheckboxElement';
 import type { ConversationsSelectElement } from '../elements/ConversationsSelectElement';
 import type { DatePickerElement } from '../elements/DatePickerElement';
 import type { LinearScaleElement } from '../elements/LinearScaleElement';
@@ -8,7 +9,10 @@ import type { MultiConversationsSelectElement } from '../elements/MultiConversat
 import type { MultiStaticSelectElement } from '../elements/MultiStaticSelectElement';
 import type { MultiUsersSelectElement } from '../elements/MultiUsersSelectElement';
 import type { PlainTextInputElement } from '../elements/PlainTextInputElement';
+import type { RadioButtonElement } from '../elements/RadioButtonElement';
 import type { StaticSelectElement } from '../elements/StaticSelectElement';
+import type { TimePickerElement } from '../elements/TimePickerElement';
+import type { ToggleSwitchElement } from '../elements/ToggleSwitchElement';
 import type { UsersSelectElement } from '../elements/UsersSelectElement';
 import type { PlainText } from '../text/PlainText';
 
@@ -26,7 +30,11 @@ export type InputBlock = LayoutBlockish<{
     | MultiUsersSelectElement
     | PlainTextInputElement
     | StaticSelectElement
-    | UsersSelectElement;
+    | UsersSelectElement
+    | CheckboxElement
+    | RadioButtonElement
+    | TimePickerElement
+    | ToggleSwitchElement;
   hint?: PlainText;
   optional?: boolean;
 }>;

packages/ui-kit/src/index.ts

@@ -22,6 +22,10 @@ export { OverflowElement } from './blocks/elements/OverflowElement';
 export { PlainTextInputElement } from './blocks/elements/PlainTextInputElement';
 export { StaticSelectElement } from './blocks/elements/StaticSelectElement';
 export { UsersSelectElement } from './blocks/elements/UsersSelectElement';
+export { ToggleSwitchElement } from './blocks/elements/ToggleSwitchElement';
+export { CheckboxElement } from './blocks/elements/CheckboxElement';
+export { RadioButtonElement } from './blocks/elements/RadioButtonElement';
+export { TimePickerElement } from './blocks/elements/TimePickerElement';
 export { BlockElement } from './blocks/BlockElement';
 
 export { ActionsBlock } from './blocks/layout/ActionsBlock';
@@ -34,6 +38,7 @@ export { InputBlock } from './blocks/layout/InputBlock';
 export { SectionBlock } from './blocks/layout/SectionBlock';
 export { VideoConferenceBlock } from './blocks/layout/VideoConferenceBlock';
 export { LayoutBlock } from './blocks/LayoutBlock';
+export { CalloutBlock } from './blocks/layout/CalloutBlock';
 export { TabNavigationBlock } from './blocks/layout/TabNavigationBlock';
 
 export { InputElementDispatchAction } from './blocks/InputElementDispatchAction';

packages/ui-kit/src/rendering/ActionOf.ts

@@ -1,6 +1,8 @@
 import type { ActionableElement } from '../blocks/ActionableElement';
+import type { Option } from '../blocks/Option';
 import type { ButtonElement } from '../blocks/elements/ButtonElement';
 import type { ChannelsSelectElement } from '../blocks/elements/ChannelsSelectElement';
+import type { CheckboxElement } from '../blocks/elements/CheckboxElement';
 import type { ConversationsSelectElement } from '../blocks/elements/ConversationsSelectElement';
 import type { DatePickerElement } from '../blocks/elements/DatePickerElement';
 import type { LinearScaleElement } from '../blocks/elements/LinearScaleElement';
@@ -10,7 +12,10 @@ import type { MultiStaticSelectElement } from '../blocks/elements/MultiStaticSel
 import type { MultiUsersSelectElement } from '../blocks/elements/MultiUsersSelectElement';
 import type { OverflowElement } from '../blocks/elements/OverflowElement';
 import type { PlainTextInputElement } from '../blocks/elements/PlainTextInputElement';
+import type { RadioButtonElement } from '../blocks/elements/RadioButtonElement';
 import type { StaticSelectElement } from '../blocks/elements/StaticSelectElement';
+import type { TimePickerElement } from '../blocks/elements/TimePickerElement';
+import type { ToggleSwitchElement } from '../blocks/elements/ToggleSwitchElement';
 import type { UsersSelectElement } from '../blocks/elements/UsersSelectElement';
 
 export type ActionOf<TElement extends ActionableElement> =
@@ -40,4 +45,12 @@ export type ActionOf<TElement extends ActionableElement> =
     ? StaticSelectElement['initialValue']
     : TElement extends UsersSelectElement
     ? unknown
+    : TElement extends ToggleSwitchElement
+    ? Option['value'][]
+    : TElement extends RadioButtonElement
+    ? Option['value'] | undefined
+    : TElement extends CheckboxElement
+    ? Option['value'][] | undefined
+    : TElement extends TimePickerElement
+    ? TimePickerElement['initialTime']
     : never;

packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.ts

@@ -1,4 +1,5 @@
 import type { ActionsBlock } from '../../blocks/layout/ActionsBlock';
+import type { CalloutBlock } from '../../blocks/layout/CalloutBlock';
 import type { ContextBlock } from '../../blocks/layout/ContextBlock';
 import type { DividerBlock } from '../../blocks/layout/DividerBlock';
 import type { ImageBlock } from '../../blocks/layout/ImageBlock';
@@ -10,14 +11,15 @@ type AttachmentSurfaceLayoutBlock =
   | ContextBlock
   | DividerBlock
   | ImageBlock
-  | SectionBlock;
+  | SectionBlock
+  | CalloutBlock;
 
 export abstract class UiKitParserAttachment<T> extends SurfaceRenderer<
   T,
   AttachmentSurfaceLayoutBlock
 > {
   public constructor() {
-    super(['actions', 'context', 'divider', 'image', 'section']);
+    super(['actions', 'context', 'divider', 'image', 'section', 'callout']);
   }
 }
 

packages/ui-kit/src/rendering/surfaces/UiKitParserBanner.ts

@@ -1,4 +1,5 @@
 import type { ActionsBlock } from '../../blocks/layout/ActionsBlock';
+import type { CalloutBlock } from '../../blocks/layout/CalloutBlock';
 import type { ContextBlock } from '../../blocks/layout/ContextBlock';
 import type { DividerBlock } from '../../blocks/layout/DividerBlock';
 import type { ImageBlock } from '../../blocks/layout/ImageBlock';
@@ -12,7 +13,8 @@ type BannerSurfaceLayoutBlock =
   | DividerBlock
   | ImageBlock
   | InputBlock
-  | SectionBlock;
+  | SectionBlock
+  | CalloutBlock;
 
 export abstract class UiKitParserBanner<T> extends SurfaceRenderer<
   T,

packages/ui-kit/src/rendering/surfaces/UiKitParserMessage.ts

@@ -1,4 +1,5 @@
 import type { ActionsBlock } from '../../blocks/layout/ActionsBlock';
+import type { CalloutBlock } from '../../blocks/layout/CalloutBlock';
 import type { ContextBlock } from '../../blocks/layout/ContextBlock';
 import type { DividerBlock } from '../../blocks/layout/DividerBlock';
 import type { ImageBlock } from '../../blocks/layout/ImageBlock';
@@ -14,7 +15,8 @@ type MessageSurfaceLayoutBlock =
   | ImageBlock
   | SectionBlock
   | VideoConferenceBlock
-  | PreviewBlock;
+  | PreviewBlock
+  | CalloutBlock;
 
 export abstract class UiKitParserMessage<OutputElement> extends SurfaceRenderer<
   OutputElement,
@@ -29,6 +31,7 @@ export abstract class UiKitParserMessage<OutputElement> extends SurfaceRenderer<
       'section',
       'preview',
       'video_conf',
+      'callout',
     ]);
   }
 }

packages/ui-kit/src/rendering/surfaces/UiKitParserModal.ts

@@ -1,4 +1,5 @@
 import type { ActionsBlock } from '../../blocks/layout/ActionsBlock';
+import type { CalloutBlock } from '../../blocks/layout/CalloutBlock';
 import type { ContextBlock } from '../../blocks/layout/ContextBlock';
 import type { DividerBlock } from '../../blocks/layout/DividerBlock';
 import type { ImageBlock } from '../../blocks/layout/ImageBlock';
@@ -12,14 +13,23 @@ type ModalSurfaceLayoutBlock =
   | DividerBlock
   | ImageBlock
   | InputBlock
-  | SectionBlock;
+  | SectionBlock
+  | CalloutBlock;
 
 export abstract class UiKitParserModal<OutputElement> extends SurfaceRenderer<
   OutputElement,
   ModalSurfaceLayoutBlock
 > {
   public constructor() {
-    super(['actions', 'context', 'divider', 'image', 'input', 'section']);
+    super([
+      'actions',
+      'context',
+      'divider',
+      'image',
+      'input',
+      'section',
+      'callout',
+    ]);
   }
 }