Add Storybook to the user guide #738

arunoda · 2016-09-24T13:46:39Z

Add instructions on how to add Storybook to the User Guide.
I also mentioned a bit of information about benefits of using Storybook.

Related to: #297 (comment)

usirin · 2016-09-27T22:31:48Z

Congrats @arunoda! It's awesome to see react-storybook getting into a mainstream tool like create-react-app. Can't wait.

sylvainbannier

seems there's a missing link in the doc

sylvainbannier · 2016-09-28T19:31:47Z

packages/react-scripts/template/README.md

+* 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 with React Storybook


missing link ?

gaearon · 2016-09-28T19:38:56Z

packages/react-scripts/template/README.md

@@ -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)
+- [Turbo Charge Component Development with React Storybook](#turbo-charge-component-development-with-react-storybook)


This looks too much like an ad :-) Can we make it appear a bit more utilitarian?

How about this?

Developing UI Components with React Storybook.

Sounds good

gaearon · 2016-09-28T19:39:24Z

packages/react-scripts/template/README.md

+* With some emoji
+* With disabled mode
+
+With React Storybook, you can manage these different states (or stories) and develop them without running your app. You can also deploy your Storybook as a static app.


Here it would be great to mention that this is a third party tool.

How about this?

NOTE: React Storybook is an open source third party tool. It's maintained by the community, but not the core React team.

Rather than making a separate note, would be nice to integrate organically into the paragraph as a first sentence. It doesn't need to be super thorough. Just saying "React Storybook is a project that <...>" makes it clear enough.

gaearon · 2016-09-28T19:41:30Z

packages/react-scripts/template/README.md

