@itcase/forms 1.0.53 → 1.0.55

package/dist/itcase-forms.cjs.js

@@ -53,8 +53,9 @@ const emailValidation = (value, context) => {
   if (!value) {
     return true;
   }
-  // eslint-disable-next-line
-  const regexp = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
+
+  // from https://www.regular-expressions.info/email.html
+  const regexp = /^[a-za-яёЁ0-9_-]+(?:\.[a-za-яёЁ0-9_-]+)*@(?:[a-za-яёЁ0-9](?:[a-za-яёЁ0-9-]*[a-za-яёЁ0-9])?\.)+[a-za-яёЁ0-9]+$/;
   return regexp.test(String(value).toLowerCase());
 };
 const addRequiredFieldsParamToSchema = schema => {
@@ -148,6 +149,10 @@ function FieldWrapperBase(props) {
     labelTextColor,
     labelTextSize,
     labelTextWidth,
+    helpText,
+    helpTextSize,
+    helpTextWeight,
+    helpTextColor,
     message,
     messageTextColor,
     messageTextSize,
@@ -215,16 +220,19 @@ function FieldWrapperBase(props) {
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
+    "data-testid": `${inputName}Field`,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
     htmlFor: id,
-    className: clsx__default.default('form-field__label')
+    className: clsx__default.default('form-field__label'),
+    "data-testid": `${inputName}FieldLabel`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
     textWeight: labelTextWidth,
     textColor: labelTextColor
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "form-field__desc"
+    className: "form-field__desc",
+    "data-testid": `${inputName}FieldDesc`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textWeight: descTextWidth,
@@ -240,21 +248,25 @@ function FieldWrapperBase(props) {
     size: dividerSize,
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "form-field__message"
+    className: "form-field__message",
+    "data-testid": `${inputName}FieldMessage`
   }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorMessageTextSize,
     textWeight: errorMessageTextWeight,
     textColor: errorMessageTextColor,
-    id: `${inputName}-error`
-  }, error), Boolean(message) && (!error || typeof error !== 'string') && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    id: `${inputName}-error`,
+    dataTestId: `${inputName}FieldMessageError`
+  }, error), Boolean(helpText) && (!error || typeof error !== 'string') && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-field__message-item form-field__message-item_type_help-text",
+    size: helpTextSize,
+    textWeight: helpTextWeight,
+    textColor: helpTextColor,
+    dataTestId: `${inputName}FieldMessageHelpText`
+  }, helpText), (!showError && !helpText || showError && !helpText && (!error || typeof error !== 'string')) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize,
-    textWeight: messageTextWeight,
-    textColor: messageTextColor
-  }, message), (!showError && !message || showError && !message && (!error || typeof error !== 'string')) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    className: "form-field__message-item form-field__message-item_type_message",
-    size: messageTextSize
+    dataTestId: `${inputName}FieldMessagePlaceholder`
   }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
@@ -1307,6 +1319,7 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
     isRevealable,
     name,
     parse,
+    dataTestId,
     iconSize,
     isDisabled,
     iconBorder,
@@ -1371,7 +1384,8 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      dataTestId: `${input.name}FieldInput`
     }, inputProps)), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
       iconFill: iconFill,
@@ -1927,7 +1941,7 @@ const focusOnError = (formElementsList, errors) => {
     }
   }
 
