-
Notifications
You must be signed in to change notification settings - Fork 508
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.
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
update react-with-storybook template for Storybook v6 #805
update react-with-storybook template for Storybook v6 #805
Conversation
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/formium/tsdx/4biloi9zk |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not currently a Storybook user so I'll leave it to @kylemh to fully review, but I've left a few comments here
@@ -70,6 +70,10 @@ This is the folder structure we set up for you: | |||
index.tsx # EDIT THIS | |||
/test | |||
blah.test.tsx # EDIT THIS | |||
/stories | |||
Thing.stories.tsx |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thing.stories.tsx | |
Thing.stories.tsx # EDIT THIS |
children?: ReactChild; | ||
} | ||
|
||
// Please do not use types off of a default export module or else Storybook Docs will suffer. | ||
// see: https://github.com/storybookjs/storybook/issues/9556 | ||
/** | ||
* A custom Thing component. Neat! | ||
*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what's the purpose of adding these JSDoc comments?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To demonstrate the storybook docs generation using these comments.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
gotcha thought that was it -- does that apply to the props as well?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wow - TIL 😂
how do we comment a comment so it's self-explanatory!?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should work! Can you please add the global on*
parameter for actions to automatically work?
https://github.com/AirLabsTeam/air-core/blob/main/.storybook/preview.js
9a719ab
to
f9d5afc
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the iteration @HipsterBrown! Few more comments left. Seems like this'll be able to go out with v0.13.3 before I start merging in all the v0.14.0 changes
@@ -70,6 +70,10 @@ This is the folder structure we set up for you: | |||
index.tsx # EDIT THIS | |||
/test | |||
blah.test.tsx # EDIT THIS | |||
/stories | |||
Thing.stories.tsx #EDIT THIS |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thing.stories.tsx #EDIT THIS | |
Thing.stories.tsx # EDIT THIS |
can we make sure this is consistent with the others per my previous suggestion
Thanks again, @HipsterBrown. Been swamped with work. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work @HipsterBrown !
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
@all-contributors please add @HipsterBrown for code, docs, example |
I've put up a pull request to add @HipsterBrown! 🎉 |
@all-contributors please add @kylemh for review, questions |
I've put up a pull request to add @kylemh! 🎉 |
- remove `@storybook/addon-actions`, `@storybook/addon-docs`, `react-docgen-typescript-loader`, and `ts-loader` - add`@storybook/addon-essentials` - significantly simplify Storybook config - add JS/JSX support - fix a now deprecated globbing pattern - update the example Story to v6 usage - add JSDoc comments to example component to display Storybook docs generation - add a `preview.js` to automatically turn on all actions for event handlers - update/fix file structure in README
With the release of Storybook v6, there are updates to be made to migrate from v5.3 and allow the
react-with-storybook
template take advantage of the latest features, i.e. built-in Typescript support and new story format.