🚀 - InputPhoneInternational component with phone number & type validation

rvalitov commented 3 years ago

Which @taiga-ui/* package(s) are relevant/releated to the feature request?

core, i18n

Description

Problem 1. Validation and trust of data used in Taiga

It's not specified what source is used for internalization and phone masks in Taiga and if it can be trusted. According to my tests I faced an issue with incorrect phone mask #863. I tried to make a little PR #868 to fix that. But later I found much more inconsistencies with other countries, too. Besides, there are issues with invalid ISO codes, #915, #916.

Problem 2. Phone mask and validation

It's not the best approach to use the mask constants as the are now. The reason is that in some countries the phone number length is different for mobiles and landline phones. Also, some countries have strict rules about the phone numbers, for example, mobile phones can start only with digit 5, and landlines with digit 4. All other prefixes are invalid. Therefore, even if the input is correct in term of length, it's still invalid phone number.

How to solve that?

I think Taiga should use a trusted source of data for phone number masks & validation, and internalization, i.e. include and use some other package that keeps updated when ISO codes change, etc.

My solution

I recommend to use libphonenumber-js:

Because:

it covers all the officially assigned country codes and phone numbers
regularly updated
based on official Google lib, which adds more trust that the data is valid
perfectly documented
provides phone masks
provides sample phone numbers for each country and type (mobile, landline)
detects phone number type (mobile, landline, toll free, etc.)
provides a limited phone number validation (by length) and full validation (that this number is really confirms the phone number rules of the specified country)

Demo

I modified the InputPhoneInternational component to work with libphonenumber-js. The modification includes:

removed deprecated country-iso-codes.ts, instead used import {TuiCountryIsoCode} from '@taiga-ui/i18n'
removed countries.ts file with mask constants, used masks generated by libphonenumber-js
displays additional info as the user types in. The following is displayed in tui-form__field-note below the input field:
- check if phone number is valid
- check if phone number length is valid and how to fix that
- show phone type.
- show sample phone number

GIF demo:

phoneinput

I think there's a plenty room for discussion here. I'm eager to make a PR.

waterplea commented 3 years ago

The data was given to us by internal analysts long time ago, so I guess it changed since then. I believe it should just be tokenized, it's a mystery to me why it wasn't done in the first place :) Will you be willing to submit a PR? The best resolution would be to sync current constant value with the lib you suggested and use it as a default value for the token. And an info on how to change that to other library should be added to the demo page.

Another point to consider is deprecating built-in values in favor of 3rd party solution, not sure though if it's a good idea not to bundle anything. We definitely not going to add a dependency to main packages. Perhaps we can move these components to a separate addon and add dependency + validators you displayed. So that's something to consider as well.

rvalitov commented 2 years ago

I can make a PR. Perhaps, the approach with separate addon & dependency there is the best. In this case the InputPhoneInternational moves completely to the addon? Or there will be 2 versions of it: as addon, and simple bundled with the core?