Add Storybook to Gatsby project

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It is an organized and efficient way to build stunning UIs.

This recipe:

---

Installs babel plugins and presets as well as the Storybook React NPM packages and addons.

<NPMPackage name="babel-loader" dependencyType="development" /> <NPMPackage name="@babel/preset-react" dependencyType="development" /> <NPMPackage name="@babel/preset-env" dependencyType="development" /> <NPMPackage name="@babel/plugin-proposal-class-properties" dependencyType="development" /> <NPMPackage name="babel-plugin-remove-graphql-queries" dependencyType="development" /> <NPMPackage name="babel-plugin-react-docgen" dependencyType="development" /> <NPMPackage name="@storybook/react" dependencyType="development" /> <NPMPackage name="@storybook/addon-actions" dependencyType="development" /> <NPMPackage name="@storybook/addon-docs" dependencyType="development" />

---

Creates JavaScript Storybook webpack config (main.js).

<File path="./.storybook/main.js" content="https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-js/master/recipe/main.js" />

---

Configures Storybook / Gatsby Link settings (preview.js).

<File path="./.storybook/preview.js" content="https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-js/master/recipe/preview.js" />

---

Creates example JavaScript Link story.

<File path="./src/components/Link.stories.js" content="https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-js/master/recipe/Link.stories.js" />

---

Adds Storybook npm scripts.

<NPMScript name="storybook" command="NODE_ENV=production start-storybook -s ./public -p 6006 --ci" /> <NPMScript name="build-storybook" command="NODE_ENV=production build-storybook" />

---

After installing this recipe and before you run Storybook, make sure you run gatsby develop or gatsby build. This ensures that Gatsby's GraphQL data is available in Storybook.