#65 Refactor Date

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 <FormattedDate value={children} {...props} />;
 }

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 `<FormattedDate>` 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))
 
 <Stories includePrimary={true} />
 

storybook/src/date/Date.stories.tsx

@@ -35,6 +35,10 @@ export default {
   },
 };
 
-const date = "2020-02-25" as unknown as Date;
+export const WithIntl = () => <Date>2020-02-25</Date>;
 
-export const Example = () => <Date>{date}</Date>;
+export const WithoutIntl = () => (
+  <Date formatFrom="yyyy-MM-dd" formatTo="MM/dd/yyyy">
+    2020-02-25
+  </Date>
+);