Skip to content

Commit 26e3a19

Browse files
mirkamirka
committed
Simplify custom validity stories
1 parent 4f8b275 commit 26e3a19

14 files changed

+179
-328
lines changed

‎packages/components/src/validated-form-controls/components/stories/checkbox-control.story.tsx‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -32,31 +32,23 @@ export default meta;
3232
export const Default: StoryObj< typeof ValidatedCheckboxControl > = {
3333
render: function Template( { onChange, ...args } ) {
3434
const [ checked, setChecked ] = useState( false );
35-
const [ customValidity, setCustomValidity ] =
36-
useState<
37-
React.ComponentProps<
38-
typeof ValidatedCheckboxControl
39-
>[ 'customValidity' ]
40-
>( undefined );
4135

4236
return (
4337
<ValidatedCheckboxControl
4438
{ ...args }
4539
checked={ checked }
46-
onChange={ ( value ) => {
47-
if ( value ) {
48-
setCustomValidity( {
49-
type: 'invalid',
50-
message: 'This checkbox may not be checked.',
51-
} );
52-
} else {
53-
setCustomValidity( undefined );
54-
}
55-
56-
setChecked( value );
57-
onChange?.( value );
40+
onChange={ ( newValue ) => {
41+
setChecked( newValue );
42+
onChange?.( newValue );
5843
} }
59-
customValidity={ customValidity }
44+
customValidity={
45+
checked
46+
? {
47+
type: 'invalid',
48+
message: 'This checkbox may not be checked.',
49+
}
50+
: undefined
51+
}
6052
/>
6153
);
6254
},

‎packages/components/src/validated-form-controls/components/stories/combobox-control.story.tsx‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,31 +35,23 @@ export const Default: StoryObj< typeof ValidatedComboboxControl > = {
3535
typeof ValidatedComboboxControl
3636
>[ 'value' ]
3737
>();
38-
const [ customValidity, setCustomValidity ] =
39-
useState<
40-
React.ComponentProps<
41-
typeof ValidatedComboboxControl
42-
>[ 'customValidity' ]
43-
>( undefined );
4438

4539
return (
4640
<ValidatedComboboxControl
4741
{ ...args }
4842
value={ value }
4943
onChange={ ( newValue ) => {
50-
if ( newValue === 'a' ) {
51-
setCustomValidity( {
52-
type: 'invalid',
53-
message: 'Option A is not allowed.',
54-
} );
55-
} else {
56-
setCustomValidity( undefined );
57-
}
58-
5944
setValue( newValue );
6045
onChange?.( newValue );
6146
} }
62-
customValidity={ customValidity }
47+
customValidity={
48+
value === 'a'
49+
? {
50+
type: 'invalid',
51+
message: 'Option A is not allowed.',
52+
}
53+
: undefined
54+
}
6355
/>
6456
);
6557
},

‎packages/components/src/validated-form-controls/components/stories/custom-select-control.story.tsx‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,31 +35,23 @@ export const Default: StoryObj< typeof ValidatedCustomSelectControl > = {
3535
typeof ValidatedCustomSelectControl
3636
>[ 'value' ]
3737
>();
38-
const [ customValidity, setCustomValidity ] =
39-
useState<
40-
React.ComponentProps<
41-
typeof ValidatedCustomSelectControl
42-
>[ 'customValidity' ]
43-
>( undefined );
4438

4539
return (
4640
<ValidatedCustomSelectControl
4741
{ ...args }
4842
value={ value }
4943
onChange={ ( newValue ) => {
50-
if ( newValue.selectedItem?.key === 'a' ) {
51-
setCustomValidity( {
52-
type: 'invalid',
53-
message: 'Option A is not allowed.',
54-
} );
55-
} else {
56-
setCustomValidity( undefined );
57-
}
58-
5944
setValue( newValue.selectedItem );
6045
onChange?.( newValue );
6146
} }
62-
customValidity={ customValidity }
47+
customValidity={
48+
value?.key === 'a'
49+
? {
50+
type: 'invalid',
51+
message: 'Option A is not allowed.',
52+
}
53+
: undefined
54+
}
6355
/>
6456
);
6557
},

‎packages/components/src/validated-form-controls/components/stories/form-token-field.story.tsx‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -36,37 +36,27 @@ export default meta;
3636
export const Default: StoryObj< typeof ValidatedFormTokenField > = {
3737
render: function Template( { onChange, ...args } ) {
3838
const [ value, setValue ] = useState< ( string | TokenItem )[] >( [] );
39-
const [ customValidity, setCustomValidity ] =
40-
useState<
41-
React.ComponentProps<
42-
typeof ValidatedFormTokenField
43-
>[ 'customValidity' ]
44-
>( undefined );
4539

4640
return (
4741
<ValidatedFormTokenField
4842
{ ...args }
4943
value={ value }
50-
onChange={ ( newValue, ...rest ) => {
51-
if (
52-
newValue?.some( ( token ) => {
53-
const tokenValue =
54-
typeof token === 'string' ? token : token.value;
55-
return tokenValue.toLowerCase() === 'error';
56-
} )
57-
) {
58-
setCustomValidity( {
59-
type: 'invalid',
60-
message: 'The tag "error" is not allowed.',
61-
} );
62-
} else {
63-
setCustomValidity( undefined );
64-
}
65-
44+
onChange={ ( newValue ) => {
6645
setValue( newValue );
67-
onChange?.( newValue, ...rest );
46+
onChange?.( newValue );
6847
} }
69-
customValidity={ customValidity }
48+
customValidity={
49+
value?.some( ( token ) => {
50+
const tokenValue =
51+
typeof token === 'string' ? token : token.value;
52+
return tokenValue.toLowerCase() === 'error';
53+
} )
54+
? {
55+
type: 'invalid',
56+
message: 'The tag "error" is not allowed.',
57+
}
58+
: undefined
59+
}
7060
/>
7161
);
7262
},

‎packages/components/src/validated-form-controls/components/stories/input-control.story.tsx‎

Lines changed: 30 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -42,35 +42,24 @@ export default meta;
4242

4343
export const Default: StoryObj< typeof ValidatedInputControl > = {
4444
render: function Template( { onChange, ...args } ) {
45-
const [ value, setValue ] =
46-
useState<
47-
React.ComponentProps< typeof ValidatedInputControl >[ 'value' ]
48-
>( '' );
49-
const [ customValidity, setCustomValidity ] =
50-
useState<
51-
React.ComponentProps<
52-
typeof ValidatedInputControl
53-
>[ 'customValidity' ]
54-
>( undefined );
45+
const [ value, setValue ] = useState< string | undefined >( '' );
5546

5647
return (
5748
<ValidatedInputControl
5849
{ ...args }
5950
value={ value }
6051
onChange={ ( newValue, ...rest ) => {
61-
if ( newValue?.toLowerCase() === 'error' ) {
62-
setCustomValidity( {
63-
type: 'invalid',
64-
message: 'The word "error" is not allowed.',
65-
} );
66-
} else {
67-
setCustomValidity( undefined );
68-
}
69-
7052
setValue( newValue );
7153
onChange?.( newValue, ...rest );
7254
} }
73-
customValidity={ customValidity }
55+
customValidity={
56+
value?.toLowerCase() === 'error'
57+
? {
58+
type: 'invalid',
59+
message: 'The word "error" is not allowed.',
60+
}
61+
: undefined
62+
}
7463
/>
7564
);
7665
},
@@ -88,17 +77,8 @@ Default.args = {
8877
*/
8978
export const Password: StoryObj< typeof ValidatedInputControl > = {
9079
render: function Template( { onChange, ...args } ) {
91-
const [ value, setValue ] =
92-
useState<
93-
React.ComponentProps< typeof ValidatedInputControl >[ 'value' ]
94-
>( '' );
80+
const [ value, setValue ] = useState< string | undefined >( '' );
9581
const [ visible, setVisible ] = useState( false );
96-
const [ customValidity, setCustomValidity ] =
97-
useState<
98-
React.ComponentProps<
99-
typeof ValidatedInputControl
100-
>[ 'customValidity' ]
101-
>( undefined );
10282

10383
return (
10484
<ValidatedInputControl
@@ -118,32 +98,33 @@ export const Password: StoryObj< typeof ValidatedInputControl > = {
11898
}
11999
value={ value }
120100
onChange={ ( newValue, ...rest ) => {
121-
if ( ! /\d/.test( newValue ?? '' ) ) {
122-
setCustomValidity( {
123-
type: 'invalid',
101+
setValue( newValue );
102+
onChange?.( newValue, ...rest );
103+
} }
104+
customValidity={ ( () => {
105+
if ( ! /\d/.test( value ?? '' ) ) {
106+
return {
107+
type: 'invalid' as const,
124108
message:
125109
'Password must include at least one number.',
126-
} );
127-
} else if ( ! /[A-Z]/.test( newValue ?? '' ) ) {
128-
setCustomValidity( {
129-
type: 'invalid',
110+
};
111+
}
112+
if ( ! /[A-Z]/.test( value ?? '' ) ) {
113+
return {
114+
type: 'invalid' as const,
130115
message:
131116
'Password must include at least one capital letter.',
132-
} );
133-
} else if ( ! /[!@£$%^&*#]/.test( newValue ?? '' ) ) {
134-
setCustomValidity( {
135-
type: 'invalid',
117+
};
118+
}
119+
if ( ! /[!@£$%^&*#]/.test( value ?? '' ) ) {
120+
return {
121+
type: 'invalid' as const,
136122
message:
137123
'Password must include at least one symbol.',
138-
} );
139-
} else {
140-
setCustomValidity( undefined );
124+
};
141125
}
142-
143-
setValue( newValue );
144-
onChange?.( newValue, ...rest );
145-
} }
146-
customValidity={ customValidity }
126+
return undefined;
127+
} )() }
147128
/>
148129
);
149130
},

‎packages/components/src/validated-form-controls/components/stories/number-control.story.tsx‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -37,34 +37,23 @@ export const Default: StoryObj< typeof ValidatedNumberControl > = {
3737
useState<
3838
React.ComponentProps< typeof ValidatedNumberControl >[ 'value' ]
3939
>();
40-
const [ customValidity, setCustomValidity ] =
41-
useState<
42-
React.ComponentProps<
43-
typeof ValidatedNumberControl
44-
>[ 'customValidity' ]
45-
>( undefined );
4640

4741
return (
4842
<ValidatedNumberControl
4943
{ ...args }
5044
value={ value }
51-
onChange={ ( newValue, ...rest ) => {
52-
if (
53-
newValue &&
54-
parseInt( newValue.toString(), 10 ) % 2 !== 0
55-
) {
56-
setCustomValidity( {
57-
type: 'invalid',
58-
message: 'Choose an even number.',
59-
} );
60-
} else {
61-
setCustomValidity( undefined );
62-
}
63-
45+
onChange={ ( newValue, extra ) => {
6446
setValue( newValue );
65-
onChange?.( newValue, ...rest );
47+
onChange?.( newValue, extra );
6648
} }
67-
customValidity={ customValidity }
49+
customValidity={
50+
value && parseInt( value.toString(), 10 ) % 2 !== 0
51+
? {
52+
type: 'invalid',
53+
message: 'Choose an even number.',
54+
}
55+
: undefined
56+
}
6857
/>
6958
);
7059
},

0 commit comments

Comments
 (0)