wrapped name package methods in react i18n

.changeset/rude-parrots-do.md

@@ -0,0 +1,5 @@
+---
+'@shopify/react-i18n': minor
+---
+
+Added `abbreviateBusinessName` method. Also delegated all name related functions to the @shopify/name repo.

packages/react-i18n/README.md

@@ -151,6 +151,7 @@ The provided `i18n` object exposes many useful methods for internationalizing yo
   Tanaka" (Japanese "健 田中") would be abbreviated with the last name "田中". You may also pass an optional `idealMaxLength` parameter, which gives the maximum allowable abbreviation length when
   trying to abbreviate a name in the Korean language (default 3 characters). In Korean, if the first name is longer than
   this length, the method will instead return the first character of the first name.
+- `abbreviateBusinessName()`: Takes a business name and returns a language appropriate abbreviated name, or will return the input name if it is unable to find a suitable abbreviation. For example, "Shopify" would be abbreviated to "Sho", whereas the japanese business name "任天堂" would be abbreviated "任天堂". You may also pass an optional `idealMaxLength` parameter, which gives the maximum allowable abbreviation length when trying to abbreviate a name.
 - `ordinal()`: formats a number as an ordinal according to the locale, e.g. `1st`, `2nd`, `3rd`, `4th`
 - `hasEasternNameOrderFormatter()`: returns true when an eastern name order formatter corresponding to the locale/language exists.
 - `numberSymbols()`: returns an object specifying the current locale's decimal and thousand symbols. Example: For the `es-ES` locale the output would be `{ decimalSymbol: ',', thousandSymbol: '.' }`

packages/react-i18n/package.json

@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "@shopify/dates": "^2.0.3",
+    "@shopify/name": "^1.0.0",
     "@shopify/function-enhancers": "^3.0.1",
     "@shopify/i18n": "^2.0.1",
     "@shopify/react-effect": "^5.0.3",

packages/react-i18n/src/constants/index.ts

@@ -189,29 +189,6 @@ export {
   DEFAULT_DECIMAL_PLACES,
 } from './currency-decimal-places';
 
-export const EASTERN_NAME_ORDER_FORMATTERS = new Map([
-  [
-    'ko',
-    (firstName: string, lastName: string, full: boolean) =>
-      full ? `${lastName}${firstName}` : lastName,
-  ],
-  [
-    'ja',
-    (firstName: string, lastName: string, full: boolean) =>
-      full ? `${lastName}${firstName}` : `${lastName}様`,
-  ],
-  [
-    'zh-CN',
-    (firstName: string, lastName: string, full: boolean) =>
-      full ? `${lastName}${firstName}` : lastName,
-  ],
-  [
-    'zh-TW',
-    (firstName: string, lastName: string, full: boolean) =>
-      full ? `${lastName}${firstName}` : lastName,
-  ],
-]);
-
 export const CurrencyShortFormException = {
   BRL: 'R$',
   HKD: 'HK$',

packages/react-i18n/src/i18n.ts

@@ -12,6 +12,12 @@ import {
   isLessThanOneWeekAway,
   isLessThanOneYearAway,
 } from '@shopify/dates';
+import {
+  formatName as importedFormatName,
+  abbreviateName as importedAbbreviateName,
+  abbreviateBusinessName as importedAbbreviateBusinessName,
+  hasFamilyNameGivenNameOrdering as importedHasFamilyNameGivenNameOrdering,
+} from '@shopify/name';
 import {memoize} from '@shopify/function-enhancers';
 import {languageFromLocale, regionFromLocale} from '@shopify/i18n';
 
@@ -31,7 +37,6 @@ import {
   RTL_LANGUAGES,
   currencyDecimalPlaces,
   DEFAULT_DECIMAL_PLACES,
-  EASTERN_NAME_ORDER_FORMATTERS,
   CurrencyShortFormException,
   UnicodeCharacterSet,
 } from './constants';
@@ -45,7 +50,6 @@ import {
   memoizedNumberFormatter,
   memoizedPluralRules,
   convertFirstSpaceToNonBreakingSpace,
-  tryAbbreviateName,
   identifyScripts,
 } from './utilities';
 
@@ -366,29 +370,13 @@ export class I18n {
     lastName?: string,
     options?: {full?: boolean},
   ) {
-    if (!firstName) {
-      return lastName || '';
-    }
-    if (!lastName) {
-      return firstName;
-    }
-
-    const isFullName = Boolean(options && options.full);
-
-    const customNameFormatter =
-      EASTERN_NAME_ORDER_FORMATTERS.get(this.locale) ||
-      EASTERN_NAME_ORDER_FORMATTERS.get(this.language);
-
-    if (customNameFormatter) {
-      return customNameFormatter(firstName, lastName, isFullName);
-    }
-    if (isFullName) {
-      return `${firstName} ${lastName}`;
-    }
-    return firstName;
+    return importedFormatName({
+      name: {givenName: firstName, familyName: lastName},
+      locale: this.locale,
+      options,
+    });
   }
 
-  // Note: A similar Ruby implementation of this function also exists at https://github.com/Shopify/shopify-i18n/blob/main/lib/shopify-i18n/name_formatter.rb.
   abbreviateName({
     firstName,
     lastName,
@@ -398,21 +386,35 @@ export class I18n {
     lastName?: string;
     idealMaxLength?: number;
   }) {
-    return (
-      tryAbbreviateName({firstName, lastName, idealMaxLength}) ??
-      this.formatName(firstName, lastName)
-    );
+    return importedAbbreviateName({
+      name: {
+        givenName: firstName,
+        familyName: lastName,
+      },
+      locale: this.locale,
+      options: {idealMaxLength},
+    });
+  }
+
+  abbreviateBusinessName({
+    name,
+    idealMaxLength = 3,
+  }: {
+    name: string;
+    idealMaxLength?: number;
+  }) {
+    return importedAbbreviateBusinessName({
+      name,
+      idealMaxLength,
+    });
   }
 
   identifyScript(text: string) {
     return identifyScripts(text);
   }
 
   hasEasternNameOrderFormatter() {
-    const easternNameOrderFormatter =
-      EASTERN_NAME_ORDER_FORMATTERS.get(this.locale) ||
-      EASTERN_NAME_ORDER_FORMATTERS.get(this.language);
-    return Boolean(easternNameOrderFormatter);
+    return importedHasFamilyNameGivenNameOrdering(this.locale);
   }
 
   // eslint-disable-next-line @typescript-eslint/member-ordering