@salutejs/plasma-new-hope 0.194.0-canary.1565.11870784206.0 → 0.194.0-canary.1568.11891833298.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (162) hide show
  1. package/cjs/components/Switch/Switch.css +2 -2
  2. package/cjs/components/Switch/Switch.tokens.js +7 -1
  3. package/cjs/components/Switch/Switch.tokens.js.map +1 -1
  4. package/cjs/components/Switch/_toggleSize/base.js +1 -1
  5. package/cjs/components/Switch/_toggleSize/base.js.map +1 -1
  6. package/cjs/components/Switch/_toggleSize/base_1d0b3t4.css +1 -0
  7. package/cjs/components/Switch/_view/base.js +1 -1
  8. package/cjs/components/Switch/_view/base.js.map +1 -1
  9. package/cjs/components/Switch/_view/base_15atbyp.css +1 -0
  10. package/cjs/components/TextField/TextField.js +3 -27
  11. package/cjs/components/TextField/TextField.js.map +1 -1
  12. package/cjs/index.css +2 -2
  13. package/cjs/utils/constants.js +0 -4
  14. package/cjs/utils/constants.js.map +1 -1
  15. package/emotion/cjs/components/Card/Card.api.mdx +184 -0
  16. package/emotion/cjs/components/Switch/Switch.tokens.js +7 -1
  17. package/emotion/cjs/components/Switch/_toggleSize/base.js +1 -1
  18. package/emotion/cjs/components/Switch/_view/base.js +1 -1
  19. package/emotion/cjs/components/TextField/TextField.js +4 -27
  20. package/emotion/cjs/components/TextField/TextField.template-doc.mdx +0 -330
  21. package/emotion/cjs/components/TextField/hooks/index.js +1 -8
  22. package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +8 -8
  23. package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.js +5 -2
  24. package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.outline.config.js +37 -0
  25. package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +33 -1
  26. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +1 -253
  27. package/emotion/cjs/examples/plasma_web/components/Switch/Switch.config.js +8 -8
  28. package/emotion/cjs/examples/plasma_web/components/Switch/Switch.js +5 -2
  29. package/emotion/cjs/examples/plasma_web/components/Switch/Switch.outline.config.js +37 -0
  30. package/emotion/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +33 -1
  31. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -252
  32. package/emotion/cjs/utils/constants.js +2 -4
  33. package/emotion/es/components/Card/Card.api.mdx +184 -0
  34. package/emotion/es/components/Switch/Switch.tokens.js +7 -1
  35. package/emotion/es/components/Switch/_toggleSize/base.js +1 -1
  36. package/emotion/es/components/Switch/_view/base.js +1 -1
  37. package/emotion/es/components/TextField/TextField.js +5 -28
  38. package/emotion/es/components/TextField/TextField.template-doc.mdx +0 -330
  39. package/emotion/es/components/TextField/hooks/index.js +1 -2
  40. package/emotion/es/examples/plasma_b2c/components/Switch/Switch.config.js +8 -8
  41. package/emotion/es/examples/plasma_b2c/components/Switch/Switch.js +4 -1
  42. package/emotion/es/examples/plasma_b2c/components/Switch/Switch.outline.config.js +31 -0
  43. package/emotion/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +33 -1
  44. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +1 -253
  45. package/emotion/es/examples/plasma_web/components/Switch/Switch.config.js +8 -8
  46. package/emotion/es/examples/plasma_web/components/Switch/Switch.js +4 -1
  47. package/emotion/es/examples/plasma_web/components/Switch/Switch.outline.config.js +31 -0
  48. package/emotion/es/examples/plasma_web/components/Switch/Switch.stories.tsx +33 -1
  49. package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -252
  50. package/emotion/es/utils/constants.js +1 -3
  51. package/es/components/Switch/Switch.css +2 -2
  52. package/es/components/Switch/Switch.tokens.js +7 -1
  53. package/es/components/Switch/Switch.tokens.js.map +1 -1
  54. package/es/components/Switch/_toggleSize/base.js +1 -1
  55. package/es/components/Switch/_toggleSize/base.js.map +1 -1
  56. package/es/components/Switch/_toggleSize/base_1d0b3t4.css +1 -0
  57. package/es/components/Switch/_view/base.js +1 -1
  58. package/es/components/Switch/_view/base.js.map +1 -1
  59. package/es/components/Switch/_view/base_15atbyp.css +1 -0
  60. package/es/components/TextField/TextField.js +3 -27
  61. package/es/components/TextField/TextField.js.map +1 -1
  62. package/es/index.css +2 -2
  63. package/es/utils/constants.js +1 -3
  64. package/es/utils/constants.js.map +1 -1
  65. package/package.json +2 -2
  66. package/styled-components/cjs/components/Card/Card.api.mdx +184 -0
  67. package/styled-components/cjs/components/Switch/Switch.tokens.js +7 -1
  68. package/styled-components/cjs/components/Switch/_toggleSize/base.js +1 -1
  69. package/styled-components/cjs/components/Switch/_view/base.js +1 -1
  70. package/styled-components/cjs/components/TextField/TextField.js +3 -26
  71. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +0 -330
  72. package/styled-components/cjs/components/TextField/hooks/index.js +1 -8
  73. package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
  74. package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.js +5 -2
  75. package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.outline.config.js +37 -0
  76. package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +33 -1
  77. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +1 -253
  78. package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js +1 -1
  79. package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.js +5 -2
  80. package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.outline.config.js +37 -0
  81. package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +33 -1
  82. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -252
  83. package/styled-components/cjs/utils/constants.js +2 -4
  84. package/styled-components/es/components/Card/Card.api.mdx +184 -0
  85. package/styled-components/es/components/Switch/Switch.tokens.js +7 -1
  86. package/styled-components/es/components/Switch/_toggleSize/base.js +1 -1
  87. package/styled-components/es/components/Switch/_view/base.js +1 -1
  88. package/styled-components/es/components/TextField/TextField.js +4 -27
  89. package/styled-components/es/components/TextField/TextField.template-doc.mdx +0 -330
  90. package/styled-components/es/components/TextField/hooks/index.js +1 -2
  91. package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
  92. package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.js +4 -1
  93. package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.outline.config.js +31 -0
  94. package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +33 -1
  95. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +1 -253
  96. package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js +1 -1
  97. package/styled-components/es/examples/plasma_web/components/Switch/Switch.js +4 -1
  98. package/styled-components/es/examples/plasma_web/components/Switch/Switch.outline.config.js +31 -0
  99. package/styled-components/es/examples/plasma_web/components/Switch/Switch.stories.tsx +33 -1
  100. package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -252
  101. package/styled-components/es/utils/constants.js +1 -3
  102. package/types/components/Autocomplete/Autocomplete.types.d.ts +2 -2
  103. package/types/components/Autocomplete/Autocomplete.types.d.ts.map +1 -1
  104. package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +92 -1676
  105. package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
  106. package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts +92 -1676
  107. package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts.map +1 -1
  108. package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +92 -1676
  109. package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
  110. package/types/components/Range/Range.styles.d.ts +92 -1676
  111. package/types/components/Range/Range.styles.d.ts.map +1 -1
  112. package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts +92 -1676
  113. package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts.map +1 -1
  114. package/types/components/Slider/components/Double/Double.styles.d.ts +92 -1676
  115. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
  116. package/types/components/Switch/Switch.tokens.d.ts +7 -1
  117. package/types/components/Switch/Switch.tokens.d.ts.map +1 -1
  118. package/types/components/Switch/_toggleSize/base.d.ts.map +1 -1
  119. package/types/components/Switch/_view/base.d.ts.map +1 -1
  120. package/types/components/TextField/TextField.d.ts.map +1 -1
  121. package/types/components/TextField/TextField.types.d.ts +1 -51
  122. package/types/components/TextField/TextField.types.d.ts.map +1 -1
  123. package/types/components/TextField/hooks/index.d.ts +0 -1
  124. package/types/components/TextField/hooks/index.d.ts.map +1 -1
  125. package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts +2 -64
  126. package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts.map +1 -1
  127. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +92 -2732
  128. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +1 -1
  129. package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map +1 -1
  130. package/types/examples/plasma_b2c/components/Switch/Switch.d.ts +20 -0
  131. package/types/examples/plasma_b2c/components/Switch/Switch.d.ts.map +1 -1
  132. package/types/examples/plasma_b2c/components/Switch/Switch.outline.config.d.ts +30 -0
  133. package/types/examples/plasma_b2c/components/Switch/Switch.outline.config.d.ts.map +1 -0
  134. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +92 -1676
  135. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
  136. package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts +2 -64
  137. package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts.map +1 -1
  138. package/types/examples/plasma_web/components/Mask/Mask.d.ts +92 -2732
  139. package/types/examples/plasma_web/components/Mask/Mask.d.ts.map +1 -1
  140. package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map +1 -1
  141. package/types/examples/plasma_web/components/Switch/Switch.d.ts +20 -0
  142. package/types/examples/plasma_web/components/Switch/Switch.d.ts.map +1 -1
  143. package/types/examples/plasma_web/components/Switch/Switch.outline.config.d.ts +30 -0
  144. package/types/examples/plasma_web/components/Switch/Switch.outline.config.d.ts.map +1 -0
  145. package/types/examples/plasma_web/components/TextField/TextField.d.ts +92 -1676
  146. package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
  147. package/types/utils/constants.d.ts +0 -2
  148. package/types/utils/constants.d.ts.map +1 -1
  149. package/cjs/components/Switch/_toggleSize/base_6i0904.css +0 -1
  150. package/cjs/components/Switch/_view/base_yxkf3s.css +0 -1
  151. package/cjs/components/TextField/hooks/useValidation.js +0 -273
  152. package/cjs/components/TextField/hooks/useValidation.js.map +0 -1
  153. package/emotion/cjs/components/TextField/hooks/useValidation.js +0 -276
  154. package/emotion/es/components/TextField/hooks/useValidation.js +0 -270
  155. package/es/components/Switch/_toggleSize/base_6i0904.css +0 -1
  156. package/es/components/Switch/_view/base_yxkf3s.css +0 -1
  157. package/es/components/TextField/hooks/useValidation.js +0 -269
  158. package/es/components/TextField/hooks/useValidation.js.map +0 -1
  159. package/styled-components/cjs/components/TextField/hooks/useValidation.js +0 -276
  160. package/styled-components/es/components/TextField/hooks/useValidation.js +0 -270
  161. package/types/components/TextField/hooks/useValidation.d.ts +0 -7
  162. package/types/components/TextField/hooks/useValidation.d.ts.map +0 -1
