From dbaa33cb10fd238980d8f5a132758507c196e516 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Fri, 11 Oct 2024 12:32:14 +0400 Subject: [PATCH 1/9] Implement a basic NextJS application --- examples/antd5.x-next/.gitignore | 12 +++++++++ examples/antd5.x-next/next-env.d.ts | 5 ++++ examples/antd5.x-next/next.config.mjs | 3 +++ examples/antd5.x-next/package.json | 24 +++++++++++++++++ examples/antd5.x-next/src/app/layout.tsx | 11 ++++++++ examples/antd5.x-next/src/app/page.tsx | 5 ++++ examples/antd5.x-next/tsconfig.json | 33 ++++++++++++++++++++++++ 7 files changed, 93 insertions(+) create mode 100644 examples/antd5.x-next/.gitignore create mode 100644 examples/antd5.x-next/next-env.d.ts create mode 100644 examples/antd5.x-next/next.config.mjs create mode 100644 examples/antd5.x-next/package.json create mode 100644 examples/antd5.x-next/src/app/layout.tsx create mode 100644 examples/antd5.x-next/src/app/page.tsx create mode 100644 examples/antd5.x-next/tsconfig.json diff --git a/examples/antd5.x-next/.gitignore b/examples/antd5.x-next/.gitignore new file mode 100644 index 0000000..2d6f3fa --- /dev/null +++ b/examples/antd5.x-next/.gitignore @@ -0,0 +1,12 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +*-lock.json +*.lock + +# next.js +/.next/ + +# production +/build diff --git a/examples/antd5.x-next/next-env.d.ts b/examples/antd5.x-next/next-env.d.ts new file mode 100644 index 0000000..40c3d68 --- /dev/null +++ b/examples/antd5.x-next/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/examples/antd5.x-next/next.config.mjs b/examples/antd5.x-next/next.config.mjs new file mode 100644 index 0000000..3b8c1a5 --- /dev/null +++ b/examples/antd5.x-next/next.config.mjs @@ -0,0 +1,3 @@ +const nextConfig = {}; + +export default nextConfig; diff --git a/examples/antd5.x-next/package.json b/examples/antd5.x-next/package.json new file mode 100644 index 0000000..9fc38d2 --- /dev/null +++ b/examples/antd5.x-next/package.json @@ -0,0 +1,24 @@ +{ + "name": "antd5.x-next", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "antd": "^5.21.3", + "antd-phone-input": "^0.3.10", + "next": "14.2.15", + "react": "^18", + "react-dom": "^18" + }, + "devDependencies": { + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "typescript": "^5" + } +} diff --git a/examples/antd5.x-next/src/app/layout.tsx b/examples/antd5.x-next/src/app/layout.tsx new file mode 100644 index 0000000..23ffb02 --- /dev/null +++ b/examples/antd5.x-next/src/app/layout.tsx @@ -0,0 +1,11 @@ +import {ReactNode} from "react"; + +export default function RootLayout({children}: Readonly<{ children: ReactNode }>) { + return ( + + + {children} + + + ); +} diff --git a/examples/antd5.x-next/src/app/page.tsx b/examples/antd5.x-next/src/app/page.tsx new file mode 100644 index 0000000..d923444 --- /dev/null +++ b/examples/antd5.x-next/src/app/page.tsx @@ -0,0 +1,5 @@ +import PhoneInput from "antd-phone-input"; + +export default function Home() { + return ; +} diff --git a/examples/antd5.x-next/tsconfig.json b/examples/antd5.x-next/tsconfig.json new file mode 100644 index 0000000..85cec1e --- /dev/null +++ b/examples/antd5.x-next/tsconfig.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] + }, + "include": [ + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts" + ], + "exclude": [ + "node_modules" + ] +} From a168ddfadd7e555def7d3f77ea5c859f67861139 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Fri, 11 Oct 2024 12:46:22 +0400 Subject: [PATCH 2/9] Change import type to dynamic --- examples/antd5.x-next/next-env.d.ts | 2 +- examples/antd5.x-next/package.json | 12 ++++++------ examples/antd5.x-next/src/app/page.tsx | 4 +++- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/examples/antd5.x-next/next-env.d.ts b/examples/antd5.x-next/next-env.d.ts index 40c3d68..4f11a03 100644 --- a/examples/antd5.x-next/next-env.d.ts +++ b/examples/antd5.x-next/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/antd5.x-next/package.json b/examples/antd5.x-next/package.json index 9fc38d2..de5fa5f 100644 --- a/examples/antd5.x-next/package.json +++ b/examples/antd5.x-next/package.json @@ -11,14 +11,14 @@ "dependencies": { "antd": "^5.21.3", "antd-phone-input": "^0.3.10", - "next": "14.2.15", - "react": "^18", - "react-dom": "^18" + "next": "^13.1.1", + "react": "18.2.0", + "react-dom": "18.2.0" }, "devDependencies": { - "@types/node": "^20", - "@types/react": "^18", - "@types/react-dom": "^18", + "@types/node": "^18", + "@types/react": "18.2.0", + "@types/react-dom": "18.2.0", "typescript": "^5" } } diff --git a/examples/antd5.x-next/src/app/page.tsx b/examples/antd5.x-next/src/app/page.tsx index d923444..ef9019c 100644 --- a/examples/antd5.x-next/src/app/page.tsx +++ b/examples/antd5.x-next/src/app/page.tsx @@ -1,4 +1,6 @@ -import PhoneInput from "antd-phone-input"; +import dynamic from "next/dynamic"; + +const PhoneInput = dynamic(() => import("antd-phone-input"), {ssr: false}); export default function Home() { return ; From 059dd7736dc34b20d2555645d83be47dffa336f7 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Sun, 13 Oct 2024 19:50:07 +0400 Subject: [PATCH 3/9] Upgrade `react` and `react-dom` versions --- examples/antd5.x-next/package.json | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/examples/antd5.x-next/package.json b/examples/antd5.x-next/package.json index de5fa5f..2bc24fa 100644 --- a/examples/antd5.x-next/package.json +++ b/examples/antd5.x-next/package.json @@ -5,20 +5,19 @@ "scripts": { "dev": "next dev", "build": "next build", - "start": "next start", - "lint": "next lint" + "start": "next start" }, "dependencies": { "antd": "^5.21.3", "antd-phone-input": "^0.3.10", "next": "^13.1.1", - "react": "18.2.0", - "react-dom": "18.2.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "devDependencies": { "@types/node": "^18", - "@types/react": "18.2.0", - "@types/react-dom": "18.2.0", + "@types/react": "^18.3.1", + "@types/react-dom": "^18.3.1", "typescript": "^5" } } From 47761875253742bd62bec58c2a69954dacc03e98 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Wed, 13 Nov 2024 18:10:09 +0400 Subject: [PATCH 4/9] GH-110: Implement support for localized querying --- src/index.tsx | 7 ++++--- src/locale.ts | 5 ++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 678d23a..748abb2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -57,9 +57,8 @@ const PhoneInput = forwardRef(({ ...antInputProps }: PhoneInputProps, forwardedRef: any) => { const formInstance = useFormInstance(); - const {locale = {}} = useContext(ConfigContext); + const {locale = {}, getPrefixCls} = useContext(ConfigContext); const formContext = useContext(FormContext); - const {getPrefixCls} = useContext(ConfigContext); const inputRef = useRef(null); const searchRef = useRef(null); const selectedRef = useRef(false); @@ -69,6 +68,7 @@ const PhoneInput = forwardRef(({ const [countryCode, setCountryCode] = useState(country); const { + locale: localeIdentifier, searchNotFound = defaultSearchNotFound, searchPlaceholder = defaultSearchPlaceholder, countries = new Proxy({}, ({get: (_: any, prop: any) => prop})), @@ -92,6 +92,7 @@ const PhoneInput = forwardRef(({ excludeCountries, preferredCountries, disableParentheses, + locale: localeIdentifier, }); const { @@ -285,4 +286,4 @@ const PhoneInput = forwardRef(({ }) export default PhoneInput; -export {PhoneInputProps, PhoneNumber, locale}; +export type {PhoneInputProps, PhoneNumber, locale}; diff --git a/src/locale.ts b/src/locale.ts index 065320e..117bca3 100644 --- a/src/locale.ts +++ b/src/locale.ts @@ -79,5 +79,8 @@ type Locale = keyof typeof locale; export default (lang: Locale) => ({ ...locale[lang], - PhoneInput: (phoneLocale as any)[lang], + PhoneInput: { + ...(phoneLocale as any)[lang], + locale: lang, + }, }) From 2cb54896a301c2d15dd5b5c670a14d7ee2818893 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Wed, 13 Nov 2024 18:10:37 +0400 Subject: [PATCH 5/9] Upgrade a dependency version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f8b6c87..c7fb4c7 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "react": ">=16" }, "dependencies": { - "react-phone-hooks": "^0.1.11" + "react-phone-hooks": "^0.1.12" }, "devDependencies": { "@testing-library/react": "^14.0.0", From 3e10c64df62bb3c823e9a204b7a2a5c7268c2b9f Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Wed, 13 Nov 2024 18:10:59 +0400 Subject: [PATCH 6/9] Upgrade the version to `0.3.11` --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c7fb4c7..4c55e44 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.3.10", + "version": "0.3.11", "name": "antd-phone-input", "description": "Advanced, highly customizable phone input component for Ant Design.", "keywords": [ From 3e83e33da87b7f4123decb90d941b8ffebd67d1c Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Wed, 13 Nov 2024 18:20:37 +0400 Subject: [PATCH 7/9] Fix export issue --- src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 748abb2..272b721 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -286,4 +286,4 @@ const PhoneInput = forwardRef(({ }) export default PhoneInput; -export type {PhoneInputProps, PhoneNumber, locale}; +export {PhoneInputProps, PhoneNumber, locale}; From 9e5f2989690997a393de89b598245c116480e1b1 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Thu, 14 Nov 2024 20:37:50 +0400 Subject: [PATCH 8/9] Add dev deps for test env --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 4c55e44..f908287 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,8 @@ "antd": "*", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", + "react": "^18.0.0", + "react-dom": "^18.0.0", "ts-jest": "^29.1.1", "tslib": "^2.6.2", "tsx": "^3.12.10", From c0cd71b2509c4936a55d47a2d65c1e53fd84e475 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Thu, 14 Nov 2024 22:42:20 +0400 Subject: [PATCH 9/9] Fix Jest import/export issue --- babel.config.js | 12 ++++++++++++ jestconfig.json | 6 +++++- package.json | 3 +++ 3 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 babel.config.js diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..8871cf2 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,12 @@ +module.exports = { + presets: [ + [ + "@babel/preset-env", + { + targets: { + node: "current", + }, + }, + ], + ], +}; diff --git a/jestconfig.json b/jestconfig.json index bb4ddb9..479e750 100644 --- a/jestconfig.json +++ b/jestconfig.json @@ -1,11 +1,15 @@ { "transform": { - "^.+\\.tsx?$": "ts-jest" + "^.+\\.tsx?$": "ts-jest", + "^.+\\.jsx?$": "babel-jest" }, "testRegex": "/tests/.*\\.test\\.(tsx?)$", "moduleNameMapper": { "^antd/es/(.+)$": "antd/lib/$1" }, + "transformIgnorePatterns": [ + "/node_modules/(?!(react-phone-hooks)/)" + ], "modulePathIgnorePatterns": [ "/examples" ], diff --git a/package.json b/package.json index f908287..513199e 100644 --- a/package.json +++ b/package.json @@ -81,11 +81,14 @@ "react-phone-hooks": "^0.1.12" }, "devDependencies": { + "@babel/core": "^7.26.0", + "@babel/preset-env": "^7.26.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.5.1", "@types/jest": "^29.5.7", "@types/react": "^18.2.34", "antd": "*", + "babel-jest": "^29.7.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "react": "^18.0.0",