Get rid of react-phone-input-2 (GH-57)

typesnippet · Nov 6, 2023 · 7c435dd · 7c435dd
2 parents b8d5df3 + 98b88c2
commit 7c435dd
Show file tree

Hide file tree

Showing 37 changed files with 6,328 additions and 1,783 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -14,11 +14,20 @@ jobs:
     strategy:
       matrix:
         node-version: [ 16.x, 18.x, 20.x ]
+        antd-version: [ 424, 500, 510, 520, 530, 540, 550, 560, 570, 580, 590, 5100, 5110 ]
 
     steps:
       - name: Checkout
         uses: actions/checkout@v3
 
+      - name: Set up Python
+        uses: actions/setup-python@v2
+
+      - name: Install Tox
+        run: |
+          pip install --upgrade pip
+          pip install tox tox-gh-actions
+
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
@@ -28,16 +37,16 @@ jobs:
       - name: Install dependencies
         run: npm install
 
-      - name: Run tests
-        run: npm test
+      - name: Run Tox Jest
+        run: tox -e antd_v${{ matrix.antd-version }}_jest
 
   build:
 
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        env: [ antd_v424, antd_v510, antd_v520, antd_v530, antd_v540, antd_v550, antd_v560, antd_v570, antd_v580, antd_v590 ]
+        antd-version: [ 424, 500, 510, 520, 530, 540, 550, 560, 570, 580, 590, 5100, 5110 ]
 
     steps:
       - name: Checkout
@@ -64,4 +73,4 @@ jobs:
           npm pack
 
       - name: Run Tox
-        run: tox -e ${{ matrix.env }}
+        run: tox -e antd_v${{ matrix.antd-version }}
diff --git a/.github/workflows/update.yml b/.github/workflows/update.yml
@@ -17,7 +17,7 @@ jobs:
 
       - name: Fetch third-party metadata
         run: |
-          curl -o resources/metadata.xml https://raw.githubusercontent.com/daviddrysdale/python-phonenumbers/dev/resources/PhoneNumberMetadata.xml
+          curl -o resources/metadata.xml https://raw.githubusercontent.com/google/libphonenumber/master/resources/PhoneNumberMetadata.xml
 
       - name: Update metadata
         run: |

diff --git a/.gitignore b/.gitignore
@@ -6,11 +6,11 @@ package-lock.json
 .idea/
 
 # Build files
-./legacy/
+./metadata/
+./styles*
+./types*
 ./index*
 
-!examples/**/index*
-
 # Pycache
 __pycache__/
 *.py[cod]

diff --git a/.npmignore b/.npmignore
@@ -1,3 +1,4 @@
+resources
 examples
 scripts
 tests
