[CLOV-102] BpkPrice Migrate JS to TypeScript#4521
Open
Vincent Liu (xiaogliu) wants to merge 2 commits into
Open
[CLOV-102] BpkPrice Migrate JS to TypeScript#4521Vincent Liu (xiaogliu) wants to merge 2 commits into
Vincent Liu (xiaogliu) wants to merge 2 commits into
Conversation
Convert the bpk-component-price package from JavaScript/Flow to TypeScript. Replace prop-types and Flow Props with typed Props exports and rename all source/test/snapshot files (.js -> .ts/.tsx). No business-logic, JSX, or rendering changes - existing snapshots remain valid. - Rename index.js -> index.ts and re-export BpkPriceProps type - Rename BpkPrice.js -> BpkPrice.tsx; type Props extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> so native div props flow through ...rest while keeping className?: string | null - Rename common-types.js -> common-types.ts; use `as const` so SIZES / ALIGNS export literal-typed values - Rename test/accessibility-test/snapshot files; type the BpkPrice-test props variable as BpkPriceProps and cast the icon NewWindowIcon reference to ReactNode to preserve the existing (already-empty) icon span in snapshots - Drop the now-unused @ts-expect-error suppressions on the BpkPrice and common-types imports in the stories file Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Vincent Liu (xiaogliu)
changed the title
|
Visit https://backpack.github.io/storybook-prs/4521 to see this build running in a browser. |
The BpkPrice TS migration exposed two latent issues in card stories: - Unused @ts-expect-error suppressions on BpkPrice imports (now typed) - BpkCardV2 stories used SIZES.Large (capitalised), which compiled only because the SIZES import was untyped. With SIZES now `as const` the correct lowercase `large` key is enforced. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
Visit https://backpack.github.io/storybook-prs/4521 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
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-pricepackage from JavaScript/Flow to TypeScript.js→.ts/.tsx) and the snapshot file so Jest still finds itpropTypes+ FlowPropswith a typedPropsexport, re-exported fromindex.tsasBpkPricePropsPropsextendsOmit<HTMLAttributes<HTMLDivElement>, 'className'>so native div attrs flow through...restwhile keepingclassName?: string \| nullSIZES/ALIGNSuseas constso consumers get literal-typed values@ts-expect-errorsuppressions on theBpkPriceandcommon-typesimports in the stories fileNotes for reviewer
BpkPrice-test.tsx, the existingconst icon = NewWindowIconpasses a component reference (not a JSX element). Flow accepted this; TS does not. To keep the migration pure, I cast toReactNode(as unknown as ReactNode) so the existing snapshots — which already render an empty<span class="bpk-price__icon ...">because React silently does nothing with a function child — continue to match. Worth a follow-up to either drop the icon test cases or pass<NewWindowIcon />and refresh the snapshots.Test plan
npm run jest -- packages/backpack-web/src/bpk-component-price(4 suites, 92 tests, 64 snapshots all pass)npx tsc --noEmit— no errors inbpk-component-pricenpx eslint packages/backpack-web/src/bpk-component-price— no errors, no warnings