wip: config builder #14226
wip: config builder #14226
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
this is badass and clearly the right thing to do imo. My big question: is there anything we can do to trip an alarm if/when the configuration values drift out of date? or even better, would it be possible to always derive them from the source code? (edit: to be clear I am asking this in the abstract, not with any concrete knowledge of how often this happens. Maybe it's not a big deal! just thinking of the case where we have some new config item and it doesn't get added, and how we'd guard against that) |
this actually crossed my mind this morning when I was re-looking at the PR. maintenance is definitely an issue. derive from source code would be SICK... I will dig into that 🙏🏼 |
There was a problem hiding this comment.
I prefer the two column layout because it always spotlights the code, but the description text looks cramped on a laptop
instead of having the code block be fixed or sticky, maybe we try increasing the code block's min-height (or the same height as the entire component) and making the config list be scrollable. that way it doesn't eat up the entire vertical scroll
feel free to go a different direction, it's lookin awesome
config-builder-ui.mp4
| --- | ||
| title: JavaScript web configuration | ||
| sidebar: Docs | ||
| showTitle: true |
There was a problem hiding this comment.
up to you but maybe use a wide layout since this is a special page for building configs. we do this for the start here / <QuestLog> pages
you can use any tailwind class for max width
| showTitle: true | |
| showTitle: true | |
| hideRightSidebar: true | |
| contentMaxWidthClass: max-w-5xl |
| <OSButton | ||
| key={option.value} | ||
| variant={config.selectedValue === option.value ? 'primary' : 'secondary'} | ||
| size="md" | ||
| onClick={() => handleSelectChange(option.value)} | ||
| > | ||
| {option.label} | ||
| </OSButton> |
There was a problem hiding this comment.
I think the buttons look a little of, let's use checkboxes or an actual toggle for the host region
|
|
||
| {toggle && ( | ||
| <div className="mb-4"> | ||
| <label className="block text-base font-semibold mb-2">{toggle.label}</label> |
There was a problem hiding this comment.
I think the labels look better with the inherited font size. this applies to the other labels too
| <label className="block text-base font-semibold mb-2">{toggle.label}</label> | |
| <label className="block font-semibold mb-2">{toggle.label}</label> |
| <div className="flex-1 -mt-0.5"> | ||
| <span className="text-base font-semibold">{checkbox.label}</span> | ||
| {checkbox.description && ( | ||
| <p className="text-sm text-muted m-0 mt-0.5">{checkbox.description}</p> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
so this depends on the layout, but maybe we collapse the description if we do the two column layout. it looks fine as is in the single column layout imo
|
or maybe you do single column layout but you fix the code block at the top with sticky scroll |
demo on JS Web SDK config page:
one panel layout
vs.
two panel layout
https://github.com/user-attachments/assets/4c136285-f509-4b01-a706-7286a0830ef0
Changes
this is WIP and I am open to a ton of feedback. the thought here was to create an interactive config builder component. instead of manually piecing together config options from reference tables, users can now select options/use inputs/etc. to create ready to use code snippets