storybook and better reports#29276
Merged
chrisnojima merged 12 commits intoJun 2, 2026
Merged
Conversation
- .storybook/main.ts: webpack5 config reusing desktop alias/babel/define patterns - .storybook/mocks/electron.ts: KB2 stub so platform.tsx loads without Electron preload - .storybook/preview.ts: injects globalThis._fromPreload, base decorator - .storybook/preview-head.html: font-face + CSS reset via staticDirs fonts - staticDirs: fonts/electron + images served at correct URL paths - tsconfig.desktop.json: include .storybook/ files - devices/device-icon.stories.tsx: 7 stories - devices/row.stories.tsx: 6 stories (incl. BadgedDeviceIDsContext) - devices/device-page.stories.tsx: 6 stories - plans/storybook.md: todo list of remaining shared/ folders Run with: cd shared && yarn storybook
- generate-electron-report: parse storybook-desktop/ PNGs, render as separate section with slider diff vs storybook-prev/ baseline - generate-ios-report: add .section-hdr CSS for full-width grid divider - save-baseline now also saves storybook screenshots to storybook-prev/ - package.json: add storybook:screenshot script
- `loading="lazy"` on all report images - Slideshow button in header: opens full-screen modal, cycles images at 0.75s with CSS fade-in - Controls bar: prev/next/pause buttons + counter (e.g. 5/233) - Keyboard: ←/→ navigate, Space toggles play/pause, Esc closes
Use page.emulateMedia({colorScheme}) to set prefers-color-scheme via CDP
instead of document.documentElement.style.colorScheme. This activates
@media (prefers-color-scheme: dark) CSS rules that the real app depends on.
- screenshot-storybook.mts: emulateMedia before each light/dark capture
- fixtures.ts: emulateMedia replaces setNativeTheme for dark e2e project
- playwright.config.ts: add electron-flows-dark project
- Use Playwright bundled Chromium when CHROME_PATH is unset (fixes CI) - Skip dark mode dispatch when preference is already correct - Remove unnecessary `as any` cast in announcement story
- Fix webpack resolve.extensions order so .desktop.tsx/.desktop.ts take precedence over .tsx/.ts - Wrap fixture setup() in try/finally so emulateMedia cleanup always runs - Bind static file server to 127.0.0.1 and sandbox request paths to buildDir
- Treat flaky-but-passing Playwright tests as passed - Escape label/name in HTML alt attributes - Remove unnecessary ?? fallback on non-nullable projectName
- Clear storybook output dir before each run to remove stale screenshots - Include skipped tests as passing in electron report - Fix storybook label path separator replacement to be global
Comment on lines
+20
to
+24
| try { | ||
| await setup(page) | ||
| } finally { | ||
| await page.emulateMedia({colorScheme: null}) | ||
| } |
chrisnojima
merged commit d726593
into
nojima/HOTPOT-next-670-clean-2
1 of 2 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.