feat(docs-app,ui-buttons): add auto-generated prop playground - #2657
Open
balzss wants to merge 3 commits into
Open
feat(docs-app,ui-buttons): add auto-generated prop playground#2657balzss wants to merge 3 commits into
balzss wants to merge 3 commits into
Conversation
Contributor
|
Contributor
Visual regression report
Diff images (33)alert.png — baseline no longer producedavatar.png — baseline no longer producedbadge.png — baseline no longer producedbillboard.png — baseline no longer producedbreadcrumb.png — baseline no longer producedbutton-and-derivatives.png — baseline no longer producedbyline.png — baseline no longer producedcalendar.png — baseline no longer producedcheckbox.png — baseline no longer producedcheckboxgroup.png — baseline no longer producedcolorpicker.png — baseline no longer producedcontextview.png — baseline no longer producedcustom-and-lucide-icons.png — baseline no longer produceddateinput-dateinput2.png — baseline no longer produceddatetimeinput.png — baseline no longer produceddiff-demo.png — 6324 pixels differdrilldown.png — baseline no longer producedfiledrop.png — baseline no longer producedform-errors.png — baseline no longer producedheading.png — baseline no longer producedimg.png — baseline no longer producedlink.png — baseline no longer producedmenu.png — baseline no longer producedmetric-pill-tag-timeselect-text.png — baseline no longer producedoptions.png — baseline no longer producedpagination.png — baseline no longer producedprogressbar.png — baseline no longer producedselect-simpleselect.png — baseline no longer producedtable.png — baseline no longer producedtabs.png — baseline no longer producedtooltip.png — baseline no longer producedtreebrowser.png — baseline no longer producedview.png — baseline no longer producedBaselines come from the |
adamlobler
reviewed
Jul 24, 2026
adamlobler
left a comment
adamlobler
left a comment
Collaborator
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.
balzss
force-pushed
the
docs/visual-prop-editor
branch
from
July 27, 2026 10:15
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>
Auto-inject the PropEditor playground on every component doc page from
`Document`, using the react-docgen metadata it already has (no runtime fetch).
Simple standalone components get a single-element form; compound components get
a curated composition playground that edits the parent and a representative
child together, driven by a registry.
- Generalize PropEditor to N sections plus a JSX template with `{{id}}`
attribute placeholders; simple mode is one section with the default
serializer.
- Add a registry of custom composition playgrounds (Menu, Tabs, Table, Modal,
Select, Flex, Grid, ... 17 total) plus a force-simple set for prop-driven
components whose subcomponents are internal (Rating, Pagination, Calendar).
- Gate: real compound components (dotted subcomponent ids) fall back to their
README examples unless a custom entry exists; components whose only children
are internal facades (Checkbox, FormField) still get the simple form.
- Stabilize config identity and key the seed effect on a structural signature
so composition edits are not wiped on every render.
- Drop the now-redundant manual PropEditor embed from the Button v2 README.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
balzss
force-pushed
the
docs/visual-prop-editor
branch
from
July 30, 2026 10:22
97d17fd to
4090706
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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