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 1 year 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

Great job! I identified 46 missing flags. I will start to create them and if I miss time before the release I'll add temporary placeholders including the country ISO Alpha 2: image By checking other Phone number components, it looks they tend to use regional flags on cases like Martinique (which is a good thing imho, plus, it helps to differentiate options entries).

I'll take the basic UI integration and let the accessibility part to @vvalentin-lucca.

In my opinion, it's preferable to revert raw value on focus (like Number Format).

@Supamiu Would it possible to improve the search on country code? (E.g. being able to select France by searching +33, 33 or FR)

Also, we have light performance issues which are worsen a bit by adding flags on the dropdown. Do we have a way to improve it (by using pagination for example).

jeremie-lucca avatar Aug 14 '24 14:08 jeremie-lucca

We definitely need pagination or virtual scrolling for this and yeah, search should be added to the TODOs too 😸

Supamiu avatar Aug 14 '24 15:08 Supamiu

I added search and flags, virtual scrolling is going to be a big thing tho as it'd have to be done on simple-select's panel itself, so we'll have to design this properly and make sure we want it, ping @GuillaumeNury

Supamiu avatar Aug 16 '24 09:08 Supamiu

:woman_cook: https://lucca-front.lucca.tech/PR-3022/storybook

LuccaIntegration avatar Aug 21 '24 07:08 LuccaIntegration

:woman_cook: https://lucca-front.lucca.tech/PR-3022/storybook

LuccaIntegration avatar Aug 21 '24 08:08 LuccaIntegration

:woman_cook: https://lucca-front.lucca.tech/PR-3022/storybook

LuccaIntegration avatar Aug 21 '24 12:08 LuccaIntegration