From 47da602a535efb46031735d1a270bf6f280b78e7 Mon Sep 17 00:00:00 2001 From: Gert-Jan Vercauteren Date: Fri, 26 Jun 2026 17:24:25 +0800 Subject: [PATCH 1/7] [bpk-component-modal] Migrate customPropTypes to TypeScript Migrates bpk-component-modal from JavaScript to TypeScript as described in #4750. - 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 #4750 --- .../src/customPropTypes.ts | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 packages/backpack-web/src/bpk-component-modal/src/customPropTypes.ts diff --git a/packages/backpack-web/src/bpk-component-modal/src/customPropTypes.ts b/packages/backpack-web/src/bpk-component-modal/src/customPropTypes.ts new file mode 100644 index 0000000000..d336c1ecb8 --- /dev/null +++ b/packages/backpack-web/src/bpk-component-modal/src/customPropTypes.ts @@ -0,0 +1,57 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2016 Skyscanner Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +type ValidatorProps = { + showHeader?: boolean; + title?: string; + onClose?: () => void; + [key: string]: unknown; +}; + +export type Validator = ( + props: ValidatorProps, + propName: string, + componentName: string, +) => Error | null; + +export const titlePropType: Validator = (props, propName, componentName) => { + const titleValue = props[propName]; + + if (props.showHeader && (!titleValue || typeof titleValue !== 'string')) { + return new Error( + `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`, + ); + } + + return null; +}; + +export const onClosePropType: Validator = (props, propName, componentName) => { + const onCloseValue = props[propName]; + + if ( + props.showHeader && + (!onCloseValue || typeof onCloseValue !== 'function') + ) { + return new Error( + `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`, + ); + } + + return null; +}; From 3f5b5df74850b7a36bb71b0de57a2efef5982f50 Mon Sep 17 00:00:00 2001 From: Gert-Jan Vercauteren Date: Fri, 26 Jun 2026 17:27:13 +0800 Subject: [PATCH 2/7] Remove old .js files replaced by TypeScript --- .../src/customPropTypes.js | 54 ------------------- 1 file changed, 54 deletions(-) delete mode 100644 packages/backpack-web/src/bpk-component-modal/src/customPropTypes.js diff --git a/packages/backpack-web/src/bpk-component-modal/src/customPropTypes.js b/packages/backpack-web/src/bpk-component-modal/src/customPropTypes.js deleted file mode 100644 index 35512ada10..0000000000 --- a/packages/backpack-web/src/bpk-component-modal/src/customPropTypes.js +++ /dev/null @@ -1,54 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2016 Skyscanner Ltd - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* @flow strict */ - -export const titlePropType = ( - props: Object, - propName: string, - componentName: string, -): ?Error => { - const titleValue = props[propName]; - - if (props.showHeader && (!titleValue || typeof titleValue !== 'string')) { - return new Error( - `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`, - ); - } - - return null; -}; - -export const onClosePropType = ( - props: Object, - propName: string, - componentName: string, -): ?Error => { - const onCloseValue = props[propName]; - - if ( - props.showHeader && - (!onCloseValue || typeof onCloseValue !== 'function') - ) { - return new Error( - `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`, - ); - } - - return null; -}; From efd95c6b842297d8b76542a283dc8be6d168cbbf Mon Sep 17 00:00:00 2001 From: Gert-Jan Vercauteren Date: Fri, 26 Jun 2026 20:48:21 +0800 Subject: [PATCH 3/7] Fix CI: remove unused @ts-expect-error, fix import syntax, update snapshots, delete old .js files --- .../backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx b/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx index cdee321db4..625ab535ff 100644 --- a/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx +++ b/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx @@ -16,7 +16,6 @@ * limitations under the License. */ -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { BpkContentBubble } from '../../bpk-component-flare'; import { TransitionInitialMount, cssModules } from '../../bpk-react-utils'; import { withScrim } from '../../bpk-scrim-utils'; From 678cc3cec9cfa4b9a66f2a65ad3200b8ff35926a Mon Sep 17 00:00:00 2001 From: Gert-Jan Vercauteren Date: Fri, 26 Jun 2026 21:01:39 +0800 Subject: [PATCH 4/7] Use @ts-ignore for cross-package imports to pass CI on individual PRs --- packages/backpack-web/src/bpk-component-calendar/index.ts | 3 ++- .../src/bpk-component-dialog/src/BpkDialogInner.tsx | 1 + .../src/bpk-component-map/src/BpkBasicMapMarker.tsx | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/backpack-web/src/bpk-component-calendar/index.ts b/packages/backpack-web/src/bpk-component-calendar/index.ts index 50ed215b9b..25e8638429 100644 --- a/packages/backpack-web/src/bpk-component-calendar/index.ts +++ b/packages/backpack-web/src/bpk-component-calendar/index.ts @@ -35,7 +35,8 @@ import composeCalendar from './src/composeCalendar'; import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes'; import CustomPropTypes, { BpkCalendarGridPropTypes, - BpkCalendarDatePropTypes, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. + BpkCalendarDatePropTypes, + // @ts-ignore TODO: Remove once all packages are migrated to TypeScript. } from './src/custom-proptypes-legacy'; import * as DateUtils from './src/date-utils'; import themeAttributes from './src/themeAttributes'; diff --git a/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx b/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx index 625ab535ff..bb5b45423e 100644 --- a/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx +++ b/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx @@ -16,6 +16,7 @@ * limitations under the License. */ +// @ts-ignore TODO: Remove once all packages are migrated to TypeScript. import { BpkContentBubble } from '../../bpk-component-flare'; import { TransitionInitialMount, cssModules } from '../../bpk-react-utils'; import { withScrim } from '../../bpk-scrim-utils'; diff --git a/packages/backpack-web/src/bpk-component-map/src/BpkBasicMapMarker.tsx b/packages/backpack-web/src/bpk-component-map/src/BpkBasicMapMarker.tsx index ba93932c83..d128b9f553 100644 --- a/packages/backpack-web/src/bpk-component-map/src/BpkBasicMapMarker.tsx +++ b/packages/backpack-web/src/bpk-component-map/src/BpkBasicMapMarker.tsx @@ -20,9 +20,9 @@ import type { ReactNode } from 'react'; import { getDataComponentAttribute } from '../../bpk-react-utils'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +// @ts-ignore TODO: Remove once all packages are migrated to TypeScript. import BpkOverlayView from './BpkOverlayView'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +// @ts-ignore TODO: Remove once all packages are migrated to TypeScript. import { type LatLong } from './common-types'; type Props = { From d7921fd56a856e5654d12ecf0d17618e24c3237a Mon Sep 17 00:00:00 2001 From: Gert-Jan Vercauteren Date: Thu, 2 Jul 2026 13:47:35 +0800 Subject: [PATCH 5/7] [bpk-component-modal] Fix ts-suppress style per decisions/imports-ts-suppressions.md Replace @ts-ignore with @ts-expect-error for untyped imports. Co-Authored-By: Claude Sonnet 4.6 (1M context) --- packages/backpack-web/src/bpk-component-calendar/index.ts | 2 +- .../src/bpk-component-dialog/src/BpkDialogInner.tsx | 2 +- .../src/bpk-component-map/src/BpkBasicMapMarker.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/backpack-web/src/bpk-component-calendar/index.ts b/packages/backpack-web/src/bpk-component-calendar/index.ts index 25e8638429..927644c9d8 100644 --- a/packages/backpack-web/src/bpk-component-calendar/index.ts +++ b/packages/backpack-web/src/bpk-component-calendar/index.ts @@ -35,8 +35,8 @@ import composeCalendar from './src/composeCalendar'; import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes'; import CustomPropTypes, { BpkCalendarGridPropTypes, + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. BpkCalendarDatePropTypes, - // @ts-ignore TODO: Remove once all packages are migrated to TypeScript. } from './src/custom-proptypes-legacy'; import * as DateUtils from './src/date-utils'; import themeAttributes from './src/themeAttributes'; diff --git a/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx b/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx index bb5b45423e..cdee321db4 100644 --- a/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx +++ b/packages/backpack-web/src/bpk-component-dialog/src/BpkDialogInner.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -// @ts-ignore TODO: Remove once all packages are migrated to TypeScript. +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { BpkContentBubble } from '../../bpk-component-flare'; import { TransitionInitialMount, cssModules } from '../../bpk-react-utils'; import { withScrim } from '../../bpk-scrim-utils'; diff --git a/packages/backpack-web/src/bpk-component-map/src/BpkBasicMapMarker.tsx b/packages/backpack-web/src/bpk-component-map/src/BpkBasicMapMarker.tsx index d128b9f553..ba93932c83 100644 --- a/packages/backpack-web/src/bpk-component-map/src/BpkBasicMapMarker.tsx +++ b/packages/backpack-web/src/bpk-component-map/src/BpkBasicMapMarker.tsx @@ -20,9 +20,9 @@ import type { ReactNode } from 'react'; import { getDataComponentAttribute } from '../../bpk-react-utils'; -// @ts-ignore TODO: Remove once all packages are migrated to TypeScript. +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkOverlayView from './BpkOverlayView'; -// @ts-ignore TODO: Remove once all packages are migrated to TypeScript. +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { type LatLong } from './common-types'; type Props = { From 6a6d9f3ba95220895048dd09f0ccbaad04b01d0c Mon Sep 17 00:00:00 2001 From: Gert-Jan Vercauteren Date: Thu, 2 Jul 2026 13:57:48 +0800 Subject: [PATCH 6/7] [bpk-component-modal] Fix @ts-expect-error placement in calendar/index.ts Must precede the 'from' clause to suppress the module-level import error. Co-Authored-By: Claude Sonnet 4.6 (1M context) --- packages/backpack-web/src/bpk-component-calendar/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/backpack-web/src/bpk-component-calendar/index.ts b/packages/backpack-web/src/bpk-component-calendar/index.ts index 927644c9d8..c26c87e930 100644 --- a/packages/backpack-web/src/bpk-component-calendar/index.ts +++ b/packages/backpack-web/src/bpk-component-calendar/index.ts @@ -35,8 +35,8 @@ import composeCalendar from './src/composeCalendar'; import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes'; import CustomPropTypes, { BpkCalendarGridPropTypes, - // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. BpkCalendarDatePropTypes, +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. } from './src/custom-proptypes-legacy'; import * as DateUtils from './src/date-utils'; import themeAttributes from './src/themeAttributes'; From 4c66fd413cea6f34253a48ceea46b4e72cbd2d23 Mon Sep 17 00:00:00 2001 From: "gc.zhu" Date: Thu, 16 Jul 2026 12:03:08 +0800 Subject: [PATCH 7/7] [bpk-component-modal] Migrate customPropTypes-test to TypeScript MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rename customPropTypes-test.js → customPropTypes-test.ts and remove the Flow annotation, completing the TS migration for this file. --- .../src/{customPropTypes-test.js => customPropTypes-test.ts} | 2 -- 1 file changed, 2 deletions(-) rename packages/backpack-web/src/bpk-component-modal/src/{customPropTypes-test.js => customPropTypes-test.ts} (99%) diff --git a/packages/backpack-web/src/bpk-component-modal/src/customPropTypes-test.js b/packages/backpack-web/src/bpk-component-modal/src/customPropTypes-test.ts similarity index 99% rename from packages/backpack-web/src/bpk-component-modal/src/customPropTypes-test.js rename to packages/backpack-web/src/bpk-component-modal/src/customPropTypes-test.ts index 045a98d5ee..5b8f4110ea 100644 --- a/packages/backpack-web/src/bpk-component-modal/src/customPropTypes-test.js +++ b/packages/backpack-web/src/bpk-component-modal/src/customPropTypes-test.ts @@ -16,8 +16,6 @@ * limitations under the License. */ -/* @flow strict */ - import { titlePropType, onClosePropType } from './customPropTypes'; describe('titlePropType', () => {