#65 Improve IntlProvider independence for date inputs

libs/date/src/DateInput.tsx

@@ -195,7 +195,7 @@ export default function DateInput({
 }: DateInputProps) {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const datePickerRef = React.useRef<HTMLDivElement>(null);
-  const { lang } = useIntlContext();
+  const lang = useIntlContext(true)?.lang;
 
   const finalDateFormat = dateFormat?.replace(/m/g, "M") || getDateFormatByLang(lang);
   const formattedValue = value ? dateFns.format(value, finalDateFormat) : "";
@@ -314,7 +314,8 @@ function DateInputInput({
   dateFormat,
   ...props
 }: DateInputInputProps) {
-  const { lang } = useIntlContext();
+  const lang = useIntlContext(true)?.lang;
+
   const tokens = useTokens("DateInput", props.tokens);
 
   const dateIconClassName = cx({ [tokens.DatePicker.range.iconColor]: !(props.disabled || props.readOnly) });

libs/date/src/DatePicker.tsx

@@ -17,9 +17,10 @@
 
 import * as React from "react";
 
+import * as dateFns from "date-fns";
 import { useDatepicker, useDay, useMonth, UseMonthProps } from "@datepicker-react/hooks";
-import { useIntl } from "react-intl";
 
+import { useIntlContext } from "@tiller-ds/intl";
 import { cx, TokenProps, useIcon, useTokens } from "@tiller-ds/theme";
 
 type DatePickerProps = {
@@ -354,13 +355,14 @@ function YearsPickerContainer({ ...props }) {
 
 function MonthPickerLabels({ month, year, ...props }: MonthPickerLabelsProps) {
   const tokens = useTokens("DateInput", props.tokens);
-  const intl = useIntl();
+  const intlContext = useIntlContext();
   const { onDayPickerToggle, dayPicker, onActiveMonthToggle } = useDatePickerContext();
 
   const { monthLabel } = useMonth({
     year,
     month,
-    monthLabelFormat: (date: Date) => intl.formatDate(date, { month: "long" }),
+    monthLabelFormat: (date: Date) =>
+      intlContext?.intl.formatDate(date, { month: "long" }) || dateFns.format(date, "MMMM"),
   });
 
   const onChevronDownClick = () => {
@@ -396,14 +398,16 @@ function MonthPickerLabels({ month, year, ...props }: MonthPickerLabelsProps) {
 }
 
 function MonthPicker({ year, month, firstDayOfWeek }: MonthPickerProps) {
-  const intl = useIntl();
+  const intlContext = useIntlContext();
 
   const { days, weekdayLabels } = useMonth({
     year,
     month,
     firstDayOfWeek,
-    monthLabelFormat: (date: Date) => intl.formatDate(date, { month: "long" }),
-    weekdayLabelFormat: (date: Date) => intl.formatDate(date, { weekday: "short" }),
+    monthLabelFormat: (date: Date) =>
+      intlContext?.intl.formatDate(date, { month: "long" }) || dateFns.format(date, "MMMM"),
+    weekdayLabelFormat: (date: Date) =>
+      intlContext?.intl.formatDate(date, { weekday: "short" }) || dateFns.format(date, "EEEEEE"),
   });
 
   return (

libs/date/src/DateRangeInput.tsx

@@ -209,7 +209,7 @@ export default function DateRangeInput({
   highlightToday,
   ...props
 }: DateRangeInputProps) {
-  const { lang } = useIntlContext();
+  const lang = useIntlContext(true)?.lang;
 
   const finalDateFormat = dateFormat?.replace(/m/g, "M") || getDateFormatByLang(lang);
   const formattedStart = start ? dateFns.format(start, finalDateFormat) : "";
@@ -427,7 +427,7 @@ function DateRangeInputInput({
   dateFormat,
   ...props
 }: DateRangeInputInputProps) {
-  const { lang } = useIntlContext();
+  const lang = useIntlContext(true)?.lang;
 
   const tokens = useTokens("DateInput", props.tokens);
   const dateIconClassName = cx({ [tokens.DatePicker.range.iconColor]: !(props.disabled || props.readOnly) });

libs/date/src/DateTimeInput.tsx

@@ -179,7 +179,7 @@ export default function DateTimeInput({
   highlightToday,
   ...props
 }: DateTimeInputProps & DateTimeInputTokens) {
-  const { lang } = useIntlContext();
+  const lang = useIntlContext(true)?.lang;
 
   const dateTimePickerTokens = useTokens("DateTimePicker", props.dateTimePickerTokens);
   const dateTimeInputTokens = useTokens("DateTimeInput", props.dateTimeInputTokens);

libs/date/src/TimeInput.tsx

@@ -21,7 +21,6 @@ import Popover, { positionMatchWidth } from "@reach/popover";
 
 import { IconButton } from "@tiller-ds/core";
 import { defaultPlaceholderChar, InputProps, MaskedInput } from "@tiller-ds/form-elements";
-import { useIntlContext } from "@tiller-ds/intl";
 import { ComponentTokens, cx, useIcon, useTokens } from "@tiller-ds/theme";
 
 import TimePicker, { ClockType, TimePickerProps } from "./TimePicker";
@@ -148,8 +147,6 @@ export default function TimeInput({
   showMaskOnEmpty,
   ...props
 }: TimeInputProps & TimeInputTokens) {
-  const { lang } = useIntlContext();
-
   const isTwelveHours = type === "use12Hours";
   const timeInputTokens = useTokens("TimeInput", props.timeInputTokens);
   const inputTokens = useTokens("Input", props.inputTokens);

storybook/src/date/DateInput.mdx

@@ -10,16 +10,21 @@ The `Date Input` allows users to enter a date either through text input or by ch
 In case you have `DateInput` field on the right side of your form, use prop `popoverPosition="right"` to position calendar to the right.
 
 The component accepts the following types for **value** prop:
-  - null
-  - Date type - example: _new Date()_, example 2: _new Date("2019-01-20")_
+
+- null
+- Date type - example: _new Date()_, example 2: _new Date("2019-01-20")_
+
+**Note**: if using the component without the `IntlProvider` wrapper the date format defaults to _en_ if not specified,
+otherwise the format is determined by the `dateFormat` prop.
 
 For integration with Formik see docs [here](/docs/component-library-formik-elements-dateinputfield--with-label#dateinputfield).
 
 Props are described on the [Date Input Props section](/docs/component-library-date-dateinput--disabled#date-input-props)
 of the documentation.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
+## **Recommended for optimal usage**:
+
+- Intl Provider (details [here](/docs/component-library-intl-intl--basic))
 
 <Stories includePrimary={true} />
 
@@ -28,4 +33,5 @@ of the documentation.
 <ArgsTable of={DateInput} />
 
 ## Date Input Tokens:
-<ThemeTokens component="DateInput"/>
+
+<ThemeTokens component="DateInput" />

storybook/src/date/DateRangeInput.mdx

@@ -7,17 +7,22 @@ import { DateRangeInput } from "@tiller-ds/date";
 The `Date Range Input` lets the user select a range of dates from a popup calendar display or type in an arbitrary range.
 
 The component accepts the following as initial values for **start** and **end** accessor name props:
-  - null
-  - undefined
-  - Date type - example: _new Date()_, example 2: _new Date("2023-01-20")_
+
+- null
+- undefined
+- Date type - example: _new Date()_, example 2: _new Date("2023-01-20")_
+
+**Note**: if using the component without the `IntlProvider` wrapper the date format defaults to _en_ if not specified,
+otherwise the format is determined by the `dateFormat` prop.
 
 For integration with Formik see docs [here](/docs/component-library-formik-elements-daterangeinputfield--with-label#daterangeinputfield).
 
 Props are described on the [Date Range Input Props section](/docs/component-library-date-daterangeinput--disabled#date-range-input-props)
 of the documentation.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
+## **Recommended for optimal usage**:
+
+- Intl Provider (details [here](/docs/component-library-intl-intl--basic))
 
 <Stories includePrimary={true} />
 

storybook/src/date/DateTimeInput.mdx

@@ -14,12 +14,15 @@ The component accepts the following types for **value** prop:
 
 There are 4 steps available (year, date, hour and minute), so tabs are required to visually distinguish date/time steps.
 
+**Note**: if using the component without the `IntlProvider` wrapper the date format defaults to _en_ if not specified,
+otherwise the format is determined by the `dateFormat` prop.
+
 For integration with Formik see docs [here](/docs/component-library-formik-elements-datetimeinputfield--with-label#datetimeinputfield).
 
 Props are described on the [Date Time Input Props section](/docs/component-library-date-datetimeinput--disabled#date-time-input-props)
 of the documentation.
 
-## **Prerequisites for functioning**:
+## **Recommended for optimal usage**:
 
 - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
 

storybook/src/date/TimeInput.mdx

@@ -22,10 +22,6 @@ For integration with Formik see docs [here](/docs/component-library-formik-eleme
 Props are described on the [Time Input Props section](/docs/component-library-date-timeinput--disabled#time-input-props)
 of the documentation.
 
-## **Prerequisites for functioning**:
-
-- Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 <Stories includePrimary={true} />
 
 ## Time Input Props:

storybook/src/formik-elements/DateInputField.mdx

@@ -11,19 +11,24 @@ The `Date Input Field` component allows users to enter a date either through tex
 In case you have `DateInput` field on the right side of your form, use prop `popoverPosition="right"` to position calendar to the right.
 
 The component accepts the following types as initial values for **name** accessor prop:
-  - null
-  - undefined
-  - Date type - example: _new Date()_, example 2: _new Date("2023-01-20")_
-  - string type in format 'yyyy-mm-dd' - example: _"2024-01-01"_, example 2: _"2023-06-21"_
+
+- null
+- undefined
+- Date type - example: _new Date()_, example 2: _new Date("2023-01-20")_
+- string type in format 'yyyy-mm-dd' - example: _"2024-01-01"_, example 2: _"2023-06-21"_
+
+**Note**: if using the component without the `IntlProvider` wrapper the date format defaults to _en_ if not specified,
+otherwise the format is determined by the `dateFormat` prop.
 
 This is a **field** component, which means it is differs from [Date Input](/docs/component-library-date-dateinput--with-state#dateinput) by having an integrated logic for `onChange`, `onBlur` and `onReset`
 functions which `Date Input` possesses using Formik. There is no need for any custom logic, just wrap the component inside Formik for easier form creation.
 
 Props are described on the [Date Input Field Props section](/docs/component-library-formik-elements-dateinputfield--disabled#date-input-field-props)
 of the documentation.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
+## **Recommended for optimal usage**:
+
+- Intl Provider (details [here](/docs/component-library-intl-intl--basic))
 
 <Stories includePrimary={true} />
 
@@ -36,4 +41,5 @@ of the documentation.
 <ArgsTable of={DateInput} />
 
 ## Date Input Tokens:
-<ThemeTokens component="DateInput"/>
+
+<ThemeTokens component="DateInput" />

storybook/src/formik-elements/DateRangeInputField.mdx

@@ -8,21 +8,26 @@ import { ThemeTokens } from "../utils";
 `Date Range Input Field` allows users to choose a starting and an ending date from a popup calendar display or type in an arbitrary range.
 
 The component accepts the following as initial values for **start** and **end** accessor name props:
-  - null
-  - undefined
-  - empty string or a string in a '_yyyy-mm-dd_' format
-  - type Date - example: _new Date()_, example 2: _new Date("2023-01-20")_
+
+- null
+- undefined
+- empty string or a string in a '_yyyy-mm-dd_' format
+- type Date - example: _new Date()_, example 2: _new Date("2023-01-20")_
 
 If a string value is given, the component itself makes sure to convert the string into a Date format.
 
+**Note**: if using the component without the `IntlProvider` wrapper the date format defaults to _en_ if not specified,
+otherwise the format is determined by the `dateFormat` prop.
+
 This is a **field** component, which means it is differs from [Date Range Input](/docs/component-library-date-daterangeinput--with-state#date-range-input)
 by having a provided logic for seamless wrapping of the component inside Formik for easier form creation.
 
 Props are described on the [Date Range Input Field Props section](/docs/component-library-formik-elements-daterangeinputfield--disabled#date-range-input-field-props)
 of the documentation.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
+## **Recommended for optimal usage**:
+
+- Intl Provider (details [here](/docs/component-library-intl-intl--basic))
 
 <Stories includePrimary={true} />
 
@@ -31,4 +36,5 @@ of the documentation.
 <ArgsTable of={DateRangeInputField} />
 
 ## Date Input Tokens:
-<ThemeTokens component="DateInput"/>
+
+<ThemeTokens component="DateInput" />

storybook/src/formik-elements/DateTimeInputField.mdx

@@ -15,13 +15,16 @@ The component accepts the following types for **value** prop:
 
 There are 4 steps available (year, date, hour and minute), so tabs are required to visually distinguish date/time steps.
 
+**Note**: if using the component without the `IntlProvider` wrapper the date format defaults to _en_ if not specified,
+otherwise the format is determined by the `dateFormat` prop.
+
 This is a **field** component, which means it is differs from [Date Time Input](/docs/component-library-date-datetimeinput--with-state#datetimeinput) by having an integrated logic for `onChange`, `onBlur` and `onReset`
 functions which `Date Input` possesses using Formik. There is no need for any custom logic, just wrap the component inside Formik for easier form creation.
 
 Props are described on the [Date Time Input Field Props section](/docs/component-library-formik-elements-datetimeinputfield--disabled#date-time-input-field-props)
 of the documentation.
 
-## **Prerequisites for functioning**:
+## **Recommended for optimal usage**:
 
 - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
 

storybook/src/formik-elements/TimeInputField.mdx

@@ -20,10 +20,6 @@ There is no need for any custom logic, just wrap the component inside Formik for
 Props are described on the [Time Input Field Props section](/docs/component-library-formik-elements-timeinputfield--disabled#time-input-field-props)
 of the documentation.
 
-## **Prerequisites for functioning**:
-
-- Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 <Stories includePrimary={true} />
 
 ## Time Input Field Props: