0.7.0 • Published 2 years ago

@clack/prompts v0.7.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

@clack/prompts

Effortlessly build beautiful command-line apps 🪄 Try the demo

clack-prompt


@clack/prompts is an opinionated, pre-styled wrapper around @clack/core.

  • 🤏 80% smaller than other options
  • 💎 Beautiful, minimal UI
  • ✅ Simple API
  • 🧱 Comes with text, confirm, select, multiselect, and spinner components

Basics

Setup

The intro and outro functions will print a message to begin or end a prompt session, respectively.

import { intro, outro } from '@clack/prompts';

intro(`create-my-app`);
// Do stuff
outro(`You're all set!`);

Cancellation

The isCancel function is a guard that detects when a user cancels a question with CTRL + C. You should handle this situation for each prompt, optionally providing a nice cancellation message with the cancel utility.

import { isCancel, cancel, text } from '@clack/prompts';

const value = await text(/* TODO */);

if (isCancel(value)) {
  cancel('Operation cancelled.');
  process.exit(0);
}

Components

Text

The text component accepts a single line of text.

import { text } from '@clack/prompts';

const meaning = await text({
  message: 'What is the meaning of life?',
  placeholder: 'Not sure',
  initialValue: '42',
  validate(value) {
    if (value.length === 0) return `Value is required!`;
  },
});

Confirm

The confirm component accepts a yes or no answer. The result is a boolean value of true or false.

import { confirm } from '@clack/prompts';

const shouldContinue = await confirm({
  message: 'Do you want to continue?',
});

Select

The select component allows a user to choose one value from a list of options. The result is the value prop of a given option.

import { select } from '@clack/prompts';

const projectType = await select({
  message: 'Pick a project type.',
  options: [
    { value: 'ts', label: 'TypeScript' },
    { value: 'js', label: 'JavaScript' },
    { value: 'coffee', label: 'CoffeeScript', hint: 'oh no' },
  ],
});

Multi-Select

The multiselect component allows a user to choose many values from a list of options. The result is an array with all selected value props.

import { multiselect } from '@clack/prompts';

const additionalTools = await multiselect({
  message: 'Select additional tools.',
  options: [
    { value: 'eslint', label: 'ESLint', hint: 'recommended' },
    { value: 'prettier', label: 'Prettier' },
    { value: 'gh-action', label: 'GitHub Action' },
  ],
  required: false,
});

Spinner

The spinner component surfaces a pending action, such as a long-running download or dependency installation.

import { spinner } from '@clack/prompts';

const s = spinner();
s.start('Installing via npm');
// Do installation
s.stop('Installed via npm');

Utilities

Grouping

Grouping prompts together is a great way to keep your code organized. This accepts a JSON object with a name that can be used to reference the group later. The second argument is an optional but has a onCancel callback that will be called if the user cancels one of the prompts in the group.

import * as p from '@clack/prompts';

const group = await p.group(
  {
    name: () => p.text({ message: 'What is your name?' }),
    age: () => p.text({ message: 'What is your age?' }),
    color: ({ results }) =>
      p.multiselect({
        message: `What is your favorite color ${results.name}?`,
        options: [
          { value: 'red', label: 'Red' },
          { value: 'green', label: 'Green' },
          { value: 'blue', label: 'Blue' },
        ],
      }),
  },
  {
    // On Cancel callback that wraps the group
    // So if the user cancels one of the prompts in the group this function will be called
    onCancel: ({ results }) => {
      p.cancel('Operation cancelled.');
      process.exit(0);
    },
  }
);

console.log(group.name, group.age, group.color);
@cokakoala/create-skeleton-appcommit-managercreate-fuerza-app@coderebus/universal-devkitappistkit-addgit-commit-toolsabzlearnsabzlearn.ircreate-unix-app@everything-registry/sub-chunk-175unix-framework@hirotomoyamada/ai-translatecreate-basement-app@dragonforgecode/create-spacedragonwzmcreate-vabappaig1919create-lunaria@at-the-vr/mcpmdat-readmerelease-it-interactive@devastion/eslint-config@wpeshan/template-react-ts-2nextpayne_clicreate-yurekacreate-prithojgfdcreate-flux-appcardano-jcreate-clitestnexobatman-trivia-quiz@akku_21/bunnai-groqcli-brnd-nexttaco-launchtalljack-eslint-configsyllabusxsync-packagestemporibusdolorsvgrepodlsveltelabsvg-icons-cliterm-wizardtest-cli1234test-enes-appkit-cliwho-atharvawid-cliwalle-cliweb-component-creatorvutchwebstudiowr-server-cliworktree-welderworkshopatcyberworkshopatcyberaprilwp-initworld-triviax-sveltewg-cloud-token-generatorxm-1962reactivescripttechnical_triviatemp-rublangtempkittemplate-factorytemplate-typescript-node-packagestart-frontendstartgptcommittestingtestcreatetesttest-size-gsuisuzaku-clisuzaku-create-cliswift-commitsthis-is-a-random-workspace-managervite-boostvttcvite-plugin-hook-usevite-superplugin-framervitjaz-clivelar-cliveelozversion-markvitepress-carbon@dnax/studio@dnax/cli@dnax/core@dndxdnd/eslint-config@drop-in/new@coauthors/cli@create-typescript/legacy@composabase/cli@cuiguojie/ready@cuiqg/eslint-config@custom-shoelace/cli@custom.vendure/cli@custom.vendure/create@combeenation/create-custom-code@combeenation/create-custom-ts@cotera/clicreate-snap@design-token/inspector-cli
0.7.0

2 years ago

0.6.3

2 years ago

0.6.2

2 years ago

0.6.1

2 years ago

0.6.0

2 years ago

0.5.1

2 years ago

0.5.0

2 years ago

0.4.5

2 years ago

0.4.4

2 years ago

0.4.3

2 years ago

0.4.2

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.3.0

2 years ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago