Update to Storybook v8 #101924

mirka · 2025-03-26T21:42:21Z

Closes ARC-34

Proposed Changes

Updates all the Storybook instances to v8.6.9.

Also renames the Storybook boot scripts in all the workspaces to storybook:start. See #101924 (comment) for why.

Why are these changes being made?

For modern features and faster launch times.

Testing Instructions

All Storybooks should start as before, without errors.

yarn storybook:start
yarn workspace @automattic/components storybook
yarn workspace @automattic/site-admin storybook
yarn workspace @automattic/composite-checkout storybook
yarn workspace @automattic/onboarding storybook
yarn workspace @automattic/search storybook
yarn workspace @automattic/launchpad storybook
yarn workspace @automattic/privacy-toolset storybook
yarn workspace @automattic/plans-grid-next storybook

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-03-26T21:42:36Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-138765

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-138765&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-138765&env=a8c-for-agencies

matticbot · 2025-03-26T21:43:07Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~2018 bytes removed 📉 [gzipped])

Details

name                   parsed_size           gzip_size
entry-login                -6981 B  (-0.3%)    -2175 B  (-0.3%)
entry-main                 -6726 B  (-0.3%)    -2124 B  (-0.4%)
entry-stepper              -3227 B  (-0.2%)     -874 B  (-0.2%)
entry-subscriptions        -3161 B  (-0.2%)     -933 B  (-0.2%)
entry-domains-landing      -2740 B  (-0.4%)     -657 B  (-0.3%)
entry-browsehappy           -753 B  (-0.4%)     -153 B  (-0.3%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~17793 bytes removed 📉 [gzipped])

Details

