Skip to content

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

Open
Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 5 commits intomainfrom
gert-janvercauteren/colocate-storybook
Open

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

Conversation

@gert-janvercauteren
Copy link
Copy Markdown
Contributor

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

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:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

Copilot AI review requested due to automatic review settings March 26, 2026 05:27
Copilot AI reviewed Mar 26, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@skyscanner-backpack-bot
Copy link
Copy Markdown

skyscanner-backpack-bot bot commented Mar 26, 2026

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

1 similar comment
@skyscanner-backpack-bot
Copy link
Copy Markdown

skyscanner-backpack-bot bot commented Mar 26, 2026

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

@skyscanner-backpack-bot
Copy link
Copy Markdown

skyscanner-backpack-bot bot commented Mar 26, 2026 •
edited
Loading

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 93f9f8b

@gert-janvercauteren @claude
[BpkButton,BpkBadge,BpkCard] Colocate stories with components and con…
4cd3110 
…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>
@gert-janvercauteren @claude
[BpkButton,BpkBadge,BpkCard] Remove leftover example files for migrat…
29d9b47 
…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>
@gert-janvercauteren @claude
[BpkButton,BpkBadge,BpkCard] Fix TypeScript errors in colocated stories
f344935 
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>
@gert-janvercauteren @claude
[BpkButton,BpkBadge,BpkCard] Address PR review comments
e18735e 
- Fix swapped DockedRight/DockedLeft story names in badge stories
- Use https:// instead of http:// in card story href
- Remove legacy defaultProps pattern from ButtonStory, use default parameter

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@skyscanner-backpack-bot
Copy link
Copy Markdown

skyscanner-backpack-bot bot commented Mar 26, 2026

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

IrinaWei
IrinaWei reviewed Mar 27, 2026
View reviewed changes
packages/bpk-component-button/src/BpkButton.stories.tsx Outdated
SIZE_TYPES,
} from '../../packages/bpk-component-button';

// @ts-ignore Untyped import. See `decisions/imports-ts-suppressions.md`.
Copy link
Copy Markdown
Contributor

@IrinaWei IrinaWei Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ts-ignore should be ts-expect-error — decisions/imports-ts-suppressions.md explicitly mandates ts-expect-error for untyped imports inside Backpack. ts-ignore silently suppresses errors indefinitely

@gert-janvercauteren @claude
[BpkButton,BpkBadge] Use @ts-expect-error instead of @ts-ignore
93f9f8b 
Per decisions/imports-ts-suppressions.md, use @ts-expect-error for
untyped imports so suppressions fail loudly if the underlying issue
is fixed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@skyscanner-backpack-bot
Copy link
Copy Markdown

skyscanner-backpack-bot bot commented Mar 27, 2026

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

IrinaWei
IrinaWei approved these changes Mar 27, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@IrinaWei IrinaWei left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@IrinaWei IrinaWei IrinaWei approved these changes

Assignees

No one assigned

Labels

skip-changelog

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@gert-janvercauteren @IrinaWei