Add DateTimePicker component

Author: GuillaumeRx

packages/examples/packages/interactive-ui/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Et0r8P+ORsedVAqQ9iF02gHUBC0zZjWg/xptu4v/DlU=",
+    "shasum": "r1H34qFTVIm2D+PzqxIk+VTnYto8v9QNuEFtCZ4qxQU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx

@@ -16,6 +16,7 @@ import {
   Checkbox,
   Container,
   Footer,
+  DateTimePicker,
 } from '@metamask/snaps-sdk/jsx';
 
 /**
@@ -102,6 +103,9 @@ export const InteractiveForm: SnapComponent<{ disabled?: boolean }> = ({
               </SelectorOption>
             </Selector>
           </Field>
+          <Field label="Example DateTimePicker">
+            <DateTimePicker name="example-datetime" />
+          </Field>
         </Form>
       </Box>
       <Footer>

packages/snaps-controllers/src/interface/utils.test.tsx

@@ -18,6 +18,7 @@ import {
   AssetSelector,
   AddressInput,
   AccountSelector,
+  DateTimePicker,
 } from '@metamask/snaps-sdk/jsx';
 import type { CaipAccountId } from '@metamask/utils';
 import { parseCaipAccountId } from '@metamask/utils';
@@ -352,6 +353,66 @@ describe('constructState', () => {
     });
   });
 
+  it('sets default value for root level DateTimePicker', () => {
+    const element = (
+      <Box>
+        <DateTimePicker name="foo" />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      foo: null,
+    });
+  });
+
+  it('supports root level DateTimePicker', () => {
+    const element = (
+      <Box>
+        <DateTimePicker name="foo" value="2022-01-01T00:00:00Z" />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      foo: '2022-01-01T00:00:00Z',
+    });
+  });
+
+  it('sets default value for DateTimePicker in forms', () => {
+    const element = (
+      <Box>
+        <Form name="form">
+          <Field label="foo">
+            <DateTimePicker name="foo" />
+          </Field>
+        </Form>
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      form: { foo: null },
+    });
+  });
+
+  it('supports DateTimePicker in forms', () => {
+    const element = (
+      <Box>
+        <Form name="form">
+          <Field label="foo">
+            <DateTimePicker name="foo" value="2022-01-01T00:00:00Z" />
+          </Field>
+        </Form>
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      form: { foo: '2022-01-01T00:00:00Z' },
+    });
+  });
+
   it('sets default value for root level dropdown', () => {
     const element = (
       <Box>

packages/snaps-controllers/src/interface/utils.ts

@@ -23,6 +23,7 @@ import type {
   AssetSelectorElement,
   AddressInputElement,
   AccountSelectorElement,
+  DateTimePickerElement,
 } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
@@ -57,6 +58,7 @@ const STATEFUL_COMPONENT_TYPES = [
   'AssetSelector',
   'AddressInput',
   'AccountSelector',
+  'DateTimePicker',
 ] as const;
 
 /**
@@ -342,7 +344,8 @@ function constructComponentSpecificDefaultState(
     | SelectorElement
     | AssetSelectorElement
     | AddressInputElement
-    | AccountSelectorElement,
+    | AccountSelectorElement
+    | DateTimePickerElement,
   elementDataGetters: ElementDataGetters,
 ) {
   switch (element.type) {
@@ -459,7 +462,8 @@ function getComponentStateValue(
     | SelectorElement
     | AssetSelectorElement
     | AddressInputElement
-    | AccountSelectorElement,
+    | AccountSelectorElement
+    | DateTimePickerElement,
   elementDataGetters: ElementDataGetters,
 ) {
   switch (element.type) {
@@ -510,7 +514,8 @@ function constructInputState(
     | SelectorElement
     | AssetSelectorElement
     | AddressInputElement
-    | AccountSelectorElement,
+    | AccountSelectorElement
+    | DateTimePickerElement,
   elementDataGetters: ElementDataGetters,
   form?: string,
 ) {

packages/snaps-sdk/src/jsx/components/form/DateTimePicker.test.tsx

@@ -0,0 +1,66 @@
+import { DateTimePicker } from './DateTimePicker';
+
+describe('DateTimePicker', () => {
+  it('renders a date picker', () => {
+    const element = <DateTimePicker name="test" type="date" />;
+
+    expect(element).toStrictEqual({
+      type: 'DateTimePicker',
+      props: {
+        name: 'test',
+        type: 'date',
+      },
+      key: null,
+    });
+  });
+
+  it('renders a time picker', () => {
+    const element = <DateTimePicker name="test" type="time" />;
+
+    expect(element).toStrictEqual({
+      type: 'DateTimePicker',
+      props: {
+        name: 'test',
+        type: 'time',
+      },
+      key: null,
+    });
+  });
+
+  it('renders a date and time picker', () => {
+    const element = <DateTimePicker name="test" type="datetime" />;
+
+    expect(element).toStrictEqual({
+      type: 'DateTimePicker',
+      props: {
+        name: 'test',
+        type: 'datetime',
+      },
+      key: null,
+    });
+  });
+
+  it('renders a date and time picker with optional props', () => {
+    const element = (
+      <DateTimePicker
+        name="test"
+        type="datetime"
+        placeholder="Select date and time"
+        disabled={true}
+        value="2024-01-01T12:00"
+      />
+    );
+
+    expect(element).toStrictEqual({
+      type: 'DateTimePicker',
+      props: {
+        name: 'test',
+        type: 'datetime',
+        placeholder: 'Select date and time',
+        disabled: true,
+        value: '2024-01-01T12:00',
+      },
+      key: null,
+    });
+  });
+});

packages/snaps-sdk/src/jsx/components/form/DateTimePicker.ts

@@ -0,0 +1,46 @@
+import { createSnapComponent } from '../../component';
+
+/**
+ * The props of the {@link DateTimePicker} component.
+ *
+ * @property name - The name of the date/time picker field. This is used to identify the
+ * date/time picker field in the form data.
+ * @property value - The value of the date/time picker field.
+ * @property type - The type of the date/time picker field. Can be 'date', 'time', or 'datetime'.
+ * Defaults to 'datetime'.
+ * @property placeholder - The placeholder text of the date/time picker field.
+ * @property disabled - Whether the date/time picker field is disabled.
+ */
+export type DateTimePickerProps = {
+  name: string;
+  value?: string | undefined;
+  type?: 'date' | 'time' | 'datetime' | undefined;
+  placeholder?: string | undefined;
+  disabled?: boolean | undefined;
+};
+
+const TYPE = 'DateTimePicker';
+
+/**
+ * A date/time picker component, which is used to create a date/time picker field.
+ *
+ * @param props - The props of the component.
+ * @param props.name - The name of the date/time picker field. This is used to identify the
+ * date/time picker field in the form data.
+ * @param props.value - The value of the date/time picker field.
+ * @param props.type - The type of the date/time picker field. Can be 'date', 'time', or 'datetime'.
+ * Defaults to 'datetime'.
+ * @param props.placeholder - The placeholder text of the date/time picker field.
+ * @param props.disabled - Whether the date/time picker field is disabled.
+ */
+export const DateTimePicker = createSnapComponent<
+  DateTimePickerProps,
+  typeof TYPE
+>(TYPE);
+
+/**
+ * A DateTimePicker element.
+ *
+ * @see DateTimePicker
+ */
+export type DateTimePickerElement = ReturnType<typeof DateTimePicker>;

