A minimal Storybook(v6) configuration for Gatsby

README.md

Install Gatsby global

npm i -g @storybook/cli

# This command adds a set of boilerplate files for Storybook in your project. You also need to update storybook configuration for Gatsby project.
sb init

Update package.json

"storybook:static-query": "yarn clean && yarn build && cp -r ./public/page-data/sq/d ./public/static",
"storybook": "yarn storybook:static-query && NODE_ENV=test start-storybook -p 6006 -s public",

Create your first story

Create a directory called stories inside of src/components and add create a new file called example.stories.js. Storybook will automatically pick up all files ending with ...stories.js

Issues

• Error: Cannot read property 'createSnapshot' of undefined
• TypeError: Cannot read property 'get' of undefined
• UnhandledPromiseRejectionWarning: TypeError: compilation.getAssetPath is not a function

If you run into this issues when using NPM, just remove rm -rf node_modules/ and rm package-lock.json then, run yarn install;yarn storybook

main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    '@storybook/addon-postcss'
  ],
  webpackFinal: async (config) => {

    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [ /node_modules\/(?!(gatsby)\/)/ ];

    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve( 'babel-loader' );

    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
      require.resolve( '@babel/preset-react' ),
      require.resolve( '@babel/preset-env' )
    ];

    config.module.rules[0].use[0].options.plugins = [
      // use @babel/plugin-proposal-class-properties for class arrow functions
      require.resolve( '@babel/plugin-proposal-class-properties' ),
      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
      require.resolve( 'babel-plugin-remove-graphql-queries' )
    ];

    config.module.rules[1].test = /\.(sa|sc|c)ss$/;
    config.module.rules[1].use = [
      require.resolve( 'style-loader' ),
      require.resolve( 'css-loader' ),
      require.resolve( 'sass-loader' ),
    ];	// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint

    config.resolve.mainFields = [ 'browser', 'module', 'main' ];

    return config;
  }
}

preview.js

import { action } from "@storybook/addon-actions";
import React from 'react';// Add viewport addon for mobile responsive development.
import { addParameters, configure } from '@storybook/react';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

global.__BASE_PATH__ = '';
// automatically import all files ending in *.stories.js
configure( [
	require.context( "../src/components", true, /\.stories\.js$/ )
], module );
// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
	enqueue: () => ({}),
	hovering: () => ({})
}
// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = "";
// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
	action( "NavigateTo:" )( pathname )
};addParameters( {
	viewport: {
		viewports: INITIAL_VIEWPORTS,
	},
} );
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}