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

package/styled-components/cjs/components/TextField/hooks/useValidation.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useValidation = void 0;
+var _react = /*#__PURE__*/require("react");
+var _utils = /*#__PURE__*/require("../../../utils");
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var getUniqueKeys = function getUniqueKeys(lengthOptions) {
+  return lengthOptions.map(function (option) {
+    return option.replace(/min|max|Length/g, '');
+  });
+};
+var validateLenghtOptions = function validateLenghtOptions(options) {
+  var _options$minLength, _options$maxLength;
+  if (!options) {
+    return;
+  }
+  var minHash = Object.keys(options).filter(function (key) {
+    return key.startsWith('min');
+  });
+  var maxHash = Object.keys(options).filter(function (key) {
+    return key.startsWith('max');
+  });
+  var minMaxUniqueKeys = (minHash === null || minHash === void 0 ? void 0 : minHash.length) >= (maxHash === null || maxHash === void 0 ? void 0 : maxHash.length) ? getUniqueKeys(minHash) : getUniqueKeys(maxHash);
+  var globalMinValue = Number(options === null || options === void 0 || (_options$minLength = options.minLength) === null || _options$minLength === void 0 ? void 0 : _options$minLength.value);
+  var globalMaxValue = Number(options === null || options === void 0 || (_options$maxLength = options.maxLength) === null || _options$maxLength === void 0 ? void 0 : _options$maxLength.value);
+  if (globalMinValue <= 0) {
+    console.error('minLength must be more than 0');
+  }
+  if (globalMaxValue <= 0) {
+    console.error('maxLength must be more than 0');
+  }
+  if (globalMaxValue <= globalMinValue) {
+    console.error('maxLength must be more than minLength');
+  }
+  minMaxUniqueKeys.forEach(function (key) {
+    var _options$optionMinKey, _options$optionMaxKey;
+    var optionMinKey = "min".concat(key, "Length");
+    var optionMaxKey = "max".concat(key, "Length");
+    var minValue = Number(options === null || options === void 0 || (_options$optionMinKey = options[optionMinKey]) === null || _options$optionMinKey === void 0 ? void 0 : _options$optionMinKey.value);
+    var maxValue = Number(options === null || options === void 0 || (_options$optionMaxKey = options[optionMaxKey]) === null || _options$optionMaxKey === void 0 ? void 0 : _options$optionMaxKey.value);
+    if (!minValue || minValue <= 0) {
+      console.error("".concat(optionMinKey, " must be more than 0"));
+    }
+    if (!maxValue || maxValue <= 0) {
+      console.error("".concat(optionMaxKey, " must be more than 0"));
+    }
+    if (maxValue <= minValue) {
+      console.error("".concat(optionMaxKey, " must be more than ").concat(optionMinKey));
+    }
+  });
+};
+var validateWithLengthOptions = function validateWithLengthOptions(value, options, optionKey) {
+  var _options$optionMinKey2, _options$optionMaxKey2;
+  var optionMinKey = "min".concat(optionKey, "Length");
+  var optionMaxKey = "max".concat(optionKey, "Length");
+  var minValue = Number((_options$optionMinKey2 = options[optionMinKey]) === null || _options$optionMinKey2 === void 0 ? void 0 : _options$optionMinKey2.value);
+  var maxValue = Number((_options$optionMaxKey2 = options[optionMaxKey]) === null || _options$optionMaxKey2 === void 0 ? void 0 : _options$optionMaxKey2.value);
+  if (minValue && value.length < minValue) {
+    var _options$optionMinKey3;
+    return {
+      isValid: false,
+      errorMessage: ((_options$optionMinKey3 = options[optionMinKey]) === null || _options$optionMinKey3 === void 0 ? void 0 : _options$optionMinKey3.errorMessage) || "".concat(optionMinKey, " is too short")
+    };
+  }
+  if (maxValue && value.length > maxValue) {
+    var _options$optionMaxKey3;
+    return {
+      isValid: false,
+      errorMessage: ((_options$optionMaxKey3 = options[optionMaxKey]) === null || _options$optionMaxKey3 === void 0 ? void 0 : _options$optionMaxKey3.errorMessage) || "".concat(optionMaxKey, " is too long")
+    };
+  }
+  return {
+    isValid: true
+  };
+};
+var validateEmailDomainsLists = function validateEmailDomainsLists(blacklistDomains, whitelistDomains) {
+  if (!(blacklistDomains !== null && blacklistDomains !== void 0 && blacklistDomains.length) || !(whitelistDomains !== null && whitelistDomains !== void 0 && whitelistDomains.length)) {
+    return;
+  }
+  var uniqueDomains = new Set([].concat(_toConsumableArray(blacklistDomains), _toConsumableArray(whitelistDomains)));
+  if (uniqueDomains.size !== blacklistDomains.length + whitelistDomains.length) {
+    console.error('Blacklisted domains must not overlap whitelisted domains');
+  }
+};
+var validateWithDomainsLists = function validateWithDomainsLists(domainWithZone, options) {
+  var _options$whitelistDom, _options$blacklistDom, _options$blacklistDom2, _options$whitelistDom2;
+  if (!((_options$whitelistDom = options.whitelistDomains) !== null && _options$whitelistDom !== void 0 && (_options$whitelistDom = _options$whitelistDom.value) !== null && _options$whitelistDom !== void 0 && _options$whitelistDom.length) && !((_options$blacklistDom = options.blacklistDomains) !== null && _options$blacklistDom !== void 0 && (_options$blacklistDom = _options$blacklistDom.value) !== null && _options$blacklistDom !== void 0 && _options$blacklistDom.length)) {
+    return {
+      isValid: true
+    };
+  }
+  if (options !== null && options !== void 0 && (_options$blacklistDom2 = options.blacklistDomains) !== null && _options$blacklistDom2 !== void 0 && (_options$blacklistDom2 = _options$blacklistDom2.value) !== null && _options$blacklistDom2 !== void 0 && _options$blacklistDom2.includes(domainWithZone)) {
+    var _options$blacklistDom3;
+    return {
+      isValid: false,
+      errorMessage: ((_options$blacklistDom3 = options.blacklistDomains) === null || _options$blacklistDom3 === void 0 ? void 0 : _options$blacklistDom3.errorMessage) || 'Domain is blacklisted'
+    };
+  }
+  if (!(options !== null && options !== void 0 && (_options$whitelistDom2 = options.whitelistDomains) !== null && _options$whitelistDom2 !== void 0 && (_options$whitelistDom2 = _options$whitelistDom2.value) !== null && _options$whitelistDom2 !== void 0 && _options$whitelistDom2.includes(domainWithZone))) {
+    var _options$whitelistDom3;
+    return {
+      isValid: false,
+      errorMessage: ((_options$whitelistDom3 = options.whitelistDomains) === null || _options$whitelistDom3 === void 0 ? void 0 : _options$whitelistDom3.errorMessage) || 'Domain is not whitelisted'
+    };
+  }
+  return {
+    isValid: true
+  };
+};
+var validateEmail = function validateEmail(email, options) {
+  var _options$customEmailR, _options$minLength2, _options$maxLength2;
+  if (!email) {
+    return {
+      isValid: true
+    };
+  }
+  var emailRegex = (options === null || options === void 0 || (_options$customEmailR = options.customEmailRegex) === null || _options$customEmailR === void 0 ? void 0 : _options$customEmailR.value) || _utils.constants.emailPattern;
+  if (!emailRegex.test(email)) {
+    var _options$customEmailR2;
+    return {
+      isValid: false,
+      errorMessage: (options === null || options === void 0 || (_options$customEmailR2 = options.customEmailRegex) === null || _options$customEmailR2 === void 0 ? void 0 : _options$customEmailR2.errorMessage) || 'Invalid email'
+    };
+  }
+  if (!options) {
+    return {
+      isValid: true
+    };
+  }
+  if ((_options$minLength2 = options.minLength) !== null && _options$minLength2 !== void 0 && _options$minLength2.value && email.length < options.minLength.value) {
+    var _options$minLength3;
+    return {
+      isValid: false,
+      errorMessage: ((_options$minLength3 = options.minLength) === null || _options$minLength3 === void 0 ? void 0 : _options$minLength3.errorMessage) || 'Email is too short'
+    };
+  }
+  if ((_options$maxLength2 = options.maxLength) !== null && _options$maxLength2 !== void 0 && _options$maxLength2.value && email.length > options.maxLength.value) {
+    var _options$maxLength3;
+    return {
+      isValid: false,
+      errorMessage: ((_options$maxLength3 = options.maxLength) === null || _options$maxLength3 === void 0 ? void 0 : _options$maxLength3.errorMessage) || 'Email is too long'
+    };
+  }
+  var emailHost = email.split('@')[0];
+  var emailDomainWithZone = email.split('@')[1];
+  var emailZone = emailDomainWithZone.split('.').pop();
+  if (!(emailZone !== null && emailZone !== void 0 && emailZone.length)) {
+    var _options$customEmailR3;
+    return {
+      isValid: false,
+      errorMessage: ((_options$customEmailR3 = options.customEmailRegex) === null || _options$customEmailR3 === void 0 ? void 0 : _options$customEmailR3.errorMessage) || 'Invalid email'
+    };
+  }
+  var emailDomain = emailDomainWithZone.substring(0, emailDomainWithZone.length - (emailZone.length + 1));
+  var hostValidation = validateWithLengthOptions(emailHost, options, 'Host');
+  if (!hostValidation.isValid) {
+    return hostValidation;
+  }
+  var domainValidation = validateWithLengthOptions(emailDomain, options, 'Domain');
+  if (!domainValidation.isValid) {
+    return domainValidation;
+  }
+  var zoneValidation = validateWithLengthOptions(emailZone, options, 'Zone');
+  if (!zoneValidation.isValid) {
+    return zoneValidation;
+  }
+  var domainWithZoneValidation = validateWithDomainsLists(emailDomainWithZone, options);
+  if (!domainWithZoneValidation.isValid) {
+    return domainWithZoneValidation;
+  }
+  return {
+    isValid: true
+  };
+};
+var validatePassword = function validatePassword(password, options) {
+  var _options$minLength4, _options$maxLength4, _options$includeUpper, _options$includeLower, _options$includeDigit, _options$includeSpeci;
+  if (!password || !options) {
+    return {
+      isValid: true
+    };
+  }
+  if ((_options$minLength4 = options.minLength) !== null && _options$minLength4 !== void 0 && _options$minLength4.value && password.length < options.minLength.value) {
+    var _options$minLength5;
+    return {
+      isValid: false,
+      errorMessage: ((_options$minLength5 = options.minLength) === null || _options$minLength5 === void 0 ? void 0 : _options$minLength5.errorMessage) || 'Password is too short'
+    };
+  }
+  if ((_options$maxLength4 = options.maxLength) !== null && _options$maxLength4 !== void 0 && _options$maxLength4.value && password.length > options.maxLength.value) {
+    var _options$maxLength5;
+    return {
+      isValid: false,
+      errorMessage: ((_options$maxLength5 = options.maxLength) === null || _options$maxLength5 === void 0 ? void 0 : _options$maxLength5.errorMessage) || 'Password is too long'
+    };
+  }
+  var lowercasedPassword = password.toLowerCase();
+  var uppercasedPassword = password.toUpperCase();
+  if ((_options$includeUpper = options.includeUppercase) !== null && _options$includeUpper !== void 0 && _options$includeUpper.value && password === lowercasedPassword) {
+    var _options$includeUpper2;
+    return {
+      isValid: false,
+      errorMessage: ((_options$includeUpper2 = options.includeUppercase) === null || _options$includeUpper2 === void 0 ? void 0 : _options$includeUpper2.errorMessage) || 'Password must contain at least one uppercase letter'
+    };
+  }
+  if ((_options$includeLower = options.includeLowercase) !== null && _options$includeLower !== void 0 && _options$includeLower.value && password === uppercasedPassword) {
+    var _options$includeLower2;
+    return {
+      isValid: false,
+      errorMessage: ((_options$includeLower2 = options.includeLowercase) === null || _options$includeLower2 === void 0 ? void 0 : _options$includeLower2.errorMessage) || 'Password must contain at least one lowercase letter'
+    };
+  }
+  if ((_options$includeDigit = options.includeDigits) !== null && _options$includeDigit !== void 0 && _options$includeDigit.value && !/\d/.test(password)) {
+    var _options$includeDigit2;
+    return {
+      isValid: false,
+      errorMessage: ((_options$includeDigit2 = options.includeDigits) === null || _options$includeDigit2 === void 0 ? void 0 : _options$includeDigit2.errorMessage) || 'Password must contain digits'
+    };
+  }
+  if ((_options$includeSpeci = options.includeSpecialSymbols) !== null && _options$includeSpeci !== void 0 && _options$includeSpeci.value && !_utils.constants.specialCharacters.test(password)) {
+    var _options$includeSpeci2;
+    return {
+      isValid: false,
+      errorMessage: ((_options$includeSpeci2 = options.includeSpecialSymbols) === null || _options$includeSpeci2 === void 0 ? void 0 : _options$includeSpeci2.errorMessage) || 'Password must contain special characters'
+    };
+  }
+  return {
+    isValid: true
+  };
+};
+var validationVariants = {
+  email: validateEmail,
+  password: validatePassword
+};
+var useValidation = exports.useValidation = function useValidation(_ref) {
+  var validationType = _ref.validationType,
+    options = _ref.options,
+    onValidate = _ref.onValidate;
+  var handleValidationBlur = function handleValidationBlur(event) {
+    if (!validationType) {
+      return;
+    }
+    var validationResult = validationVariants[validationType](event.target.value, options);
+    onValidate === null || onValidate === void 0 || onValidate(validationResult);
+  };
+  var handleValidationKeyDown = function handleValidationKeyDown(event) {
+    if (!validationType) {
+      return;
+    }
+    if (event.keyCode === _utils.constants.keyCodes.Enter) {
+      event.preventDefault();
+      var _ref2 = event.target,
+        value = _ref2.value;
+      var validationResult = validationVariants[validationType](value, options);
+      onValidate === null || onValidate === void 0 || onValidate(validationResult);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    validateLenghtOptions(options);
+    if (validationType === 'email') {
+      var _whitelistDomains, _blacklistDomains;
+      validateEmailDomainsLists(options === null || options === void 0 || (_whitelistDomains = options.whitelistDomains) === null || _whitelistDomains === void 0 ? void 0 : _whitelistDomains.value, (_blacklistDomains = options.blacklistDomains) === null || _blacklistDomains === void 0 ? void 0 : _blacklistDomains.value);
+    }
+  }, []);
+  return {
+    handleValidationBlur: handleValidationBlur,
+    handleValidationKeyDown: handleValidationKeyDown
+  };
+};

