@salutejs/sdds-cs 0.233.1-dev.0 → 0.234.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/api/sdds-cs.api.md +40 -16
- package/components/Autocomplete/Autocomplete.d.ts +12 -4
- package/components/Combobox/Combobox.d.ts +732 -24
- package/components/Mask/Mask.d.ts +12 -4
- package/components/Select/Select.d.ts +128 -0
- package/components/TextArea/TextArea.d.ts +4 -4
- package/components/TextField/TextField.d.ts +12 -4
- package/emotion/cjs/components/Autocomplete/Autocomplete.stories.tsx +14 -1
- package/emotion/cjs/components/Combobox/Combobox.stories.tsx +14 -1
- package/emotion/cjs/components/Select/Select.stories.tsx +14 -1
- package/emotion/cjs/components/TextArea/TextArea.stories.tsx +10 -58
- package/emotion/cjs/components/TextField/TextField.stories.tsx +11 -66
- package/emotion/es/components/Autocomplete/Autocomplete.stories.tsx +14 -1
- package/emotion/es/components/Combobox/Combobox.stories.tsx +14 -1
- package/emotion/es/components/Select/Select.stories.tsx +14 -1
- package/emotion/es/components/TextArea/TextArea.stories.tsx +10 -58
- package/emotion/es/components/TextField/TextField.stories.tsx +11 -66
- package/package.json +6 -6
@@ -1,7 +1,7 @@
|
|
1
1
|
import type { ComponentProps } from 'react';
|
2
2
|
import * as React from 'react';
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
-
import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
4
|
+
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
5
5
|
import { IconPlasma } from '@salutejs/plasma-icons';
|
6
6
|
|
7
7
|
import { Autocomplete } from './Autocomplete';
|
@@ -96,6 +96,19 @@ const meta: Meta<StoryProps> = {
|
|
96
96
|
},
|
97
97
|
if: { arg: 'required', truthy: false },
|
98
98
|
},
|
99
|
+
...disableProps([
|
100
|
+
'hintText',
|
101
|
+
'hintTrigger',
|
102
|
+
'hintView',
|
103
|
+
'hintSize',
|
104
|
+
'hintTargetIcon',
|
105
|
+
'hintTargetPlacement',
|
106
|
+
'hintPlacement',
|
107
|
+
'hintHasArrow',
|
108
|
+
'hintOffset',
|
109
|
+
'hintWidth',
|
110
|
+
'hintContentLeft',
|
111
|
+
]),
|
99
112
|
},
|
100
113
|
args: {
|
101
114
|
view: 'default',
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react';
|
2
2
|
import type { ComponentProps } from 'react';
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
-
import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
4
|
+
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
5
5
|
import { IconDone } from '@salutejs/plasma-icons';
|
6
6
|
|
7
7
|
import { Combobox } from './Combobox';
|
@@ -82,6 +82,19 @@ const meta: Meta<StorySelectProps> = {
|
|
82
82
|
},
|
83
83
|
if: { arg: 'required', truthy: false },
|
84
84
|
},
|
85
|
+
...disableProps([
|
86
|
+
'hintText',
|
87
|
+
'hintTrigger',
|
88
|
+
'hintView',
|
89
|
+
'hintSize',
|
90
|
+
'hintTargetIcon',
|
91
|
+
'hintTargetPlacement',
|
92
|
+
'hintPlacement',
|
93
|
+
'hintHasArrow',
|
94
|
+
'hintOffset',
|
95
|
+
'hintWidth',
|
96
|
+
'hintContentLeft',
|
97
|
+
]),
|
85
98
|
},
|
86
99
|
args: {
|
87
100
|
label: 'Label',
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react';
|
2
2
|
import type { ComponentProps } from 'react';
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
-
import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
4
|
+
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
5
5
|
import { IconPlasma } from '@salutejs/plasma-icons';
|
6
6
|
|
7
7
|
import './style.css';
|
@@ -84,6 +84,19 @@ const meta: Meta<StorySelectProps> = {
|
|
84
84
|
options: ['default', 'text'],
|
85
85
|
if: { arg: 'target', eq: 'textfield-like' },
|
86
86
|
},
|
87
|
+
...disableProps([
|
88
|
+
'hintText',
|
89
|
+
'hintTrigger',
|
90
|
+
'hintView',
|
91
|
+
'hintSize',
|
92
|
+
'hintTargetIcon',
|
93
|
+
'hintTargetPlacement',
|
94
|
+
'hintPlacement',
|
95
|
+
'hintHasArrow',
|
96
|
+
'hintOffset',
|
97
|
+
'hintWidth',
|
98
|
+
'hintContentLeft',
|
99
|
+
]),
|
87
100
|
},
|
88
101
|
args: {
|
89
102
|
target: 'textfield-like',
|
@@ -16,10 +16,6 @@ type StoryTextAreaPropsCustom = {
|
|
16
16
|
|
17
17
|
type StoryTextAreaProps = ComponentProps<typeof TextArea> & StoryTextAreaPropsCustom;
|
18
18
|
|
19
|
-
const hintViews = ['default'];
|
20
|
-
const hintSizes = ['m', 's'];
|
21
|
-
const hintTriggers = ['hover', 'click'];
|
22
|
-
|
23
19
|
const meta: Meta<StoryTextAreaProps> = {
|
24
20
|
title: 'Data Entry/TextArea',
|
25
21
|
decorators: [InSpacingDecorator],
|
@@ -72,52 +68,6 @@ const meta: Meta<StoryTextAreaProps> = {
|
|
72
68
|
},
|
73
69
|
if: { arg: 'clear', truthy: false },
|
74
70
|
},
|
75
|
-
hasHint: {
|
76
|
-
control: {
|
77
|
-
type: 'boolean',
|
78
|
-
},
|
79
|
-
},
|
80
|
-
hintText: {
|
81
|
-
control: { type: 'text' },
|
82
|
-
if: { arg: 'hasHint', truthy: true },
|
83
|
-
},
|
84
|
-
hintView: {
|
85
|
-
options: hintViews,
|
86
|
-
control: {
|
87
|
-
type: 'select',
|
88
|
-
},
|
89
|
-
if: { arg: 'hasHint', truthy: true },
|
90
|
-
},
|
91
|
-
hintSize: {
|
92
|
-
options: hintSizes,
|
93
|
-
control: {
|
94
|
-
type: 'select',
|
95
|
-
},
|
96
|
-
if: { arg: 'hasHint', truthy: true },
|
97
|
-
},
|
98
|
-
hintTrigger: {
|
99
|
-
options: hintTriggers,
|
100
|
-
control: {
|
101
|
-
type: 'inline-radio',
|
102
|
-
},
|
103
|
-
if: { arg: 'hasHint', truthy: true },
|
104
|
-
},
|
105
|
-
hintPlacement: {
|
106
|
-
options: placements,
|
107
|
-
control: {
|
108
|
-
type: 'select',
|
109
|
-
},
|
110
|
-
if: { arg: 'hasHint', truthy: true },
|
111
|
-
mappers: placements,
|
112
|
-
},
|
113
|
-
hintHasArrow: {
|
114
|
-
control: { type: 'boolean' },
|
115
|
-
if: { arg: 'hasHint', truthy: true },
|
116
|
-
},
|
117
|
-
hintWidth: {
|
118
|
-
control: { type: 'text' },
|
119
|
-
if: { arg: 'hasHint', truthy: true },
|
120
|
-
},
|
121
71
|
helperText: {
|
122
72
|
control: { type: 'text' },
|
123
73
|
},
|
@@ -161,7 +111,17 @@ const meta: Meta<StoryTextAreaProps> = {
|
|
161
111
|
'width',
|
162
112
|
'helperText',
|
163
113
|
'labelPlacement',
|
114
|
+
'hintText',
|
115
|
+
'hintTrigger',
|
164
116
|
'hintView',
|
117
|
+
'hintSize',
|
118
|
+
'hintTargetIcon',
|
119
|
+
'hintTargetPlacement',
|
120
|
+
'hintPlacement',
|
121
|
+
'hintHasArrow',
|
122
|
+
'hintOffset',
|
123
|
+
'hintWidth',
|
124
|
+
'hintContentLeft',
|
165
125
|
]),
|
166
126
|
},
|
167
127
|
args: {
|
@@ -186,14 +146,6 @@ const meta: Meta<StoryTextAreaProps> = {
|
|
186
146
|
labelPlacement: 'outer',
|
187
147
|
clear: false,
|
188
148
|
hasDivider: false,
|
189
|
-
hasHint: true,
|
190
|
-
hintText: 'Текст подсказки',
|
191
|
-
hintTrigger: 'hover',
|
192
|
-
hintView: 'default',
|
193
|
-
hintSize: 'm',
|
194
|
-
hintPlacement: 'auto',
|
195
|
-
hintWidth: '10rem',
|
196
|
-
hintHasArrow: true,
|
197
149
|
},
|
198
150
|
};
|
199
151
|
|
@@ -4,7 +4,6 @@ import type { StoryObj, Meta } from '@storybook/react';
|
|
4
4
|
import { action } from '@storybook/addon-actions';
|
5
5
|
import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
|
6
6
|
import { IconPlasma } from '@salutejs/plasma-icons';
|
7
|
-
import type { PopoverPlacement } from '@salutejs/plasma-new-hope';
|
8
7
|
|
9
8
|
import { TextField } from '.';
|
10
9
|
|
@@ -12,32 +11,10 @@ const onChange = action('onChange');
|
|
12
11
|
const onFocus = action('onFocus');
|
13
12
|
const onBlur = action('onBlur');
|
14
13
|
const onSearch = action('onSearch');
|
15
|
-
const onChipsChange = action('onChipsChange');
|
16
14
|
|
17
15
|
const sizes = ['s'];
|
18
16
|
const views = ['default', 'negative'];
|
19
17
|
const labelPlacements = ['outer'];
|
20
|
-
const hintSizes = ['m', 's'];
|
21
|
-
const hintTriggers = ['hover', 'click'];
|
22
|
-
const placements: Array<PopoverPlacement> = [
|
23
|
-
'top',
|
24
|
-
'top-start',
|
25
|
-
'top-end',
|
26
|
-
|
27
|
-
'bottom',
|
28
|
-
'bottom-start',
|
29
|
-
'bottom-end',
|
30
|
-
|
31
|
-
'left',
|
32
|
-
'left-start',
|
33
|
-
'left-end',
|
34
|
-
|
35
|
-
'right',
|
36
|
-
'right-start',
|
37
|
-
'right-end',
|
38
|
-
|
39
|
-
'auto',
|
40
|
-
];
|
41
18
|
|
42
19
|
const meta: Meta<typeof TextField> = {
|
43
20
|
title: 'Data Entry/TextField',
|
@@ -92,40 +69,6 @@ const meta: Meta<typeof TextField> = {
|
|
92
69
|
type: 'inline-radio',
|
93
70
|
},
|
94
71
|
},
|
95
|
-
hintText: {
|
96
|
-
control: { type: 'text' },
|
97
|
-
if: { arg: 'hasHint', truthy: true },
|
98
|
-
},
|
99
|
-
hintSize: {
|
100
|
-
options: hintSizes,
|
101
|
-
control: {
|
102
|
-
type: 'select',
|
103
|
-
},
|
104
|
-
if: { arg: 'hasHint', truthy: true },
|
105
|
-
},
|
106
|
-
hintTrigger: {
|
107
|
-
options: hintTriggers,
|
108
|
-
control: {
|
109
|
-
type: 'inline-radio',
|
110
|
-
},
|
111
|
-
if: { arg: 'hasHint', truthy: true },
|
112
|
-
},
|
113
|
-
hintPlacement: {
|
114
|
-
options: placements,
|
115
|
-
control: {
|
116
|
-
type: 'select',
|
117
|
-
},
|
118
|
-
if: { arg: 'hasHint', truthy: true },
|
119
|
-
mappers: placements,
|
120
|
-
},
|
121
|
-
hintHasArrow: {
|
122
|
-
control: { type: 'boolean' },
|
123
|
-
if: { arg: 'hasHint', truthy: true },
|
124
|
-
},
|
125
|
-
hintWidth: {
|
126
|
-
control: { type: 'text' },
|
127
|
-
if: { arg: 'hasHint', truthy: true },
|
128
|
-
},
|
129
72
|
chipType: {
|
130
73
|
control: 'select',
|
131
74
|
options: ['default', 'text'],
|
@@ -153,6 +96,17 @@ const meta: Meta<typeof TextField> = {
|
|
153
96
|
'minLength',
|
154
97
|
'maxLength',
|
155
98
|
'checked',
|
99
|
+
'hintText',
|
100
|
+
'hintTrigger',
|
101
|
+
'hintView',
|
102
|
+
'hintSize',
|
103
|
+
'hintTargetIcon',
|
104
|
+
'hintTargetPlacement',
|
105
|
+
'hintPlacement',
|
106
|
+
'hintHasArrow',
|
107
|
+
'hintOffset',
|
108
|
+
'hintWidth',
|
109
|
+
'hintContentLeft',
|
156
110
|
]),
|
157
111
|
},
|
158
112
|
};
|
@@ -179,7 +133,6 @@ type StoryPropsDefault = Omit<
|
|
179
133
|
| 'chips'
|
180
134
|
| 'onChangeChips'
|
181
135
|
> & {
|
182
|
-
hasHint: boolean;
|
183
136
|
enableContentLeft: boolean;
|
184
137
|
enableContentRight: boolean;
|
185
138
|
};
|
@@ -243,14 +196,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
|
|
243
196
|
enableContentRight: true,
|
244
197
|
clear: false,
|
245
198
|
hasDivider: false,
|
246
|
-
hasHint: true,
|
247
|
-
hintText: 'Текст подсказки',
|
248
|
-
hintTrigger: 'hover',
|
249
|
-
hintView: 'default',
|
250
|
-
hintSize: 'm',
|
251
|
-
hintPlacement: 'auto',
|
252
|
-
hintWidth: '10rem',
|
253
|
-
hintHasArrow: true,
|
254
199
|
},
|
255
200
|
parameters: {
|
256
201
|
controls: {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/sdds-cs",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.234.0-dev.0",
|
4
4
|
"description": "Salute Design System / React UI kit for SDDS CS web applications",
|
5
5
|
"author": "Salute Frontend Team <salute.developers@gmail.com>",
|
6
6
|
"license": "MIT",
|
@@ -30,7 +30,7 @@
|
|
30
30
|
"directory": "packages/sdds-cs"
|
31
31
|
},
|
32
32
|
"dependencies": {
|
33
|
-
"@salutejs/plasma-new-hope": "0.
|
33
|
+
"@salutejs/plasma-new-hope": "0.245.0-dev.0",
|
34
34
|
"@salutejs/sdds-themes": "0.31.0"
|
35
35
|
},
|
36
36
|
"peerDependencies": {
|
@@ -112,9 +112,9 @@
|
|
112
112
|
},
|
113
113
|
"typeCoverage": {
|
114
114
|
"ignoreFiles": [
|
115
|
-
"src
|
116
|
-
"src
|
117
|
-
"src
|
115
|
+
"src/**/*.component-test.tsx",
|
116
|
+
"src/**/*.stories.tsx",
|
117
|
+
"src/**/*.perftest.tsx"
|
118
118
|
],
|
119
119
|
"atLeast": 99.94
|
120
120
|
},
|
@@ -123,5 +123,5 @@
|
|
123
123
|
"Anton Vinogradov"
|
124
124
|
],
|
125
125
|
"sideEffects": false,
|
126
|
-
"gitHead": "
|
126
|
+
"gitHead": "7165c5c02d9dad44736de88e0193885a9dad8550"
|
127
127
|
}
|