[BpkButton,BpkBadge,BpkCard] Colocate stories with components and convert to CSF3 by gert-janvercauteren · Pull Request #4331 · Skyscanner/backpack

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-03-26T05:27:22Z

Summary

Pilot migration to colocate Storybook stories with component source files, preparing for NX monorepo migration. Migrates Button, Badge, and Card as proof of concept.

Changes:

Moved stories from examples/ into packages/*/src/*.stories.tsx for 3 pilot components
Converted all migrated stories from CSF2 (function exports) to CSF3 (satisfies Meta + StoryObj)
Merged the two-file pattern (examples.tsx + stories.tsx) into single colocated story files
Added build safeguards to prevent stories from shipping in the npm package:
- babel.config.js: Added .stories to the ignore list
- packages/.npmignore: Added *.stories.* and *.test.* patterns
- scripts/scss/styles-prod.js: Skip .stories. SCSS files during compilation
Updated .storybook/main.ts with dual-glob discovery to support incremental migration

Validated:

Storybook builds successfully with colocated stories
npm pack --dry-run confirms zero story files in published output

Remember to include the following changes:

…vert to CSF3 Migrate stories from examples/ to packages/*/src/ for Button, Badge, and Card as a pilot for full story colocation. Convert from CSF2 to CSF3 format. Add build safeguards (babel ignore, .npmignore, SCSS skip) to prevent stories from shipping in the npm package. Update storybook config with dual-glob discovery to support incremental migration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Pilot migration to colocate Storybook stories alongside component source (Button, Badge, Card) and convert them to CSF3, while ensuring these story assets don’t ship in published packages.

Changes:

