Component Revamp 1 #865
Draft
Component Revamp 1 #865
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
2 Skipped Deployments
|
|
|
0x0f0f0f
commented
Jun 17, 2025
sites/reactflow.dev/src/content/learn/tutorials/getting-started-with-react-flow-components.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull Request Overview
This PR revamps the BaseNode component API by introducing dedicated header, content, and footer slots and updates all tutorials and registry examples to use the new composition pattern (dropping the old selected prop in favor of CSS selectors).
- Introduce
BaseNodeHeader,BaseNodeHeaderTitle,BaseNodeContent, andBaseNodeFooterand remove theselectedprop fromBaseNode. - Update tutorial MDX (
getting-started-with-react-flow-components.mdx) to reflect new usage and adjust example code snippets. - Refactor all registry and example-apps components (tooltip-node, placeholder-node, num-node, sum-node, base-handle, etc.) to use the new slots API.
Reviewed Changes
Copilot reviewed 31 out of 32 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| sites/reactflow.dev/src/content/learn/tutorials/getting-started-with-react-flow-components.mdx | Updated tutorial to use new BaseNode slots and removed selected props; adjusted code fences. |
| sites/reactflow.dev/src/content/components/nodes/base-node.mdx | Expanded MDX docs to list header/content/footer slots and theming guidelines. |
| apps/ui-components/registry/components/base-node/index.tsx | Refactored BaseNode implementation; added CSS selectors for selection state; added slot components. |
| apps/ui-components/registry/components/tooltip-node/index.tsx | Removed selected prop, updated to wrap children in BaseNodeContent. |
| apps/ui-components/registry/components/placeholder-node/index.tsx | Dropped selected prop from PlaceholderNode and updated signature. |
| apps/ui-components/registry/components/node-header/component-example.tsx | Adjusted demo to drop selected prop and use new BaseNode slots. |
| apps/ui-components/registry/components/labeled-handle/component-example.tsx | Removed selected prop in demo, updated BaseNode usage. |
| apps/ui-components/registry/components/labeled-group-node/index.tsx | Removed selected prop, updated component signature. |
| apps/ui-components/registry/components/database-schema-node/index.tsx | Dropped selected prop; simplified return statement. |
| apps/ui-components/registry/components/base-handle/component-example.tsx | Updated demo to drop selected prop on BaseNode. |
| apps/example-apps/react/tutorials/components/tooltip/components/tooltip-node.tsx | Refactored to use forwardRef imports, removed inline React import, dropped selected. |
| apps/example-apps/react/tutorials/components/tooltip/components/base-node.tsx | Updated to use new BaseNode slots and CSS selection logic. |
| apps/example-apps/react/tutorials/components/sum-node/components/nodes/sum-node.tsx | Refactored node header to use BaseNodeHeader and BaseNodeHeaderTitle. |
| apps/example-apps/react/tutorials/components/sum-node/components/nodes/num-node.tsx | Comprehensive refactor to use new BaseNode slot components. |
| apps/example-apps/react/tutorials/components/complete/components/nodes/sum-node.tsx | Same header/footer refactor as above for complete tutorial. |
| apps/example-apps/react/tutorials/components/complete/components/nodes/num-node.tsx | Same header/footer refactor as above for complete tutorial. |
| apps/example-apps/react/tutorials/components/complete/components/base-node.tsx | Updated BaseNode implementation for complete tutorial. |
| apps/example-apps/react/examples/styling/styled-components/CustomNode.jsx | Dropped React import duplicate and moved memo import. |
Comments suppressed due to low confidence (2)
sites/reactflow.dev/src/content/learn/tutorials/getting-started-with-react-flow-components.mdx:204
- Consider restoring the region specifiers (e.g.,
{1,3,7-11}) on this code fence to ensure the tutorial highlights the intended lines correctly.
```jsx filename="src/App.jsx"
sites/reactflow.dev/src/content/components/nodes/base-node.mdx:21
- [nitpick] The sentence is missing a preposition for clarity. Consider rephrasing to: '...on interactive components of your node, such as buttons, to disable dragging the node when the user interacts with them.'
interactive components of your node such as buttons, to disable dragging
| import { cn } from "@/lib/utils"; | ||
| import { forwardRef, HTMLAttributes } from "react"; | ||
|
|
||
| export const BaseNode = forwardRef< |
There was a problem hiding this comment.
[nitpick] It may be helpful to add a displayName (e.g., BaseNode.displayName = 'BaseNode') for easier debugging and React DevTools identification.
Copilot uses AI. Check for mistakes.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
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.
Does some of the improvements noted in https://github.com/xyflow/internal/issues/63