feat(docs-app,ui-buttons): add auto-generated prop playground#2657
feat(docs-app,ui-buttons): add auto-generated prop playground#2657balzss wants to merge 1 commit into
Conversation
Introduce an internal `PropEditor` docs component that reads a component's react-docgen metadata at runtime and generates a form of editable prop controls (selects for string-literal unions, a toggle for booleans, text and number inputs) with a live preview and the equivalent JSX. It lets non-devs experiment with components without editing code. The editor is registered as a docs global so it can be dropped into any README via a `type: embed` block, and accepts an optional `config` for per-component adjustments (include/exclude, control overrides, sample children). Wire it up as a proof of concept in the Button v2 README. Preview and code generation reuse the existing Preview/compileAndRenderExample pipeline; theme and version come from AppContext. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Visual regression report✅ No changes.
Baselines come from the |
adamlobler
left a comment
adamlobler
left a comment
There was a problem hiding this comment.
Thanks for the quick work, this is exactly what I had in mind! 🔥
I would only adjust the layout a bit because the prop selectors are very wide, while the preview is quite small. I think a layout where the component preview and the prop selectors are next to each other would work better. Right now, if a component has a lot of props, you can’t see the preview without scrolling.
Also, if it’s possible, it would be great to be able to change the theme locally within this view. It’s a small UX improvement, but it’s something we do a lot. Currently, you have to scroll back up, change the theme, wait for the page to reload, and then set the props again, which is a lot of effort for a quick check that we do a lot.
2 participants
Summary
PropEditordocs component that reads a component's react-docgen metadata at runtime and auto-generates prop controls (enum selects, boolean toggle, text/number inputs) with a live preview and generated JSX.PropEditoras a docs global so it can be embedded in any README via atype: embedblock; supports an optionalconfigfor per-component tuning (include/exclude, control overrides, sample children).Test Plan
as,margin,cursor,renderIcon,onClick) show under "Not editable here" and are not rendered as controls.Fixes INSTUI-5128
🤖 Generated with Claude Code