chore: TypeScript migration - Calendar & Date Components#4207
chore: TypeScript migration - Calendar & Date Components#4207Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 1 commit intomainfrom
Conversation
Migrates the following packages: - bpk-component-calendar - bpk-component-scrollable-calendar - bpk-component-datepicker Changes include: - Rename .js files to .tsx - Add TypeScript type annotations - Update test snapshots Co-Authored-By: Claude Opus 4.5 <[email protected]>
There was a problem hiding this comment.
Pull request overview
This PR migrates calendar, scrollable calendar, and datepicker components from JavaScript to TypeScript, along with map components that were included in the migration.
Changes:
- Renamed
.jsfiles to.tsxand added TypeScript type annotations - Removed Flow type annotations and replaced with TypeScript equivalents
- Updated test snapshots with blank line additions
Reviewed changes
Copilot reviewed 33 out of 33 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bpk-component-scrollable-calendar/src/snapshots/*.snap | Added blank lines to snapshot files |
| packages/bpk-component-map/src/withGoogleMapsScript.tsx | Migrated from Flow to TypeScript with proper type definitions |
| packages/bpk-component-map/src/themeAttributes.tsx | Added blank line formatting |
| packages/bpk-component-map/src/common-types.tsx | Converted Flow types to TypeScript |
| packages/bpk-component-map/src/BpkOverlayView.tsx | Migrated to TypeScript with React.ReactNode types |
| packages/bpk-component-map/src/BpkMap.tsx | Comprehensive TypeScript migration with Google Maps types |
| packages/bpk-component-map/src/BpkIconMarkerBackground.tsx | Converted to TypeScript interface extending SVGProps |
| packages/bpk-component-map/src/BpkIconMarker.tsx | Migrated with proper event and button prop types |
| packages/bpk-component-map/src/BpkBasicMapMarker.tsx | TypeScript migration with cleaned up imports |
| packages/bpk-component-map/index.tsx | Removed Flow annotations and cleaned up exports |
| packages/bpk-component-datepicker/src/snapshots/*.snap | Added blank line to snapshot |
| packages/bpk-component-calendar/src/custom-proptypes-legacy.tsx | Added null checks for date comparisons |
| packages/bpk-component-calendar/src/snapshots/*.snap | Added blank lines to snapshots |
| packages/bpk-component-calendar/src/BpkCalendarNav.tsx | Removed unnecessary ts-expect-error comment |
| packages/bpk-component-calendar/index.ts | Updated exports with deprecation comment |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { OverlayView } from '@react-google-maps/api'; | ||
|
|
||
| import { LatLongPropType, type LatLong } from './common-types'; | ||
| import { LatLongPropType, } from './common-types'; |
There was a problem hiding this comment.
Remove the trailing comma after LatLongPropType in the import statement as it serves no purpose when there's only one import.
| import { LatLongPropType, } from './common-types'; | |
| import { LatLongPropType } from './common-types'; |
| import { LatLongPropType, } from './common-types'; | ||
|
|
||
| type LatLong = { | ||
| latitude: number; | ||
| longitude: number; | ||
| }; | ||
|
|
There was a problem hiding this comment.
The LatLong type is being duplicated here when it should be imported from './common-types' instead. Remove this local definition and import the type from the common-types module.
| import { LatLongPropType, } from './common-types'; | |
| type LatLong = { | |
| latitude: number; | |
| longitude: number; | |
| }; | |
| import { LatLongPropType, LatLong } from './common-types'; |
| import { cssModules } from '../../bpk-react-utils'; | ||
|
|
||
| import { LatLongPropType, type LatLong } from './common-types'; | ||
| import { LatLongPropType, } from './common-types'; |
There was a problem hiding this comment.
Remove the trailing comma after LatLongPropType in the import statement as it serves no purpose when there's only one import.
| import { LatLongPropType, } from './common-types'; | |
| import { LatLongPropType } from './common-types'; |
| type LatLong = { | ||
| latitude: number; | ||
| longitude: number; | ||
| }; |
There was a problem hiding this comment.
The LatLong type is being duplicated here when it should be imported from './common-types' instead. Remove this local definition and import the type from the common-types module.
| type="button" | ||
| className={wrapperClassNames} | ||
| onClick={onClick} | ||
| onClick={onClick ?? undefined} |
There was a problem hiding this comment.
The nullish coalescing operator is unnecessary here since undefined and null are both valid for optional onClick props. Simply pass onClick directly.
| onClick={onClick ?? undefined} | |
| onClick={onClick} |
| position={position} | ||
| icon={icon} | ||
| buttonProps={{ testId: 'arbitrary value' }} | ||
| buttonProps={{ 'data-testid': 'arbitrary value' }} |
There was a problem hiding this comment.
The test was updated to use 'data-testid' instead of 'testId', but the snapshot should be updated to verify this change is captured correctly.
| import BpkIconMarker | ||
| from './src/BpkIconMarker'; |
There was a problem hiding this comment.
The import statement is split across two lines unnecessarily. Keep the import on a single line for better readability.
| import BpkIconMarker | |
| from './src/BpkIconMarker'; | |
| import BpkIconMarker from './src/BpkIconMarker'; |
Gert-Jan Vercauteren (gert-janvercauteren)
added
patch
1 participant
Summary
bpk-component-calendar,bpk-component-scrollable-calendar,bpk-component-datepickerChanges
.jsfiles to.tsxTest plan
npm run typecheckto verify TypeScript compilationnpm test -- --testPathPattern="bpk-component-calendar|bpk-component-scrollable-calendar|bpk-component-datepicker"to verify tests pass🤖 Generated with Claude Code