diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js index 4afcac335c..5bdc6b3a2f 100644 --- a/packages/storybook/.storybook/main.js +++ b/packages/storybook/.storybook/main.js @@ -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; + }, + }; }; diff --git a/packages/storybook/README.md b/packages/storybook/README.md index f966a358d3..600e2409ab 100644 --- a/packages/storybook/README.md +++ b/packages/storybook/README.md @@ -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`.