reagraph
reagraph copied to clipboard
Feat/add storybook controls
PR Checklist
Please check if your PR fulfills the following requirements:
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
PR Type
What kind of change does this PR introduce?
Adds missing controls to the StoryBook stories
[ ] Bugfix
[X] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:
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:
- Layout algorithms (13 options: forceDirected2d/3d, hierarchical, circular, etc.)
- Camera modes (pan, rotate, orbit)
- Themes (light, dark, custom)
- Sizing strategies (centrality, pageRank, attribute-based)
- Label visibility modes
- Edge styling options
- Selection and interaction modes
- Advanced features like clustering, collapsing, and custom rendering (WIP)
This transforms the Storybook into an interactive playground that dramatically improves developer experience and library discoverability.
Does this PR introduce a breaking change?
[ ] Yes
[X] No
Other information
Work In Progress Notes:
- I understand the introduction of controls on all stories make some stories redundant, will need to explore which controls make the most since where, but for now unlocking full interactivity for all props against all components.
- Camera control stories not yet implemented
- Some TypeScript errors may exist with event handler prop conflicts in complex stories
- Event handlers in stories with custom selection logic (UseCases, ContextMenu) may need refinement
- All stories build successfully but runtime testing of all controls is needed
Files Modified:
- story files updated with comprehensive controls
- 1 shared configuration file created (
docs/shared/storybook-args.ts)
Technical Implementation:
- Consistent template pattern across all stories
- Shared argTypes prevent code duplication
- Maintains existing functionality while adding interactivity
Deploy Preview for reagraph ready!
| Name | Link |
|---|---|
| Latest commit | 730c899663ad7bb4623a27cf63fe14b1d6700820 |
| Latest deploy log | https://app.netlify.com/projects/reagraph/deploys/6856db80f4fc6c000889405a |
| Deploy Preview | https://deploy-preview-337--reagraph.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.