-  // the field is covered by the header because header is "sticky",
+  // The field is covered by the header because header is "sticky",
   // that's we scroll manually so that the field falls into the center of the visible area
   if (errorFieldElement) {
     errorFieldElement.scrollIntoView({
@@ -2120,7 +2134,12 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     className,
     config,
     dataTour,
+    dataTestId,
     dataTourButtons,
+    dataTestIdButtons,
+    dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton,
     dataTourPrimaryButton,
     dataTourSecondaryButton,
     dataTourTertiaryButton,
@@ -2221,6 +2240,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         "data-tour": dataTour,
+        "data-testId": dataTestId,
         ref: () => onRefFormInstance(form),
         onSubmit: handleSubmit,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
@@ -2270,7 +2290,8 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         padding: buttonPadding,
         gap: buttonGap,
         className: "form__button",
-        dataTour: dataTourButtons
+        dataTour: dataTourButtons,
+        dataTestId: dataTestIdButtons
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         width: "fill",
         className: "form__button-item",
@@ -2281,7 +2302,8 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
         label: primaryButtonLabel,
-        dataTour: dataTourPrimaryButton
+        dataTour: dataTourPrimaryButton,
+        dataTestId: dataTestIdPrimaryButton
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         width: "fill",
         className: "form__button-item",
@@ -2293,7 +2315,8 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextWeight: secondaryButtonLabelTextWeight,
         label: secondaryButtonLabel,
         onClick: onClickSecondaryButton,
-        dataTour: dataTourSecondaryButton
+        dataTour: dataTourSecondaryButton,
+        dataTestId: dataTestIdSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         width: "fill",
         className: "form__button-item",
@@ -2305,7 +2328,8 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextWeight: tertiaryButtonLabelTextWeight,
         label: tertiaryButtonLabel,
         onClick: onClickTertiaryButton,
-        dataTour: dataTourTertiaryButton
+        dataTour: dataTourTertiaryButton,
+        dataTestId: dataTestIdTertiaryButton
       }) : tertiaryButton), after);
     },
     subscription: {

package/dist/itcase-forms.esm.js

@@ -43,8 +43,9 @@ const emailValidation = (value, context) => {
   if (!value) {
     return true;
   }
-  // eslint-disable-next-line
-  const regexp = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
+
+  // from https://www.regular-expressions.info/email.html
+  const regexp = /^[a-za-яёЁ0-9_-]+(?:\.[a-za-яёЁ0-9_-]+)*@(?:[a-za-яёЁ0-9](?:[a-za-яёЁ0-9-]*[a-za-яёЁ0-9])?\.)+[a-za-яёЁ0-9]+$/;
   return regexp.test(String(value).toLowerCase());
 };
 const addRequiredFieldsParamToSchema = schema => {
@@ -138,6 +139,10 @@ function FieldWrapperBase(props) {
     labelTextColor,
     labelTextSize,
     labelTextWidth,
+    helpText,
+    helpTextSize,
+    helpTextWeight,
+    helpTextColor,
     message,
     messageTextColor,
     messageTextSize,
@@ -205,16 +210,19 @@ function FieldWrapperBase(props) {
   return /*#__PURE__*/React.createElement(Tag, {
     className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
+    "data-testid": `${inputName}Field`,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
     htmlFor: id,
-    className: clsx('form-field__label')
+    className: clsx('form-field__label'),
+    "data-testid": `${inputName}FieldLabel`
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
     textWeight: labelTextWidth,
     textColor: labelTextColor
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
-    className: "form-field__desc"
+    className: "form-field__desc",
+    "data-testid": `${inputName}FieldDesc`
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textWeight: descTextWidth,
@@ -230,21 +238,25 @@ function FieldWrapperBase(props) {
     size: dividerSize,
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React.createElement("div", {
-    className: "form-field__message"
+    className: "form-field__message",
+    "data-testid": `${inputName}FieldMessage`
   }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorMessageTextSize,
     textWeight: errorMessageTextWeight,
     textColor: errorMessageTextColor,
-    id: `${inputName}-error`
-  }, error), Boolean(message) && (!error || typeof error !== 'string') && /*#__PURE__*/React.createElement(Text, {
+    id: `${inputName}-error`,
+    dataTestId: `${inputName}FieldMessageError`
+  }, error), Boolean(helpText) && (!error || typeof error !== 'string') && /*#__PURE__*/React.createElement(Text, {
+    className: "form-field__message-item form-field__message-item_type_help-text",
+    size: helpTextSize,
+    textWeight: helpTextWeight,
+    textColor: helpTextColor,
+    dataTestId: `${inputName}FieldMessageHelpText`
+  }, helpText), (!showError && !helpText || showError && !helpText && (!error || typeof error !== 'string')) && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize,
-    textWeight: messageTextWeight,
-    textColor: messageTextColor
-  }, message), (!showError && !message || showError && !message && (!error || typeof error !== 'string')) && /*#__PURE__*/React.createElement(Text, {
-    className: "form-field__message-item form-field__message-item_type_message",
-    size: messageTextSize
+    dataTestId: `${inputName}FieldMessagePlaceholder`
   }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
@@ -1297,6 +1309,7 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
     isRevealable,
     name,
     parse,
+    dataTestId,
     iconSize,
     isDisabled,
     iconBorder,
@@ -1361,7 +1374,8 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      dataTestId: `${input.name}FieldInput`
     }, inputProps)), isRevealable && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
       iconFill: iconFill,
@@ -1917,7 +1931,7 @@ const focusOnError = (formElementsList, errors) => {
     }
   }
 
-  // the field is covered by the header because header is "sticky",
+  // The field is covered by the header because header is "sticky",
   // that's we scroll manually so that the field falls into the center of the visible area
   if (errorFieldElement) {
     errorFieldElement.scrollIntoView({
@@ -2110,7 +2124,12 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     className,
     config,
     dataTour,
+    dataTestId,
     dataTourButtons,
+    dataTestIdButtons,
+    dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton,
     dataTourPrimaryButton,
     dataTourSecondaryButton,
     dataTourTertiaryButton,
@@ -2211,6 +2230,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         "data-tour": dataTour,
+        "data-testId": dataTestId,
         ref: () => onRefFormInstance(form),
         onSubmit: handleSubmit,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
@@ -2260,7 +2280,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         padding: buttonPadding,
         gap: buttonGap,
         className: "form__button",
-        dataTour: dataTourButtons
+        dataTour: dataTourButtons,
+        dataTestId: dataTestIdButtons
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         width: "fill",
         className: "form__button-item",
@@ -2271,7 +2292,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
         label: primaryButtonLabel,
-        dataTour: dataTourPrimaryButton
+        dataTour: dataTourPrimaryButton,
+        dataTestId: dataTestIdPrimaryButton
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         width: "fill",
         className: "form__button-item",
@@ -2283,7 +2305,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextWeight: secondaryButtonLabelTextWeight,
         label: secondaryButtonLabel,
         onClick: onClickSecondaryButton,
-        dataTour: dataTourSecondaryButton
+        dataTour: dataTourSecondaryButton,
+        dataTestId: dataTestIdSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         width: "fill",
         className: "form__button-item",
@@ -2295,7 +2318,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextWeight: tertiaryButtonLabelTextWeight,
         label: tertiaryButtonLabel,
         onClick: onClickTertiaryButton,
-        dataTour: dataTourTertiaryButton
+        dataTour: dataTourTertiaryButton,
+        dataTestId: dataTestIdTertiaryButton
       }) : tertiaryButton), after);
     },
     subscription: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,14 +30,14 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.12",
