feat(@clack/core,@clack/prompts): path prompt

[Mist3rBru]

PathPrompt

The path component allows user to select a file/folder using one of two approaches:

Select

Selecting the file/folder with a tree based select with free navigation by arrow keys.

const projectPath = await path({
  type: 'select',
  message: 'Pick a project:',
  initialValue: process.cwd(),
  onlyShowDir: true,
  maxItems: 12
});

Demo

https://github.com/natemoo-re/clack/assets/100330057/935c69f2-1e09-4384-a091-343f9031f96f

Text:

Typing the path with built-in autosuggestion and autocomplete features.

const projectPath = await path({
  type: 'text',
  message: 'Pick a project:',
  initialValue: process.cwd(),
  placeholder: './app',
  onlyShowDir: true,
});

Demo

https://github.com/natemoo-re/clack/assets/100330057/8ade4f40-baec-4231-8f21-3bea1197dbf6

This PR includes:

• [x] Code
• [x] Docs
• [x] Changeset
• [x] Example

Relates #35 Closes #32 Closes #96

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 8c854c104e2f4d4e7e9d850f5b3c0b2375d054b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

| Name | Type | | -------------- | ----- | | @clack/core | Minor | | @clack/prompts | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[cpreston321]

@Mist3rBru It would nice to include a video for reference! So we show it off in the release & also just see the functionality!

[Mist3rBru]

@cpreston321 great idea!

I included the video on PR description, now you can copy the link and paste on release

[ricky11]

is the path now usable? or not merged yet?

[Mist3rBru]

@cpreston321 I was looking at this code after a while and it looks messy with both logics, what do you think about split it into 2 prompts, like PathPrompt and SelectPathPrompt, and do the same for @clack/prompts with path and selectPath?