From b50228e0f9be5c0dac328bebaf9eba2c09e2d0a6 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 13:45:13 +0200 Subject: [PATCH] [react] feat: Added docs for components/Time --- packages/react/components/Time/index.mjs | 51 +++++++++++++++++-- packages/react/mkdocs.sh | 1 + .../react/components/time/_examples.js | 9 ++++ .../packages/react/components/time/readme.mdx | 43 ++++++++++++++-- 4 files changed, 96 insertions(+), 8 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/time/_examples.js diff --git a/packages/react/components/Time/index.mjs b/packages/react/components/Time/index.mjs index 51d23f8c5b9..daa416ee960 100644 --- a/packages/react/components/Time/index.mjs +++ b/packages/react/components/Time/index.mjs @@ -6,12 +6,20 @@ const hour = 3600000 const minute = 60000 const second = 1000 +/** + * A component to render date + time + * + * @component + * @param {object} props - All component props + * @param {string} props.iso - Time in ISO format + * @returns {JSX.Element} + */ export const DateAndTime = ({ iso }) => { const dt = DateTime.fromISO(iso) return dt.toLocaleString(DateTime.DATETIME_MED) } -export const TimeForHumans = ({ iso, future = false }) => { +const TimeForHumans = ({ iso, future = false }) => { const suffix = future ? 'from now' : 'ago' const dates = [DateTime.fromISO(iso), DateTime.now()] if (future) dates.reverse() @@ -36,11 +44,36 @@ export const TimeForHumans = ({ iso, future = false }) => { return `${years} years ${suffix}` } -export const TimeAgo = (props) => -export const TimeToGo = (props) => +/** + * A component to render the time delta between now and a moment in the past. + * + * @component + * @param {object} props - All component props + * @param {string} props.iso - Time in ISO format + * @returns {JSX.Element} + */ +export const TimeAgo = (props) => +/** + * A component to render the time delta between now and a moment in the future. + * + * @component + * @param {object} props - All component props + * @param {string} props.iso - Time in ISO format + * @returns {JSX.Element} + */ +export const TimeToGo = (props) => + +/** + * A component to render the time delta between now and a moment in the past. + * + * @component + * @param {object} props - All component props + * @param {string} props.time - Timestamp in milliseconds + * @returns {JSX.Element} + */ export const TimeAgoBrief = ({ time }) => { - const d = Math.floor(Date.now() - time) + const d = Math.floor(Date.now() - Number(time)) if (d > day) return `${Math.floor(d / day)}d ago` if (d > hour) return `${Math.floor(d / hour)}h ago` if (d > minute * 2) return `${Math.floor(d / minute)}m ago` @@ -48,8 +81,16 @@ export const TimeAgoBrief = ({ time }) => { return `${d}ms ago` } +/** + * A component to render the time delta between now and a moment in the future. + * + * @component + * @param {object} props - All component props + * @param {string} props.time - Timestamp in milliseconds + * @returns {JSX.Element} + */ export const TimeToGoBrief = ({ time }) => { - const d = Math.floor(time * 1000 - Date.now()) + const d = Math.floor(Number(time) - Date.now()) if (d > day) return `${Math.floor(d / day)}d` if (d > hour) return `${Math.floor(d / hour)}h` if (d > minute * 2) return `${Math.floor(d / minute)}m` diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index b5f149ca67e..b059f7d3207 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -38,3 +38,4 @@ jsdoc -c jsdoc.json components/Spinner/* > ../../sites/dev/prebuild/jsdoc/react/ jsdoc -c jsdoc.json components/Stats/* > ../../sites/dev/prebuild/jsdoc/react/components/stats.json jsdoc -c jsdoc.json components/Tab/* > ../../sites/dev/prebuild/jsdoc/react/components/tab.json jsdoc -c jsdoc.json components/Table/* > ../../sites/dev/prebuild/jsdoc/react/components/table.json +jsdoc -c jsdoc.json components/Time/* > ../../sites/dev/prebuild/jsdoc/react/components/time.json diff --git a/sites/dev/docs/reference/packages/react/components/time/_examples.js b/sites/dev/docs/reference/packages/react/components/time/_examples.js new file mode 100644 index 00000000000..7d765b7f445 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/time/_examples.js @@ -0,0 +1,9 @@ +import React from 'react' +import { DateAndTime, TimeAgo, TimeToGo, TimeAgoBrief, TimeToGoBrief } from '@freesewing/react/components/Time' + +export const DateAndTimeExample = () => +export const TimeAgoExample = () => +export const TimeToGoExample = () => +export const TimeAgoBriefExample = () => +export const TimeToGoBriefExample = () => + diff --git a/sites/dev/docs/reference/packages/react/components/time/readme.mdx b/sites/dev/docs/reference/packages/react/components/time/readme.mdx index d8c7f67bd64..2e5b736bfe4 100644 --- a/sites/dev/docs/reference/packages/react/components/time/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/time/readme.mdx @@ -2,6 +2,43 @@ title: Time --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import * as jsdoc from '@site/prebuild/jsdoc/components.time.mjs' +import { TimeToGoExample, TimeAgoExample, TimeToGoBriefExample, TimeAgoBriefExample, DateAndTimeExample } from './_examples.js' + + + +- [Components](#components) + +## Components + +The **Table** component family provides the following components: + +- [DateAndTime](#dateandtime) +- [TimeAgo](#timeago) +- [TimeAgoBrief](#timeagobrief) +- [TimeToGo](#timetogo) +- [TimeToGoBrief](#timetogobrief) + +### DateAndTime + + + +### TimeAgo + + + +### TimeAgoBrief + + + +### TimeToGo + + + +### TimeToGoBrief + + + +