Addes storybook

.storybook/config.js

@@ -0,0 +1,23 @@
+import { configure } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+
+// automatically import all files ending in *.stories.js
+const req = require.context("../src", true, /.stories.(js|ts|jsx|tsx)$/)
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
+
+// 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__ = ""
+global.__BASE_PATH__ = ""
+// 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)
+}
+configure(loadStories, module)

.storybook/webpack.config.js

@@ -0,0 +1,39 @@
+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"]
+
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve("babel-loader"),
+    options: {
+      presets: [["react-app", { flow: false, typescript: true }]],
+      plugins: [
+        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.resolve.extensions.push(".ts", ".tsx")
+
+  return config
+}

gatsby-config.js

@@ -1,9 +1,9 @@
 module.exports = {
   siteMetadata: {
-    title: "Gatsby Default Starter",
+    title: "My Opinionated Gatsby Default Starter",
     description:
-      "Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.",
-    author: "@gatsbyjs",
+      "Default Gatsby starter with a bunch of stuff that I like to use tacked on.",
+    author: "@alrayyes",
   },
   plugins: [
     "gatsby-plugin-react-helmet",

package.json

@@ -18,13 +18,20 @@
     "react-helmet": "^6.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.2",
     "@babel/preset-typescript": "^7.10.1",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/react": "^5.3.19",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
     "@types/react-helmet": "^6.0.0",
     "@types/react-test-renderer": "^16.9.2",
     "@typescript-eslint/eslint-plugin": "^3.1.0",
     "@typescript-eslint/parser": "^3.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-preset-react-app": "^9.1.2",
     "eslint": "^7.1.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-react-app": "^5.2.1",
@@ -62,7 +69,7 @@
     "clean": "gatsby clean",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "storybook": "NODE_ENV=production start-storybook -s public",
+    "storybook": "NODE_ENV=production start-storybook -s public -p 6006",
     "build-storybook": "NODE_ENV=production build-storybook -s public"
   },
   "repository": {

src/components/header.stories.tsx

@@ -0,0 +1,7 @@
+import { storiesOf } from "@storybook/react"
+import React from "react"
+import Header from "./header"
+
+storiesOf("Header component", module).add(`default`, () => (
+  <Header siteTitle={"My Opinionated Gatsby Default Starter"} />
+))

src/components/image.stories.tsx

@@ -0,0 +1,5 @@
+import { storiesOf } from "@storybook/react"
+import React from "react"
+import Image from "./image"
+
+storiesOf("Image component", module).add(`default`, () => <Image />)

src/components/layout.stories.tsx

@@ -0,0 +1,7 @@
+import { storiesOf } from "@storybook/react"
+import React from "react"
+import Layout from "./layout"
+
+storiesOf("Layout component", module).add(`default`, () => (
+  <Layout>content</Layout>
+))

src/pages/404.stories.tsx

@@ -0,0 +1,5 @@
+import { storiesOf } from "@storybook/react"
+import React from "react"
+import NotFoundPage from "./404"
+
+storiesOf("404 page", module).add(`default`, () => <NotFoundPage />)

src/pages/index.stories.tsx

@@ -0,0 +1,5 @@
+import { storiesOf } from "@storybook/react"
+import React from "react"
+import IndexPage from "./index"
+
+storiesOf("Index page", module).add(`default`, () => <IndexPage />)

src/pages/page-2.stories.tsx

@@ -0,0 +1,5 @@
+import { storiesOf } from "@storybook/react"
+import React from "react"
+import SecondPage from "./page-2"
+
+storiesOf("Second page", module).add(`default`, () => <SecondPage />)

src/pages/using-typescript.stories.tsx

@@ -0,0 +1,15 @@
+import { storiesOf } from "@storybook/react"
+import React from "react"
+import UsingTypescript from "./using-typescript"
+import { UsingTypescriptDataInterface } from "../@types/pages/using-typescript"
+
+const data: UsingTypescriptDataInterface = {
+  data: {
+    site: {
+      buildTime: "2020-06-05T10:23:36.000Z",
+    },
+  },
+}
+storiesOf("Using Typescript page", module).add(`default`, () => (
+  <UsingTypescript data={data.data} path={"/using-typescript/"} />
+))