diff --git a/libs/date/src/Date.tsx b/libs/date/src/Date.tsx index 91fc66e..b1df171 100644 --- a/libs/date/src/Date.tsx +++ b/libs/date/src/Date.tsx @@ -17,16 +17,51 @@ import * as React from "react"; +import * as dateFns from "date-fns"; import { FormattedDate } from "react-intl"; +import { useIntlContext } from "@tiller-ds/intl"; + +import { formatDate } from "./utils"; + export type DateProps = { /** * Data handed to the component in a valid date format. + * + * If using the component **with** IntlProvider you don't need to pass _format_ and _formatTo_ props, the + * format will be inferred from the locale. + * + * If using the component **without** IntlProvider, you must also pass _format_ and _formatTo_ props. + * * Other props come from Intl.DateTimeFormatOptions (https://bit.ly/3urm8s5) */ - children: Date; + children: string; + + /** + * Format of the passed date (e.g. 'dd. MM. yyyy.' or 'MM/dd/yyyy'). + * + * Pass it if you wish to manually convert the date (without the help of Intl). + */ + formatFrom?: string; + + /** + * Format of formatted date (e.g. 'dd. MM. yyyy.' or 'MM/dd/yyyy'). + */ + formatTo?: string; } & Intl.DateTimeFormatOptions; -export default function Date({ children, ...props }: DateProps) { +export default function Date({ children, formatFrom, formatTo, ...props }: DateProps) { + const intl = useIntlContext(); + + if (!intl && !formatFrom && !formatTo) { + throw new Error( + "You must pass format and formatTo props if you are using the Date component without IntlProvider.", + ); + } + + if (formatFrom && formatTo) { + return <>{dateFns.format(formatDate(children, formatFrom) as Date, formatTo)}; + } + return ; } diff --git a/storybook/src/date/Date.mdx b/storybook/src/date/Date.mdx index 961483c..83aa88a 100644 --- a/storybook/src/date/Date.mdx +++ b/storybook/src/date/Date.mdx @@ -4,12 +4,18 @@ import { Date } from "@tiller-ds/date"; # Date -Tiller Date Component uses `FormattedDate` from `react-intl` library. +Converts _children_ to a formatted date. -By default `` will render the formatted number into a React.Fragment. +There are 2 possible usages of this component: -## **Prerequisites for functioning**: - - Intl Provider (details [here](/docs/component-library-intl-intl--basic)) +1. **With IntlProvider**: the component uses `FormattedDate` from `react-intl` library and converts children to + a format inferred by locale. + +2. **Without IntlProvider**: the component uses _formatFrom_ and _formatTo_ props to convert children to a desired format. + +## **Recommended for optimal usage**: + +- Intl Provider (details [here](/docs/component-library-intl-intl--basic)) diff --git a/storybook/src/date/Date.stories.tsx b/storybook/src/date/Date.stories.tsx index 94a7ec2..9aef9a5 100644 --- a/storybook/src/date/Date.stories.tsx +++ b/storybook/src/date/Date.stories.tsx @@ -35,6 +35,10 @@ export default { }, }; -const date = "2020-02-25" as unknown as Date; +export const WithIntl = () => 2020-02-25; -export const Example = () => {date}; +export const WithoutIntl = () => ( + + 2020-02-25 + +);