add information about React-styleguidist #921
Conversation
|
We are currently using react-styleguidist at work and are loving it for the simplicity. It is also much more approachable for our ux designers. One thing to watch out for though is performance. Since it includes in-browser babel compiling and codemirror (web code editor) the bundle size is huge (~6mb). That takes a toll on loading time unfortunately |
|
@marvinhagemeister Thanks, I’m happy to hear that you like it! I think you’ll be glad to know that the next version will have much smaller bundle: we’ve replaced babel-standalone with buble (small and fast ES6+JSX transpiler) and CrodeMirror is loaded on demand. |
|
I would like to see Storybook and Styleguidist be subsections in a larger section called "Working on Components in Isolation". Its intro should explain the problem and mention there are multiple tools that do this. If you restructure it this way I'd be happy to merge it. |
|
Well, will pick this up and update by the end of this week. |
| npm install react-app-styleguidist --save-dev | ||
| ``` | ||
|
|
||
| Then add `styleguide` section into your package.json |
There was a problem hiding this comment.
It should be inside scripts, not on the top level.
|
Synchronized my changes with the latest version in the Anyway, I have updated the content, and it is kinda ready to merge. |
|
After adding the dependency, I got a peer dependency warning: Ignoring it, I followed the instructions to run the styleguide server. It was silent for a while (I wasn't sure if it was hanging), and after 10 seconds it printed: There is no indication of which URL I should open, or that it was building the project. It turned out that it was running at 3000—same as CRA default port—which is a little bit confusing from integration point of view. Finally, after opening it in the browser, this is all I see:
It's weird because the component doesn't seem to be there. All in all, I'd be happy to include this, but the project doesn't seem to get the small (but important) details right yet. |
|
Hi! Dan, thanks for your feedback! How can we improve it? We’re testing a new version that should work with CRA out of the box.
This shouldn’t be a problem.
This is easy to change.
I think it’s better to close this PR and I’ll send a new one as soon as we release a final version. Probably with steps similar to the new official installation guide |
|
Sounds good! I'm happy to get the PR in (sorry I haven't been responsive, but I was busy with React itself, and you might have noticed most other PRs were also neglected at the time). But we need to make sure that the first impression is pleasant and not confusing. I think storybook does it well with friendly console messages and generally predictable behavior. |
|
Awesome! By the way do you know any open source projects I can use to test CRA integration? |
|
These are two small ones: http://andrewhfarmer.com/sample-apps-create-react-app/ You can also search for |
Let's do that. 👍 |
Since I have checked PR #738 about React-Storybook integration and left some comment about that, I continued my search and have found another option: React-styleguidist.
This tool uses a bit different approach, but it fits better in the Create React App convention-based way.
'./src/components/**/!(*.test).js'Readme.mdfor every folder with component, where you can write some documentation about it. And (I really like that part) all code snippets will be compiled and executed. So your documentation is still usable as typical Markdown files, but then you can run styleguide builder to see them in action.I tried to create an integration between Create React App and React Styleguidist as easy as possible, so it worth trying, any feedback will be appreciated.
Also, there is one more similar tool – Carte-Blanche, but it is provided as Webpack plugin, but as far as Webpack config is not available here for direct changes, it was not possible to test it.