[CLOV-90] TS migration of bpk-component-table by IrinaWei · Pull Request #4123 · Skyscanner/backpack

IrinaWei · 2026-01-14T09:22:19Z

Summary

Migrated bpk-component-table from Flow to TypeScript with zero API changes and 100% test preservation.

Changes

Components (6 files)

✅ BpkTable.tsx, BpkTableHead.tsx, BpkTableBody.tsx
✅ BpkTableRow.tsx, BpkTableCell.tsx, BpkTableHeadCell.tsx

Tests (7 files)

✅ All test files migrated to .tsx with identical logic
✅ Accessibility tests passing

TypeScript Types

All components export TypeScript types:

BpkTableProps, BpkTableHeadProps, BpkTableBodyProps
BpkTableRowProps, BpkTableCellProps, BpkTableHeadCellProps

Test Results

✅ 24/24 tests passing (100%)
✅ Coverage: 100%
✅ Snapshots: byte-identical
✅ Build: successful

Breaking Changes

None - PATCH version migration

Version Bump

PATCH (no API changes)

🤖 Generated with Claude Code

Migrated bpk-component-table from Flow to TypeScript with zero API changes. ## Summary - Migrated 6 table components to TypeScript (.js → .tsx) - Migrated 7 test files to TypeScript (.js → .tsx) - Migrated examples and stories to TypeScript - Added TypeScript type exports for all components - Updated README with TypeScript usage section ## Changes - All Flow annotations removed - TypeScript type definitions added inline in component files - PropTypes retained for runtime validation - Rest props pattern: [rest: string]: any; // Inexact rest - Entry point migrated: index.js → index.ts ## Testing - ✅ All 24 tests passing (100% pass rate) - ✅ Test coverage: 100% (branches, functions, lines, statements) - ✅ All snapshots byte-identical - ✅ Accessibility tests passing with jest-axe - ✅ Build successful ## Type Definitions All components now export TypeScript types: - BpkTableProps, BpkTableHeadProps, BpkTableBodyProps - BpkTableRowProps, BpkTableCellProps, BpkTableHeadCellProps ## Breaking Changes None - This is a PATCH version migration with zero API changes. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Copilot

Pull request overview

Migrated bpk-component-table from Flow to TypeScript while maintaining 100% API compatibility and test coverage. All 6 component files and 7 test files were converted to TypeScript with proper type exports and no breaking changes.

Changes:

Removed Flow type annotations (/* @flow strict */, type Node) and replaced with TypeScript equivalents (React.ReactNode)
Exported TypeScript type definitions for all components (BpkTableProps, BpkTableRowProps, etc.)
Added README section documenting TypeScript usage with import examples

Reviewed changes

