storybook-package-context-loader
Webpack loader for mono-repos utilizing Storybookjs to automatically inject storybook parameters to contextualize the containing package for .stories.tsx
files
Using this webpack loader on your stories will add a storybook parameter packageContext
which has the following information:
-
pkgJson
Json object of closest package.json if available -
readme
Raw string of contents of packageREADME.md
if available -
changelog
Raw string of contents of packageCHANGELOG.md
if available
Usage
Installation
npm install storybook-package-context-loader
Add webpack loader to storybook main.js file
Add the webpack loader to your .storybook/main.js
file under webpackFinal
:
webpackFinal: (config) => {
config.module.rules.push({
test: /\.stories\.(t|j)sx$/,
use: [require.resolve("storybook-package-context-loader")],
});
return config;
},
Configuration
You can optionally disable the loader from including any of the parsed files by passing options to the loader:
webpackFinal: (config) => {
config.module.rules.push({
test: /\.stories\.tsx$/,
use: {
loader: require.resolve("storybook-package-context-loader"),
options: {
enableReadme: false,
enablePkgJson: false,
enableChangelog: false
}
},
});
return config;
},
Parsing .md files
Webpack 5
If you're using storybook with webpack 5, markdown files should be automatically set up to be parsed.
If for some reason that's not working you can manually configure them as source assets with the following:
webpackFinal: (config) => {
...
config.module.rules.push({
test: /\.md$/,
type: 'asset/source',
})
return config;
},
Webpack 4
If you're using storybook with webpack 4, you'll want to configure markdown files to be parsed via raw-loader with the following:
webpackFinal: (config) => {
...
config.module.rules.push({
test: /\.md$/,
use: 'raw-loader'
})
return config;
},
Disable context parsing for story
If you want to disable package context loading for a story, you can pass parameters.packageContext=null
to your component's story:
export default: {
parameters: {
packageContext: null
}
}