@a-type/ui 2.0.10 → 2.0.11

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 (15) hide show
  1. package/dist/cjs/components/relativeTime/RelativeTime.d.ts +10 -1
  2. package/dist/cjs/components/relativeTime/RelativeTime.js +17 -9
  3. package/dist/cjs/components/relativeTime/RelativeTime.js.map +1 -1
  4. package/dist/cjs/components/relativeTime/RelativeTime.stories.d.ts +19 -0
  5. package/dist/cjs/components/relativeTime/RelativeTime.stories.js +20 -0
  6. package/dist/cjs/components/relativeTime/RelativeTime.stories.js.map +1 -0
  7. package/dist/esm/components/relativeTime/RelativeTime.d.ts +10 -1
  8. package/dist/esm/components/relativeTime/RelativeTime.js +17 -9
  9. package/dist/esm/components/relativeTime/RelativeTime.js.map +1 -1
  10. package/dist/esm/components/relativeTime/RelativeTime.stories.d.ts +19 -0
  11. package/dist/esm/components/relativeTime/RelativeTime.stories.js +17 -0
  12. package/dist/esm/components/relativeTime/RelativeTime.stories.js.map +1 -0
  13. package/package.json +1 -1
  14. package/src/components/relativeTime/RelativeTime.stories.tsx +21 -0
  15. package/src/components/relativeTime/RelativeTime.tsx +32 -9
package/dist/cjs/components/relativeTime/RelativeTime.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  export interface RelativeTimeProps {
2
2
  value: number;
3
3
  abbreviate?: boolean;
4
+ /**
5
+ * Makes it count down seconds for a future date value as it approaches.
6
+ * Does not affect past dates.
7
+ */
8
+ countdownSeconds?: boolean;
9
+ /**
10
+ * Remove "from now" or "ago" from the output.
11
+ */
12
+ disableRelativeText?: boolean;
4
13
  }
5
- export declare function RelativeTime({ value, abbreviate }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function RelativeTime({ value, abbreviate, countdownSeconds, disableRelativeText, }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/components/relativeTime/RelativeTime.js CHANGED
@@ -5,31 +5,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
5
5
  exports.RelativeTime = RelativeTime;
6
6
  const jsx_runtime_1 = require("react/jsx-runtime");
7
7
  const utils_1 = require("@a-type/utils");
8
+ const differenceInMinutes_1 = require("date-fns/differenceInMinutes");
8
9
  const formatDistanceToNowStrict_1 = require("date-fns/formatDistanceToNowStrict");
9
10
  const react_1 = require("react");
10
- function formatDistanceToNow(date) {
11
+ function formatDistanceToNow(date, relativeText = true) {
11
12
  const now = Date.now();
12
13
  if (Math.abs(date.getTime() - now) < 1000) {
13
14
  return 'just now';
14
15
  }
15
16
  return ((0, formatDistanceToNowStrict_1.formatDistanceToNowStrict)(date) +
16
- (date.getTime() < now ? ' ago' : ' from now'));
17
+ (relativeText ? (date.getTime() < now ? ' ago' : ' from now') : ''));
17
18
  }
18
- function RelativeTime({ value, abbreviate }) {
19
+ function RelativeTime({ value, abbreviate, countdownSeconds, disableRelativeText, }) {
19
20
  const asDate = (0, react_1.useMemo)(() => new Date(value), [value]);
20
21
  const [time, setTime] = (0, react_1.useState)(() => abbreviate
21
- ? (0, utils_1.shortenTimeUnits)(formatDistanceToNow(asDate))
22
- : formatDistanceToNow(asDate));
22
+ ? (0, utils_1.shortenTimeUnits)(formatDistanceToNow(asDate, !disableRelativeText))
23
+ : formatDistanceToNow(asDate, !disableRelativeText));
24
+ // increase update rate if the date is less than 1 minute away and in the future
25
+ // (past is ok to just leave ~1 minute)
26
+ const updateRate = countdownSeconds &&
27
+ asDate.getTime() > Date.now() &&
28
+ Math.abs((0, differenceInMinutes_1.differenceInMinutes)(asDate, new Date())) < 1
29
+ ? 1000
30
+ : 60 * 1000;
23
31
  (0, react_1.useEffect)(() => {
24
32
  const update = () => {
25
33
  setTime(abbreviate
26
- ? (0, utils_1.shortenTimeUnits)(formatDistanceToNow(asDate))
27
- : formatDistanceToNow(asDate));
34
+ ? (0, utils_1.shortenTimeUnits)(formatDistanceToNow(asDate, !disableRelativeText))
35
+ : formatDistanceToNow(asDate, !disableRelativeText));
28
36
  };
29
- const interval = setInterval(update, 60 * 1000);
37
+ const interval = setInterval(update, updateRate);
30
38
  update();
31
39
  return () => clearInterval(interval);
32
- }, [asDate, abbreviate]);
40
+ }, [asDate, abbreviate, updateRate, disableRelativeText]);
33
41
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: time });
34
42
  }
