web: upgrade Storybook

Created by: valerybugakov

Context

Upgrading Storybook to the latest version to benefit from goodies released since Oct 14 and eventually enable lazy compilation in development mode. Read more about Storybook Lazy Compilation for Webpack here.

Slack thread for context.

Changes

1. Replaced deprecated static directories CLI flag with the configuration field.
2. Replaced ChromaticStory with withChromaticThemes global decorator to snapshot stories in the dark mode in Chromatic automatically. This is necessary because of the story-store API change that we relied on.
3. Introduced our wrapper around the isChromatic helper to locally test the change described above. Run CHROMATIC=true yarn storybook to test it.
4. Pinned prettier version to avoid huge diff in this PR. Let's unpin it in a follow-up PR.
5. Added React context to the Popover component to be able to change the HTML element where it's rendered. Thanks, @vovakulikov, for implementing that! 🙌

New global decorator

The withChromaticThemes decorator renders stories with parameters.chromatic.enableDarkMode === true twice — in light and dark mode. The decorator is enabled only if isChromatic() === true. It's a suggested way of snapshotting the same story with different themes. Trade-offs:

Pros

1. Simpler code — decorator React component. No need to touch the story store API used previously.
2. Compatible with the new story store API. We won't need to migrate anything when the Storybook v7 is released.
3. Two themes on one snapshot —> less number of snapshots -> less spending.

Cons

1. Dark mode and light mode stories are not isolated — they are rendered in the same React tree. (e.g., that's why we need a way to control the Popover root element).

Test plan

1. Ensure that Storybook works locally without changes.
2. Ensure that Chromatic snapshots are as expected.

App preview:

• Web
• Storybook

To learn more, check out the client app preview documentation.