-    "@itcase/ui": "^1.0.97",
+    "@itcase/common": "^1.1.13",
+    "@itcase/ui": "^1.1.0",
     "axios": "^1.6.7",
     "clsx": "^2.1.0",
     "date-fns": "2.0.0-alpha.7",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.10.55",
+    "libphonenumber-js": "^1.10.57",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "postcss": "^8.4.35",
@@ -50,12 +50,12 @@
     "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/eslint-parser": "^7.23.10",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
-    "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.2",
+    "@commitlint/cli": "^19.0.3",
+    "@commitlint/config-conventional": "^19.0.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
@@ -64,7 +64,7 @@
     "@semantic-release/git": "^10.0.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -75,31 +75,31 @@
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "npm": "^10.4.0",
+    "npm": "^10.5.0",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-dark-theme-class": "^1.2.0",
-    "postcss-discard-duplicates": "^6.0.1",
+    "postcss-dark-theme-class": "^1.2.1",
+    "postcss-discard-duplicates": "^6.0.2",
     "postcss-each": "^1.1.0",
     "postcss-easings": "^4.0.0",
     "postcss-extend-rule": "^4.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-hexrgba": "^2.1.0",
-    "postcss-import": "^16.0.0",
+    "postcss-import": "^16.0.1",
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-mixins": "^9.0.4",
     "postcss-nested": "^6.0.1",
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^9.3.0",
+    "postcss-preset-env": "^9.4.0",
     "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.2.5",
-    "react-datepicker": "^6.1.0",
-    "rollup": "^4.10.0",
+    "react-datepicker": "^6.2.0",
+    "rollup": "^4.12.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^23.0.2",
     "stylelint": "^16.2.1",