Storybook: Exclude costly and broken stories

[mirka]

Proposed Changes

Temporarily exclude broken stories from the main Storybook.

Why are these changes being made?

The client/** glob currently matches three subfolders:

• components
• my-sites
• sites

The stories in my-sites (ActivationModal) and sites (StagingSiteCard) do not build properly. Plus, Storybook takes forever to start up when these two paths are included. I am inclined to temporarily exclude them if they are not being actively used or maintained.

Testing Instructions

Confirm that yarn storybook:start now boots the main Storybook instance in a reasonable amount of time.

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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[mirka]

@okmttdhr @fushar @wojtekn Are these stories still worth fixing? I have a stub branch where I fixed most immediate issues, but I don't want to spend too much time on this if it isn't critical. Or maybe you're aware of something in the chain that changed to break these stories.

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[ciampo]

The savings in time are much greater than I expected!

The proposed approach seems sensible to me, let's understand if the stories in my-sites/ and sites/ are still relevant / used before potentially fixing them and adding them back.

[tyxla]

I'd prefer to keep this as it was, so folks can still add stories in other dirs.

[mirka]

Unfortunately Storybook is still having trouble combing through the entire client/ folder for some reason. I bisected through the top-level subfolders to check what the bottlenecks were, and there were a lot 🤔

		'../client/__mocks__/**/*.stories.{js,jsx,tsx}',
		'../client/a8c-for-agencies/**/*.stories.{js,jsx,tsx}',
		'../client/assets/**/*.stories.{js,jsx,tsx}',
		'../client/auth/**/*.stories.{js,jsx,tsx}',
		'../client/blocks/**/*.stories.{js,jsx,tsx}',
		'../client/boot/**/*.stories.{js,jsx,tsx}',
		'../client/components/**/*.stories.{js,jsx,tsx}',
		'../client/controller/**/*.stories.{js,jsx,tsx}',
		'../client/data/**/*.stories.{js,jsx,tsx}',
		'../client/devdocs/**/*.stories.{js,jsx,tsx}',
		'../client/document/**/*.stories.{js,jsx,tsx}',
		'../client/gutenberg/**/*.stories.{js,jsx,tsx}',
		'../client/hosting/**/*.stories.{js,jsx,tsx}',
		'../client/incoming-redirect/**/*.stories.{js,jsx,tsx}',
		'../client/jetpack-app/**/*.stories.{js,jsx,tsx}',
		'../client/jetpack-cloud/**/*.stories.{js,jsx,tsx}',
		'../client/jetpack-connect/**/*.stories.{js,jsx,tsx}',
		// '../client/landing/**/*.stories.{js,jsx,tsx}',
		'../client/launchpad/**/*.stories.{js,jsx,tsx}',
		// '../client/layout/**/*.stories.{js,jsx,tsx}',
		// '../client/lib/**/*.stories.{js,jsx,tsx}',
		'../client/login/**/*.stories.{js,jsx,tsx}',
		'../client/mailing-lists/**/*.stories.{js,jsx,tsx}',
		// '../client/me/**/*.stories.{js,jsx,tsx}',
		// '../client/my-sites/**/*.stories.{js,jsx,tsx}',
		'../client/node_modules/**/*.stories.{js,jsx,tsx}',
		'../client/notifications/**/*.stories.{js,jsx,tsx}',
		// '../client/performance-profiler/**/*.stories.{js,jsx,tsx}',
		'../client/post-editor/**/*.stories.{js,jsx,tsx}',
		'../client/reader/**/*.stories.{js,jsx,tsx}',
		'../client/server/**/*.stories.{js,jsx,tsx}',
		// '../client/signup/**/*.stories.{js,jsx,tsx}',
		'../client/site-profiler/**/*.stories.{js,jsx,tsx}',
		// '../client/sites/**/*.stories.{js,jsx,tsx}',
		'../client/sites-dashboard/**/*.stories.{js,jsx,tsx}',
		// '../client/state/**/*.stories.{js,jsx,tsx}',
		'../client/support/**/*.stories.{js,jsx,tsx}',
		'../client/switch-site/**/*.stories.{js,jsx,tsx}',
		'../client/test/**/*.stories.{js,jsx,tsx}',
		'../client/test-helpers/**/*.stories.{js,jsx,tsx}',

All of the commented out subfolders add a non-negligible amount of time to the Storybook startup. For now I think it would be wise to keep this an opt-in at the subfolder level. Although we could technically make an exclude list from the known bottleneck subfolders, it would be annoying to debug once another bottleneck emerges.

[tyxla]

Ah, that's a bummer, but it makes sense if it has a major impact on build time 👍

[tyxla]

I vote for deleting those broken stories altogether.

I don't see much value in having these stories anyway, even if they were working.

We can also remove the ReduxDecorator and any other unused supplementing utils.

[mirka]

Confirmed with @taipeicoder that we can delete them.

Done in 75d8c10

[tyxla]

LGTM!

Great cleanup, thanks @mirka 🚀

[wojtekn]

@mirka I've added an issue https://github.com/Automattic/dotcom-forge/issues/10433 so we can check the effort to bring those back.