chore: TypeScript migration - Calendar & Date Components

packages/bpk-component-calendar/index.ts

@@ -32,7 +32,6 @@ import composeCalendar from './src/composeCalendar';
 import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes';
 import CustomPropTypes, {
   BpkCalendarGridPropTypes,
-  BpkCalendarDatePropTypes, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 } from './src/custom-proptypes-legacy';
 import * as DateUtils from './src/date-utils';
 import themeAttributes from './src/themeAttributes';
@@ -69,7 +68,7 @@ export {
   BpkCalendarGridWithTransition,
   CustomPropTypes,
   BpkCalendarGridPropTypes,
-  BpkCalendarDatePropTypes,
+  // BpkCalendarDatePropTypes is deprecated - use BpkCalendarDateProps instead
   BpkCalendarDateProps,
   BpkCalendarGridProps,
 };

packages/bpk-component-calendar/src/BpkCalendarNav.tsx

@@ -25,8 +25,7 @@
 import BpkAriaLive from '../../bpk-component-aria-live';
 import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
 import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from '../../bpk-component-select';
 import { cssModules, getDataComponentAttribute } from '../../bpk-react-utils';
 
 import {

packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap

@@ -1,3 +1,4 @@
+
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BpkCalendarContainer should focus the correct date when \`initiallyFocusedDate\` is set and selected date is not 1`] = `

packages/bpk-component-calendar/src/__snapshots__/BpkCalendarDate-test.tsx.snap

@@ -1,3 +1,4 @@
+
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BpkCalendarDate should pass props through to button 1`] = `

packages/bpk-component-calendar/src/__snapshots__/BpkCalendarGrid-test.tsx.snap

@@ -1,3 +1,4 @@
+
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BpkCalendarGrid should render correctly with "weekDayKey" attribute set to nameNarrow 1`] = `

packages/bpk-component-calendar/src/__snapshots__/BpkCalendarGridTransition-test.tsx.snap

@@ -1,3 +1,4 @@
+
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BpkCalendar should render correctly 1`] = `

packages/bpk-component-calendar/src/__snapshots__/BpkCalendarNav-test.tsx.snap

@@ -1,3 +1,4 @@
+
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BpkCalendarNav should disable inputs when disabled 1`] = `

packages/bpk-component-calendar/src/__snapshots__/BpkCalendarWeek-test.tsx.snap

@@ -1,3 +1,4 @@
+
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BpkCalendarWeek should render correctly 1`] = `

packages/bpk-component-calendar/src/__snapshots__/composeCalendar-test.tsx.snap

@@ -1,3 +1,4 @@
+
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`composeCalendar should compose a nav, header, grid and date component correctly 1`] = `

packages/bpk-component-calendar/src/custom-proptypes-legacy.js → packages/bpk-component-calendar/src/custom-proptypes-legacy.tsx

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+
 import PropTypes from 'prop-types';
 
 import { isBefore, isSameDay } from './date-utils';
 
