jpwallace22 / storybook-for-gatsby

A storybook addon to help with Gatsby static queries

Storybook for Gatsby

Installation

Add it to your dev dependencies with your package manager of choice:

#yarn
yarn add storybook-for-gatsby -D

#npm
npm install --save-dev storybook-for-gatsby

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

// .storybook/main.js

module.exports = {
  addons: ['storybook-for-gatsby'],
};

Deploying to Chromatic

Chromatic is a tool from the makers of Storybook that automates gathering UI feedback, visual testing, and documentation. Due to the way it reads information from the UI, it requires some extra steps to deploy. If you are using the useStaticQuery hook anywhere in your codebase you will need to:

• Run a production build
• Copy all files from your static queries
• Build Storybook in a 'test' NODE_ENV

The below snippet shows how you can achieve this in your package.json

// package.json

{
  "scripts": {
    "copy-static-queries": "cp -r ./public/page-data/sq/d ./public/static",
    "build-storybook": "gatsby build && yarn copy-static-queries && NODE_ENV=test build-storybook"
  }
}

Limitations

• Gatsby v4 or above
• Storybook to be configured for Webpack 5 (Storybook with Webpack 5 docs)
• Not tested on Storybook 7 (not even sure if its needed)

Contributors

Justin Wallace	Daniel Slovinsky

storybook-for-gatsby's Issues

New addon framework

The Storybook API for building addons is currently being updated to factor in the changes introduced by the upcoming 7.0 release. There are required changes to help the community from benefiting from using the addon, there is an abridged guide for the required changes here. Questions or issues: #prerelease channel in Discord Server.