feat(Calendar): add documentation for Calendar (#163)

* feat: add date components

* fix: remove timeZone from sandbox

* fix: landing cases with DateField

* feat: add Calendar to landing

* feat: update @gravity-ui/date-components to latest

package.json

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

src/components/MDXRenderer/MDXRenderer.tsx

@@ -19,6 +19,7 @@ import remarkGfm from 'remark-gfm';
 import remarkLinkRewrite from 'remark-link-rewrite';
 
 import {CONTENT_WRAPPER_ID} from '../../constants';
+import * as DateComponentsExamples from '../../content/components/date-components/examples/components';
 import * as UIKitExamples from '../../content/components/uikit/examples/components';
 
 import {ExampleBlock} from './ExampleBlock/ExampleBlock';
@@ -30,6 +31,7 @@ const componentsAvailableInMDX: MDXComponents = {
     Col,
     ExampleBlock,
     UIKitExamples,
+    DateComponentsExamples,
     UIKit: UIKit as unknown as Record<string, MDXComponents>,
     Components: Components as unknown as Record<string, MDXComponents>,
     DateComponents: DateComponents as unknown as Record<string, MDXComponents>,

src/content/components/date-components/Calendar/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: 'Calendar'};
 
 export const calendarConfig: Component = {
     id: 'calendar',
     title: 'Calendar',
-    isComingSoon: true,
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('../examples/components/index').then((mod) => mod.CalendarExample),
+        ),
+        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/DateField/index.ts

@@ -15,7 +15,7 @@ export const dateFieldConfig: Component = {
     },
     sandbox: {
         component: dynamic(() =>
-            import('@gravity-ui/date-components').then((mod) => mod.DateField),
+            import('../examples/components/index').then((mod) => mod.DateFieldExample),
         ),
         props: {
             view: {

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

@@ -0,0 +1,35 @@
+import {Calendar, CalendarProps} from '@gravity-ui/date-components';
+import {DateTimeInput, dateTimeParse} from '@gravity-ui/date-utils';
+
+type CalendarExampleProps = {
+    defaultValue?: DateTimeInput;
+    maxValue?: DateTimeInput;
+    minValue?: DateTimeInput;
+    defaultFocusedValue?: DateTimeInput;
+    focusedValue?: DateTimeInput;
+} & Omit<
+    CalendarProps,
+    'defaultValue' | 'maxValue' | 'minValue' | 'defaultFocusedValue' | 'focusedValue'
+>;
+
+export const CalendarExample = ({
+    focusedValue,
+    defaultFocusedValue,
+    defaultValue,
+    maxValue,
+    minValue,
+    ...otherProps
+}: CalendarExampleProps) => {
+    const modes: CalendarProps['modes'] = {days: true, months: true, quarters: true, years: true};
+    return (
+        <Calendar
+            {...otherProps}
+            defaultFocusedValue={dateTimeParse(defaultFocusedValue)}
+            defaultValue={dateTimeParse(defaultValue)}
+            minValue={dateTimeParse(minValue)}
+            maxValue={dateTimeParse(maxValue)}
+            focusedValue={dateTimeParse(focusedValue)}
+            modes={modes}
+        />
+    );
+};

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

@@ -0,0 +1,24 @@
+import {DateField, DateFieldProps} from '@gravity-ui/date-components';
+import {DateTimeInput, dateTimeParse} from '@gravity-ui/date-utils';
+
+type DateFieldExampleProps = {
+    defaultValue?: DateTimeInput;
+    maxValue?: DateTimeInput;
+    minValue?: DateTimeInput;
+} & Omit<DateFieldProps, 'defaultValue' | 'maxValue' | 'minValue'>;
+
+export const DateFieldExample = ({
+    defaultValue,
+    maxValue,
+    minValue,
+    ...restProps
+}: DateFieldExampleProps) => {
+    return (
+        <DateField
+            {...restProps}
+            defaultValue={dateTimeParse(defaultValue)}
+            maxValue={dateTimeParse(maxValue)}
+            minValue={dateTimeParse(minValue)}
+        />
+    );
+};

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

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