lucca-front
lucca-front copied to clipboard
feat(forms): new phone number input component
Description
This PR adds a new input for phone numbers which makes use of libphonenumber-js to validate, parse and format phone numbers.
It exposes:
- The input itself.
- A
PhoneNumberFormatter
class that has aformat
static method (should we just export the function and ditch the class?), used as proxy tolibphonenumber-js
'sformat
implementation, handling many formats including national and international. - A
luPhoneNumberFormat
pipe exposing the formatter as a pipe for template formatting. - A
PhoneNumberValidators
with avalidPhoneNumber
static method (this one is in a class to keep theValidators.something
syntax as much as possible) to be used as validator. -
E164Number
,CountryCode
,NumberFormat
andValidatePhoneNumberLengthResult
types fromlibphonenumber-js
so you don't have to add a dependency to it to properly type your code using phone number input.
🚧 TODO:
- We need to plug in aria attributes to make sure this is ok for screen readers (@vvalentin-lucca)
- HTML/CSS integration needs to be properly done, atm it's two inputs and that's it
- Should we revert format to raw value on focus for UX?
Kudos to @t8g for the nice pair session allowing us to challenge the design properly 🙏