feat: add date picker string type (#205)

Co-authored-by: denis-vlasov <[email protected]>

docs/input-props-map.md

@@ -1,11 +1,12 @@
 ## Supported input props map
 
-| Config type | Config name | Storybook                                                                                        | Type                                                                                 | Original component                                                             |
-| :---------- | :---------- | :----------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------- | :----------------------------------------------------------------------------- |
-| `array`     | `select`    | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/array-select--select)         | [MultiSelectProps](../src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx#L10) | https://github.com/gravity-ui/uikit/tree/main/src/components/Select            |
-| `boolean`   | `base`      | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/boolean-base--base)             | [CheckboxProps](../src/lib/kit/components/Inputs/Checkbox/Checkbox.tsx#L12)          | https://github.com/gravity-ui/uikit/tree/main/src/components/Checkbox          |
-| `number`    | `base`      | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/number-base--base)              | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9)                       | https://github.com/gravity-ui/uikit/tree/main/src/components/Text              |
-| `string`    | `base`      | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-base--base)              | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9)                       | https://github.com/gravity-ui/uikit/tree/main/src/components/Text              |
-| `string`    | `password`  | [Password](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-password--password)  | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9)                       | https://github.com/gravity-ui/uikit/tree/main/src/components/Text              |
-| `string`    | `select`    | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-select--select)        | [SelectProps](../src/lib/kit/components/Inputs/Select/Select.tsx#L12)                | https://github.com/gravity-ui/uikit/tree/main/src/components/Select            |
-| `string`    | `textarea`  | [TextArea](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-textarea--text-area) | [TextAreaProps](../src/lib/kit/components/Inputs/TextArea/TextArea.tsx#L7)           | https://github.com/gravity-ui/uikit/tree/main/src/components/controls/TextArea |
+| Config type | Config name  | Storybook                                                                                            | Type                                                                                                      | Original component                                                                |
+| :---------- | :----------- | :--------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- |
+| `array`     | `select`     | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/array-select--select)             | [MultiSelectProps](../src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx#L10)                      | https://github.com/gravity-ui/uikit/tree/main/src/components/Select               |
+| `boolean`   | `base`       | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/boolean-base--base)                 | [CheckboxProps](../src/lib/kit/components/Inputs/Checkbox/Checkbox.tsx#L12)                               | https://github.com/gravity-ui/uikit/tree/main/src/components/Checkbox             |
+| `number`    | `base`       | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/number-base--base)                  | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9)                                            | https://github.com/gravity-ui/uikit/tree/main/src/components/Text                 |
+| `string`    | `base`       | [Base](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-base--base)                  | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9)                                            | https://github.com/gravity-ui/uikit/tree/main/src/components/Text                 |
+| `string`    | `password`   | [Password](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-password--password)      | [TextProps](../src/lib/kit/components/Inputs/Text/Text.tsx#L9)                                            | https://github.com/gravity-ui/uikit/tree/main/src/components/Text                 |
+| `string`    | `select`     | [Select](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-select--select)            | [SelectProps](../src/lib/kit/components/Inputs/Select/Select.tsx#L12)                                     | https://github.com/gravity-ui/uikit/tree/main/src/components/Select               |
+| `string`    | `textarea`   | [TextArea](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-textarea--text-area)     | [TextAreaProps](../src/lib/kit/components/Inputs/TextArea/TextArea.tsx#L7)                                | https://github.com/gravity-ui/uikit/tree/main/src/components/controls/TextArea    |
+| `string`    | `date_input` | [DatePicker](https://preview.gravity-ui.com/dynamic-forms/?path=/story/string-dateinput--date-input) | [DatePickerProps](https://preview.gravity-ui.com/date-components/?path=/docs/components-datepicker--docs) | https://github.com/gravity-ui/date-components/tree/main/src/components/DatePicker |

docs/spec.md

@@ -131,6 +131,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.selectParams              | `object`                 |          | [Parameters](#selectparams) additional options for the selector                                                                                                                         |
 | viewSpec.generateRandomValueButton | `boolean`                |          | Shows a button that allows you to generate a random value depending on the passed [function generateRandomValue](./lib.md#dynamicfield)                                                 |
 | viewSpec.inputProps                | `object`                 |          | [InputProps](./input-props-map.md) Additional properties for internal input components                                                                                                  |
+| viewSpec.dateInput                 | `object`                 |          | [Parameters](#dateinput) additional options for the date picker                                                                                                                         |
 
 #### SizeParams
 
@@ -162,6 +163,15 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | readAsMethod | `'readAsArrayBuffer'` `'readAsBinaryString'` `'readAsDataURL'` `'readAsText'` |          | File reading method                                                                    |
 | ignoreText   | `boolean`                                                                     |          | For `true`, will show the `File uploaded` stub instead of the field value              |
 
+#### DateInput
+
+| Property     | Type                                                 | Required | Description                                                                                                     |
+| :----------- | :--------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------- |
+| outputFormat | `string` \| string \| date \| timestamp \| date_time |          | Format returning string (for backend and logic). [Available formats](https://day.js.org/docs/en/display/format) |
+| printFormat  | `string`                                             |          | Format print string (for view in read form). [Available formats](https://day.js.org/docs/en/display/format)     |
+
+You can provide all props of [original component](https://preview.gravity-ui.com/date-components/?path=/docs/components-datepicker--docs) through [viewSpec.inputProps](./input-props-map.md).
+
 #### TextContentParams
 
 | Property   | Type                                                                                                                                                                                                                                                                                              | Required | Description                                                         |

package.json

@@ -45,6 +45,8 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/components": "^3.0.0",
+    "@gravity-ui/date-components": "^2.5.0",
+    "@gravity-ui/date-utils": "^2.5.3",
     "@gravity-ui/i18n": "^1.2.0",
     "@gravity-ui/icons": "^2.8.1",
     "lodash": "^4.17.20"

src/lib/core/types/specs.ts

@@ -174,6 +174,10 @@ export interface StringSpec<
             readAsMethod?: ReadAsMethod;
             ignoreText?: boolean;
         };
+        dateInput?: {
+            outputFormat?: string;
+            printFormat?: string;
+        };
         copy?: boolean;
         selectParams?: {
             filterPlaceholder?: string;

src/lib/kit/components/Inputs/DateInput/DateInput.scss

@@ -0,0 +1,5 @@
+@import '../../../styles/variables';
+
+.#{$ns}date-input {
+    width: 100%;
+}

src/lib/kit/components/Inputs/DateInput/DateInput.tsx

@@ -0,0 +1,76 @@
+import React, {useCallback} from 'react';
+
+import {DatePicker, DatePickerProps} from '@gravity-ui/date-components';
+import {StringInputProps} from '../../../../core';
+import {DateTime, dateTimeParse} from '@gravity-ui/date-utils';
+import {block} from '../../../utils';
+
+import './DateInput.scss';
+
+export const DEFAULT_DATE_FORMAT = 'DD-MM-YYYY';
+
+const b = block('date-input');
+
+export interface DateProps
+    extends Omit<DatePickerProps, 'value' | 'disabled' | 'placeholder' | 'qa'> {}
+
+export const DateInput: React.FC<StringInputProps<DateProps>> = ({
+    name,
+    input,
+    spec,
+    inputProps,
+}) => {
+    const {value, onChange, onBlur, onFocus} = input;
+    const dateInput = spec.viewSpec.dateInput;
+    const outputFormat = dateInput?.outputFormat;
+
+    const onUpdate = useCallback(
+        (date: DateTime | null) => {
+            if (!date) {
+                onChange(undefined as any);
+            } else {
+                switch (outputFormat) {
+                    case 'date_time':
+                        onChange(date as any);
+                        break;
+                    case 'date':
+                        onChange(date.toDate() as any);
+                        break;
+                    case 'timestamp':
+                        onChange({
+                            seconds: Math.floor(date?.toDate().getTime() / 1000),
+                            nanos: 0,
+                        } as any);
+                        break;
+                    case 'string':
+                    case undefined:
+                    case '':
+                        onChange(date.toISOString());
+                        break;
+                    default:
+                        onChange(date.format(outputFormat));
+                        break;
+                }
+            }
+        },
+        [outputFormat],
+    );
+
+    const props: DatePickerProps = {
+        hasClear: true,
+        format: dateInput?.printFormat || DEFAULT_DATE_FORMAT,
+        ...inputProps,
+        onBlur: onBlur as (e: React.FocusEvent<HTMLElement>) => void,
+        onFocus: onFocus as (e: React.FocusEvent<HTMLElement>) => void,
+        value: value
+            ? dateTimeParse((value as any).seconds ? (value as any).seconds * 1000 : value) || null
+            : null,
+        onUpdate,
+        disabled: spec.viewSpec.disabled,
+        placeholder: spec.viewSpec.placeholder,
+    };
+
+    return <DatePicker className={b()} data-qa={name} {...props} />;
+};
+
+export default DateInput;

src/lib/kit/components/Inputs/DateInput/__tests__/DateInput.visual.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import {DATE_INPUT, VALUE} from './helpers';
+
+import {test} from '~playwright/core';
+import {DynamicForm} from '~playwright/core/DynamicForm';
+import {DynamicView} from '~playwright/core/DynamicView';
+
+test.describe('DateInput', () => {
+    test('default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={DATE_INPUT.default} />);
+
+        await expectScreenshot();
+    });
+
+    test('full', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={DATE_INPUT.full} />);
+
+        await expectScreenshot();
+    });
+
+    test('default value', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={DATE_INPUT.defaultValue} />);
+
+        await expectScreenshot();
+    });
+
+    test('row verbose', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={DATE_INPUT.row_verbose} />);
+
+        await expectScreenshot();
+    });
+
+    test('layout transparent', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={DATE_INPUT.layoutTransparent} />);
+
+        await expectScreenshot();
+    });
+});
+
+test.describe('DateInput view', () => {
+    test('default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={DATE_INPUT.default} value={VALUE} />);
+
+        await expectScreenshot();
+    });
+});

