Storybook: Use satisfies operator to get helpful errors about missing props

[oswian]

Proposed Changes

As we expand our usage of Storybook and our components continue to evolve, it's important that we render components within Storybook with the correct props to avoid inadvertently breaking stories or introducing bugs.

Currently, if we add a new required prop or rename an existing required prop in a component, and we don't update the corresponding stories, the TypeScript compiler won't raise any errors. This can lead to stories being in an incorrect state, which can be difficult to catch.

This change adopts the TS satisfies operator to address this issue. It allows us to ensure that the props passed to a component in a story conform to the expected shape defined by the component's props interface. If a story is missing a required prop or has an incorrect prop, the TypeScript compiler will now catch the issue and provide a clear error message.

Eg. we add a new required prop:

TS will now helpfully detect that we haven't yet added this prop to our story:

Testing Instructions

Try adding a new required prop to FeaturesGridProps or ComparisonGridProps (or rename an existing required prop) and check that you can see a TS warning in the relevant .stories.tsx files.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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 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)?

[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.

[matticbot]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[ddc22]

TIL

[ddc22]

Interesting TIL!

The docs explains it as a way to enforce the type
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html

I was curious and did some playing around with this feature
.

The error is more prominent!

[oswian]

Sharing this post which I found helpful: https://www.totaltypescript.com/clarifying-the-satisfies-operator

"When you use a colon, the type BEATS the value ... When you use satisfies, the value BEATS the type"

So in your example if we make newProp optional, satisfies narrows the type and provides a nice warning:

[oswian]

@ddc22 Thanks for the review!