feat(fuselage): Added Date Time picker element

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

@@ -0,0 +1,39 @@
+import { InputBox } from '@rocket.chat/fuselage';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { useUiKitState } from '../hooks/useUiKitState';
+import type { BlockProps } from '../utils/BlockProps';
+import { fromTextObjectToString } from '../utils/fromTextObjectToString';
+
+type DateTimePickerElementProps = BlockProps<UiKit.DateTimePickerElement>;
+
+const DateTimePickerElement = ({
+  block,
+  context,
+  surfaceRenderer,
+}: DateTimePickerElementProps): ReactElement => {
+  const [{ loading, value, error }, action] = useUiKitState(block, context);
+  const { actionId, placeholder } = block;
+
+  return (
+    <InputBox
+      type='datetime-local'
+      error={error}
+      value={value as string}
+      disabled={loading}
+      id={actionId}
+      name={actionId}
+      rows={6}
+      placeholder={
+        placeholder
+          ? fromTextObjectToString(surfaceRenderer, placeholder, 0)
+          : undefined
+      }
+      onInput={action}
+    />
+  );
+};
+
+export default DateTimePickerElement;

packages/fuselage-ui-kit/src/stories/Banner.stories.tsx

@@ -80,6 +80,10 @@ export const SectionWithDatePickerAccessory = createStory(
   payloads.sectionWithDatePickerAccessory
 );
 
+export const SectionWithDateTimePickerAccessory = createStory(
+  payloads.sectionWithDateTimePickerAccessory
+);
+
 export const ImageWithTitle = createStory(payloads.imageWithTitle);
 
 export const ImageWithoutTitle = createStory(payloads.imageWithoutTitle);
@@ -106,6 +110,10 @@ export const ActionsWithDatePicker = createStory(
   payloads.actionsWithDatePicker
 );
 
+export const ActionsWithDateTimePicker = createStory(
+  payloads.actionsWithDateTimePicker
+);
+
 export const ContextWithPlainText = createStory(payloads.contextWithPlainText);
 
 export const ContextWithMrkdwn = createStory(payloads.contextWithMrkdwn);
@@ -146,6 +154,13 @@ export const InputWithDatePicker = createStory(payloads.inputWithDatePicker, {
   'input-0': 'Error',
 });
 
+export const InputWithDateTimePicker = createStory(
+  payloads.inputWithDateTimePicker,
+  {
+    'input-0': 'Error',
+  }
+);
+
 export const InputWithLinearScale = createStory(payloads.inputWithLinearScale, {
   'input-0': 'Error',
 });

packages/fuselage-ui-kit/src/stories/Message.stories.tsx

@@ -104,6 +104,10 @@ export const SectionWithDatePickerAccessory = createStory(
   payloads.sectionWithDatePickerAccessory
 );
 
+export const SectionWithDateTimePickerAccessory = createStory(
+  payloads.sectionWithDateTimePickerAccessory
+);
+
 export const ImageWithTitle = createStory(payloads.imageWithTitle);
 
 export const ImageWithoutTitle = createStory(payloads.imageWithoutTitle);
@@ -130,6 +134,10 @@ export const ActionsWithDatePicker = createStory(
   payloads.actionsWithDatePicker
 );
 
+export const ActionsWithDateTimePicker = createStory(
+  payloads.actionsWithDateTimePicker
+);
+
 export const ContextWithPlainText = createStory(payloads.contextWithPlainText);
 
 export const ContextWithMrkdwn = createStory(payloads.contextWithMrkdwn);

packages/fuselage-ui-kit/src/stories/Modal.stories.tsx

@@ -121,6 +121,10 @@ export const SectionWithDatePickerAccessory = createStory(
   payloads.sectionWithDatePickerAccessory
 );
 
+export const SectionWithDateTimePickerAccessory = createStory(
+  payloads.sectionWithDateTimePickerAccessory
+);
+
 export const ImageWithTitle = createStory(payloads.imageWithTitle);
 
 export const ImageWithoutTitle = createStory(payloads.imageWithoutTitle);
