Skip to content

Commit 0a080ba

Browse files
chambo-echambo-e
authored
feat(use-i18n): add formatDate (#280)
* feat(use-i18n): add formatDate * fix: enforce jest timezone
1 parent 743f28b commit 0a080ba

File tree

7 files changed

+477
-6
lines changed

7 files changed

+477
-6
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"build": "lerna exec --stream --ignore @scaleway/eslint-* --ignore @scaleway/countries -- rollup -c ../../rollup.config.mjs",
4343
"build:profile": "cross-env PROFILE=true yarn run build",
4444
"commit": "npx git-cz -a",
45-
"test": "jest",
45+
"test": "TZ=UTC jest",
4646
"test:watch": "yarn run test --watch",
4747
"test:coverage": "yarn run test --coverage",
4848
"prepare": "husky install"

‎packages/use-i18n/README.md‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,55 @@ const App = () => {
160160
}
161161
```
162162
163+
### formatDate
164+
165+
This hook exposes a `formatDate` function which can be used to format JS dates
166+
167+
The first parameter is anything that can be accepted as a valid JS Date (Date, number, string)
168+
169+
It accepts an `options` as second parameter which can eiter be one of predefined shorthand formats (see below) or an [Intl.DateTimeFormat `options` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat)
170+
171+
Shorthand formats:
172+
```
173+
"long" => "February 13, 2020"
174+
"short" => (default) "Feb 13, 2020"
175+
"hour" => "February 13, 2020, 4:28 PM"
176+
"hourOnly" => "4:28 PM"
177+
"shortWithoutDay" => "Feb 2020"
178+
"numeric" => "2020-02-13"
179+
"numericHour" => "2020-02-13 4:28 PM"
180+
```
181+
182+
```js
183+
import { useI18n } from '@scaleway/use-i18n'
184+
185+
const App = () => {
186+
const { formatDate } = useI18n()
187+
188+
const units = [
189+
formatDate(new Date(2020, 1, 13, 16, 28)) // "Feb 13, 2020"
190+
formatDate(1581607680000, 'long') // "February 13, 2020"
191+
formatDate('2020-02-13T15:28:00.000Z', {
192+
day: "numeric",
193+
era: "short",
194+
hour: "2-digit",
195+
minute: "numeric",
196+
month: "narrow",
197+
second: "2-digit",
198+
timeZoneName: "long",
199+
weekday: "long",
200+
year: "2-digit",
201+
}) // "Thursday, F 13, 20 AD, 04:28:00 PM Central European Standard Time""
202+
]
203+
204+
return (
205+
<div>
206+
{units}
207+
</div>
208+
)
209+
}
210+
```
211+
163212
### formatUnit
164213
165214
This hook also exposes a `formatUnit` function which can be used to format bits/bytes until [ECMA-402 Unit Preferences](https://github.com/tc39/proposal-smart-unit-preferences) is standardised
@@ -175,15 +224,14 @@ It accepts an `options` as second parameter:
175224
176225
```js
177226
import { useI18n } from '@scaleway/use-i18n'
178-
import { DateInput } from '@scaleway/ui'
179227

180228
const App = () => {
181229
const { formatUnit } = useI18n()
182230

183231
const units = [
184-
formatUnit(12 { unit: 'kilobyte' }) // "12 KB" or "12 Ko" in fr an ro
185-
formatUnit(10 ** 8 { unit: 'bytes-humanized' }) // "100 MB" or "100 Mo" in fr an ro
186-
formatUnit(10 ** 8 { unit: 'bits-per-second-humanized' }) // "100Mbs"
232+
formatUnit(12, { unit: 'kilobyte' }) // "12 KB" or "12 Ko" in fr an ro
233+
formatUnit(10 ** 8, { unit: 'bytes-humanized' }) // "100 MB" or "100 Mo" in fr an ro
234+
formatUnit(10 ** 8, { unit: 'bits-per-second-humanized' }) // "100Mbs"
187235
]
188236

189237
return (

‎packages/use-i18n/src/__tests__/__snapshots__/formatDate.ts.snap‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`formatDate should return passed object if not valid date 1`] = `
4+
Object {
5+
"not": "a valid date",
6+
}
7+
`;
8+
9+
exports[`formatDate should work with custom format and locale de 1`] = `"Donnerstag, 13. F 20 n. Chr., 16:28:00 Koordinierte Weltzeit"`;
10+
11+
exports[`formatDate should work with custom format and locale de 2`] = `"Donnerstag, 13. F 20 n. Chr., 15:28:00 Koordinierte Weltzeit"`;
12+
13+
exports[`formatDate should work with custom format and locale de 3`] = `"Donnerstag, 13. F 20 n. Chr., 15:28:00 Koordinierte Weltzeit"`;
14+
15+
exports[`formatDate should work with custom format and locale en 1`] = `"Thursday, F 13, 20 AD, 04:28:00 PM Coordinated Universal Time"`;
16+
17+
exports[`formatDate should work with custom format and locale en 2`] = `"Thursday, F 13, 20 AD, 03:28:00 PM Coordinated Universal Time"`;
18+
19+
exports[`formatDate should work with custom format and locale en 3`] = `"Thursday, F 13, 20 AD, 03:28:00 PM Coordinated Universal Time"`;
20+
21+
exports[`formatDate should work with custom format and locale es 1`] = `"jueves, 13 F 20 d. C. 16:28:00 (tiempo universal coordinado)"`;
22+
23+
exports[`formatDate should work with custom format and locale es 2`] = `"jueves, 13 F 20 d. C. 15:28:00 (tiempo universal coordinado)"`;
24+
25+
exports[`formatDate should work with custom format and locale es 3`] = `"jueves, 13 F 20 d. C. 15:28:00 (tiempo universal coordinado)"`;
26+
27+
exports[`formatDate should work with custom format and locale fr 1`] = `"jeudi 13 F 20 ap. J.-C., 16:28:00 Temps universel coordonné"`;
28+
29+
exports[`formatDate should work with custom format and locale fr 2`] = `"jeudi 13 F 20 ap. J.-C., 15:28:00 Temps universel coordonné"`;
30+
31+
exports[`formatDate should work with custom format and locale fr 3`] = `"jeudi 13 F 20 ap. J.-C., 15:28:00 Temps universel coordonné"`;
32+
33+
exports[`formatDate should work with custom format and locale ro 1`] = `"joi, 13 F 20 d.Hr., 16:28:00 Timpul universal coordonat"`;
34+
35+
exports[`formatDate should work with custom format and locale ro 2`] = `"joi, 13 F 20 d.Hr., 15:28:00 Timpul universal coordonat"`;
36+
37+
exports[`formatDate should work with custom format and locale ro 3`] = `"joi, 13 F 20 d.Hr., 15:28:00 Timpul universal coordonat"`;
38+
39+
exports[`formatDate should work with format "hour", for date = "2020-02-13T15:28:00.000Z" and locale "de" 1`] = `"13. Februar 2020, 15:28"`;
40+
41+
exports[`formatDate should work with format "hour", for date = "2020-02-13T15:28:00.000Z" and locale "en" 1`] = `"February 13, 2020, 3:28 PM"`;
42+
43+
exports[`formatDate should work with format "hour", for date = "2020-02-13T15:28:00.000Z" and locale "es" 1`] = `"13 de febrero de 2020 15:28"`;
44+
45+
exports[`formatDate should work with format "hour", for date = "2020-02-13T15:28:00.000Z" and locale "fr" 1`] = `"13 février 2020, 15:28"`;
46+
47+
exports[`formatDate should work with format "hour", for date = "2020-02-13T15:28:00.000Z" and locale "ro" 1`] = `"13 februarie 2020, 15:28"`;
48+
49+
exports[`formatDate should work with format "hour", for date = "1581607680000" and locale "de" 1`] = `"13. Februar 2020, 15:28"`;
50+
51+
exports[`formatDate should work with format "hour", for date = "1581607680000" and locale "en" 1`] = `"February 13, 2020, 3:28 PM"`;
52+
53+
exports[`formatDate should work with format "hour", for date = "1581607680000" and locale "es" 1`] = `"13 de febrero de 2020 15:28"`;
54+
55+
exports[`formatDate should work with format "hour", for date = "1581607680000" and locale "fr" 1`] = `"13 février 2020, 15:28"`;
56+
57+
exports[`formatDate should work with format "hour", for date = "1581607680000" and locale "ro" 1`] = `"13 februarie 2020, 15:28"`;
58+
59+
exports[`formatDate should work with format "hour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "de" 1`] = `"13. Februar 2020, 16:28"`;
60+
61+
exports[`formatDate should work with format "hour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "en" 1`] = `"February 13, 2020, 4:28 PM"`;
62+
63+
exports[`formatDate should work with format "hour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "es" 1`] = `"13 de febrero de 2020 16:28"`;
64+
65+
exports[`formatDate should work with format "hour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "fr" 1`] = `"13 février 2020, 16:28"`;
66+
67+
exports[`formatDate should work with format "hour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "ro" 1`] = `"13 februarie 2020, 16:28"`;
68+
69+
exports[`formatDate should work with format "hourOnly", for date = "2020-02-13T15:28:00.000Z" and locale "de" 1`] = `"15:28"`;
70+
71+
exports[`formatDate should work with format "hourOnly", for date = "2020-02-13T15:28:00.000Z" and locale "en" 1`] = `"3:28 PM"`;
72+
73+
exports[`formatDate should work with format "hourOnly", for date = "2020-02-13T15:28:00.000Z" and locale "es" 1`] = `"15:28"`;
74+
75+
exports[`formatDate should work with format "hourOnly", for date = "2020-02-13T15:28:00.000Z" and locale "fr" 1`] = `"15:28"`;
76+
77+
exports[`formatDate should work with format "hourOnly", for date = "2020-02-13T15:28:00.000Z" and locale "ro" 1`] = `"15:28"`;
78+
79+
exports[`formatDate should work with format "hourOnly", for date = "1581607680000" and locale "de" 1`] = `"15:28"`;
80+
81+
exports[`formatDate should work with format "hourOnly", for date = "1581607680000" and locale "en" 1`] = `"3:28 PM"`;
82+
83+
exports[`formatDate should work with format "hourOnly", for date = "1581607680000" and locale "es" 1`] = `"15:28"`;
84+
85+
exports[`formatDate should work with format "hourOnly", for date = "1581607680000" and locale "fr" 1`] = `"15:28"`;
86+
87+
exports[`formatDate should work with format "hourOnly", for date = "1581607680000" and locale "ro" 1`] = `"15:28"`;
88+
89+
exports[`formatDate should work with format "hourOnly", for date = "new Date(2020, 1, 13, 16, 28)" and locale "de" 1`] = `"16:28"`;
90+
91+
exports[`formatDate should work with format "hourOnly", for date = "new Date(2020, 1, 13, 16, 28)" and locale "en" 1`] = `"4:28 PM"`;
92+
93+
exports[`formatDate should work with format "hourOnly", for date = "new Date(2020, 1, 13, 16, 28)" and locale "es" 1`] = `"16:28"`;
94+
95+
exports[`formatDate should work with format "hourOnly", for date = "new Date(2020, 1, 13, 16, 28)" and locale "fr" 1`] = `"16:28"`;
96+
97+
exports[`formatDate should work with format "hourOnly", for date = "new Date(2020, 1, 13, 16, 28)" and locale "ro" 1`] = `"16:28"`;
98+
99+
exports[`formatDate should work with format "long", for date = "2020-02-13T15:28:00.000Z" and locale "de" 1`] = `"13. Februar 2020"`;
100+
101+
exports[`formatDate should work with format "long", for date = "2020-02-13T15:28:00.000Z" and locale "en" 1`] = `"February 13, 2020"`;
102+
103+
exports[`formatDate should work with format "long", for date = "2020-02-13T15:28:00.000Z" and locale "es" 1`] = `"13 de febrero de 2020"`;
104+
105+
exports[`formatDate should work with format "long", for date = "2020-02-13T15:28:00.000Z" and locale "fr" 1`] = `"13 février 2020"`;
106+
107+
exports[`formatDate should work with format "long", for date = "2020-02-13T15:28:00.000Z" and locale "ro" 1`] = `"13 februarie 2020"`;
108+
109+
exports[`formatDate should work with format "long", for date = "1581607680000" and locale "de" 1`] = `"13. Februar 2020"`;
110+
111+
exports[`formatDate should work with format "long", for date = "1581607680000" and locale "en" 1`] = `"February 13, 2020"`;
112+
113+
exports[`formatDate should work with format "long", for date = "1581607680000" and locale "es" 1`] = `"13 de febrero de 2020"`;
114+
115+
exports[`formatDate should work with format "long", for date = "1581607680000" and locale "fr" 1`] = `"13 février 2020"`;
116+
117+
exports[`formatDate should work with format "long", for date = "1581607680000" and locale "ro" 1`] = `"13 februarie 2020"`;
118+
119+
exports[`formatDate should work with format "long", for date = "new Date(2020, 1, 13, 16, 28)" and locale "de" 1`] = `"13. Februar 2020"`;
120+
121+
exports[`formatDate should work with format "long", for date = "new Date(2020, 1, 13, 16, 28)" and locale "en" 1`] = `"February 13, 2020"`;
122+
123+
exports[`formatDate should work with format "long", for date = "new Date(2020, 1, 13, 16, 28)" and locale "es" 1`] = `"13 de febrero de 2020"`;
124+
125+
exports[`formatDate should work with format "long", for date = "new Date(2020, 1, 13, 16, 28)" and locale "fr" 1`] = `"13 février 2020"`;
126+
127+
exports[`formatDate should work with format "long", for date = "new Date(2020, 1, 13, 16, 28)" and locale "ro" 1`] = `"13 februarie 2020"`;
128+
129+
exports[`formatDate should work with format "numeric", for date = "2020-02-13T15:28:00.000Z" and locale "de" 1`] = `"2020-02-13"`;
130+
131+
exports[`formatDate should work with format "numeric", for date = "2020-02-13T15:28:00.000Z" and locale "en" 1`] = `"2020-02-13"`;
132+
133+
exports[`formatDate should work with format "numeric", for date = "2020-02-13T15:28:00.000Z" and locale "es" 1`] = `"2020-02-13"`;
134+
135+
exports[`formatDate should work with format "numeric", for date = "2020-02-13T15:28:00.000Z" and locale "fr" 1`] = `"2020-02-13"`;
136+
137+
exports[`formatDate should work with format "numeric", for date = "2020-02-13T15:28:00.000Z" and locale "ro" 1`] = `"2020-02-13"`;
138+
139+
exports[`formatDate should work with format "numeric", for date = "1581607680000" and locale "de" 1`] = `"2020-02-13"`;
140+
141+
exports[`formatDate should work with format "numeric", for date = "1581607680000" and locale "en" 1`] = `"2020-02-13"`;
142+
143+
exports[`formatDate should work with format "numeric", for date = "1581607680000" and locale "es" 1`] = `"2020-02-13"`;
144+
145+
exports[`formatDate should work with format "numeric", for date = "1581607680000" and locale "fr" 1`] = `"2020-02-13"`;
146+
147+
exports[`formatDate should work with format "numeric", for date = "1581607680000" and locale "ro" 1`] = `"2020-02-13"`;
148+
149+
exports[`formatDate should work with format "numeric", for date = "new Date(2020, 1, 13, 16, 28)" and locale "de" 1`] = `"2020-02-13"`;
150+
151+
exports[`formatDate should work with format "numeric", for date = "new Date(2020, 1, 13, 16, 28)" and locale "en" 1`] = `"2020-02-13"`;
152+
153+
exports[`formatDate should work with format "numeric", for date = "new Date(2020, 1, 13, 16, 28)" and locale "es" 1`] = `"2020-02-13"`;
154+
155+
exports[`formatDate should work with format "numeric", for date = "new Date(2020, 1, 13, 16, 28)" and locale "fr" 1`] = `"2020-02-13"`;
156+
157+
exports[`formatDate should work with format "numeric", for date = "new Date(2020, 1, 13, 16, 28)" and locale "ro" 1`] = `"2020-02-13"`;
158+
159+
exports[`formatDate should work with format "numericHour", for date = "2020-02-13T15:28:00.000Z" and locale "de" 1`] = `"2020-02-13 15:28"`;
160+
161+
exports[`formatDate should work with format "numericHour", for date = "2020-02-13T15:28:00.000Z" and locale "en" 1`] = `"2020-02-13 3:28 PM"`;
162+
163+
exports[`formatDate should work with format "numericHour", for date = "2020-02-13T15:28:00.000Z" and locale "es" 1`] = `"2020-02-13 15:28"`;
164+
165+
exports[`formatDate should work with format "numericHour", for date = "2020-02-13T15:28:00.000Z" and locale "fr" 1`] = `"2020-02-13 15:28"`;
166+
167+
exports[`formatDate should work with format "numericHour", for date = "2020-02-13T15:28:00.000Z" and locale "ro" 1`] = `"2020-02-13 15:28"`;
168+
169+
exports[`formatDate should work with format "numericHour", for date = "1581607680000" and locale "de" 1`] = `"2020-02-13 15:28"`;
170+
171+
exports[`formatDate should work with format "numericHour", for date = "1581607680000" and locale "en" 1`] = `"2020-02-13 3:28 PM"`;
172+
173+
exports[`formatDate should work with format "numericHour", for date = "1581607680000" and locale "es" 1`] = `"2020-02-13 15:28"`;
174+
175+
exports[`formatDate should work with format "numericHour", for date = "1581607680000" and locale "fr" 1`] = `"2020-02-13 15:28"`;
176+
177+
exports[`formatDate should work with format "numericHour", for date = "1581607680000" and locale "ro" 1`] = `"2020-02-13 15:28"`;
178+
179+
exports[`formatDate should work with format "numericHour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "de" 1`] = `"2020-02-13 16:28"`;
180+
181+
exports[`formatDate should work with format "numericHour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "en" 1`] = `"2020-02-13 4:28 PM"`;
182+
183+
exports[`formatDate should work with format "numericHour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "es" 1`] = `"2020-02-13 16:28"`;
184+
185+
exports[`formatDate should work with format "numericHour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "fr" 1`] = `"2020-02-13 16:28"`;
186+
187+
exports[`formatDate should work with format "numericHour", for date = "new Date(2020, 1, 13, 16, 28)" and locale "ro" 1`] = `"2020-02-13 16:28"`;
188+
189+
exports[`formatDate should work with format "short", for date = "2020-02-13T15:28:00.000Z" and locale "de" 1`] = `"13. Feb. 2020"`;
190+
191+
exports[`formatDate should work with format "short", for date = "2020-02-13T15:28:00.000Z" and locale "en" 1`] = `"Feb 13, 2020"`;
192+
193+
exports[`formatDate should work with format "short", for date = "2020-02-13T15:28:00.000Z" and locale "es" 1`] = `"13 feb 2020"`;
194+
195+
exports[`formatDate should work with format "short", for date = "2020-02-13T15:28:00.000Z" and locale "fr" 1`] = `"13 févr. 2020"`;
196+
197+
exports[`formatDate should work with format "short", for date = "2020-02-13T15:28:00.000Z" and locale "ro" 1`] = `"13 feb. 2020"`;
198+
199+
exports[`formatDate should work with format "short", for date = "1581607680000" and locale "de" 1`] = `"13. Feb. 2020"`;
200+
201+
exports[`formatDate should work with format "short", for date = "1581607680000" and locale "en" 1`] = `"Feb 13, 2020"`;
202+
203+
exports[`formatDate should work with format "short", for date = "1581607680000" and locale "es" 1`] = `"13 feb 2020"`;
204+
205+
exports[`formatDate should work with format "short", for date = "1581607680000" and locale "fr" 1`] = `"13 févr. 2020"`;
206+
207+
exports[`formatDate should work with format "short", for date = "1581607680000" and locale "ro" 1`] = `"13 feb. 2020"`;
208+
209+
exports[`formatDate should work with format "short", for date = "new Date(2020, 1, 13, 16, 28)" and locale "de" 1`] = `"13. Feb. 2020"`;
210+
211+
exports[`formatDate should work with format "short", for date = "new Date(2020, 1, 13, 16, 28)" and locale "en" 1`] = `"Feb 13, 2020"`;
212+
213+
exports[`formatDate should work with format "short", for date = "new Date(2020, 1, 13, 16, 28)" and locale "es" 1`] = `"13 feb 2020"`;
214+
215+
exports[`formatDate should work with format "short", for date = "new Date(2020, 1, 13, 16, 28)" and locale "fr" 1`] = `"13 févr. 2020"`;
216+
217+
exports[`formatDate should work with format "short", for date = "new Date(2020, 1, 13, 16, 28)" and locale "ro" 1`] = `"13 feb. 2020"`;
218+
219+
exports[`formatDate should work with format "shortWithoutDay", for date = "2020-02-13T15:28:00.000Z" and locale "de" 1`] = `"Feb. 2020"`;
220+
221+
exports[`formatDate should work with format "shortWithoutDay", for date = "2020-02-13T15:28:00.000Z" and locale "en" 1`] = `"Feb 2020"`;
222+
223+
exports[`formatDate should work with format "shortWithoutDay", for date = "2020-02-13T15:28:00.000Z" and locale "es" 1`] = `"feb 2020"`;
224+
225+
exports[`formatDate should work with format "shortWithoutDay", for date = "2020-02-13T15:28:00.000Z" and locale "fr" 1`] = `"févr. 2020"`;
226+
227+
exports[`formatDate should work with format "shortWithoutDay", for date = "2020-02-13T15:28:00.000Z" and locale "ro" 1`] = `"feb. 2020"`;
228+
229+
exports[`formatDate should work with format "shortWithoutDay", for date = "1581607680000" and locale "de" 1`] = `"Feb. 2020"`;
230+
231+
exports[`formatDate should work with format "shortWithoutDay", for date = "1581607680000" and locale "en" 1`] = `"Feb 2020"`;
232+
233+
exports[`formatDate should work with format "shortWithoutDay", for date = "1581607680000" and locale "es" 1`] = `"feb 2020"`;
234+
235+
exports[`formatDate should work with format "shortWithoutDay", for date = "1581607680000" and locale "fr" 1`] = `"févr. 2020"`;
236+
237+
exports[`formatDate should work with format "shortWithoutDay", for date = "1581607680000" and locale "ro" 1`] = `"feb. 2020"`;
238+
239+
exports[`formatDate should work with format "shortWithoutDay", for date = "new Date(2020, 1, 13, 16, 28)" and locale "de" 1`] = `"Feb. 2020"`;
240+
241+
exports[`formatDate should work with format "shortWithoutDay", for date = "new Date(2020, 1, 13, 16, 28)" and locale "en" 1`] = `"Feb 2020"`;
242+
243+
exports[`formatDate should work with format "shortWithoutDay", for date = "new Date(2020, 1, 13, 16, 28)" and locale "es" 1`] = `"feb 2020"`;
244+
245+
exports[`formatDate should work with format "shortWithoutDay", for date = "new Date(2020, 1, 13, 16, 28)" and locale "fr" 1`] = `"févr. 2020"`;
246+
247+
exports[`formatDate should work with format "shortWithoutDay", for date = "new Date(2020, 1, 13, 16, 28)" and locale "ro" 1`] = `"feb. 2020"`;

0 commit comments

Comments
 (0)