Skip to content

Add Storybook to the user guide#738

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gaearon merged 6 commits into from
Nov 20, 2016
Merged

Add Storybook to the user guide #738

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
18c3476
Add Storybook to the user guide
arunoda Sep 24, 2016
04f0387
Add the missing "Snapshot Testing" link.
arunoda Sep 30, 2016
16347ba
Change the title to something nicer
arunoda Oct 5, 2016
686cc62
Mention React Storybook as a third party tool.
arunoda Oct 5, 2016
96627c1
Nits
gaearon Oct 5, 2016
ef29d2d
Minor changes
gaearon Oct 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -41,6 +41,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Continuous Integration](#continuous-integration)
- [Disabling jsdom](#disabling-jsdom)
- [Experimental Snapshot Testing](#experimental-snapshot-testing)
- [Developing UI Components with React Storybook](#developing-ui-components-with-react-storybook)
- [Deployment](#deployment)
- [Building for Relative Paths](#building-for-relative-paths)
- [GitHub Pages](#github-pages)
Expand DownExpand Up@@ -858,6 +859,46 @@ Snapshot testing is a new feature of Jest that automatically generates text snap

This feature is experimental and still [has major usage issues](https://github.com/facebookincubator/create-react-app/issues/372) so we only encourage you to use it if you like experimental technology. We intend to gradually improve it over time and eventually offer it as the default solution for testing React components, but this will take time. [Read more about snapshot testing.](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html)

## Developing UI Components with React Storybook

Usually, in an app, you have a lot of UI components, and each of them has many different states.
For an example, a simple button component could have following states:

* With a text label.
* With an emoji.
* In the disabled mode.

Usually, it’s hard to see these states without running a sample app or some examples.

That’s where you could get some help from [React Storybook](https://github.com/kadirahq/react-storybook). **It is a third party tool that lets you develop components and see all their states in isolation from your app**.

![React Storybook Demo](http://i.imgur.com/7CIAWpB.gif)

You can also deploy your Storybook as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app.

**Here’s how to setup your app with Storybook:**

First, install the following npm package globally:

```sh
npm install -g getstorybook
```

Then, run the following command inside your app’s directory:

```sh
getstorybook

@gaearongaearonSep 28, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this guaranteed to work? Does Storybook support our Babel preset, NODE_PATH resolution, react-native-web alias, and other stuff in our Webpack configs? Is it being tested on npm 2?

@arunodaarunodaSep 30, 2016•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to get the NODE_PATH support and RN alias. It's pretty similar Webpack config and yep tested on NPM2.

@arunodaarunodaSep 30, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm going to finish these by next Wednesday: storybookjs/storybook#468

@arunodaarunodaOct 5, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, I finished all of them and we are ready to go.
See: storybookjs/storybook#468

```

After that, follow the instructions on the screen.

Learn more about React Storybook:

* Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook)
* [GitHub Repo](https://github.com/kadirahq/react-storybook)
* [Documentation](https://getstorybook.io/docs)
* [Snapshot Testing](https://github.com/kadirahq/storyshots) with React Storybook

## Deployment

## Building for Relative Paths
Expand Down