KEMBAR78
Update Storybook examples to v6.0 by rafaelalmeidatk · Pull Request #16139 · vercel/next.js · GitHub
Skip to content

Update Storybook examples to v6.0 #16139

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 6 commits into from
Aug 15, 2020
Merged

Update Storybook examples to v6.0 #16139

merged 6 commits into from
Aug 15, 2020

Conversation

rafaelalmeidatk
Copy link
Contributor

@rafaelalmeidatk rafaelalmeidatk commented Aug 13, 2020 •
edited
Loading

I updated the current Storybook example to the newest version. With the new major version there is no configuration necessary for TypeScript projects. After updating the TS example I realized they ended up identically, so I deleted it

@ijjk ijjk added the examples Issue was opened via the examples template. label Aug 13, 2020
@ijjk
Copy link
Member

ijjk commented Aug 13, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
buildDuration 12.4s 12.5s ⚠️ +68ms
nodeModulesSize 57.3 MB 57.3 MB ✓
Page Load Tests Overall increase ✓
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.263 2.205 -0.06
/ avg req/sec 1104.53 1133.62 +29.09
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.242 1.167 -0.07
/error-in-render avg req/sec 2012.37 2141.74 +129.37
Client Bundles (main, webpack, commons)
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
677f882d2ed8..ee8a.js gzip 10 kB 10 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-25aa383..eece.js gzip 6.72 kB 6.72 kB ✓
webpack-ccf5..276a.js gzip 751 B 751 B ✓
Overall change 56.6 kB 56.6 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
677f882d2ed8..dule.js gzip 5.92 kB 5.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-08f768c..dule.js gzip 5.79 kB 5.79 kB ✓
webpack-10c7..dule.js gzip 751 B 751 B ✓
Overall change 51.6 kB 51.6 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
polyfills-75..1629.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB ✓
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB ✓
hooks-585f07..95a3.js gzip 887 B 887 B ✓
index-c7b63f..fc02.js gzip 227 B 227 B ✓
link-4c2bd9b..eadd.js gzip 1.29 kB 1.29 kB ✓
routerDirect..ebc7.js gzip 284 B 284 B ✓
withRouter-2..db68.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_app-97e743e..dule.js gzip 626 B 626 B ✓
_error-b4004..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-696209..dule.js gzip 387 B 387 B ✓
index-a4dd74..dule.js gzip 226 B 226 B ✓
link-236a801..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-1..dule.js gzip 282 B 282 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_buildManifest.js gzip 273 B 273 B ✓
_buildManife..dule.js gzip 279 B 279 B ✓
Overall change 552 B 552 B ✓
Rendered Page Sizes
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
index.html gzip 947 B 947 B ✓
link.html gzip 955 B 955 B ✓
withRouter.html gzip 939 B 939 B ✓
Overall change 2.84 kB 2.84 kB ✓
Serverless Mode
General
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
buildDuration 13.9s 13.7s -152ms
nodeModulesSize 57.3 MB 57.3 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
677f882d2ed8..ee8a.js gzip 10 kB 10 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-25aa383..eece.js gzip 6.72 kB 6.72 kB ✓
webpack-ccf5..276a.js gzip 751 B 751 B ✓
Overall change 56.6 kB 56.6 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
677f882d2ed8..dule.js gzip 5.92 kB 5.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-08f768c..dule.js gzip 5.79 kB 5.79 kB ✓
webpack-10c7..dule.js gzip 751 B 751 B ✓
Overall change 51.6 kB 51.6 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
polyfills-75..1629.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB ✓
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB ✓
hooks-585f07..95a3.js gzip 887 B 887 B ✓
index-c7b63f..fc02.js gzip 227 B 227 B ✓
link-4c2bd9b..eadd.js gzip 1.29 kB 1.29 kB ✓
routerDirect..ebc7.js gzip 284 B 284 B ✓
withRouter-2..db68.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_app-97e743e..dule.js gzip 626 B 626 B ✓
_error-b4004..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-696209..dule.js gzip 387 B 387 B ✓
index-a4dd74..dule.js gzip 226 B 226 B ✓
link-236a801..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-1..dule.js gzip 282 B 282 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_buildManifest.js gzip 273 B 273 B ✓
_buildManife..dule.js gzip 279 B 279 B ✓
Overall change 552 B 552 B ✓
Serverless bundles
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_error.js 1.03 MB 1.03 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.03 MB 1.03 MB ✓
link.js 1.07 MB 1.07 MB ✓
routerDirect.js 1.06 MB 1.06 MB ✓
withRouter.js 1.06 MB 1.06 MB ✓
Overall change 5.26 MB 5.26 MB ✓
Commit: ef3b136

lfades
lfades previously approved these changes Aug 14, 2020
View reviewed changes
Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

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

@rafaelalmeidatk Thank you, looks very good! 💯

Usually I leave a readme with a redirection to the example that replaces it, but I'm going to make an exception in this case as the example was quite new and to make sure people don't get confused with how TypeScript works in Storybook when manually looking for a Storybook example.

