# Add Storybook to Gatsby project

[Storybook](https://storybook.js.org/) is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

---

Install babel plugins and presets

<NPMPackage name="babel-loader" />
<NPMPackage name="@babel/preset-react" />
<NPMPackage name="@babel/preset-env" />
<NPMPackage name="@babel/plugin-proposal-class-properties" />
<NPMPackage name="babel-plugin-remove-graphql-queries" />
<NPMPackage name="babel-plugin-react-docgen" />

---

Install Storybook React NPM packages and addons

<NPMPackage name="@storybook/react" />
<NPMPackage name="@storybook/addon-actions" />
<NPMPackage name="@storybook/addon-docs" />

---

Create custom Storybook webpack config (main.js)

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

---

Configure 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"
/>

---

Create example Link stories

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

---

Add 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"
/>

---

## You're all done!

Before your run Storybook make sure you run `gatsby develop` or `gatsby build`. This ensures that Gatsby's GraphQL data is available in Storybook.