feat(DateField): add DateField from date-components

package.json

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

scripts/get-packages-versions.mjs

@@ -5,7 +5,7 @@ import {fileURLToPath} from 'node:url';
 const packagesMap = {
     '@gravity-ui/uikit': 'uikit',
     '@gravity-ui/components': 'components',
-    // '@gravity-ui/date-components': 'date-components',
+    '@gravity-ui/date-components': 'date-components',
 };
 
 const packageJsonPath = path.join(path.dirname(fileURLToPath(import.meta.url)), '../package.json');

src/components/MDXRenderer/MDXRenderer.tsx

@@ -1,4 +1,5 @@
 import * as Components from '@gravity-ui/components';
+import * as DateComponents from '@gravity-ui/date-components';
 import {Col, Grid, Row} from '@gravity-ui/page-constructor';
 import * as UIKit from '@gravity-ui/uikit';
 import {EvaluateOptions, evaluate} from '@mdx-js/mdx';
@@ -31,6 +32,7 @@ const componentsAvailableInMDX: MDXComponents = {
     UIKitExamples,
     UIKit: UIKit as unknown as Record<string, MDXComponents>,
     Components: Components as unknown as Record<string, MDXComponents>,
+    DateComponents: DateComponents as unknown as Record<string, MDXComponents>,
 };
 
 type Props = {

src/content/components/date-components/DateField/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: 'DateField'};
 
 export const dateFieldConfig: Component = {
     id: 'date-field',
     title: 'Date Field',
-    isComingSoon: true,
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('@gravity-ui/date-components').then((mod) => mod.DateField),
+        ),
+        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/utils.ts

@@ -8,7 +8,8 @@ const TARGET_REPOS_VERSIONS = {
     [Repos.Uikit]: process.env.DEV_BRANCH_UIKIT || `v${packagesVersions[Repos.Uikit]}`,
     [Repos.Components]:
         process.env.DEV_BRANCH_COMPONENTS || `v${packagesVersions[Repos.Components]}`,
-    // [Repos.DateComponents]: process.env.DEV_BRANCH_DATE_COMPONENTS || `v${packagesVersions['@gravity-ui/date-components']}`,
+    [Repos.DateComponents]:
+        process.env.DEV_BRANCH_DATE_COMPONENTS || `v${packagesVersions[Repos.DateComponents]}`,
 };
 
 export type GetterProps = {componentName: string; repoName: Repos};

src/types/common.ts

@@ -1,5 +1,5 @@
 export enum Repos {
     Uikit = 'uikit',
     Components = 'components',
-    // DateComponents = 'date-components',
+    DateComponents = 'date-components',
 }