Gatsby addon for Storybook

[shilman]

Let's make a Gatsby addon for storybook which configures Storybook to work with Gatsby out of the box. On Storybook's side we can modify our CLI to detect that the user is in a gatsby project and install the addon on sb init.

Storybook addons can provide presets: collections of webpack, babel, and storybook configurations (e.g. for zero-config CRA support). Thre is presets documentation and the documentation for how to write an addon is being rapidly improved by @winkerVSbecks. In this case, the addon would consist entirely of a preset and no UI code.

Translating https://www.gatsbyjs.com/docs/visual-testing-with-storybook/ into a preset:

• webpackFinal could be provided by the preset directly
• The boilderplate .storybook/preview.js could be provided by a preview entry
• Typescript support should be provided out of the box in SB6+
• babel-preset-react-app can be provided by a babelDefault entry in the preset, if needed.

cc @wardpeet @KyleAMathews

[angeloashmore]

Dropping this comment here with what's working as of today: #26099 (comment)

[angeloashmore]

storybook-addon-gatsby is now available using the latest recommendations in Gatsby's Visual Testing with Storybook document.

Note: This addon requires Storybook to be configured for Webpack 5. See the official Storybook with Webpack 5 guide for instructions.

Install

npm install -D storybook-addon-gatsby

Then include the addon to your Storybook config at .storybook/main.js:

// .storybook/main.js

module.exports = {
	addons: ["storybook-addon-gatsby"],
};