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 3 commits into
Conversation
|
Visual regression reportCypress suite: ❌ Failing — see the run logs. Visual diff:
Accessibility (axe):
📊 View full report — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches. Diff images (2)badge-canvas.png — 1573 pixels differtooltip-light.png — 14438 pixels differBaselines 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.
eb42c0b to
97d17fd
Compare
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>
Add a /comprehension-check skill that quizzes the author on the current diff's design decisions before committing, to stop AI-generated code the author can't explain from landing. It skips trivial diffs, asks free-text design questions, grades against the diff, and teaches then re-quizzes on gaps. Wire it into /commit as a step-0 preamble and whitelist the new skill file in .gitignore so it ships alongside the other shared commands. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
97d17fd to
4090706
Compare
… docs Opt-in registry: 29 single-element forms and 39 composition templates, each seeded so the preview renders and the snippet is complete.
4090706 to
23f993d
Compare
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