feat: add date picker string type

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

@@ -162,6 +162,12 @@ 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` |          | Format returning string. [Available formats](https://day.js.org/docs/en/display/format) |
+
 #### 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,9 @@ export interface StringSpec<
             readAsMethod?: ReadAsMethod;
             ignoreText?: boolean;
         };
+        dateInput?: {
+            outputFormat?: 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,50 @@
+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';
+
+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 onUpdate = useCallback(
+        (date: DateTime | null) => {
+            if (!date) {
+                onChange('');
+            } else if (spec.viewSpec.dateInput?.outputFormat) {
+                onChange(date.format(spec.viewSpec.dateInput.outputFormat));
+            } else {
+                onChange(date.toISOString());
+            }
+        },
+        [spec.viewSpec.dateInput?.outputFormat],
+    );
+
+    const props: DatePickerProps = {
+        hasClear: true,
+        ...inputProps,
+        onBlur: onBlur as (e: React.FocusEvent<HTMLElement>) => void,
+        onFocus: onFocus as (e: React.FocusEvent<HTMLElement>) => void,
+        value: value ? dateTimeParse(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';

src/lib/kit/constants/config.tsx

@@ -10,6 +10,7 @@ import {
     CardOneOfView,
     CardSection,
     Checkbox,
+    DateInput,
     FileInput,
     FileInputView,
     Group,
@@ -162,6 +163,7 @@ export const dynamicConfig: DynamicFormConfig = {
             select: {Component: Select},
             base: {Component: Text},
             file_input: {Component: FileInput},
+            date_input: {Component: DateInput},
             number_with_scale: {Component: NumberWithScale},
             monaco_input: {Component: MonacoInput},
             text_content: {Component: TextContent, independent: true},
@@ -262,6 +264,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
             textarea: {Component: TextAreaView},
             select: {Component: BaseView},
             base: {Component: BaseView},
+            date_input: {Component: BaseView},
             file_input: {Component: FileInputView},
             number_with_scale: {Component: NumberWithScaleView},
             monaco_input: {Component: MonacoView},

src/stories/Editor.stories.tsx

@@ -71,6 +71,17 @@ const spec: ObjectSpec = {
                             type: SpecTypes.Number,
                             viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Age'},
                         },
+                        birthday: {
+                            type: SpecTypes.String,
+                            viewSpec: {
+                                type: 'date_input',
+                                layout: 'row',
+                                layoutTitle: 'Birthday',
+                                dateInput: {
+                                    outputFormat: 'YYYY-MM-DD',
+                                },
+                            },
+                        },
                         license: {
                             type: SpecTypes.Boolean,
                             viewSpec: {type: 'base', layout: 'row', layoutTitle: 'License'},

src/stories/StringBase.stories.tsx

@@ -27,6 +27,7 @@ const excludeOptions = [
     'viewSpec.monacoParams',
     'viewSpec.textContentParams',
     'viewSpec.fileInput',
+    'viewSpec.dateInput',
     'viewSpec.selectParams',
 ];