reagraph icon indicating copy to clipboard operation
reagraph copied to clipboard

Feat/add storybook controls

Open qdhenry opened this issue 5 months ago • 1 comments

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 CleanShot 2025-06-21 at 12 06 00

[ ] 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

qdhenry avatar Jun 21 '25 16:06 qdhenry

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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify[bot] avatar Jun 21 '25 16:06 netlify[bot]