@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
9
9
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
10
10
 
11
11
  import { config } from './Switch.config';
12
- import { Switch } from './Switch';
12
+ import { Switch, SwitchOutline } from './Switch';
13
13
 
14
14
  type SwitchProps = ComponentProps<typeof Switch>;
15
15
 
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
72
72
  },
73
73
  render: (args) => <StoryDefault {...args} />,
74
74
  };
75
+
76
+ const StoryOutline = (args: SwitchProps) => {
77
+ const value = 'yes';
78
+ const name = 'agree';
79
+ const [checked, setChecked] = useState(true);
80
+
81
+ return (
82
+ <StyledWrapper>
83
+ <SwitchOutline
84
+ value={value}
85
+ name={name}
86
+ checked={checked}
87
+ onChange={(event) => {
88
+ setChecked(event.target.checked);
89
+ onChange(event);
90
+ }}
91
+ onFocus={onFocus}
92
+ onBlur={onBlur}
93
+ {...args}
94
+ />
95
+ </StyledWrapper>
96
+ );
97
+ };
98
+
99
+ export const Outline: StoryObj<SwitchProps> = {
100
+ args: {
101
+ size: 'm',
102
+ toggleSize: 'l',
103
+ disabled: false,
104
+ },
105
+ render: (args) => <StoryOutline {...args} />,
106
+ };
@@ -1,7 +1,7 @@
1
1
  import React, { ComponentProps, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
- import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
4
+ import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { WithTheme } from '../../../_helpers';
7
7
  import { IconCross } from '../../../../components/_Icon';
@@ -291,255 +291,3 @@ export const Chips: StoryObj<StoryPropsChips> = {
291
291
  },
292
292
  render: (args) => <StoryChips {...args} />,
293
293
  };