@@ -147,6 +151,10 @@ export const ActionsWithDatePicker = createStory(
   payloads.actionsWithDatePicker
 );
 
+export const ActionsWithDateTimePicker = createStory(
+  payloads.actionsWithDateTimePicker
+);
+
 export const ContextWithPlainText = createStory(payloads.contextWithPlainText);
 
 export const ContextWithMrkdwn = createStory(payloads.contextWithMrkdwn);
@@ -187,6 +195,13 @@ export const InputWithDatePicker = createStory(payloads.inputWithDatePicker, {
   'input-0': 'Error',
 });
 
+export const InputWithDateTimePicker = createStory(
+  payloads.inputWithDateTimePicker,
+  {
+    'input-0': 'Error',
+  }
+);
+
 export const InputWithLinearScale = createStory(payloads.inputWithLinearScale, {
   'input-0': 'Error',
 });

packages/fuselage-ui-kit/src/stories/payloads/actions.ts

@@ -217,3 +217,35 @@ export const actionsWithDatePicker: readonly UiKit.LayoutBlock[] = [
     ],
   },
 ] as const;
+
+export const actionsWithDateTimePicker: readonly UiKit.LayoutBlock[] = [
+  {
+    type: 'actions',
+    elements: [
+      {
+        appId: 'dummy-app-id',
+        blockId: 'dummy-block-id',
+        actionId: 'dummy-action-id',
+        type: 'datetimepicker',
+        initialDateTime: '2022-07-22T00:00',
+        placeholder: {
+          type: 'plain_text',
+          text: 'Select date-time',
+          emoji: true,
+        },
+      },
+      {
+        appId: 'dummy-app-id',
+        blockId: 'dummy-block-id',
+        actionId: 'dummy-action-id',
+        type: 'datetimepicker',
+        initialDateTime: '2022-07-22T00:00',
+        placeholder: {
+          type: 'plain_text',
+          text: 'Select date-time',
+          emoji: true,
+        },
+      },
+    ],
+  },
+] as const;

packages/fuselage-ui-kit/src/stories/payloads/input.ts

@@ -128,6 +128,29 @@ export const inputWithDatePicker: readonly UiKit.LayoutBlock[] = [
   },
 ] as const;
 
+export const inputWithDateTimePicker: readonly UiKit.LayoutBlock[] = [
+  {
+    type: 'input',
+    element: {
+      appId: 'dummy-app-id',
+      blockId: 'dummy-block-id',
+      type: 'datetimepicker',
+      initialDateTime: '2022-07-22T00:00',
+      placeholder: {
+        type: 'plain_text',
+        text: 'Select date-time',
+        emoji: true,
+      },
+      actionId: 'input-0',
+    },
+    label: {
+      type: 'plain_text',
+      text: 'Label',
+      emoji: true,
+    },
+  },
+] as const;
+
 export const inputWithLinearScale: readonly UiKit.LayoutBlock[] = [
   {
     type: 'input',

packages/fuselage-ui-kit/src/stories/payloads/section.ts

@@ -171,3 +171,26 @@ export const sectionWithDatePickerAccessory: readonly UiKit.LayoutBlock[] = [
     },
   },
 ] as const;
+
+export const sectionWithDateTimePickerAccessory: readonly UiKit.LayoutBlock[] =
+  [
+    {
+      type: 'section',
+      text: {
+        type: 'mrkdwn',
+        text: 'Pick date and time for the deadline.',
+      },
+      accessory: {
+        appId: 'dummy-app-id',
+        blockId: 'dummy-block-id',
+        actionId: 'dummy-action-id',
+        type: 'datetimepicker',
+        initialDateTime: '2022-07-22T00:00',
+        placeholder: {
+          type: 'plain_text',
+          text: 'Select date-time',
+          emoji: true,
+        },
+      },
+    },
+  ] as const;

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

