add: docs for storybook #9120

kkemple · 2018-10-15T13:18:32Z

Added docs for using Storybook with Gatsby!

DSchau

Looks good! Would be kinda nice if we could slightly clean up the webpack config generation, but works well enough 🤷‍♂️

Thanks for this!

DSchau · 2018-10-15T13:29:51Z

docs/docs/visual-testing-with-storybook.md

+
+```js
+module.exports = (baseConfig, env, defaultConfig) => {
+  // Transpile Gatsby module because Gastby includes un-transpiled ES6 code.


We have an open issue for this. Maybe I'll fix this today and add a transpiled main field?

See #8821

Once #9123 is merged, we can remove this 🎉

#9123 did fix my situation where i was unit testing in a context that needed common-js, but i'm still seeing raw jsx in the module defined by the gatsby package, which causes problems for my storybook instance that was working before upgrading to v2.

normally module is still transpiled to some degree so that that it is at least valid js (which jsx is not) at some lowest common denominator, but still uses es module import/export. i normally handle producing es-module for module and common-js for main using rollup. if this were in place, there shouldn't be a need to transpile the gatsby package further when depending on it in a storybook project, etc.

if the team would be open to a build step that would produce both main and module with a process similar to this, i'd be happy to contribute. thoughts?

i opened a PR with a start toward this type of config to give a little more detail around the approach i typically use

amberleyromo · 2018-10-16T15:28:14Z

docs/docs/visual-testing-with-storybook.md

+title: Visual Testing with Storybook
+---
+
+Knowing your components look as intended in every permutation is not only a great way to test them visually, but also provides "living documentation" for them. This makes it easier for teams to 1) know what components are available to them in a given project and 2) what props those components accept and what all of the states of that component are. As your project grows over time having this information available will be invaluable.


I would add a quick one line defining what Storybook is

Could just copy directly from https://storybook.js.org/basics/introduction/

travi · 2018-10-16T15:38:15Z

not sure if you're interested in including information about automating this further, but Percy provides a nice integration to very easily use their service with an existing storybook setup.

Robdel12 · 2018-10-16T17:24:08Z

If anyone needs help / info with Percy I'd love to help! I'm starting at the support manager later this month. :)

hugovk

A few little corrections, and some suggestions to make things a bit less wordy, as people generally don't read long text on-screen.

hugovk · 2018-10-16T19:07:38Z

docs/docs/visual-testing-with-storybook.md

+
+## Setting up your environment
+
+In order to set up Storybook you will need to install a few dependencies and then do some custom configuration to make Storybook work with your Gatsby environment. The first thing is to get the Storybook CLI installed if you don't have it already.


This can be less wordy, perhaps:

Suggested change

In order to set up Storybook you will need to install a few dependencies and then do some custom configuration to make Storybook work with your Gatsby environment. The first thing is to get the Storybook CLI installed if you don't have it already.

To set up Storybook you need to install dependencies and do some custom configuration. First, install the Storybook CLI.

hugovk · 2018-10-16T19:12:17Z

docs/docs/visual-testing-with-storybook.md

+}
+```
+
+Next we need up make some adjustments to Storybook's default `webpack` configuration so that we can tranpile Gatsby source files, as well as ensure we have all the necessary `babel` plugins we need to transpile Gatsby components.


Suggested change

Next we need up make some adjustments to Storybook's default `webpack` configuration so that we can tranpile Gatsby source files, as well as ensure we have all the necessary `babel` plugins we need to transpile Gatsby components.

Next we make some adjustments to Storybook's default `webpack` configuration so we can transpile Gatsby source files, and to ensure we have the necessary `babel` plugins to transpile Gatsby components.

hugovk · 2018-10-16T19:13:07Z

docs/docs/visual-testing-with-storybook.md

+
+A full guide to writing stories is beyond the scope of this guide, but we'll take a look at creating a story.
+
+First, create the story file. Storybook looks for all files with a `.story.js` extension and loads them into Storybook for you. Generally you will want your stories near where the component is defined, however since this Gatsby, if you want stories for your pages, you will have to create those files outside of the `pages` directory.


Suggested change

First, create the story file. Storybook looks for all files with a `.story.js` extension and loads them into Storybook for you. Generally you will want your stories near where the component is defined, however since this Gatsby, if you want stories for your pages, you will have to create those files outside of the `pages` directory.

First, create the story file. Storybook looks for all files with a `.story.js` extension and loads them into Storybook for you. Generally you will want your stories near where the component is defined, however since this is Gatsby, if you want stories for your pages, you will have to create those files outside of the `pages` directory.

calcsam · 2018-10-28T05:01:23Z

This has been hanging out for a while, so I incorporated @KyleAMathews' changes and am going to merge this in. Thanks @kkemple! @hugovk thanks for the suggestions -- perhaps you can open a PR with them and tag @kkemple or @shannonbux ?

hugovk · 2018-10-28T08:22:20Z

@calcsam Done, please see PR #9494.