Moved Button/Badge/Card stories into packages/*/src/*.stories.tsx and converted from CSF2 → CSF3 (satisfies Meta + StoryObj).
Added/updated build + publish safeguards to exclude story files/styles from transpilation, packaging, and production SCSS compilation.
Updated Storybook config to discover both legacy examples/ stories and new colocated stories during the incremental migration.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`scripts/scss/styles-prod.js`	Skips compiling `.stories.` SCSS files in production styles build.
`packages/bpk-component-card/src/BpkCard.stories.tsx`	New colocated CSF3 stories for Card.
`packages/bpk-component-card/src/BpkCard.stories.module.scss`	Story-only SCSS module for Card stories.
`packages/bpk-component-button/src/BpkButton.stories.tsx`	New colocated CSF3 stories for Button.
`packages/bpk-component-button/src/BpkButton.stories.module.scss`	Story-only SCSS module for Button stories.
`packages/bpk-component-badge/src/BpkBadge.stories.tsx`	New colocated CSF3 stories for Badge.
`packages/bpk-component-badge/src/BpkBadge.stories.module.scss`	Story-only SCSS module for Badge stories.
`packages/.npmignore`	Ensures story/test files (and story style modules) are excluded from published packages.
`examples/bpk-component-card/stories.js`	Removes legacy examples-based Card story entrypoint.
`examples/bpk-component-button/stories.tsx`	Removes legacy examples-based Button story entrypoint.
`examples/bpk-component-badge/stories.tsx`	Removes legacy examples-based Badge story entrypoint.
`babel.config.js`	Prevents `.stories` files from being transpiled as part of distribution build.
`.storybook/main.ts`	Adds a new glob to discover colocated package stories alongside existing examples.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-26T05:32:50Z

packages/bpk-component-button/src/BpkButton.stories.tsx

+import { cssModules } from '../../bpk-react-utils';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkThemeProvider from '../../bpk-theming';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.


There is an orphaned // @ts-expect-error directive (it is not directly followed by a statement that produces a TS error). With tsc running on the repo, this will fail typechecking with "Unused 'ts-expect-error' directive". Remove this extra directive or attach it to the line that actually needs the suppression.

Suggested change

// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

Copilot · 2026-03-26T05:32:51Z

packages/bpk-component-badge/src/BpkBadge.stories.tsx

+import { cssModules } from '../../bpk-react-utils';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkThemeProvider from '../../bpk-theming';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.


There is an orphaned // @ts-expect-error directive (not directly followed by an error-producing statement). This will cause tsc to fail with "Unused 'ts-expect-error' directive". Remove the extra directive or place it immediately above the specific import/line that needs it.

Suggested change

// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

Copilot · 2026-03-26T05:32:51Z

packages/bpk-component-badge/src/BpkBadge.stories.tsx

+  render: () => <DockedLeadingExample />,
+};
+
+export const DockedLeft: Story = {
+  render: () => <DockedTrailingExample />,


DockedRight renders DockedLeadingExample (which uses docked="left"), and DockedLeft renders DockedTrailingExample (which uses docked="right"). This appears swapped and will make the story names misleading. Swap the rendered examples (or rename the exports) so the story name matches the docked prop value being demonstrated.

Suggested change

render: () => <DockedLeadingExample />,

};

export const DockedLeft: Story = {

render: () => <DockedTrailingExample />,

render: () => <DockedTrailingExample />,

};

export const DockedLeft: Story = {

render: () => <DockedLeadingExample />,

Copilot · 2026-03-26T05:32:51Z

packages/bpk-component-card/src/BpkCard.stories.tsx

+    <BpkDividedCard
+      primaryContent={longMessage}
+      secondaryContent={shortContent}
+      href="http://www.skyscanner.net/"


This story uses an http:// URL. Even in Storybook examples it's better to use https:// to avoid unnecessary redirects and mixed-content/security warnings in some environments.

Suggested change

href="http://www.skyscanner.net/"

href="https://www.skyscanner.net/"

Copilot · 2026-03-26T05:32:51Z

packages/bpk-component-button/src/BpkButton.stories.tsx

+  );
+};
+
+ButtonStory.defaultProps = { className: null };


ButtonStory.defaultProps = { className: null } relies on the legacy defaultProps pattern and sets className to null even though the prop is typed as string | undefined. Prefer using a default value in the function parameter (or normalizing with className ?? '') and drop defaultProps to keep typings and runtime behavior consistent.

…ed components Clean up the remaining examples/ files (examples.tsx, SCSS, CSS) for the three components whose stories were colocated in the previous commit. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-26T05:41:45Z

Visit https://backpack.github.io/storybook-prs/4331 to see this build running in a browser.

@ts-ignore

Remove Story type annotations from render-only stories to avoid TS errors where StoryObj requires args for required component props. Remove unused StoryObj imports. Add @ts-ignore for untyped bpk-storybook-utils module. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-03-26T05:52:22Z

Visit https://backpack.github.io/storybook-prs/4331 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-26T05:54:13Z

	Warnings
⚠️	Package source files (e.g. `packages/package-name/src/Component.js`) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 4121684

Gert-Jan Vercauteren (gert-janvercauteren) added the skip-changelog label Mar 26, 2026

Copilot AI review requested due to automatic review settings March 26, 2026 05:27

Copilot started reviewing on behalf of Gert-Jan Vercauteren (gert-janvercauteren) March 26, 2026 05:27 View session

Copilot AI reviewed Mar 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BpkButton,BpkBadge,BpkCard] Colocate stories with components and convert to CSF3#4331

[BpkButton,BpkBadge,BpkCard] Colocate stories with components and convert to CSF3#4331
Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 3 commits intomainfrom
gert-janvercauteren/colocate-storybook

Gert-Jan Vercauteren (gert-janvercauteren) commented Mar 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 26, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 26, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	href="http://www.skyscanner.net/"
	href="https://www.skyscanner.net/"

Conversation

Gert-Jan Vercauteren (gert-janvercauteren) commented Mar 26, 2026

Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Mar 26, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 26, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 26, 2026

Browser support

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants