Convert BpkCheckbox component to TypeScript
Overview
This PR migrates the BpkCheckbox component from Flow to TypeScript, improving type safety and developer experience while maintaining full backward compatibility.
Changes
Component Migration
- Converted
BpkCheckbox.jstoBpkCheckbox.tsxwith proper TypeScript types - Replaced Flow type annotations with TypeScript equivalents
- Updated
Propsinterface to extendInputHTMLAttributes<HTMLInputElement>for better type inference - Removed PropTypes in favor of TypeScript's compile-time type checking
- Removed Flow-specific comments and suppressions
Test Files
- Migrated all test files to TypeScript:
-
BpkCheckbox-test.tsx -
accessibility-test.tsx -
form-test.tsx(added missinglabelprop and type assertion) -
themeAttributes-test.ts
-
- Updated snapshots to match new
.tsxfile extensions
Examples & Stories
- Converted
examples.jstoexamples.tsxwith proper TypeScript types forStatefulCheckbox - Updated
stories.tsxto use modern Storybook pattern forVisualTestWithZoom
Supporting Files
- Migrated
index.jstoindex.ts - Converted
themeAttributes.jstothemeAttributes.ts
Type Safety Improvements
The new TypeScript implementation provides:
- Full type inference for all component props
- Compile-time validation of prop types
- Better IDE autocomplete and documentation
- Explicit typing for event handlers and refs
Testing
✅ All 16 tests passing
✅ 12 snapshots updated
✅ No TypeScript compilation errors
✅ No linting errors
✅ No security vulnerabilities (CodeQL: 0 alerts)
Backward Compatibility
This migration maintains 100% backward compatibility. All existing functionality, props, and behavior remain unchanged.
Original prompt
This section details on the original issue you should resolve
<issue_title>Convert BpkCheckbox to typescript</issue_title> <issue_description>I want to migrate the BpkCheckbox component and all of its tests and storybook examples to typescript</issue_description>
Comments on the Issue (you are @copilot in this section)
Fixes Skyscanner/backpack#4019
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.