[bpk-component-barchart] Migrate to TypeScript#4755
Open
Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 10 commits into
Open
[bpk-component-barchart] Migrate to TypeScript#4755Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 10 commits into
Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 10 commits into
Conversation
Migrates bpk-component-barchart from JavaScript to TypeScript as described in #4742. - Replaced prop-types with TypeScript interfaces - Converted defaultProps to ES6 destructure defaults - Renamed .js source/test/story files to .tsx/.ts - Removed Flow type annotations - Preserved Apache 2.0 license headers Closes #4742
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot couldn't run its full agentic review because no GitHub Actions runner was available. Make sure your repository has a runner available to run Copilot's review, or add a copilot-setup-steps.yml file specifying one with the runs-on attribute. See the docs for more details.
Migrates bpk-component-barchart toward TypeScript by introducing shared TS types and replacing Flow/PropTypes patterns with TypeScript typing.
Changes:
- Added a shared
common-types.tsand updated components/utils to consume these types. - Removed Flow annotations and most PropTypes usage; moved toward destructured default values.
- Renamed some components to
.tsx(e.g.,BpkChartMargin,BpkBarchartBars) and updated tests/stories accordingly.
Reviewed changes
Copilot reviewed 30 out of 30 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/backpack-web/src/bpk-component-barchart/src/utils.js | Introduces TS type usage and refines helper typings. |
| packages/backpack-web/src/bpk-component-barchart/src/utils-test.js | Adds TS annotations / TS suppressions in tests. |
| packages/backpack-web/src/bpk-component-barchart/src/themeAttributes.js | Adds typed theme attribute list export. |
| packages/backpack-web/src/bpk-component-barchart/src/themeAttributes-test.js | Removes Flow header. |
| packages/backpack-web/src/bpk-component-barchart/src/orientation.js | Adds TS Orientation typing to constants. |
| packages/backpack-web/src/bpk-component-barchart/src/customPropTypes.js | Refactors custom validator with TS types. |
| packages/backpack-web/src/bpk-component-barchart/src/customPropTypes-test.js | Removes Flow header. |
| packages/backpack-web/src/bpk-component-barchart/src/common-types.ts | Adds shared TS types for chart components/scales/events. |
| packages/backpack-web/src/bpk-component-barchart/src/accessibility-test.js | Removes Flow header. |
| packages/backpack-web/src/bpk-component-barchart/src/RTLtransforms.js | Adds TS typing for margin + generics for array transform. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkChartMargin.tsx | Converts BpkChartMargin component to TSX and uses Margin type. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkChartMargin.js | Deletes old Flow + PropTypes implementation. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkChartMargin-test.js | Updates spacing setup to pixel values via remToPx. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkChartGridLines.js | Refactors gridlines component typing and tick calculation. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkChartGridLines-test.js | Adds TS suppression for d3-scale import. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkChartDataTable.js | Removes PropTypes and uses BarPoint typing for table content. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkChartDataTable-test.js | Removes Flow header. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkChartAxis.js | Refactors axis config/props typing and tick calculation. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkChartAxis-test.js | Adds TS suppression for d3-scale import. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchartDefs.js | Removes Flow header. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchartDefs-test.js | Removes Flow header. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchartBars.tsx | Converts bars renderer to TSX with shared types. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchartBars.js | Deletes old Flow + PropTypes implementation. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchartBars-test.js | Adds TS suppression for d3-scale import. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchartBar.js | Removes PropTypes and adds TS-esque event typings/casts. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchartBar-test.js | Removes Flow header. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchart.stories.js | Adds TS types/casts for stories and replaces nulls with undefineds. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchart.js | Refactors main component props/defaults toward TS types and removes PropTypes. |
| packages/backpack-web/src/bpk-component-barchart/src/BpkBarchart-test.js | Removes Flow header. |
| packages/backpack-web/src/bpk-component-barchart/index.js | Removes Flow header. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+30
to
+41
| export type Scale = { | ||
| bandwidth?: () => number; | ||
| round: () => boolean; | ||
| ticks?: (count?: number) => number[]; | ||
| domain: <T extends unknown[]>(domain?: T) => T | unknown[]; | ||
| range: (range: [number, number]) => Scale; | ||
| rangeRound: (range: [number, number]) => Scale; | ||
| copy: () => Scale; | ||
| paddingInner: (value: number) => Scale; | ||
| paddingOuter: (value: number | undefined) => Scale; | ||
| (value: unknown): number; | ||
| }; |
Contributor
|
Visit https://backpack.github.io/storybook-prs/4755 to see this build running in a browser. |
Contributor
The identity branch in getAxisConfig was returning the raw identity function instead of applying the scale, causing tick labels to be positioned at data values rather than pixel coordinates. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4755 to see this build running in a browser. |
Gert-Jan Vercauteren (gert-janvercauteren)
marked this pull request as ready for review
Contributor
|
Visit https://backpack.github.io/storybook-prs/4755 to see this build running in a browser. |
…ts-suppressions.md Replace @ts-ignore with @ts-expect-error for untyped imports. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4755 to see this build running in a browser. |
…ndex.ts Must precede the 'from' clause to suppress the module-level import error. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
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
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 TypeScriptprop-typeswith TypeScript interfacesdefaultPropsto ES6 destructure defaults.jssource/test/story files to.tsx/.tsCloses #4742