@transferwise/components 0.0.0-experimental-ff4fa52 → 0.0.0-experimental-1413ac0

package/src/dateInput/{DateInput.tsx → DateInput.js}

@@ -1,14 +1,9 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import {
-  Input,
-  SelectInput,
-  SelectInputProps,
-  SelectInputOptionItem,
-  SelectInputOptionContent,
-} from '..';
+import { Input, SelectInput, SelectInputOptionContent } from '..';
 import { Size, DateMode, MonthFormat } from '../common';
 import { getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
 
@@ -16,79 +11,44 @@ import messages from './DateInput.messages';
 import { explodeDate, convertToLocalMidnight } from './utils';
 
 const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
-const INITIAL_DEFAULT_STATE: ExplodedDate = { year: null, month: null, day: null };
-
-export interface ExplodedDate {
-  year: number | null;
-  month: number | null;
-  day: number | null;
-}
-
-export interface DateInputProps {
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  disabled?: boolean;
-  size?: Size.SMALL | Size.MEDIUM | Size.LARGE;
-  value?: Date | string | null;
-  onChange: (value: string | null) => void;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  dayLabel?: string;
-  dayAutoComplete?: string;
-  monthLabel?: string;
-  yearLabel?: string;
-  yearAutoComplete?: string;
-  monthFormat?: MonthFormat;
-  mode?: DateMode;
-  placeholders?: {
-    day?: string;
-    month?: string;
-    year?: string;
-  };
-  id?: string;
-  selectProps?: Partial<SelectInputProps<number>>;
-}
+const INITIAL_DEFAULT_STATE = { year: null, month: null, day: null };
 
 const DateInput = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
-  disabled = false,
-  size = Size.MEDIUM,
-  value = null,
+  disabled,
+  size,
+  value,
   dayLabel,
   dayAutoComplete,
   monthLabel,
   yearLabel,
   yearAutoComplete,
-  monthFormat = MonthFormat.LONG,
-  mode = DateMode.DAY_MONTH_YEAR,
+  monthFormat,
+  mode,
   onChange,
   onFocus,
-  onBlur = undefined,
+  onBlur,
   placeholders,
-  id = '',
+  id,
   selectProps,
-}: DateInputProps) => {
+}) => {
   const { locale, formatMessage } = useIntl();
-
-  const getDateObject = (): Date | null => {
+  const getDateObject = () => {
     if (value && isDateValid(value)) {
       return typeof value === 'string' ? convertToLocalMidnight(value) : value;
     }
     return null;
   };
 
-  const getExplodedDate = (unit: 'year' | 'month' | 'day'): number | null => {
-    let explodedDate: ExplodedDate = INITIAL_DEFAULT_STATE;
+  const getExplodedDate = (unit) => {
+    let explodedDate = INITIAL_DEFAULT_STATE;
 
     if (value && isDateValid(value)) {
       const dateObject = getDateObject();
+      explodedDate = explodeDate(dateObject);
 
-      if (dateObject !== null) {
-        explodedDate = explodeDate(dateObject);
-      }
-
-      if (typeof value === 'string' && isMonthAndYearFormat(value)) {
+      if (isMonthAndYearFormat(value)) {
         explodedDate.day = null;
       }
     }
@@ -96,11 +56,9 @@ const DateInput = ({
   };
 
   const [day, setDay] = useState(() => getExplodedDate('day'));
-  const [month, setMonth] = useState<number | null>(() => getExplodedDate('month'));
+  const [month, setMonth] = useState(() => getExplodedDate('month'));
   const [year, setYear] = useState(() => getExplodedDate('year'));
-  const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date | ExplodedDate | null>(
-    getDateObject,
-  );
+  const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
 
   dayLabel = dayLabel || formatMessage(messages.dayLabel);
   monthLabel = monthLabel || formatMessage(messages.monthLabel);
@@ -111,8 +69,8 @@ const DateInput = ({
     year: placeholders?.year || formatMessage(messages.yearPlaceholder),
   };
 
-  const getDateAsString = (date: Date | null) => {
-    if (date === null || !isDateValid(date)) {
+  const getDateAsString = (date) => {
+    if (!isDateValid(date)) {
       return '';
     }
     switch (mode) {
@@ -137,13 +95,11 @@ const DateInput = ({
         <SelectInput
           name="month"
           disabled={disabled}
-          placeholder={placeholders?.month}
+          placeholder={placeholders.month}
           items={monthOptions}
           size={size}
-          value={monthOptions.find((item) => item.value === month)?.value}
-          renderValue={(selectedValue) => (
-            <SelectInputOptionContent title={getMonthNames(locale, monthFormat)[selectedValue]} />
-          )}
+          value={monthOptions.find((item) => item.value.value === month)?.value}
+          renderValue={({ label }) => <SelectInputOptionContent title={label} />}
           onChange={(selectedValue) => handleMonthChange(selectedValue)}
           {...selectProps}
         />
@@ -152,19 +108,16 @@ const DateInput = ({
   };
 
   const getMonthsOptions = () => {
-    const options: SelectInputOptionItem<number>[] = [];
+    const options = [];
+    const months = getMonthNames(locale, monthFormat);
 
-    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].forEach((index) => {
-      options.push({ type: 'option', value: index });
+    months.forEach((label, index) => {
+      options.push({ type: 'option', value: { label, value: index } });
     });
     return options;
   };
 
-  const handleInternalValue = (
-    newDay: number | null = day,
-    newMonth: number | null = month,
-    newYear: number | null = year,
-  ) => {
+  const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
     const dateValue =
       newDay != null && newMonth != null && newYear != null
         ? new Date(newYear, newMonth, newDay)
@@ -177,12 +130,11 @@ const DateInput = ({
     }
 
     if (mode === DateMode.MONTH_YEAR) {
-      if (newMonth && newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
+      if (newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
         broadcastNewValue(newValue);
       }
     } else if (
       newDay &&
-      newMonth !== null &&
       newMonth >= 0 &&
       newYear &&
       (newDay !== day || newMonth !== month || newYear !== year)
@@ -191,75 +143,70 @@ const DateInput = ({
     }
   };
 
-  const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checkedDay } = checkDate(parseInt(event.target.value), month, year);
+  const handleDayChange = (event) => {
+    const { checkedDay } = checkDate(event.target.value, month, year);
     setDay(checkedDay);
     handleInternalValue(checkedDay, month, year);
   };
 
-  const handleMonthChange = (selectedValue: number) => {
-    if (selectedValue === null) {
+  const handleMonthChange = (selectedValue) => {
+    if (!selectedValue) {
       setMonth(null);
       handleInternalValue(day, null, year);
       return;
     }
-    const selectedMonth = selectedValue ? selectedValue : 0;
+    const selectedMonth = selectedValue ? selectedValue.value : 0;
     const { checkedDay } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day && checkedDay !== day) {
-      setDay(checkedDay);
+    if (day) {
+      if (checkedDay !== day) {
+        setDay(checkedDay);
+      }
     }
     handleInternalValue(checkedDay, selectedMonth, year);
   };
 
-  const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleYearChange = (event) => {
     const newValue = event.target.value;
     const slicedYear = newValue.length > 4 ? newValue.slice(0, 4) : newValue;
 
     if (slicedYear.toString().length === 4) {
       // Correct day based on year and month.
-      const { checkedDay } = checkDate(day, month, parseInt(newValue));
+      const { checkedDay } = checkDate(day, month, newValue);
 
-      if (day && checkedDay !== day) {
-        setDay(checkedDay);
+      if (day) {
+        if (checkedDay !== day) {
+          setDay(checkedDay);
+        }
       }
-
-      setYear(parseInt(slicedYear));
-      handleInternalValue(checkedDay, month, parseInt(slicedYear));
+      setYear(slicedYear);
+      handleInternalValue(checkedDay, month, slicedYear);
     } else {
-      setYear(parseInt(slicedYear));
+      setYear(slicedYear);
       handleInternalValue(day, month, null);
     }
   };
 
-  const broadcastNewValue = (newValue: Date | ExplodedDate | null) => {
+  const broadcastNewValue = (newValue) => {
     if (newValue !== lastBroadcastedValue) {
       setLastBroadcastedValue(newValue);
-      if (newValue === INITIAL_DEFAULT_STATE) {
-        onChange(null);
-      } else {
-        onChange(getDateAsString(newValue as Date) || null);
-      }
+      onChange(getDateAsString(newValue) || null);
     }
   };
 
-  const checkDate = (
-    newDay: number | null = null,
-    newMonth: number | null = 0,
-    newYear: number | null = null,
-  ) => {
+  const checkDate = (newDay = null, newMonth = 0, newYear = null) => {
     let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth ? newMonth + 1 : 1, 0).getDate();
+    const maxDay = new Date(newYear || 2000, newMonth + 1, 0).getDate();
 
     if (!newDay) {
       checkedDay = null;
     }
 
-    if (newDay && newDay < 0) {
+    if ((newDay && newDay < 0) || newDay === '00') {
       checkedDay = 1;
     }
 
-    if ((newDay && newMonth) || (newDay && newDay > 31)) {
+    if ((newDay && newMonth) || newDay > 31) {
       checkedDay = newDay > maxDay ? maxDay : newDay;
     }
 
@@ -281,12 +228,11 @@ const DateInput = ({
       id={id}
       aria-labelledby={ariaLabelledBy}
       aria-label={ariaLabel}
-      role="group" // Add role attribute to indicate container for interactive elements
-      onFocus={(event: React.FocusEvent<HTMLInputElement>) =>
-        shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()
+      onFocus={(event) =>
+        shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation()
       }
-      onBlur={(event: React.FocusEvent<HTMLInputElement>) =>
-        shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()
+      onBlur={(event) =>
+        shouldPropagateOnBlur(event) ? onBlur && onBlur() : event.stopPropagation()
       }
     >
       <div className="row">
@@ -336,20 +282,14 @@ const DateInput = ({
 };
 
 // Should only propagate if the relatedTarget is not part of this DateInput component.
-function shouldPropagateOnFocus({
-  target,
-  relatedTarget,
-}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {
+function shouldPropagateOnFocus({ target, relatedTarget }) {
   const targetParent = target.closest('.tw-date');
   const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');
   return targetParent !== relatedParent;
 }
 
 // Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
-function shouldPropagateOnBlur({
-  target,
-  relatedTarget,
-}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {
+function shouldPropagateOnBlur({ target, relatedTarget }) {
   const blurElementParent = target.closest('.tw-date');
   // Even though FocusEvent.relatedTarget is supported by IE
   // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
@@ -363,4 +303,41 @@ function shouldPropagateOnBlur({
   return blurElementParent !== focusElementParent;
 }
 
+DateInput.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  dayLabel: PropTypes.string,
+  dayAutoComplete: PropTypes.string,
+  monthLabel: PropTypes.string,
+  yearLabel: PropTypes.string,
+  yearAutoComplete: PropTypes.string,
+  monthFormat: PropTypes.oneOf(['long', 'short']),
+  mode: PropTypes.oneOf(['day-month-year', 'month-year']),
+  placeholders: PropTypes.shape({
+    day: PropTypes.node,
+    month: PropTypes.node,
+    year: PropTypes.node,
+  }),
+  id: PropTypes.string,
+  selectProps: PropTypes.object,
+};
+
+DateInput.defaultProps = {
+  disabled: false,
+  size: Size.MEDIUM,
+  value: null,
+  onFocus: null,
+  onBlur: null,
+  monthFormat: MonthFormat.LONG,
+  mode: DateMode.DAY_MONTH_YEAR,
+  id: '',
+  selectProps: {},
+};
+
 export default DateInput;

package/src/dateInput/DateInput.spec.js

@@ -4,12 +4,44 @@ import { useIntl } from 'react-intl';
 import { DateInput, Input } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
 
+const MONTHS_FR = [
+  'janvier',
+  'février',
+  'mars',
+  'avril',
+  'mai',
+  'juin',
+  'juillet',
+  'août',
+  'septembre',
+  'octobre',
+  'novembre',
+  'décembre',
+];
+
+const MONTHS_EN = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
 const LOCALES = {
+  fr: 'fr-FR',
   jp: 'ja-JP',
 };
+
 const DEFAULT_LOCALE = 'en-GB';
-const FEBRUARY_INDEX = 1;
-const AUGUST_INDEX = 7;
+
+const FEBRUARY_OPTION = { value: MONTHS_EN[1] };
 
 const DAY_SELECTOR = 'ForwardRef(Input)[name="day"]';
 const MONTH_SELECTOR = 'SelectInput';
@@ -41,6 +73,12 @@ jest.mock('./DateInput.messages', () => ({
 }));
 
 jest.mock('react-intl');
+jest.mock('@transferwise/formatting', () => {
+  return {
+    formatDate: (month, locale) =>
+      locale === LOCALES.fr ? MONTHS_FR[month.getMonth()] : MONTHS_EN[month.getMonth()],
+  };
+});
 
 describe('Date Input Component', () => {
   let selectMonth;
@@ -105,7 +143,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(1);
-        expect(selectMonth.prop('value')).toBe(FEBRUARY_INDEX);
+        expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
         expect(inputYear.prop('value')).toBe(1971);
       });
     });
@@ -119,7 +157,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(22);
-        expect(selectMonth.prop('value')).toBe(AUGUST_INDEX);
+        expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -133,7 +171,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe('');
-        expect(selectMonth.prop('value')).toBe(AUGUST_INDEX);
+        expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -147,7 +185,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(28);
-        expect(selectMonth.prop('value')).toBe(FEBRUARY_INDEX);
+        expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -182,6 +220,17 @@ describe('Date Input Component', () => {
   });
 
   describe('when locale is provided', () => {
+    it('updates selectMonth based on locale', () => {
+      useIntl.mockReturnValue({
+        locale: LOCALES.fr,
+        formatMessage: (message) => message.defaultMessage,
+      });
+      component = shallow(<DateInput {...props} />);
+      selectMonth = component.find(MONTH_SELECTOR);
+
+      expect(selectMonth.props().items[0].value.label).toStrictEqual(MONTHS_FR[0]);
+    });
+
     it('shows day before month if locale not US', () => {
       component = shallow(<DateInput {...props} />);
 

package/src/dateInput/DateInput.story.tsx

@@ -1,32 +1,30 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
-import React from 'react';
 
-import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
+import { DateInput, Info, InlineAlert, Title, Typography } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
-import { DateInputProps } from './DateInput';
-
 export default {
   component: DateInput,
   title: 'Forms/DateInput',
   args: {
     dayLabel: 'Day input',
     dayAutoComplete: 'bday-day',
-    value: null,
     monthLabel: 'Month select',
     yearLabel: 'Year input',
     yearAutoComplete: 'bday-year',
     selectProps: {
-      placeholder: 'Month',
+      buttonProps: {
+        'aria-label': 'Select month',
+      },
     },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;
 
-type Story = StoryObj<DateInputProps>;
+type Story = StoryObj<typeof DateInput>;
 
-export const Basic: StoryObj = {};
+export const Basic: Story = {};
 
 Basic.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
@@ -58,7 +56,7 @@ export const WithLabel: Story = {
           {label}{' '}
           <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
         </div>
-        <DateInput {...args} mode={DateMode.MONTH_YEAR} aria-label={label} />
+        <DateInput {...args} aria-label={label} />
 
         <br />
 

package/src/dateInput/utils/convertToLocalMidnight/{convertToLocalMidnight.ts → convertToLocalMidnight.js}

@@ -1,4 +1,4 @@
-export const convertToLocalMidnight = (date: string) => {
+export const convertToLocalMidnight = (date) => {
   const utcDate = new Date(date.split('T')[0]); // using YYYY-MM-DD creates UTC date
 
   return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());

package/src/dateInput/utils/explodeDate/{explodeDate.ts → explodeDate.js}

@@ -1,6 +1,4 @@
-import { ExplodedDate } from '../../DateInput';
-
-export const explodeDate = (date: Date): ExplodedDate => {
+export const explodeDate = (date) => {
   const year = date.getFullYear();
   const month = date.getMonth();
   const day = date.getDate();

package/src/dateLookup/dayCalendar/table/DayCalendarTable.js

@@ -58,7 +58,6 @@ class DayCalendarTable extends PureComponent {
   isDisabled = (day) => {
     const { min, max, viewMonth, viewYear } = this.props;
     const date = new Date(viewYear, viewMonth, day);
-
     return !isWithinRange(date, min, max);
   };