Repository navigation
docs(examples): add the UI Cookbook app for the React v15 docs - #3354
Open
MartinCupela wants to merge 6 commits into
Open
MartinCupela wants to merge 6 commits into
MartinCupela wants to merge 6 commits into
Conversation
Adds examples/cookbook: the base app and the code of every UI Cookbook recipe in the v15 docs, with the demo-data seed, the screenshot script and the CSS style-rule check. Adds the react-ui-cookbook agent skill that describes how recipes are written, and wires the workspace into the root scripts and CI.
The lookup filtered with `members: { $eq: [...] }`, which the server
refuses, so an existing 1:1 was never found. Match both members with
`$in` and `member_count: 2` instead.
MartinCupela
requested review from
NikolaGoranNaumovski and
oliverlaz
as code owners
October 28, 2026 14:05
|
Important Review skippedToo many files! This PR contains 479 files, which is 329 over the limit of 150. To get a review, reduce the PR to 150 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. Usage-priced reviews support at most 300 files.
 |
Contributor
|
Size Change: -1.3 kB (-0.14%) Total Size: 903 kB 📦 View Changed
ℹ️ View Unchanged
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| variant = 'default', | ||
| ): Promise<RecipeConfig | undefined> => { | ||
| const load = recipeModules[`../recipes/${id}/${variant}.recipe.tsx`]; | ||
| return load ? (await load()).default : undefined; |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3354 +/- ##
==========================================
+ Coverage 88.63% 88.70% +0.07%
==========================================
Files 563 563
Lines 17138 17139 +1
Branches 5246 5246
==========================================
+ Hits 15190 15204 +14
+ Misses 1948 1935 -13 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Addresses the two CodeQL findings on the cookbook base app: URL values are passed to console.warn/error as arguments rather than interpolated into the format string, and loadRecipe only looks up the glob's own keys.
Adds examples/cookbook/src/recipes/ai/voice-agent-visuals: a voice strip under the channel header with VoiceGlow and VoiceWave, the spoken reply revealed with useHeardText, and a simulator that freezes the animation for stable screenshots. The base app now loads the ai-components stylesheet in the stream layer.
The cookbook no longer loads a custom theme for every recipe, so the recipes and their screenshots show the SDK's default look. Only the Theming recipe loads its own theme, now in green shades instead of violet. Recipe CSS written for the violet own bubble is removed.
…skill Recipe pages open with a "What you'll build" note listing the features. Every screenshot has a caption above it and sits between two horizontal rules.
This branch was successfully deployed
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.
Ticket: https://linear.app/stream/issue/REACT-1262/react-v15-docs-batch-7-recipes-and-leftovers
🎯 Goal
The React v15 docs on getstream.io get a rebuilt UI Cookbooks section: 48 recipes, each built on one base app and shot with the same theme, cast and frame. This PR adds the code those pages show, so every recipe is runnable, type-checked in CI, and its screenshots can be retaken from the app.
🛠 Implementation details
examples/cookbook(new private workspace,yarn start:cookbook, port 5176)Chat,ChatView, the channel list, channel and thread, the CSS layer order, and a shared side panel used by the Panels recipes.src/recipes/<group>/<recipe>/, matching the docs URL/ui-cookbooks/<group>/<recipe>/. It holds exactly the code the page shows, plus a<variant>.recipe.tsxthat says what the recipe changes in the base app. Open a recipe at?recipe=<group>/<recipe>&variant=<variant>.?writes=onturns the guard off for an app of your own;scripts/seed.mjsis the only writer. It's idempotent, and it seeds the cast, channels, messages, attachments, mentions, pins, read state and receipts, invites, pinned and archived channels, reminders and drafts.scripts/shots.mjstakes every screenshot the pages use (DPR 1, en-US, UTC), andscripts/check-css.mjsenforces the recipe style rules:@layer stream-overrides;.cookbook-prefix;src/recipes/theming/brand-theme-and-dark-mode/theme.css): the theme shown on UI › Customizing › Theming, with contrast checked to WCAG AA in light and dark.Agent skill:
.agents/skills/react-ui-cookbook/SKILL.md(linked from.claude/skills) describes the look, the rules, the seed fields and the steps for adding or changing a recipe.AGENTS.mdpoints to it.Wiring: root scripts (
start:cookbook), the workspace inpackage.json/yarn.lock, the cookbook in CI's examples build, and.gitignoreforexamples/*/.env*.local.Separate commit: a fix to the vite example's direct-conversation lookup. It filtered with
members: { $eq: [...] }, which the server refuses, so an existing 1:1 was never found.Not included: the recipes still blocked are Saved items and reminders (reminders are off in the demo app), Drafts list (waits on REACT-1453) and Voice agent visuals (needs the next release).
Docs: the pages live in getstream.io. See https://github.com/GetStream/getstream.io/pull/805 (
docs/chat/react/v15-review) and the earlier v15 docs PRs https://github.com/GetStream/getstream.io/pull/729 and https://github.com/GetStream/getstream.io/pull/730. The UI Cookbooks pages commit lands on the #805 branch.SDK gaps found while writing the recipes, filed in Linear and linked from REACT-1262:
ChannelListcan't be labelled;ChannelListalways brings its own scroll container;joined/invitefilters;MessageComposerPreviews, which the poll recipe waits on;ChannelHeadertitle slot, which the Channel details recipe waits on.dispose()doesn't stop a query already running;HeaderEndContentshows only while a channel is open;renderText()has no inline mode;client.userID.🎨 UI Changes
There's no SDK UI change. The recipes' screenshots are on the getstream.io pages under
/chat/docs/sdk/react/v15/ui-cookbooks/.