docs: rework React theming — capture harness + tutorial example by oliverlaz · Pull Request #3133 · GetStream/stream-chat-react

oliverlaz · 2026-04-17T13:36:59Z

Summary

Two sets of changes that together bring the React SDK's theming story up to date with v14:

Rework the Playwright screenshot pipeline used for the React theming doc (docs-content: chat-sdk/react/v14-latest/02-ui-components/02-theming/01-themingv2.md).
Sync examples/tutorial so its per-step layout.css + App.tsx match the revised tutorial published in getstream.io-tutorials.

Companion doc-content PR: GetStream/docs-content#1213 — rewrites the theming doc with working v14 tokens and regenerates every screenshot using the harness in this PR.

1. Capture-harness rework (`examples/vite/docs-playwright/`)

Pipeline reliability

Shared capture context across all screenshots (previously each page spun up a fresh context, racing an empty channel list on themed variants).
Viewport bumped to 1280×1200 at 1× DPR (portrait framing fits more of the conversation).
scrollToLatest() before every screenshot so both users' latest bubbles are in frame.
waitForChatUI() now also waits for at least one rendered .str-chat__li before the capture fires.
Explicit channel create with both members + friendly name + truncate so reruns don't accumulate duplicate seed messages.
Headless by default. Set HEADED=1 to override.
Fixed ASSETS_DIR — previous path (../../docs/...) resolved to a non-existent directory.

Content

Extracted CSS override blocks to docs-playwright/theming-variants.mjs so the harness and the doc stay in lockstep.
Rewrote the seed conversation: two-user dialogue, markdown (**bold**, *italic*, `code`), GitHub URL preview, images, richer reaction variety.
Dropped obsolete capture flows (link-attachment text color, layout-only CSS) — neither applies to v14.

Deps

Added @playwright/test@^1.59.1 as a devDep of examples/vite.

2. `examples/tutorial` sync

The per-step tutorial example was still using tokens that have zero consumers in v14's built CSS (--brand-50..900, --radius-full) and scoped the custom theme to .str-chat__theme-custom, which colonizes the SDK's str-chat__ namespace for a user-defined class.

layout.css for steps 3–7 (byte-identical before this change): replaced the dead overrides with the semantic-token block used in the published tutorial.
App.tsx for steps 3/4/5: renamed theme='str-chat__theme-custom' → theme='custom-theme'.

Test plan

Capture harness:

cd examples/vite
yarn install
yarn dev
# in another shell
node docs-playwright/seed-channel-and-screenshot.mjs              # seed + capture
node docs-playwright/seed-channel-and-screenshot.mjs --skip-seed  # just recapture

Output lands in ../../../../docs/data/docs/chat-sdk/react/v14-latest/_assets/. Use HEADED=1 node ... to watch the browser.

Tutorial example:

cd examples/tutorial
yarn install
yarn dev
# visit each step and confirm the themed screens render with the new
# deep-blue palette (navy outgoing bubbles, light-blue incoming,
# pale-blue panel tint)

- Share one retina context across captures (viewport 1280x1200 @1x) so localStorage and auth tokens persist and the message list has time to populate before each screenshot. Previous per-capture contexts raced an empty channel list on themed variants. - scrollToLatest() before every screenshot so both users' latest bubbles land in the viewport. - Explicitly create the target channel with both members + a friendly name before seeding, and truncate it so reruns don't stack duplicate messages. - waitForChatUI() now also waits for at least one rendered .str-chat__li. - Headless by default (HEADED=1 to override). - Extract the CSS override blocks to theming-variants.mjs so the harness and the doc (01-themingv2.md) stay in lockstep. - Fix ASSETS_DIR to the real docs-content tree (../../../../docs/data/docs/chat-sdk/react/v14-latest/_assets) — previous path resolved to a non-existent directory. - Drop obsolete capture flows (link-attachment text color, layout-only CSS) — neither applies to v14. - Rewrite the seed conversation: two-user dialogue with emojis, markdown (**bold**, *italic*, `code`), GitHub URL preview, images, and richer reaction variety. - Add @playwright/test as a devDep of examples/vite.

github-actions · 2026-04-17T13:38:32Z

Size Change: 0 B

Total Size: 624 kB

ℹ️ View Unchanged

