feat(Relative date components): add sandbox and description for Relat…

…iveDatePicker and RelativeDateField (#171)

* feat: add RelativeDatePicker

* feat: add sandbox for RelativeDateField

* feat:add RelativeDateFieldExample

* feat: update date-components

* feat: rename example component

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@doc-tools/transform": "^3.11.0",
     "@gravity-ui/components": "2.1.0",
-    "@gravity-ui/date-components": "^1.5.0",
+    "@gravity-ui/date-components": "^1.6.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/RelativeDateField/index.ts

@@ -1,7 +1,91 @@
+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: 'RelativeDateField'};
 
 export const relativeDateFieldConfig: Component = {
     id: 'relative-date-field',
     title: 'Relative Date Field',
-    isComingSoon: true,
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('../examples/components/RelativeDateFieldExample').then(
+                (mod) => mod.RelativeDateFieldSandBoxExample,
+            ),
+        ),
+        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: [
+                    {content: 'normal', value: ''},
+                    {content: 'invalid', value: 'invalid'},
+                ],
+                defaultValue: '',
+            },
+            errorMessage: {
+                type: 'input',
+                defaultValue: 'Input is invalid',
+            },
+            disabled: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            hasClear: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            hasTime: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            readOnly: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            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',
+            },
+            leftContent: {
+                type: 'input',
+            },
+            rightContent: {
+                type: 'input',
+            },
+        },
+    },
 };

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

@@ -1,7 +1,88 @@
+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: 'RelativeDatePicker'};
 
 export const relativeDatePickerConfig: Component = {
     id: 'relative-date-picker',
     title: 'Relative Date Picker',
-    isComingSoon: true,
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('../examples/components/index').then(
+                (mod) => mod.RelativeDatePickerSandboxExample,
+            ),
+        ),
+        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/RelativeDateFieldExample.tsx

@@ -0,0 +1,6 @@
+import {RelativeDateField, RelativeDateFieldProps} from '@gravity-ui/date-components';
+import React from 'react';
+
+export const RelativeDateFieldSandBoxExample = (props: RelativeDateFieldProps) => (
+    <RelativeDateField {...props} style={{alignSelf: 'flex-start'}} />
+);

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

@@ -0,0 +1,57 @@
+import {RelativeDatePicker, RelativeDatePickerProps} from '@gravity-ui/date-components';
+import type {Value} from '@gravity-ui/date-components';
+import {DateTimeInput, dateTimeParse} from '@gravity-ui/date-utils';
+import React from 'react';
+
+type RelativeDatePickerExampleProps = {
+    defaultValue?: DateTimeInput;
+    isRelative?: boolean;
+    maxValue?: DateTimeInput;
+    minValue?: DateTimeInput;
+} & Omit<RelativeDatePickerProps, 'defaultValue' | 'maxValue' | 'minValue'>;
+
+export const RelativeDatePickerExample = ({
+    defaultValue,
+    isRelative,
+    maxValue,
+    minValue,
+    ...restProps
+}: RelativeDatePickerExampleProps) => {
+    let parsedValue: RelativeDatePickerProps['defaultValue'];
+    if (defaultValue) {
+        parsedValue = isRelative
+            ? {type: 'relative', value: defaultValue as string}
+            : {type: 'absolute', value: dateTimeParse(defaultValue)!};
+    }
+    return (
+        <RelativeDatePicker
+            {...restProps}
+            defaultValue={parsedValue}
+            maxValue={dateTimeParse(maxValue)}
+            minValue={dateTimeParse(minValue)}
+        />
+    );
+};
+
+export const RelativeDatePickerSandboxExample = (props: RelativeDatePickerExampleProps) => {
+    const [value, setValue] = React.useState<Value | null>(null);
+
+    return (
+        <div
+            style={{
+                alignSelf: 'flex-start',
+                width: '100%',
+                justifyContent: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                textAlign: 'center',
+                gap: '20px',
+            }}
+        >
+            <div>
+                <RelativeDatePickerExample {...props} onUpdate={setValue} />
+            </div>
+            <div>value: {value ? JSON.stringify(value, null, 2) : 'null'}</div>
+        </div>
+    );
+};

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

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