Conversation
|
Deploy preview for helix-react ready! Built with commit ff951d0 |
100stacks
left a comment
100stacks
left a comment
There was a problem hiding this comment.
@nicko-winner, just a few small comments/questions. 👍
| import { callback } from '../storyUtils'; | ||
|
|
||
| addParameters({ | ||
| jsx: { skip: 0 }, |
There was a problem hiding this comment.
Hey @nicko-winner, what's the purpose of this line again?
There was a problem hiding this comment.
This creates a global param, and sets the arguments for storybook. We are telling the JSX plugin that is being applied globally to all stories to skip: 0 times, which means, do not exclude any markup from the JSX window display:
If you had markup that looks like this:
skip: 0 would would show all the markup.
<div>
<span>
<a></a>
</span>
</div>
skip: 1. would skip the outermost div:
<span>
<a></a>
</span>
skip: 2 would skip the outer 2 tags:
<a></a>
There was a problem hiding this comment.
Ok thanks for the explanation above. 🙄
| ## 📚 Storybook | ||
| [Storybook](https://storybook.js.org/) is an open source tool for developing UI components | ||
| in isolation for React, Vue, and Angular. | ||
| You can use this as a playground for all our components. | ||
|
|
||
| 1. Install Dependencies | ||
|
|
||
| ```bash | ||
| yarn install | ||
| ``` | ||
|
|
||
| 2. Run Storybook | ||
|
|
||
| ```bash | ||
| npm start | ||
| ``` | ||
| The script should automatically open Storybook in your browser, but you can always navigate to `http://localhost:6006/?path=/story` | ||
|
|
||
| 3. Play Around | ||
| <img width="639" alt="Screen Shot 2020-05-15 at 2 32 35 PM" src="https://user-images.githubusercontent.com/22566333/82084224-f5c99880-96b8-11ea-92e2-403b3f4378db.png"> | ||
|
|
There was a problem hiding this comment.
Until we add a separate contribution guide, please change to something like "Setting up a Local Dev Environment", for new contributors. 🙂 You can move it towards the end of README if that makes more sense.
| import { boolean, select, text } from '@storybook/addon-knobs/react'; | ||
|
|
||
| addParameters({ | ||
| jsx: { skip: 2 }, |
There was a problem hiding this comment.
What does the { skip: 2 } do?
There was a problem hiding this comment.
see earlier response.
Move storybook to setup dev ENV section
2 participants
Also removed storybook docs now that we are hosting storybook, if we wanted to bring them back maybe it would make more sense to add that information to a CONTRIBUTING.md.