Integrate the react-phone-hooks first build

Author: ArtyomVancyan

development/package.json

@@ -9,9 +9,9 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "antd": "^5.8.3",
-    "antd-phone-input": "^0.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-phone-hooks": "file:../react-phone-hooks-0.1.0.tgz",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5"
   },

development/src/ant-phone/index.tsx

@@ -4,26 +4,22 @@ import {FormContext} from "antd/es/form/context";
 import Select from "antd/es/select";
 import Input from "antd/es/input";
 
-import {PhoneInputProps} from "./types";
-import {PhoneNumber} from "../phone-hooks/types";
-
-import {mergedStyles} from "./styles";
-import {injectStyles} from "../phone-hooks/styles";
-
 import {
 	checkValidity,
 	cleanInput,
 	displayFormat,
+	getCountry,
 	getDefaultISO2Code,
 	getMetadata,
 	getRawValue,
 	parsePhoneNumber,
 	usePhone,
-} from "../phone-hooks";
+} from "react-phone-hooks";
 
-import countries from "../phone-hooks/metadata/countries.json";
+import {injectMergedStyles} from "./styles";
+import {PhoneInputProps, PhoneNumber} from "./types";
 
-injectStyles(mergedStyles());
+injectMergedStyles();
 
 const PhoneInput = ({
 						value: initialValue = "",
@@ -68,7 +64,7 @@ const PhoneInput = ({
 
 	const selectValue = useMemo(() => {
 		let metadata = getMetadata(getRawValue(value), countriesList);
-		metadata = metadata || countries.find(([iso]) => iso === countryCode);
+		metadata = metadata || getCountry(countryCode as any);
 		return ({...metadata})?.[0] + ({...metadata})?.[2];
 	}, [countriesList, countryCode, value])
 

development/src/ant-phone/styles.ts

@@ -1,5 +1,6 @@
-import {jsonToCss,} from "../phone-hooks/styles";
-import phoneStyles from "./resources/stylesheet.json";
-import flagsStyles from "../phone-hooks/resources/stylesheet.json";
+import {injectStyles, jsonToCss} from "react-phone-hooks/styles";
+import commonStyles from "react-phone-hooks/stylesheet.json";
 
-export const mergedStyles = () => jsonToCss(Object.assign(phoneStyles, flagsStyles));
+import customStyles from "./resources/stylesheet.json";
+
+export const injectMergedStyles = () => injectStyles(jsonToCss(Object.assign(commonStyles, customStyles)));

development/src/ant-phone/types.ts

@@ -1,7 +1,8 @@
 import {ChangeEvent, KeyboardEvent} from "react";
+import types from "react-phone-hooks/types";
 import {InputProps} from "antd/es/input";
 
-import {PhoneNumber} from "../phone-hooks/types";
+export type PhoneNumber = types.PhoneNumber;
 
 export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange"> {
 	value?: PhoneNumber | string;

development/src/mui-phone/index.tsx

@@ -1,26 +1,22 @@
 import {ChangeEvent, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from "react";
 import {InputAdornment, MenuItem, Select, TextField} from "@mui/material";
 
-import {PhoneInputProps} from "./types";
-import {PhoneNumber} from "../phone-hooks/types";
-
-import {mergedStyles} from "./styles";
-import {injectStyles} from "../phone-hooks/styles";
-
 import {
 	checkValidity,
 	cleanInput,
 	displayFormat,
+	getCountry,
 	getDefaultISO2Code,
 	getMetadata,
 	getRawValue,
 	parsePhoneNumber,
 	usePhone,
-} from "../phone-hooks";
+} from "react-phone-hooks";
 
-import countries from "../phone-hooks/metadata/countries.json";
+import {injectMergedStyles} from "./styles";
+import {PhoneInputProps, PhoneNumber} from "./types";
 
-injectStyles(mergedStyles());
+injectMergedStyles();
 
 const PhoneInput = ({
 						value: initialValue = "",
@@ -68,7 +64,7 @@ const PhoneInput = ({
 
 	const selectValue = useMemo(() => {
 		let metadata = getMetadata(getRawValue(value), countriesList);
-		metadata = metadata || countries.find(([iso]) => iso === countryCode);
+		metadata = metadata || getCountry(countryCode as any);
 		return ({...metadata})?.[0] + ({...metadata})?.[2];
 	}, [countriesList, countryCode, value])
 

development/src/mui-phone/styles.ts

@@ -1,5 +1,6 @@
-import {jsonToCss,} from "../phone-hooks/styles";
-import phoneStyles from "./resources/stylesheet.json";
-import flagsStyles from "../phone-hooks/resources/stylesheet.json";
+import {injectStyles, jsonToCss} from "react-phone-hooks/styles";
+import commonStyles from "react-phone-hooks/stylesheet.json";
 
-export const mergedStyles = () => jsonToCss(Object.assign(phoneStyles, flagsStyles));
+import customStyles from "./resources/stylesheet.json";
+
+export const injectMergedStyles = () => injectStyles(jsonToCss(Object.assign(commonStyles, customStyles)));

development/src/mui-phone/types.ts

@@ -1,7 +1,8 @@
 import {ChangeEvent, KeyboardEvent} from "react";
+import types from "react-phone-hooks/types";
 import {TextFieldProps} from "@mui/material/TextField";
 
-import {PhoneNumber} from "../phone-hooks/types";
+export type PhoneNumber = types.PhoneNumber;
 
 export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
 	value?: PhoneNumber | string;

development/src/phone-hooks/index.ts

@@ -17,6 +17,10 @@ export const getMetadata = (rawValue: string, countriesList: typeof countries =
 	return countriesList.find((c) => rawValue.startsWith(c[2]));
 }
 
+export const getCountry = (countryCode: keyof typeof countries) => {
+	return countries.find(([iso]) => iso === countryCode);
+}
+
 export const getRawValue = (value: PhoneNumber | string) => {
 	if (typeof value === "string") return value.replaceAll(/\D/g, "");
 	return [value?.countryCode, value?.areaCode, value?.phoneNumber].filter(Boolean).join("");