@transferwise/components 0.0.0-experimental-2825d2d → 0.0.0-experimental-1413ac0

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);
   };
 

package/src/decision/Decision.spec.js

@@ -3,16 +3,16 @@ import '@testing-library/jest-dom';
 
 import Avatar from '../avatar';
 import { Breakpoint, Size } from '../common';
-import { render, fireEvent } from '../test-utils';
+import { mockMatchMedia } from '../mocks';
+import { render, fireEvent, screen } from '../test-utils';
 
-import { Presentation, Type } from './decisionEnums';
-
-import Decision from '.';
+import Decision, { DecisionPresentation, DecisionType } from '.';
 
 jest.mock('lodash.throttle', () => jest.fn((fn) => fn));
+mockMatchMedia(jest);
 
 describe('Decision', () => {
-  const props = {
+  const commonProps = {
     options: [
       {
         media: {
@@ -25,112 +25,106 @@ describe('Decision', () => {
         onClick: jest.fn(),
       },
     ],
-    presentation: Presentation.LIST_BLOCK,
-    type: Type.NAVIGATION,
+    presentation: DecisionPresentation.LIST_BLOCK,
+    type: DecisionType.NAVIGATION,
   };
 
+  const initialInnerWidth = window.innerWidth;
   const resetClientWidth = (width) => {
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-      configurable: true,
-      value: width,
-    });
+    window.innerWidth = width;
   };
 
   afterAll(() => {
-    const originalClientWidth = Object.getOwnPropertyDescriptor(
-      HTMLElement.prototype,
-      'clientWidth',
-    );
-
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth);
+    window.innerWidth = initialInnerWidth;
   });
 
-  let container;
   beforeEach(() => {
     resetClientWidth(Breakpoint.EXTRA_SMALL - 1);
   });
 
-  describe(`when presentation is ${Presentation.LIST_BLOCK}`, () => {
-    beforeEach(() => {
-      ({ container } = render(<Decision {...props} />));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK}`, () => {
+    const props = { ...commonProps };
 
     it('renders only Navigation Option before first breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
 
     it('renders only Tile after first breakpoint', () => {
       resetClientWidth(Breakpoint.SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(getNavigationOption()).not.toBeInTheDocument();
-      expect(getTile()).toBeInTheDocument();
-      expect(getTile()).not.toHaveClass('np-tile--small');
+      expect(getNavigationOption(container)).not.toBeInTheDocument();
+      expect(getTile(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toHaveClass('np-tile--small');
     });
   });
 
-  describe(`when presentation is ${Presentation.LIST_BLOCK_GRID}`, () => {
-    beforeEach(() => {
-      ({ container } = render(<Decision {...props} presentation={Presentation.LIST_BLOCK_GRID} />));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK_GRID}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST_BLOCK_GRID };
 
     it('renders only Navigation Option before first breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
 
     it('renders only Tile after first breakpoint', () => {
       resetClientWidth(Breakpoint.SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(getNavigationOption()).not.toBeInTheDocument();
-      expect(getTile()).toBeInTheDocument();
-      expect(getTile()).not.toHaveClass('np-tile--small');
+      expect(getNavigationOption(container)).not.toBeInTheDocument();
+      expect(getTile(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toHaveClass('np-tile--small');
     });
 
     it('renders container as a grid', () => {
       resetClientWidth(Breakpoint.SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
       expect(container.querySelector('.np-decision')).toHaveClass('np-decision--grid');
       expect(container.querySelector('.np-size-swapper')).toHaveClass('flex-wrap');
     });
   });
 
-  describe(`when presentation is ${Presentation.LIST_BLOCK} and size is Small`, () => {
-    beforeEach(() => {
-      ({ container } = render(
-        <Decision {...props} presentation={Presentation.LIST_BLOCK} size={Size.SMALL} />,
-      ));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK} and size is Small`, () => {
+    const props = {
+      ...commonProps,
+      presentation: DecisionPresentation.LIST_BLOCK,
+      size: Size.SMALL,
+    };
 
     it('renders only Navigation Option before breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
 
     it('renders Small Tile after breakpoint', () => {
       resetClientWidth(Breakpoint.EXTRA_SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(getNavigationOption()).not.toBeInTheDocument();
-      expect(getTile()).toBeInTheDocument();
-      expect(getTile()).toHaveClass('np-tile--small');
+      expect(getNavigationOption(container)).not.toBeInTheDocument();
+      expect(getTile(container)).toBeInTheDocument();
+      expect(getTile(container)).toHaveClass('np-tile--small');
     });
   });
 
-  describe(`when presentation is ${Presentation.LIST}`, () => {
-    beforeEach(() => {
-      ({ container } = render(<Decision {...props} presentation={Presentation.LIST} />));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST };
 
     it('renders Navigation Option before breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
   });
 
-  const getNavigationOption = () => container.querySelector('.np-navigation-option');
-  const getTile = () => container.querySelector('.np-tile');
+  const getNavigationOption = (container) => container.querySelector('.np-navigation-option');
+  const getTile = (container) => container.querySelector('.np-tile');
 });

package/src/decision/{Decision.story.js → Decision.story.tsx}

@@ -21,7 +21,7 @@ export const Basic = () => {
   const disabled = boolean('disabled', false);
   const showMediaCircleInList = boolean('showMediaCircleInList', true);
   const isContainerAligned = boolean('isContainerAligned', false);
-  const size = select('size', [Size.MEDIUM, Size.SMALL]);
+  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
     <>
@@ -33,7 +33,7 @@ export const Basic = () => {
             href: '#href1',
             disabled,
             media: {
-              block: <Illustration name="globe" alt="" disableMargin />,
+              block: <Illustration name="globe" alt="" disablePadding />,
               list: (
                 <Avatar size="md" type="initials">
                   HM
@@ -49,7 +49,7 @@ export const Basic = () => {
             disabled,
             href: '#href2',
             media: {
-              block: <Illustration name="confetti" alt="" disableMargin />,
+              block: <Illustration name="confetti" alt="" disablePadding />,
               list: (
                 <Avatar size="md" type="initials">
                   HM
@@ -61,7 +61,7 @@ export const Basic = () => {
           {
             description: "I'm disabled and don't require an onClick or href.",
             media: {
-              block: <Illustration name="briefcase" alt="" disableMargin />,
+              block: <Illustration name="briefcase" alt="" disablePadding />,
               list: (
                 <img
                   src="https://wise.com/public-resources/assets/illustrations/business_account_web_small.svg"
@@ -91,7 +91,7 @@ export const grid = () => {
     DecisionPresentation.LIST_BLOCK_GRID,
   );
   const disabled = boolean('disabled', false);
-  const size = select('size', [Size.MEDIUM, Size.SMALL]);
+  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
     <>

package/src/decision/Decision.tsx

@@ -0,0 +1,136 @@
+import classNames from 'classnames';
+
+import { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';
+import { useScreenSize } from '../common/hooks/useScreenSize';
+import NavigationOption from '../navigationOption';
+import Tile from '../tile';
+
+interface DecisionOption {
+  description?: React.ReactNode;
+  disabled?: boolean;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  media: {
+    block: React.ReactNode;
+    list: React.ReactNode;
+  };
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  title: React.ReactNode;
+}
+
+export enum DecisionPresentation {
+  LIST = 'LIST',
+  LIST_BLOCK = 'LIST_BLOCK',
+  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',
+}
+
+export enum DecisionType {
+  NAVIGATION = 'NAVIGATION',
+}
+
+export interface DecisionProps {
+  /**  A list of elements to be rendered */
+  options: DecisionOption[];
+  /**  Handles the display mode of the component */
+  presentation?: `${DecisionPresentation}`;
+  /** Size currently affects only Tile dimension */
+  size?: SizeSmall | SizeMedium;
+  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */
+  type?: `${DecisionType}`;
+
+  /** Display media in a circle in list presentation */
+  showMediaCircleInList?: boolean;
+
+  /** Sets navigation options to be aligned with the parent container */
+  isContainerAligned?: boolean;
+}
+
+const Decision = ({
+  options,
+  presentation = DecisionPresentation.LIST,
+  size = Size.MEDIUM,
+  type = DecisionType.NAVIGATION,
+  showMediaCircleInList = true,
+  isContainerAligned = false,
+}: DecisionProps) => {
+  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+
+  if (type === DecisionType.NAVIGATION) {
+    const renderedOptions = options.map(
+      ({ title, description, disabled, href, target, media: { list }, onClick }, key) => (
+        <NavigationOption
+          // eslint-disable-next-line react/no-array-index-key
+          key={`nav-${key}`}
+          complex={false}
+          content={description}
+          disabled={disabled}
+          href={href}
+          target={target}
+          media={list}
+          showMediaAtAllSizes
+          showMediaCircle={showMediaCircleInList}
+          isContainerAligned={isContainerAligned}
+          title={title}
+          onClick={onClick}
+        />
+      ),
+    );
+
+    if (
+      presentation === DecisionPresentation.LIST_BLOCK ||
+      presentation === DecisionPresentation.LIST_BLOCK_GRID
+    ) {
+      const isSmall = size === Size.SMALL;
+      const breakpoint = isSmall ? screenXs : screenSm;
+
+      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;
+
+      return (
+        <div
+          className={classNames('np-decision', {
+            'np-decision--small': isSmall,
+            'np-decision--grid': isGrid,
+          })}
+        >
+          <div
+            className={classNames(
+              'np-size-swapper d-flex',
+              breakpoint ? isGrid && 'flex-wrap' : 'flex-column',
+            )}
+          >
+            {breakpoint
+              ? options.map(
+                  (
+                    { description, disabled, href, target, media: { block }, onClick, title },
+                    key,
+                  ) => (
+                    <Tile
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={`tile-${key}`}
+                      className={classNames(`np-decision__tile${isSmall ? '--small' : ''}`, {
+                        'np-decision__tile--fixed-width': isGrid,
+                      })}
+                      description={description}
+                      disabled={disabled}
+                      href={href}
+                      target={target}
+                      media={block}
+                      size={isSmall ? Size.SMALL : Size.MEDIUM}
+                      title={title}
+                      onClick={onClick}
+                    />
+                  ),
+                )
+              : renderedOptions}
+          </div>
+        </div>
+      );
+    }
+    // LIST
+    return <>{renderedOptions}</>;
+  }
+  return null;
+};
+
+export default Decision;

package/src/decision/index.ts

@@ -0,0 +1 @@
+export { default, DecisionPresentation, DecisionType } from './Decision';

package/src/i18n/zh-HK.json

@@ -4,10 +4,10 @@
   "neptune.ClearButton.ariaLabel": "清除",
   "neptune.CloseButton.ariaLabel": "關閉",
   "neptune.DateInput.day.label": "日",
-  "neptune.DateInput.day.placeholder": "日",
+  "neptune.DateInput.day.placeholder": "DD",
   "neptune.DateInput.month.label": "月",
   "neptune.DateInput.year.label": "年",
-  "neptune.DateInput.year.placeholder": "年",
+  "neptune.DateInput.year.placeholder": "YYYY",
   "neptune.DateLookup.day": "日",
   "neptune.DateLookup.goTo20YearView": "切換至20年視圖",
   "neptune.DateLookup.month": "月",

package/src/index.ts

@@ -1,6 +1,7 @@
 /**
  * Types
  */
+export type { DecisionProps } from './decision/Decision';
 export type { InputProps } from './inputs/Input';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputGroupProps } from './inputs/InputGroup';

package/src/promoCard/PromoCard.tsx

@@ -13,7 +13,6 @@ import { usePromoCardContext } from './PromoCardContext';
 import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
 
 export type ReferenceType = React.Ref<HTMLInputElement>;
-export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
 export type RelatedTypes =
   | ''
   | 'alternate'
@@ -98,7 +97,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   rel?: RelatedTypes;
 
   /** Optional prop to to display where the linked URL will show */
-  target?: LinkTarget;
+  target?: React.HTMLAttributeAnchorTarget;
 
   /** Only applies to role="radio" or "checkbox" */
   defaultChecked?: never;

package/src/tile/Tile.js

@@ -65,7 +65,7 @@ Tile.propTypes = {
   className: PropTypes.string,
   description: PropTypes.node,
   disabled: PropTypes.bool,
-  href: PropTypes.string.isRequired,
+  href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   /** Accepts only Avatar and images */
   media: PropTypes.node.isRequired,

package/build/types/decision/decisionEnums.d.ts

@@ -1,9 +0,0 @@
-export declare enum Presentation {
-    LIST = "LIST",
-    LIST_BLOCK = "LIST_BLOCK",
-    LIST_BLOCK_GRID = "LIST_BLOCK_GRID"
-}
-export declare enum Type {
-    NAVIGATION = "NAVIGATION"
-}
-//# sourceMappingURL=decisionEnums.d.ts.map

package/build/types/decision/decisionEnums.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"decisionEnums.d.ts","sourceRoot":"","sources":["../../../src/decision/decisionEnums.ts"],"names":[],"mappings":"AACA,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,eAAe,oBAAoB;CACpC;AAGD,oBAAY,IAAI;IACd,UAAU,eAAe;CAC1B"}

package/build/types/sizeSwapper/SizeSwapper.d.ts

@@ -1,3 +0,0 @@
-export default SizeSwapper;
-declare const SizeSwapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-//# sourceMappingURL=SizeSwapper.d.ts.map

package/build/types/sizeSwapper/SizeSwapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SizeSwapper.d.ts","sourceRoot":"","sources":["../../../src/sizeSwapper/SizeSwapper.js"],"names":[],"mappings":";AASA,yGAqCG"}

package/build/types/sizeSwapper/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./SizeSwapper";
-//# sourceMappingURL=index.d.ts.map

package/build/types/sizeSwapper/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sizeSwapper/index.js"],"names":[],"mappings":""}

package/src/common/dateUtils/isDateValid/isDateValid.ts

@@ -1,13 +0,0 @@
-export const isDateValid = (date: Date | string | null) => {
-  if (date === null) {
-    return false;
-  } else if (date instanceof Date) {
-    return validDateObject(date);
-  } else {
-    return validDateString(date);
-  }
-};
-
-export const validDateString = (dateString: string) => validDateObject(new Date(dateString));
-
-const validDateObject = (dateObject: Date) => !isNaN(dateObject.getTime());