diff --git a/packages/cta-cli/src/ui-prompts.ts b/packages/cta-cli/src/ui-prompts.ts index 35d0305d..c0e6b1c3 100644 --- a/packages/cta-cli/src/ui-prompts.ts +++ b/packages/cta-cli/src/ui-prompts.ts @@ -3,6 +3,7 @@ import { confirm, isCancel, multiselect, + note, select, text, } from '@clack/prompts' @@ -103,6 +104,9 @@ export async function selectPackageManager(): Promise { return packageManager } +// Track if we've shown the multiselect help text +let hasShownMultiselectHelp = false + export async function selectAddOns( framework: Framework, mode: string, @@ -116,6 +120,12 @@ export async function selectAddOns( return [] } + // Show help text only once + if (!hasShownMultiselectHelp) { + note('Use ↑/↓ to navigate • Space to select/deselect • Enter to confirm', 'Keyboard Shortcuts') + hasShownMultiselectHelp = true + } + const value = await multiselect({ message, options: addOns diff --git a/packages/cta-cli/tests/ui-prompts.test.ts b/packages/cta-cli/tests/ui-prompts.test.ts index 987ca33f..9d039876 100644 --- a/packages/cta-cli/tests/ui-prompts.test.ts +++ b/packages/cta-cli/tests/ui-prompts.test.ts @@ -93,7 +93,8 @@ describe('selectPackageManager', () => { }) describe('selectAddOns', () => { - it('should select some add-ons', async () => { + it('should show keyboard shortcuts help and select add-ons', async () => { + const noteSpy = vi.spyOn(clack, 'note').mockImplementation(() => {}) vi.spyOn(clack, 'multiselect').mockImplementation(async () => ['add-on-1']) vi.spyOn(clack, 'isCancel').mockImplementation(() => false) @@ -114,7 +115,12 @@ describe('selectAddOns', () => { 'add-on', 'Select add-ons', ) + expect(packageManager).toEqual(['add-on-1']) + expect(noteSpy).toHaveBeenCalledWith( + 'Use ↑/↓ to navigate • Space to select/deselect • Enter to confirm', + 'Keyboard Shortcuts', + ) }) it('should exit on cancel', async () => {