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
PhoneNumberFormatterclass that has aformatstatic method (should we just export the function and ditch the class?), used as proxy tolibphonenumber-js'sformatimplementation, handling many formats including national and international. - A
luPhoneNumberFormatpipe exposing the formatter as a pipe for template formatting. - A
PhoneNumberValidatorswith avalidPhoneNumberstatic method (this one is in a class to keep theValidators.somethingsyntax as much as possible) to be used as validator. E164Number,CountryCode,NumberFormatandValidatePhoneNumberLengthResulttypes fromlibphonenumber-jsso 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 🙏
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:
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).
We definitely need pagination or virtual scrolling for this and yeah, search should be added to the TODOs too 😸
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
:woman_cook: https://lucca-front.lucca.tech/PR-3022/storybook
:woman_cook: https://lucca-front.lucca.tech/PR-3022/storybook
:woman_cook: https://lucca-front.lucca.tech/PR-3022/storybook