35
43
  //# sourceMappingURL=RelativeTime.js.map
package/dist/cjs/components/relativeTime/RelativeTime.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAsBb,oCAsBC;;AA1CD,yCAAiD;AACjD,kFAA+E;AAC/E,iCAAqD;AAOrD,SAAS,mBAAmB,CAAC,IAAU;IACtC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;QAC3C,OAAO,UAAU,CAAC;IACnB,CAAC;IACD,OAAO,CACN,IAAA,qDAAyB,EAAC,IAAI,CAAC;QAC/B,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAC7C,CAAC;AACH,CAAC;AAED,SAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAqB;IACpE,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;gBAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;QACH,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;QAChD,MAAM,EAAE,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,OAAO,2DAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}
1
+ {"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAgCb,oCAmCC;;AAjED,yCAAiD;AACjD,sEAAmE;AACnE,kFAA+E;AAC/E,iCAAqD;AAgBrD,SAAS,mBAAmB,CAAC,IAAU,EAAE,YAAY,GAAG,IAAI;IAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;QAC3C,OAAO,UAAU,CAAC;IACnB,CAAC;IACD,OAAO,CACN,IAAA,qDAAyB,EAAC,IAAI,CAAC;QAC/B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CACnE,CAAC;AACH,CAAC;AAED,SAAgB,YAAY,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,mBAAmB,GACA;IACnB,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CAAC;QACrE,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CACpD,CAAC;IACF,gFAAgF;IAChF,uCAAuC;IACvC,MAAM,UAAU,GACf,gBAAgB;QAChB,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;QAC7B,IAAI,CAAC,GAAG,CAAC,IAAA,yCAAmB,EAAC,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC;QACpD,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC;IAEd,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CAAC;gBACrE,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CACpD,CAAC;QACH,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACjD,MAAM,EAAE,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE1D,OAAO,2DAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}
package/dist/cjs/components/relativeTime/RelativeTime.stories.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import type { StoryObj } from '@storybook/react';
2
+ import { RelativeTime } from './RelativeTime.js';
3
+ declare const meta: {
4
+ title: string;
5
+ component: typeof RelativeTime;
6
+ argTypes: {};
7
+ args: {
8
+ value: number;
9
+ abbreviate: false;
10
+ };
11
+ parameters: {
12
+ controls: {
13
+ expanded: boolean;
14
+ };
15
+ };
16
+ };
17
+ export default meta;
18
+ type Story = StoryObj<typeof RelativeTime>;
19
+ export declare const Default: Story;
package/dist/cjs/components/relativeTime/RelativeTime.stories.js ADDED
@@ -0,0 +1,20 @@
1
+ // @unocss-include
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.Default = void 0;
5
+ const RelativeTime_js_1 = require("./RelativeTime.js");
6
+ const meta = {
7
+ title: 'RelativeTime',
8
+ component: RelativeTime_js_1.RelativeTime,
9
+ argTypes: {},
10
+ args: {
11
+ value: Date.now() + 60 * 1000 * 2,
12
+ abbreviate: false,
13
+ },
14
+ parameters: {
15
+ controls: { expanded: true },
16
+ },
17
+ };
18
+ exports.default = meta;
19
+ exports.Default = {};
20
+ //# sourceMappingURL=RelativeTime.stories.js.map
package/dist/cjs/components/relativeTime/RelativeTime.stories.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RelativeTime.stories.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.stories.tsx"],"names":[],"mappings":";;;AACA,uDAAiD;AAEjD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,8BAAY;IACvB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,GAAG,CAAC;QACjC,UAAU,EAAE,KAAK;KACjB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACmC,CAAC;AAEtC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU,EAAE,CAAC"}
package/dist/esm/components/relativeTime/RelativeTime.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  export interface RelativeTimeProps {
2
2
  value: number;
3
3
  abbreviate?: boolean;
4
+ /**
5
+ * Makes it count down seconds for a future date value as it approaches.
6
+ * Does not affect past dates.
7
+ */
8
+ countdownSeconds?: boolean;
9
+ /**
10
+ * Remove "from now" or "ago" from the output.
11
+ */
12
+ disableRelativeText?: boolean;
4
13
  }
5
- export declare function RelativeTime({ value, abbreviate }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function RelativeTime({ value, abbreviate, countdownSeconds, disableRelativeText, }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
package/dist/esm/components/relativeTime/RelativeTime.js CHANGED
@@ -2,31 +2,39 @@
2
2
  'use client';
3
3
  import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
4
4
  import { shortenTimeUnits } from '@a-type/utils';
5
+ import { differenceInMinutes } from 'date-fns/differenceInMinutes';
5
6
  import { formatDistanceToNowStrict } from 'date-fns/formatDistanceToNowStrict';
6
7
  import { useEffect, useMemo, useState } from 'react';
7
- function formatDistanceToNow(date) {
8
+ function formatDistanceToNow(date, relativeText = true) {
8
9
  const now = Date.now();
9
10
  if (Math.abs(date.getTime() - now) < 1000) {
10
11
  return 'just now';
11
12
  }
12
13
  return (formatDistanceToNowStrict(date) +
13
- (date.getTime() < now ? ' ago' : ' from now'));
14
+ (relativeText ? (date.getTime() < now ? ' ago' : ' from now') : ''));
14
15
  }
15
- export function RelativeTime({ value, abbreviate }) {
16
+ export function RelativeTime({ value, abbreviate, countdownSeconds, disableRelativeText, }) {
16
17
  const asDate = useMemo(() => new Date(value), [value]);
17
18
  const [time, setTime] = useState(() => abbreviate
18
- ? shortenTimeUnits(formatDistanceToNow(asDate))
19
- : formatDistanceToNow(asDate));
19
+ ? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
20
+ : formatDistanceToNow(asDate, !disableRelativeText));
21
+ // increase update rate if the date is less than 1 minute away and in the future
22
+ // (past is ok to just leave ~1 minute)
23
+ const updateRate = countdownSeconds &&
24
+ asDate.getTime() > Date.now() &&
25
+ Math.abs(differenceInMinutes(asDate, new Date())) < 1
26
+ ? 1000
27
+ : 60 * 1000;
20
28
  useEffect(() => {
21
29
  const update = () => {
22
30
  setTime(abbreviate
23
- ? shortenTimeUnits(formatDistanceToNow(asDate))
24
- : formatDistanceToNow(asDate));
31
+ ? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
32
+ : formatDistanceToNow(asDate, !disableRelativeText));
25
33
  };
26
- const interval = setInterval(update, 60 * 1000);
34
+ const interval = setInterval(update, updateRate);
27
35
  update();
28
36
  return () => clearInterval(interval);
29
- }, [asDate, abbreviate]);
37
+ }, [asDate, abbreviate, updateRate, disableRelativeText]);
30
38
  return _jsx(_Fragment, { children: time });
31
39
  }
