paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 49 Packages Projects Releases Wiki Activity

Merge pull request #7731 from backstage/rugvip/storybewk

Browse Source 
storybook: support args for selecting a subset of packages
This commit is contained in:
Ben Lambert
2021-10-25 14:54:00 +02:00
committed by GitHub
parent d99c49b6dc 1695c17b2e
commit 2e66c49c25
2 changed files with 78 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/storybook/.storybook/main.js
+68 -52
View File
@@ -1,61 +1,77 @@
const path = require('path');
const WebpackPluginFailBuildOnWarning = require('./webpack-plugin-fail-build-on-warning');
module.exports = {
stories: [
'../../core-components/src/**/*.stories.tsx',
'../../../plugins/**/src/**/*.stories.tsx',
],
addons: [
'@storybook/addon-a11y',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-storysource',
'storybook-dark-mode/register',
],
webpackFinal: async config => {
// Mirror config in packages/cli/src/lib/bundler
config.resolve.mainFields = ['browser', 'module', 'main'];
module.exports = ({ args }) => {
// Calling storybook with no args causes our default list of stories to be used.
// This set of stories are the ones that we publish to backstage.io
//
// If it's called with args, each arg should be the path to a package that we will
// show the stories from, for example `yarn storybook plugins/catalog`.
let stories;
if (args.length === 0) {
stories = [
'../../core-components/src/**/*.stories.tsx',
'../../../plugins/org/src/**/*.stories.tsx',
'../../../plugins/search/src/**/*.stories.tsx',
];
} else {
const rootDir = path.resolve(__dirname, '../../..');
stories = args.map(arg => path.join(rootDir, arg, 'src/**/*.stories.tsx'));
}
// Remove the default babel-loader for js files, we're using sucrase instead
const [jsLoader] = config.module.rules.splice(0, 1);
if (!jsLoader.use[0].loader.includes('babel-loader')) {
throw new Error(
`Unexpected loader removed from storybook config, ${jsLoader.use[0].loader}`,
return {
stories,
addons: [
'@storybook/addon-a11y',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-storysource',
'storybook-dark-mode/register',
],
webpackFinal: async config => {
// Mirror config in packages/cli/src/lib/bundler
config.resolve.mainFields = ['browser', 'module', 'main'];
// Remove the default babel-loader for js files, we're using sucrase instead
const [jsLoader] = config.module.rules.splice(0, 1);
if (!jsLoader.use[0].loader.includes('babel-loader')) {
throw new Error(
`Unexpected loader removed from storybook config, ${jsLoader.use[0].loader}`,
);
}
config.resolve.extensions.push('.ts', '.tsx');
config.module.rules.push(
{
test: /\.(tsx?)$/,
exclude: /node_modules/,
loader: require.resolve('@sucrase/webpack-loader'),
options: {
transforms: ['typescript', 'jsx', 'react-hot-loader'],
},
},
{
test: /\.(jsx?|mjs)$/,
exclude: /node_modules/,
loader: require.resolve('@sucrase/webpack-loader'),
options: {
transforms: ['jsx', 'react-hot-loader'],
},
},
);
}
config.resolve.extensions.push('.ts', '.tsx');
// Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
config.plugins = config.plugins.filter(
({ constructor }) => constructor.name !== 'ProgressPlugin',
);
config.module.rules.push(
{
test: /\.(tsx?)$/,
exclude: /node_modules/,
loader: require.resolve('@sucrase/webpack-loader'),
options: {
transforms: ['typescript', 'jsx', 'react-hot-loader'],
},
},
{
test: /\.(jsx?|mjs)$/,
exclude: /node_modules/,
loader: require.resolve('@sucrase/webpack-loader'),
options: {
transforms: ['jsx', 'react-hot-loader'],
},
},
);
// Fail storybook build on CI if there are webpack warnings.
if (process.env.CI) {
config.plugins.push(new WebpackPluginFailBuildOnWarning());
}
// Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
config.plugins = config.plugins.filter(
({ constructor }) => constructor.name !== 'ProgressPlugin',
);
// Fail storybook build on CI if there are webpack warnings.
if (process.env.CI) {
config.plugins.push(new WebpackPluginFailBuildOnWarning());
}
return config;
},
return config;
},
};
};
packages/storybook/README.md
+10
View File
@@ -2,6 +2,16 @@
This package provides a Storybook build for Backstage. See https://backstage.io/storybook/.
## Usage
To run the storybook locally, call `yarn storybook` in repo root. This will show the default set of stories that we publish to https://backstage.io/storybook
If you want to show stories other than the default set, you can pass one or more package paths as an argument when calling storybook, for example:
```sh
yarn storybook plugins/search
```
## Why is this not part of `@backstage/core-components`?
This separate storybook package exists because of dependency conflicts with `@backstage/cli`. It uses `nohoist` to avoid the conflicts, and since you can only use that in private packages it has to be separated out of `@backstage/core-components`.