Skip to content
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

Merged

Conversation

HipsterBrown
Copy link
Contributor

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.

@vercel
Copy link

vercel bot commented Aug 18, 2020

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/formium/tsdx/4biloi9zk
✅ Preview: https://tsdx-git-fork-hipsterbrown-update-react-storybook-template.formium.vercel.app

@agilgur5 agilgur5 linked an issue Aug 19, 2020 that may be closed by this pull request
@agilgur5 agilgur5 added templates scope: templates Related to an init template, not necessarily to core (but could influence core) and removed templates labels Aug 19, 2020
Copy link
Collaborator

@agilgur5 agilgur5 left a 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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Thing.stories.tsx
Thing.stories.tsx # EDIT THIS

templates/react-with-storybook/.storybook/main.js Outdated Show resolved Hide resolved
templates/react-with-storybook/stories/Thing.stories.tsx Outdated Show resolved Hide resolved
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!
*/
Copy link
Collaborator

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?

Copy link
Contributor Author

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.

Copy link
Collaborator

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?

Copy link
Contributor

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!?

Copy link
Contributor

@kylemh kylemh left a 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

templates/react-with-storybook/.storybook/main.js Outdated Show resolved Hide resolved
templates/react-with-storybook/stories/Thing.stories.tsx Outdated Show resolved Hide resolved
templates/react-with-storybook/.storybook/main.js Outdated Show resolved Hide resolved
templates/react-with-storybook/.storybook/main.js Outdated Show resolved Hide resolved
Copy link
Collaborator

@agilgur5 agilgur5 left a 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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Thing.stories.tsx #EDIT THIS
Thing.stories.tsx # EDIT THIS

can we make sure this is consistent with the others per my previous suggestion

templates/react-with-storybook/README.md Show resolved Hide resolved
@kylemh
Copy link
Contributor

kylemh commented Aug 22, 2020

Thanks again, @HipsterBrown. Been swamped with work.

@HipsterBrown
Copy link
Contributor Author

Updated with your feedback @kylemh and @agilgur5. I added a link to the addon-actions parameter configuration for automatic matching. link

Thanks for all your feedback! 👍

Copy link
Collaborator

@agilgur5 agilgur5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @HipsterBrown !

@agilgur5 agilgur5 merged commit 51e47a7 into jaredpalmer:master Aug 25, 2020
@agilgur5

This comment has been minimized.

@allcontributors

This comment has been minimized.

@agilgur5
Copy link
Collaborator

@all-contributors please add @HipsterBrown for code, docs, example

@allcontributors
Copy link
Contributor

@agilgur5

I've put up a pull request to add @HipsterBrown! 🎉

@agilgur5
Copy link
Collaborator

@all-contributors please add @kylemh for review, questions

@allcontributors
Copy link
Contributor

@agilgur5

I've put up a pull request to add @kylemh! 🎉

@HipsterBrown HipsterBrown deleted the update-react-storybook-template branch August 25, 2020 14:07
paul-vd pushed a commit to EezyQuote/tsdx that referenced this pull request Dec 1, 2020
- 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: templates Related to an init template, not necessarily to core (but could influence core)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

use @storybook/preset-typescript and support MDX on Storybook template
3 participants