@biotope/storybook-addon-compiled-code
v1.0.4
Published
Compiled code addon for storybook
Downloads
17
Readme
Storybook Compiled Code Addon
This addon is used to show the compiled code of stories in the addon panel.
Getting Started
First, install the addon
yarn add @biotope/storybook-addon-compiled-code --dev
You can add configuration for this addon by using a preset or by using the addon config with webpack
Install using preset
Add the following to your .storybook/main.js
exports:
module.exports = {
addons: ['@storybook/addon-compiled-code'],
};
You can pass configurations into the addon-compiled-code loader in your .storybook/main.js
file, e.g.:
module.exports = {
addons: [
{
name: '@storybook/addon-compiled-code',
options: {
rule: {
// test: [/\.stories\.jsx?$/], This is default
include: [path.resolve(__dirname, '../src')], // You can specify directories
},
loaderOptions: {
prettierConfig: { printWidth: 80, singleQuote: false },
},
},
},
],
};
Loader Options
The loader can be customized with the following options:
parser
The parser that will be parsing your code to AST (based on prettier)
Allowed values:
javascript
- defaulttypescript
flow
Be sure to update the regex test for the webpack rule if utilizing Typescript files.
Usage:
module.exports = function({ config }) {
config.module.rules.push({
test: /\.stories\.tsx?$/,
loaders: [
{
loader: require.resolve('@storybook/source-loader'),
options: { parser: 'typescript' },
},
],
enforce: 'pre',
});
return config;
};
prettierConfig
The prettier configuration that will be used to format the story source in the addon panel.
Defaults:
{
printWidth: 100,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'es5',
singleQuote: true,
}
Usage:
module.exports = function({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/source-loader'),
options: {
prettierConfig: {
printWidth: 100,
singleQuote: false,
},
},
},
],
enforce: 'pre',
});
return config;
};
uglyCommentsRegex
The array of regex that is used to remove "ugly" comments.
Defaults:
[/^eslint-.*/, /^global.*/];
Usage:
module.exports = function({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/source-loader'),
options: {
uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
},
},
],
enforce: 'pre',
});
return config;
};
injectDecorator
Tell storysource whether you need inject decorator. If false, you need to add the decorator by yourself;
Defaults: true
Usage:
module.exports = function({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/source-loader'),
options: { injectDecorator: false },
},
],
enforce: 'pre',
});
return config;
};
Theming
Compiled Code will automatically use the light or dark syntax theme based on your storybook theme. See Theming Storybook for more information.