@graphcommerce/next-ui 9.0.0-canary.96 → 9.0.0-canary.98

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 9.0.0-canary.98
+
+### Patch Changes
+
+- [#2414](https://github.com/graphcommerce-org/graphcommerce/pull/2414) [`cd8e35b`](https://github.com/graphcommerce-org/graphcommerce/commit/cd8e35ba3dfafd34221b0875bf4f83c802955d66) - Added RelativeTimeFormat and RelativeToTimeFormat components to display relative dates in all locales. ([@Vignesh-M21](https://github.com/Vignesh-M21))
+
+- [#2414](https://github.com/graphcommerce-org/graphcommerce/pull/2414) [`8b1a5a6`](https://github.com/graphcommerce-org/graphcommerce/commit/8b1a5a62a580cc8d08746cb19c4e5a4f52bd270c) - Date strings (12-12-2012) are not supported by older Safari browser versions. must be converted (12/12/2012) in order for it to function; otherwise, it will return NaN if we attempt to access the getTime() on an object. ([@Vignesh-M21](https://github.com/Vignesh-M21))
+
+## 9.0.0-canary.97
+
 ## 9.0.0-canary.96
 
 ## 9.0.0-canary.95

package/Intl/DateTimeFormat/DateTimeFormat.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { useLocale } from '../../hooks/useLocale'
 import { useMemoObject } from '../../hooks/useMemoObject'
+import { DateValue, toDate } from './toDate'
 
 export function useDateTimeFormatter(props: Intl.DateTimeFormatOptions) {
   const locale = useLocale()
@@ -8,18 +9,12 @@ export function useDateTimeFormatter(props: Intl.DateTimeFormatOptions) {
   return useMemo(() => new Intl.DateTimeFormat(locale, memoOptions), [locale, memoOptions])
 }
 
-type DateValue = Date | string | number | null | undefined
 export type DateTimeFormatPropsType = { children: DateValue } & Intl.DateTimeFormatOptions
 
 export function DateTimeFormat(props: DateTimeFormatPropsType) {
   const { children } = props
   const formatter = useDateTimeFormatter({ dateStyle: 'medium', timeStyle: 'short', ...props })
 
-  return (
-    <span suppressHydrationWarning>
-      {children
-        ? formatter.format(typeof children === 'string' ? new Date(children) : children)
-        : null}
-    </span>
-  )
+  const dateValue = useMemo(() => toDate(children), [children])
+  return <span suppressHydrationWarning>{dateValue ? formatter.format(dateValue) : null}</span>
 }

package/Intl/DateTimeFormat/toDate.ts

@@ -0,0 +1,16 @@
+export type DateValue = Date | string | number | null | undefined
+
+export function toDate(value: DateValue): Date | undefined {
+  let date: Date | undefined
+
+  if (value instanceof Date) {
+    date = value
+  } else if (typeof value === 'string') {
+    date = new Date(value.replace(/-/g, '/'))
+  } else if (typeof value === 'number') {
+    date = new Date(value)
+  }
+
+  if (date && Number.isNaN(date.getTime())) return undefined
+  return date
+}

package/Intl/RelativeTimeFormat/RelativeTimeFormat.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useMemo } from 'react'
+import { useLocale } from '../../hooks/useLocale'
+import { useMemoObject } from '../../hooks/useMemoObject'
+import { relativeTimeFormatUnitAuto } from './relativeTimeFormatAutoUnit'
+
+export function useRelativeTimeFormatter(props: Intl.RelativeTimeFormatOptions) {
+  const locale = useLocale()
+  const memoOptions = useMemoObject(props)
+  return useMemo(() => new Intl.RelativeTimeFormat(locale, memoOptions), [locale, memoOptions])
+}
+
+export type RelativeTimeFormatProps = {
+  children: number
+  unit?: Intl.RelativeTimeFormatUnit
+  styleFormat?: Intl.RelativeTimeFormatStyle
+} & Omit<Intl.RelativeTimeFormatOptions, 'style'>
+
+/**
+ * Alternative: {@link file://./RelativeToTimeFormat.tsx}
+ */
+export const RelativeTimeFormat = forwardRef<HTMLSpanElement, RelativeTimeFormatProps>(
+  (props, ref) => {
+    const { children, unit, styleFormat, localeMatcher, numeric, ...rest } = props
+    const formatter = useRelativeTimeFormatter({ localeMatcher, numeric, style: styleFormat })
+
+    const [value, autoUnit] = relativeTimeFormatUnitAuto({ value: children, unit })
+
+    return (
+      <span suppressHydrationWarning ref={ref} {...rest}>
+        {children ? formatter.format(value, autoUnit) : null}
+      </span>
+    )
+  },
+)

package/Intl/RelativeTimeFormat/RelativeToTimeFormat.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, useMemo } from 'react'
+import { DateValue, toDate } from '../DateTimeFormat/toDate'
+import { RelativeTimeFormat, RelativeTimeFormatProps } from './RelativeTimeFormat'
+
+type RelativeToTimeFormatProps = Omit<RelativeTimeFormatProps, 'children'> & {
+  /**
+   * Date to format a relative value for.
+   */
+  children: DateValue
+  /**
+   * If provided, the component will format a relative value to this date.
+   * Else, it will format a relative value to the current date.
+   */
+  to?: DateValue
+}
+
+export const RelativeToTimeFormat = forwardRef<HTMLSpanElement, RelativeToTimeFormatProps>(
+  (props, ref) => {
+    const { children, to, ...rest } = props
+
+    const relativeTo = useMemo(() => {
+      const date = toDate(children)
+      if (!date) return 0
+      const toDateValue = (to && toDate(to)) || new Date()
+
+      return Math.round((date.getTime() - toDateValue.getTime()) / 1000)
+    }, [children, to])
+
+    return (
+      <RelativeTimeFormat {...rest} ref={ref}>
+        {relativeTo}
+      </RelativeTimeFormat>
+    )
+  },
+)

package/Intl/RelativeTimeFormat/index.ts

@@ -0,0 +1,2 @@
+export * from './RelativeTimeFormat'
+export * from './RelativeToTimeFormat'

package/Intl/RelativeTimeFormat/relativeTimeFormatAutoUnit.ts

@@ -0,0 +1,23 @@
+type UseRelativeTimeFormatUnitAutoProps = {
+  value: number
+  unit?: Intl.RelativeTimeFormatUnit
+}
+
+export function relativeTimeFormatUnitAuto(
+  props: UseRelativeTimeFormatUnitAutoProps,
+): [number, Intl.RelativeTimeFormatUnit] {
+  const { value, unit } = props
+
+  if (unit) return [value, unit]
+
+  // Calculate the absolute value once
+  const absValue = Math.abs(value)
+
+  if (absValue >= 60 * 60 * 24 * 365) return [Math.round(value / (60 * 60 * 24 * 365)), 'year']
+  if (absValue >= 60 * 60 * 24 * 30) return [Math.round(value / (60 * 60 * 24 * 30)), 'month']
+  if (absValue >= 60 * 60 * 24 * 7) return [Math.round(value / (60 * 60 * 24 * 7)), 'week']
+  if (absValue >= 60 * 60 * 24) return [Math.round(value / (60 * 60 * 24)), 'day']
+  if (absValue >= 60 * 60) return [Math.round(value / (60 * 60)), 'hour']
+  if (absValue >= 60) return [Math.round(value / 60), 'minute']
+  return [Math.round(value), 'second']
+}

package/Intl/index.ts

@@ -7,5 +7,5 @@ export * from './ListFormat' // Intl.ListFormat
 // export * from './Locale' // Intl.Locale
 export * from './NumberFormat' // Intl.NumberFormat
 // export * from './PluralRules' // Intl.PluralRules
-// export * from './RelativeTimeFormat' // Intl.RelativeTimeFormat
+export * from './RelativeTimeFormat' // Intl.RelativeTimeFormat
 // export * from './Segmenter' // Intl.Segmenter

package/TimeAgo/TimeAgo.tsx

@@ -8,6 +8,9 @@ export type TimeAgoProps = {
   locale?: string
 }
 
+/**
+ * @deprecated Use <RelativeToTimeFormat /> instead.
+ */
 export function TimeAgo(props: TimeAgoProps) {
   const { date } = props
   const msPerMinute = 60 * 1000

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.96",
+  "version": "9.0.0-canary.98",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,13 +26,13 @@
     "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.96",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.96",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.96",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.96",
-    "@graphcommerce/image": "^9.0.0-canary.96",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.96",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.96",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.98",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.98",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.98",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.98",
+    "@graphcommerce/image": "^9.0.0-canary.98",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.98",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.98",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",