@rafaelalmeidatk
Copy link
Contributor Author

rafaelalmeidatk commented Aug 15, 2020 •
edited
Loading

@lfades I added a TS section in the README to avoid confusion

@ijjk
Copy link
Member

ijjk commented Aug 15, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
buildDuration 12.6s 13s ⚠️ +479ms
nodeModulesSize 57.3 MB 57.3 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.331 2.402 ⚠️ +0.07
/ avg req/sec 1072.67 1040.66 ⚠️ -32.01
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.394 1.476 ⚠️ +0.08
/error-in-render avg req/sec 1793.44 1694.14 ⚠️ -99.3
Client Bundles (main, webpack, commons)
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
677f882d2ed8..c139.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-52b3964..e4b8.js gzip 6.74 kB 6.74 kB ✓
webpack-ccf5..276a.js gzip 751 B 751 B ✓
Overall change 56.9 kB 56.9 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
677f882d2ed8..dule.js gzip 6.12 kB 6.12 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-af2596f..dule.js gzip 5.82 kB 5.82 kB ✓
webpack-10c7..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
polyfills-75..1629.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB ✓
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB ✓
hooks-585f07..95a3.js gzip 887 B 887 B ✓
index-c7b63f..fc02.js gzip 227 B 227 B ✓
link-4c2bd9b..eadd.js gzip 1.29 kB 1.29 kB ✓
routerDirect..ebc7.js gzip 284 B 284 B ✓
withRouter-2..db68.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_app-97e743e..dule.js gzip 626 B 626 B ✓
_error-b4004..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-696209..dule.js gzip 387 B 387 B ✓
index-a4dd74..dule.js gzip 226 B 226 B ✓
link-236a801..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-1..dule.js gzip 282 B 282 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_buildManifest.js gzip 321 B 321 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 650 B 650 B ✓
Rendered Page Sizes
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
index.html gzip 947 B 947 B ✓
link.html gzip 955 B 955 B ✓
withRouter.html gzip 942 B 942 B ✓
Overall change 2.84 kB 2.84 kB ✓
Serverless Mode
General
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
buildDuration 14.6s 14.4s -200ms
nodeModulesSize 57.3 MB 57.3 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
677f882d2ed8..c139.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-52b3964..e4b8.js gzip 6.74 kB 6.74 kB ✓
webpack-ccf5..276a.js gzip 751 B 751 B ✓
Overall change 56.9 kB 56.9 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
677f882d2ed8..dule.js gzip 6.12 kB 6.12 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-af2596f..dule.js gzip 5.82 kB 5.82 kB ✓
webpack-10c7..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
polyfills-75..1629.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB ✓
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB ✓
hooks-585f07..95a3.js gzip 887 B 887 B ✓
index-c7b63f..fc02.js gzip 227 B 227 B ✓
link-4c2bd9b..eadd.js gzip 1.29 kB 1.29 kB ✓
routerDirect..ebc7.js gzip 284 B 284 B ✓
withRouter-2..db68.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_app-97e743e..dule.js gzip 626 B 626 B ✓
_error-b4004..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-696209..dule.js gzip 387 B 387 B ✓
index-a4dd74..dule.js gzip 226 B 226 B ✓
link-236a801..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-1..dule.js gzip 282 B 282 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_buildManifest.js gzip 321 B 321 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 650 B 650 B ✓
Serverless bundles
vercel/next.js canary rafaelalmeidatk/next.js update-storybook-examples Change
_error.js 1.03 MB 1.03 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.03 MB 1.03 MB ✓
link.js 1.07 MB 1.07 MB ✓
routerDirect.js 1.06 MB 1.06 MB ✓
withRouter.js 1.06 MB 1.06 MB ✓
Overall change 5.27 MB 5.27 MB ✓
Commit: 101643a

lfades
lfades approved these changes Aug 15, 2020
View reviewed changes
Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

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

Thank you!

@lfades lfades merged commit 521cc62 into vercel:canary Aug 15, 2020
@matamatanot
Copy link
Contributor

Next.js seems to encourage the use of CSS Modules vercel/documentation#536.
I feel it would be better to add a case using CSS Modules. Is there a Storybook user who doesn't apply the style at all?

@matamatanot matamatanot mentioned this pull request Aug 17, 2020
Closed
m-lautenbach pushed a commit to m-lautenbach/next.js that referenced this pull request Aug 20, 2020
@rafaelalmeidatk @kodiakhq
Update Storybook examples to v6.0 (vercel#16139)
fdf35c9 
* Update with-storybook example

* Delete with-storybook-typescript example

* Add TypeScript section to the README

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@lfades lfades lfades approved these changes

@chibicode chibicode Awaiting requested review from chibicode

@ijjk ijjk Awaiting requested review from ijjk

@Timer Timer Awaiting requested review from Timer

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees

No one assigned

Labels

examples Issue was opened via the examples template.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@rafaelalmeidatk @ijjk @matamatanot @lfades