packages/snaps-sdk/src/jsx/components/form/Field.ts

@@ -2,6 +2,7 @@ import type { AccountSelectorElement } from './AccountSelector';
 import type { AddressInputElement } from './AddressInput';
 import type { AssetSelectorElement } from './AssetSelector';
 import type { CheckboxElement } from './Checkbox';
+import type { DateTimePickerElement } from './DateTimePicker';
 import type { DropdownElement } from './Dropdown';
 import type { FileInputElement } from './FileInput';
 import type { InputElement } from './Input';
@@ -25,6 +26,7 @@ export type FieldProps = {
     | [GenericSnapChildren, InputElement]
     | [GenericSnapChildren, InputElement, GenericSnapChildren]
     | DropdownElement
+    | DateTimePickerElement
     | RadioGroupElement
     | FileInputElement
     | InputElement

packages/snaps-sdk/src/jsx/components/form/index.ts

@@ -3,6 +3,7 @@ import type { AddressInputElement } from './AddressInput';
 import type { AssetSelectorElement } from './AssetSelector';
 import type { ButtonElement } from './Button';
 import type { CheckboxElement } from './Checkbox';
+import type { DateTimePickerElement } from './DateTimePicker';
 import type { DropdownElement } from './Dropdown';
 import type { FieldElement } from './Field';
 import type { FileInputElement } from './FileInput';
@@ -19,6 +20,7 @@ export * from './AddressInput';
 export * from './AssetSelector';
 export * from './Button';
 export * from './Checkbox';
+export * from './DateTimePicker';
 export * from './Dropdown';
 export * from './Option';
 export * from './Radio';
@@ -36,6 +38,7 @@ export type StandardFormElement =
   | AssetSelectorElement
   | ButtonElement
   | CheckboxElement
+  | DateTimePickerElement
   | FormElement
   | FieldElement
   | FileInputElement

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -38,6 +38,7 @@ import {
   AssetSelector,
   AddressInput,
   AccountSelector,
+  DateTimePicker,
 } from './components';
 import {
   AddressStruct,
@@ -80,6 +81,7 @@ import {
   AssetSelectorStruct,
   AddressInputStruct,
   AccountSelectorStruct,
+  DateTimePickerStruct,
 } from './validation';
 
 describe('KeyStruct', () => {
@@ -381,6 +383,9 @@ describe('FieldStruct', () => {
     <Field label="foo">
       <AccountSelector name="account" />
     </Field>,
+    <Field label="foo">
+      <DateTimePicker name="foo" />
+    </Field>,
   ])('validates a field element', (value) => {
     expect(is(value, FieldStruct)).toBe(true);
   });
@@ -1008,6 +1013,54 @@ describe('CopyableStruct', () => {
   });
 });
 
+describe('DateTimePickerStruct', () => {
+  it.each([
+    <DateTimePicker name="foo" />,
+    <DateTimePicker name="foo" type="datetime" />,
+    <DateTimePicker name="foo" type="date" />,
+    <DateTimePicker name="foo" type="time" />,
+    <DateTimePicker name="foo" value={new Date().toISOString()} />,
+    <DateTimePicker name="foo" disabled={true} />,
+    <DateTimePicker
+      name="foo"
+      value={new Date().toISOString()}
+      placeholder="foobar"
+      type="datetime"
+      disabled={true}
+    />,
+  ])('validates a date time picker element', (value) => {
+    expect(is(value, DateTimePickerStruct)).toBe(true);
+  });
+
+  it.each([
+    'foo',
+    42,
+    null,
+    undefined,
+    {},
+    [],
+    // @ts-expect-error - Invalid props.
+    <DateTimePicker />,
+    // @ts-expect-error - Invalid props.
+    <DateTimePicker name={42} />,
+    // @ts-expect-error - Invalid props.
+    <DateTimePicker name="foo" type="foo" />,
+    // @ts-expect-error - Invalid props.
+    <DateTimePicker name="foo" value={42} />,
+    // @ts-expect-error - Invalid props.
+    <DateTimePicker name="foo" placeholder={32} />,
+    <Text>foo</Text>,
+    <Box>
+      <Text>foo</Text>
+    </Box>,
+    <Row label="label">
+      <Image src="src" alt="alt" />
+    </Row>,
+  ])('does not validate "%p"', (value) => {
+    expect(is(value, DateTimePickerStruct)).toBe(false);
+  });
+});
+
 describe('DividerStruct', () => {
   it.each([<Divider />])('validates a divider element', (value) => {
     expect(is(value, DividerStruct)).toBe(true);