Using format.js

https://github.com/tooot-app/app/issues/280

package.json

@@ -26,6 +26,12 @@
   },
   "dependencies": {
     "@expo/react-native-action-sheet": "3.13.0",
+    "@formatjs/intl-datetimeformat": "^5.0.2",
+    "@formatjs/intl-getcanonicallocales": "^1.9.2",
+    "@formatjs/intl-locale": "^2.4.47",
+    "@formatjs/intl-numberformat": "^7.4.3",
+    "@formatjs/intl-pluralrules": "^4.3.3",
+    "@formatjs/intl-relativetimeformat": "^10.0.1",
     "@neverdull-agency/expo-unlimited-secure-store": "1.0.10",
     "@react-native-async-storage/async-storage": "1.17.3",
     "@react-native-community/blur": "3.6.0",
@@ -68,6 +74,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.16.7",
+    "react-intl": "^5.25.1",
     "react-native": "0.67.4",
     "react-native-animated-spinkit": "1.5.2",
     "react-native-base64": "^0.2.1",
@@ -88,7 +95,6 @@
     "react-native-tab-view": "3.1.1",
     "react-query": "3.38.0",
     "react-redux": "8.0.1",
-    "react-timeago": "6.2.1",
     "redux-persist": "6.0.0",
     "rn-placeholder": "3.0.3",
     "sentry-expo": "4.1.1",

src/App.tsx

@@ -1,4 +1,31 @@
 import { ActionSheetProvider } from '@expo/react-native-action-sheet'
+import '@formatjs/intl-getcanonicallocales/polyfill'
+import '@formatjs/intl-locale/polyfill'
+import '@formatjs/intl-pluralrules/polyfill'
+import '@formatjs/intl-pluralrules/locale-data/de'
+import '@formatjs/intl-pluralrules/locale-data/en'
+import '@formatjs/intl-pluralrules/locale-data/ko'
+import '@formatjs/intl-pluralrules/locale-data/vi'
+import '@formatjs/intl-pluralrules/locale-data/zh'
+import '@formatjs/intl-numberformat/polyfill'
+import '@formatjs/intl-numberformat/locale-data/de'
+import '@formatjs/intl-numberformat/locale-data/en'
+import '@formatjs/intl-numberformat/locale-data/ko'
+import '@formatjs/intl-numberformat/locale-data/vi'
+import '@formatjs/intl-numberformat/locale-data/zh'
+import '@formatjs/intl-datetimeformat/polyfill'
+import '@formatjs/intl-datetimeformat/locale-data/de'
+import '@formatjs/intl-datetimeformat/locale-data/en'
+import '@formatjs/intl-datetimeformat/locale-data/ko'
+import '@formatjs/intl-datetimeformat/locale-data/vi'
+import '@formatjs/intl-datetimeformat/locale-data/zh'
+import '@formatjs/intl-datetimeformat/add-all-tz'
+import '@formatjs/intl-relativetimeformat/polyfill'
+import '@formatjs/intl-relativetimeformat/locale-data/de'
+import '@formatjs/intl-relativetimeformat/locale-data/en'
+import '@formatjs/intl-relativetimeformat/locale-data/ko'
+import '@formatjs/intl-relativetimeformat/locale-data/vi'
+import '@formatjs/intl-relativetimeformat/locale-data/zh'
 import queryClient from '@helpers/queryClient'
 import i18n from '@root/i18n/i18n'
 import Screens from '@root/Screens'
@@ -6,7 +33,9 @@ import audio from '@root/startup/audio'
 import dev from '@root/startup/dev'
 import log from '@root/startup/log'
 import netInfo from '@root/startup/netInfo'
+import push from '@root/startup/push'
 import sentry from '@root/startup/sentry'
+import timezone from '@root/startup/timezone'
 import { persistor, store } from '@root/store'
 import AccessibilityManager from '@utils/accessibility/AccessibilityManager'
 import {
@@ -24,7 +53,7 @@ import { enableFreeze } from 'react-native-screens'
 import { QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
-import push from './startup/push'
+import { IntlProvider } from 'react-intl'
 
 Platform.select({
   android: LogBox.ignoreLogs(['Setting a timer for a long period of time'])
@@ -34,6 +63,7 @@ dev()
 sentry()
 audio()
 push()
+timezone()
 enableFreeze(true)
 
 const App: React.FC = () => {
@@ -92,13 +122,18 @@ const App: React.FC = () => {
         const language = getSettingsLanguage(store.getState())
         if (!language) {
           store.dispatch(changeLanguage('en'))
+          i18n.changeLanguage('en')
+        } else {
+          i18n.changeLanguage(language)
         }
-        i18n.changeLanguage(language)
+
         return (
           <ActionSheetProvider>
             <AccessibilityManager>
               <ThemeManager>
-                <Screens localCorrupt={localCorrupt} />
+                <IntlProvider locale={language}>
+                  <Screens localCorrupt={localCorrupt} />
+                </IntlProvider>
               </ThemeManager>
             </AccessibilityManager>
           </ActionSheetProvider>

src/components/RelativeTime.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
-import TimeAgo from 'react-timeago'
-// @ts-ignore
-import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'
-
-export interface Props {
-  date: string | number
-}
-
-const RelativeTime: React.FC<Props> = ({ date }) => {
-  const { t } = useTranslation('componentRelativeTime')
-
-  return (
-    <TimeAgo
-      date={date}
-      component={Text}
-      formatter={buildFormatter(t('strings', { returnObjects: true }))}
-    />
-  )
-}
-
-export default RelativeTime

src/components/Timeline/Default.tsx

@@ -102,6 +102,7 @@ const TimelineDefault = React.memo(
             queryKey={disableOnPress ? undefined : queryKey}
             rootQueryKey={disableOnPress ? undefined : rootQueryKey}
             status={actualStatus}
+            highlighted={highlighted}
           />
         </View>
 

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -18,9 +18,15 @@ export interface Props {
   queryKey?: QueryKeyTimeline
   rootQueryKey?: QueryKeyTimeline
   status: Mastodon.Status
+  highlighted: boolean
 }
 
-const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
+const TimelineHeaderDefault = ({
+  queryKey,
+  rootQueryKey,
+  status,
+  highlighted
+}: Props) => {
   const { t } = useTranslation('componentTimeline')
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
   const { colors } = useTheme()
@@ -40,6 +46,7 @@ const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
           <HeaderSharedCreated
             created_at={status.created_at}
             edited_at={status.edited_at}
+            highlighted={highlighted}
           />
           <HeaderSharedVisibility visibility={status.visibility} />
           <HeaderSharedMuted muted={status.muted} />

src/components/Timeline/Shared/HeaderShared/Created.tsx

@@ -1,25 +1,43 @@
 import Icon from '@components/Icon'
-import RelativeTime from '@components/RelativeTime'
 import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { FormattedDate, FormattedRelativeTime, FormattedTime } from 'react-intl'
 
 export interface Props {
   created_at: Mastodon.Status['created_at'] | number
   edited_at?: Mastodon.Status['edited_at']
+  highlighted: boolean
 }
 
 const HeaderSharedCreated = React.memo(
-  ({ created_at, edited_at }: Props) => {
+  ({ created_at, edited_at, highlighted }: Props) => {
     const { t } = useTranslation('componentTimeline')
     const { colors } = useTheme()
 
+    const actualTime = edited_at || created_at
+
     return (
       <>
         <CustomText fontStyle='S' style={{ color: colors.secondary }}>
-          <RelativeTime date={edited_at || created_at} />
+          {highlighted ? (
+            <>
+              <FormattedDate
+                value={new Date(actualTime)}
+                dateStyle='medium'
+                timeStyle='short'
+              />
+            </>
+          ) : (
+            <FormattedRelativeTime
+              value={
+                -(new Date().getTime() - new Date(actualTime).getTime()) / 1000
+              }
+              updateIntervalInSeconds={1}
+            />
+          )}
         </CustomText>
         {edited_at ? (
           <Icon

src/components/Timeline/Shared/Poll.tsx

@@ -17,6 +17,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { maxBy } from 'lodash'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import { FormattedRelativeTime } from 'react-intl'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { useQueryClient } from 'react-query'
 
@@ -158,7 +159,16 @@ const TimelinePoll: React.FC<Props> = ({
           <CustomText fontStyle='S' style={{ color: colors.secondary }}>
             <Trans
               i18nKey='componentTimeline:shared.poll.meta.expiration.until'
-              components={[<RelativeTime date={poll.expires_at} />]}
+              components={[
+                <FormattedRelativeTime
+                  value={
+                    (new Date(poll.expires_at).getTime() -
+                      new Date().getTime()) /
+                    1000
+                  }
+                  updateIntervalInSeconds={1}
+                />
+              ]}
             />
           </CustomText>
         )

src/i18n/de/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "her",
-    "suffixFromNow": "",
-    "seconds": "%d Sekunden",
-    "minute": "etwa eine Minute",
-    "minutes": "%d Minuten",
-    "hour": "etwa eine Stunde",
-    "hours": "etwa %d Stunden",
-    "day": "1 Tag",
-    "days": "%d Tage",
-    "month": "etwa 1 Monat",
-    "months": "%d Monate",
-    "year": "etwa 1 Jahr",
-    "years": "%d Jahre",
-    "wordSeparator": ""
-  }
-}

src/i18n/en/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "ago",
-    "suffixFromNow": "",
-    "seconds": "%d seconds",
-    "minute": "about a minute",
-    "minutes": "%d minutes",
-    "hour": "about an hour",
-    "hours": "about %d hours",
-    "day": "a day",
-    "days": "%d days",
-    "month": "about a month",
-    "months": "%d months",
-    "year": "about a year",
-    "years": "%d years",
-    "wordSeparator": " "
-  }
-}

src/i18n/ko/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "전",
-    "suffixFromNow": "",
-    "seconds": "%d초",
-    "minute": "약 1분",
-    "minutes": "%d분",
-    "hour": "약 1시간",
-    "hours": "약 %d시간",
-    "day": "하루",
-    "days": "%d일",
-    "month": "약 1달",
-    "months": "%d달",
-    "year": "약 1년",
-    "years": "%d년",
-    "wordSeparator": ""
-  }
-}

src/i18n/vi/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": " trước",
-    "suffixFromNow": "",
-    "seconds": "%d giây",
-    "minute": "một phút",
-    "minutes": "%d phút",
-    "hour": "một giờ",
-    "hours": "khoảng %d giờ",
-    "day": "một ngày",
-    "days": "%d ngày",
-    "month": "khoảng một tháng",
-    "months": "%d tháng",
-    "year": "khoảng một năm",
-    "years": "%d năm",
-    "wordSeparator": ""
-  }
-}

src/i18n/zh-Hans/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "前",
-    "suffixFromNow": "",
-    "seconds": "%d秒",
-    "minute": "1分钟",
-    "minutes": "%d分钟",
-    "hour": "1小时",
-    "hours": "%d小时",
-    "day": "1天",
-    "days": "%d天",
-    "month": "1个月",
-    "months": "%d月",
-    "year": "大约1年",
-    "years": "%d年",
-    "wordSeparator": ""
-  }
-}

src/i18n/zh-Hant/components/relativeTime.json

@@ -1,20 +0,0 @@
-{
-  "strings": {
-    "prefixAgo": "",
-    "prefixFromNow": "",
-    "suffixAgo": "前",
-    "suffixFromNow": "",
-    "seconds": "%d 秒",
-    "minute": "約 1 分",
-    "minutes": "%d 分",
-    "hour": "約 1 小時",
-    "hours": "約 %d 小時",
-    "day": "1 天",
-    "days": "%d 天",
-    "month": "約 1 個月",
-    "months": "%d 個月",
-    "year": "約 1 年",
-    "years": "%d 年",
-    "wordSeparator": ""
-  }
-}

src/screens/Announcements.tsx

@@ -15,6 +15,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import { FormattedRelativeTime } from 'react-intl'
 import { Dimensions, Platform, Pressable, StyleSheet, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import FastImage from 'react-native-fast-image'
@@ -91,7 +92,17 @@ const ScreenAnnouncements: React.FC<
           >
             <Trans
               i18nKey='screenAnnouncements:content.published'
-              components={[<RelativeTime date={item.published_at} />]}
+              components={[
+                <FormattedRelativeTime
+                  value={
+                    -(
+                      new Date().getTime() -
+                      new Date(item.published_at).getTime()
+                    ) / 1000
+                  }
+                  updateIntervalInSeconds={1}
+                />
+              ]}
             />
           </CustomText>
           <ScrollView

src/startup/timezone.ts

@@ -0,0 +1,12 @@
+import * as Localization from 'expo-localization'
+import log from './log'
+
+const timezone = () => {
+  log('log', 'Timezone', Localization.timezone)
+  if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
+    // @ts-ignore
+    Intl.DateTimeFormat.__setDefaultTimeZone(Localization.timezone)
+  }
+}
+
+export default timezone

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES6",
+    "module": "esnext",
+    "target": "esnext",
     "allowSyntheticDefaultImports": true,
     "jsx": "react-native",
     "lib": ["dom", "esnext"],

yarn.lock

@@ -1467,6 +1467,128 @@
     lodash.pick "^4.4.0"
     lodash.template "^4.5.0"
 
+"@formatjs/ecma402-abstract@1.11.4":
+  version "1.11.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"
+  integrity sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/fast-memoize@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz#e6f5aee2e4fd0ca5edba6eba7668e2d855e0fc21"
+  integrity sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==
+  dependencies:
+    tslib "^2.1.0"
+
+"@formatjs/icu-messageformat-parser@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz#a54293dd7f098d6a6f6a084ab08b6d54a3e8c12d"
+  integrity sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/icu-skeleton-parser" "1.3.6"
+    tslib "^2.1.0"
+
+"@formatjs/icu-skeleton-parser@1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz#4ce8c0737d6f07b735288177049e97acbf2e8964"
+  integrity sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    tslib "^2.1.0"
+
+"@formatjs/intl-datetimeformat@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-datetimeformat/-/intl-datetimeformat-5.0.2.tgz#11bf5814416c03f544e0b118789fb1497b815566"
+  integrity sha512-yk7CItBMgtUsub123+iqOfXoqG6JHJIl3Pke7eOYb7QFAPsOZliAJb2i0+Tr1FXWcm1PdWZVHEv6C2l4nEmQdw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/intl-displaynames@5.4.3":
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz#e468586694350c722c7efab1a31fcde68aeaed8b"
+  integrity sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/intl-getcanonicallocales@1.9.2", "@formatjs/intl-getcanonicallocales@^1.9.2":
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.9.2.tgz#5aab5f6ac2d923933538085eec20a19c393b6ebf"
+  integrity sha512-69WTStIJI2ikErOU1Il4NQKLVV8f2x6awr7+/dZz0uihuI7uQRcZtI6k/BBt4EtYaEl6w65YjUF93VuE015C0w==
+  dependencies:
+    tslib "^2.1.0"
+
+"@formatjs/intl-listformat@6.5.3":
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz#f29da613a8062dc3e4e3d847ba890c3ea745f051"
+  integrity sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/intl-locale@^2.4.47":
+  version "2.4.47"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-locale/-/intl-locale-2.4.47.tgz#7bf66960e55e7dfa77fcc7c02ee06aea29f92eb6"
+  integrity sha512-yEpjx6RgVVG3pPsxb/jydhnq/A02KmjMste5U/wWxscRK0sny8LPIoBwgkOQycRoMRLNlLemJaQB7VbHZJ9OVg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/intl-getcanonicallocales" "1.9.2"
+    tslib "^2.1.0"
+
+"@formatjs/intl-localematcher@0.2.25":
+  version "0.2.25"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz#60892fe1b271ec35ba07a2eb018a2dd7bca6ea3a"
+  integrity sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==
+  dependencies:
+    tslib "^2.1.0"
+
+"@formatjs/intl-numberformat@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-numberformat/-/intl-numberformat-7.4.3.tgz#dbf15fb6c8341088f1d526cf24d54f5388b478d1"
+  integrity sha512-oxhLCw00YO7brwMPqGD+ui5gdeWoMiRhqsRSqwsDSRd03aJ/N3/VZQDoxGIn3IM9bhlPM5W0ckXiXuOMFLszjw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/intl-pluralrules@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-pluralrules/-/intl-pluralrules-4.3.3.tgz#9dc5a96175d89c8887f003eacef457a1f3003caf"
+  integrity sha512-NLZN8gf2qLpCuc0m565IbKLNUarEGOzk0mkdTkE4XTuNCofzoQTurW6lL3fmDlneAoYl2FiTdHa5q4o2vZF50g==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/intl-relativetimeformat@^10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-10.0.1.tgz#ed5e3df104a97e3ac6386ea7e5e34adb54ac8e74"
+  integrity sha512-AABPQtPjFilXegQsnmVHrSlzjFNUffAEk5DgowY6b7WSwDI7g2W6QgW903/lbZ58emhphAbgHdtKeUBXqTiLpw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/intl@2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.2.1.tgz#6daf4dabed055b17f467f0aa1bc073a626bc9189"
+  integrity sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/fast-memoize" "1.2.1"
+    "@formatjs/icu-messageformat-parser" "2.1.0"
+    "@formatjs/intl-displaynames" "5.4.3"
+    "@formatjs/intl-listformat" "6.5.3"
+    intl-messageformat "9.13.0"
+    tslib "^2.1.0"
+
 "@hapi/hoek@^9.0.0":
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17"
@@ -2175,6 +2297,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@16 || 17 || 18":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -4392,6 +4523,16 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+intl-messageformat@9.13.0:
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.13.0.tgz#97360b73bd82212e4f6005c712a4a16053165468"
+  integrity sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/fast-memoize" "1.2.1"
+    "@formatjs/icu-messageformat-parser" "2.1.0"
+    tslib "^2.1.0"
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -6228,6 +6369,22 @@ react-i18next@11.16.7:
     html-escaper "^2.0.2"
     html-parse-stringify "^3.0.1"
 
+react-intl@^5.25.1:
+  version "5.25.1"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.25.1.tgz#68a73aefc485c9bf70062381ae7f6f4791680879"
+  integrity sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/icu-messageformat-parser" "2.1.0"
+    "@formatjs/intl" "2.2.1"
+    "@formatjs/intl-displaynames" "5.4.3"
+    "@formatjs/intl-listformat" "6.5.3"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/react" "16 || 17 || 18"
+    hoist-non-react-statics "^3.3.2"
+    intl-messageformat "9.13.0"
+    tslib "^2.1.0"
+
 react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -7345,7 +7502,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@2.4.0:
+tslib@2.4.0, tslib@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==