-const DateType = () => (props) => {
+const DateType = () => (props: Record<string, Date | null | undefined>) => {
   const { endDate, startDate } = props;
 
   // No range selected
@@ -39,7 +40,7 @@ const DateType = () => (props) => {
   }
 
   // Start date cannot be after end date
-  if (isBefore(endDate, startDate) && !isSameDay(endDate, startDate)) {
+  if (endDate && startDate && isBefore(endDate, startDate) && !isSameDay(endDate, startDate)) {
     return new Error(
       `Start date \`${startDate}\` cannot be after end date \`${endDate}\`.`,
     );

packages/bpk-component-datepicker/src/__snapshots__/BpkDatepicker-test.tsx.snap

@@ -1,3 +1,4 @@
+
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BpkDatepicker "readOnly" can be overriden in "inputProps" 1`] = `

packages/bpk-component-map/index.js → packages/bpk-component-map/index.tsx

@@ -16,27 +16,23 @@
  * limitations under the License.
  */
 
-/* @flow strict */
 
-import BpkIconMarker, {
-  type Props as IconMarkerProps,
-} from './src/BpkIconMarker';
+
+import BpkIconMarker
+ from './src/BpkIconMarker';
 import BpkMap from './src/BpkMap';
 import BpkOverlayView from './src/BpkOverlayView';
 import BpkPriceMarker from './src/BpkPriceMarker';
 import BpkPriceMarkerButton, {
   MARKER_STATUSES,
 } from './src/BpkPriceMarkerButton';
-import { type LatLong } from './src/common-types';
 import {
   defaultIconMarkerThemeAttributes,
   priceMarkerThemeAttributes,
 } from './src/themeAttributes';
 import withGoogleMapsScript from './src/withGoogleMapsScript';
 
 export default BpkMap;
-export type BpkMapLatLong = LatLong;
-export type BpkIconMarkerProps = IconMarkerProps;
 export {
   BpkIconMarker,
   BpkPriceMarker,

packages/bpk-component-map/src/BpkBasicMapMarker-test.js → packages/bpk-component-map/src/BpkBasicMapMarker-test.tsx

@@ -16,17 +16,18 @@
  * limitations under the License.
  */
 
-/* @flow strict */
+
+
+import type { ReactNode } from 'react';
 
 import { render } from '@testing-library/react';
 
 import BpkBasicMapMarker from './BpkBasicMapMarker';
 
 jest.mock('@react-google-maps/api', () => ({
-  OverlayView: (props) => (
+  OverlayView: (props: { children: ReactNode }) => (
     <div>
       <div className="mock-overlay-view" />
-      {/* eslint-disable-next-line react/prop-types */}
       {props.children}
     </div>
   ),

packages/bpk-component-map/src/BpkBasicMapMarker.tsx

@@ -21,14 +21,13 @@ import type { ReactNode } from 'react';
 
 import { getDataComponentAttribute } from '../../bpk-react-utils';
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkOverlayView from './BpkOverlayView';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { LatLongPropType, type LatLong } from './common-types';
 
 type Props = {
-  children: ReactNode,
-  position: LatLong,
+  children: ReactNode;
+  position: LatLong;
+  [key: string]: unknown;
 };
 
 const getPixelPositionOffset = (width: number, height: number) => ({

packages/bpk-component-map/src/BpkIconMarker-test.js → packages/bpk-component-map/src/BpkIconMarker-test.tsx

@@ -16,17 +16,18 @@
  * limitations under the License.
  */
 
-/* @flow strict */
+
+
+import type { ReactNode } from 'react';
 
 import { render } from '@testing-library/react';
 
 import BpkIconMarker from './BpkIconMarker';
 
 jest.mock('@react-google-maps/api', () => ({
-  OverlayView: (props) => (
+  OverlayView: (props: { children: ReactNode }) => (
     <div>
       <div className="mock-overlay-view" />
-      {/* eslint-disable-next-line react/prop-types */}
       {props.children}
     </div>
   ),
@@ -69,7 +70,7 @@ describe('BpkIconMarker', () => {
       <BpkIconMarker
         position={position}
         icon={icon}
-        buttonProps={{ testId: 'arbitrary value' }}
+        buttonProps={{ 'data-testid': 'arbitrary value' }}
       />,
     );
     expect(asFragment()).toMatchSnapshot();

packages/bpk-component-map/src/BpkIconMarker.js → packages/bpk-component-map/src/BpkIconMarker.tsx

@@ -16,28 +16,30 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import PropTypes from 'prop-types';
-import type { Node } from 'react';
+import type { ReactNode, MouseEvent, ButtonHTMLAttributes } from 'react';
+
 
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkBasicMapMarker from './BpkBasicMapMarker';
 import BpkIconMarkerBackground from './BpkIconMarkerBackground';
-import { LatLongPropType, type LatLong } from './common-types';
+import { LatLongPropType } from './common-types';
+
+import type { LatLong } from './common-types';
 
 import STYLES from './BpkIconMarker.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-export type Props = {
-  icon: Node,
-  position: LatLong,
-  selected: boolean,
-  className: ?string,
-  onClick: ?(event: SyntheticEvent<>) => mixed,
-  buttonProps: ?{ [string]: any },
+type Props = {
+  icon: ReactNode;
+  position: LatLong;
+  className?: string | null;
+  onClick?: ((event: MouseEvent<HTMLButtonElement>) => void) | null;
+  selected?: boolean;
+  buttonProps?: (ButtonHTMLAttributes<HTMLButtonElement> & { [key: `data-${string}`]: string }) | null;
+  [key: string]: unknown;
 };
 
 const BpkIconMarker = (props: Props) => {
@@ -63,7 +65,7 @@ const BpkIconMarker = (props: Props) => {
       <button
         type="button"
         className={wrapperClassNames}
-        onClick={onClick}
+        onClick={onClick ?? undefined}
         {...buttonProps}
       >
         <BpkIconMarkerBackground

packages/bpk-component-map/src/BpkIconMarkerBackground-test.js → packages/bpk-component-map/src/BpkIconMarkerBackground-test.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-/* @flow strict */
+
 
 import { render } from '@testing-library/react';
 

packages/bpk-component-map/src/BpkIconMarkerBackground.js → packages/bpk-component-map/src/BpkIconMarkerBackground.tsx

@@ -16,21 +16,23 @@
  * limitations under the License.
  */
 
-/* @flow strict */
+
+
+import type { SVGProps } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkIconMarkerBackground.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-type Props = {
-  disabled: boolean,
-  interactive: boolean,
-  selected: boolean,
-};
+interface BpkIconMarkerBackgroundProps extends SVGProps<SVGSVGElement> {
+  disabled?: boolean;
+  interactive?: boolean;
+  selected?: boolean;
+}
 
-const BpkIconMarkerBackground = (props: Props) => {
+const BpkIconMarkerBackground = (props: BpkIconMarkerBackgroundProps) => {
   const { disabled, interactive, selected, ...rest } = props;
 
   const classNames = getClassName(

packages/bpk-component-map/src/BpkMap.js → packages/bpk-component-map/src/BpkMap.tsx

@@ -16,64 +16,58 @@
  * limitations under the License.
  */
 
-/* @flow strict */
+
 
 import PropTypes from 'prop-types';
-import type { Node } from 'react';
 import { useCallback, useRef } from 'react';
 
 import { GoogleMap } from '@react-google-maps/api';
 
 import { cssModules } from '../../bpk-react-utils';
 
-import { LatLongPropType, type LatLong } from './common-types';
+import { LatLongPropType, } from './common-types';
 
 import STYLES from './BpkMap.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-export type Bounds = {
-  south: number,
-  west: number,
-  north: number,
-  east: number,
+
+
+
+
+type LatLong = {
+  latitude: number;
+  longitude: number;
 };
 
-export type MapRef = ?{
-  getBounds: () => Bounds,
-  getCenter: () => LatLong,
-  getZoom: () => number,
-  fitBounds: (Bounds) => void,
+type Bounds = {
+  south: number;
+  west: number;
+  north: number;
+  east: number;
 };
 
 type MapOptionStyle = {
-  featureType: ?string,
-  elementType: ?string,
-  stylers: Array<{
-    [string]: string,
-  }>,
+  featureType?: string;
+  elementType?: string;
+  stylers: Array<Record<string, unknown>>;
 };
 
 type Props = {
-  greedyGestureHandling: boolean,
-  panEnabled: boolean,
-  showControls: boolean,
-  zoom: number,
-  /**
-   * Note: One of `bounds` and `center` must be provided.
-   */
-  bounds: ?Bounds,
-  /**
-   * Note: One of `bounds` and `center` must be provided.
-   */
-  center: ?LatLong,
-  children: ?Node,
-  mapRef: ?(MapRef) => mixed,
-  onRegionChange: ?(Bounds, LatLong) => mixed,
-  onZoom: ?(number) => mixed,
-  onTilesLoaded: ?() => void,
-  className: ?string,
-  mapOptionStyles: ?Array<MapOptionStyle>,
+  bounds?: Bounds | null;
+  center?: LatLong;
+  children?: React.ReactNode;
+  greedyGestureHandling?: boolean;
+  mapRef?: ((map: google.maps.Map | null) => void) | null;
+  className?: string | null;
+  onRegionChange?: ((bounds: google.maps.LatLngBounds | undefined, center: google.maps.LatLng | undefined) => void) | null;
+  onZoom?: ((zoom: number | undefined) => void) | null;
+  onTilesLoaded?: (() => void) | null;
+  panEnabled?: boolean;
+  showControls?: boolean;
+  zoom?: number;
+  mapOptionStyles?: MapOptionStyle[] | null;
+  mapId?: string | null;
 };
 
 const BpkMap = (props: Props) => {
@@ -106,11 +100,11 @@ const BpkMap = (props: Props) => {
     gestureHandling = 'greedy';
   }
 
-  const ref = useRef(null);
+  const ref = useRef<google.maps.Map | null>(null);
   const mapContainerClassName = getClassName('bpk-map', className);
 
   const onLoad = useCallback(
-    (map) => {
+    (map: google.maps.Map) => {
       ref.current = map;
       if (map && bounds) {
         map.fitBounds({