@contentful/f36-datetime 4.0.1-beta.2590 → 4.0.1-beta.2705

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/main.js +21 -26
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +6 -11
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +0 -0
  6. package/dist/types.d.ts.map +0 -0
  7. package/package.json +4 -4
package/dist/main.js CHANGED
@@ -1,5 +1,4 @@
1
1
  var $iSxHR$react = require("react");
2
- var $iSxHR$reactjsxruntime = require("react/jsx-runtime");
3
2
  var $iSxHR$dayjs = require("dayjs");
4
3
  var $iSxHR$dayjspluginutc = require("dayjs/plugin/utc");
5
4
  var $iSxHR$dayjspluginrelativeTime = require("dayjs/plugin/relativeTime");
@@ -19,8 +18,7 @@ $parcel$export(module.exports, "formatMachineReadableDateTime", () => $fe3d2807f
19
18
 
20
19
 
21
20
 
22
-
23
- $parcel$interopDefault($iSxHR$dayjs).extend($parcel$interopDefault($iSxHR$dayjspluginutc));
21
+ ($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginutc)));
24
22
  function $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, format = 'full') {
25
23
  let template;
26
24
  switch(format){
@@ -36,7 +34,7 @@ function $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, format = 'full') {
36
34
  default:
37
35
  template = 'ddd, DD MMM YYYY [at] h:mm A';
38
36
  }
39
- return $parcel$interopDefault($iSxHR$dayjs)(date).format(template);
37
+ return ($parcel$interopDefault($iSxHR$dayjs))(date).format(template);
40
38
  }
41
39
  function $fe3d2807f48471b7$export$5fb913e47d486079(date, format = 'full') {
42
40
  let template;
@@ -53,7 +51,7 @@ function $fe3d2807f48471b7$export$5fb913e47d486079(date, format = 'full') {
53
51
  default:
54
52
  template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]';
55
53
  }
56
- return $parcel$interopDefault($iSxHR$dayjs)(date).utc().format(template);
54
+ return ($parcel$interopDefault($iSxHR$dayjs))(date).utc().format(template);
57
55
  }
58
56
  const $fe3d2807f48471b7$export$3ae94a2503e890a1 = (date)=>{
59
57
  return $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, 'day');
@@ -69,17 +67,17 @@ const $fe3d2807f48471b7$export$b89623867a65b725 = (date)=>{
69
67
 
70
68
 
71
69
 
72
- $parcel$interopDefault($iSxHR$dayjs).extend($parcel$interopDefault($iSxHR$dayjspluginutc));
73
- $parcel$interopDefault($iSxHR$dayjs).extend($parcel$interopDefault($iSxHR$dayjspluginrelativeTime));
74
- $parcel$interopDefault($iSxHR$dayjs).extend($parcel$interopDefault($iSxHR$dayjsplugincalendar));
70
+ ($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginutc)));
71
+ ($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginrelativeTime)));
72
+ ($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjsplugincalendar)));
75
73
  function $4e7e5146bc048e19$export$68534c3ecebfa124(date, baseDate = new Date()) {
76
- return $parcel$interopDefault($iSxHR$dayjs)(date).from(baseDate);
74
+ return ($parcel$interopDefault($iSxHR$dayjs))(date).from(baseDate);
77
75
  }