+Then, apply following command inside your app:
+
+```sh
+getstorybook


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?

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

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

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

Old title was looks like a marketing pitch. Change it to something looks great. The new one is: Developing UI Components with React Storybook.

arunoda · 2016-10-05T09:11:00Z

@gaearon I've apply changes as suggested and now getstorybook and @kadira/storybook par with CRA features.

gaearon · 2016-10-05T10:52:12Z

I’m almost happy to merge it but I’m not quite satisfied with the first run experience.

The URL should be highlighted: storybookjs/storybook#531.
The errors should be more obvious: storybookjs/storybook#532.

Another thing I found confusing is it’s not clear what I should do next. The guide explains:

Just like that, you can add your own components as stories.
You can also edit those components and see changes right away.
(Try editing the Button component located at src/stories/Button.js.)

This is okay but I can see it causing confusion:

The user might think they need to create components inside src/stories rather than inside their app.
The user might not realize they can import existing components into Storybook.

I would rather want to see a step-by-step guide to adding an existing component to storybook:

Import your component from src/stories/index.js
Add a storiesOf('MyComponent', module) call
Add add() calls for different states of your component

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import App from '../App';

storiesOf('App', module)
  .add('normal', () => (
    <App />
  ));

And then mention that we recommend using it on smaller components than App.

arunoda · 2016-10-05T13:27:05Z

@gaearon I think I can work on those issues on Storybook. (You've submitted)

We use Button as an example because it's something we can use without knowing user's components.

I can see the confusion it might cause.

We can change the example on Writing Stories page to use some real component in his app. Assuming Header as a hypothetical components inside his app.

I'm quite not sure, we can should mention using App as a story. Initially just after setup this is fine. But, in a real project we have more complex setup inside the App, may be with some Redux stuff. May be App is no longer available.

That's why I like to use something like Header instead of App for your suggested getting started workflow.

yanivtal · 2016-10-05T15:51:11Z

I understand Kadira is monetizing their hosted Storybook service. Will Create React App also provide free marketing for other tools?

arunoda · 2016-10-05T15:59:19Z

@yanivtal I want to clear about what we are doing here.

We don't mention anything about our hosted services here.
Storybook is not a marketing tool for any product. It's a totally 100% open source product where developers love to use.
We've no intention to make any of that closed source.

Yes, we are trying to build some hosted services and make development of Storybook self sustaining without relying on donations. I think there's nothing wrong with that.

yanivtal · 2016-10-05T16:11:32Z

@gaearon @arumoda I don't think there's anything wrong with what you're doing. More people should be able to make a living off their tools. But Storybook isn't a library. It's a freemium service. Get started for free or use our hosted service for a better experience. There's nothing wrong with that, but I don't think Create React App should favor some paid services over others.

stevewillard · 2016-10-05T16:13:47Z

@yanivtal But, it is a library. It's not a freemium service.
https://github.com/kadirahq/react-storybook

npm i -g getstorybook

yanivtal · 2016-10-05T16:27:00Z

K, I'll withdraw my concerns. Keep up the great work everyone!

arunoda · 2016-10-07T07:32:50Z

@gaearon I've fixed issues you've mentioned on the React Storybook repo.
Also, now the welcome screen looks like this. (I've published a new version of the getstorybook tool)

I assume this is much better than the previous one.

sylvainbannier · 2016-10-07T10:08:58Z

also it would be nice to have default stories for actual CRA components instead of new ones.

storiesOf('App', module)
  .add('normal', () => (
    <App />
  ));

instead of :

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => (
    <Button onClick={action('clicked')}>Hello Button</Button>
  ))
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
  ));

arunoda · 2016-10-07T11:19:04Z

@sylvainbannier We tried that.
Some users add storybook to their CRA powered app after they've refactored it into a real app structure.
So, we can't 100% sure App component is exists.
Even if that exists, if might container stuff like Redux, Relay or something that doesn't work on Storybook.

That's why we go with some example Component.

just-boris · 2016-10-09T11:28:44Z

I have tried to follow this guide and set up storybook into my project. Actually, I didn't find any create-react-app specific "integration".

getstorybook command creates two new folders: .storybook with configuration and stories with some stories configurations. These folders don't know anything about create-react-app structure, I can add storybook into any other project same way, but I can't say that this will be an "integration".

To name this thing integration, I expected at least that getstorybook will try to find my components in src folder and create stories for them, not just put some extra components that have nothing in common with my code.

Also, I don't understand the purpose of separate stories folder. At the time, when we promote benefits of the colocating source and test code, the separate stories folder looks like a step back.

arunoda · 2016-10-09T17:43:24Z

@just-boris yep it's not like a direct integration to CRA.

Storybook has a it's own webpack setup and allow developers to customize it as they want.
With the emerge of CRA, we've added a default webpack config which is almost similar to CRA. That's the kind of integration we've right now.

CRA doesn't offer ways to extend it for good reasons. So, this is our kind of integration which works pretty fine and not hard to manage. It creates few files.

You've a pretty valid point about the stories directory. I think we should move it to the src directory by default. Since CRA doesn't impose a way to manage project architecture, it's up to user to load stories from where he/she needs. We offer ways to do that.

This is a completely optional thing. That's why I hope we don't do any direct integration to CRA codebase or send it by default with CRA. This is just a section on the docs.
Adding this won't do any harm, but this may help developers to build their components in a pretty nice way.

just-boris · 2016-10-24T12:33:03Z

Hey, it seems like there is no any progress.
As well as in my alternative PR #921.

Does is mean that not very many people interested in this feature, so we can close this?

arstin · 2016-11-15T18:27:24Z

FWIW, I hope Storybook gets the small promotion of being in the CRA docs as an optional tool. Styleguidist is nice and it may be worthwhile to also add it to CRA in the "optional ecosystem", but it's not really comparable to Storybook. Storybook is the leading and best supported option among a number of solutions tackling a true component-based workflow. The point isn't just to collaborate with designers or to have a reference page for widgets. It's to support a whole new frontend development workflow which helps to scale development teams, improve UI testing, make edge cases explicit, speed up new developer onboarding, support user research, provide a standard on which new tools for designers can be built, share modules across projects, develop new features in isolation from the app itself, and on and on.

Is Storybook there yet? No. Are details like the stories directory exactly right? Probably not. But they keep pushing forward and, given it's true potential will only be realized as it scales in users and contributors, could use the very modest help of being featured in CRA docs.

FTR, I have no personal investment in either option. I don't (yet?) use Storybook, and only tried Styleguidist for a few weeks before deciding it didn't fit my personal needs. I'm just speaking as someone whose imagination was captured by trying devcards in Clojurescript a couple years ago and is excited the future is slowly starting to arrive.

gaearon · 2016-11-20T19:12:21Z

Does is mean that not very many people interested in this feature, so we can close this?

It means I haven't had time to review it 😉 .

gaearon · 2016-11-20T19:15:57Z

LGTM.

* Add Storybook to the user guide * Add the missing "Snapshot Testing" link. * Change the title to something nicer Old title was looks like a marketing pitch. Change it to something looks great. The new one is: Developing UI Components with React Storybook. * Mention React Storybook as a third party tool. * Nits * Minor changes

robfe · 2018-03-07T01:57:13Z

Should this now suggest you use npm i -g @storybook/cli instead?

Add Storybook to the user guide

18c3476

ghost added the CLA Signed label Sep 24, 2016

ghost added the CLA Signed label Sep 27, 2016

sylvainbannier suggested changes Sep 28, 2016

View reviewed changes

gaearon suggested changes Sep 28, 2016

View reviewed changes

gaearon reviewed Sep 28, 2016

View reviewed changes

gaearon added the docs label Sep 30, 2016

facebook-github-bot added the CLA Signed label Sep 30, 2016

This was referenced Sep 30, 2016

Adding storybook #297

Closed

A global CLI for running a single component #645

Closed

arunoda added 3 commits September 30, 2016 22:43

Add the missing "Snapshot Testing" link.

04f0387

Change the title to something nicer

16347ba

Old title was looks like a marketing pitch. Change it to something looks great. The new one is: Developing UI Components with React Storybook.

Mention React Storybook as a third party tool.

686cc62

facebook-github-bot added the CLA Signed label Oct 5, 2016

gaearon added 2 commits October 5, 2016 11:29

Nits

96627c1

Minor changes

ef29d2d

gaearon approved these changes Oct 5, 2016

View reviewed changes

facebook-github-bot added the CLA Signed label Oct 5, 2016

facebook-github-bot added the CLA Signed label Oct 7, 2016

facebook-github-bot added the CLA Signed label Oct 9, 2016

just-boris mentioned this pull request Oct 17, 2016

add information about React-styleguidist #921

Closed

gaearon merged commit 8cf45e1 into facebook:master Nov 20, 2016

lock bot locked and limited conversation to collaborators Jan 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Storybook to the user guide #738

Add Storybook to the user guide #738

arunoda commented Sep 24, 2016

usirin commented Sep 27, 2016

sylvainbannier left a comment

sylvainbannier Sep 28, 2016

arunoda Sep 30, 2016

gaearon Sep 28, 2016 •

edited

Loading

arunoda Sep 30, 2016

arunoda Sep 30, 2016

gaearon Sep 30, 2016

gaearon Sep 28, 2016

arunoda Sep 30, 2016

arunoda Sep 30, 2016 •

edited

Loading

gaearon Sep 30, 2016

gaearon Sep 28, 2016

arunoda Sep 30, 2016 •

edited

Loading

arunoda Sep 30, 2016

arunoda Oct 5, 2016

arunoda commented Oct 5, 2016

gaearon commented Oct 5, 2016

arunoda commented Oct 5, 2016

yanivtal commented Oct 5, 2016

arunoda commented Oct 5, 2016 •

edited

Loading

yanivtal commented Oct 5, 2016

stevewillard commented Oct 5, 2016

yanivtal commented Oct 5, 2016

arunoda commented Oct 7, 2016

sylvainbannier commented Oct 7, 2016

arunoda commented Oct 7, 2016

just-boris commented Oct 9, 2016

arunoda commented Oct 9, 2016

just-boris commented Oct 24, 2016

arstin commented Nov 15, 2016

gaearon commented Nov 20, 2016

gaearon commented Nov 20, 2016

robfe commented Mar 7, 2018

Add Storybook to the user guide #738

Add Storybook to the user guide #738

Conversation

arunoda commented Sep 24, 2016

usirin commented Sep 27, 2016

sylvainbannier left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon Sep 28, 2016 • edited Loading

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

arunoda Sep 30, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arunoda Sep 30, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arunoda commented Oct 5, 2016

gaearon commented Oct 5, 2016

arunoda commented Oct 5, 2016

yanivtal commented Oct 5, 2016

arunoda commented Oct 5, 2016 • edited Loading

yanivtal commented Oct 5, 2016

stevewillard commented Oct 5, 2016

yanivtal commented Oct 5, 2016

arunoda commented Oct 7, 2016

sylvainbannier commented Oct 7, 2016

arunoda commented Oct 7, 2016

just-boris commented Oct 9, 2016

arunoda commented Oct 9, 2016

just-boris commented Oct 24, 2016

arstin commented Nov 15, 2016

gaearon commented Nov 20, 2016

gaearon commented Nov 20, 2016

robfe commented Mar 7, 2018

gaearon Sep 28, 2016 •

edited

Loading

arunoda Sep 30, 2016 •

edited

Loading

arunoda Sep 30, 2016 •

edited

Loading

arunoda commented Oct 5, 2016 •

edited

Loading