automatically provide localised Date for SSR in RelativeTime (#4305)

* automatically provide localised Date for SSR in RelativeTime

* changeset

* fix and add tests

* format

* fix types

Author: keithamus

.changeset/honest-feet-shop.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Render SSR date for RelativeTime

packages/react/src/RelativeTime/RelativeTime.tsx

@@ -1,8 +1,19 @@
+import React from 'react'
 import {RelativeTimeElement} from '@github/relative-time-element'
 import type {ComponentProps} from '../utils/types'
 import {createComponent} from '../utils/custom-element'
 
-const RelativeTime = createComponent(RelativeTimeElement, 'relative-time')
+const RelativeTimeComponent = createComponent(RelativeTimeElement, 'relative-time')
 
-export type RelativeTimeProps = ComponentProps<typeof RelativeTime>
+const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric', year: 'numeric'}
+function RelativeTime({date, datetime, ...props}: RelativeTimeProps) {
+  if (datetime) date = new Date(datetime)
+  return (
+    <RelativeTimeComponent {...props} date={date}>
+      {date?.toLocaleDateString('en', localeOptions) || ''}
+    </RelativeTimeComponent>
+  )
+}
+
+export type RelativeTimeProps = ComponentProps<typeof RelativeTimeComponent>
 export default RelativeTime

packages/react/src/__tests__/RelativeTime.test.tsx

@@ -20,4 +20,14 @@ describe('RelativeTime', () => {
   it('renders a <relative-time>', () => {
     expect(render(<RelativeTime />).type).toEqual('relative-time')
   })
+
+  it('renders a date inside', () => {
+    const date = new Date('2024-03-07T12:22:48.123Z')
+    expect(render(<RelativeTime date={date} />).children).toEqual(['Mar 7, 2024'])
+  })
+
+  it('renders a datetime inside', () => {
+    const date = new Date('2024-03-07T12:22:48.123Z')
+    expect(render(<RelativeTime datetime={date.toJSON()} />).children).toEqual(['Mar 7, 2024'])
+  })
 })