294
-
295
- type StoryEmailValidationProps = StoryPropsDefault & {
296
- minLengthValue?: number;
297
- minLengthErrorMessage?: string;
298
- maxLengthValue?: number;
299
- maxLengthErrorMessage?: string;
300
- minHostLengthValue?: number;
301
- minHostLengthErrorMessage?: string;
302
- maxHostLengthValue?: number;
303
- maxHostLengthErrorMessage?: string;
304
- minDomainLengthValue?: number;
305
- minDomainLengthErrorMessage?: string;
306
- maxDomainLengthValue?: number;
307
- maxDomainLengthErrorMessage?: string;
308
- minZoneLengthValue?: number;
309
- minZoneLengthErrorMessage?: string;
310
- maxZoneLengthValue?: number;
311
- maxZoneLengthErrorMessage?: string;
312
- whitelistDomainsValue?: string;
313
- whitelistDomainsErrorMessage?: string;
314
- blacklistDomainsValue?: string;
315
- blacklistDomainsErrorMessage?: string;
316
- };
317
-
318
- const StoryEmailValidation = ({
319
- minLengthValue,
320
- minLengthErrorMessage,
321
- maxLengthValue,
322
- maxLengthErrorMessage,
323
- minHostLengthValue,
324
- minHostLengthErrorMessage,
325
- maxHostLengthValue,
326
- maxHostLengthErrorMessage,
327
- minDomainLengthValue,
328
- minDomainLengthErrorMessage,
329
- maxDomainLengthValue,
330
- maxDomainLengthErrorMessage,
331
- minZoneLengthValue,
332
- minZoneLengthErrorMessage,
333
- maxZoneLengthValue,
334
- maxZoneLengthErrorMessage,
335
- whitelistDomainsValue,
336
- whitelistDomainsErrorMessage,
337
- blacklistDomainsValue,
338
- blacklistDomainsErrorMessage,
339
- ...rest
340
- }: StoryEmailValidationProps) => {
341
- const [error, setError] = useState('');
342
-
343
- const validationOptions = {
344
- minLength: {
345
- value: minLengthValue || undefined,
346
- errorMessage: minLengthErrorMessage || 'Почта слишком короткая',
347
- },
348
- maxLength: {
349
- value: maxLengthValue || undefined,
350
- errorMessage: maxLengthErrorMessage || 'Почта слишком длинная',
351
- },
352
- minHostLength: {
353
- value: minHostLengthValue || undefined,
354
- errorMessage: minHostLengthErrorMessage || 'Хост слишком короткий',
355
- },
356
- maxHostLength: {
357
- value: maxHostLengthValue || undefined,
358
- errorMessage: maxHostLengthErrorMessage || 'Хост слишком длинный',
359
- },
360
- minDomainLength: {
361
- value: minDomainLengthValue || undefined,
362
- errorMessage: minDomainLengthErrorMessage || 'Домен слишком короткий',
363
- },
364
- maxDomainLength: {
365
- value: maxDomainLengthValue || undefined,
366
- errorMessage: maxDomainLengthErrorMessage || 'Домен слишком длинный',
367
- },
368
- minZoneLength: {
369
- value: minZoneLengthValue || undefined,
370
- errorMessage: minZoneLengthErrorMessage || 'Доменная зона слишком короткая',
371
- },
372
- maxZoneLength: {
373
- value: maxZoneLengthValue || undefined,
374
- errorMessage: maxZoneLengthErrorMessage || 'Доменная зона слишком длинная',
375
- },
376
- whitelistDomains: {
377
- value: whitelistDomainsValue?.split(',') || undefined,
378
- errorMessage: whitelistDomainsErrorMessage || 'Домен не разрешен',
379
- },
380
- blacklistDomains: {
381
- value: blacklistDomainsValue?.split(',') || undefined,
382
- errorMessage: blacklistDomainsErrorMessage || 'Домен запрещен',
383
- },
384
- };
385
-
386
- const handleOnChange = () => {
387
- setError('');
388
- };
389
-
390
- const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
391
- setError(errorMessage || '');
392
- };
393
-
394
- return (
395
- <TextField
396
- label="Валидация почты"
397
- validationType="email"
398
- options={validationOptions}
399
- size="l"
400
- view={error ? 'negative' : 'default'}
401
- leftHelper={error || 'Валидация почты'}
402
- onChange={handleOnChange}
403
- onValidate={handleOnValidate}
404
- {...rest}
405
- />
406
- );
407
- };
408
-
409
- export const EmailValidation: StoryObj<StoryEmailValidationProps> = {
410
- argTypes: {
411
- ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
412
- },
413
- args: {
414
- labelPlacement: 'outer',
415
- placeholder: 'Заполните поле',
416
- minLengthValue: 5,
417
- minLengthErrorMessage: 'Почта слишком короткая',
418
- maxLengthValue: 25,
419
- maxLengthErrorMessage: 'Почта слишком длинная',
420
- minHostLengthValue: 1,
421
- minHostLengthErrorMessage: 'Хост слишком короткий',
422
- maxHostLengthValue: 12,
423
- maxHostLengthErrorMessage: 'Хост слишком длинный',
424
- minDomainLengthValue: 1,
425
- minDomainLengthErrorMessage: 'Домен слишком короткий',
426
- maxDomainLengthValue: 6,
427
- maxDomainLengthErrorMessage: 'Домен слишком длинный',
428
- minZoneLengthValue: 1,
429
- minZoneLengthErrorMessage: 'Доменная зона слишком короткая',
430
- maxZoneLengthValue: 5,
431
- maxZoneLengthErrorMessage: 'Доменная зона слишком длинная',
432
- whitelistDomainsValue: 'gmail.com,yandex.ru,mail.ru,mail.com',
433
- whitelistDomainsErrorMessage: 'Домен не разрешен',
434
- blacklistDomainsValue: 'heh.org,hah.ha',
435
- blacklistDomainsErrorMessage: 'Домен запрещен',
436
- },
437
- render: (args) => <StoryEmailValidation {...args} />,
438
- };
439
-
440
- type StoryPasswordValidationProps = StoryPropsDefault & {
441
- minLengthValue?: number;
442
- minLengthErrorMessage?: string;
443
- maxLengthValue?: number;
444
- maxLengthErrorMessage?: string;
445
- includeUppercase?: boolean;
446
- includeUppercaseErrorMessage?: string;
447
- includeLowercase?: boolean;
448
- includeLowercaseErrorMessage?: string;
449
- includeDigits?: boolean;
450
- includeDigitsErrorMessage?: string;
451
- includeSpecialSymbols?: boolean;
452
- includeSpecialSymbolsErrorMessage?: string;
453
- };
454
-
455
- const StoryPasswordValidation = ({
456
- minLengthValue,
457
- minLengthErrorMessage,
458
- maxLengthValue,
459
- maxLengthErrorMessage,
460
- includeUppercase,
461
- includeUppercaseErrorMessage,
462
- includeLowercase,
463
- includeLowercaseErrorMessage,
464
- includeDigits,
465
- includeDigitsErrorMessage,
466
- includeSpecialSymbols,
467
- includeSpecialSymbolsErrorMessage,
468
- ...rest
469
- }: StoryPasswordValidationProps) => {
470
- const [error, setError] = useState('');
471
-
472
- const validationOptions = {
473
- minLength: {
474
- value: minLengthValue || undefined,
475
- errorMessage: minLengthErrorMessage || 'Пароль слишком короткий',
476
- },
477
- maxLength: {
478
- value: maxLengthValue || undefined,
479
- errorMessage: maxLengthErrorMessage || 'Пароль слишком длинный',
480
- },
481
- includeUppercase: {
482
- value: includeUppercase,
483
- errorMessage: includeUppercaseErrorMessage || 'Пароль должен содержать хотя бы одну заглавную букву',
484
- },
485
- includeLowercase: {
486
- value: includeLowercase,
487
- errorMessage: includeLowercaseErrorMessage || 'Пароль должен содержать хотя бы одну строчную букву',
488
- },
489
- includeDigits: {
490
- value: includeDigits,
491
- errorMessage: includeDigitsErrorMessage || 'Пароль должен содержать хотя бы одну цифру',
492
- },
493
- includeSpecialSymbols: {
494
- value: includeSpecialSymbols,
495
- errorMessage:
496
- includeSpecialSymbolsErrorMessage || 'Пароль должен содержать хотя бы один специальный символ',
497
- },
498
- };
499
-
500
- const handleOnChange = () => {
501
- setError('');
502
- };
503
-
504
- const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
505
- setError(errorMessage || '');
506
- };
507
-
508
- return (
509
- <TextField
510
- label="Валидация пароля"
511
- validationType="password"
512
- options={validationOptions}
513
- size="l"
514
- view={error ? 'negative' : 'default'}
515
- leftHelper={error || 'Валидация пароля'}
516
- onChange={handleOnChange}
517
- onValidate={handleOnValidate}
518
- {...rest}
519
- />
520
- );
521
- };
522
-
523
- export const PasswordValidation: StoryObj<StoryPasswordValidationProps> = {
524
- argTypes: {
525
- ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
526
- },
527
- args: {
528
- labelPlacement: 'outer',
529
- placeholder: 'Заполните поле',
530
- passwordHidden: false,
531
- minLengthValue: 5,
532
- minLengthErrorMessage: 'Пароль слишком короткий',
533
- maxLengthValue: 25,
534
- maxLengthErrorMessage: 'Пароль слишком длинный',
535
- includeUppercase: true,
536
- includeUppercaseErrorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
537
- includeLowercase: true,
538
- includeLowercaseErrorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
539
- includeDigits: true,
540
- includeDigitsErrorMessage: 'Пароль должен содержать хотя бы одну цифру',
541
- includeSpecialSymbols: true,
542
- includeSpecialSymbolsErrorMessage: 'Пароль должен содержать хотя бы один специальный символ',
543
- },
544
- render: (args) => <StoryPasswordValidation {...args} />,
545
- };