name                                parsed_size           gzip_size
plugins                                 -8923 B  (-0.3%)    -2131 B  (-0.2%)
reader                                  -7832 B  (-0.2%)    -2920 B  (-0.3%)
patterns                                -6251 B  (-0.3%)    -2450 B  (-0.4%)
media                                   -5404 B  (-0.3%)    -1314 B  (-0.3%)
jetpack-cloud-plugin-management         -5310 B  (-0.2%)    -1067 B  (-0.2%)
a8c-for-agencies-plugins                -4835 B  (-0.2%)    -1119 B  (-0.2%)
home                                    -4531 B  (-0.3%)    -1040 B  (-0.2%)
overview                                -4332 B  (-0.2%)     -699 B  (-0.1%)
domains                                 -4006 B  (-0.1%)     -759 B  (-0.1%)
plans                                   -3847 B  (-0.2%)     -998 B  (-0.2%)
purchases                               -3814 B  (-0.1%)     -400 B  (-0.1%)
checkout                                -3585 B  (-0.2%)     -381 B  (-0.1%)
a8c-for-agencies-sites                  -3429 B  (-0.2%)     -598 B  (-0.1%)
async-step-unified-plans                -3278 B  (-0.3%)    -1149 B  (-0.4%)
site-purchases                          -3183 B  (-0.1%)     -243 B  (-0.0%)
hosting                                 -2883 B  (-0.2%)     -568 B  (-0.1%)
settings                                -2681 B  (-0.3%)     -911 B  (-0.3%)
jetpack-cloud-agency-dashboard          -2658 B  (-0.2%)     -632 B  (-0.2%)
backup                                  -2613 B  (-0.2%)     -669 B  (-0.2%)
jetpack-cloud-partner-portal            -2599 B  (-0.3%)     -615 B  (-0.2%)
site-settings                           -2494 B  (-0.2%)     -549 B  (-0.1%)
account                                 -2426 B  (-0.3%)     -763 B  (-0.3%)
marketplace                             -2383 B  (-0.4%)     -679 B  (-0.4%)
github-deployments                      -2379 B  (-0.2%)     -476 B  (-0.1%)
scan                                    -2370 B  (-0.3%)     -581 B  (-0.2%)
staging-site                            -2368 B  (-0.2%)     -393 B  (-0.1%)
security                                -2329 B  (-0.3%)     -741 B  (-0.3%)
stats                                   -2180 B  (-0.2%)     -531 B  (-0.2%)
gutenberg-editor                        -2173 B  (-0.4%)     -508 B  (-0.3%)
notification-settings                   -2130 B  (-0.3%)     -646 B  (-0.3%)
jetpack-connect                         -2124 B  (-0.2%)     -470 B  (-0.1%)
site-monitoring                         -2120 B  (-0.2%)     -412 B  (-0.1%)
site-blocks                             -2062 B  (-0.3%)     -591 B  (-0.3%)
site-logs                               -2041 B  (-0.2%)     -352 B  (-0.1%)
developer                               -1911 B  (-0.3%)     -609 B  (-0.3%)
help                                    -1879 B  (-0.3%)     -596 B  (-0.3%)
privacy                                 -1867 B  (-0.3%)     -587 B  (-0.3%)
posts-custom                            -1848 B  (-0.3%)     -500 B  (-0.2%)
posts                                   -1846 B  (-0.3%)     -501 B  (-0.2%)
a8c-for-agencies-client                 -1846 B  (-0.1%)     -181 B  (-0.0%)
account-close                           -1831 B  (-0.3%)     -547 B  (-0.3%)
me                                      -1818 B  (-0.3%)     -561 B  (-0.3%)
async-step-unified-domains              -1792 B  (-0.2%)     -517 B  (-0.2%)
activity                                -1772 B  (-0.2%)     -540 B  (-0.2%)
subscribers                             -1741 B  (-0.1%)     -355 B  (-0.1%)
sites-dashboard                         -1731 B  (-0.1%)     -315 B  (-0.1%)
comments                                -1722 B  (-0.2%)     -641 B  (-0.3%)
jetpack-cloud-pricing                   -1706 B  (-0.2%)     -369 B  (-0.2%)
jetpack-social                          -1693 B  (-0.3%)     -438 B  (-0.2%)
devdocs                                 -1687 B  (-0.9%)     -169 B  (-0.3%)
settings-performance                    -1671 B  (-0.3%)     -614 B  (-0.4%)
jetpack-app                             -1662 B  (-0.4%)     -711 B  (-0.5%)
settings-podcast                        -1563 B  (-0.3%)     -543 B  (-0.4%)
jetpack-cloud-features-comparison       -1560 B  (-0.2%)     -323 B  (-0.2%)
google-my-business                      -1548 B  (-0.3%)     -469 B  (-0.3%)
import                                  +1540 B  (+0.2%)     +619 B  (+0.3%)
settings-security                       -1529 B  (-0.3%)     -528 B  (-0.4%)
async-step-use-my-domain                -1516 B  (-0.3%)     -504 B  (-0.3%)
a8c-for-agencies-overview               -1516 B  (-0.1%)     -186 B  (-0.1%)
pages                                   -1511 B  (-0.3%)     -430 B  (-0.3%)
jetpack-cloud-settings                  -1491 B  (-0.2%)     -419 B  (-0.2%)
jetpack-search                          -1473 B  (-0.3%)     -380 B  (-0.2%)
site-performance                        -1357 B  (-0.1%)     -582 B  (-0.1%)
settings-writing                        -1353 B  (-0.2%)     -432 B  (-0.3%)
settings-newsletter                     -1282 B  (-0.2%)     -400 B  (-0.3%)
email                                   -1276 B  (-0.1%)     -336 B  (-0.1%)
settings-jetpack                        -1258 B  (-0.2%)     -333 B  (-0.2%)
stepper-user-step                       -1252 B  (-0.5%)     -517 B  (-0.7%)
customize                               -1230 B  (-0.4%)     -314 B  (-0.3%)
add-ons                                 -1228 B  (-0.3%)     -432 B  (-0.3%)
themes                                  +1207 B  (+0.1%)     +548 B  (+0.2%)
jetpack-cloud                           -1200 B  (-0.3%)     -429 B  (-0.3%)
entrepreneur-flow                       -1182 B  (-0.7%)     -497 B  (-0.9%)
jetpack-cloud-overview                  -1146 B  (-0.3%)     -395 B  (-0.3%)
a8c-for-agencies-referrals              -1134 B  (-0.1%)     -162 B  (-0.1%)
migrate                                 -1092 B  (-0.3%)     -353 B  (-0.3%)
jetpack-cloud-manage-pricing            -1072 B  (-0.3%)     -206 B  (-0.2%)
concierge                               -1069 B  (-0.2%)     -305 B  (-0.2%)
settings-discussion                     -1032 B  (-0.3%)     -364 B  (-0.3%)
a8c-for-agencies-woopayments            -1016 B  (-0.1%)     -132 B  (-0.0%)
a8c-for-agencies-marketplace            -1014 B  (-0.1%)     -297 B  (-0.1%)
a8c-for-agencies-migrations              -992 B  (-0.1%)      -96 B  (-0.0%)
a8c-for-agencies-team                    -949 B  (-0.1%)      -99 B  (-0.0%)
settings-reading                         -939 B  (-0.2%)     -321 B  (-0.3%)
signup                                   -903 B  (-0.3%)     -145 B  (-0.2%)
woocommerce-installation                 -881 B  (-0.3%)     -288 B  (-0.3%)
marketing                                -855 B  (-0.1%)     -253 B  (-0.1%)
woocommerce                              -844 B  (-0.3%)     -292 B  (-0.3%)
earn                                     -822 B  (-0.1%)     -239 B  (-0.1%)
preview                                  -816 B  (-0.3%)     -284 B  (-0.3%)
export                                   -792 B  (-0.3%)     -254 B  (-0.3%)
site-setup-flow                          -782 B  (-0.2%)     -132 B  (-0.1%)
onboarding-flow                          -754 B  (-0.3%)     -141 B  (-0.2%)
a8c-for-agencies-agency-tier             -699 B  (-0.3%)     -286 B  (-0.4%)
a8c-for-agencies-settings                -687 B  (-0.3%)     -276 B  (-0.4%)
a8c-for-agencies-purchases               -670 B  (-0.1%)       +4 B  (+0.0%)
people                                   -611 B  (-0.1%)     -219 B  (-0.1%)
a8c-for-agencies-landing                 -607 B  (-0.4%)     -262 B  (-0.5%)
readymade-template-flow                  -480 B  (-0.3%)       -9 B  (-0.0%)
a8c-for-agencies                         -442 B  (-0.4%)     -206 B  (-0.6%)
purchase-product                         -421 B  (-0.2%)     -199 B  (-0.4%)
jetpack-cloud-agency-signup              -421 B  (-0.5%)     -186 B  (-0.7%)
a8c-for-agencies-signup                  -406 B  (-0.2%)     -102 B  (-0.2%)
switch-site                              -378 B  (-0.2%)     -116 B  (-0.2%)
promote-post-i2                          -342 B  (-0.0%)     -106 B  (-0.0%)
theme                                    -307 B  (-0.0%)     +138 B  (+0.1%)
hundred-year-domain                      -264 B  (-0.1%)      -43 B  (-0.1%)
wpcom-xhr-request                        -247 B  (-1.2%)      -11 B  (-0.2%)
connect-domain                           -203 B  (-0.1%)      -53 B  (-0.1%)
hundred-year-plan                        -184 B  (-0.1%)      -26 B  (-0.0%)
hosted-site-migration-flow               -158 B  (-0.4%)      -49 B  (-0.4%)
site-migration-flow                      -150 B  (-0.4%)      -44 B  (-0.4%)
site-profiler                            +141 B  (+0.0%)     -371 B  (-0.4%)
example-flow                             -141 B  (-0.4%)      -38 B  (-0.3%)
update-design-flow                       -129 B  (-0.4%)      -12 B  (-0.1%)
new-hosted-site-flow                     -123 B  (-0.1%)      -32 B  (-0.1%)
accept-invite                            -123 B  (-0.1%)      -20 B  (-0.0%)
new-hosted-site-flow-user-included       -110 B  (-0.1%)      -28 B  (-0.1%)
copy-site-flow                            -87 B  (-0.1%)       -7 B  (-0.0%)
newsletter-flow                           -86 B  (-0.9%)      -32 B  (-0.9%)
write-flow                                -63 B  (-0.8%)      -39 B  (-1.3%)
start-writing-flow                        -59 B  (-0.5%)      -36 B  (-1.0%)
a8c-for-agencies-partner-directory        -55 B  (-0.0%)      -29 B  (-0.0%)
lasagnaMiddleware                         -54 B  (-0.2%)       -6 B  (-0.1%)
build-flow                                -48 B  (-0.5%)      -28 B  (-0.9%)
root                                      -40 B  (-1.7%)       -2 B  (-0.2%)
plugin-bundle-flow                        -25 B  (-0.3%)       -3 B  (-0.1%)
performance-profiler                      +22 B  (+0.0%)     -447 B  (-0.4%)
incoming-redirect                         -20 B  (-0.1%)       +5 B  (+0.1%)
hundred-year-domain-transfer              -17 B  (-0.5%)      -10 B  (-0.8%)
google-transfer                           -17 B  (-0.8%)       -4 B  (-0.4%)
update-options-flow                       -13 B  (-0.7%)       -6 B  (-0.7%)
transferring-hosted-site-flow             -13 B  (-0.2%)      -12 B  (-0.6%)
reblogging-flow                           -12 B  (-0.6%)       -8 B  (-0.8%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~13901 bytes removed 📉 [gzipped])

