clack
clack copied to clipboard
natemoo-re
[Request] header component or multiselect with multiple groups
Is your feature request related to a problem? Please describe. I would like to group items for some organization, but I don't want to make it feel like we're sending the user through tons of different prompts.
Describe the solution you'd like Something like what's pictured below. This example is split into two prompts which each display multiple groups.
┌ Welcome to Svelte Add
│
◇ Which libraries would you like to setup?
│ Testing
│ ◻ Playwright
│ ◻ vitest
│
│ Code quality
│ ◻ prettier
│ ◻ eslint
│
│ CSS
│ ◻ Open Props
│ ◻ UnoCSS
│ ◻ TailwindCSS
│ ◻ Ant Design
│ ◻ Bootstrap
│ ◻ Bulma
│
◇ Which application functionality would you like to setup?
│ Database
│ ◻ Drizzle
│
│ Auth
│ ◻ Lucia
│ ◻ Auth.js
│
│ Markdown
│ ◻ mdsvex
│
│ Other tools
│ ◻ Storybook
└
Describe alternatives you've considered Today, as far as I'm aware, we'd need to split each of these groups into a separate prompt. It would make the user go through seven prompts in the example above, which just feels too long.
Additional context
I'd like to use this for svelte-add, which can be run with npx svelte-add and is available at https://github.com/svelte-add/svelte-add
We used this for an early version of the Svelte CLI, but ended up going back to the standard prompts. A lot of the reason was unrelated to the design of the prompt, which is that we had too many groups with just a single item. There was also a bit of debate over whether the UI was taking up too much vertical space though. Here's where we landed:
@natemoo-re It would be great not only for multiselect, but also for the select component in cases we need a main menu separating the options per context:
┌ Welcome to the app
│
◇ ---- users ----
│ ( ) create user
│ ( ) update user
│ ( ) delete user
◇ ---- feature flags ----
│ ( ) create flag
│ ( ) update flag
│ ( ) delete flag
│ ( ) add flag to user
Is this achievable now through a group multi select which has selectableGroups: false?