78
76
  function $4e7e5146bc048e19$export$aa1a2def90bfd930(date, baseDate = new Date()) {
79
- const isToday = $parcel$interopDefault($iSxHR$dayjs)(date).isSame(baseDate, 'day');
77
+ const isToday = ($parcel$interopDefault($iSxHR$dayjs))(date).isSame(baseDate, 'day');
80
78
  if (!isToday) // if the date is not today, we display it with "Yesterday", "Tomorrow", etc.
81
79
  // and if the date is not in the current week then it will display "17 Aug 2021"
82
- return $parcel$interopDefault($iSxHR$dayjs)(date).calendar(baseDate, {
80
+ return ($parcel$interopDefault($iSxHR$dayjs))(date).calendar(baseDate, {
83
81
  sameElse: 'DD MMM YYYY'
84
82
  });
85
83
  // returns "... ago"
@@ -90,16 +88,14 @@ function $4e7e5146bc048e19$export$aa1a2def90bfd930(date, baseDate = new Date())
90
88
 
91
89
  const $13381b54cf631358$var$_DateTime = ({ date: date , format: format = 'full' , testId: testId = 'cf-ui-date-time' , ...otherProps }, ref)=>{
92
90
  const machineReadableDate = $fe3d2807f48471b7$export$5fb913e47d486079(date);
93
- return(/*#__PURE__*/ $iSxHR$reactjsxruntime.jsx("time", {
91
+ return(/*#__PURE__*/ ($parcel$interopDefault($iSxHR$react)).createElement("time", {
94
92
  dateTime: machineReadableDate,
95
93
  "data-test-id": testId,
96
94
  ...otherProps,
97
- ref: ref,
98
- children: $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, format)
99
- }));
95
+ ref: ref
96
+ }, $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, format)));
100
97
  };
101
- const $13381b54cf631358$export$82f9ebd9adeba146 = /*#__PURE__*/ $parcel$interopDefault($iSxHR$react).forwardRef($13381b54cf631358$var$_DateTime);
102
-
98
+ const $13381b54cf631358$export$82f9ebd9adeba146 = /*#__PURE__*/ ($parcel$interopDefault($iSxHR$react)).forwardRef($13381b54cf631358$var$_DateTime);
103
99
 
104
100
 
105
101
 
@@ -108,13 +104,13 @@ const $13381b54cf631358$export$82f9ebd9adeba146 = /*#__PURE__*/ $parcel$interopD
108
104
 
109
105
 
110
106
 
111
- $parcel$interopDefault($iSxHR$dayjs).extend($parcel$interopDefault($iSxHR$dayjspluginutc));
112
- $parcel$interopDefault($iSxHR$dayjs).extend($parcel$interopDefault($iSxHR$dayjspluginrelativeTime));
113
- $parcel$interopDefault($iSxHR$dayjs).extend($parcel$interopDefault($iSxHR$dayjsplugincalendar));
107
+ ($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginutc)));
108
+ ($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginrelativeTime)));
109
+ ($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjsplugincalendar)));
114
110
  const $186742b7428c62f4$var$_RelativeDateTime = ({ date: date , baseDate: baseDate , isRelativeToCurrentWeek: isRelativeToCurrentWeek = false , testId: testId = 'cf-ui-relative-date-time' , ...otherProps }, ref)=>{
115
111
  const now = new Date();
116
112
  const referenceDate = baseDate !== null && baseDate !== void 0 ? baseDate : now;
117
- const dayjsDate = $parcel$interopDefault($iSxHR$dayjs)(date);
113
+ const dayjsDate = ($parcel$interopDefault($iSxHR$dayjs))(date);
118
114
  const machineReadableDate = $fe3d2807f48471b7$export$5fb913e47d486079(date);
119
115
  let relativeDate;
120
116
  if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) /**
@@ -125,15 +121,14 @@ const $186742b7428c62f4$var$_RelativeDateTime = ({ date: date , baseDate: baseDa
125
121
  */ relativeDate = $4e7e5146bc048e19$export$aa1a2def90bfd930(date, referenceDate);
126
122
  else // otherwise we display it with "... ago" or "in ..." notation
127
123
  relativeDate = $4e7e5146bc048e19$export$68534c3ecebfa124(date, referenceDate);
128
- return(/*#__PURE__*/ $iSxHR$reactjsxruntime.jsx("time", {
124
+ return(/*#__PURE__*/ ($parcel$interopDefault($iSxHR$react)).createElement("time", {
129
125
  dateTime: machineReadableDate,
130
126
  "data-test-id": testId,
131
127
  ...otherProps,
132
- ref: ref,
133
- children: relativeDate
134
- }));
128
+ ref: ref
129
+ }, relativeDate));
135
130
  };
136
- const $186742b7428c62f4$export$6de14fd95adb1c8a = /*#__PURE__*/ $parcel$interopDefault($iSxHR$react).forwardRef($186742b7428c62f4$var$_RelativeDateTime);
131
+ const $186742b7428c62f4$export$6de14fd95adb1c8a = /*#__PURE__*/ ($parcel$interopDefault($iSxHR$react)).forwardRef($186742b7428c62f4$var$_RelativeDateTime);
137
132
 
138
133
 
