[Feature Request]: Add Carbon UI Builder links to react storybook stories

[zvonimirfras]

The problem

Carbon UI Builder enables user to craft and modify portions of their apps in a WYSIWYG editor and then export it to a developer-friendly React or Angular code.

Having a way to one-click open Carbon React components in the UI Builder will enable users to explore more advanced interactions and export to code easier.

The solution

Carbon UI Builder allows a JSON import via from-json endpoint.

A link such as this one will let user create a UI fragment, make modifications they want, and export it to a desired framework.

Let's have links for each supported component.

CC: @tay1orjones @MoizMasud

Examples

Example in Carbon Components Angular:

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[sstrubberg]

Hey @zvonimirfras! First off, great idea for enhancement to storybook. I love the idea linking people out to Carbon UI Builder. Having said that, we have some concerns that need to be addressed before implementation.

• Live Demo. We are currently refactoring our website Live Demo experience into one that makes use of a storybook story. This integration could have adverse effects that would need to be explored.
• Is this how we want to surface this from a design perspective? This would involve some design exploration to see if having the link sit directly on the story would be the best spot.
• And finally, is the business case. I'd like to see more of senior leadership backing further development of this tool before committing our squad's time and energy to integrating with it. To that end, here is something out in the wild that we found from MUI that is doing pretty much the same thing Carbon UI Builder is doing. Maybe this will help your business case. https://mui.com/toolpad/

[tay1orjones]

I think it makes the most sense for links like this to live on the docs pages for components, not on the canvas itself.

Also we need to think about maintenance cost to ensure that we're not having to manually keep the source for these links up to date. We ideally need to support stackblitz and codesandbox alongside this and it would be nice if we could find a way to have them all point to a single source of truth. That could maybe be the default stories for each component, but I'm not exactly sure how that would work.

[zvonimirfras]

JSON format (and links with that) shouldn't change much between versions, so maintenance should be minimal.