Add PhoneInput component

app/soapbox/components/ui/index.ts

@@ -27,6 +27,7 @@ export {
   MenuList,
 } from './menu/menu';
 export { default as Modal } from './modal/modal';
+export { default as PhoneInput } from './phone-input/phone-input';
 export { default as ProgressBar } from './progress-bar/progress-bar';
 export { default as Select } from './select/select';
 export { default as Spinner } from './spinner/spinner';

app/soapbox/components/ui/phone-input/phone-input.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { formatPhoneNumber } from 'soapbox/utils/phone';
+
+import Input from '../input/input';
+
+interface IPhoneInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'required'> {
+  /** Input phone number. */
+  value?: string,
+  /** Change event handler taking the formatted input. */
+  onChange?: (phone: string) => void,
+}
+
+/** Internationalized phone input with country code picker. */
+const PhoneInput: React.FC<IPhoneInput> = (props) => {
+  const { onChange, ...rest } = props;
+
+  /** Pass the formatted phone to the handler. */
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    if (onChange) {
+      onChange(formatPhoneNumber(target.value));
+    }
+  };
+
+  return (
+    <Input
+      type='text'
+      onChange={handleChange}
+      {...rest}
+    />
+  );
+};
+
+export default PhoneInput;

app/soapbox/features/verification/steps/sms-verification.tsx

@@ -5,9 +5,8 @@ import OtpInput from 'react-otp-input';
 
 import snackbar from 'soapbox/actions/snackbar';
 import { confirmPhoneVerification, requestPhoneVerification } from 'soapbox/actions/verification';
-import { Button, Form, FormGroup, Input, Text } from 'soapbox/components/ui';
+import { Button, Form, FormGroup, PhoneInput, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { formatPhoneNumber } from 'soapbox/utils/phone';
 
 const Statuses = {
   IDLE: 'IDLE',
@@ -30,10 +29,8 @@ const SmsVerification = () => {
 
   const isValid = validPhoneNumberRegex.test(phone);
 
-  const onChange = React.useCallback((event) => {
-    const formattedPhone = formatPhoneNumber(event.target.value);
-
-    setPhone(formattedPhone);
+  const onChange = React.useCallback((phone: string) => {
+    setPhone(phone);
   }, []);
 
   const handleSubmit = React.useCallback((event) => {
@@ -147,8 +144,7 @@ const SmsVerification = () => {
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText='Phone Number'>
-            <Input
-              type='text'
+            <PhoneInput
               value={phone}
               onChange={onChange}
               required