[Feature] add a phone input component #306
Description
Is your feature request related to a problem? Please describe.
Currently, our application lacks a dedicated component for entering international phone numbers. Users need to manually format phone numbers:
- Users may enter numbers in various formats (with/without country codes, different separators, etc.)
- No built-in validation for phone number correctness
- Inconsistent phone number storage and display across the application
Describe the solution you'd like
Create a new PhoneInput component:
- Build upon the current
Inputcomponent frompackages/ui/src/elements/input.tsxto maintain consistency with the design system - Use libphonenumber-js for phone number detection, formatting, and validation
- Create a
MetadataJsonobject containing only metadata for supported countries (EN, DE, PL) to minimize bundle size instead of importing the full metadata - Use
input-format/reactor similar library to allow only valid characters and provide real-time formatting - Handle pasted phone numbers correctly by detecting and formatting them appropriately
- Allow setting a default country code (e.g., PL) that formats numbers without country codes (e.g.,
500500500→+48 500 500 500) - When a number starts with a country code, format it according to that country's rules
The component should:
- Accept a
defaultCountryprop (e.g., 'PL', 'DE', 'EN') - Support
onChangecallback with formatted phone number and validation status - Handle international format display (e.g.,
+48 500 500 500) - Validate phone numbers in real-time
- Support all standard Input props for consistency
- Provide clear error states for invalid numbers
- Handle edge cases like partial numbers and international prefixes
Reference implementation: Use the existing component from another UI Library from an older project as a reference for the desired functionality and user experience. Here is the source code for that componen that you can use as a base for this implementation.
Testing playground: Use the libphonenumber-js demo to test and validate phone number formatting logic.
As an additional requirement, please provide a short feedback on your experiences with working with this framework - how easy or difficult it was to get started (including starting the project, getting around the monorepo or readings our docs) and to make the required changes.