32
40
  //# sourceMappingURL=RelativeTime.js.map
package/dist/esm/components/relativeTime/RelativeTime.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOrD,SAAS,mBAAmB,CAAC,IAAU;IACtC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;QAC3C,OAAO,UAAU,CAAC;IACnB,CAAC;IACD,OAAO,CACN,yBAAyB,CAAC,IAAI,CAAC;QAC/B,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAC7C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAqB;IACpE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;gBAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;QACH,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;QAChD,MAAM,EAAE,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,OAAO,4BAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}
1
+ {"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAgBrD,SAAS,mBAAmB,CAAC,IAAU,EAAE,YAAY,GAAG,IAAI;IAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;QAC3C,OAAO,UAAU,CAAC;IACnB,CAAC;IACD,OAAO,CACN,yBAAyB,CAAC,IAAI,CAAC;QAC/B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CACnE,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,mBAAmB,GACA;IACnB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CAAC;QACrE,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CACpD,CAAC;IACF,gFAAgF;IAChF,uCAAuC;IACvC,MAAM,UAAU,GACf,gBAAgB;QAChB,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;QAC7B,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC;QACpD,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CAAC;gBACrE,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CACpD,CAAC;QACH,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACjD,MAAM,EAAE,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE1D,OAAO,4BAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}
package/dist/esm/components/relativeTime/RelativeTime.stories.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import type { StoryObj } from '@storybook/react';
2
+ import { RelativeTime } from './RelativeTime.js';
3
+ declare const meta: {
4
+ title: string;
5
+ component: typeof RelativeTime;
6
+ argTypes: {};
7
+ args: {
8
+ value: number;
9
+ abbreviate: false;
10
+ };
11
+ parameters: {
12
+ controls: {
13
+ expanded: boolean;
14
+ };
15
+ };
16
+ };
17
+ export default meta;
18
+ type Story = StoryObj<typeof RelativeTime>;
19
+ export declare const Default: Story;
package/dist/esm/components/relativeTime/RelativeTime.stories.js ADDED
@@ -0,0 +1,17 @@
1
+ // @unocss-include
2
+ import { RelativeTime } from './RelativeTime.js';
3
+ const meta = {
4
+ title: 'RelativeTime',
5
+ component: RelativeTime,
6
+ argTypes: {},
7
+ args: {
8
+ value: Date.now() + 60 * 1000 * 2,
9
+ abbreviate: false,
10
+ },
11
+ parameters: {
12
+ controls: { expanded: true },
13
+ },
14
+ };
15
+ export default meta;
16
+ export const Default = {};
17
+ //# sourceMappingURL=RelativeTime.stories.js.map
package/dist/esm/components/relativeTime/RelativeTime.stories.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RelativeTime.stories.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,GAAG,CAAC;QACjC,UAAU,EAAE,KAAK;KACjB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACmC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "2.0.10",
3
+ "version": "2.0.11",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "/dist",
package/src/components/relativeTime/RelativeTime.stories.tsx ADDED
@@ -0,0 +1,21 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { RelativeTime } from './RelativeTime.js';
3
+
4
+ const meta = {
5
+ title: 'RelativeTime',
6
+ component: RelativeTime,
7
+ argTypes: {},
8
+ args: {
9
+ value: Date.now() + 60 * 1000 * 2,
10
+ abbreviate: false,
11
+ },
12
+ parameters: {
13
+ controls: { expanded: true },
14
+ },
15
+ } satisfies Meta<typeof RelativeTime>;
16
+
17
+ export default meta;
18
+
19
+ type Story = StoryObj<typeof RelativeTime>;
20
+
21
+ export const Default: Story = {};
package/src/components/relativeTime/RelativeTime.tsx CHANGED
@@ -1,45 +1,68 @@
1
1
  'use client';
2
2
 
3
3
  import { shortenTimeUnits } from '@a-type/utils';
4
+ import { differenceInMinutes } from 'date-fns/differenceInMinutes';
4
5
  import { formatDistanceToNowStrict } from 'date-fns/formatDistanceToNowStrict';
5
6
  import { useEffect, useMemo, useState } from 'react';
6
7
 
7
8
  export interface RelativeTimeProps {
8
9
  value: number;
9
10
  abbreviate?: boolean;
11
+ /**
12
+ * Makes it count down seconds for a future date value as it approaches.
13
+ * Does not affect past dates.
14
+ */
15
+ countdownSeconds?: boolean;
16
+ /**
17
+ * Remove "from now" or "ago" from the output.
18
+ */
19
+ disableRelativeText?: boolean;
10
20
  }
11
21
 
12
- function formatDistanceToNow(date: Date) {
22
+ function formatDistanceToNow(date: Date, relativeText = true) {
13
23
  const now = Date.now();
14
24
  if (Math.abs(date.getTime() - now) < 1000) {
15
25
  return 'just now';
16
26
  }
17
27
  return (
18
28
  formatDistanceToNowStrict(date) +
19
- (date.getTime() < now ? ' ago' : ' from now')
29
+ (relativeText ? (date.getTime() < now ? ' ago' : ' from now') : '')
20
30
  );
21
31
  }
22
32
 
23
- export function RelativeTime({ value, abbreviate }: RelativeTimeProps) {
33
+ export function RelativeTime({
34
+ value,
35
+ abbreviate,
36
+ countdownSeconds,
37
+ disableRelativeText,
38
+ }: RelativeTimeProps) {
24
39
  const asDate = useMemo(() => new Date(value), [value]);
25
40
  const [time, setTime] = useState(() =>
26
41
  abbreviate
27
- ? shortenTimeUnits(formatDistanceToNow(asDate))
28
- : formatDistanceToNow(asDate),
42
+ ? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
43
+ : formatDistanceToNow(asDate, !disableRelativeText),
29
44
  );
45
+ // increase update rate if the date is less than 1 minute away and in the future
46
+ // (past is ok to just leave ~1 minute)
47
+ const updateRate =
48
+ countdownSeconds &&
49
+ asDate.getTime() > Date.now() &&
50
+ Math.abs(differenceInMinutes(asDate, new Date())) < 1
51
+ ? 1000
52
+ : 60 * 1000;
30
53
 
31
54
  useEffect(() => {
32
55
  const update = () => {
33
56
  setTime(
34
57
  abbreviate
35
- ? shortenTimeUnits(formatDistanceToNow(asDate))
36
- : formatDistanceToNow(asDate),
58
+ ? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
59
+ : formatDistanceToNow(asDate, !disableRelativeText),
37
60
  );
38
61
  };
39
- const interval = setInterval(update, 60 * 1000);
62
+ const interval = setInterval(update, updateRate);
40
63
  update();
41
64
  return () => clearInterval(interval);
42
- }, [asDate, abbreviate]);
65
+ }, [asDate, abbreviate, updateRate, disableRelativeText]);
43
66
 
44
67
  return <>{time}</>;
45
68
  }