feat(RangeCalendar): add description and sandbox for RangeCalendar (#167

)

* feat: add RangeCalendarExample component

* feat: add RangeCalendar sandbox

* feat: add RangeCalendarWithDefaultValueExample

* feat: update date-components

* fix: text value

* fix: positioning items in example block row

* feat: set positioning to center

package.json

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

src/components/MDXRenderer/ExampleBlock/ExampleBlock.scss

@@ -21,9 +21,11 @@ $block: '.#{variables.$ns}example-block';
 
     &__content {
         display: flex;
-        align-items: flex-start;
-        justify-content: space-around;
+        align-items: center;
+        justify-content: center;
         padding: 40px;
+        flex-wrap: wrap;
+        row-gap: 20px;
 
         & > * {
             margin: 0 8px;

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

@@ -1,7 +1,49 @@
+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: 'RangeCalendar'};
 
 export const rangeCalendarConfig: Component = {
     id: 'range-calendar',
     title: 'Range Calendar',
-    isComingSoon: true,
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('../examples/components/index').then((mod) => mod.RangeCalendarExample),
+        ),
+        props: {
+            size: {
+                type: 'radioButton',
+                values: mappingOptions(['m', 'l', 'xl']),
+                defaultValue: 'm',
+            },
+            mode: {
+                type: 'select',
+                values: mappingOptions(['days', 'months', 'quarters', 'years']),
+            },
+            disabled: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            readOnly: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            minValue: {
+                type: 'input',
+            },
+            maxValue: {
+                type: 'input',
+            },
+            focusedValue: {
+                type: 'input',
+            },
+        },
+    },
 };

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

@@ -0,0 +1,72 @@
+import {RangeCalendar, RangeCalendarProps} from '@gravity-ui/date-components';
+import {RangeValue} from '@gravity-ui/date-components/dist/esm/components/types';
+import {DateTime, DateTimeInput, dateTime, dateTimeParse} from '@gravity-ui/date-utils';
+import React from 'react';
+
+type RangeCalendarExampleProps = {
+    defaultValue?: RangeValue<DateTimeInput>;
+    maxValue?: DateTimeInput;
+    minValue?: DateTimeInput;
+    defaultFocusedValue?: DateTimeInput;
+    focusedValue?: DateTimeInput;
+} & Omit<
+    RangeCalendarProps,
+    'defaultValue' | 'maxValue' | 'minValue' | 'defaultFocusedValue' | 'focusedValue'
+>;
+
+const SelectedRangeText = ({value}: {value?: RangeValue<DateTime>}) => (
+    <div style={{textAlign: 'center'}}>
+        <div>Selected range:</div>
+        <div>{value ? `${value.start?.format('L')} - ${value.end?.format('L')}` : '\u00A0'}</div>
+    </div>
+);
+
+export const RangeCalendarExample = ({
+    focusedValue,
+    defaultFocusedValue,
+    defaultValue,
+    maxValue,
+    minValue,
+    ...otherProps
+}: RangeCalendarExampleProps) => {
+    const modes: RangeCalendarExampleProps['modes'] = {
+        days: true,
+        months: true,
+        quarters: true,
+        years: true,
+    };
+
+    const parsedDefaultValue: RangeCalendarProps['defaultValue'] = defaultValue
+        ? {start: dateTimeParse(defaultValue.start)!, end: dateTimeParse(defaultValue.end)!}
+        : undefined;
+
+    const [value, setValue] = React.useState(parsedDefaultValue);
+    return (
+        <div>
+            <RangeCalendar
+                {...otherProps}
+                defaultFocusedValue={dateTimeParse(defaultFocusedValue)}
+                defaultValue={parsedDefaultValue}
+                minValue={dateTimeParse(minValue)}
+                maxValue={dateTimeParse(maxValue)}
+                focusedValue={dateTimeParse(focusedValue)}
+                onUpdate={setValue}
+                modes={modes}
+            />
+            <SelectedRangeText value={value} />
+        </div>
+    );
+};
+
+type RangeCalendarWithDefaultValueExampleProps = Omit<RangeCalendarExampleProps, 'defaultValue'>;
+
+export const RangeCalendarWithDefaultValueExample = (
+    props: RangeCalendarWithDefaultValueExampleProps,
+) => {
+    const today = dateTime();
+    const defaultValue: RangeValue<string> = {
+        start: today.subtract({days: 2}).toString(),
+        end: today.add({days: 2}).toString(),
+    };
+    return <RangeCalendarExample {...props} defaultValue={defaultValue} />;
+};

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

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