@itcase/ui-web 1.9.111 → 1.9.113
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DatePicker_cjs_Cd7wsJCG.js +1 -0
- package/dist/DatePicker_es_BhrZj2OP.js +1 -0
- package/dist/cjs/components/AvatarStack.js +1 -1
- package/dist/cjs/components/DatePeriod.js +1 -1
- package/dist/cjs/components/DatePicker.js +1 -1
- package/dist/cjs/components/Dropzone.js +1 -1
- package/dist/components/AvatarStack.js +1 -1
- package/dist/components/DatePeriod.js +1 -1
- package/dist/components/DatePicker.js +1 -1
- package/dist/components/Dropzone.js +1 -1
- package/dist/css/styles/bundles.css +13 -1
- package/dist/stories/DatePickerOverview.mdx +1 -1
- package/dist/types/components/Avatar/stories/AvatarCount.stories.d.ts +4 -0
- package/dist/types/components/Avatar/stories/AvatarCount.stories.js +4 -0
- package/dist/types/components/Avatar/stories/AvatarDemo.stories.js +4 -0
- package/dist/types/components/Avatar/stories/AvatarImage.stories.d.ts +4 -0
- package/dist/types/components/Avatar/stories/AvatarImage.stories.js +4 -0
- package/dist/types/components/Avatar/stories/AvatarInteraction.stories.d.ts +4 -0
- package/dist/types/components/Avatar/stories/AvatarInteraction.stories.js +4 -0
- package/dist/types/components/Avatar/stories/AvatarLetters.stories.d.ts +4 -0
- package/dist/types/components/Avatar/stories/AvatarLetters.stories.js +4 -0
- package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.d.ts +4 -0
- package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.js +4 -0
- package/dist/types/components/AvatarStack/AvatarStack.interface.d.ts +6 -11
- package/dist/types/components/AvatarStack/AvatarStack.js +3 -13
- package/dist/types/components/AvatarStack/index.d.ts +1 -1
- package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.d.ts +12 -4
- package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.js +49 -13
- package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.d.ts +6 -2
- package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.js +7 -12
- package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.d.ts +9 -1
- package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.js +51 -37
- package/dist/types/components/AvatarStack/{__test__/AvatarStackTest.stories.d.ts → stories/AvatarStackSkeleton.stories.d.ts} +7 -2
- package/dist/types/components/AvatarStack/stories/AvatarStackSkeleton.stories.js +47 -0
- package/dist/types/components/AvatarStack/stories/__mock__/index.js +11 -5
- package/dist/types/components/Badge/stories/BadgeDotIconCounter.stories.d.ts +8 -9
- package/dist/types/components/Badge/stories/BadgeDotIconCounter.stories.js +33 -72
- package/dist/types/components/DatePicker/DatePicker.interface.d.ts +22 -28
- package/dist/types/components/DatePicker/DatePicker.js +3 -4
- package/dist/types/components/DatePicker/stories/DatePicker.stories.d.ts +10 -1
- package/dist/types/components/DatePicker/stories/DatePicker.stories.js +31 -33
- package/dist/types/components/DatePicker/stories/DatePickerClear.stories.d.ts +9 -1
- package/dist/types/components/DatePicker/stories/DatePickerClear.stories.js +20 -24
- package/dist/types/components/DatePicker/stories/DatePickerSize.stories.d.ts +8 -0
- package/dist/types/components/DatePicker/stories/DatePickerSize.stories.js +13 -24
- package/dist/types/components/DatePicker/stories/DatePickerStory.d.ts +2 -0
- package/dist/types/components/DatePicker/stories/DatePickerStory.js +18 -0
- package/dist/types/components/DatePicker/stories/DatePickerStyle.stories.d.ts +8 -0
- package/dist/types/components/DatePicker/stories/DatePickerStyle.stories.js +13 -29
- package/dist/types/components/DatePicker/stories/DatePickerWithButton.stories.d.ts +12 -1
- package/dist/types/components/DatePicker/stories/DatePickerWithButton.stories.js +30 -32
- package/dist/types/components/Divider/__test__/DividerTest.stories.js +3 -3
- package/dist/types/components/Dropzone/Dropzone.appearance.d.ts +1 -0
- package/dist/types/components/Dropzone/Dropzone.js +1 -1
- package/dist/types/components/Dropzone/appearance/dropzoneDefault.d.ts +1 -0
- package/dist/types/components/Dropzone/appearance/dropzoneDefault.js +1 -0
- package/dist/types/components/Dropzone/stories/DropzoneDemo.stories.d.ts +1 -0
- package/dist/types/components/Dropzone/stories/DropzoneDemo.stories.js +7 -0
- package/dist/types/components/Dropzone/stories/__mock__/index.d.ts +4 -0
- package/dist/types/components/Dropzone/stories/__mock__/index.js +19 -0
- package/package.json +2 -2
- package/dist/DatePicker_cjs_BhZXIBZm.js +0 -1
- package/dist/DatePicker_es_vJagTqXm.js +0 -1
- package/dist/types/components/AvatarStack/AvatarStack.appearance.d.ts +0 -21
- package/dist/types/components/AvatarStack/AvatarStack.appearance.js +0 -5
- package/dist/types/components/AvatarStack/__test__/AvatarStackTest.stories.js +0 -45
- package/dist/types/components/AvatarStack/appearance/avatarStackSize.d.ts +0 -21
- package/dist/types/components/AvatarStack/appearance/avatarStackSize.js +0 -21
|
@@ -1,65 +1,49 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import { DatePickerInput } from '../DatePicker';
|
|
2
|
+
import { createDatePickerStory } from './DatePickerStory';
|
|
3
3
|
const meta = {
|
|
4
4
|
title: 'Molecules / DatePicker / Style',
|
|
5
5
|
component: DatePickerInput,
|
|
6
6
|
args: {
|
|
7
7
|
width: '220px',
|
|
8
|
-
},
|
|
9
|
-
parameters: {
|
|
10
|
-
layout: 'centered',
|
|
11
|
-
},
|
|
12
|
-
};
|
|
13
|
-
export default meta;
|
|
14
|
-
export const Solid = {
|
|
15
|
-
args: {
|
|
16
8
|
datePickerProps: {
|
|
17
9
|
appearance: 'surfacePrimary sizeM solid rounded',
|
|
10
|
+
dateFormat: 'dd.MM.yyyy',
|
|
11
|
+
placeholderText: 'Выберите дату',
|
|
18
12
|
},
|
|
19
13
|
inputProps: {
|
|
20
14
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
21
15
|
},
|
|
22
16
|
},
|
|
23
|
-
|
|
24
|
-
|
|
17
|
+
parameters: {
|
|
18
|
+
layout: 'centered',
|
|
25
19
|
},
|
|
26
20
|
};
|
|
21
|
+
export default meta;
|
|
22
|
+
const DatePickerStory = createDatePickerStory(meta.args);
|
|
23
|
+
export const Solid = {
|
|
24
|
+
render: DatePickerStory,
|
|
25
|
+
};
|
|
27
26
|
export const Outlined = {
|
|
28
27
|
args: {
|
|
29
|
-
datePickerProps: {
|
|
30
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
31
|
-
},
|
|
32
28
|
inputProps: {
|
|
33
29
|
appearance: 'defaultPrimary sizeM outlined rounded',
|
|
34
30
|
},
|
|
35
31
|
},
|
|
36
|
-
render:
|
|
37
|
-
return _jsx(DatePickerInput, { ...args });
|
|
38
|
-
},
|
|
32
|
+
render: DatePickerStory,
|
|
39
33
|
};
|
|
40
34
|
export const Ghost = {
|
|
41
35
|
args: {
|
|
42
|
-
datePickerProps: {
|
|
43
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
44
|
-
},
|
|
45
36
|
inputProps: {
|
|
46
37
|
appearance: 'defaultPrimary sizeM ghost rounded',
|
|
47
38
|
},
|
|
48
39
|
},
|
|
49
|
-
render:
|
|
50
|
-
return _jsx(DatePickerInput, { ...args });
|
|
51
|
-
},
|
|
40
|
+
render: DatePickerStory,
|
|
52
41
|
};
|
|
53
42
|
export const Full = {
|
|
54
43
|
args: {
|
|
55
|
-
datePickerProps: {
|
|
56
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
57
|
-
},
|
|
58
44
|
inputProps: {
|
|
59
45
|
appearance: 'defaultPrimary sizeM full rounded',
|
|
60
46
|
},
|
|
61
47
|
},
|
|
62
|
-
render:
|
|
63
|
-
return _jsx(DatePickerInput, { ...args });
|
|
64
|
-
},
|
|
48
|
+
render: DatePickerStory,
|
|
65
49
|
};
|
|
@@ -5,6 +5,16 @@ declare const meta: {
|
|
|
5
5
|
component: typeof DatePickerInput;
|
|
6
6
|
args: {
|
|
7
7
|
width: "220px";
|
|
8
|
+
datePickerProps: {
|
|
9
|
+
appearance: "surfacePrimary sizeM solid rounded";
|
|
10
|
+
customTimeInput: import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
dateFormat: string;
|
|
12
|
+
placeholderText: string;
|
|
13
|
+
showTimeInput: true;
|
|
14
|
+
};
|
|
15
|
+
inputProps: {
|
|
16
|
+
appearance: "defaultPrimary sizeM solid rounded";
|
|
17
|
+
};
|
|
8
18
|
};
|
|
9
19
|
parameters: {
|
|
10
20
|
layout: string;
|
|
@@ -12,6 +22,7 @@ declare const meta: {
|
|
|
12
22
|
};
|
|
13
23
|
export default meta;
|
|
14
24
|
type Story = StoryObj<typeof meta>;
|
|
15
|
-
export declare const
|
|
25
|
+
export declare const Default: Story;
|
|
26
|
+
export declare const WithInitialDate: Story;
|
|
16
27
|
export declare const DateTime: Story;
|
|
17
28
|
export declare const DateRange: Story;
|
|
@@ -1,68 +1,66 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Button } from '../../Button';
|
|
3
3
|
import { DatePickerInput } from '../DatePicker';
|
|
4
|
+
import { createDatePickerStory } from './DatePickerStory';
|
|
4
5
|
const meta = {
|
|
5
6
|
title: 'Molecules / DatePicker / With Button',
|
|
6
7
|
component: DatePickerInput,
|
|
7
8
|
args: {
|
|
8
9
|
width: '220px',
|
|
9
|
-
},
|
|
10
|
-
parameters: {
|
|
11
|
-
layout: 'centered',
|
|
12
|
-
},
|
|
13
|
-
};
|
|
14
|
-
export default meta;
|
|
15
|
-
export const Date = {
|
|
16
|
-
args: {
|
|
17
10
|
datePickerProps: {
|
|
18
11
|
appearance: 'surfacePrimary sizeM solid rounded',
|
|
19
12
|
customTimeInput: (_jsx(Button, { appearance: "accentPrimary sizeL solid rounded", width: "fill", label: "OK" })),
|
|
20
|
-
dateFormat: 'dd
|
|
13
|
+
dateFormat: 'dd.MM.yyyy',
|
|
14
|
+
placeholderText: 'Выберите дату',
|
|
21
15
|
showTimeInput: true,
|
|
22
16
|
},
|
|
23
17
|
inputProps: {
|
|
24
18
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
25
19
|
},
|
|
26
20
|
},
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
parameters: {
|
|
22
|
+
layout: 'centered',
|
|
23
|
+
},
|
|
24
|
+
};
|
|
25
|
+
export default meta;
|
|
26
|
+
const DatePickerStory = createDatePickerStory(meta.args);
|
|
27
|
+
export const Default = {
|
|
28
|
+
render: DatePickerStory,
|
|
29
|
+
};
|
|
30
|
+
export const WithInitialDate = {
|
|
31
|
+
args: {
|
|
32
|
+
datePickerProps: {
|
|
33
|
+
placeholderText: 'Дата с начальным значением',
|
|
34
|
+
},
|
|
35
|
+
value: '2025-06-15',
|
|
29
36
|
},
|
|
37
|
+
render: DatePickerStory,
|
|
30
38
|
};
|
|
31
39
|
export const DateTime = {
|
|
32
40
|
args: {
|
|
33
41
|
datePickerProps: {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
showTimeInput: true,
|
|
42
|
+
dateFormat: 'dd.MM.yyyy HH:mm',
|
|
43
|
+
placeholderText: 'Дата и время',
|
|
44
|
+
popperPlacement: 'bottom',
|
|
38
45
|
showTimeSelect: true,
|
|
39
46
|
timeCaption: 'Время',
|
|
40
|
-
timeFormat: '
|
|
47
|
+
timeFormat: 'HH:mm',
|
|
41
48
|
timeIntervals: 15,
|
|
42
49
|
},
|
|
43
|
-
|
|
44
|
-
appearance: 'defaultPrimary sizeM solid rounded',
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
render: (args) => {
|
|
48
|
-
return _jsx(DatePickerInput, { ...args });
|
|
50
|
+
value: '2025-06-15T14:30:00',
|
|
49
51
|
},
|
|
52
|
+
render: DatePickerStory,
|
|
50
53
|
};
|
|
51
54
|
export const DateRange = {
|
|
52
55
|
args: {
|
|
56
|
+
width: '360px',
|
|
53
57
|
datePickerProps: {
|
|
54
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
55
|
-
customTimeInput: (_jsx(Button, { appearance: "accentPrimary sizeL solid rounded", width: "fill", label: "OK", shape: "rounded" })),
|
|
56
58
|
monthsShown: 2,
|
|
57
|
-
placeholderText: '
|
|
59
|
+
placeholderText: 'Начало – конец',
|
|
58
60
|
selectsRange: true,
|
|
59
|
-
showTimeInput: true,
|
|
60
61
|
},
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
render: (args) => {
|
|
66
|
-
return _jsx(DatePickerInput, { ...args });
|
|
62
|
+
endValue: '2025-06-20',
|
|
63
|
+
value: '2025-06-01',
|
|
67
64
|
},
|
|
65
|
+
render: DatePickerStory,
|
|
68
66
|
};
|
|
@@ -25,6 +25,9 @@ export const Children = {
|
|
|
25
25
|
render: (args) => _jsx(Divider, { ...args }),
|
|
26
26
|
};
|
|
27
27
|
export const Skeleton = {
|
|
28
|
+
args: {
|
|
29
|
+
isSkeleton: true,
|
|
30
|
+
},
|
|
28
31
|
play: async ({ args, canvas, step }) => {
|
|
29
32
|
await step('Divider renders with skelton class', async () => {
|
|
30
33
|
const divider = canvas.getByTestId(args.dataTestId);
|
|
@@ -32,8 +35,5 @@ export const Skeleton = {
|
|
|
32
35
|
await storybookTest.expect(divider).toHaveClass('skeleton');
|
|
33
36
|
});
|
|
34
37
|
},
|
|
35
|
-
args: {
|
|
36
|
-
isSkeleton: true,
|
|
37
|
-
},
|
|
38
38
|
render: (args) => _jsx(Divider, { ...args }),
|
|
39
39
|
};
|
|
@@ -79,6 +79,7 @@ declare const dropzoneAppearance: {
|
|
|
79
79
|
hintTitle: string;
|
|
80
80
|
hintTitleTextColor: "surfaceTextPrimary";
|
|
81
81
|
hintTitleTextSize: "m";
|
|
82
|
+
removeThumbAppearance: "dangerPrimary sizeM solid rounded";
|
|
82
83
|
removeThumbText: string;
|
|
83
84
|
removeThumbTextColor: "errorTextPrimary";
|
|
84
85
|
thumbBorderColor: "surfaceBorderTertiary";
|
|
@@ -17,7 +17,7 @@ const dropzoneConfig = {
|
|
|
17
17
|
};
|
|
18
18
|
const Dropzone = React.memo(function Dropzone(props) {
|
|
19
19
|
const { appearance, maxFiles = 5, maxSize = 10485760, // 10mb
|
|
20
|
-
dropzoneProps = {}, fieldValuesList: maybeFieldValuesList, fileErrorText, hintDescription, inputName, showFilename = true, thumbColumn, isSkeleton, isPreviews = true, onClickPreview, onAddFiles, onChangeFiles, onDeleteFile,
|
|
20
|
+
dropzoneProps = {}, fieldValuesList: maybeFieldValuesList, fileErrorText, hintDescription, inputName, showFilename = true, thumbColumn = 2, isSkeleton, isPreviews = true, onClickPreview, onAddFiles, onChangeFiles, onDeleteFile,
|
|
21
21
|
// className, unused
|
|
22
22
|
// size, unused
|
|
23
23
|
} = props;
|
|
@@ -5,6 +5,7 @@ declare const dropzoneAppearanceDefault: {
|
|
|
5
5
|
hintTitle: string;
|
|
6
6
|
hintTitleTextColor: "surfaceTextPrimary";
|
|
7
7
|
hintTitleTextSize: "m";
|
|
8
|
+
removeThumbAppearance: "dangerPrimary sizeM solid rounded";
|
|
8
9
|
removeThumbText: string;
|
|
9
10
|
removeThumbTextColor: "errorTextPrimary";
|
|
10
11
|
thumbBorderColor: "surfaceBorderTertiary";
|
|
@@ -5,6 +5,7 @@ const dropzoneAppearanceDefault = {
|
|
|
5
5
|
hintTitle: 'Перетащите изображение или выберите файл с компьютера',
|
|
6
6
|
hintTitleTextColor: 'surfaceTextPrimary',
|
|
7
7
|
hintTitleTextSize: 'm',
|
|
8
|
+
removeThumbAppearance: 'dangerPrimary sizeM solid rounded',
|
|
8
9
|
removeThumbText: 'удалить',
|
|
9
10
|
removeThumbTextColor: 'errorTextPrimary',
|
|
10
11
|
thumbBorderColor: 'surfaceBorderTertiary',
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { Dropzone } from '../';
|
|
5
|
+
import { dropzoneFieldValuesListMock } from './__mock__';
|
|
5
6
|
const meta = {
|
|
6
7
|
title: 'Molecules / Dropzone',
|
|
7
8
|
component: Dropzone,
|
|
@@ -17,6 +18,12 @@ export const Default = {
|
|
|
17
18
|
return (_jsx(Dropzone, { ...args, fieldValuesList: values, onChangeFiles: setValues }));
|
|
18
19
|
},
|
|
19
20
|
};
|
|
21
|
+
export const WithFiles = {
|
|
22
|
+
render: (args) => {
|
|
23
|
+
const [values, setValues] = useState(dropzoneFieldValuesListMock);
|
|
24
|
+
return (_jsx(Dropzone, { ...args, fieldValuesList: values, onChangeFiles: setValues }));
|
|
25
|
+
},
|
|
26
|
+
};
|
|
20
27
|
export const Skeleton = {
|
|
21
28
|
args: {
|
|
22
29
|
isSkeleton: true,
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** Form/backend values before hook converts them to DropzoneFileItem */
|
|
2
|
+
const dropzoneFieldValuesListMock = [
|
|
3
|
+
{
|
|
4
|
+
id: 'dropzone-story-mock-1',
|
|
5
|
+
name: 'image-1.png',
|
|
6
|
+
image: '/avatar/Man.png',
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
id: 'dropzone-story-mock-2',
|
|
10
|
+
name: 'image-2.png',
|
|
11
|
+
image: '/avatar/Woman.png',
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
id: 'dropzone-story-mock-3',
|
|
15
|
+
name: 'image-3.png',
|
|
16
|
+
image: '/avatar/Woman2.png',
|
|
17
|
+
},
|
|
18
|
+
];
|
|
19
|
+
export { dropzoneFieldValuesListMock };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.113",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -114,5 +114,5 @@
|
|
|
114
114
|
"storybook": "^10.4.0",
|
|
115
115
|
"typescript": "^6.0.3"
|
|
116
116
|
},
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "1a3cb82207abc56131b2ba26fa8f837886168942"
|
|
118
118
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("clsx"),a=require("date-fns/locale"),i=require("react-datepicker"),o=require("@itcase/ui-core/hooks"),l=require("./Button_cjs_CDr9zTdB.js"),c=require("./primitives_cjs_ocTnUpml.js"),n=require("./Input_cjs_D9PxC_lJ.js"),s=require("./Label_cjs_DI2LmDIX.js"),p=require("./default_cjs_BMbs2it-.js");const u={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:p.icons14.Arrow.ChevronLeft,iconRight:p.icons14.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:p.icons14.Arrow.ChevronLeft,iconRight:p.icons14.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:p.icons14.Arrow.ChevronLeft,iconRight:p.icons14.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},d=e=>{const t=e.getDay()||7,r=new Date(e);r.setDate(e.getDate()-(t-1));const a=new Date(r);return a.setDate(r.getDate()+6),{mondayDate:r,sundayDate:a}},m={appearance:u,setAppearance:e=>{m.appearance=e}};const x=t.forwardRef((a,i)=>{const{inputIcon:o,inputProps:l,value:c,isClearable:s}=a,p=t.useMemo(()=>{if(c){const e=c.split(" - ");return e[0]===e[1]?e[0]:c}return""},[c]);return e.jsxs(t.Fragment,{children:[e.jsx(n.Input,{...a,...l,className:r(l?.className,"datepicker__input"),ref:i,autocomplete:"off",value:p}),o&&e.jsx(S,{...l}),s&&e.jsx(h,{...l})]})});function h(a){const{clearIcon:i,clearIconFill:o,clearIconFillHover:l,clearIconFillSize:n,clearIconItemFill:p,clearIconItemFillHover:u,clearIconShape:d,clearIconSize:m,clearIconSrc:x,clearLabel:h,clearLabelTextColor:S,clearLabelTextColorHover:C,clearLabelTextSize:f,datepickerRef:y}=a,_=t.useCallback(e=>{y?.current?.onClearClick(e),y?.current?.handleFocus(e)},[]);return e.jsx(t.Fragment,{children:h?e.jsx(s.Label,{className:r("react-datepicker__clear-label","cursor_type_pointer"),label:h,labelTextColor:S,labelTextColorHover:C,labelTextSize:f,onClick:_}):(i||x)&&e.jsx(c.Icon,{className:r("react-datepicker__clear-icon","cursor_type_pointer"),size:m,fill:o,fillHover:l,fillSize:n,iconFill:p,iconFillHover:u,imageSrc:x,shape:d,SvgImage:i,onClick:_})})}function S(t){const{inputIcon:a,inputIconFill:i,inputIconFillHover:o,inputIconFillSize:l,inputIconItemFill:n,inputIconShape:s,inputIconSize:p,inputIconSrc:u,onClick:d}=t;return e.jsx(c.Icon,{className:r("react-datepicker__input-icon","cursor_type_pointer"),size:p,fill:i,fillHover:o,fillSize:l,iconFill:n,imageSrc:u,shape:s,SvgImage:a,onClick:()=>d&&d()})}exports.DatePickerInput=function(n){const{className:s,dataTestId:p,dataTour:u,datePickerProps:h={},endValue:S,inputProps:C={},value:f,onChange:y}=n,{appearance:_,customTimeInput:k,disablePastDays:g,monthsShown:z,selectsRange:I,showWeekNumbers:v,showWeekPicker:T}=h,b=o.useAppearanceConfig(_,m),j=o.useDevicePropsGenerator(h,b),{daySize:F,dayTextColor:D,dayTextShape:P,dayTextSize:w,iconFill:L,iconFillHover:N,iconFillSize:R,iconItemFill:H,iconLeft:q,iconRight:A,iconShape:W,monthTextColor:M,monthTextSize:$,monthTextWeight:B,popper:O,popperPlacement:U,sizeClass:G,widthClass:V,yearTextColor:E,yearTextSize:J,yearTextWeight:K,isClearable:Q}=j,X=t.useRef(null),[Y,Z]=t.useMemo(()=>{let e,t;return f&&(e="string"==typeof f?new Date(f):f),S&&(t="string"==typeof S?new Date(S):S),[e,t]},[f,S]),ee=t.useCallback(e=>{const t=Array.isArray(e)?e:[e],[r,a]=t;if(r&&T){const{mondayDate:e,sundayDate:t}=d(r);y?.(e,t)}else y?.(r,a)},[T,y]),te=t.useCallback(e=>{const{mondayDate:t,sundayDate:r}=d(e);y?.(t,r)},[y]),re=t.useCallback((t,r)=>e.jsx(l.Button,{className:"react-datepicker__day-button",size:F,label:r.getDate().toString(),labelTextColor:D,labelTextSize:w,shape:P}),[F,D,P,w]),ae=t.useCallback(({decreaseMonth:t,increaseMonth:r,monthDate:a})=>e.jsxs("div",{className:"react-datepicker__header--div",children:[q&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:L,fillHover:N,fillSize:R,iconFill:H,shape:W,SvgImage:q,onClick:t}),e.jsxs("div",{className:"react-datepicker__data",children:[e.jsx(c.Text,{className:"react-datepicker__month",size:$,textColor:M,textWeight:B,children:a.toLocaleString("ru-RU",{month:"long"})}),e.jsx(c.Text,{className:"react-datepicker__year",size:J,textColor:E,textWeight:K,children:a.toLocaleString("ru-RU",{year:"numeric"})})]}),A&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:L,fillHover:N,fillSize:R,iconFill:H,shape:W,SvgImage:A,onClick:r})]}),[L,N,R,H,q,A,W,M,$,B,E,J,K]),{styles:ie}=o.useStyles(n);return e.jsx("div",{className:r(s,"datepicker",z&&"datepicker_multiple-months",k&&"datepicker_button",G&&`datepicker_size_${G}`,V&&`datepicker_width_${V}`),"data-testid":p,"data-tour":u,style:ie,children:e.jsx(i,{ref:X,...h,minDate:g?new Date:void 0,customInput:e.jsx(x,{datepickerRef:X,inputProps:C,isClearable:Q}),endDate:I?Z:void 0,locale:a.ru,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:O&&`react-datepicker-popper-${O}`,popperPlacement:U,preventOpenOnFocus:!0,renderCustomHeader:ae,renderDayContents:re,selected:Y,startDate:Y,isClearable:!1,onChange:ee,onWeekSelect:v?te:void 0})})},exports.datePickerAppearance=u,exports.datePickerConfig=m;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useMemo as a,useCallback as i,useRef as o}from"react";import l from"clsx";import{ru as n}from"date-fns/locale";import c from"react-datepicker";import{useAppearanceConfig as s,useDevicePropsGenerator as p,useStyles as m}from"@itcase/ui-core/hooks";import{B as d}from"./Button_es_M2ryMLoI.js";import{I as u,T as h}from"./primitives_es_BQqNcRQk.js";import{I as f}from"./Input_es_DabuPYuA.js";import{L as S}from"./Label_es_C4QnITZA.js";import{a as y}from"./default_es_CaWUd9iO.js";const _={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},x=e=>{const t=e.getDay()||7,r=new Date(e);r.setDate(e.getDate()-(t-1));const a=new Date(r);return a.setDate(r.getDate()+6),{mondayDate:r,sundayDate:a}},C={appearance:_,setAppearance:e=>{C.appearance=e}};function z(r){const{className:f,dataTestId:S,dataTour:y,datePickerProps:_={},endValue:z,inputProps:k={},value:I,onChange:T}=r,{appearance:v,customTimeInput:F,disablePastDays:D,monthsShown:b,selectsRange:w,showWeekNumbers:P,showWeekPicker:L}=_,N=s(v,C),H=p(_,N),{daySize:R,dayTextColor:A,dayTextShape:W,dayTextSize:j,iconFill:M,iconFillHover:$,iconFillSize:B,iconItemFill:O,iconLeft:U,iconRight:V,iconShape:q,monthTextColor:E,monthTextSize:G,monthTextWeight:J,popper:K,popperPlacement:Q,sizeClass:X,widthClass:Y,yearTextColor:Z,yearTextSize:ee,yearTextWeight:te,isClearable:re}=H,ae=o(null),[ie,oe]=a(()=>{let e,t;return I&&(e="string"==typeof I?new Date(I):I),z&&(t="string"==typeof z?new Date(z):z),[e,t]},[I,z]),le=i(e=>{const t=Array.isArray(e)?e:[e],[r,a]=t;if(r&&L){const{mondayDate:e,sundayDate:t}=x(r);T?.(e,t)}else T?.(r,a)},[L,T]),ne=i(e=>{const{mondayDate:t,sundayDate:r}=x(e);T?.(t,r)},[T]),ce=i((e,r)=>t(d,{className:"react-datepicker__day-button",size:R,label:r.getDate().toString(),labelTextColor:A,labelTextSize:j,shape:W}),[R,A,W,j]),se=i(({decreaseMonth:r,increaseMonth:a,monthDate:i})=>e("div",{className:"react-datepicker__header--div",children:[U&&t(u,{className:"react-datepicker__icon",fill:M,fillHover:$,fillSize:B,iconFill:O,shape:q,SvgImage:U,onClick:r}),e("div",{className:"react-datepicker__data",children:[t(h,{className:"react-datepicker__month",size:G,textColor:E,textWeight:J,children:i.toLocaleString("ru-RU",{month:"long"})}),t(h,{className:"react-datepicker__year",size:ee,textColor:Z,textWeight:te,children:i.toLocaleString("ru-RU",{year:"numeric"})})]}),V&&t(u,{className:"react-datepicker__icon",fill:M,fillHover:$,fillSize:B,iconFill:O,shape:q,SvgImage:V,onClick:a})]}),[M,$,B,O,U,V,q,E,G,J,Z,ee,te]),{styles:pe}=m(r);return t("div",{className:l(f,"datepicker",b&&"datepicker_multiple-months",F&&"datepicker_button",X&&`datepicker_size_${X}`,Y&&`datepicker_width_${Y}`),"data-testid":S,"data-tour":y,style:pe,children:t(c,{ref:ae,..._,minDate:D?new Date:void 0,customInput:t(g,{datepickerRef:ae,inputProps:k,isClearable:re}),endDate:w?oe:void 0,locale:n,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:K&&`react-datepicker-popper-${K}`,popperPlacement:Q,preventOpenOnFocus:!0,renderCustomHeader:se,renderDayContents:ce,selected:ie,startDate:ie,isClearable:!1,onChange:le,onWeekSelect:P?ne:void 0})})}const g=r.forwardRef((i,o)=>{const{inputIcon:n,inputProps:c,value:s,isClearable:p}=i,m=a(()=>{if(s){const e=s.split(" - ");return e[0]===e[1]?e[0]:s}return""},[s]);return e(r.Fragment,{children:[t(f,{...i,...c,className:l(c?.className,"datepicker__input"),ref:o,autocomplete:"off",value:m}),n&&t(I,{...c}),p&&t(k,{...c})]})});function k(e){const{clearIcon:a,clearIconFill:o,clearIconFillHover:n,clearIconFillSize:c,clearIconItemFill:s,clearIconItemFillHover:p,clearIconShape:m,clearIconSize:d,clearIconSrc:h,clearLabel:f,clearLabelTextColor:y,clearLabelTextColorHover:_,clearLabelTextSize:x,datepickerRef:C}=e,z=i(e=>{C?.current?.onClearClick(e),C?.current?.handleFocus(e)},[]);return t(r.Fragment,{children:f?t(S,{className:l("react-datepicker__clear-label","cursor_type_pointer"),label:f,labelTextColor:y,labelTextColorHover:_,labelTextSize:x,onClick:z}):(a||h)&&t(u,{className:l("react-datepicker__clear-icon","cursor_type_pointer"),size:d,fill:o,fillHover:n,fillSize:c,iconFill:s,iconFillHover:p,imageSrc:h,shape:m,SvgImage:a,onClick:z})})}function I(e){const{inputIcon:r,inputIconFill:a,inputIconFillHover:i,inputIconFillSize:o,inputIconItemFill:n,inputIconShape:c,inputIconSize:s,inputIconSrc:p,onClick:m}=e;return t(u,{className:l("react-datepicker__input-icon","cursor_type_pointer"),size:s,fill:a,fillHover:i,fillSize:o,iconFill:n,imageSrc:p,shape:c,SvgImage:r,onClick:()=>m&&m()})}export{z as D,C as a,_ as d};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
declare const avatarStackAppearance: {
|
|
2
|
-
size16: {
|
|
3
|
-
size: "16";
|
|
4
|
-
};
|
|
5
|
-
size20: {
|
|
6
|
-
size: "20";
|
|
7
|
-
};
|
|
8
|
-
size24: {
|
|
9
|
-
size: "24";
|
|
10
|
-
};
|
|
11
|
-
size32: {
|
|
12
|
-
size: "32";
|
|
13
|
-
};
|
|
14
|
-
size40: {
|
|
15
|
-
size: "40";
|
|
16
|
-
};
|
|
17
|
-
size56: {
|
|
18
|
-
size: "56";
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
export { avatarStackAppearance };
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import * as storybookTest from 'storybook/test';
|
|
3
|
-
import { AvatarStack } from '../AvatarStack';
|
|
4
|
-
import { avatarsListMock } from '../stories/__mock__';
|
|
5
|
-
const meta = {
|
|
6
|
-
title: 'Molecules / Avatar Stack / __test__',
|
|
7
|
-
component: AvatarStack,
|
|
8
|
-
args: {
|
|
9
|
-
dataTestId: 'avatarStackTestId',
|
|
10
|
-
avatarAppearance: `surfaceSecondary size56 solid rounded`,
|
|
11
|
-
avatarsList: avatarsListMock,
|
|
12
|
-
},
|
|
13
|
-
parameters: {
|
|
14
|
-
layout: 'centered',
|
|
15
|
-
},
|
|
16
|
-
tags: ['test'],
|
|
17
|
-
};
|
|
18
|
-
export default meta;
|
|
19
|
-
export const Skeleton = {
|
|
20
|
-
play: async ({ args, canvas, step }) => {
|
|
21
|
-
await step('AvatarStack renders with skeleton class', async () => {
|
|
22
|
-
const avatarStack = canvas.getByTestId(args.dataTestId);
|
|
23
|
-
await storybookTest.expect(avatarStack).toBeInTheDocument();
|
|
24
|
-
await storybookTest.expect(avatarStack).toHaveClass('skeleton');
|
|
25
|
-
});
|
|
26
|
-
},
|
|
27
|
-
args: {
|
|
28
|
-
isSkeleton: true,
|
|
29
|
-
},
|
|
30
|
-
render: (args) => _jsx(AvatarStack, { ...args }),
|
|
31
|
-
};
|
|
32
|
-
export const Length = {
|
|
33
|
-
play: async ({ args, canvas, step }) => {
|
|
34
|
-
await step('AvatarStack renders with skeleton class', async () => {
|
|
35
|
-
const avatarStack = canvas.getByTestId(args.dataTestId);
|
|
36
|
-
await storybookTest.expect(avatarStack).toBeInTheDocument();
|
|
37
|
-
const avatarsItems = avatarStack.children;
|
|
38
|
-
await storybookTest.expect(avatarsItems.length).toBe(args.length);
|
|
39
|
-
});
|
|
40
|
-
},
|
|
41
|
-
args: {
|
|
42
|
-
length: 4,
|
|
43
|
-
},
|
|
44
|
-
render: (args) => _jsx(AvatarStack, { ...args }),
|
|
45
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
declare const avatarStackAppearanceSize: {
|
|
2
|
-
size16: {
|
|
3
|
-
size: "16";
|
|
4
|
-
};
|
|
5
|
-
size20: {
|
|
6
|
-
size: "20";
|
|
7
|
-
};
|
|
8
|
-
size24: {
|
|
9
|
-
size: "24";
|
|
10
|
-
};
|
|
11
|
-
size32: {
|
|
12
|
-
size: "32";
|
|
13
|
-
};
|
|
14
|
-
size40: {
|
|
15
|
-
size: "40";
|
|
16
|
-
};
|
|
17
|
-
size56: {
|
|
18
|
-
size: "56";
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
export { avatarStackAppearanceSize };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
const avatarStackAppearanceSize = {
|
|
2
|
-
size16: {
|
|
3
|
-
size: '16',
|
|
4
|
-
},
|
|
5
|
-
size20: {
|
|
6
|
-
size: '20',
|
|
7
|
-
},
|
|
8
|
-
size24: {
|
|
9
|
-
size: '24',
|
|
10
|
-
},
|
|
11
|
-
size32: {
|
|
12
|
-
size: '32',
|
|
13
|
-
},
|
|
14
|
-
size40: {
|
|
15
|
-
size: '40',
|
|
16
|
-
},
|
|
17
|
-
size56: {
|
|
18
|
-
size: '56',
|
|
19
|
-
},
|
|
20
|
-
};
|
|
21
|
-
export { avatarStackAppearanceSize };
|