Merged
Conversation
- Add VIBE4_CHANGELOG.md for tracking breaking changes - Add VIBE4_MIGRATION_GUIDE.md with comprehensive migration documentation - Create v3-to-v4 migration structure in codemod package - Update CLI to support --migration v4 - Add helper script for generating component migrations - Set up enum mapping template for string literal conversions This provides the foundation for implementing individual breaking changes and their corresponding codemods as development progresses. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fix broken codemod infrastructure that was causing build failures. ISSUE: - type-imports-migration.ts had TypeScript errors accessing .name property - path.value.id can be Identifier OR TSQualifiedName - TSQualifiedName doesn't have .name property, causing TS2339 errors - Build failures blocked all v4 codemod development SOLUTION: - Convert to safe no-op until actual type migrations are identified for v4 - Satisfies codemod CLI infrastructure requirements - Removes TypeScript compilation errors - Documents TODO structure for future type migrations This is general v4 infrastructure, not specific to any breaking change. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
PR Reviewer Guide 🔍(Review updated until commit b69ab5a)Here are some key observations to aid the review process:
|
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
#3266) Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
📦 Bundle Size Analysis Changed Components
Unchanged Components
📊 Summary:
|
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…3280) Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Rivka Ungar <rivkaun@monday.com> Co-authored-by: vibe-bot <vibe@monday.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
#3290) Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
- @vibe/base@4.0.0-alpha.0 - @vibe/codemod@4.0.0-alpha.0 - @vibe/button@4.0.0-alpha.0 - @vibe/clickable@4.0.0-alpha.0 - @vibe/dialog@4.0.0-alpha.0 - @vibe/icon@4.0.0-alpha.0 - @vibe/icon-button@4.0.0-alpha.0 - @vibe/layer@4.0.0-alpha.0 - @vibe/layout@4.0.0-alpha.0 - @vibe/loader@4.0.0-alpha.0 - @vibe/tooltip@4.0.0-alpha.0 - @vibe/typography@4.0.0-alpha.0 - @vibe/config@4.0.0-alpha.0 - @vibe/core@4.0.0-alpha.0 - @vibe/docs@4.0.0-alpha.0 - @vibe/hooks@4.0.0-alpha.0 - @vibe/icons@4.0.0-alpha.0 - @vibe/mcp@4.0.0-alpha.0 - @vibe/shared@4.0.0-alpha.0 - vibe-storybook-components@4.0.0-alpha.0 - @vibe/style@4.0.0-alpha.0 - @vibe/testkit@4.0.0-alpha.0
- @vibe/base@4.0.0-alpha.1 - @vibe/codemod@4.0.0-alpha.1 - @vibe/button@4.0.0-alpha.1 - @vibe/clickable@4.0.0-alpha.1 - @vibe/dialog@4.0.0-alpha.1 - @vibe/icon@4.0.0-alpha.1 - @vibe/icon-button@4.0.0-alpha.1 - @vibe/layer@4.0.0-alpha.1 - @vibe/layout@4.0.0-alpha.1 - @vibe/loader@4.0.0-alpha.1 - @vibe/tooltip@4.0.0-alpha.1 - @vibe/typography@4.0.0-alpha.1 - @vibe/config@4.0.0-alpha.1 - @vibe/core@4.0.0-alpha.1 - @vibe/docs@4.0.0-alpha.1 - @vibe/hooks@4.0.0-alpha.1 - @vibe/icons@4.0.0-alpha.1 - @vibe/mcp@4.0.0-alpha.1 - @vibe/shared@4.0.0-alpha.1 - vibe-storybook-components@4.0.0-alpha.1 - @vibe/style@4.0.0-alpha.1 - @vibe/testkit@4.0.0-alpha.1
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
- @vibe/base@4.0.0-alpha.2 - @vibe/codemod@4.0.0-alpha.2 - @vibe/button@4.0.0-alpha.2 - @vibe/clickable@4.0.0-alpha.2 - @vibe/dialog@4.0.0-alpha.2 - @vibe/icon@4.0.0-alpha.2 - @vibe/icon-button@4.0.0-alpha.2 - @vibe/layer@4.0.0-alpha.2 - @vibe/layout@4.0.0-alpha.2 - @vibe/loader@4.0.0-alpha.2 - @vibe/tooltip@4.0.0-alpha.2 - @vibe/typography@4.0.0-alpha.2 - @vibe/config@4.0.0-alpha.2 - @vibe/core@4.0.0-alpha.2 - @vibe/docs@4.0.0-alpha.2 - @vibe/hooks@4.0.0-alpha.2 - @vibe/icons@4.0.0-alpha.2 - @vibe/mcp@4.0.0-alpha.2 - @vibe/shared@4.0.0-alpha.2 - vibe-storybook-components@4.0.0-alpha.2 - @vibe/style@4.0.0-alpha.2 - @vibe/testkit@4.0.0-alpha.2
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
- @vibe/base@4.0.0-beta.0 - @vibe/codemod@4.0.0-beta.0 - @vibe/button@4.0.0-beta.0 - @vibe/clickable@4.0.0-beta.0 - @vibe/dialog@4.0.0-beta.0 - @vibe/icon@4.0.0-beta.0 - @vibe/icon-button@4.0.0-beta.0 - @vibe/layer@4.0.0-beta.0 - @vibe/layout@4.0.0-beta.0 - @vibe/loader@4.0.0-beta.0 - @vibe/tooltip@4.0.0-beta.0 - @vibe/typography@4.0.0-beta.0 - @vibe/config@4.0.0-beta.0 - @vibe/core@4.0.0-beta.0 - @vibe/docs@4.0.0-beta.0 - @vibe/hooks@4.0.0-beta.0 - @vibe/icons@4.0.0-beta.0 - @vibe/mcp@4.0.0-beta.0 - @vibe/shared@4.0.0-beta.0 - vibe-storybook-components@4.0.0-beta.0 - @vibe/style@4.0.0-beta.0 - @vibe/testkit@4.0.0-beta.0
talkor
reviewed
Mar 16, 2026
packages/components/clickable/src/useClickableProps/useClickableProps.ts
Show resolved
Hide resolved
talkor
reviewed
Mar 16, 2026
Comment on lines
+41
to
+42
| "@vibe/shared": "^4.0.0-beta.0", | ||
| "@vibe/style": "^4.0.0-beta.0", |
Member
There was a problem hiding this comment.
All the versions should be fixed (no carret) @rivka-ungar
- @vibe/base@4.0.0-rc.0 - @vibe/codemod@4.0.0-rc.0 - @vibe/button@4.0.0-rc.0 - @vibe/clickable@4.0.0-rc.0 - @vibe/dialog@4.0.0-rc.0 - @vibe/icon@4.0.0-rc.0 - @vibe/icon-button@4.0.0-rc.0 - @vibe/layer@4.0.0-rc.0 - @vibe/layout@4.0.0-rc.0 - @vibe/loader@4.0.0-rc.0 - @vibe/tooltip@4.0.0-rc.0 - @vibe/typography@4.0.0-rc.0 - @vibe/config@4.0.0-rc.0 - @vibe/core@4.0.0-rc.0 - @vibe/docs@4.0.0-rc.0 - @vibe/hooks@4.0.0-rc.0 - @vibe/icons@4.0.0-rc.0 - @vibe/mcp@4.0.0-rc.0 - @vibe/shared@4.0.0-rc.0 - vibe-storybook-components@4.0.0-rc.0 - @vibe/style@4.0.0-rc.0 - @vibe/testkit@4.0.0-rc.0
Contributor
Review Summary by QodoVibe 3 to Vibe 4 comprehensive migration infrastructure with codemods and type updates
WalkthroughsDescription• Comprehensive Vibe 3 to Vibe 4 migration infrastructure with automated analysis tool and extensive codemod transformations • **Migration analysis tool** (v4-migration.ts): Detects promoted components, deprecated APIs, removed props, enum usage, ARIA props, and CSS token changes with file:line references and step-by-step guidance • **Component type refactoring**: Updated Dropdown, Dialog, AttentionBox types with new APIs (Floating UI support, generic types, discriminated unions) • **Codemod transformations** (20+ new transformations): - ARIA props migration (camelCase to kebab-case) - Component prop renames: Icon (iconLabel→label), TextField (iconName→icon), VirtualizedList (getItemHeight→getItemSize) - Component migrations: TipseenImage→TipseenMedia, LinearProgressBar→ProgressBar, TextWithHighlight (tooltipPosition→tooltipProps) - Deprecated prop removals: Dialog (enableNestedDialogLayer), Chips (disableClickableBehavior), Toggle (noSpacing), Flex (justify="stretch") - Enum to string literal conversions - Package renames: monday-ui-style→@vibe/style - Next imports migration (promoted components from /next to main exports) • **Type safety improvements**: Added comprehensive TypeScript generics to virtualized service • **Test coverage**: 15+ new test suites for all codemod transformations • **Testkit updates**: Checkbox and Dropdown testkit refactored for new component structures • **Constants consolidation**: Removed deprecated enums (SystemTheme, ThemeColor, ToastType, TextFieldTextType) and migrated to string literals • **CLI enhancements**: Added v4 migration command with dependency validation • **Documentation**: Updated migration guidance and Storybook configuration Diagramflowchart LR
V3["Vibe 3 Code"]
ANALYSIS["v4-migration Analysis Tool"]
CODEMODS["20+ Codemod Transformations"]
TYPES["Updated Component Types"]
V4["Vibe 4 Code"]
V3 --> ANALYSIS
ANALYSIS --> |"Detects breaking changes"| CODEMODS
CODEMODS --> |"Props, imports, enums"| V4
TYPES --> |"Type safety"| V4
CODEMODS --> |"Uses updated"| TYPES
File Changes1. packages/mcp/src/server/tools/v4-migration.ts
|
Contributor
Code Review by Qodo
1. TooltipBaseProps not extending VibeComponentProps
|
![qodo-free-for-open-source-projects[bot]](https://avatars.githubusercontent.com/in/1068000?s=60&v=4){kind=small}
|
|
||
| // TODO TS-migration extend DialogProps, once Dialog is migrated to TS | ||
| interface TooltipBaseProps extends VibeComponentProps { | ||
| interface TooltipBaseProps extends Omit<DialogProps, "position" | "content" | "children"> { |
Contributor
There was a problem hiding this comment.
1. tooltipbaseprops not extending vibecomponentprops 📘 Rule violation ⚙ Maintainability
TooltipBaseProps was changed to extend Omit<DialogProps,...> instead of extending VibeComponentProps, breaking the required shared component prop contract. This can cause inconsistent typing/behavior across components and violates the standard component typing pattern.
Agent Prompt
## Issue description
`TooltipBaseProps` no longer extends `VibeComponentProps`, violating the required component props typing contract.
## Issue Context
The Tooltip props were refactored to inherit from `DialogProps` via `Omit<>`, but the base shared props type is required for all components.
## Fix Focus Areas
- packages/components/tooltip/src/Tooltip/Tooltip.tsx[37-37]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+1
to
+2
| @import "~@vibe/style/dist/mixins/typography"; | ||
| @import "~@vibe/style/dist/mixins/states"; |
Contributor
There was a problem hiding this comment.
2. clickable.module.scss contains @import 📘 Rule violation ⚙ Maintainability
The updated Clickable.module.scss includes @import statements, which are forbidden in .module.scss files by the styling compliance rules. This can introduce unintended coupling and build/style ordering issues.
Agent Prompt
## Issue description
`.module.scss` files must not contain `@import` (or other import statements), but `Clickable.module.scss` currently imports mixins.
## Issue Context
This file was updated to import from `~@vibe/style/...`, but the compliance rule requires eliminating imports entirely from CSS Modules files.
## Fix Focus Areas
- packages/components/clickable/src/Clickable/Clickable.module.scss[1-2]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
| @@ -4,7 +4,7 @@ import { iconButtonStory } from "./utils/url-helper"; | |||
|
|
|||
| let frame: FrameLocator; | |||
| let iconButton: IconButton; | |||
| const iconButtonLocator = 'button[data-testid="icon-button"]'; | |||
| const iconButtonLocator = 'button[data-testid^="icon-button"]'; | |||
Contributor
There was a problem hiding this comment.
3. Iconbutton test uses literal testid 📘 Rule violation ⚙ Maintainability
The IconButton Playwright test uses an ad-hoc literal data-testid selector string instead of using the established shared constants/patterns. This reduces consistency and makes selectors harder to maintain across refactors.
Agent Prompt
## Issue description
The IconButton test selector hard-codes `icon-button` instead of using the shared test-id constants/patterns.
## Issue Context
`ComponentDefaultTestId.ICON_BUTTON` exists in `packages/core/src/tests/constants.ts` and should be the canonical source for this test id.
## Fix Focus Areas
- packages/testkit/__tests__/IconButton.test.ts[7-7]
- packages/core/src/tests/constants.ts[31-34]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
| /** | ||
| * The reference element(s) that the dialog is positioned relative to. | ||
| */ | ||
| children?: ReactElement | ReactElement[] | string; |
Contributor
There was a problem hiding this comment.
4. Dialog drops string children 🐞 Bug ✓ Correctness
DialogProps allows children to be a string, but Dialog renders children through Refable which returns null for non-ReactElement children (strings), causing the trigger to disappear and preventing correct anchoring/positioning.
Agent Prompt
### Issue description
`DialogProps.children` is typed to allow `string`, but `Refable` drops non-elements (`React.isValidElement` check), so a string trigger silently disappears and the dialog cannot anchor/position correctly.
### Issue Context
This is a type/runtime contract mismatch introduced by the new Dialog implementation that always wraps `{children}` with `Refable`.
### Fix Focus Areas
- packages/components/dialog/src/Dialog/Dialog.types.ts[226-231]
- packages/components/dialog/src/Dialog/Dialog.tsx[93-95]
- packages/components/dialog/src/Dialog/components/Refable/Refable.tsx[20-34]
### Expected fix
Choose one (preferred: keep type+runtime consistent):
1) **Support string children**:
- In `Refable`, if `child` is a string/number, wrap it with `wrapperElement` and render it (so it becomes a real reference element).
- Update `hasValidChildren` in `Dialog.tsx` to treat string children as valid (or derive the decision from whether `referenceElement` exists) so Floating UI positioning is not skipped.
OR
2) **Disallow string children**:
- Remove `string` from `DialogProps.children` (and from `RefableProps.children`) so TypeScript prevents unsupported usage instead of failing silently.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+519
to
+522
| <Refable | ||
| className={cx(referenceWrapperClassName)} | ||
| wrapperElement={referenceWrapperElement} | ||
| ref={setReferenceElement} |
Contributor
There was a problem hiding this comment.
5. Trigger classname not applied 🐞 Bug ✓ Correctness
referenceWrapperClassName is passed to Refable, but for native HTML children Refable clones with
{...rest, ...childProps} so an existing child className overwrites the wrapper className, making
referenceWrapperClassName ineffective.
Agent Prompt
### Issue description
`referenceWrapperClassName` can be ignored for native trigger elements because `Refable` clones children using `{ ...rest, ...childProps }`, which lets `childProps.className` override `rest.className`.
### Issue Context
Dialog relies on `referenceWrapperClassName` to style/identify the trigger wrapper, and now always routes triggers through `Refable`.
### Fix Focus Areas
- packages/components/dialog/src/Dialog/components/Refable/Refable.tsx[36-52]
- packages/components/dialog/src/Dialog/Dialog.types.ts[86-93]
### Expected fix
When cloning native elements in `Refable`, explicitly merge className instead of allowing overwrite, e.g.:
- Compute `const mergedClassName = cx(rest.className, childProps.className)` and pass `className: mergedClassName` in the clone props.
(Optionally) consider whether other wrapper props like `style` should merge or whether wrapper should intentionally override child props; but at minimum className should not be dropped.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
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.
User description
https://monday.monday.com/boards/10027056258/pulses/10027056598
PR Type
Enhancement, Documentation
Description
Set up v3-to-v4 migration infrastructure with CLI support
Add comprehensive breaking change implementation skill guide
Create migration documentation and codemod templates
Establish v4 changelog and migration guide framework
Diagram Walkthrough
File Walkthrough
2 files
Add v4 migration type to CLI with warningsCreate no-op type imports migration for v411 files
Comprehensive breaking change implementation workflow guideDocument codemod patterns and common pitfallsProvide codemod implementation examples and patternsGuide for analyzing component dependencies systematicallyTemplates for PR, commits, migration guides, and reviewsTesting strategies and validation checklist for changesComplete phase-by-phase workflow checklist for breaking changesTrack v4 breaking changes with status and migration infoComprehensive v3 to v4 migration guide with step-by-step instructionsUpdate documentation to include v4 migration optionDocument v3-to-v4 transformation structure and patterns1 files
Create enum mapping template for v4 migrations