[BpkComponents] Convert components to TSX#4205
Open
Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 13 commits intomainfrom
Open
[BpkComponents] Convert components to TSX#4205Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 13 commits intomainfrom
Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 13 commits intomainfrom
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR converts component packages and Storybook examples from JavaScript/Flow to TypeScript (TSX) with type checking suppressed via // @ts-nocheck. This is an intermediate migration step that maintains compilation while preparing for full TypeScript adoption.
Changes:
- Replaced Flow type annotations with
// @ts-nocheckdirective across all component files - Removed Flow-specific type definitions and imports
- Updated package.json to include
--maxWorkers=50%for Jest commands
Reviewed changes
Copilot reviewed 299 out of 1083 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bpk-component-barchart/src/*.tsx | Removed Flow types and added ts-nocheck to barchart components |
| packages/bpk-component-banner-alert/src/*.tsx | Removed Flow types and added ts-nocheck to banner alert components |
| packages/bpk-component-badge/src/*.tsx | Removed Flow types and added ts-nocheck to badge components |
| packages/bpk-component-autosuggest/src/*.tsx | Removed Flow types and added ts-nocheck to autosuggest components |
| packages/bpk-component-aria-live/src/*.tsx | Removed Flow types and added ts-nocheck to aria-live components |
| packages/bpk-component-accordion/src/*.tsx | Removed Flow types and added ts-nocheck to accordion components |
| packages/bpk-animate-height/src/*.tsx | Removed Flow types and added ts-nocheck to animate-height components |
| examples/**/*.tsx | Removed Flow types and added ts-nocheck to all Storybook examples |
| package.json | Added maxWorkers configuration to Jest commands for performance |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Visit https://backpack.github.io/storybook-prs/4205 to see this build running in a browser. |
|
Visit https://backpack.github.io/storybook-prs/4205 to see this build running in a browser. |
|
Visit https://backpack.github.io/storybook-prs/4205 to see this build running in a browser. |
Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Visit https://backpack.github.io/storybook-prs/4205 to see this build running in a browser. |
- Fix react/sort-comp errors by removing instance property declarations - Fix react/prop-types errors by adding TypeScript interfaces - Fix import/prefer-default-export by adding type export - Fix no-undef errors by importing React types properly - Replace React.* namespace references with direct imports - Use ReturnType<typeof setTimeout> instead of NodeJS.Timeout - Add proper Flow type imports for SyntheticEvent Co-Authored-By: Claude Opus 4.5 <[email protected]>
Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Visit https://backpack.github.io/storybook-prs/4205 to see this build running in a browser. |
- Remove unused useCallback import from BpkPriceRange - Add eslint-disable comments for IntersectionObserverInit type (DOM type not recognized by ESLint) - Add eslint-disable comment for globalThis in intersection-observer polyfill - Add proper TypeScript types to DataSource.fetchItems parameters - Add documentation to require.d.ts type declaration Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Visit https://backpack.github.io/storybook-prs/4205 to see this build running in a browser. |
Restore compile-time type safety that was lost during the JS to TSX migration by adding proper TypeScript type annotations to: - bpk-component-table: BpkTable, BpkTableRow, BpkTableBody, BpkTableHead, BpkTableCell, BpkTableHeadCell - bpk-component-section-list: BpkSectionList, BpkSectionListItem, BpkSectionListSection - bpk-component-barchart: BpkBarchartBar, BpkBarchartBars, BpkChartAxis, BpkChartDataTable, BpkChartGridLines, BpkChartMargin - bpk-component-horizontal-nav: BpkHorizontalNav, BpkHorizontalNavItem - bpk-component-map: BpkIconMarker Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Visit https://backpack.github.io/storybook-prs/4205 to see this build running in a browser. |
- Remove 26 unused @ts-expect-error directives that TypeScript no longer requires after the JS to TSX migration - Add type declarations for external modules lacking types: - d3-scale - lodash.debounce - react-autosuggest Co-Authored-By: Claude Opus 4.5 <[email protected]>
…functions Add proper TypeScript interfaces and types to components that were migrated from Flow. This includes Props/State interfaces for class components, typed function parameters, and generic type parameters for HOCs and data structures. Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add type annotations to component props and function parameters - Fix implicit any types in test files and class components - Replace spacingSm with spacingIconText (token renamed) - Move propTypes/defaultProps inside class components for TS compatibility - Add proper type assertions for DOM queries in tests - Fix nullable property assignments with nullish coalescing Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Visit https://backpack.github.io/storybook-prs/4205 to see this build running in a browser. |
- Add type declarations for bpk-storybook-utils - Fix null vs undefined mismatches in component props - Add missing Props types to components - Fix HOC type constraints and setState patterns - Update test files with proper type assertions - Add eslint-disable comments for react/sort-comp on class fields - Remove unused @ts-expect-error directives - Add 'as const' to SIZES/ALIGNS for proper literal types Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Visit https://backpack.github.io/storybook-prs/4205 to see this build running in a browser. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Convert component packages and Storybook examples from JS/Flow to TSX with TypeScript checks suppressed via
// @ts-nocheck.Add a minimal
requiretype and relaxnoImplicitAnyto keep the migration compiling.Testing: Not run (not requested).
Remember to include the following changes:
[Clover-123][BpkButton] Updating the colourREADME.md(If you have created a new component)README.md