refactor(ui): Break phone number utils and data into proper folders (#…

…3892)

Co-authored-by: Joe Bell <7349341+joe-bell@users.noreply.github.com>

.changeset/stale-lemons-collect.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/common/phone-number-field/index.tsx → packages/ui/src/common/phone-number-field.tsx

@@ -5,13 +5,70 @@ import { cx } from 'cva';
 import * as React from 'react';
 import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
 
+import { type CountryIso, IsoToCountryMap } from '~/constants/phone-number';
 import { useLocalizations } from '~/hooks/use-localizations';
 import * as Field from '~/primitives/field';
 import * as Icon from '~/primitives/icon';
 import { mergeRefs } from '~/utils/merge-refs';
+import { extractDigits, formatPhoneNumber, parsePhoneString } from '~/utils/phone-number';
 
-import { IsoToCountryMap } from './data';
-import { useFormattedPhoneNumber } from './useFormattedPhoneNumber';
+type UseFormattedPhoneNumberProps = {
+  initPhoneWithCode: string;
+  locationBasedCountryIso?: CountryIso;
+};
+
+const format = (str: string, iso: CountryIso) => {
+  if (!str) {
+    return '';
+  }
+  const country = IsoToCountryMap.get(iso);
+  return formatPhoneNumber(str, country?.pattern, country?.code);
+};
+
+const useFormattedPhoneNumber = (props: UseFormattedPhoneNumberProps) => {
+  const [number, setNumber] = React.useState(() => {
+    const { number } = parsePhoneString(props.initPhoneWithCode || '');
+    return number;
+  });
+
+  const [iso, setIso] = React.useState(
+    parsePhoneString(props.initPhoneWithCode || '').number
+      ? parsePhoneString(props.initPhoneWithCode || '').iso
+      : props.locationBasedCountryIso || 'us',
+  );
+
+  React.useEffect(() => {
+    setNumber(extractDigits(number));
+  }, [iso, number]);
+
+  const numberWithCode = React.useMemo(() => {
+    if (!number) {
+      return '';
+    }
+    const dialCode = IsoToCountryMap.get(iso)?.code || '1';
+    return '+' + extractDigits(`${dialCode}${number}`);
+  }, [iso, number]);
+
+  const formattedNumber = React.useMemo(() => {
+    return format(number, iso);
+  }, [iso, number]);
+
+  const setNumberAndIso = React.useCallback((str: string) => {
+    const { iso, number } = parsePhoneString(str);
+    setNumber(number);
+    setIso(iso);
+  }, []);
+
+  return {
+    setNumber,
+    setIso,
+    setNumberAndIso,
+    iso,
+    number,
+    numberWithCode,
+    formattedNumber,
+  };
+};
 
 const countryOptions = Array.from(IsoToCountryMap.values()).map(country => {
   return {

packages/ui/src/components/sign-up/steps/verifications.tsx

@@ -4,7 +4,6 @@ import * as SignUp from '@clerk/elements/sign-up';
 
 import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
-import { parsePhoneString } from '~/common/phone-number-field/utils';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -13,6 +12,7 @@ import * as Card from '~/primitives/card';
 import * as Icon from '~/primitives/icon';
 import { LinkButton } from '~/primitives/link';
 import type { RequireExactlyOne } from '~/types/utils';
+import { parsePhoneString } from '~/utils/phone-number';
 
 /* Internal
   ============================================ */

packages/ui/src/utils/format-safe-identifier.ts

@@ -1,4 +1,4 @@
-import { stringToFormattedPhoneString } from '~/common/phone-number-field/utils';
+import { stringToFormattedPhoneString } from '~/utils/phone-number';
 
 export const isMaskedIdentifier = (str: string | undefined | null) => str && str.includes('**');
 

packages/ui/src/common/phone-number-field/utils.ts → packages/ui/src/utils/phone-number.ts

@@ -1,5 +1,5 @@
-import type { CountryEntry, CountryIso } from './data';
-import { CodeToCountriesMap, IsoToCountryMap, SubAreaCodeSets } from './data';
+import type { CountryEntry, CountryIso } from '~/constants/phone-number';
+import { CodeToCountriesMap, IsoToCountryMap, SubAreaCodeSets } from '~/constants/phone-number';
 
 // offset between uppercase ascii and regional indicator symbols
 const OFFSET = 127397;