feat(DatePicker): add description and sandbox for DatePicker (#170)

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@doc-tools/transform": "^3.11.0",
     "@gravity-ui/components": "2.1.0",
-    "@gravity-ui/date-components": "^1.4.0",
+    "@gravity-ui/date-components": "^1.5.0",
     "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/page-constructor": "^4.41.0",
     "@gravity-ui/uikit": "5.24.0",

src/content/components/date-components/DateField/index.ts

@@ -81,6 +81,12 @@ export const dateFieldConfig: Component = {
             maxValue: {
                 type: 'input',
             },
+            leftContent: {
+                type: 'input',
+            },
+            rightContent: {
+                type: 'input',
+            },
         },
     },
 };

src/content/components/date-components/DatePicker/index.ts

@@ -1,7 +1,86 @@
+import dynamic from 'next/dynamic';
+import {Repos} from 'src/types/common';
+
 import {Component} from '../../types';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.DateComponents, componentName: 'DatePicker'};
 
 export const datePickerConfig: Component = {
     id: 'date-picker',
     title: 'Date Picker',
-    isComingSoon: true,
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('../examples/components/index').then((mod) => mod.DatePickerSandboxExample),
+        ),
+        props: {
+            view: {
+                type: 'radioButton',
+                values: mappingOptions(['normal', 'clear']),
+                defaultValue: 'normal',
+            },
+            size: {
+                type: 'radioButton',
+                values: mappingOptions(['s', 'm', 'l', 'xl']),
+                defaultValue: 'm',
+            },
+            placeholder: {
+                type: 'input',
+                defaultValue: 'Type here...',
+            },
+            label: {
+                type: 'input',
+            },
+            validationState: {
+                type: 'radioButton',
+                values: mappingOptions(['normal', 'invalid']),
+                defaultValue: 'normal',
+            },
+            errorMessage: {
+                type: 'input',
+                defaultValue: 'Input is invalid',
+            },
+            disabled: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            hasClear: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            readOnly: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            format: {
+                type: 'input',
+                defaultValue: 'MM/DD/YYYY',
+            },
+            pin: {
+                type: 'select',
+                values: mappingOptions([
+                    'round-round',
+                    'brick-brick',
+                    'clear-clear',
+                    'round-brick',
+                    'brick-round',
+                    'round-clear',
+                    'clear-round',
+                    'brick-clear',
+                    'clear-brick',
+                ]),
+                defaultValue: 'round-round',
+            },
+            minValue: {
+                type: 'input',
+            },
+            maxValue: {
+                type: 'input',
+            },
+        },
+    },
 };

src/content/components/date-components/examples/components/DatePickerExample.tsx

@@ -0,0 +1,28 @@
+import {DatePicker, DatePickerProps} from '@gravity-ui/date-components';
+import {DateTimeInput, dateTimeParse} from '@gravity-ui/date-utils';
+
+type DatePickerExampleProps = {
+    defaultValue?: DateTimeInput;
+    maxValue?: DateTimeInput;
+    minValue?: DateTimeInput;
+} & Omit<DatePickerProps, 'defaultValue' | 'maxValue' | 'minValue'>;
+
+export const DatePickerExample = ({
+    defaultValue,
+    maxValue,
+    minValue,
+    ...restProps
+}: DatePickerExampleProps) => {
+    return (
+        <DatePicker
+            {...restProps}
+            defaultValue={dateTimeParse(defaultValue)}
+            maxValue={dateTimeParse(maxValue)}
+            minValue={dateTimeParse(minValue)}
+        />
+    );
+};
+
+export const DatePickerSandboxExample = (props: DatePickerExampleProps) => (
+    <DatePickerExample {...props} style={{alignSelf: 'flex-start'}} />
+);

src/content/components/date-components/examples/components/index.tsx

@@ -1,3 +1,4 @@
 export * from './CalendarExample';
 export * from './RangeCalendarExample';
 export * from './DateFieldExample';
+export * from './DatePickerExample';