lucca-front icon indicating copy to clipboard operation
lucca-front copied to clipboard

feat(forms): new phone number input component

Open Supamiu opened this issue 6 months ago • 3 comments

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 a format static method (should we just export the function and ditch the class?), used as proxy to libphonenumber-js's format implementation, handling many formats including national and international.
  • A luPhoneNumberFormat pipe exposing the formatter as a pipe for template formatting.
  • A PhoneNumberValidators with a validPhoneNumber static method (this one is in a class to keep the Validators.something syntax as much as possible) to be used as validator.
  • E164Number, CountryCode, NumberFormat and ValidatePhoneNumberLengthResult types from libphonenumber-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 🙏


Supamiu avatar Aug 14 '24 08:08 Supamiu