From 69a430de3acbd663d35a8f85503fd61154fcd258 Mon Sep 17 00:00:00 2001 From: Felix Beceic Date: Wed, 8 Mar 2023 18:25:52 +0100 Subject: [PATCH] #65 Improve IntlProvider independence for date inputs --- libs/date/src/DateInput.tsx | 5 +++-- libs/date/src/DatePicker.tsx | 16 +++++++++------ libs/date/src/DateRangeInput.tsx | 4 ++-- libs/date/src/DateTimeInput.tsx | 2 +- libs/date/src/TimeInput.tsx | 3 --- storybook/src/date/DateInput.mdx | 16 ++++++++++----- storybook/src/date/DateRangeInput.mdx | 15 +++++++++----- storybook/src/date/DateTimeInput.mdx | 5 ++++- storybook/src/date/TimeInput.mdx | 4 ---- .../src/formik-elements/DateInputField.mdx | 20 ++++++++++++------- .../formik-elements/DateRangeInputField.mdx | 20 ++++++++++++------- .../formik-elements/DateTimeInputField.mdx | 5 ++++- .../src/formik-elements/TimeInputField.mdx | 4 ---- 13 files changed, 71 insertions(+), 48 deletions(-) diff --git a/libs/date/src/DateInput.tsx b/libs/date/src/DateInput.tsx index fe27a9d..5884c96 100644 --- a/libs/date/src/DateInput.tsx +++ b/libs/date/src/DateInput.tsx @@ -195,7 +195,7 @@ export default function DateInput({ }: DateInputProps) { const inputRef = React.useRef(null); const datePickerRef = React.useRef(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) }); diff --git a/libs/date/src/DatePicker.tsx b/libs/date/src/DatePicker.tsx index 1faa6d3..dde00ae 100644 --- a/libs/date/src/DatePicker.tsx +++ b/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 ( diff --git a/libs/date/src/DateRangeInput.tsx b/libs/date/src/DateRangeInput.tsx index 989854c..4a73eca 100644 --- a/libs/date/src/DateRangeInput.tsx +++ b/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) }); diff --git a/libs/date/src/DateTimeInput.tsx b/libs/date/src/DateTimeInput.tsx index 20d2b37..b691518 100644 --- a/libs/date/src/DateTimeInput.tsx +++ b/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); diff --git a/libs/date/src/TimeInput.tsx b/libs/date/src/TimeInput.tsx index 9f81548..71f422f 100644 --- a/libs/date/src/TimeInput.tsx +++ b/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); diff --git a/storybook/src/date/DateInput.mdx b/storybook/src/date/DateInput.mdx index 990afd7..141bf01 100644 --- a/storybook/src/date/DateInput.mdx +++ b/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)) @@ -28,4 +33,5 @@ of the documentation. ## Date Input Tokens: - + + diff --git a/storybook/src/date/DateRangeInput.mdx b/storybook/src/date/DateRangeInput.mdx index bf540f4..b8937fb 100644 --- a/storybook/src/date/DateRangeInput.mdx +++ b/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)) diff --git a/storybook/src/date/DateTimeInput.mdx b/storybook/src/date/DateTimeInput.mdx index 0ded949..2b78a58 100644 --- a/storybook/src/date/DateTimeInput.mdx +++ b/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)) diff --git a/storybook/src/date/TimeInput.mdx b/storybook/src/date/TimeInput.mdx index a56ed8c..7a96d1b 100644 --- a/storybook/src/date/TimeInput.mdx +++ b/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)) - ## Time Input Props: diff --git a/storybook/src/formik-elements/DateInputField.mdx b/storybook/src/formik-elements/DateInputField.mdx index 3458f48..34c285e 100644 --- a/storybook/src/formik-elements/DateInputField.mdx +++ b/storybook/src/formik-elements/DateInputField.mdx @@ -11,10 +11,14 @@ 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. @@ -22,8 +26,9 @@ functions which `Date Input` possesses using Formik. There is no need for any cu 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)) @@ -36,4 +41,5 @@ of the documentation. ## Date Input Tokens: - + + diff --git a/storybook/src/formik-elements/DateRangeInputField.mdx b/storybook/src/formik-elements/DateRangeInputField.mdx index 4266e4f..78f9bc4 100644 --- a/storybook/src/formik-elements/DateRangeInputField.mdx +++ b/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)) @@ -31,4 +36,5 @@ of the documentation. ## Date Input Tokens: - + + diff --git a/storybook/src/formik-elements/DateTimeInputField.mdx b/storybook/src/formik-elements/DateTimeInputField.mdx index 609494e..d2b2450 100644 --- a/storybook/src/formik-elements/DateTimeInputField.mdx +++ b/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)) diff --git a/storybook/src/formik-elements/TimeInputField.mdx b/storybook/src/formik-elements/TimeInputField.mdx index 087d220..f4f2971 100644 --- a/storybook/src/formik-elements/TimeInputField.mdx +++ b/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)) - ## Time Input Field Props: