web: upgrade Storybook

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

[sourcegraph-bot]

Codenotify: Notifying subscribers in CODENOTIFY files for diff cf59b33...f8a41e3.

Notify	File(s)
@courier-new	client/web/src/enterprise/batches/list/BatchChangeNode.story.tsx
@eseliger	client/web/src/enterprise/batches/list/BatchChangeNode.story.tsx

[sourcegraph-bot]

Codenotify: Notifying subscribers in OWNERS files for diff cf59b33...f8a41e3.

Notify

File(s)

@sourcegraph/frontend-platform-devs

client/build-config/src/paths.ts client/wildcard/src/components/Modal/Modal.story.tsx client/wildcard/src/components/Popover/Popover.tsx client/wildcard/src/components/Popover/components/PopoverTrigger.tsx client/wildcard/src/components/Popover/components/floating-panel/FloatingPanel.tsx client/wildcard/src/components/Popover/components/popover-content/PopoverContent.tsx client/wildcard/src/components/Popover/components/popover-tail/PopoverTail.tsx client/wildcard/src/components/Popover/contexts/internal-context.ts client/wildcard/src/components/Popover/contexts/public-context.ts client/wildcard/src/components/Popover/index.ts client/wildcard/src/components/Popover/story/Popover.story.tsx client/wildcard/src/components/index.ts

[limitedmage]

Should every component be rendered in both light and dark mode? The UI review only shows some components being rendered in dark mode.

[jasongornall]

food for thought.. storybookjs/storybook#16837.. looks like this isn't an issue in 6.5.
this also fixes this ticket! https://github.com/sourcegraph/sourcegraph/issues/34231

from testing it myself looks great!
a nice 2 for 1

[jasongornall]

Should every component be rendered in both light and dark mode? The UI review only shows some components being rendered in dark mode.

I think this is intentional. It's basically checking against a chromatic dark variable if it should render the dark mode. We only render darkmode if the story tells us to (like here)

[jasongornall]

Looks solid from my testing

[limitedmage]

I think this is intentional. It's basically checking against a chromatic dark variable if it should render the dark mode. We only render darkmode if the story tells us to (like here)

Ahh thank you, that's what I was missing here. I didn't understand how some were being rendered in dark mode and some were not based on this changeset alone; turns out it's preexisting code! :)