feat(tel-input): implement TelInput

package.json

@@ -60,6 +60,7 @@
     "rc-time-picker": "^3.4.0",
     "react-dropzone": "^7.0.1",
     "react-html-attributes": "^1.4.3",
+    "react-intl-tel-input": "^6.1.0",
     "react-select": "^2.3.0",
     "react-spring": "^7.2.10",
     "react-textarea-autosize": "^7.1.0",

src/TelInput/TelInput.mdx

@@ -0,0 +1,35 @@
+---
+name: TelInput
+menu: Components
+route: /components/tel-input
+---
+
+import { PropsTable, Playground } from 'docz';
+
+import TelInput from './';
+
+# TelInput
+
+Entering and validating international telephone numbers.
+
+## When To Use
+
+- you want to format and validating the user's phone numbers.
+
+## Examples
+
+```js
+import { TelInput } from 'tailor-ui';
+```
+
+### Basic
+
+<Playground>
+  <TelInput onChange={console.log} />
+</Playground>
+
+## API
+
+<PropsTable of={TelInput} />
+
+The component is based on `react-intl-tel-input`, please check more API on it's [document](https://patw0929.github.io/react-intl-tel-input/).

src/TelInput/TelInput.tsx

@@ -0,0 +1,40 @@
+import IntlTelInput from 'react-intl-tel-input';
+import React, { FunctionComponent, MouseEventHandler } from 'react';
+
+import StyledTelInput from './style';
+
+interface ITelInputProps {
+  id?: string;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (
+    isValid: boolean,
+    value: string,
+    phoneInfo: object,
+    fullPhoneNumber: string
+  ) => void;
+  onBlur?: MouseEventHandler;
+}
+
+const TelInput: FunctionComponent<ITelInputProps> = ({
+  id,
+  name,
+  onChange,
+  onBlur,
+  ...props
+}) => (
+  <StyledTelInput>
+    <IntlTelInput
+      fieldId={id}
+      fieldName={name}
+      onPhoneNumberChange={onChange}
+      onPhoneNumberBlur={onBlur}
+      format
+      preferredCountries={['tw']}
+      {...props}
+    />
+  </StyledTelInput>
+);
+
+export default TelInput;

src/TelInput/index.ts

@@ -0,0 +1 @@
+export { default } from './TelInput';