Copilot reviewed 54 out of 59 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/bpk-component-table/src/*.tsx	Converted 6 component files to TypeScript with exported type definitions
packages/bpk-component-table/src/*-test.tsx	Removed Flow annotations from 7 test files
packages/bpk-component-table/index.ts	Added TypeScript type exports
packages/bpk-component-table/README.md	Added TypeScript documentation section
examples/bpk-component-table/examples.tsx	Removed Flow annotation

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Added comprehensive documentation for bpk-component-table TypeScript migration: - spec.md: Feature specification with requirements and success criteria - plan.md: Implementation plan with constitution compliance - tasks.md: Detailed task breakdown with completion tracking - research.md: Flow to TypeScript type mapping research - api-design.md: TypeScript type definitions for all components - styling-guide.md: Confirmed zero styling changes - checklists/requirements.md: Specification quality validation - MIGRATION_COMPLETE.md: Final migration summary Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-01-14T09:29:43Z

Visit https://backpack.github.io/storybook-prs/4123 to see this build running in a browser.

skyscanner-backpack-bot · 2026-01-14T09:31:21Z

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 2fab40e

Added missing license headers to all speckit bash scripts: - check-prerequisites.sh - common.sh - create-new-feature.sh - setup-plan.sh - update-agent-context.sh Updated constitution.md to document license header requirement: - Added NON-NEGOTIABLE license header requirement in Section II - Included template for TypeScript/JavaScript files - Included guidance for bash scripts (# comments after shebang) - Ensures legal compliance and proper attribution Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

…table Add comprehensive documentation for proper TypeScript file extension usage: - Update spec.md with User Story 6 (File Extension Correctness) and MIG-012 - Add file extension analysis to research.md confirming all files correctly named - Create implementation plan.md documenting verification process - Update requirements checklist with file extension guidance Key findings: - index.ts correctly uses .ts (no JSX) - All component/test/example files correctly use .tsx (contain JSX) - No code changes needed - migration already follows best practices This documentation serves as reference for future TypeScript migrations. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-01-14T09:51:39Z

Visit https://backpack.github.io/storybook-prs/4123 to see this build running in a browser.

skyscanner-backpack-bot · 2026-01-19T11:09:53Z

Visit https://backpack.github.io/storybook-prs/4123 to see this build running in a browser.

skyscanner-backpack-bot · 2026-01-20T02:55:44Z

Visit https://backpack.github.io/storybook-prs/4123 to see this build running in a browser.

skyscanner-backpack-bot · 2026-01-20T05:11:37Z

Visit https://backpack.github.io/storybook-prs/4123 to see this build running in a browser.

IrinaWei · 2026-01-20T05:58:54Z

+export interface BpkTableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+  /** The content of the table */
+  children: ReactNode;
+}


#4063 (comment)

skyscanner-backpack-bot · 2026-01-20T10:36:05Z

Visit https://backpack.github.io/storybook-prs/4123 to see this build running in a browser.

skyscanner-backpack-bot · 2026-01-21T03:02:59Z

Visit https://backpack.github.io/storybook-prs/4123 to see this build running in a browser.

skyscanner-backpack-bot · 2026-01-26T03:08:28Z

Visit https://backpack.github.io/storybook-prs/4123 to see this build running in a browser.

Gert-Jan Vercauteren (gert-janvercauteren)

LGTM

* initiate SDD * add speckit command for copilot * [TypeScript] Migrate bpk-component-table to TypeScript Migrated bpk-component-table from Flow to TypeScript with zero API changes. ## Summary - Migrated 6 table components to TypeScript (.js → .tsx) - Migrated 7 test files to TypeScript (.js → .tsx) - Migrated examples and stories to TypeScript - Added TypeScript type exports for all components - Updated README with TypeScript usage section ## Changes - All Flow annotations removed - TypeScript type definitions added inline in component files - PropTypes retained for runtime validation - Rest props pattern: [rest: string]: any; // Inexact rest - Entry point migrated: index.js → index.ts ## Testing - ✅ All 24 tests passing (100% pass rate) - ✅ Test coverage: 100% (branches, functions, lines, statements) - ✅ All snapshots byte-identical - ✅ Accessibility tests passing with jest-axe - ✅ Build successful ## Type Definitions All components now export TypeScript types: - BpkTableProps, BpkTableHeadProps, BpkTableBodyProps - BpkTableRowProps, BpkTableCellProps, BpkTableHeadCellProps ## Breaking Changes None - This is a PATCH version migration with zero API changes. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * [Docs] Add TypeScript migration specification documents Added comprehensive documentation for bpk-component-table TypeScript migration: - spec.md: Feature specification with requirements and success criteria - plan.md: Implementation plan with constitution compliance - tasks.md: Detailed task breakdown with completion tracking - research.md: Flow to TypeScript type mapping research - api-design.md: TypeScript type definitions for all components - styling-guide.md: Confirmed zero styling changes - checklists/requirements.md: Specification quality validation - MIGRATION_COMPLETE.md: Final migration summary Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * [License] Add Apache 2.0 license headers to speckit scripts Added missing license headers to all speckit bash scripts: - check-prerequisites.sh - common.sh - create-new-feature.sh - setup-plan.sh - update-agent-context.sh Updated constitution.md to document license header requirement: - Added NON-NEGOTIABLE license header requirement in Section II - Included template for TypeScript/JavaScript files - Included guidance for bash scripts (# comments after shebang) - Ensures legal compliance and proper attribution Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * [Docs] Document TypeScript file extension patterns for bpk-component-table Add comprehensive documentation for proper TypeScript file extension usage: - Update spec.md with User Story 6 (File Extension Correctness) and MIG-012 - Add file extension analysis to research.md confirming all files correctly named - Create implementation plan.md documenting verification process - Update requirements checklist with file extension guidance Key findings: - index.ts correctly uses .ts (no JSX) - All component/test/example files correctly use .tsx (contain JSX) - No code changes needed - migration already follows best practices This documentation serves as reference for future TypeScript migrations. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * update requirement for liscence header * change header template * change plan template for examples * optimize document * change api type to inherite html element * fix storybook api doc missing and delete propTypes * add comment to template * delete spec --------- Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