package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconCross } from '../../../../components/_Icon';
@@ -291,3 +291,255 @@ export const Chips: StoryObj<StoryPropsChips> = {
     },
     render: (args) => <StoryChips {...args} />,
 };
+
+type StoryEmailValidationProps = StoryPropsDefault & {
+    minLengthValue?: number;
+    minLengthErrorMessage?: string;
+    maxLengthValue?: number;
+    maxLengthErrorMessage?: string;
+    minHostLengthValue?: number;
+    minHostLengthErrorMessage?: string;
+    maxHostLengthValue?: number;
+    maxHostLengthErrorMessage?: string;
+    minDomainLengthValue?: number;
+    minDomainLengthErrorMessage?: string;
+    maxDomainLengthValue?: number;
+    maxDomainLengthErrorMessage?: string;
+    minZoneLengthValue?: number;
+    minZoneLengthErrorMessage?: string;
+    maxZoneLengthValue?: number;
+    maxZoneLengthErrorMessage?: string;
+    whitelistDomainsValue?: string;
+    whitelistDomainsErrorMessage?: string;
+    blacklistDomainsValue?: string;
+    blacklistDomainsErrorMessage?: string;
+};
+
+const StoryEmailValidation = ({
+    minLengthValue,
+    minLengthErrorMessage,
+    maxLengthValue,
+    maxLengthErrorMessage,
+    minHostLengthValue,
+    minHostLengthErrorMessage,
+    maxHostLengthValue,
+    maxHostLengthErrorMessage,
+    minDomainLengthValue,
+    minDomainLengthErrorMessage,
+    maxDomainLengthValue,
+    maxDomainLengthErrorMessage,
+    minZoneLengthValue,
+    minZoneLengthErrorMessage,
+    maxZoneLengthValue,
+    maxZoneLengthErrorMessage,
+    whitelistDomainsValue,
+    whitelistDomainsErrorMessage,
+    blacklistDomainsValue,
+    blacklistDomainsErrorMessage,
+    ...rest
+}: StoryEmailValidationProps) => {
+    const [error, setError] = useState('');
+
+    const validationOptions = {
+        minLength: {
+            value: minLengthValue || undefined,
+            errorMessage: minLengthErrorMessage || 'Почта слишком короткая',
+        },
+        maxLength: {
+            value: maxLengthValue || undefined,
+            errorMessage: maxLengthErrorMessage || 'Почта слишком длинная',
+        },
+        minHostLength: {
+            value: minHostLengthValue || undefined,
+            errorMessage: minHostLengthErrorMessage || 'Хост слишком короткий',
+        },
+        maxHostLength: {
+            value: maxHostLengthValue || undefined,
+            errorMessage: maxHostLengthErrorMessage || 'Хост слишком длинный',
+        },
+        minDomainLength: {
+            value: minDomainLengthValue || undefined,
+            errorMessage: minDomainLengthErrorMessage || 'Домен слишком короткий',
+        },
+        maxDomainLength: {
+            value: maxDomainLengthValue || undefined,
+            errorMessage: maxDomainLengthErrorMessage || 'Домен слишком длинный',
+        },
+        minZoneLength: {
+            value: minZoneLengthValue || undefined,
+            errorMessage: minZoneLengthErrorMessage || 'Доменная зона слишком короткая',
+        },
+        maxZoneLength: {
+            value: maxZoneLengthValue || undefined,
+            errorMessage: maxZoneLengthErrorMessage || 'Доменная зона слишком длинная',
+        },
+        whitelistDomains: {
+            value: whitelistDomainsValue?.split(',') || undefined,
+            errorMessage: whitelistDomainsErrorMessage || 'Домен не разрешен',
+        },
+        blacklistDomains: {
+            value: blacklistDomainsValue?.split(',') || undefined,
+            errorMessage: blacklistDomainsErrorMessage || 'Домен запрещен',
+        },
+    };
+
+    const handleOnChange = () => {
+        setError('');
+    };
+
+    const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
+        setError(errorMessage || '');
+    };
+
+    return (
+        <TextField
+            label="Валидация почты"
+            validationType="email"
+            options={validationOptions}
+            size="l"
+            view={error ? 'negative' : 'default'}
+            leftHelper={error || 'Валидация почты'}
+            onChange={handleOnChange}
+            onValidate={handleOnValidate}
+            {...rest}
+        />
+    );
+};
+
+export const EmailValidation: StoryObj<StoryEmailValidationProps> = {
+    argTypes: {
+        ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
+    },
+    args: {
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        minLengthValue: 5,
+        minLengthErrorMessage: 'Почта слишком короткая',
+        maxLengthValue: 25,
+        maxLengthErrorMessage: 'Почта слишком длинная',
+        minHostLengthValue: 1,
+        minHostLengthErrorMessage: 'Хост слишком короткий',
+        maxHostLengthValue: 12,
+        maxHostLengthErrorMessage: 'Хост слишком длинный',
+        minDomainLengthValue: 1,
+        minDomainLengthErrorMessage: 'Домен слишком короткий',
+        maxDomainLengthValue: 6,
+        maxDomainLengthErrorMessage: 'Домен слишком длинный',
+        minZoneLengthValue: 1,
+        minZoneLengthErrorMessage: 'Доменная зона слишком короткая',
+        maxZoneLengthValue: 5,
+        maxZoneLengthErrorMessage: 'Доменная зона слишком длинная',
+        whitelistDomainsValue: 'gmail.com,yandex.ru,mail.ru,mail.com',
+        whitelistDomainsErrorMessage: 'Домен не разрешен',
+        blacklistDomainsValue: 'heh.org,hah.ha',
+        blacklistDomainsErrorMessage: 'Домен запрещен',
+    },
+    render: (args) => <StoryEmailValidation {...args} />,
+};
+
+type StoryPasswordValidationProps = StoryPropsDefault & {
+    minLengthValue?: number;
+    minLengthErrorMessage?: string;
+    maxLengthValue?: number;
+    maxLengthErrorMessage?: string;
+    includeUppercase?: boolean;
+    includeUppercaseErrorMessage?: string;
+    includeLowercase?: boolean;
+    includeLowercaseErrorMessage?: string;
+    includeDigits?: boolean;
+    includeDigitsErrorMessage?: string;
+    includeSpecialSymbols?: boolean;
+    includeSpecialSymbolsErrorMessage?: string;
+};
+
+const StoryPasswordValidation = ({
+    minLengthValue,
+    minLengthErrorMessage,
+    maxLengthValue,
+    maxLengthErrorMessage,
+    includeUppercase,
+    includeUppercaseErrorMessage,
+    includeLowercase,
+    includeLowercaseErrorMessage,
+    includeDigits,
+    includeDigitsErrorMessage,
+    includeSpecialSymbols,
+    includeSpecialSymbolsErrorMessage,
+    ...rest
+}: StoryPasswordValidationProps) => {
+    const [error, setError] = useState('');
+
+    const validationOptions = {
+        minLength: {
+            value: minLengthValue || undefined,
+            errorMessage: minLengthErrorMessage || 'Пароль слишком короткий',
+        },
+        maxLength: {
+            value: maxLengthValue || undefined,
+            errorMessage: maxLengthErrorMessage || 'Пароль слишком длинный',
+        },
+        includeUppercase: {
+            value: includeUppercase,
+            errorMessage: includeUppercaseErrorMessage || 'Пароль должен содержать хотя бы одну заглавную букву',
+        },
+        includeLowercase: {
+            value: includeLowercase,
+            errorMessage: includeLowercaseErrorMessage || 'Пароль должен содержать хотя бы одну строчную букву',
+        },
+        includeDigits: {
+            value: includeDigits,
+            errorMessage: includeDigitsErrorMessage || 'Пароль должен содержать хотя бы одну цифру',
+        },
+        includeSpecialSymbols: {
+            value: includeSpecialSymbols,
+            errorMessage:
+                includeSpecialSymbolsErrorMessage || 'Пароль должен содержать хотя бы один специальный символ',
+        },
+    };
+
+    const handleOnChange = () => {
+        setError('');
+    };
+
+    const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
+        setError(errorMessage || '');
+    };
+
+    return (
+        <TextField
+            label="Валидация пароля"
+            validationType="password"
+            options={validationOptions}
+            size="l"
+            view={error ? 'negative' : 'default'}
+            leftHelper={error || 'Валидация пароля'}
+            onChange={handleOnChange}
+            onValidate={handleOnValidate}
+            {...rest}
+        />
+    );
+};
+
+export const PasswordValidation: StoryObj<StoryPasswordValidationProps> = {
+    argTypes: {
+        ...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
+    },
+    args: {
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        passwordHidden: false,
+        minLengthValue: 5,
+        minLengthErrorMessage: 'Пароль слишком короткий',
+        maxLengthValue: 25,
+        maxLengthErrorMessage: 'Пароль слишком длинный',
+        includeUppercase: true,
+        includeUppercaseErrorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
+        includeLowercase: true,
+        includeLowercaseErrorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
+        includeDigits: true,
+        includeDigitsErrorMessage: 'Пароль должен содержать хотя бы одну цифру',
+        includeSpecialSymbols: true,
+        includeSpecialSymbolsErrorMessage: 'Пароль должен содержать хотя бы один специальный символ',
+    },
+    render: (args) => <StoryPasswordValidation {...args} />,
+};