Adding StorybookJS to Gatsby Starter Theme

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,16 @@
+import { configure } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+// automatically import all files ending in *.stories.js
+configure(require.context("../src", 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)
+}

.storybook/webpack.config.js

@@ -0,0 +1,25 @@
+module.exports = ({ 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"),
+	]
+
+	// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
+	config.resolve.mainFields = ["browser", "module", "main"]
+
+	return config
+  }

package.json

@@ -5,21 +5,23 @@
   "scripts": {
     "start": "gatsby develop",
     "build": "gatsby build",
-    "clean": "gatsby clean"
+    "clean": "gatsby clean",
+    "storybook": "NODE_ENV=production start-storybook -s public",
+    "build-storybook": "NODE_ENV=production build-storybook -s public"
   },
   "dependencies": {
-    "gatsby": "^2.15.7",
-    "gatsby-image": "^2.2.17",
-    "gatsby-plugin-gtag": "^1.0.11",
-    "gatsby-plugin-react-helmet": "^3.1.6",
-    "gatsby-plugin-sharp": "^2.2.19",
-    "gatsby-plugin-sitemap": "^2.2.10",
-    "gatsby-source-filesystem": "^2.1.21",
-    "gatsby-source-graphql": "^2.1.12",
-    "gatsby-transformer-sharp": "^2.2.13",
+    "gatsby": "^2.18.6",
+    "gatsby-image": "^2.2.34",
+    "gatsby-plugin-gtag": "^1.0.12",
+    "gatsby-plugin-react-helmet": "^3.1.16",
+    "gatsby-plugin-sharp": "^2.3.5",
+    "gatsby-plugin-sitemap": "^2.2.22",
+    "gatsby-source-filesystem": "^2.1.40",
+    "gatsby-source-graphql": "^2.1.25",
+    "gatsby-transformer-sharp": "^2.3.6",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
     "wp-block-components": "^0.2.0"
   },
@@ -31,5 +33,13 @@
     "gatsby",
     "graphql",
     "wordpress"
-  ]
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.7.4",
+    "@storybook/addon-actions": "^5.2.8",
+    "@storybook/addon-links": "^5.2.8",
+    "@storybook/addons": "^5.2.8",
+    "@storybook/react": "^5.2.8",
+    "babel-loader": "^8.0.6"
+  }
 }

src/stories/0-Welcome.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};

src/stories/1-Button.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);

src/stories/2-Byline.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Byline from '../components/byline';
+
+const props = {
+  date: 'March 10',
+  slug: 'the-slug',
+  author: {
+    name: 'Alfredo',
+    slug: 'author-alfredo'
+  }
+}
+
+export default {
+  title: 'Byline',
+};
+
+export const byline = () => <Byline props={props}  />;
+

src/stories/3-Header.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Header from '../components/header';
+
+export default {
+  title: 'Header',
+};
+
+export const header = () => <Header />;
+
+

src/stories/4-Footer.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Footer from '../components/footer';
+
+export default {
+  title: 'Footer',
+};
+
+export const footer = () => <Footer />;
+
+