docs: add v4 release banner and changelog entry#3337
Merged
Conversation
- Add Vibe4Banner component to storybook welcome page with a pastel purple/blue gradient and inline migration guide link - Add v4.0.0 entry to @vibe/core CHANGELOG with a summary of breaking changes and a link to the full migration guide
Contributor
Review Summary by QodoAdd v4 release banner and changelog entry
WalkthroughsDescription• Adds Vibe4Banner component to Storybook welcome page • Displays v4 release announcement with migration guide link • Adds v4.0.0 CHANGELOG entry documenting breaking changes • Banner styled with pastel purple/blue gradient bubbles Diagramflowchart LR
A["Vibe4Banner Component"] -->|"Styled with gradients"| B["SCSS Module"]
A -->|"Integrated into"| C["Storybook Preview"]
D["v4.0.0 CHANGELOG Entry"] -->|"Documents"| E["Breaking Changes"]
E -->|"Links to"| F["Migration Guide"]
File Changes1. packages/docs/src/pages/welcome/banner/Vibe4Banner.tsx
|
Contributor
Code Review by Qodo
1. Vibe4Banner missing data-vibe
|
![qodo-free-for-open-source-projects[bot]](https://avatars.githubusercontent.com/in/1068000?s=60&v=4){kind=small}
|
|
||
| const Vibe4Banner: React.FC = () => { | ||
| return ( | ||
| <div className={styles.vibe4Banner}> |
Contributor
There was a problem hiding this comment.
1. vibe4banner missing data-vibe 📘 Rule violation ✓ Correctness
The Vibe4Banner root element is missing the required [data-vibe] attribute, reducing consistency for test automation and DOM identification. This violates the component root-attribute requirement.
Agent Prompt
## Issue description
`Vibe4Banner` is missing the required `[data-vibe]` attribute on its root element.
## Issue Context
The compliance checklist requires all components to render a root element that includes `[data-vibe]` for consistent DOM identification and testing.
## Fix Focus Areas
- packages/docs/src/pages/welcome/banner/Vibe4Banner.tsx[6-22]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
71
to
75
|
|
||
| return ( | ||
| <> | ||
| {isWelcomePage && <Vibe4Banner />} | ||
| {isWelcomePage && <FloatingObjects />} |
Contributor
There was a problem hiding this comment.
2. Welcome detection may fail 🐞 Bug ✓ Correctness
Vibe4Banner rendering depends on isWelcomePage checking
window.location.href.includes("id=welcome"), which won’t match the repo’s common
/?path=/docs/... routing; the banner can silently never render on the Welcome docs page. This
breaks the PR’s intended behavior (banner shown on Welcome only) for path-based navigation.
Agent Prompt
## Issue description
`Vibe4Banner` is currently shown only when `window.location.href.includes("id=welcome")`. In this repo, many internal Storybook links use `/?path=/docs/...`, so Welcome can be reached without any `id=...` query param. As a result, the banner can fail to appear even on the Welcome page.
## Issue Context
- You already have access to the Storybook `context` object in the docs `container`.
- The codebase uses `/?path=/docs/...` links for internal navigation.
## Fix Focus Areas
- packages/docs/.storybook/preview.tsx[69-83]
## Suggested direction
Prefer using `context` (e.g., `context.title === "Welcome"`, `context.id === "welcome--docs"`, and/or `context.viewMode === "docs"`) instead of parsing `window.location.href`. If you want to preserve compatibility with older URL formats, you can support both by checking `URLSearchParams` for `id` and `path`.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
rivka-ungar
approved these changes
Mar 18, 2026
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
2 participants
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.
Summary
Vibe4Bannercomponent to the Storybook welcome page, styled similarly to the previous Monday Vibe banner (pastel purple/blue gradient bubbles, inline text)v4.0.0entry to@vibe/coreCHANGELOG with a concise summary of breaking changes and a link to the full migration guide