@widergy/energy-ui 3.24.0 → 3.26.0

package/dist/components/UTPhoneInput/versions/V0/index.js

@@ -0,0 +1,297 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _CheckCircleOutline = _interopRequireDefault(require("@material-ui/icons/CheckCircleOutline"));
+var _form = require("@widergy/web-utils/lib/form");
+var _array = require("@widergy/web-utils/lib/array");
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _formTypes = require("../../../../types/formTypes");
+var _classesUtils = require("../../../../utils/classesUtils");
+var _theme = require("./theme");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class UTPhoneInput extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "cleanField", () => this.setState({
+      areaCode: '',
+      phoneNumber: ''
+    }));
+    _defineProperty(this, "handleInitializeField", () => {
+      let areaCode;
+      let phoneNumber;
+      const {
+        value
+      } = this.props.input;
+      if (typeof value === 'object' && this.props.childKeys) {
+        areaCode = value[this.props.childKeys[0]];
+        areaCode = typeof areaCode === 'number' ? areaCode.toString() : areaCode;
+        phoneNumber = value[this.props.childKeys[1]];
+        phoneNumber = typeof phoneNumber === 'number' ? phoneNumber.toString() : phoneNumber;
+      } else {
+        const stringValue = value.toString();
+        areaCode = stringValue.slice(0, stringValue.indexOf('-'));
+        phoneNumber = stringValue.slice(stringValue.indexOf('-') + 1);
+      }
+      this.setState({
+        initialized: true
+      });
+      this.setState({
+        areaCode,
+        phoneNumber
+      }, () => this.handleValidateAreaCode(this.state.areaCode));
+    });
+    _defineProperty(this, "handleValidateAreaCode", areaCode => {
+      if (areaCode.slice(0, 1) === '0') {
+        this.setState({
+          error: this.props.errors.codeWithZero,
+          city: undefined
+        });
+      } else {
+        const code = _constants.AREA_CODES.find(element => element.code === areaCode);
+        const error = areaCode.length && !code && this.props.errors.invalidCode;
+        this.setState({
+          error,
+          city: code && code.city
+        }, () => {
+          if (this.state.city && !error) this.handleValidatePhoneNumber(this.state.phoneNumber);
+        });
+      }
+    });
+    _defineProperty(this, "handleCleanPhoneNumber", () => this.setState({
+      phoneNumber: ''
+    }));
+    _defineProperty(this, "handleValidatePhoneNumber", phoneNumber => {
+      if (phoneNumber.slice(0, 1) === '0') {
+        this.setState({
+          error: this.props.errors.phoneWithZero
+        });
+      } else if (phoneNumber.slice(0, 2) === '15') {
+        this.setState({
+          error: this.props.errors.phoneWithFifteen
+        });
+      } else if (phoneNumber.length === 0) {
+        this.setState({
+          error: this.props.errors.numberNotEmpty
+        });
+      } else this.setState({
+        error: undefined
+      });
+    });
+    _defineProperty(this, "handleChangeAreaCode", event => {
+      this.setState({
+        initialized: true
+      });
+      const areaCode = event.target.value.slice(0, 4);
+      if (!areaCode) {
+        this.setState({
+          areaCode
+        }, () => {
+          this.handleChange("".concat(this.state.areaCode).concat(this.state.phoneNumber));
+        });
+      } else {
+        this.setState({
+          areaCode
+        }, () => {
+          this.handleChange("".concat(this.state.areaCode, "-").concat(this.state.phoneNumber));
+        });
+      }
+      this.handleCleanPhoneNumber();
+      this.handleValidateAreaCode(areaCode);
+    });
+    _defineProperty(this, "handleChangePhone", event => {
+      const phoneNumber = event.target.value.slice(0, 10 - this.state.areaCode.length);
+      this.setState({
+        phoneNumber
+      }, () => {
+        this.handleChange("".concat(this.state.areaCode, "-").concat(this.state.phoneNumber));
+      });
+      this.handleValidatePhoneNumber(phoneNumber);
+    });
+    _defineProperty(this, "handleKeyPress", event => {
+      const regexp = /[0-9]+/g;
+      if (!regexp.test(event.key)) {
+        event.preventDefault();
+      }
+    });
+    _defineProperty(this, "handleChange", initialValue => {
+      let value = initialValue;
+      const {
+        childKeys,
+        field,
+        input
+      } = this.props;
+      if (childKeys) {
+        const splittedPhone = value.split('-');
+        value = {
+          ...(!(0, _array.isEmpty)(splittedPhone[0]) && {
+            [childKeys[0]]: splittedPhone[0]
+          }),
+          ...(!(0, _array.isEmpty)(splittedPhone[1]) && {
+            [childKeys[1]]: splittedPhone[1]
+          })
+        };
+      } else if (field.configuration && field.configuration.without_dash) {
+        value = initialValue.replace('-', '');
+      }
+      input.onChange(value);
+    });
+    this.state = {
+      areaCode: '',
+      phoneNumber: '',
+      city: null,
+      initialized: false
+    };
+  }
+  componentDidMount() {
+    if (this.props.input && this.props.input.value && !this.state.initialized) {
+      this.handleInitializeField();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.input && this.props.input.value && !this.state.areaCode && !this.state.initialized) {
+      this.handleInitializeField();
+    }
+    if (this.state.initialized && prevProps.input && prevProps.input.value && this.props.input && (!this.props.input.value || this.props.input.value.length === 0)) {
+      this.cleanField();
+    }
+  }
+  render() {
+    var _field$configuration, _field$configuration2;
+    const {
+      areaCodeDataTestId,
+      areaCodeFieldProps,
+      phoneNumberFieldProps,
+      field,
+      input,
+      disabled,
+      meta,
+      classes: themeClasses = {},
+      phoneNumberDataTestId,
+      placeholder,
+      label,
+      variant,
+      inputClassName,
+      classNames
+    } = this.props;
+    const {
+      areaCode,
+      city,
+      error,
+      phoneNumber
+    } = this.state;
+    const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_stylesModule.default.container, " ").concat(this.props.style)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.inputContainer
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_stylesModule.default.areaCode, " ").concat(_stylesModule.default["".concat(variant, "AreaCode")], " ").concat(classes.areaCodeContainer)
+    }, /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
+      name: "area_code",
+      type: "tel",
+      label: ((_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.area_code_label) || _constants.AREA_CODE_LABEL,
+      placeholder: ((_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.area_code_placeholder) || _constants.AREA_CODE_PLACEHOLDER,
+      autoComplete: "off",
+      fullWidth: true,
+      margin: "none",
+      onKeyPress: this.handleKeyPress,
+      onFocus: this.handleFocus,
+      onChange: this.handleChangeAreaCode,
+      onBlur: this.handleBlur,
+      value: areaCode,
+      error: Boolean(error || (0, _form.shouldShowErrors)(meta)),
+      disabled: disabled,
+      variant: variant,
+      InputProps: {
+        classes: {
+          input: inputClassName
+        },
+        inputProps: {
+          'data-testid': areaCodeDataTestId
+        }
+      }
+    }, areaCodeFieldProps)), /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+      stringContentClassName: classes.tooltip,
+      content: city || ' '
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(_stylesModule.default.icon, "  ").concat(_stylesModule.default["".concat(variant, "Icon")], " ").concat(city && _stylesModule.default.showCheckedIcon)
+    }, /*#__PURE__*/_react.default.createElement(_CheckCircleOutline.default, {
+      tabIndex: "-1",
+      className: "".concat(_stylesModule.default.checkedIcon, " ").concat(classes.areaCodeIcon)
+    })))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_stylesModule.default.phoneNumber, " ").concat(classes.phoneNumberContainer)
+    }, /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
+      name: "phone_number",
+      type: "tel",
+      margin: "none",
+      placeholder: placeholder,
+      label: label,
+      onKeyPress: this.handleKeyPress,
+      autoComplete: "off",
+      fullWidth: true,
+      error: Boolean(error || (0, _form.shouldShowErrors)(meta)),
+      onFocus: input.onFocus,
+      onChange: this.handleChangePhone,
+      disabled: !city || disabled,
+      value: phoneNumber,
+      variant: variant,
+      InputProps: {
+        classes: {
+          input: inputClassName
+        },
+        inputProps: {
+          'data-testid': phoneNumberDataTestId
+        }
+      }
+    }, phoneNumberFieldProps)))), (error || (0, _form.shouldShowErrors)(meta)) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      colorTheme: "error",
+      variant: "small"
+    }, error || meta.error));
+  }
+}
+UTPhoneInput.propTypes = {
+  input: _formTypes.inputPropTypes,
+  meta: _formTypes.metaPropTypes,
+  placeholder: _propTypes.string,
+  disabled: _propTypes.bool,
+  label: _propTypes.string,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  errors: (0, _propTypes.shape)({
+    codeWithZero: _propTypes.string,
+    invalidCode: _propTypes.string,
+    phoneWithFifteen: _propTypes.string,
+    phoneWithZero: _propTypes.string,
+    numberNotEmpty: _propTypes.string
+  }),
+  childKeys: (0, _propTypes.arrayOf)(_propTypes.string),
+  field: _formTypes.fieldType,
+  variant: _propTypes.string,
+  inputClassName: _propTypes.string,
+  areaCodeFieldProps: _propTypes.object,
+  phoneNumberFieldProps: _propTypes.object,
+  areaCodeDataTestId: _propTypes.string,
+  phoneNumberDataTestId: _propTypes.string
+};
+UTPhoneInput.defaultProps = {
+  classes: {},
+  areaCodeFieldProps: {},
+  phoneNumberFieldProps: {}
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTPhoneInput);