@@ -11,6 +11,7 @@ import PreviewBlock from '../blocks/PreviewBlock';
 import SectionBlock from '../blocks/SectionBlock';
 import ButtonElement from '../elements/ButtonElement';
 import DatePickerElement from '../elements/DatePickerElement';
+import DateTimePickerElement from '../elements/DateTimePickerElement';
 import ImageElement from '../elements/ImageElement';
 import LinearScaleElement from '../elements/LinearScaleElement';
 import MultiStaticSelectElement from '../elements/MultiStaticSelectElement';
@@ -242,6 +243,26 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
     );
   }
 
+  datetimepicker(
+    block: UiKit.DateTimePickerElement,
+    context: UiKit.BlockContext,
+    index: number
+  ): ReactElement | null {
+    if (context === UiKit.BlockContext.BLOCK) {
+      return null;
+    }
+
+    return (
+      <DateTimePickerElement
+        key={block.actionId || index}
+        block={block}
+        context={context}
+        index={index}
+        surfaceRenderer={this}
+      />
+    );
+  }
+
   static_select(
     block: UiKit.StaticSelectElement,
     context: UiKit.BlockContext,

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

@@ -2,6 +2,7 @@ import type { ButtonElement } from './elements/ButtonElement';
 import type { ChannelsSelectElement } from './elements/ChannelsSelectElement';
 import type { ConversationsSelectElement } from './elements/ConversationsSelectElement';
 import type { DatePickerElement } from './elements/DatePickerElement';
+import type { DateTimePickerElement } from './elements/DateTimePickerElement';
 import type { LinearScaleElement } from './elements/LinearScaleElement';
 import type { MultiChannelsSelectElement } from './elements/MultiChannelsSelectElement';
 import type { MultiConversationsSelectElement } from './elements/MultiConversationsSelectElement';
@@ -17,6 +18,7 @@ export type ActionableElement =
   | ChannelsSelectElement
   | ConversationsSelectElement
   | DatePickerElement
+  | DateTimePickerElement
   | LinearScaleElement
   | MultiChannelsSelectElement
   | MultiConversationsSelectElement

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

@@ -2,6 +2,7 @@ import type { ButtonElement } from './elements/ButtonElement';
 import type { ChannelsSelectElement } from './elements/ChannelsSelectElement';
 import type { ConversationsSelectElement } from './elements/ConversationsSelectElement';
 import type { DatePickerElement } from './elements/DatePickerElement';
+import type { DateTimePickerElement } from './elements/DateTimePickerElement';
 import type { ImageElement } from './elements/ImageElement';
 import type { LinearScaleElement } from './elements/LinearScaleElement';
 import type { MultiChannelsSelectElement } from './elements/MultiChannelsSelectElement';
@@ -18,6 +19,7 @@ export type BlockElement =
   | ChannelsSelectElement
   | ConversationsSelectElement
   | DatePickerElement
+  | DateTimePickerElement
   | ImageElement
   | LinearScaleElement
   | MultiChannelsSelectElement

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

@@ -19,6 +19,7 @@ export enum BlockElementType {
   CHANNELS_SELECT = 'channels_select',
   USERS_SELECT = 'users_select',
   DATEPICKER = 'datepicker',
+  DATETIMEPICKER = 'datetimepicker',
   LINEAR_SCALE = 'linear_scale',
   MULTI_CHANNELS_SELECT = 'multi_channels_select',
   MULTI_CONVERSATIONS_SELECT = 'multi_conversations_select',

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

@@ -18,5 +18,6 @@ export enum ElementType {
   STATIC_SELECT = 'static_select',
   MULTI_STATIC_SELECT = 'multi_static_select',
   DATEPICKER = 'datepicker',
+  DATETIMEPICKER = 'datetimepicker',
   LINEAR_SCALE = 'linear_scale',
 }

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

@@ -1,8 +1,10 @@
 import type { SelectElement } from './SelectElement';
 import type { DatePickerElement } from './elements/DatePickerElement';
+import type { DateTimePickerElement } from './elements/DateTimePickerElement';
 import type { PlainTextInputElement } from './elements/PlainTextInputElement';
 
 export type InputElement =
   | DatePickerElement
+  | DateTimePickerElement
   | SelectElement
   | PlainTextInputElement;

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

@@ -6,6 +6,7 @@ import type { Option } from './Option';
 import type { TextObject } from './TextObject';
 import type { ButtonElement } from './elements/ButtonElement';
 import type { DatePickerElement } from './elements/DatePickerElement';
+import type { DateTimePickerElement } from './elements/DateTimePickerElement';
 import type { ImageElement } from './elements/ImageElement';
 import type { LinearScaleElement } from './elements/LinearScaleElement';
 import type { MultiStaticSelectElement } from './elements/MultiStaticSelectElement';
@@ -35,6 +36,8 @@ export type IMultiStaticSelectElement = InterfaceOf<MultiStaticSelectElement>;
 /** @deprecated */
 export type IDatePickerElement = InterfaceOf<DatePickerElement>;
 /** @deprecated */
+export type IDateTimePickerElement = InterfaceOf<DateTimePickerElement>;
+/** @deprecated */
 export type IButtonElement = InterfaceOf<ButtonElement>;
 /** @deprecated */
 export type IOverflowElement = InterfaceOf<OverflowElement>;

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

@@ -0,0 +1,8 @@
+import type { Actionable } from '../Actionable';
+import type { TextObject } from '../TextObject';
+
+export type DateTimePickerElement = Actionable<{
+  type: 'datetimepicker';
+  placeholder?: TextObject;
+  initialDateTime?: string;
+}>;

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

@@ -8,6 +8,7 @@ export const isActionsBlockElement = (
   switch (block.type as ActionsBlock['elements'][number]['type']) {
     case BlockElementType.BUTTON:
     case BlockElementType.DATEPICKER:
+    case BlockElementType.DATETIMEPICKER:
     case BlockElementType.LINEAR_SCALE:
     case BlockElementType.MULTI_STATIC_SELECT:
     case BlockElementType.OVERFLOW:

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

@@ -9,6 +9,7 @@ export const isInputBlockElement = (
     case BlockElementType.CHANNELS_SELECT:
     case BlockElementType.CONVERSATIONS_SELECT:
     case BlockElementType.DATEPICKER:
+    case BlockElementType.DATETIMEPICKER:
     case BlockElementType.LINEAR_SCALE:
     case BlockElementType.MULTI_STATIC_SELECT:
     case BlockElementType.PLAIN_TEXT_INPUT:

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

@@ -8,6 +8,7 @@ export const isSectionBlockAccessoryElement = (
   switch (block.type as Exclude<SectionBlock['accessory'], undefined>['type']) {
     case BlockElementType.BUTTON:
     case BlockElementType.DATEPICKER:
+    case BlockElementType.DATETIMEPICKER:
     case BlockElementType.IMAGE:
     case BlockElementType.MULTI_STATIC_SELECT:
     case BlockElementType.OVERFLOW:

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

@@ -3,6 +3,7 @@ import type { ButtonElement } from '../elements/ButtonElement';
 import type { ChannelsSelectElement } from '../elements/ChannelsSelectElement';
 import type { ConversationsSelectElement } from '../elements/ConversationsSelectElement';
 import type { DatePickerElement } from '../elements/DatePickerElement';
+import type { DateTimePickerElement } from '../elements/DateTimePickerElement';
 import type { LinearScaleElement } from '../elements/LinearScaleElement';
 import type { MultiChannelsSelectElement } from '../elements/MultiChannelsSelectElement';
 import type { MultiConversationsSelectElement } from '../elements/MultiConversationsSelectElement';
@@ -19,6 +20,7 @@ export type ActionsBlock = LayoutBlockish<{
     | ChannelsSelectElement
     | ConversationsSelectElement
     | DatePickerElement
+    | DateTimePickerElement
     | LinearScaleElement
     | MultiChannelsSelectElement
     | MultiConversationsSelectElement