From 5eaee82e4bb82fa464267de2961334e542e4a6ab Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 26 Feb 2024 12:16:37 +0000 Subject: [PATCH 1/5] automatically provide localised Date for SSR in RelativeTime --- packages/react/src/RelativeTime/RelativeTime.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/react/src/RelativeTime/RelativeTime.tsx b/packages/react/src/RelativeTime/RelativeTime.tsx index 3ba8c6f6e66..0a1bab1571a 100644 --- a/packages/react/src/RelativeTime/RelativeTime.tsx +++ b/packages/react/src/RelativeTime/RelativeTime.tsx @@ -1,8 +1,18 @@ +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 +const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric', year: 'numeric'} +function RelativeTime({date, ...props}: RelativeTimeProps) { + return ( + + ${date?.toLocaleDateString('en', localeOptions) || ''} + + ) +} + +export type RelativeTimeProps = ComponentProps export default RelativeTime From 36a3983994eda65404f8c950a8d60e1b5d9457d9 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Wed, 6 Mar 2024 12:06:03 +0000 Subject: [PATCH 2/5] changeset --- .changeset/honest-feet-shop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/honest-feet-shop.md diff --git a/.changeset/honest-feet-shop.md b/.changeset/honest-feet-shop.md new file mode 100644 index 00000000000..254d446cb78 --- /dev/null +++ b/.changeset/honest-feet-shop.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Render SSR date for RelativeTime From a27770a147df038f5b1533733356111dfbcdf3bf Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 18 Mar 2024 12:06:24 +0000 Subject: [PATCH 3/5] fix and add tests --- .../react/src/RelativeTime/RelativeTime.tsx | 17 ++++++++++++++--- .../react/src/__tests__/RelativeTime.test.tsx | 10 ++++++++++ 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/react/src/RelativeTime/RelativeTime.tsx b/packages/react/src/RelativeTime/RelativeTime.tsx index 0a1bab1571a..f87871486bf 100644 --- a/packages/react/src/RelativeTime/RelativeTime.tsx +++ b/packages/react/src/RelativeTime/RelativeTime.tsx @@ -5,14 +5,25 @@ import {createComponent} from '../utils/custom-element' const RelativeTimeComponent = createComponent(RelativeTimeElement, 'relative-time') +interface RelativeTimePropsWithDate extends ComponentProps { + datetime: never +} + +interface RelativeTimePropsWithDateTime extends ComponentProps { + date: never +} + +export type RelativeTimeProps = RelativeTimePropsWithDateTime | RelativeTimePropsWithDate + const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric', year: 'numeric'} -function RelativeTime({date, ...props}: RelativeTimeProps) { +function RelativeTime({date, datetime, ...props}: RelativeTimeProps) { + if (date && datetime) throw new Error(`Ambiguous use of both date and datetime props`) + if (datetime) date = new Date(datetime) return ( - ${date?.toLocaleDateString('en', localeOptions) || ''} + {date?.toLocaleDateString('en', localeOptions) || ''} ) } -export type RelativeTimeProps = ComponentProps export default RelativeTime diff --git a/packages/react/src/__tests__/RelativeTime.test.tsx b/packages/react/src/__tests__/RelativeTime.test.tsx index 57fcffcfdc5..132cd2d3bf6 100644 --- a/packages/react/src/__tests__/RelativeTime.test.tsx +++ b/packages/react/src/__tests__/RelativeTime.test.tsx @@ -20,4 +20,14 @@ describe('RelativeTime', () => { it('renders a ', () => { expect(render().type).toEqual('relative-time') }) + + it('renders a date inside', () => { + const date = new Date('2024-03-07T12:22:48.123Z'); + expect(render().children).toEqual(['Mar 7, 2024']) + }) + + it('renders a datetime inside', () => { + const date = new Date('2024-03-07T12:22:48.123Z'); + expect(render().children).toEqual(['Mar 7, 2024']) + }) }) From 5a096d8348aed1c4af69f8a240262da9a46ba352 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 18 Mar 2024 16:25:20 +0000 Subject: [PATCH 4/5] format --- packages/react/src/__tests__/RelativeTime.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/__tests__/RelativeTime.test.tsx b/packages/react/src/__tests__/RelativeTime.test.tsx index 132cd2d3bf6..a8903aee588 100644 --- a/packages/react/src/__tests__/RelativeTime.test.tsx +++ b/packages/react/src/__tests__/RelativeTime.test.tsx @@ -22,12 +22,12 @@ describe('RelativeTime', () => { }) it('renders a date inside', () => { - const date = new Date('2024-03-07T12:22:48.123Z'); - expect(render().children).toEqual(['Mar 7, 2024']) + const date = new Date('2024-03-07T12:22:48.123Z') + expect(render().children).toEqual(['Mar 7, 2024']) }) it('renders a datetime inside', () => { - const date = new Date('2024-03-07T12:22:48.123Z'); - expect(render().children).toEqual(['Mar 7, 2024']) + const date = new Date('2024-03-07T12:22:48.123Z') + expect(render().children).toEqual(['Mar 7, 2024']) }) }) From 7e75152f6413a62743530177b18e57680d95d319 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 18 Mar 2024 16:30:05 +0000 Subject: [PATCH 5/5] fix types --- packages/react/src/RelativeTime/RelativeTime.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/react/src/RelativeTime/RelativeTime.tsx b/packages/react/src/RelativeTime/RelativeTime.tsx index f87871486bf..b30924f4956 100644 --- a/packages/react/src/RelativeTime/RelativeTime.tsx +++ b/packages/react/src/RelativeTime/RelativeTime.tsx @@ -5,19 +5,8 @@ import {createComponent} from '../utils/custom-element' const RelativeTimeComponent = createComponent(RelativeTimeElement, 'relative-time') -interface RelativeTimePropsWithDate extends ComponentProps { - datetime: never -} - -interface RelativeTimePropsWithDateTime extends ComponentProps { - date: never -} - -export type RelativeTimeProps = RelativeTimePropsWithDateTime | RelativeTimePropsWithDate - const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric', year: 'numeric'} function RelativeTime({date, datetime, ...props}: RelativeTimeProps) { - if (date && datetime) throw new Error(`Ambiguous use of both date and datetime props`) if (datetime) date = new Date(datetime) return ( @@ -26,4 +15,5 @@ function RelativeTime({date, datetime, ...props}: RelativeTimeProps) { ) } +export type RelativeTimeProps = ComponentProps export default RelativeTime