chore: TypeScript migration - Charts & Data Visualization #4206
Conversation
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
Migrates the following packages from JavaScript to TypeScript: - bpk-component-barchart - bpk-component-datatable Changes include: - Rename .js files to .tsx - Add TypeScript type annotations - Update test files and snapshots Co-Authored-By: Claude Opus 4.5 <[email protected]>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the bpk-component-barchart package from JavaScript with Flow types to TypeScript, and updates snapshot files for both bpk-component-barchart and bpk-component-datatable.
Changes:
- Removed Flow type annotations (
/* @flow strict */) and replaced with TypeScript type definitions - Converted type syntax from Flow (
:for properties) to TypeScript (;for type properties) - Added proper TypeScript types for complex objects, scales, and component props
Reviewed changes
Copilot reviewed 36 out of 36 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bpk-component-datatable/src/snapshots/*.snap | Added blank line at beginning of snapshot files |
| packages/bpk-component-barchart/src/snapshots/*.snap | Added blank line at beginning of snapshot files |
| packages/bpk-component-barchart/src/utils.tsx | Migrated utility functions to TypeScript with proper type definitions |
| packages/bpk-component-barchart/src/*-test.tsx | Removed Flow annotations from test files |
| packages/bpk-component-barchart/src/*.tsx | Converted component files from Flow to TypeScript types |
| packages/bpk-component-barchart/src/BpkChartMargin-test.tsx | Updated spacing token from spacingSm to spacingIconText |
| packages/bpk-component-barchart/src/BpkBarchart-test.tsx | Changed getBarLabel return from null to empty string |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Gert-Jan Vercauteren (gert-janvercauteren)
added
patch
Replace custom d3-scale type definitions with official @types/d3-scale and @types/lodash.debounce packages. Updated component type definitions to use proper ScaleBand<string> and ScaleLinear<number, number> types with type guards to handle the union type safely. Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Visit https://backpack.github.io/storybook-prs/4206 to see this build running in a browser. |
… any usage - Add shared types.ts with DataPoint, Margin, NumericMargin, Scale, BarComponentProps, and TickValueFn types - Replace `any` with proper d3-scale types (ScaleBand, ScaleLinear) - Remove `as any` casts by aligning type signatures - Replace non-null assertions with nullish coalescing defaults - Add isBandScale type guard for scale discrimination - Use Record<string, unknown> instead of Record<string, any> Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Visit https://backpack.github.io/storybook-prs/4206 to see this build running in a browser. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
bpk-component-barchartfrom JavaScript to TypeScriptbpk-component-datatableTypeScript types and snapshotsChanges
.jsfiles to.tsxTest plan
npm run typecheckto verify TypeScript compilationnpm test -- --testPathPattern="bpk-component-barchart|bpk-component-datatable"to verify tests pass🤖 Generated with Claude Code