diff --git a/README.md b/README.md
@@ -9,8 +9,8 @@
 
 Advanced phone input component for [Ant Design](https://github.com/ant-design/ant-design) that provides support for all
 countries and is compatible with [`antd`](https://github.com/ant-design/ant-design) 4 and 5 versions. It has built-in
-support for area codes and provides validation to ensure that the entered numbers are valid. This open-source project
-is designed to simplify the process of collecting phone numbers from users.
+support for area codes and provides [strict validation](#validation) to ensure the entered numbers are valid. This
+open-source project is designed to simplify the process of collecting phone numbers from users.
 
 ## Installation
 
@@ -24,10 +24,9 @@ yarn add antd-phone-input
 
 ## Usage
 
-The latest version does not require any additional actions for loading the styles as it uses
-the [`cssinjs`](https://github.com/ant-design/cssinjs) ecosystem.
-
-### Antd 5.x
+The library is designed to work with the `4.x` and `5.x` series of versions in the same way. It can be used as a regular
+Ant [Input](https://ant.design/components/input) (see the sample below). More usage examples can be found in
+the [examples](examples) directory.
 
 ```javascript
 import React from "react";
@@ -43,52 +42,30 @@ const Demo = () => {
 }
 ```
 
-![latest](https://user-images.githubusercontent.com/44609997/227775101-72b03e76-52bc-421d-8e75-a03c9d0d6d08.png)
-
-### Antd 4.x
-
-For `4.x` versions, you should use the `legacy` endpoint.
-
-```javascript
-import PhoneInput from "antd-phone-input/legacy";
-```
-
-For including the styles, you should import them in the main `less` file after importing either
-the `antd/dist/antd.less` or `antd/dist/antd.dark.less` styles.
-
-```diff
-@import "~antd/dist/antd";
-+ @import "~antd-phone-input/legacy/style";
-```
-
-![legacy](https://user-images.githubusercontent.com/44609997/227775155-9e22bc63-2148-4714-ba8a-9bb4e44c0128.png)
-
 ## Value
 
-The value of the component is an object containing the parts of a phone number. This format of value gives a wide range
-of opportunities for handling the data in your custom way. For example, you can easily merge the parts of the phone
-number into a single string.
+The value of the component is an object containing the parts of the phone number. This format of value gives a wide
+range of opportunities for handling the data in your desired way.
 
 ```javascript
 {
   countryCode: 1,
   areaCode: 702,
   phoneNumber: "1234567",
   isoCode: "us",
-  valid: function valid()
+  valid: function valid(strict)
 }
 ```
 
 ## Validation
 
-The `valid` function of the value object returns the validity of the phone number depending on the selected country. So
-this can be used in a `validator` like this:
+The `valid` function of the value object returns the current validity of the entered phone number based on the selected
+country. So this can be used in a `validator` like this:
 
 ```javascript
 const validator = (_, {valid}) => {
-  if (valid()) {
-    return Promise.resolve();
-  }
+  // if (valid(true)) return Promise.resolve(); // strict validation
+  if (valid()) return Promise.resolve(); // non-strict validation
   return Promise.reject("Invalid phone number");
 }
 
@@ -99,33 +76,28 @@ return (
 )
 ```
 
+By default, the `valid` function validates the phone number based on the possible supported lengths of the selected
+country. But it also supports a strict validation that apart from the length also checks if the area code is valid for
+the selected country. To enable strict validation, pass `true` as the first argument of the `valid` function.
+
 ## Props
 
+Apart from the below-described phone-specific properties, all [Input](https://ant.design/components/input#input)
+properties that are supported by the used `antd` version, can be applied to the phone input component.
+
 | Property           | Description                                                                                                                                                                 | Type                      |
 |--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
-| size               | Either `large`, `middle` or `small`. Default value is `middle`. See at ant [docs][antInputProps] for more.                                                                  | string                    |
 | value              | An object containing a parsed phone number or the raw number. This also applies to the `initialValue` property of [Form.Item](https://ant.design/components/form#formitem). | [object](#value) / string |
-| style              | Applies CSS styles to the container element.                                                                                                                                | CSSProperties             |
-| className          | The value will be assigned to the container element.                                                                                                                        | string                    |
-| disabled           | Disables the whole input component.                                                                                                                                         | boolean                   |
+| country            | Country code to be selected by default. By default, it will show the flag of the user's country.                                                                            | string                    |
 | enableSearch       | Enables search in the country selection dropdown menu. Default value is `false`.                                                                                            | boolean                   |
+| searchNotFound     | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`.                                               | string                    |
+| searchPlaceholder  | The value is shown if `enableSearch` is `true`. Default value is `Search country`.                                                                                          | string                    |
 | disableDropdown    | Disables the manual country selection through the dropdown menu.                                                                                                            | boolean                   |
-| inputProps         | [HTML properties of input][htmlInputProps] to pass into the input.  E.g. `inputProps={{autoFocus: true}}`.                                                                  | InputHTMLAttributes       |
-| searchPlaceholder  | The value is shown if `enableSearch` is `true`. Default value is `search`.                                                                                                  | string                    |
-| searchNotFound     | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No entries to show`.                                             | string                    |
-| placeholder        | Custom placeholder. Default placeholder is `1 (702) 123-4567`.                                                                                                              | string                    |
-| country            | Country code to be selected by default. By default, it will show the flag of the user's country.                                                                            | string                    |
-| regions            | Show only the countries of the specified regions. See the list of [available regions][reactPhoneRegions].                                                                   | string[]                  |
 | onlyCountries      | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`.                                                                                        | string[]                  |
 | excludeCountries   | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`.                                                                      | string[]                  |
 | preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`.                                                                                 | string[]                  |
-| onChange           | Callback when the user is inputting. See at ant [docs][antInputProps] for more.                                                                                             | function(value, e)        |
-| onPressEnter       | The callback function that is triggered when <kbd>Enter</kbd> key is pressed.                                                                                               | function(e)               |
-| onFocus            | The callback is triggered when the input element is focused.                                                                                                                | function(e, value)        |
-| onClick            | The callback is triggered when the user clicks on the input element.                                                                                                        | function(e, value)        |
-| onBlur             | The callback is triggered when the input element gets blurred or unfocused.                                                                                                 | function(e, value)        |
-| onKeyDown          | The callback is triggered when any key is pressed down.                                                                                                                     | function(e)               |
-| onMount            | The callback is triggered once the component gets mounted.                                                                                                                  | function(e)               |
+| onChange           | The only difference from the original `onChange` is that value comes first.                                                                                                 | function(value, event)    |
+| onMount            | The callback is triggered once the component gets mounted.                                                                                                                  | function(value)           |
 
 ## Contribute
 
@@ -135,9 +107,3 @@ don't forget to add tests for your changes.
 ## License
 
 Copyright (C) 2023 Artyom Vancyan. [MIT](LICENSE)
-
-[antInputProps]:https://ant.design/components/input#input
-
-[reactPhoneRegions]:https://github.com/bl00mber/react-phone-input-2#regions
-
-[htmlInputProps]:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
diff --git a/examples/antd4.x/package.json b/examples/antd4.x/package.json
@@ -7,11 +7,10 @@
     "@types/react-dom": "^18.2.0",
     "@craco/craco": "^7.0.0",
     "antd": "^4.24.8",
-    "antd-phone-input": "^0.2.0",
+    "antd-phone-input": "^0.3.0",
     "craco-less": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-phone-input-2": "^2.15.1",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5"
   },

diff --git a/examples/antd4.x/src/Demo.tsx b/examples/antd4.x/src/Demo.tsx
@@ -2,7 +2,7 @@ import {useState} from "react";
 import Form from "antd/es/form";
 import Button from "antd/es/button";
 import FormItem from "antd/es/form/FormItem";
-import PhoneInput from "antd-phone-input/legacy";
+import PhoneInput from "antd-phone-input";
 
 const Demo = () => {
 	const [value, setValue] = useState(null);

diff --git a/examples/antd4.x/src/themes/Dark.tsx b/examples/antd4.x/src/themes/Dark.tsx
@@ -1,4 +1,4 @@
-import "./dark.less";
+import "antd/dist/antd.dark.less";
 import Demo from "../Demo";
 
 export default Demo;
diff --git a/examples/antd4.x/src/themes/Light.tsx b/examples/antd4.x/src/themes/Light.tsx
@@ -1,4 +1,4 @@
-import "./light.less";
+import "antd/dist/antd.less";
 import Demo from "../Demo";
 
 export default Demo;
diff --git a/examples/antd4.x/src/themes/dark.less b/examples/antd4.x/src/themes/dark.less
diff --git a/examples/antd4.x/src/themes/light.less b/examples/antd4.x/src/themes/light.less
diff --git a/examples/antd5.x/package.json b/examples/antd5.x/package.json
@@ -6,7 +6,7 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "antd": "^5.8.3",
-    "antd-phone-input": "^0.2.0",
+    "antd-phone-input": "^0.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.2.4",
+  "version": "0.3.0",
   "name": "antd-phone-input",
   "description": "Advanced, highly customizable phone input component for Ant Design.",
   "keywords": [
@@ -32,38 +32,35 @@
         "default": "./index.d.ts"
       }
     },
-    "./legacy": {
-      "import": "./legacy/index.js",
-      "require": "./legacy/index.cjs.js",
-      "types": {
-        "default": "./legacy/index.d.ts"
-      }
-    },
     "./types": {
       "import": "./types.js",
       "require": "./types.cjs.js",
       "types": {
         "default": "./types.d.ts"
       }
     },
-    "./legacy/style": {
-      "default": "./legacy/style.less"
+    "./styles": {
+      "import": "./styles.js",
+      "require": "./styles.cjs.js",
+      "types": {
+        "default": "./styles.d.ts"
+      }
     },
     "./package.json": "./package.json"
   },
   "files": [
     "index*",
-    "style*",
     "types*",
-    "legacy",
+    "styles*",
     "LICENSE",
+    "metadata",
     "README.md"
   ],
   "scripts": {
-    "rename": "bash -c 'for file in $1*.js; do if [[ \"${file%.js}\" =~ ^[^.]*$ ]]; then mv \"$file\" \"${file%.js}.$0.js\"; fi; done'",
-    "compile": "tsc --module commonjs && npm run rename -- cjs && npm run rename -- cjs legacy/ && tsc --declaration",
-    "build": "npm run compile && tsx scripts/prepare-styles.ts",
-    "prebuild": "rm -r legacy index* style* types* || true",
+    "rename": "bash -c 'for file in *.js; do mv $file \"${file%.js}.$0.js\"; done'",
+    "build": "tsc --module commonjs && npm run rename -- cjs && tsc --declaration",
+    "prebuild": "rm -r metadata index* types* styles* || true",
+    "postbuild": "tsx scripts/prepare-styles.ts",
     "postpack": "tsx scripts/prepare-package.ts",
     "test": "jest --config jestconfig.json"
   },
@@ -75,19 +72,15 @@
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.21",
-    "antd": "npm:[email protected]",
-    "antd4": "npm:antd@^4.24.8",
+    "@types/jest": "^29.5.7",
+    "@types/react": "^18.2.34",
+    "antd": "*",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
     "tsx": "^3.12.10",
     "typescript": "^5.2.2"
-  },
-  "dependencies": {
-    "react-phone-input-2": "^2.15.1"
   }
 }
diff --git a/resources/stylesheet.json b/resources/stylesheet.json