@salutejs/plasma-new-hope 0.322.0-canary.1933.14614537450.0 → 0.322.0-canary.1939.14642328722.0

package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -1,23 +1,24 @@
 import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { disableProps, getConfigVariations, IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconButton } from '../IconButton/IconButton';
 import { RangeInputRefs } from '../../../../components/Range/Range.types';
 
 import { DatePicker, DatePickerRange } from './DatePicker';
+import { config } from './DatePicker.config';
 
 const onChangeValue = action('onChangeValue');
+const onCommitDate = action('onCommitDate');
 const onBlur = action('onBlur');
 const onFocus = action('onFocus');
 
 const onChangeFirstValue = action('onChangeFirstValue');
 const onChangeSecondValue = action('onChangeSecondValue');
 
-const sizes = ['l', 'm', 's', 'xs'];
-const views = ['default'];
+const { sizes, views } = getConfigVariations(config);
 const dividers = ['none', 'dash', 'icon'];
 const labelPlacements = ['outer', 'inner'];
 const requiredPlacements = ['left', 'right'];
@@ -48,6 +49,11 @@ const meta: Meta = {
                 type: 'date',
             },
         },
+        includeEdgeDates: {
+            control: {
+                type: 'boolean',
+            },
+        },
         renderFromDate: {
             control: {
                 type: 'date',
@@ -113,12 +119,10 @@ const StoryDefault = ({
             onBlur={onBlur}
             onFocus={onFocus}
             onToggle={(is) => setIsOpen(is)}
-            onChangeValue={(e, currentValue) => {
-                onChangeValue(e, currentValue);
-            }}
+            onChangeValue={onChangeValue}
+            onCommitDate={onCommitDate}
             lang={lang}
             format={format}
-            onCommitDate={() => setIsOpen(false)}
             min={min}
             max={max}
             {...rest}
@@ -140,7 +144,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
             },
         },
         format: {
-            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY', 'YYYY DD MM', 'DD YYYY MM'],
             control: {
                 type: 'select',
             },
@@ -155,9 +159,10 @@ export const Default: StoryObj<StoryPropsDefault> = {
         labelPlacement: 'outer',
         defaultDate: new Date(2024, 5, 14),
         renderFromDate: new Date(2024, 4, 14),
+        includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
-        maskWithFormat: false,
+        maskWithFormat: true,
         required: false,
         requiredPlacement: 'right',
         hasRequiredIndicator: true,
@@ -255,12 +260,8 @@ const StoryRange = ({
                 showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
             }
             onToggle={(is) => setIsOpen(is)}
-            onChangeFirstValue={(e, currentValue) => {
-                onChangeFirstValue(e, currentValue);
-            }}
-            onChangeSecondValue={(e, currentValue) => {
-                onChangeSecondValue(e, currentValue);
-            }}
+            onChangeFirstValue={onChangeFirstValue}
+            onChangeSecondValue={onChangeSecondValue}
             lang={lang}
             min={min}
             max={max}
@@ -299,6 +300,7 @@ export const Range: StoryObj<StoryPropsRange> = {
         isDoubleCalendar: false,
         closeAfterDateSelect: true,
         dividerVariant: 'dash',
+        includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
         renderFromDate: new Date(2024, 4, 14),
@@ -362,10 +364,8 @@ const StoryDeferred = ({
                 onBlur={onBlur}
                 onFocus={onFocus}
                 onToggle={(is) => setIsOpen(is)}
-                onChangeValue={(e, currentValue) => {
-                    onChangeValue(e, currentValue);
-                }}
-                onCommitDate={() => setIsOpen(false)}
+                onChangeValue={onChangeValue}
+                onCommitDate={onCommitDate}
                 min={min}
                 max={max}
                 {...rest}
@@ -401,6 +401,7 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
         size: 'l',
         view: 'default',
         labelPlacement: 'outer',
+        includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
         maskWithFormat: false,