src/lib/kit/components/Inputs/DateInput/__tests__/helpers.ts

@@ -0,0 +1,51 @@
+import {FormValue, SpecTypes, StringSpec} from '../../../../../core';
+
+export const DATE_INPUT: Record<string, StringSpec> = {
+    default: {
+        type: SpecTypes.String,
+        viewSpec: {
+            type: 'date_input',
+            layout: 'row',
+            layoutTitle: 'Flag',
+        },
+    },
+    full: {
+        type: SpecTypes.String,
+        required: true,
+        viewSpec: {
+            disabled: true,
+            type: 'date_input',
+            layout: 'row',
+            layoutTitle: 'Flag',
+            layoutDescription: 'description',
+        },
+    },
+    defaultValue: {
+        defaultValue: '2020-01-01',
+        type: SpecTypes.String,
+        viewSpec: {
+            type: 'date_input',
+            layout: 'row',
+            layoutTitle: 'File Input',
+        },
+    },
+    layoutTransparent: {
+        type: SpecTypes.String,
+        viewSpec: {
+            type: 'date_input',
+            layout: 'transparent',
+            layoutTitle: 'Flag',
+        },
+    },
+    row_verbose: {
+        type: SpecTypes.String,
+        viewSpec: {
+            type: 'date_input',
+            layout: 'row_verbose',
+            layoutTitle: 'File Input',
+            layoutDescription: 'description',
+        },
+    },
+};
+
+export const VALUE: FormValue = '2020-01-01';

src/lib/kit/components/Inputs/DateInput/index.ts

@@ -0,0 +1 @@
+export * from './DateInput';

src/lib/kit/components/Inputs/index.ts

@@ -2,6 +2,7 @@ export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
 export * from './FileInput';
+export * from './DateInput';
 export * from './MonacoInput';
 export * from './MultiOneOf';
 export * from './MultiSelect';