kkemple · 2018-10-29T13:04:51Z

@travi I think Percy docs would be great! Might make sense to make it it's own thing though

@calcsam

…xt on-screen (#9494) As suggested by @calcsam in #9120 (comment), here's my review comments in its own PR. Follows https://www.gatsbyjs.org/docs/gatsby-style-guide/#write-concisely cc @kkemple @shannonbux Also use “you” as the pronoun, following the [style guide](https://www.gatsbyjs.org/docs/gatsby-style-guide/#use-you-as-the-pronoun).

* add: docs for storybook * Update visual-testing-with-storybook.md

@calcsam

…xt on-screen (gatsbyjs#9494) As suggested by @calcsam in gatsbyjs#9120 (comment), here's my review comments in its own PR. Follows https://www.gatsbyjs.org/docs/gatsby-style-guide/#write-concisely cc @kkemple @shannonbux Also use “you” as the pronoun, following the [style guide](https://www.gatsbyjs.org/docs/gatsby-style-guide/#use-you-as-the-pronoun).

* add: docs for storybook * Update visual-testing-with-storybook.md

@calcsam

…xt on-screen (gatsbyjs#9494) As suggested by @calcsam in gatsbyjs#9120 (comment), here's my review comments in its own PR. Follows https://www.gatsbyjs.org/docs/gatsby-style-guide/#write-concisely cc @kkemple @shannonbux Also use “you” as the pronoun, following the [style guide](https://www.gatsbyjs.org/docs/gatsby-style-guide/#use-you-as-the-pronoun).

add: docs for storybook

7a6e0a9

kkemple self-assigned this Oct 15, 2018

kkemple requested a review from a team October 15, 2018 13:18

kkemple requested a review from a team as a code owner October 15, 2018 13:18

DSchau approved these changes Oct 15, 2018

View reviewed changes

amberleyromo reviewed Oct 16, 2018

View reviewed changes

hugovk reviewed Oct 16, 2018

View reviewed changes

Update visual-testing-with-storybook.md

6b57206

calcsam merged commit d72c49e into master Oct 28, 2018

hugovk deleted the topics/docs-storybook branch October 28, 2018 06:02

hugovk mentioned this pull request Oct 28, 2018

Make text a little less wordy, as people generally don't read long text on-screen #9494

Merged

jedrichards pushed a commit to jedrichards/gatsby that referenced this pull request Nov 1, 2018

add: docs for storybook (gatsbyjs#9120)

edd623f

* add: docs for storybook * Update visual-testing-with-storybook.md

gpetrioli pushed a commit to gpetrioli/gatsby that referenced this pull request Jan 22, 2019

add: docs for storybook (gatsbyjs#9120)

c7a6fc1

* add: docs for storybook * Update visual-testing-with-storybook.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add: docs for storybook #9120

add: docs for storybook #9120

kkemple commented Oct 15, 2018

DSchau left a comment

DSchau Oct 15, 2018

DSchau Oct 15, 2018

DSchau Oct 15, 2018

travi Oct 18, 2018

travi Oct 18, 2018

amberleyromo Oct 16, 2018

KyleAMathews Oct 27, 2018

travi commented Oct 16, 2018

Robdel12 commented Oct 16, 2018

hugovk left a comment

hugovk Oct 16, 2018

hugovk Oct 16, 2018

hugovk Oct 16, 2018

calcsam commented Oct 28, 2018

hugovk commented Oct 28, 2018

kkemple commented Oct 29, 2018


		## Setting up your environment

		In order to set up Storybook you will need to install a few dependencies and then do some custom configuration to make Storybook work with your Gatsby environment. The first thing is to get the Storybook CLI installed if you don't have it already.

	In order to set up Storybook you will need to install a few dependencies and then do some custom configuration to make Storybook work with your Gatsby environment. The first thing is to get the Storybook CLI installed if you don't have it already.
	To set up Storybook you need to install dependencies and do some custom configuration. First, install the Storybook CLI.

	Next we need up make some adjustments to Storybook's default `webpack` configuration so that we can tranpile Gatsby source files, as well as ensure we have all the necessary `babel` plugins we need to transpile Gatsby components.
	Next we make some adjustments to Storybook's default `webpack` configuration so we can transpile Gatsby source files, and to ensure we have the necessary `babel` plugins to transpile Gatsby components.


		A full guide to writing stories is beyond the scope of this guide, but we'll take a look at creating a story.

		First, create the story file. Storybook looks for all files with a `.story.js` extension and loads them into Storybook for you. Generally you will want your stories near where the component is defined, however since this Gatsby, if you want stories for your pages, you will have to create those files outside of the `pages` directory.

add: docs for storybook #9120

add: docs for storybook #9120

Conversation

kkemple commented Oct 15, 2018

DSchau left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

travi commented Oct 16, 2018

Robdel12 commented Oct 16, 2018

hugovk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calcsam commented Oct 28, 2018

hugovk commented Oct 28, 2018

kkemple commented Oct 29, 2018