Filename	Size
`dist/cjs/audioProcessing.js`	1.32 kB
`dist/cjs/emojis.js`	3.01 kB
`dist/cjs/index.js`	240 kB
`dist/cjs/mp3-encoder.js`	1.27 kB
`dist/cjs/WithAudioPlayback.js`	44.7 kB
`dist/css/emoji-picker.css`	188 B
`dist/css/emoji-replacement.css`	456 B
`dist/css/index.css`	45 kB
`dist/es/audioProcessing.mjs`	1.31 kB
`dist/es/emojis.mjs`	2.52 kB
`dist/es/index.mjs`	239 kB
`dist/es/mp3-encoder.mjs`	756 B
`dist/es/WithAudioPlayback.mjs`	44.5 kB

_{compressed-size-action}

codecov · 2026-04-17T13:39:36Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.33%. Comparing base (eac76dc) to head (6d6988d).
⚠️ Report is 3 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3133   +/-   ##
=======================================
  Coverage   82.33%   82.33%           
=======================================
  Files         419      419           
  Lines       12270    12270           
  Branches     3951     3951           
=======================================
  Hits        10102    10102           
  Misses       2168     2168

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Align the step-by-step tutorial example with the React chat tutorial that now ships in docs-content and getstream.io-tutorials: - layout.css (steps 3-7, previously byte-identical): replace dead --brand-* palette + --radius-full with the semantic tokens v14 actually consumes (--accent-primary, --chat-bg-*, --text-link, --background-core-*, --border-utility-focused, --radius-max, --button-radius-full). - App.tsx (steps 3/4/5): rename theme='str-chat__theme-custom' → theme='custom-theme'. The str-chat__ prefix is reserved for SDK-owned classes and the SDK does no wildcard matching on str-chat__theme-*, so the prefix added nothing. Both changes mirror the companion doc-content PR (GetStream/docs-content#1213).

Mirror the pattern used by examples/vite: credentials.ts now exports apiKey, userId, userName, and a tokenProvider function that mints a fresh JWT from pronto for whichever user_id is active. The app stays runnable without pasting a token that expires, and users can switch identities at runtime via ?user_id=... / ?user_name=... URL params. - credentials.ts: drop the static userToken export; add a tokenProvider() that hits VITE_TOKEN_ENDPOINT (default https://pronto.getstream.io/api/auth/create-token) with VITE_TOKEN_ENVIRONMENT (default "demo") and the active user_id. userId/userName now derive from URL params first, then env, then sensible defaults. - All 7 step App.tsx files: rename the userToken import and tokenOrProvider arg to tokenProvider. - .env.example: drop VITE_USER_TOKEN; document the new optional VITE_TOKEN_ENDPOINT / VITE_TOKEN_ENVIRONMENT overrides and the URL-param fallbacks.

stream-ci-bot · 2026-04-17T14:58:42Z

🎉 This PR is included in version 14.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

oliverlaz requested review from MartinCupela and arnautov-anton as code owners April 17, 2026 13:37

oliverlaz changed the title ~~docs(capture-harness): rework React theming screenshot pipeline~~ docs: rework React theming — capture harness + tutorial example Apr 17, 2026

oliverlaz merged commit 4c5935f into master Apr 17, 2026
8 checks passed

oliverlaz deleted the docs/react-theming-capture-harness branch April 17, 2026 14:25

stream-ci-bot added the released on @latest label Apr 17, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: rework React theming — capture harness + tutorial example#3133

docs: rework React theming — capture harness + tutorial example#3133
oliverlaz merged 3 commits intomasterfrom
docs/react-theming-capture-harness

oliverlaz commented Apr 17, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 17, 2026 •

edited

Loading

Uh oh!

codecov bot commented Apr 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

stream-ci-bot commented Apr 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

oliverlaz commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

1. Capture-harness rework (examples/vite/docs-playwright/)

2. examples/tutorial sync

Test plan

Uh oh!

github-actions bot commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

stream-ci-bot commented Apr 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

oliverlaz commented Apr 17, 2026 •

edited

Loading

1. Capture-harness rework (`examples/vite/docs-playwright/`)

2. `examples/tutorial` sync

github-actions bot commented Apr 17, 2026 •

edited

Loading

codecov bot commented Apr 17, 2026 •

edited

Loading