@salutejs/sdds-cs 0.233.1-dev.0 → 0.234.0-dev.0
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/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
|
}
|