@graphcommerce/next-ui 8.0.5 → 8.0.6-canary.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+### Patch Changes
+
+- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
+  ([@paales](https://github.com/paales))
+
 ## 8.0.5
 
 ### Patch Changes

package/TimeAgo/TimeAgo.tsx

@@ -1,17 +1,23 @@
+import { useLocale } from '../hooks/useLocale'
+
 export type TimeAgoProps = {
   date: Date
+  /**
+   * @deprecated No longer used
+   */
   locale?: string
 }
 
 export function TimeAgo(props: TimeAgoProps) {
-  const { date, locale = 'en' } = props
+  const { date } = props
   const msPerMinute = 60 * 1000
   const msPerHour = msPerMinute * 60
   const msPerDay = msPerHour * 24
 
   const timestamp = date.getTime()
   const elapsed = Date.now() - timestamp
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+
+  const rtf = new Intl.RelativeTimeFormat(useLocale(), { numeric: 'auto' })
 
   if (elapsed < msPerMinute) {
     return <span>{rtf.format(-Math.floor(elapsed / 1000), 'seconds')}</span>

package/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './useNumberFormat'
 export * from './useMemoObject'
 export * from './useStorefrontConfig'
 export * from './useUrlQuery'
+export * from './useLocale'

package/hooks/useDateTimeFormat.ts

@@ -1,15 +1,13 @@
 import { normalizeLocale } from '@graphcommerce/lingui-next'
-import { useRouter } from 'next/router'
 import { useMemo } from 'react'
+import { useStorefrontConfig } from './useStorefrontConfig'
+import { useLocale } from '@graphcommerce/next-ui'
 
 export type DateTimeFormatProps = Intl.DateTimeFormatOptions
 
 export function useDateTimeFormat(props?: DateTimeFormatProps) {
-  const { locale } = useRouter()
+  const locale = useLocale()
 
-  const formatter = useMemo(
-    () => new Intl.DateTimeFormat(normalizeLocale(locale), props),
-    [locale, props],
-  )
+  const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/useLocale.ts

@@ -0,0 +1,7 @@
+import { normalizeLocale } from '@graphcommerce/lingui-next'
+import { useStorefrontConfig } from './useStorefrontConfig'
+
+export function useLocale() {
+  const { locale } = useStorefrontConfig()
+  return normalizeLocale(locale)
+}

package/hooks/useNumberFormat.ts

@@ -1,15 +1,10 @@
-import { normalizeLocale } from '@graphcommerce/lingui-next'
-import { useRouter } from 'next/router'
 import { useMemo } from 'react'
+import { useLocale } from './useLocale'
 
 export type NumberFormatProps = Intl.NumberFormatOptions
 
 export function useNumberFormat(props?: NumberFormatProps) {
-  const { locale } = useRouter()
-
-  const formatter = useMemo(
-    () => new Intl.NumberFormat(normalizeLocale(locale), props),
-    [locale, props],
-  )
+  const locale = useLocale()
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
   return formatter
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.5",
+  "version": "8.0.6-canary.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -25,14 +25,14 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.5",
-    "@graphcommerce/framer-next-pages": "^8.0.5",
-    "@graphcommerce/framer-scroller": "^8.0.5",
-    "@graphcommerce/framer-utils": "^8.0.5",
-    "@graphcommerce/image": "^8.0.5",
-    "@graphcommerce/lingui-next": "^8.0.5",
-    "@graphcommerce/prettier-config-pwa": "^8.0.5",
-    "@graphcommerce/typescript-config-pwa": "^8.0.5",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.1",
+    "@graphcommerce/framer-next-pages": "^8.0.6-canary.1",
+    "@graphcommerce/framer-scroller": "^8.0.6-canary.1",
+    "@graphcommerce/framer-utils": "^8.0.6-canary.1",
+    "@graphcommerce/image": "^8.0.6-canary.1",
+    "@graphcommerce/lingui-next": "^8.0.6-canary.1",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.1",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.1",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",