* default export autosuggest * modify migartion * modify migration doc * change autosuggest storybook name * [CLOV-1340] [BpkBadge] BpkBadge Themeability Enhancements (#4270) * [CLOV-1340] [BpkBadge] BpkBadge Themeability Enhancements * update readme * Update examples/bpk-component-badge/examples.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * add allBadgeThemeAttributes * themeable property mixin --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * [BpkButton]Add loading prop for BpkButton (#4275) * add loading state for BpkButton * fix test and comments * revert comments * remove dead code * fix bpkbutton link style * update example text * [CLOV-1341][BpkChip]Theming support to BpkChip (#4272) * themable bpkChip * hover color * delete skill * hover fallbaock * change to _border * update readme * update boder token using * [CLOV-90] TS migration of bpk-component-table (#4123) * initiate SDD * add speckit command for copilot * [TypeScript] Migrate bpk-component-table to TypeScript Migrated bpk-component-table from Flow to TypeScript with zero API changes. ## Summary - Migrated 6 table components to TypeScript (.js → .tsx) - Migrated 7 test files to TypeScript (.js → .tsx) - Migrated examples and stories to TypeScript - Added TypeScript type exports for all components - Updated README with TypeScript usage section ## Changes - All Flow annotations removed - TypeScript type definitions added inline in component files - PropTypes retained for runtime validation - Rest props pattern: [rest: string]: any; // Inexact rest - Entry point migrated: index.js → index.ts ## Testing - ✅ All 24 tests passing (100% pass rate) - ✅ Test coverage: 100% (branches, functions, lines, statements) - ✅ All snapshots byte-identical - ✅ Accessibility tests passing with jest-axe - ✅ Build successful ## Type Definitions All components now export TypeScript types: - BpkTableProps, BpkTableHeadProps, BpkTableBodyProps - BpkTableRowProps, BpkTableCellProps, BpkTableHeadCellProps ## Breaking Changes None - This is a PATCH version migration with zero API changes. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * [Docs] Add TypeScript migration specification documents Added comprehensive documentation for bpk-component-table TypeScript migration: - spec.md: Feature specification with requirements and success criteria - plan.md: Implementation plan with constitution compliance - tasks.md: Detailed task breakdown with completion tracking - research.md: Flow to TypeScript type mapping research - api-design.md: TypeScript type definitions for all components - styling-guide.md: Confirmed zero styling changes - checklists/requirements.md: Specification quality validation - MIGRATION_COMPLETE.md: Final migration summary Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * [License] Add Apache 2.0 license headers to speckit scripts Added missing license headers to all speckit bash scripts: - check-prerequisites.sh - common.sh - create-new-feature.sh - setup-plan.sh - update-agent-context.sh Updated constitution.md to document license header requirement: - Added NON-NEGOTIABLE license header requirement in Section II - Included template for TypeScript/JavaScript files - Included guidance for bash scripts (# comments after shebang) - Ensures legal compliance and proper attribution Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * [Docs] Document TypeScript file extension patterns for bpk-component-table Add comprehensive documentation for proper TypeScript file extension usage: - Update spec.md with User Story 6 (File Extension Correctness) and MIG-012 - Add file extension analysis to research.md confirming all files correctly named - Create implementation plan.md documenting verification process - Update requirements checklist with file extension guidance Key findings: - index.ts correctly uses .ts (no JSX) - All component/test/example files correctly use .tsx (contain JSX) - No code changes needed - migration already follows best practices This documentation serves as reference for future TypeScript migrations. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * update requirement for liscence header * change header template * change plan template for examples * optimize document * change api type to inherite html element * fix storybook api doc missing and delete propTypes * add comment to template * delete spec --------- Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> * Create skill to migrate to v42 (#4277) * Create skill to migrate to v42 * add more detail for autosuggest migration * update skills --------- Co-authored-by: Kerrie Wu <kerrie.wu@skyscanner.net> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * add using skills guide in migration doc --------- Co-authored-by: Faye <faye.xiao@skyscanner.net> Co-authored-by: Ezreal Yang <supremeyh@126.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: GC Zhu <171069086@qq.com> Co-authored-by: IrinaWei <irina.wei@skyscanner.net> Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> Co-authored-by: Jaume Salgado <jaume.salgado@skyscanner.net>

IrinaWei and others added 4 commits December 22, 2025 15:38

initiate SDD

7bb229b

add speckit command for copilot

737d4f0

Merge branch 'main' into SDD-POC

d858acd

Copilot AI review requested due to automatic review settings January 14, 2026 09:22

Copilot AI reviewed Jan 14, 2026

View reviewed changes

IrinaWei added ai: claude patch Patch production bug PoC Do not merge it to main labels Jan 14, 2026

IrinaWei changed the base branch from main to SDD-POC January 14, 2026 09:31

IrinaWei and others added 3 commits January 14, 2026 17:32

Merge branch 'main' into SDD-POC

f3c4ad2

Merge branch 'SDD-POC' into 090-table-typescript

88dac8c

IrinaWei changed the base branch from SDD-POC to main January 14, 2026 09:38

IrinaWei added 7 commits January 19, 2026 14:49

update requirement for liscence header

20bb409

Merge branch 'main' into SDD-POC

8211bcc

change header template

fb4f42b

Merge branch 'SDD-POC' of github.com:Skyscanner/backpack into SDD-POC

1533318

change plan template for examples

26d611e

optimize document

ff9ab26

change api type to inherite html element

5ca9c72

Merge branch 'main' into 090-table-typescript

0ac8248

fix storybook api doc missing and delete propTypes

045c354

add comment to template

e1ce0d1

IrinaWei commented Jan 20, 2026

View reviewed changes

Merge branch 'SDD-POC' into 090-table-typescript

d4163b5

Merge branch 'main' into 090-table-typescript

b77dc20

IrinaWei added 2 commits January 26, 2026 10:57

delete spec

51dbaf0

Merge branch 'main' into 090-table-typescript

2fab40e

Gert-Jan Vercauteren (gert-janvercauteren) approved these changes Mar 13, 2026

View reviewed changes

IrinaWei merged commit 82bfe57 into main Mar 13, 2026
12 checks passed

IrinaWei deleted the 090-table-typescript branch March 13, 2026 05:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CLOV-90] TS migration of bpk-component-table#4123

[CLOV-90] TS migration of bpk-component-table#4123
IrinaWei merged 23 commits intomainfrom
090-table-typescript

IrinaWei commented Jan 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

skyscanner-backpack-bot Bot commented Jan 14, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 14, 2026 •

edited

Loading

Uh oh!

skyscanner-backpack-bot Bot commented Jan 14, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 19, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 20, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 20, 2026

Uh oh!

IrinaWei Jan 20, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 20, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 21, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 26, 2026

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

IrinaWei commented Jan 14, 2026

Summary

Changes

Components (6 files)

Tests (7 files)

TypeScript Types

Test Results

Breaking Changes

Version Bump

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

skyscanner-backpack-bot Bot commented Jan 14, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

skyscanner-backpack-bot Bot commented Jan 14, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 19, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 20, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 20, 2026

Uh oh!

IrinaWei Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot Bot commented Jan 20, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 21, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 26, 2026

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

skyscanner-backpack-bot Bot commented Jan 14, 2026 •

edited

Loading