backpack icon indicating copy to clipboard operation
backpack copied to clipboard

Convert BpkCheckbox component to TypeScript

Open Copilot opened this issue 4 months ago • 1 comments

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.js to BpkCheckbox.tsx with proper TypeScript types
  • Replaced Flow type annotations with TypeScript equivalents
  • Updated Props interface to extend InputHTMLAttributes<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 missing label prop and type assertion)
    • themeAttributes-test.ts
  • Updated snapshots to match new .tsx file extensions

Examples & Stories

  • Converted examples.js to examples.tsx with proper TypeScript types for StatefulCheckbox
  • Updated stories.tsx to use modern Storybook pattern for VisualTestWithZoom

Supporting Files

  • Migrated index.js to index.ts
  • Converted themeAttributes.js to themeAttributes.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.

Copilot avatar Oct 23 '25 06:10 Copilot