Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.
Storybook has a rich Addons ecosystem that really adds a lot to the developer experience. Here I show how to set up the JSX Addon in Storybook to display the code behind React components. The juxtaposition of code and visual display can be very effective documentation for any users of your components.
Instructor: [00:01] First, we're going to install some dev dependencies for Storybook/Addons. In particular, we're going to use the JSXAddon.
[00:09] To configure the Addons, we're going to create a new file in the Storybook folder called Addons.js, then just declare our dependency StorybookAddonJSX/register, and that calls it within. Internally, this executes a registration function.
[00:28] Now over in config.js, we're going to import an additional function called setAddon from Storybook/React, and we're going to import JSXAddon from StorybookAddonJSX. Then we're just going to pair them together with setAddon, JSXAddon.
[00:50] That's all the setup we need to do. Now we can use this globally in any of those stories by just saying addWithJSX for any JSX component. Since we're using a React code base, this is basically all the components.
[01:07] Now when I run Storybook, and then I refresh on the right, I can see the JSX of whatever the component I'm demonstrating on the top.
Why would you add storybook-addon-jsx
as a dev dependency, and not a regular dependency, how would people view the JSX when using the storybook without it?
It seems like a lot of the packages that you've installed thus far in the course have been put in dev dependencies, but they are packages that provide code that is executed in production. I don't understand why you would do this. As far as I understand this would make the application error out immediately if you try to run it as a person who only installs the production assets.
Why would you add
storybook-addon-jsx
as a dev dependency, and not a regular dependency, how would people view the JSX when using the storybook without it? It seems like a lot of the packages that you've installed thus far in the course have been put in dev dependencies, but they are packages that provide code that is executed in production. I don't understand why you would do this. As far as I understand this would make the application error out immediately if you try to run it as a person who only installs the production assets.
Can someone answer above question please
@BrightPixels
My guess here is that, since storybook is meant to be used alongside a project to develop UI components in isolation, it is something meant for the developer to use in tandem with a project when developing it. When the components are created, they would be used in the actual application that they are being developed for. Since the production app wouldn't run or require the storybook, it makes sense to keep all storybook related packages as a development dependency.
Of course this all goes out the window if you're doing something like creating a storybook UI library for the sake of displaying the UI library itself (which is what is being done here), in that case everything should be a production dependency since the end user is interacting with the storybook to view the UI. Any of the projects displayed here would be examples of this: https://storybook.js.org/docs/basics/live-examples/
This is what makes most sense to me.
You've probably noticed that this course has a lot of out of date information. I'd suggest using the "feedback" button in the toolbar of the site to voice your complaints (if you have any) like I did. Nobody seems to be answering comments here at all.
@aryyya Thanks for the quick reply. All makes sense. My use case is the latter, I am working on a UI library which need to be published.
Anyone else having issues with the JSX addon? For me it doesn't display what I am expecting, i.e. the JSX with props used. But it's showing me the implenetation of the component. Please see screenshots. I am getting the same isseus when using the decorator and addwithjsx.
Screenshot of JSX addon panel: https://imgur.com/YogkOYa
Screenshot of the story: https://imgur.com/lYZishm
Screenshot of the component implenetation: https://imgur.com/4SLazwo
Screenshot of the config file: https://imgur.com/hXcigHa
hey friends! sorry i am just seeing this feedback now. I am rerecording all the lessons so that you have up to date information. for @BrightPixels in particular, yes this was meant for local dev but of course promote to a full dependency as you needed (in fact i will do that upon rerecording).
as for your JSX issue, i can replicate it if i use a default export of an anonymous component as you have. in my video (and as best practice in general) i used a named export for Button so the component has a name.
Another question Shawn (or anyone else who can help)
For one of my components, The JSX Addon is showing a prop that I didn't add but it looks like, it got it from the defaultProps which feels wrong to me, as I expect the JSX addon to show exactly how I used the component:
Screenshot of the Story which show how am using the component (without any props): https://imgur.com/WMF6S4p
Screenshot of how JSX Addon panel (which is showing a prop that I haven't used): https://imgur.com/bSrKOaf
Screenshot of the component's propTypes and defaultProps settings which is where I think JSX Addon has got the props from: https://imgur.com/sQMNo7f
The withInfo panel shows what I am expecting. Anyway to make the JSX Addon show the expected output?
Any can help with above question please?
@brightpixels I'm not sure, I can't quite reproduce what you're reporting. In any case I will fully rerecord this course this week. If you'd like to share a small repro i can investigate further, and you can contact me on twitter @swyx or on email swyx@netlify.com.
@Shawn I have emailed you and DM'd you but so far go no replies. Not sure if my messages are getting through.
In case anyone's wondering,
addWithJSX
is exported from storybook-addon-jsx.