Implement support for localized querying (GH-20)

Author: ArtyomVancyan

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                targets: {
+                    node: "current",
+                },
+            },
+        ],
+    ],
+};

jestconfig.json

@@ -1,8 +1,12 @@
 {
   "transform": {
-    "^.+\\.tsx?$": "ts-jest"
+    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.jsx?$": "babel-jest"
   },
   "testRegex": "/tests/.*\\.test\\.(tsx?)$",
+  "transformIgnorePatterns": [
+    "/node_modules/(?!(react-phone-hooks)/)"
+  ],
   "modulePathIgnorePatterns": [
     "<rootDir>/examples"
   ],

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.3",
+  "version": "0.1.4",
   "name": "mui-phone-input",
   "description": "Advanced, highly customizable phone input component for Material UI.",
   "keywords": [
@@ -39,7 +39,7 @@
     "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 joy base core resources index* locale* types* styles* || true",
-    "postpack": "tsx scripts/prepare-package.ts",
+    "postpack": "tsx scripts/prepare-package.ts && mv babel.config.cjs.js babel.config.js",
     "test": "jest --config jestconfig.json",
     "postbuild": "cp -r src/resources ."
   },
@@ -48,10 +48,13 @@
     "react": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "react-phone-hooks": "^0.1.6"
+    "react-phone-hooks": "^0.1.12"
   },
   "devDependencies": {
-    "@emotion/styled": "^11.11.0",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@material-ui/core": "^4.0.0",
     "@mui/base": "^5.0.0-beta.29",
     "@mui/joy": "^5.0.0-beta.18",
@@ -60,8 +63,11 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.11",
     "@types/react": "^17.0.71",
+    "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-hook-form": "^7.49.2",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",

src/core/index.tsx

@@ -54,6 +54,7 @@ const PhoneInput = forwardRef(({
     const [countryCode, setCountryCode] = useState<string>(country);
 
     const {
+        locale,
         searchNotFound = defaultSearchNotFound,
         searchPlaceholder = defaultSearchPlaceholder,
         countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
@@ -67,6 +68,7 @@ const PhoneInput = forwardRef(({
         countriesList,
     } = usePhone({
         query,
+        locale,
         country,
         countryCode,
         initialValue,

src/core/locale.ts

@@ -6,6 +6,9 @@ type Locale = keyof typeof locale;
 export default (lang: Locale) => ({
     props: {
         ...locale[lang].props,
-        MuiPhoneInput: (phoneLocale as any)[lang],
+        MuiPhoneInput: {
+            ...(phoneLocale as any)[lang],
+            locale: lang,
+        },
     }
 })

src/index.tsx

@@ -53,6 +53,7 @@ const PhoneInput = forwardRef(({
     const [countryCode, setCountryCode] = useState<string>(country);
 
     const {
+        locale,
         searchNotFound = defaultSearchNotFound,
         searchPlaceholder = defaultSearchPlaceholder,
         countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
@@ -66,6 +67,7 @@ const PhoneInput = forwardRef(({
         countriesList,
     } = usePhone({
         query,
+        locale,
         country,
         countryCode,
         initialValue,

src/joy/index.tsx

@@ -53,6 +53,7 @@ const PhoneInput = forwardRef(({
     const [countryCode, setCountryCode] = useState<string>(country);
 
     const {
+        locale,
         searchNotFound = defaultSearchNotFound,
         searchPlaceholder = defaultSearchPlaceholder,
         countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
@@ -66,6 +67,7 @@ const PhoneInput = forwardRef(({
         countriesList,
     } = usePhone({
         query,
+        locale,
         country,
         countryCode,
         initialValue,

src/locale.ts

@@ -7,7 +7,10 @@ export default (lang: Locale) => ({
     components: {
         ...locale[lang].components,
         MuiPhoneInput: {
-            defaultProps: (phoneLocale as any)[lang],
+            defaultProps: {
+                ...(phoneLocale as any)[lang],
+                locale: lang,
+            },
         }
     }
 })

tsconfig.json

@@ -3,7 +3,6 @@
     "noImplicitAny": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitUseStrict": true,
     "strictNullChecks": true,
     "module": "esnext",
     "moduleResolution": "node",