139
134
 
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/datetime/src/index.ts","packages/components/datetime/src/DateTime.tsx","packages/components/datetime/src/utils/index.ts","packages/components/datetime/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/RelativeDateTime.tsx"],"sourcesContent":["export { DateTime } from './DateTime';\nexport type { DateTimeProps } from './DateTime';\nexport { RelativeDateTime } from './RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime';\nexport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n","import React from 'react';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n /**\n * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n */\n date: DateType;\n /**\n * The format in which the date will be presented\n *\n * @default full\n **/\n format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n {\n date,\n format = 'full',\n testId = 'cf-ui-date-time',\n ...otherProps\n }: ExpandProps<DateTimeProps>,\n ref: React.Ref<HTMLTimeElement>,\n) => {\n const machineReadableDate = formatMachineReadableDateTime(date);\n\n return (\n <time\n dateTime={machineReadableDate}\n data-test-id={testId}\n {...otherProps}\n ref={ref}\n >\n {formatDateAndTime(date, format)}\n </time>\n );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","export {\n formatDateAndTime,\n formatMachineReadableDateTime,\n formatDate,\n formatTime,\n formatWeekdayDate,\n} from './formatDateTimeUtils';\n\nexport {\n formatRelativeDateTime,\n formatRelativeToCurrentWeekDateTime,\n} from './relativeDateTimeUtils';\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n date: DateType,\n format: DateFormat = 'full',\n): string {\n let template: string;\n\n switch (format) {\n case 'day':\n template = 'DD MMM YYYY'; // 17 Aug 2021\n break;\n case 'weekday':\n template = 'ddd, DD MMM'; // Tue, 17 Aug\n break;\n case 'time':\n template = 'h:mm A'; // 3:45 PM\n break;\n default:\n template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n }\n\n return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n date: DateType,\n format: DateFormat = 'full',\n): string {\n let template: string;\n\n switch (format) {\n case 'day':\n template = 'YYYY-MM-DD'; // 2019-08-24\n break;\n case 'weekday':\n template = 'MM-DD'; // 08-24\n break;\n case 'time':\n template = 'HH:mm:ss.SSS'; // 15:44:07.000\n break;\n default:\n template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n }\n\n return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n date: DateType,\n baseDate: DateType = new Date(),\n) {\n return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n date: DateType,\n baseDate: DateType = new Date(),\n) {\n const isToday = dayjs(date).isSame(baseDate, 'day');\n\n if (!isToday) {\n // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n // and if the date is not in the current week then it will display \"17 Aug 2021\"\n return dayjs(date).calendar(baseDate, {\n sameElse: 'DD MMM YYYY',\n });\n }\n\n // returns \"... ago\"\n return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n formatMachineReadableDateTime,\n formatRelativeDateTime,\n formatRelativeToCurrentWeekDateTime,\n} from './utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n /**\n * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n */\n date: DateType;\n /**\n * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n * If no value is passed then the date will be compared to \"now\"\n *\n * @default \"Now\"\n */\n baseDate?: DateType;\n /**\n * Sets the date to be relative only if it is in the current week\n * @default false\n */\n isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n RelativeDateTimeInternalProps,\n 'time'\n>;\n\nconst _RelativeDateTime = (\n {\n date,\n baseDate,\n isRelativeToCurrentWeek = false,\n testId = 'cf-ui-relative-date-time',\n ...otherProps\n }: ExpandProps<RelativeDateTimeProps>,\n ref: React.Ref<HTMLTimeElement>,\n) => {\n const now = new Date();\n const referenceDate = baseDate ?? now;\n const dayjsDate = dayjs(date);\n const machineReadableDate = formatMachineReadableDateTime(date);\n\n let relativeDate: string;\n\n if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n /**\n * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n *\n * check formatRelativeToCurrentWeekDateTime for more details\n */\n relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n } else {\n // otherwise we display it with \"... ago\" or \"in ...\" notation\n relativeDate = formatRelativeDateTime(date, referenceDate);\n }\n\n return (\n <time\n dateTime={machineReadableDate}\n data-test-id={testId}\n {...otherProps}\n ref={ref}\n >\n {relativeDate}\n </time>\n );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"],"names":["DateTime","DateTimeProps","RelativeDateTime","RelativeDateTimeProps","formatDateAndTime","formatMachineReadableDateTime","React","CommonProps","PropsWithHTMLElement","ExpandProps","DateType","DateFormat","DateTimeOwnProps","date","format","_DateTime","testId","otherProps","ref","Ref","HTMLTimeElement","machineReadableDate","forwardRef","formatDate","formatTime","formatWeekdayDate","formatRelativeDateTime","formatRelativeToCurrentWeekDateTime","dayjs","utcPlugin","extend","template","utc","relativeTime","calendarPlugin","baseDate","Date","from","isToday","isSame","calendar","sameElse","RelativeDateTimeInternalProps","isRelativeToCurrentWeek","_RelativeDateTime","now","referenceDate","dayjsDate","relativeDate"],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/components/datetime/src/index.ts","packages/components/datetime/src/DateTime.tsx","packages/components/datetime/src/utils/index.ts","packages/components/datetime/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/RelativeDateTime.tsx"],"sourcesContent":["export { DateTime } from './DateTime';\nexport type { DateTimeProps } from './DateTime';\nexport { RelativeDateTime } from './RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime';\nexport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n","import React from 'react';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n /**\n * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n */\n date: DateType;\n /**\n * The format in which the date will be presented\n *\n * @default full\n **/\n format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n {\n date,\n format = 'full',\n testId = 'cf-ui-date-time',\n ...otherProps\n }: ExpandProps<DateTimeProps>,\n ref: React.Ref<HTMLTimeElement>,\n) => {\n const machineReadableDate = formatMachineReadableDateTime(date);\n\n return (\n <time\n dateTime={machineReadableDate}\n data-test-id={testId}\n {...otherProps}\n ref={ref}\n >\n {formatDateAndTime(date, format)}\n </time>\n );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","export {\n formatDateAndTime,\n formatMachineReadableDateTime,\n formatDate,\n formatTime,\n formatWeekdayDate,\n} from './formatDateTimeUtils';\n\nexport {\n formatRelativeDateTime,\n formatRelativeToCurrentWeekDateTime,\n} from './relativeDateTimeUtils';\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n date: DateType,\n format: DateFormat = 'full',\n): string {\n let template: string;\n\n switch (format) {\n case 'day':\n template = 'DD MMM YYYY'; // 17 Aug 2021\n break;\n case 'weekday':\n template = 'ddd, DD MMM'; // Tue, 17 Aug\n break;\n case 'time':\n template = 'h:mm A'; // 3:45 PM\n break;\n default:\n template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n }\n\n return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n date: DateType,\n format: DateFormat = 'full',\n): string {\n let template: string;\n\n switch (format) {\n case 'day':\n template = 'YYYY-MM-DD'; // 2019-08-24\n break;\n case 'weekday':\n template = 'MM-DD'; // 08-24\n break;\n case 'time':\n template = 'HH:mm:ss.SSS'; // 15:44:07.000\n break;\n default:\n template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n }\n\n return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n date: DateType,\n baseDate: DateType = new Date(),\n) {\n return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n date: DateType,\n baseDate: DateType = new Date(),\n) {\n const isToday = dayjs(date).isSame(baseDate, 'day');\n\n if (!isToday) {\n // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n // and if the date is not in the current week then it will display \"17 Aug 2021\"\n return dayjs(date).calendar(baseDate, {\n sameElse: 'DD MMM YYYY',\n });\n }\n\n // returns \"... ago\"\n return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n formatMachineReadableDateTime,\n formatRelativeDateTime,\n formatRelativeToCurrentWeekDateTime,\n} from './utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n /**\n * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n */\n date: DateType;\n /**\n * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n * If no value is passed then the date will be compared to \"now\"\n *\n * @default \"Now\"\n */\n baseDate?: DateType;\n /**\n * Sets the date to be relative only if it is in the current week\n * @default false\n */\n isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n RelativeDateTimeInternalProps,\n 'time'\n>;\n\nconst _RelativeDateTime = (\n {\n date,\n baseDate,\n isRelativeToCurrentWeek = false,\n testId = 'cf-ui-relative-date-time',\n ...otherProps\n }: ExpandProps<RelativeDateTimeProps>,\n ref: React.Ref<HTMLTimeElement>,\n) => {\n const now = new Date();\n const referenceDate = baseDate ?? now;\n const dayjsDate = dayjs(date);\n const machineReadableDate = formatMachineReadableDateTime(date);\n\n let relativeDate: string;\n\n if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n /**\n * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n *\n * check formatRelativeToCurrentWeekDateTime for more details\n */\n relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n } else {\n // otherwise we display it with \"... ago\" or \"in ...\" notation\n relativeDate = formatRelativeDateTime(date, referenceDate);\n }\n\n return (\n <time\n dateTime={machineReadableDate}\n data-test-id={testId}\n {...otherProps}\n ref={ref}\n >\n {relativeDate}\n </time>\n );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"],"names":["DateTime","DateTimeProps","RelativeDateTime","RelativeDateTimeProps","formatDateAndTime","formatMachineReadableDateTime","React","CommonProps","PropsWithHTMLElement","ExpandProps","DateType","DateFormat","DateTimeOwnProps","date","format","_DateTime","testId","otherProps","ref","Ref","HTMLTimeElement","machineReadableDate","forwardRef","formatDate","formatTime","formatWeekdayDate","formatRelativeDateTime","formatRelativeToCurrentWeekDateTime","dayjs","utcPlugin","extend","template","utc","relativeTime","calendarPlugin","baseDate","Date","from","isToday","isSame","calendar","sameElse","RelativeDateTimeInternalProps","isRelativeToCurrentWeek","_RelativeDateTime","now","referenceDate","dayjsDate","relativeDate"],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import $fUYts$react from "react";
2
- import {jsx as $fUYts$jsx} from "react/jsx-runtime";
3
2
  import $fUYts$dayjs from "dayjs";
4
3
  import $fUYts$dayjspluginutc from "dayjs/plugin/utc";
5
4
  import $fUYts$dayjspluginrelativeTime from "dayjs/plugin/relativeTime";
@@ -8,7 +7,6 @@ import $fUYts$dayjsplugincalendar from "dayjs/plugin/calendar";
8
7
 
9
8
 
10
9
 
11
-
12
10
  $fUYts$dayjs.extend($fUYts$dayjspluginutc);
13
11
  function $ee655ad1301c8997$export$de4eb09f10f9c95e(date, format = 'full') {
14
12
  let template;
@@ -79,13 +77,12 @@ function $162585a33f185f78$export$aa1a2def90bfd930(date, baseDate = new Date())
79
77
 
80
78
  const $6ec332be9e82fade$var$_DateTime = ({ date: date , format: format = 'full' , testId: testId = 'cf-ui-date-time' , ...otherProps }, ref)=>{
81
79
  const machineReadableDate = $ee655ad1301c8997$export$5fb913e47d486079(date);
82
- return(/*#__PURE__*/ $fUYts$jsx("time", {
80
+ return(/*#__PURE__*/ $fUYts$react.createElement("time", {
83
81
  dateTime: machineReadableDate,
84
82
  "data-test-id": testId,
85
83
  ...otherProps,
86
- ref: ref,
87
- children: $ee655ad1301c8997$export$de4eb09f10f9c95e(date, format)
88
- }));
84
+ ref: ref
85
+ }, $ee655ad1301c8997$export$de4eb09f10f9c95e(date, format)));
89
86
  };
90
87
  const $6ec332be9e82fade$export$82f9ebd9adeba146 = /*#__PURE__*/ $fUYts$react.forwardRef($6ec332be9e82fade$var$_DateTime);
91
88
 
@@ -96,7 +93,6 @@ const $6ec332be9e82fade$export$82f9ebd9adeba146 = /*#__PURE__*/ $fUYts$react.for
96
93
 
97
94
 
98
95
 
99
-
100
96
  $fUYts$dayjs.extend($fUYts$dayjspluginutc);
101
97
  $fUYts$dayjs.extend($fUYts$dayjspluginrelativeTime);
102
98
  $fUYts$dayjs.extend($fUYts$dayjsplugincalendar);
@@ -114,13 +110,12 @@ const $4bc2031678011d23$var$_RelativeDateTime = ({ date: date , baseDate: baseDa
114
110
  */ relativeDate = $162585a33f185f78$export$aa1a2def90bfd930(date, referenceDate);
115
111
  else // otherwise we display it with "... ago" or "in ..." notation
116
112
  relativeDate = $162585a33f185f78$export$68534c3ecebfa124(date, referenceDate);
117
- return(/*#__PURE__*/ $fUYts$jsx("time", {
113
+ return(/*#__PURE__*/ $fUYts$react.createElement("time", {
118
114
  dateTime: machineReadableDate,
119
115
  "data-test-id": testId,
120
116
  ...otherProps,
121
- ref: ref,
122
- children: relativeDate
123
- }));
117
+ ref: ref
118
+ }, relativeDate));
124
119
  };
125
120
  const $4bc2031678011d23$export$6de14fd95adb1c8a = /*#__PURE__*/ $fUYts$react.forwardRef($4bc2031678011d23$var$_RelativeDateTime);
126
121
 
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;AGEA4B,YAAK,CAACE,MAAN,CAAaD,qBAAb;SAmBgBzB,yCAAT,CACLS,IADK,EAELC,MAAkB,GAAG,CAFhB,OAGG,CAHV;IAIE,GAAA,CAAIiB,QAAQ;IAEZ,MAAA,CAAQjB,MAAR;QACE,IAAA,CAAK,CAAL;YACEiB,QAAQ,GAAG,CAAX,aAA0B,CAA1BA,AAA0B,EAA1BA,AAA0B,YAA1BA;YACA,KAAA;QACF,IAAA,CAAK,CAAL;YACEA,QAAQ,GAAG,CAAX,aAA0B,CAA1BA,AAA0B,EAA1BA,AAA0B,YAA1BA;YACA,KAAA;QACF,IAAA,CAAK,CAAL;YACEA,QAAQ,GAAG,CAAX,QAAqB,CAArBA,AAAqB,EAArBA,AAAqB,QAArBA;YACA,KAAA;;YAEAA,QAAQ,GAAG,CAAX;;IAGJ,MAAA,CAAOH,YAAK,CAACf,IAAD,EAAOC,MAAZ,CAAmBiB,QAAnB;AACR,CAAA;SAgBe1B,yCAAT,CACLQ,IADK,EAELC,MAAkB,GAAG,CAFhB,OAGG,CAHV;IAIE,GAAA,CAAIiB,QAAQ;IAEZ,MAAA,CAAQjB,MAAR;QACE,IAAA,CAAK,CAAL;YACEiB,QAAQ,GAAG,CAAX,YAAyB,CAAzBA,AAAyB,EAAzBA,AAAyB,WAAzBA;YACA,KAAA;QACF,IAAA,CAAK,CAAL;YACEA,QAAQ,GAAG,CAAX,OAAoB,CAApBA,AAAoB,EAApBA,AAAoB,MAApBA;YACA,KAAA;QACF,IAAA,CAAK,CAAL;YACEA,QAAQ,GAAG,CAAX,cAA2B,CAA3BA,AAA2B,EAA3BA,AAA2B,aAA3BA;YACA,KAAA;;YAEAA,QAAQ,GAAG,CAAX;;IAGJ,MAAA,CAAOH,YAAK,CAACf,IAAD,EAAOmB,GAAZ,GAAkBlB,MAAlB,CAAyBiB,QAAzB;AACR,CAAA;AAOM,KAAA,CAAMR,yCAAU,IAAIV,IAAD,GAA4B,CAAtD;IACE,MAAA,CAAOT,yCAAiB,CAACS,IAAD,EAAO,CAAP;AACzB,CAFM;AASA,KAAA,CAAMW,yCAAU,IAAIX,IAAD,GAA4B,CAAtD;IACE,MAAA,CAAOT,yCAAiB,CAACS,IAAD,EAAO,CAAP;AACzB,CAFM;AASA,KAAA,CAAMY,yCAAiB,IAAIZ,IAAD,GAA4B,CAA7D;IACE,MAAA,CAAOT,yCAAiB,CAACS,IAAD,EAAO,CAAP;AACzB,CAFM;;;;;;ACpGPe,YAAK,CAACE,MAAN,CAAaD,qBAAb;AACAD,YAAK,CAACE,MAAN,CAAaG,8BAAb;AACAL,YAAK,CAACE,MAAN,CAAaI,0BAAb;SAmBgBR,yCAAT,CACLb,IADK,EAELsB,QAAkB,GAAG,GAAA,CAAIC,IAAJ,IACrB,CAHF;IAIE,MAAA,CAAOR,YAAK,CAACf,IAAD,EAAOwB,IAAZ,CAAiBF,QAAjB;AACR,CAAA;SAmBeR,yCAAT,CACLd,IADK,EAELsB,QAAkB,GAAG,GAAA,CAAIC,IAAJ,IACrB,CAHF;IAIE,KAAA,CAAME,OAAO,GAAGV,YAAK,CAACf,IAAD,EAAO0B,MAAZ,CAAmBJ,QAAnB,EAA6B,CAA7B;IAEhB,EAAA,GAAKG,OAAL,EACE,EAAA,AAAA,2EAAA;IACA,EAAA,AAAA,8EAAA;IACA,MAAA,CAAOV,YAAK,CAACf,IAAD,EAAO2B,QAAZ,CAAqBL,QAArB,EAA+B,CAAtC;QACEM,QAAQ,EAAE,CAAVA;IADoC,CAA/B;IAKT,CAFC,AAED,EAFC,AAED,kBAFC;IAGD,MAAA,CAAOf,yCAAsB,CAACb,IAAD,EAAOsB,QAAP;AAC9B,CAAA;;;;AHxCD,KAAA,CAAMpB,+BAAS,IACb,CADF,OAEIF,IADF,WAEEC,MAAM,GAAG,CAFX,gBAGEE,MAAM,GAAG,CAHX,sBAIKC,UAAH,CACY,CANE,EAOhBC,GAPgB,GAQb,CAPH;IAQA,KAAA,CAAMG,mBAAmB,GAAGhB,yCAA6B,CAACQ,IAAD;IAEzD,MAAA,0BACG,CAAD;QACE,QAAA,EAAUQ,mBAAD;QACT,CAAA,eAAcL,MAAD;WACTC,UAAJ;QACA,GAAA,EAAKC,GAAD;kBAEHd,yCAAiB,CAACS,IAAD,EAAOC,MAAP;;AAGvB,CArBD;AA0BO,KAAA,CAAMd,yCAAQ,iBAAGM,YAAK,CAACgB,UAAN,CAAiBP,+BAAjB;;;;;;;;;;AIxCxBa,YAAK,CAACE,MAAN,CAAaD,qBAAb;AACAD,YAAK,CAACE,MAAN,CAAaG,8BAAb;AACAL,YAAK,CAACE,MAAN,CAAaI,0BAAb;AAiCA,KAAA,CAAMU,uCAAiB,IACrB,CADF,OAEI/B,IADF,aAEEsB,QAFF,4BAGEQ,uBAAuB,GAAG,KAH5B,WAIE3B,MAAM,GAAG,CAJX,+BAKKC,UAAH,CACY,CAPU,EAQxBC,GARwB,GASrB,CARH;IASA,KAAA,CAAM2B,GAAG,GAAG,GAAA,CAAIT,IAAJ;IACZ,KAAA,CAAMU,aAAa,GAAGX,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIU,GAAlC;IACA,KAAA,CAAME,SAAS,GAAGnB,YAAK,CAACf,IAAD;IACvB,KAAA,CAAMQ,mBAAmB,GAAGhB,yCAA6B,CAACQ,IAAD;IAEzD,GAAA,CAAImC,YAAY;IAEhB,EAAA,EAAIL,uBAAuB,KAAKI,SAAS,CAACR,MAAV,CAAiBO,aAAjB,EAAgC,CAAhC,OAC9B,EAKJ,AALI;;;;;KAKJ,AALI,EAKJ,CACIE,YAAY,GAAGrB,yCAAmC,CAACd,IAAD,EAAOiC,aAAP;SAElD,EAAA,AAAA,4DAAA;IACAE,YAAY,GAAGtB,yCAAsB,CAACb,IAAD,EAAOiC,aAAP;IAGvC,MAAA,0BACG,CAAD;QACE,QAAA,EAAUzB,mBAAD;QACT,CAAA,eAAcL,MAAD;WACTC,UAAJ;QACA,GAAA,EAAKC,GAAD;kBAEH8B,YAAD;;AAGL,CAxCD;AA8CO,KAAA,CAAM9C,yCAAgB,iBAAGI,YAAK,CAACgB,UAAN,CAAiBsB,uCAAjB;;","sources":["packages/components/datetime/src/index.ts","packages/components/datetime/src/DateTime.tsx","packages/components/datetime/src/utils/index.ts","packages/components/datetime/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/RelativeDateTime.tsx"],"sourcesContent":["export { DateTime } from './DateTime';\nexport type { DateTimeProps } from './DateTime';\nexport { RelativeDateTime } from './RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime';\nexport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n","import React from 'react';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n /**\n * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n */\n date: DateType;\n /**\n * The format in which the date will be presented\n *\n * @default full\n **/\n format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n {\n date,\n format = 'full',\n testId = 'cf-ui-date-time',\n ...otherProps\n }: ExpandProps<DateTimeProps>,\n ref: React.Ref<HTMLTimeElement>,\n) => {\n const machineReadableDate = formatMachineReadableDateTime(date);\n\n return (\n <time\n dateTime={machineReadableDate}\n data-test-id={testId}\n {...otherProps}\n ref={ref}\n >\n {formatDateAndTime(date, format)}\n </time>\n );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","export {\n formatDateAndTime,\n formatMachineReadableDateTime,\n formatDate,\n formatTime,\n formatWeekdayDate,\n} from './formatDateTimeUtils';\n\nexport {\n formatRelativeDateTime,\n formatRelativeToCurrentWeekDateTime,\n} from './relativeDateTimeUtils';\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n date: DateType,\n format: DateFormat = 'full',\n): string {\n let template: string;\n\n switch (format) {\n case 'day':\n template = 'DD MMM YYYY'; // 17 Aug 2021\n break;\n case 'weekday':\n template = 'ddd, DD MMM'; // Tue, 17 Aug\n break;\n case 'time':\n template = 'h:mm A'; // 3:45 PM\n break;\n default:\n template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n }\n\n return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n date: DateType,\n format: DateFormat = 'full',\n): string {\n let template: string;\n\n switch (format) {\n case 'day':\n template = 'YYYY-MM-DD'; // 2019-08-24\n break;\n case 'weekday':\n template = 'MM-DD'; // 08-24\n break;\n case 'time':\n template = 'HH:mm:ss.SSS'; // 15:44:07.000\n break;\n default:\n template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n }\n\n return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n date: DateType,\n baseDate: DateType = new Date(),\n) {\n return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n date: DateType,\n baseDate: DateType = new Date(),\n) {\n const isToday = dayjs(date).isSame(baseDate, 'day');\n\n if (!isToday) {\n // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n // and if the date is not in the current week then it will display \"17 Aug 2021\"\n return dayjs(date).calendar(baseDate, {\n sameElse: 'DD MMM YYYY',\n });\n }\n\n // returns \"... ago\"\n return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n formatMachineReadableDateTime,\n formatRelativeDateTime,\n formatRelativeToCurrentWeekDateTime,\n} from './utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n /**\n * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n */\n date: DateType;\n /**\n * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n * If no value is passed then the date will be compared to \"now\"\n *\n * @default \"Now\"\n */\n baseDate?: DateType;\n /**\n * Sets the date to be relative only if it is in the current week\n * @default false\n */\n isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n RelativeDateTimeInternalProps,\n 'time'\n>;\n\nconst _RelativeDateTime = (\n {\n date,\n baseDate,\n isRelativeToCurrentWeek = false,\n testId = 'cf-ui-relative-date-time',\n ...otherProps\n }: ExpandProps<RelativeDateTimeProps>,\n ref: React.Ref<HTMLTimeElement>,\n) => {\n const now = new Date();\n const referenceDate = baseDate ?? now;\n const dayjsDate = dayjs(date);\n const machineReadableDate = formatMachineReadableDateTime(date);\n\n let relativeDate: string;\n\n if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n /**\n * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n *\n * check formatRelativeToCurrentWeekDateTime for more details\n */\n relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n } else {\n // otherwise we display it with \"... ago\" or \"in ...\" notation\n relativeDate = formatRelativeDateTime(date, referenceDate);\n }\n\n return (\n <time\n dateTime={machineReadableDate}\n data-test-id={testId}\n {...otherProps}\n ref={ref}\n >\n {relativeDate}\n </time>\n );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"],"names":["DateTime","DateTimeProps","RelativeDateTime","RelativeDateTimeProps","formatDateAndTime","formatMachineReadableDateTime","React","CommonProps","PropsWithHTMLElement","ExpandProps","DateType","DateFormat","DateTimeOwnProps","date","format","_DateTime","testId","otherProps","ref","Ref","HTMLTimeElement","machineReadableDate","forwardRef","formatDate","formatTime","formatWeekdayDate","formatRelativeDateTime","formatRelativeToCurrentWeekDateTime","dayjs","utcPlugin","extend","template","utc","relativeTime","calendarPlugin","baseDate","Date","from","isToday","isSame","calendar","sameElse","RelativeDateTimeInternalProps","isRelativeToCurrentWeek","_RelativeDateTime","now","referenceDate","dayjsDate","relativeDate"],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/components/datetime/src/index.ts","packages/components/datetime/src/DateTime.tsx","packages/components/datetime/src/utils/index.ts","packages/components/datetime/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/RelativeDateTime.tsx"],"sourcesContent":["export { DateTime } from './DateTime';\nexport type { DateTimeProps } from './DateTime';\nexport { RelativeDateTime } from './RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime';\nexport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n","import React from 'react';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n /**\n * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n */\n date: DateType;\n /**\n * The format in which the date will be presented\n *\n * @default full\n **/\n format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n {\n date,\n format = 'full',\n testId = 'cf-ui-date-time',\n ...otherProps\n }: ExpandProps<DateTimeProps>,\n ref: React.Ref<HTMLTimeElement>,\n) => {\n const machineReadableDate = formatMachineReadableDateTime(date);\n\n return (\n <time\n dateTime={machineReadableDate}\n data-test-id={testId}\n {...otherProps}\n ref={ref}\n >\n {formatDateAndTime(date, format)}\n </time>\n );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","export {\n formatDateAndTime,\n formatMachineReadableDateTime,\n formatDate,\n formatTime,\n formatWeekdayDate,\n} from './formatDateTimeUtils';\n\nexport {\n formatRelativeDateTime,\n formatRelativeToCurrentWeekDateTime,\n} from './relativeDateTimeUtils';\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n date: DateType,\n format: DateFormat = 'full',\n): string {\n let template: string;\n\n switch (format) {\n case 'day':\n template = 'DD MMM YYYY'; // 17 Aug 2021\n break;\n case 'weekday':\n template = 'ddd, DD MMM'; // Tue, 17 Aug\n break;\n case 'time':\n template = 'h:mm A'; // 3:45 PM\n break;\n default:\n template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n }\n\n return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n date: DateType,\n format: DateFormat = 'full',\n): string {\n let template: string;\n\n switch (format) {\n case 'day':\n template = 'YYYY-MM-DD'; // 2019-08-24\n break;\n case 'weekday':\n template = 'MM-DD'; // 08-24\n break;\n case 'time':\n template = 'HH:mm:ss.SSS'; // 15:44:07.000\n break;\n default:\n template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n }\n\n return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n date: DateType,\n baseDate: DateType = new Date(),\n) {\n return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n date: DateType,\n baseDate: DateType = new Date(),\n) {\n const isToday = dayjs(date).isSame(baseDate, 'day');\n\n if (!isToday) {\n // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n // and if the date is not in the current week then it will display \"17 Aug 2021\"\n return dayjs(date).calendar(baseDate, {\n sameElse: 'DD MMM YYYY',\n });\n }\n\n // returns \"... ago\"\n return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n formatMachineReadableDateTime,\n formatRelativeDateTime,\n formatRelativeToCurrentWeekDateTime,\n} from './utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n /**\n * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n */\n date: DateType;\n /**\n * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n * If no value is passed then the date will be compared to \"now\"\n *\n * @default \"Now\"\n */\n baseDate?: DateType;\n /**\n * Sets the date to be relative only if it is in the current week\n * @default false\n */\n isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n RelativeDateTimeInternalProps,\n 'time'\n>;\n\nconst _RelativeDateTime = (\n {\n date,\n baseDate,\n isRelativeToCurrentWeek = false,\n testId = 'cf-ui-relative-date-time',\n ...otherProps\n }: ExpandProps<RelativeDateTimeProps>,\n ref: React.Ref<HTMLTimeElement>,\n) => {\n const now = new Date();\n const referenceDate = baseDate ?? now;\n const dayjsDate = dayjs(date);\n const machineReadableDate = formatMachineReadableDateTime(date);\n\n let relativeDate: string;\n\n if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n /**\n * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n *\n * check formatRelativeToCurrentWeekDateTime for more details\n */\n relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n } else {\n // otherwise we display it with \"... ago\" or \"in ...\" notation\n relativeDate = formatRelativeDateTime(date, referenceDate);\n }\n\n return (\n <time\n dateTime={machineReadableDate}\n data-test-id={testId}\n {...otherProps}\n ref={ref}\n >\n {relativeDate}\n </time>\n );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"],"names":["DateTime","DateTimeProps","RelativeDateTime","RelativeDateTimeProps","formatDateAndTime","formatMachineReadableDateTime","React","CommonProps","PropsWithHTMLElement","ExpandProps","DateType","DateFormat","DateTimeOwnProps","date","format","_DateTime","testId","otherProps","ref","Ref","HTMLTimeElement","machineReadableDate","forwardRef","formatDate","formatTime","formatWeekdayDate","formatRelativeDateTime","formatRelativeToCurrentWeekDateTime","dayjs","utcPlugin","extend","template","utc","relativeTime","calendarPlugin","baseDate","Date","from","isToday","isSame","calendar","sameElse","RelativeDateTimeInternalProps","isRelativeToCurrentWeek","_RelativeDateTime","now","referenceDate","dayjsDate","relativeDate"],"version":3,"file":"module.js.map"}
package/dist/types.d.ts CHANGED
File without changes
package/dist/types.d.ts.map CHANGED
File without changes
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@contentful/f36-datetime",
3
- "version": "4.0.1-beta.2590+bfd9a9a5",
3
+ "version": "4.0.1-beta.2705+752a0cc0",
4
4
  "description": "Forma 36: DateTime component",
5
5
  "scripts": {
6
6
  "build": "parcel build"
7
7
  },
8
8
  "dependencies": {
9
9
  "@babel/runtime": "^7.6.2",
10
- "@contentful/f36-core": "4.0.1-beta.2590+bfd9a9a5",
11
- "@contentful/f36-tokens": "4.0.1-beta.2590+bfd9a9a5",
10
+ "@contentful/f36-core": "4.0.1-beta.2705+752a0cc0",
11
+ "@contentful/f36-tokens": "4.0.1-beta.2705+752a0cc0",
12
12
  "dayjs": "^1.10.6",
13
13
  "emotion": "^10.0.17"
14
14
  },
@@ -32,5 +32,5 @@
32
32
  "publishConfig": {
33
33
  "access": "public"
34
34
  },
35
- "gitHead": "bfd9a9a5affcb943abbc97639ebae3abc67844fd"
35
+ "gitHead": "752a0cc09fdc3b90aa349ca973d0a1f73b03650a"
36
36
  }