From 32e45be85c34905a808fa4d119aa08fd42a12941 Mon Sep 17 00:00:00 2001 From: Alfredo Navas Date: Tue, 3 Dec 2019 13:35:39 -0600 Subject: [PATCH 1/2] Adding StorybookJS to Gatsby Starter Theme --- .storybook/addons.js | 2 + .storybook/config.js | 16 + .storybook/webpack.config.js | 25 + package.json | 16 +- src/stories/0-Welcome.stories.js | 13 + src/stories/1-Button.stories.js | 17 + src/stories/2-Byline.stories.js | 19 + src/stories/3-Header.stories.js | 11 + src/stories/4-Footer.stories.js | 11 + yarn.lock | 3381 +++++++++++++++++++++++++++++- 10 files changed, 3435 insertions(+), 76 deletions(-) create mode 100644 .storybook/addons.js create mode 100644 .storybook/config.js create mode 100644 .storybook/webpack.config.js create mode 100644 src/stories/0-Welcome.stories.js create mode 100644 src/stories/1-Button.stories.js create mode 100644 src/stories/2-Byline.stories.js create mode 100644 src/stories/3-Header.stories.js create mode 100644 src/stories/4-Footer.stories.js diff --git a/.storybook/addons.js b/.storybook/addons.js new file mode 100644 index 0000000..6aed412 --- /dev/null +++ b/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/.storybook/config.js b/.storybook/config.js new file mode 100644 index 0000000..cffa464 --- /dev/null +++ b/.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) +} \ No newline at end of file diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js new file mode 100644 index 0000000..3b9a87d --- /dev/null +++ b/.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 + } \ No newline at end of file diff --git a/package.json b/package.json index df7f792..077e6d8 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,11 @@ "scripts": { "start": "gatsby develop", "build": "gatsby build", - "clean": "gatsby clean" + "clean": "gatsby clean", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook", + "storybook": "NODE_ENV=production start-storybook -s public", + "build-storybook": "NODE_ENV=production build-storybook -s public" }, "dependencies": { "gatsby": "^2.15.7", @@ -31,5 +35,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" + } } diff --git a/src/stories/0-Welcome.stories.js b/src/stories/0-Welcome.stories.js new file mode 100644 index 0000000..fe4de21 --- /dev/null +++ b/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 = () => ; + +toStorybook.story = { + name: 'to Storybook', +}; diff --git a/src/stories/1-Button.stories.js b/src/stories/1-Button.stories.js new file mode 100644 index 0000000..2d25260 --- /dev/null +++ b/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 = () => ; + +export const emoji = () => ( + +); diff --git a/src/stories/2-Byline.stories.js b/src/stories/2-Byline.stories.js new file mode 100644 index 0000000..99efad2 --- /dev/null +++ b/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 = () => ; + diff --git a/src/stories/3-Header.stories.js b/src/stories/3-Header.stories.js new file mode 100644 index 0000000..0acb4b1 --- /dev/null +++ b/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 = () =>
; + + diff --git a/src/stories/4-Footer.stories.js b/src/stories/4-Footer.stories.js new file mode 100644 index 0000000..84dec44 --- /dev/null +++ b/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 = () =>