[READ-ONLY] Mirror of https://github.com/bombshell-dev/clack. Effortlessly build beautiful command-line apps bomb.sh/docs/clack/basics/getting-started
cli command-line command-line-app node prompt prompts
Something went wrong. Try again.
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101import * as p from '@clack/prompts';import color from 'picocolors';
/** * Example demonstrating the integrated autocomplete multiselect component * Which combines filtering and selection in a single interface */
async function main() { console.clear();
p.intro(`${color.bgCyan(color.black(' Integrated Autocomplete Multiselect Example '))}`);
p.note( `${color.cyan('Filter and select multiple items in a single interface:')}- ${color.yellow('Type')} to filter the list in real-time- Use ${color.yellow('up/down arrows')} to navigate with improved stability- Press ${color.yellow('Space')} to select/deselect the highlighted item ${color.green('(multiple selections allowed)')}- Use ${color.yellow('Backspace')} to modify your filter text when searching for different options- Press ${color.yellow('Enter')} when done selecting all items- Press ${color.yellow('Ctrl+C')} to cancel `, 'Instructions' );
// Frameworks in alphabetical order const frameworks = [ { value: 'angular', label: 'Angular', hint: 'Frontend/UI' }, { value: 'django', label: 'Django', hint: 'Python Backend' }, { value: 'dotnet', label: '.NET Core', hint: 'C# Backend' }, { value: 'electron', label: 'Electron', hint: 'Desktop' }, { value: 'express', label: 'Express', hint: 'Node.js Backend' }, { value: 'flask', label: 'Flask', hint: 'Python Backend' }, { value: 'flutter', label: 'Flutter', hint: 'Mobile' }, { value: 'laravel', label: 'Laravel', hint: 'PHP Backend' }, { value: 'nestjs', label: 'NestJS', hint: 'Node.js Backend' }, { value: 'nextjs', label: 'Next.js', hint: 'React Framework' }, { value: 'nuxt', label: 'Nuxt.js', hint: 'Vue Framework' }, { value: 'rails', label: 'Ruby on Rails', hint: 'Ruby Backend' }, { value: 'react', label: 'React', hint: 'Frontend/UI' }, { value: 'reactnative', label: 'React Native', hint: 'Mobile' }, { value: 'spring', label: 'Spring Boot', hint: 'Java Backend' }, { value: 'svelte', label: 'Svelte', hint: 'Frontend/UI' }, { value: 'tauri', label: 'Tauri', hint: 'Desktop' }, { value: 'vue', label: 'Vue.js', hint: 'Frontend/UI' }, ];
// Use the new integrated autocompleteMultiselect component const result = await p.autocompleteMultiselect<string>({ message: 'Select frameworks (type to filter)', options: frameworks, placeholder: 'Type to filter...', maxItems: 8, });
if (p.isCancel(result)) { p.cancel('Operation cancelled.'); process.exit(0); }
// Type guard: if not a cancel symbol, result must be a string array function isStringArray(value: unknown): value is string[] { return Array.isArray(value) && value.every((item) => typeof item === 'string'); }
// We can now use the type guard to ensure type safety if (!isStringArray(result)) { throw new Error('Unexpected result type'); }
const selectedFrameworks = result;
// If no items selected, show a message if (selectedFrameworks.length === 0) { p.note('No frameworks were selected', 'Empty Selection'); process.exit(0); }
// Display selected frameworks with detailed information p.note( `You selected ${color.green(selectedFrameworks.length)} frameworks:`, 'Selection Complete' );
// Show each selected framework with its details const selectedDetails = selectedFrameworks .map((value) => { const framework = frameworks.find((f) => f.value === value); return framework ? `${color.cyan(framework.label)} ${color.dim(`- ${framework.hint}`)}` : value; }) .join('\n');
p.log.message(selectedDetails); p.outro(`Successfully selected ${color.green(selectedFrameworks.length)} frameworks.`);}
main().catch(console.error);