Details

name                                                                              parsed_size           gzip_size
async-load-comment-block-editor                                                       -6877 B  (-0.3%)    -2578 B  (-0.4%)
async-load-calypso-post-editor-editor-media-modal                                     -5696 B  (-0.4%)    -1572 B  (-0.4%)
async-load-automattic-global-styles-src-components-global-styles-variations           -5461 B  (-0.3%)    -2116 B  (-0.4%)
async-load-calypso-post-editor-media-modal                                            -5254 B  (-0.4%)    -1413 B  (-0.4%)
async-load-automattic-help-center-stepper                                             -3558 B  (-0.4%)    -1131 B  (-0.4%)
async-load-design-blocks                                                              -3463 B  (-0.2%)     -672 B  (-0.1%)
async-load-design                                                                     -3246 B  (-0.2%)    -1120 B  (-0.3%)
async-load-design-playground                                                          -3121 B  (-0.2%)    -1107 B  (-0.3%)
async-load-calypso-components-web-preview-component                                   -2071 B  (-0.4%)     -446 B  (-0.3%)
async-load-calypso-blocks-editor-checkout-modal                                       -1674 B  (-0.1%)      +43 B  (+0.0%)
async-load-signup-steps-plans-theme-preselected                                       -1636 B  (-0.3%)     -716 B  (-0.5%)
async-load-signup-steps-plans                                                         -1636 B  (-0.3%)     -712 B  (-0.5%)
async-load-calypso-notifications                                                      -1233 B  (-0.6%)     -589 B  (-1.0%)
async-load-purchase-modal-wrapper                                                     -1051 B  (-0.3%)      +50 B  (+0.0%)
async-load-signup-steps-page-picker                                                   -1043 B  (-0.3%)       +5 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...       -993 B  (-0.3%)      +24 B  (+0.0%)
async-load-automattic-help-center                                                      -811 B  (-0.1%)      -53 B  (-0.0%)
async-load-store-app-store-stats                                                       -797 B  (-0.3%)     -163 B  (-0.2%)
async-load-calypso-blocks-jitm-templates-home-task                                     -683 B  (-1.3%)     -294 B  (-1.5%)
async-load-signup-steps-p2-complete-profile                                            -640 B  (-0.4%)     -269 B  (-0.5%)
async-load-signup-steps-woocommerce-install-step-business-info                         -638 B  (-0.6%)     -247 B  (-0.7%)
async-load-signup-steps-emails                                                         -614 B  (-0.8%)     -231 B  (-0.9%)
async-load-signup-steps-user                                                           -610 B  (-0.3%)     -247 B  (-0.3%)
async-load-signup-steps-site-picker                                                    -592 B  (-0.3%)     -277 B  (-0.4%)
async-load-signup-steps-difm-site-picker                                               -592 B  (-0.3%)     -281 B  (-0.4%)
async-load-calypso-my-sites-stats-pages-subscribers                                    -569 B  (-0.3%)     -208 B  (-0.3%)
async-load-signup-steps-woocommerce-install-step-store-address                         -551 B  (-0.6%)     -211 B  (-0.7%)
async-load-calypso-blocks-support-article-dialog-dialog                                -548 B  (-0.6%)     -172 B  (-0.6%)
async-load-calypso-layout-command-palette                                              -507 B  (-0.2%)     -163 B  (-0.2%)
async-load-signup-steps-design-picker                                                  -503 B  (-0.8%)     -200 B  (-0.9%)
async-load-store-app-store-stats-listview                                              -467 B  (-0.4%)      -96 B  (-0.3%)
async-load-calypso-lib-account-settings-helper                                         -464 B  (-0.3%)     -162 B  (-0.3%)
async-load-signup-steps-new-or-existing-site                                           -459 B  (-0.7%)     -173 B  (-0.8%)
async-load-masterbar-cart-masterbar-cart-wrapper                                       -458 B  (-0.4%)      -90 B  (-0.2%)
async-load-signup-steps-clone-credentials                                              -455 B  (-0.5%)     -178 B  (-0.6%)
async-load-signup-steps-rewind-form-creds                                              -452 B  (-0.5%)     -173 B  (-0.6%)
async-load-signup-steps-p2-site                                                        -438 B  (-0.6%)     -160 B  (-0.7%)
async-load-signup-steps-p2-join-workspace                                              -433 B  (-0.9%)     -174 B  (-1.1%)
async-load-signup-steps-creds-confirm                                                  -428 B  (-0.6%)     -170 B  (-0.8%)
async-load-signup-steps-site                                                           -425 B  (-0.7%)     -154 B  (-0.8%)
async-load-signup-steps-creds-permission                                               -424 B  (-0.6%)     -164 B  (-0.7%)
async-load-calypso-blocks-product-purchase-features-list                               -420 B  (-0.9%)      -32 B  (-0.3%)
async-load-signup-steps-clone-ready                                                    -414 B  (-0.6%)     -167 B  (-0.8%)
async-load-signup-steps-site-or-domain                                                 -413 B  (-0.9%)     -167 B  (-1.1%)
async-load-signup-steps-woocommerce-install-transfer                                   -405 B  (-0.8%)     -166 B  (-1.0%)
async-load-signup-steps-site-options                                                   -404 B  (-0.8%)     -181 B  (-1.0%)
async-load-signup-steps-clone-point                                                    -400 B  (-0.1%)     -176 B  (-0.2%)
async-load-signup-steps-clone-destination                                              -400 B  (-0.8%)     -170 B  (-1.1%)
async-load-signup-steps-intent                                                         -398 B  (-0.8%)     -173 B  (-1.0%)
async-load-signup-steps-hosting-decider                                                -396 B  (-1.0%)     -161 B  (-1.2%)
async-load-signup-steps-starting-point                                                 -392 B  (-0.8%)     -161 B  (-1.0%)
async-load-signup-steps-social-profiles                                                -392 B  (-0.9%)     -169 B  (-1.2%)
async-load-signup-steps-p2-confirm-email                                               -392 B  (-0.9%)     -160 B  (-1.1%)
async-load-signup-steps-rewind-were-backing                                            -388 B  (-1.0%)     -156 B  (-1.2%)
async-load-signup-steps-clone-start                                                    -388 B  (-0.9%)     -158 B  (-1.1%)
async-load-signup-steps-clone-cloning                                                  -388 B  (-0.9%)     -163 B  (-1.1%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                                -380 B  (-0.7%)     -144 B  (-0.8%)
async-load-calypso-blocks-jitm-templates-notice                                        -380 B  (-0.7%)     -143 B  (-0.8%)
async-load-calypso-blocks-jitm-templates-default                                       -380 B  (-0.7%)     -144 B  (-0.8%)
async-load-signup-steps-woocommerce-install-confirm                                    -375 B  (-0.5%)     -161 B  (-0.7%)
async-load-signup-steps-store-features                                                 -369 B  (-0.7%)     -151 B  (-0.8%)
async-load-calypso-my-sites-current-site-notice                                        -361 B  (-0.6%)     -133 B  (-0.7%)
async-load-quick-language-switcher                                                     -348 B  (-0.3%)     -147 B  (-0.4%)
async-load-calypso-my-sites-site-settings-seo-settings-form                            -329 B  (-0.1%)      +35 B  (+0.0%)
async-load-calypso-my-sites-stats-components-line-chart                                -317 B  (-0.1%)     -330 B  (-0.4%)
async-load-calypso-my-sites-stats-pages-realtime-chart                                 -302 B  (-0.1%)     -323 B  (-0.4%)
async-load-calypso-jetpack-cloud-sections-sidebar-navigation-manage-selected-...       -296 B  (-0.3%)     -121 B  (-0.3%)
async-load-calypso-blocks-app-banner                                                   -287 B  (-0.2%)      -96 B  (-0.2%)
async-load-signup-steps-website-content                                                -274 B  (-0.1%)     -161 B  (-0.3%)
async-load-signup-steps-courses                                                        -264 B  (-0.2%)     -154 B  (-0.4%)
async-load-calypso-layout-guided-tours-component                                       -260 B  (-0.5%)      -83 B  (-0.6%)
async-load-design-wordpress-components-gallery                                         +240 B  (+0.0%)     +128 B  (+0.1%)
async-load-calypso-layout-masterbar-checkout                                           -216 B  (-0.3%)       +0 B
async-load-calypso-reader-sidebar                                                      -203 B  (-0.2%)      -69 B  (-0.3%)
async-load-calypso-my-sites-sidebar                                                    -183 B  (-0.6%)      -26 B  (-0.3%)
async-load-calypso-blocks-jitm                                                         +144 B  (+0.2%)      +19 B  (+0.1%)
async-load-calypso-blocks-calendar-popover                                             -142 B  (-0.1%)      -68 B  (-0.1%)
async-load-calypso-lib-network-connection                                              -138 B  (-3.3%)      -67 B  (-4.2%)
async-load-signup-steps-website-content-section-types                                  -114 B  (-0.1%)     -123 B  (-0.3%)
async-load-calypso-layout-community-translator                                         -112 B  (-0.4%)      -34 B  (-0.4%)
async-load-automattic-whats-new                                                        -109 B  (-0.3%)      -63 B  (-0.5%)
async-load-calypso-signup-step-wrapper                                                 -105 B  (-0.6%)      -21 B  (-0.3%)
async-load-calypso-my-sites-stats-pages-purchase                                       -103 B  (-0.2%)      -51 B  (-0.3%)
async-load-calypso-my-sites-stats-jetpack-upsell-section                                -95 B  (-0.7%)      -32 B  (-0.7%)
async-load-signup-steps-domains                                                         -94 B  (-0.0%)      -73 B  (-0.0%)
async-load-calypso-my-sites-current-site-domain-warnings                                -94 B  (-0.3%)      -18 B  (-0.2%)
async-load-calypso-reader-site-subscriptions-manager-pending-subscriptions-ma...        -93 B  (-0.2%)      -39 B  (-0.2%)
async-load-calypso-reader-site-subscriptions-manager-comment-subscriptions-ma...        -93 B  (-0.2%)      -39 B  (-0.2%)
async-load-twemoji                                                                      -80 B  (-0.7%)      -62 B  (-1.8%)
async-load-calypso-reader-search-stream                                                 -80 B  (-0.1%)      -34 B  (-0.2%)
async-load-calypso-components-jetpack-portal-nav                                        -80 B  (-0.2%)      -40 B  (-0.3%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice                        -79 B  (-0.3%)      -18 B  (-0.3%)
async-load-calypso-lib-store-sandbox-helper                                             -79 B  (-0.2%)      -37 B  (-0.3%)
async-load-masterbar-help-center                                                        -78 B  (-1.0%)       -6 B  (-0.2%)
async-load-calypso-blocks-cookie-banner                                                 -75 B  (-0.4%)      -31 B  (-0.4%)
async-load-automattic-search                                                            -70 B  (-0.3%)      -41 B  (-0.5%)
async-load-calypso-my-sites-stats-summary                                               -66 B  (-0.1%)      -26 B  (-0.2%)
async-load-calypso-blocks-jitm-templates-modal                                          -49 B  (-0.2%)      -23 B  (-0.3%)
async-load-calypso-blocks-login-two-factor-authentication-two-factor-content            -45 B  (-0.2%)       -8 B  (-0.1%)
async-load-calypso-reader-p-2-main                                                      -42 B  (-1.0%)      -14 B  (-1.0%)
async-load-calypso-reader-a-8-c-main                                                    -42 B  (-1.0%)      -13 B  (-0.9%)
async-load-calypso-my-sites-stats-comment-follows                                       -42 B  (-0.2%)      -12 B  (-0.2%)
async-load-calypso-my-sites-stats-pages-insights                                        -39 B  (-0.1%)      -44 B  (-0.3%)
async-load-calypso-lib-analytics-signup                                                 -38 B  (-0.3%)       -2 B  (-0.0%)
async-load-calypso-reader-site-subscription                                             -36 B  (-0.2%)      -12 B  (-0.2%)
async-load-calypso-my-sites-stats-stats-post-detail                                     -30 B  (-0.1%)       +1 B  (+0.0%)
async-load-calypso-layout-guided-tours                                                  -29 B  (-0.4%)      -11 B  (-0.5%)
async-load-calypso-blocks-reader-full-post                                              -29 B  (-0.1%)       -6 B  (-0.1%)
async-load-calypso-my-sites-stats-wordads                                               -25 B  (-0.1%)       -8 B  (-0.1%)
async-load-automattic-design-preview                                                    -25 B  (-0.1%)       -6 B  (-0.1%)
async-load-signup-steps-woocommerce-install-hooks-use-site-settings                     -23 B  (-0.3%)       +9 B  (+0.3%)
async-load-calypso-reader-discover-discover-stream                                      -20 B  (-0.2%)      -10 B  (-0.2%)
async-load-calypso-lib-analytics-track-resurrections                                    -18 B  (-1.5%)       -6 B  (-1.1%)
async-load-migration-success                                                            -17 B  (-0.2%)      -14 B  (-0.4%)
async-load-emoji-text                                                                   -12 B  (-0.0%)       +3 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Moment.js Locales (~115 bytes added 📈 [gzipped])

Details

name                    parsed_size            gzip_size
moment-locale-x-pseudo       -307 B  (-16.6%)       +2 B  (+0.2%)
moment-locale-is             -159 B   (-7.0%)       -2 B  (-0.2%)
moment-locale-bn-bd          +115 B   (+4.3%)      +12 B  (+1.1%)
moment-locale-hu             -107 B   (-4.9%)       -1 B  (-0.1%)
moment-locale-ku-kmr          -85 B   (-4.0%)       +0 B
moment-locale-tzl             -82 B   (-4.7%)       -1 B  (-0.1%)
moment-locale-ga              -75 B   (-5.2%)       +3 B  (+0.4%)
moment-locale-mk              +71 B   (+3.9%)      +10 B  (+1.1%)
moment-locale-bg              +71 B   (+4.0%)      +11 B  (+1.2%)
moment-locale-ta              +68 B   (+2.2%)      +14 B  (+1.2%)
moment-locale-tk              -67 B   (-4.3%)       -2 B  (-0.3%)
moment-locale-cs              -61 B   (-1.9%)      -13 B  (-1.0%)
moment-locale-vi              -59 B   (-3.6%)       -6 B  (-0.7%)
moment-locale-sq              -59 B   (-4.3%)      +10 B  (+1.4%)
moment-locale-fo              -57 B   (-4.5%)       +1 B  (+0.2%)
moment-locale-sk              -51 B   (-2.3%)       -2 B  (-0.2%)
moment-locale-et              -51 B   (-3.2%)       +0 B
moment-locale-zh-tw           +50 B   (+2.8%)       +9 B  (+1.0%)
moment-locale-zh-mo           +50 B   (+2.8%)       +9 B  (+1.0%)
moment-locale-zh-hk           +50 B   (+2.8%)      +11 B  (+1.2%)
moment-locale-zh-cn           +50 B   (+2.6%)       +8 B  (+0.8%)
moment-locale-ug-cn           +50 B   (+2.1%)       +7 B  (+0.7%)
moment-locale-tr              -49 B   (-2.8%)      -11 B  (-1.2%)
moment-locale-pt-br           -49 B   (-3.5%)       +5 B  (+0.7%)
moment-locale-az              -47 B   (-2.6%)      -10 B  (-1.1%)
moment-locale-pt              -43 B   (-3.1%)       +6 B  (+0.8%)
moment-locale-ru              +41 B   (+0.9%)      +12 B  (+0.7%)
moment-locale-se              -39 B   (-2.8%)       +2 B  (+0.3%)
moment-locale-gl              -39 B   (-2.5%)       +3 B  (+0.4%)
moment-locale-gd              -39 B   (-2.7%)       +2 B  (+0.3%)
moment-locale-sv              -35 B   (-2.6%)       +3 B  (+0.4%)
moment-locale-fi              -32 B   (-1.6%)      +11 B  (+1.2%)
moment-locale-oc-lnc          -29 B   (-1.8%)       -4 B  (-0.5%)
moment-locale-nb              -29 B   (-2.2%)       +1 B  (+0.1%)
moment-locale-da              -25 B   (-2.1%)       +1 B  (+0.2%)
moment-locale-tlh             +23 B   (+1.1%)      +11 B  (+1.2%)
moment-locale-nl              -23 B   (-1.1%)       +1 B  (+0.1%)
moment-locale-es-mx           -23 B   (-1.0%)       -1 B  (-0.1%)
moment-locale-es              -23 B   (-1.0%)       +0 B
moment-locale-fr-ch           -21 B   (-1.5%)       +2 B  (+0.3%)
moment-locale-fr-ca           -21 B   (-1.5%)       +1 B  (+0.1%)
moment-locale-fr              -21 B   (-1.0%)      -12 B  (-1.3%)
moment-locale-es-us           -21 B   (-0.9%)       -1 B  (-0.1%)
moment-locale-es-do           -21 B   (-0.9%)       +0 B
moment-locale-nn              -19 B   (-1.5%)       +1 B  (+0.1%)
moment-locale-nl-be           -19 B   (-0.9%)       +1 B  (+0.1%)
moment-locale-lb              -18 B   (-1.0%)      +12 B  (+1.3%)
moment-locale-ro              -15 B   (-1.1%)       +3 B  (+0.4%)
moment-locale-it-ch           -11 B   (-0.8%)       -1 B  (-0.1%)
moment-locale-it              -11 B   (-0.7%)       +0 B
moment-locale-ca              -11 B   (-0.6%)       -3 B  (-0.3%)

Locale data for moment.js. Unless you are upgrading the moment.js library, changes in these chunks are suspicious.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

mirka · 2025-03-26T21:50:12Z

packages/verbum-block-editor/package.json

 		"@automattic/calypso-build": "workspace:^",
 		"@automattic/calypso-color-schemes": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
+		"@swc/core": "^1.11.13",


Not sure why exactly, but seems like we need this explicit dependency now.

mirka · 2025-03-26T21:51:32Z

client/package.json

 	"devDependencies": {
 		"@automattic/calypso-eslint-overrides": "workspace:^",
 		"@sentry/webpack-plugin": "^1.21.0",
-		"@storybook/addon-actions": "^7.6.20",


Removing some of these explicit dependencies, as they are already included through the @automattic/calypso-storybook config.

(Same with the other package.jsons)

mirka · 2025-03-26T21:51:58Z

client/package.json

 		"react-router": "^6.23.1",
 		"react-test-renderer": "^18.3.1",
 		"redux-mock-store": "^1.5.5",
+		"storybook": "^8.6.9",


We now need this as an explicit dependency.

(Same with the other package.jsons)

mirka · 2025-03-26T21:52:31Z

packages/calypso-storybook/package.json

+		"@storybook/addon-actions": "^8.6.9",
+		"@storybook/addon-controls": "^8.6.9",
+		"@storybook/addon-docs": "^8.6.9",
+		"@storybook/addon-themes": "^8.6.9",
+		"@storybook/addon-toolbars": "^8.6.9",
+		"@storybook/addon-viewport": "^8.6.9",
+		"@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+		"@storybook/react-webpack5": "^8.6.9",
+		"@storybook/test": "^8.6.9",


Just consolidating all these to the devDependencies.

mirka · 2025-03-26T21:52:45Z

packages/calypso-storybook/src/index.js

 			'@storybook/addon-toolbars',
 			'@storybook/addon-viewport',
 			'@storybook/addon-themes',
+			'@storybook/addon-webpack5-compiler-babel',


Newly required for setup.

matticbot · 2025-03-26T21:59:28Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

blaze-dashboard
command-palette-wp-admin
help-center
notifications
o2-blocks
odyssey-stats
whats-new
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug storybook-8 on your sandbox.

oswian

LGTM. All storybooks started with no errors.

# Conflicts: # yarn.lock

mirka · 2025-03-27T19:39:01Z

bin/unit-test-suite.mjs

 const testWorkspaces = {
 	name: 'yarn',
-	args: 'workspaces foreach -A --verbose --parallel run storybook --ci --smoke-test',
+	args: 'workspaces foreach -A --verbose --parallel run storybook:start --ci --smoke-test',


Prior to this, the CI check was running storybook on all workspaces that had a storybook script defined in its package.json. From v8, because the Storybook CLI command was renamed from sb to storybook, the same CI check also runs the storybook command (not package.json script) directly wherever possible.

This is not desirable, as it runs the raw storybook command in workspaces like wp-calypso (where the boot script is called storybook:start rather than storybook) and @automattic/calypso-storybook (which doesn't have a Storybook instance to run).

In this PR, we address it by renaming all the storybook boot scripts to storybook:start, so they can be correctly targeted by a yarn workspaces foreach command like in the CI check.

As a bonus, the main wp-calypso Storybook is now also smoke tested, where previously it was not.

tyxla · 2025-03-30T13:13:39Z

Nice work getting this one to the finish line @mirka 👏

Update to Storybook v8

e16b0f6

mirka added [Type] Task dependencies Pull requests that update a dependency file Storybook labels Mar 26, 2025

mirka self-assigned this Mar 26, 2025

mirka requested review from a team as code owners March 26, 2025 21:42

mirka requested a review from aneeshd16 March 26, 2025 21:42

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 26, 2025

mirka mentioned this pull request Mar 26, 2025

chore(deps): update storybook monorepo to v8 (major) - autoclosed #88827

Closed

1 task

Fixup

3205530

mirka commented Mar 26, 2025

View reviewed changes

mirka requested a review from a team March 26, 2025 21:53

oswian approved these changes Mar 27, 2025

View reviewed changes

mirka added 3 commits March 28, 2025 02:47

Merge branch 'trunk' into storybook-8

b9f5c1c

# Conflicts: # yarn.lock

Fix type error (convert to CSF3)

0789746

Update storybook script names and CI check

602d255

mirka commented Mar 27, 2025

View reviewed changes

yarn dedupe

663959c

mirka merged commit 2d2332d into trunk Mar 28, 2025
13 checks passed

mirka deleted the storybook-8 branch March 28, 2025 10:55

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 28, 2025

jsnajdr mentioned this pull request May 19, 2025

Move the SWC dependency to the calypso-build package #103524

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update to Storybook v8 #101924

Update to Storybook v8 #101924

Uh oh!

mirka commented Mar 26, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 26, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented Mar 26, 2025 •

edited

Loading

Uh oh!

mirka Mar 26, 2025

Uh oh!

mirka Mar 26, 2025

Uh oh!

mirka Mar 26, 2025

Uh oh!

mirka Mar 26, 2025

Uh oh!

mirka Mar 26, 2025

Uh oh!

matticbot commented Mar 26, 2025 •

edited

Loading

Uh oh!

oswian left a comment

Uh oh!

mirka Mar 27, 2025

Uh oh!

Uh oh!

tyxla commented Mar 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Update to Storybook v8 #101924

Update to Storybook v8 #101924

Uh oh!

Conversation

mirka commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Mar 26, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mirka Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

matticbot commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oswian left a comment

Choose a reason for hiding this comment

Uh oh!

mirka Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tyxla commented Mar 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mirka commented Mar 26, 2025 •

edited

Loading

github-actions bot commented Mar 26, 2025 •

edited by matticbot

Loading

matticbot commented Mar 26, 2025 •

edited

Loading

matticbot commented Mar 26, 2025 •

edited

Loading