Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/yellow-bats-listen.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@clack/prompts": patch
---

docs: add jsdoc for `autocomplete`, `confirm`, and `path` prompts
27 changes: 24 additions & 3 deletions packages/prompts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const secret = await password({

### Confirm

The confirm component accepts a yes or no answer. The result is a boolean value of `true` or `false`.
The `confirm` prompt accepts a yes or no choice, returning a boolean value corresponding to the user's selection.

```js
import { confirm } from '@clack/prompts';
Expand Down Expand Up @@ -125,7 +125,7 @@ const projectType = await select({

### Autocomplete

The autocomplete component lets a user filter a list by typing, then choose one option from the matching results. By default, matching uses each option's `label`, `hint`, and `value`. The result is the selected option's `value`.
The `autocomplete` prompt combines text input with a searchable list of options. It's perfect for when you have a large list of options and want to help users find what they're looking for quickly.

```js
import { autocomplete } from '@clack/prompts';
Expand All @@ -142,6 +142,27 @@ const framework = await autocomplete({
});
```

### Autocomplete Multi-Select

The `autocompleteMultiselect` prompt combines the search functionality of [autocomplete](#autocomplete) with the ability to select multiple options.

```js
import { autocomplete } from '@clack/prompts';

const framework = await autocomplete({
message: 'Search for a framework',
options: [
{ value: 'next', label: 'Next.js', hint: 'React framework' },
{ value: 'astro', label: 'Astro', hint: 'Content-focused' },
{ value: 'svelte', label: 'SvelteKit', hint: 'Compile-time framework' },
{ value: 'remix', label: 'Remix', hint: 'Full stack framework' },
{ value: 'nuxt', label: 'Nuxt', hint: 'Vue framework' },
],
placeholder: 'Type to search...',
maxItems: 5,
});
```

### Select Key

The `selectKey` component lets a user choose an option by pressing its single-character string `value` key directly.
Expand Down Expand Up @@ -226,7 +247,7 @@ const bio = await multiline({

### Path

The path component offers filesystem path suggestions and returns the selected path as a string. When `directory: true` is set, only directories can be selected.
The `path` prompt extends [`autocomplete`](#autocomplete) to provide file and directory suggestions.

```js
import { path } from '@clack/prompts';
Expand Down
89 changes: 76 additions & 13 deletions packages/prompts/src/autocomplete.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,45 +41,83 @@ function getSelectedOptions<T>(values: T[], options: Option<T>[]): Option<T>[] {
return results;
}

/**
* Options for the {@link autocomplete} prompt.
*/
interface AutocompleteSharedOptions<Value> extends CommonOptions {
/**
* The message to display to the user.
* The prompt message or question shown to the user above the input.
Comment thread
ghostdevv marked this conversation as resolved.
Outdated
*/
message: string;

/**
* Available options for the autocomplete prompt.
* The options to present, or a function that returns the options to present
* allowing for custom search/filtering.
*
* @see https://bomb.sh/docs/clack/packages/prompts/#dynamic-options-getter
*/
options: Option<Value>[] | ((this: AutocompletePrompt<Option<Value>>) => Option<Value>[]);

/**
* Maximum number of items to display at once.
* The maximum number of items/options to display in the autocomplete list at once.
*/
maxItems?: number;

/**
* Placeholder text to display when no input is provided.
* Placeholder text displayed when the search field is empty. When set, pressing
* tab copies the placeholder into the input.
*/
placeholder?: string;

/**
* Validates the value
* A function that validates user input. Return a `string` or `Error` to show as a
* validation error, or `undefined` to accept the result.
*/
validate?: (value: Value | Value[] | undefined) => string | Error | undefined;

/**
* Custom filter function to match options against search input.
* If not provided, a default filter that matches label, hint, and value is used.
* Custom filter function to match options against the search input.
*/
filter?: (search: string, option: Option<Value>) => boolean;
}

export interface AutocompleteOptions<Value> extends AutocompleteSharedOptions<Value> {
/**
* The initial selected value.
* The initially selected option from the list.
*/
initialValue?: Value;

/**
* The initial user input
* The starting value shown in the users input box.
*/
initialUserInput?: string;
}

/**
* The `autocomplete` prompt combines a text input with a searchable list of options.
* It's perfect for when you have a large list of options and want to help users
* find what they're looking for quickly.
*
* @see https://bomb.sh/docs/clack/packages/prompts/#autocomplete
*
* @example
* ```ts
* import { autocomplete } from '@clack/prompts';
*
* const framework = await autocomplete({
* message: 'Search for a framework',
* options: [
* { value: 'next', label: 'Next.js', hint: 'React framework' },
* { value: 'astro', label: 'Astro', hint: 'Content-focused' },
* { value: 'svelte', label: 'SvelteKit', hint: 'Compile-time framework' },
* { value: 'remix', label: 'Remix', hint: 'Full stack framework' },
* { value: 'nuxt', label: 'Nuxt', hint: 'Vue framework' },
* ],
* placeholder: 'Type to search...',
* maxItems: 5,
* });
* ```
*/
export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
const prompt = new AutocompletePrompt({
options: opts.options,
Expand Down Expand Up @@ -223,20 +261,45 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
return prompt.prompt() as Promise<Value | symbol>;
};

// Type definition for the autocompleteMultiselect component
/**
* Options for the {@link autocompleteMultiselect} prompt
*/
export interface AutocompleteMultiSelectOptions<Value> extends AutocompleteSharedOptions<Value> {
/**
* The initial selected values
* The initially selected option(s) from the list.
*/
initialValues?: Value[];

/**
* If true, at least one option must be selected
* When `true` at least one option must be selected.
* @default false
*/
required?: boolean;
}

/**
* Integrated autocomplete multiselect - combines type-ahead filtering with multiselect in one UI
* The `autocompleteMultiselect` prompt combines the search functionality of autocomplete
* with the ability to select multiple options.
*
* @see https://bomb.sh/docs/clack/packages/prompts/#autocomplete-multiselect
*
* @example
* ```ts
* import { autocompleteMultiselect } from '@clack/prompts';
*
* const frameworks = await autocompleteMultiselect({
* message: 'Select frameworks',
* options: [
* { value: 'next', label: 'Next.js', hint: 'React framework' },
* { value: 'astro', label: 'Astro', hint: 'Content-focused' },
* { value: 'svelte', label: 'SvelteKit', hint: 'Compile-time framework' },
* { value: 'remix', label: 'Remix', hint: 'Full stack framework' },
* { value: 'nuxt', label: 'Nuxt', hint: 'Vue framework' },
* ],
* placeholder: 'Type to search...',
* maxItems: 5,
* });
* ```
*/
export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOptions<Value>) => {
const formatOption = (
Expand Down
42 changes: 42 additions & 0 deletions packages/prompts/src/confirm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,55 @@ import {
symbol,
} from './common.js';

/**
* Options for the {@link confirm} prompt.
*/
export interface ConfirmOptions extends CommonOptions {
/**
* The prompt message or question shown to the user above the input.
Comment thread
ghostdevv marked this conversation as resolved.
Outdated
*/
message: string;

/**
* The label to use for the active (true) option.
* @default 'Yes'
*/
active?: string;

/**
* The label to use for the inactive (false) option.
* @default 'No'
*/
inactive?: string;

/**
* The initial selected value (true or false).
* @default true
*/
initialValue?: boolean;

/**
* Whether to render the options vertically instead of horizontally.
* @default false
*/
vertical?: boolean;
}

/**
* The `confirm` prompt accepts a yes or no choice, returning a boolean value
* corresponding to the user's selection.
*
* @see https://bomb.sh/docs/clack/packages/prompts/#confirmation
*
* @example
* ```ts
* import { confirm } from '@clack/prompts';
*
* const shouldProceed = await confirm({
* message: 'Do you want to continue?',
* });
* ```
*/
export const confirm = (opts: ConfirmOptions) => {
const active = opts.active ?? 'Yes';
const inactive = opts.inactive ?? 'No';
Expand Down
46 changes: 45 additions & 1 deletion packages/prompts/src/path.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,58 @@ import { dirname, join } from 'node:path';
import { autocomplete } from './autocomplete.js';
import type { CommonOptions } from './common.js';

/**
* Options for the {@link path} prompt.
*/
export interface PathOptions extends CommonOptions {
/**
* The prompt message or question shown to the user above the input.
Comment thread
ghostdevv marked this conversation as resolved.
Outdated
*/
message: string;

/**
* The starting directory for path suggestions (defaults to current working directory).
*/
root?: string;

/**
* When `true` only **directories** appear in suggestions while you navigate.
*/
directory?: boolean;

/**
* The starting path shown when the prompt first renders, which users can edit
* before submitting. If not provided it will fall back to the given `root`,
* or the current working directory.
*
* In `directory` mode, if the initial value points to a directory that exists,
* pressing enter will submit the input instead of jumping to the first child.
*/
initialValue?: string;
message: string;

/**
* A function that validates the given path. Return a `string` or `Error` to show as a
* validation error, or `undefined` to accept the result.
*/
validate?: (value: string | undefined) => string | Error | undefined;
}

/**
* The `path` prompt extends `autocomplete` to provide file and directory suggestions.
*
* @see https://bomb.sh/docs/clack/packages/prompts/#path-selection
*
* @example
* ```ts
* import { path } from '@clack/prompts';
*
* const result = await path({
* message: 'Select a file:',
* root: process.cwd(),
* directory: false,
* });
* ```
*/
export const path = (opts: PathOptions) => {
const validate = opts.validate;

Expand Down
Loading