package/dist/components/UTPhoneInput/{styles.module.scss → versions/V0/styles.module.scss}

@@ -1,5 +1,5 @@
-@import '../../scss/variables/colors.module.scss';
-@import '../../scss/variables/fontSizes.module.scss';
+@import '../../../../scss/variables/colors.module.scss';
+@import '../../../../scss/variables/fontSizes.module.scss';
 
 .container {
   align-items: flex-start;
@@ -7,7 +7,7 @@
   flex-direction: column;
   flex-shrink: 0;
   width: 100%;
-};
+}
 
 .inputContainer {
   align-items: flex-end;
@@ -15,21 +15,21 @@
   justify-content: space-between;
   margin-bottom: 8px;
   width: 100%;
-};
+}
 
 .areaCode {
   align-items: flex-end;
   display: flex;
   position: relative;
-};
+}
 
 .outlinedAreaCode {
   align-items: center;
-};
+}
 
 .phoneNumber {
   width: calc(100% - 30px - 70px);
-};
+}
 
 .input {
   appearance: none;
@@ -40,15 +40,15 @@
   margin-top: auto;
   outline: 0;
   width: 100%;
-};
+}
 
 .activeInput {
   border-color: 1px solid $input-primary;
-};
+}
 
 .error {
   height: 19px;
-};
+}
 
 .smallText {
   font-size: $small;

package/dist/components/UTPhoneInput/{theme.js → versions/V0/theme.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
   let {

package/dist/components/UTPhoneInput/versions/V1/README.md

@@ -0,0 +1,57 @@
+# UTPhoneInput
+
+## Description
+
+`UTPhoneInput` is a configurable phone input component that allows users to input phone numbers, optionally including an area code. It supports various customization options such as icons, validation messages, and configurable error handling. The component also handles validation for specific area codes and can work with or without them.
+
+## Props
+
+| Name                  | Type                                                                      | Default                                                                                                    | Description                                                                                                                          |
+| --------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| areaCodeDataTestId    | string                                                                    |                                                                                                            | Identifier for the area code input field, useful for testing.                                                                        |
+| areaCodePlaceholder   | string                                                                    |                                                                                                            | Placeholder for the area code input field.                                                                                           |
+| countryCode           | string                                                                    |                                                                                                            | Prefix for the phone number, typically used to display the country code (e.g., "+1" for the US).                                     |
+| disabled              | bool                                                                      | false                                                                                                      | Disables both the area code and phone number input fields.                                                                           |
+| error                 | string                                                                    |                                                                                                            | Error message displayed below the input fields.                                                                                      |
+| helpText              | string                                                                    |                                                                                                            | Help text displayed below the input fields.                                                                                          |
+| maxLength             | number                                                                    | 10                                                                                                         | Maximum number of characters allowed in the phone number input (excluding the area code).                                            |
+| onBlur                | func                                                                      |                                                                                                            | Function called when either the area code or phone number input loses focus.                                                         |
+| onChange              | func                                                                      |                                                                                                            | Function called when either the area code or phone number value changes. Should handle concatenated values (`areaCode-phoneNumber`). |
+| onFocus               | func                                                                      |                                                                                                            | Function called when either the area code or phone number input gains focus.                                                         |
+| phoneNumberDataTestId | string                                                                    |                                                                                                            | Identifier for the phone number input field, useful for testing.                                                                     |
+| placeholder           | string                                                                    |                                                                                                            | Placeholder text displayed in the phone number input when it's empty.                                                                |
+| readOnly              | bool                                                                      | false                                                                                                      | Makes the area code and phone number input fields read-only.                                                                         |
+| required              | bool                                                                      | false                                                                                                      | Marks the input fields as required.                                                                                                  |
+| RightIcon             | elementType                                                               |                                                                                                            | Icon displayed on the right side of both the area code and phone number input fields.                                                |
+| title                 | string                                                                    |                                                                                                            | Title displayed above the input fields.                                                                                              |
+| titleVariant          | string                                                                    | 'large'                                                                                                    | Variant of the title, can be `small` or `large`.                                                                                     |
+| translations          | shape({ areaCodeWithoutZeroError: string, invalidAreaCodeError: string }) | `{ areaCodeWithoutZeroError: 'Ingrese el código sin 0', invalidAreaCodeError: 'Código de área inválido' }` | Translation strings used for error messages related to area code validation.                                                         |
+| validations           | object                                                                    |                                                                                                            | Object containing validation rules to be applied to the input fields.                                                                |
+| value                 | string                                                                    |                                                                                                            | Current value of the phone input in the format `areaCode-phoneNumber`.                                                               |
+| withAreaCode          | bool                                                                      | true                                                                                                       | If `true`, displays the area code input field. If `false`, only the phone number input is shown.                                     |
+
+### Translations
+
+The `translations` prop allows you to customize the error messages displayed when the area code is invalid. It supports the following keys:
+
+- **areaCodeWithoutZeroError**: Error message displayed when the area code starts with a `0`.
+- **invalidAreaCodeError**: Error message displayed when the area code is invalid.
+
+### titleVariant
+
+The value of `titleVariant` must be one of the following:
+
+- "small"
+- "large"
+
+### Handling Errors
+
+Errors related to the area code or phone number input can be displayed using the `error` prop or through the `validations` prop, which allows more complex validation rules. The component also provides built-in area code validation, which can be customized through the `translations` prop.
+
+### Validations
+
+The `validations` prop allows you to pass an object with validation rules to be applied to both the area code and phone number inputs. For more information on the structure of `validations`, refer to the **UTValidation** component documentation.
+
+### Combining the Area Code and Phone Number
+
+When the `onChange` handler is called, it returns the concatenated value of the area code and phone number in the format: `areaCode-phoneNumber`. If the `withAreaCode` prop is set to `false`, only the phone number will be returned.