[NO-JIRA][BpkBadge] Render component README in Storybook Docs#4737
[NO-JIRA][BpkBadge] Render component README in Storybook Docs#4737Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 4 commits into
Conversation
Add a webpack rule to import Markdown files as raw source strings, plus a TypeScript module declaration for `*.md`. Wire BpkBadge's Docs page to render its README beneath the title via the <Markdown> block. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Visit https://backpack.github.io/storybook-prs/4737 to see this build running in a browser. |
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.
Adds support for rendering component README.md content in Storybook Docs pages by loading Markdown files as raw strings in the Storybook webpack config, and wires the pattern into BpkBadge docs.
Changes:
- Add a Storybook
webpackFinalrule to load.mdfiles asasset/source. - Add a TypeScript module declaration to type
*.mdimports asstring. - Update
BpkBadgeStorybook docs page to render the component README via<Markdown>and show props via<ArgTypes>.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/backpack-web/src/bpk-component-badge/src/BpkBadge.stories.tsx | Imports the component README and customizes the Docs page to render it plus the props table. |
| libs/backpack-storybook-host/.storybook/main.ts | Adds a webpack rule to make .md importable as raw strings for Docs rendering. |
| @types/md.d.ts | Declares *.md modules as string for TypeScript. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| parameters: { | ||
| docs: { | ||
| page: () => ( | ||
| <> | ||
| <Markdown>{readme}</Markdown> | ||
| <ArgTypes exclude={['zoomEnabled']} /> | ||
| </> | ||
| ), | ||
| }, | ||
| }, |
| webpackFinal: async (webpackConfig) => { | ||
| // Allow importing README.md (and other Markdown) files as raw source | ||
| // strings so they can be rendered in Docs pages via the <Markdown> block. | ||
| webpackConfig.module?.rules?.push({ | ||
| test: /\.md$/, | ||
| type: 'asset/source', | ||
| }); | ||
| return webpackConfig; | ||
| }, |
|
|
||
| import type { ReactNode } from 'react'; | ||
|
|
||
| import { ArgTypes, Markdown } from '@storybook/addon-docs/blocks'; |
Add a storybook-import step to the SupernovaPublish job so the built Storybook is pushed to Supernova on release. Checkout, setup-node and a Storybook build-cache restore are added since the job now needs the dist-storybook files locally. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Visit https://backpack.github.io/storybook-prs/4737 to see this build running in a browser. |
…k rule initialisation - Add <Title /> before <Markdown> in BpkBadge docs.page so the Docs page renders Title → README → props table as described in the PR - Initialise webpackConfig.module and .rules explicitly before pushing the .md rule, removing the silent no-op risk from optional chaining Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
|
Visit https://backpack.github.io/storybook-prs/4737 to see this build running in a browser. |
Avoid mutating the webpackConfig parameter directly; build the updated config immutably and return it instead. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
|
Visit https://backpack.github.io/storybook-prs/4737 to see this build running in a browser. |
Adds the ability to render a component's `README.md` inside its Storybook Docs page, and wires it up for `BpkBadge` as the first example. A `webpackFinal` rule loads `.md` files as raw source strings (`asset/source`), a `*.md` TypeScript module declaration types the import, and the BpkBadge Docs page now renders Title → README → props table via the `<Title />` and `` blocks. The README is inlined into the static build, so it ships with `storybook:dist`. No runtime component behaviour changes.
Changes
Remember to include the following changes:
🤖 Generated with Claude Code