Feat/add storybook controls #337
Closed
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
- Added shared argTypes configuration with 20+ controls for GraphCanvas props
- Converted functional stories to template functions with .bind({}) pattern
- Added interactive controls for:
* Layout algorithms (13 options)
* Camera modes (pan, rotate, orbit)
* Themes (light, dark, custom)
* Sizing strategies (5 options)
* Label visibility (5 options)
* Edge styling and arrow positioning
* Interactive features (dragging, selection, etc.)
Completed: Basic, Nodes, Edges, Layouts, Themes, Controls, Sizing,
Selection, EdgeArrows, EdgeCurved, EdgeLabels, Labels, ContextMenu, RadialMenu
Add comprehensive interactive controls to remaining story files including
cluster stories, layout stories, and use case examples. All stories now
use consistent template pattern with .bind({}) and shared argTypes.
Changes:
- Convert Cluster.story.tsx remaining functional stories to template pattern
- Update TwoLayouts.story.tsx with controls for all 6 layout examples
- Update UseCases.story.tsx with controls for complex use case stories
- Ensure consistent pattern across all 24 story files
WORK IN PROGRESS:
- Pending TypeScript error cleanup for event handlers
- Some stories have event handler prop conflicts causing TS errors
- Need to resolve storybook args vs component prop type mismatches
All stories build successfully but may have runtime issues with event
handlers that need to be addressed in follow-up commits.
✅ Deploy Preview for reagraph ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
amcdnl
approved these changes
Jun 24, 2025
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.
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Adds missing controls to the StoryBook stories
What is the current behavior?
The existing Storybook stories lacked interactive controls, making it difficult for developers to explore and experiment with GraphCanvas features. limited ability to understand available options and their visual effects.
Issue Number: N/A
What is the new behavior?
Storybook stories now feature comprehensive interactive controls with 20+ GraphCanvas properties that can be adjusted in real-time. Stories have been converted to use the template pattern with
.bind({})and include shared argTypes configuration. Users can now interactively explore:This transforms the Storybook into an interactive playground that dramatically improves developer experience and library discoverability.
Does this PR introduce a breaking change?
Other information
Work In Progress Notes:
Files Modified:
docs/shared/storybook-args.ts)Technical Implementation: