examples, update form prompt

CHANGELOG.md

@@ -45,6 +45,7 @@ Changelog entries are classified using the following labels _(from [keep-a-chang
 
 ### Added
 
+- Adds support for <kbd>ctrl</kbd>+<kbd>n</kbd> to add choices
 - Adds support for `options.history` on the `Input` and `Text` prompts. 
 - Adds support for `options.term` to set the terminal, thanks to [@tunnckoCore](https://github.com/tunnckoCore). At the moment this is only used in a couple of edge cases with the `Survey` and `MultiScale` prompts to check if the terminal is Hyper.
 - `options.skip` may now be a Boolean, thanks to [@tunnckoCore](https://github.com/tunnckoCore)

examples/editable/choices-headings.js

@@ -0,0 +1,63 @@
+const log = require('../log-keypress');
+const colors = require('ansi-colors');
+const Prompt = require('../../lib/prompts/editable');
+const prompt = new Prompt({
+  name: 'user',
+  message: 'Please provide the following information:',
+  promptLine: false,
+  align: false,
+  header() {
+    return 'Keypress: ' + log(prompt) + ' ';
+  },
+  choices: [
+    {
+      name: 'author',
+      role: 'heading',
+      message: colors.underline.bold('Author information'),
+      indicator: colors.cyan('?'),
+      choices: [
+        {
+          name: 'firstname',
+          message: 'First Name',
+          initial: 'Jon',
+          editable: true
+        },
+        {
+          name: 'lastname',
+          message: 'Last Name',
+          initial: 'Schlinkert',
+          editable: true
+        },
+        {
+          name: 'username',
+          message: 'GitHub username',
+          editable: true
+        },
+        {
+          name: 'email',
+          message: 'Email address?',
+          editable: true
+        }
+      ]
+    },
+    {
+      name: 'colors',
+      role: 'heading',
+      message: colors.underline.bold('Favorite colors?'),
+      indicator: colors.cyan('\n?'),
+      choices: [
+        { name: 'green' },
+        { name: 'blue' },
+        { name: 'organge' },
+        { name: 'purple' }
+      ]
+    }
+  ]
+});
+
+prompt.run()
+  .then(value => {
+    console.log('author:', value.author);
+    console.log('colors:', value.colors);
+  })
+  .catch(console.error);

examples/editable/choices-nested.js → examples/editable/choices-validate.js

@@ -4,6 +4,7 @@ const prompt = new Prompt({
   name: 'user',
   message: 'Please provide the following information:',
   promptLine: false,
+  align: false,
   choices: [
     {
       name: 'author',
@@ -15,25 +16,24 @@ const prompt = new Prompt({
       choices: [
         {
           name: 'firstname',
-          message: colors.italic('First Name'),
+          message: 'First Name',
           initial: 'Jon',
           editable: true
         },
         {
           name: 'lastname',
-          message: colors.italic('Last Name'),
+          message: 'Last Name',
           initial: 'Schlinkert',
           editable: true
         },
         {
           name: 'username',
-          message: colors.italic('GitHub username'),
-          // initial: 'jonschlinkert',
+          message: 'GitHub username',
           editable: true
         },
         {
           name: 'email',
-          message: colors.italic('Email address?'),
+          message: 'Email address?',
           editable: true,
           validate(value) {
             if (value.includes('jon')) {

examples/log-keypress-example.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const yosay = require('yosay');
+const colors = require('ansi-colors');
+const { MultiSelect } = require('..');
+const log = require('./log-keypress');
+
+const prompt = new MultiSelect({
+  type: 'multiselect',
+  name: 'colors',
+  message: 'Pick your favorite colors',
+  limit: 5,
+  header() {
+    return 'Keypress: ' + log(prompt) + ' ';
+  },
+  pointer(state, choice, i) {
+    return (state.index === i ? state.symbols.pointer : ' ') + ' ';
+  },
+  choices: [
+    { name: 'aqua', value: '#00ffff' },
+    { name: 'black', value: '#000000' },
+    { name: 'blue', value: '#0000ff', hint: '(this is a choice hint)' },
+    { name: 'fuchsia', value: '#ff00ff' },
+    { name: 'gray', value: '#808080' },
+    { name: 'green', value: '#008000' },
+    { name: 'lime', value: '#00ff00' },
+    { name: 'maroon', value: '#800000' },
+    { name: 'navy', value: '#000080' },
+    { name: 'olive', value: '#808000' },
+    { name: 'purple', value: '#800080' },
+    { name: 'red', value: '#ff0000' },
+    { name: 'silver', value: '#c0c0c0' },
+    { name: 'teal', value: '#008080' },
+    { name: 'white', value: '#ffffff' },
+    { name: 'yellow', value: '#ffff00' }
+  ]
+});
+
+prompt.run()
+  .then(names => console.log('Answer:', names))
+  .catch(console.error);

examples/log-keypress.js

@@ -1,60 +1,31 @@
 'use strict';
 
-const yosay = require('yosay');
 const colors = require('ansi-colors');
-const { MultiSelect } = require('..');
 let timeout;
 
 const press = str => colors.red('<') + str + colors.red('>');
-const prompt = new MultiSelect({
-  type: 'multiselect',
-  name: 'colors',
-  message: 'Pick your favorite colors',
-  limit: 5,
-  footer() {
-    if (!prompt.state.buffer) return '\n';
-    let key = prompt.state.keypress;
-    let keypress = '';
-    clearTimeout(timeout);
 
-    if (key) {
-      if (key.shift) keypress = press('shift') + colors.bold('+');
-      if (key.ctrl) keypress = press('ctrl') + colors.bold('+');
-      if (key.name === 'number') key.name += ' ' + key.raw;
-      keypress += press(key.name);
-    }
+module.exports = prompt => {
+  if (!prompt.state.buffer) return '';
+  let key = prompt.state.keypress;
+  let keypress = '';
+  clearTimeout(timeout);
 
-    timeout = setTimeout(async() => {
-      prompt.state.keypress = '';
-      await prompt.render();
-    }, 500);
+  if (key) {
+    if (key.shift) keypress = press('shift') + colors.bold('+');
+    if (key.ctrl) keypress = press('ctrl') + colors.bold('+');
+    if (key.name === 'number') {
+      keypress = press(key.name + ' ' + key.raw);
+    } else {
+      keypress = press(key.name || key.raw);
+    }
+  }
 
-    prompt.on('close', () => clearTimeout(timeout));
-    return !prompt.state.submitted ? '\n' + keypress : '';
-  },
-  pointer(state, choice, i) {
-    return (state.index === i ? state.symbols.pointer : ' ') + ' ';
-  },
-  choices: [
-    { name: 'aqua', value: '#00ffff' },
-    { name: 'black', value: '#000000' },
-    { name: 'blue', value: '#0000ff', hint: '(this is a choice hint)' },
-    { name: 'fuchsia', value: '#ff00ff' },
-    { name: 'gray', value: '#808080' },
-    { name: 'green', value: '#008000' },
-    { name: 'lime', value: '#00ff00' },
-    { name: 'maroon', value: '#800000' },
-    { name: 'navy', value: '#000080' },
-    { name: 'olive', value: '#808000' },
-    { name: 'purple', value: '#800080' },
-    { name: 'red', value: '#ff0000' },
-    { name: 'silver', value: '#c0c0c0' },
-    { name: 'teal', value: '#008080' },
-    { name: 'white', value: '#ffffff' },
-    { name: 'yellow', value: '#ffff00' }
-  ]
-});
+  timeout = setTimeout(async() => {
+    prompt.state.keypress = '';
+    await prompt.render();
+  }, 500);
 
-prompt.run()
-  .then(names => console.log('Answer:', names))
-  .catch(console.error);
+  prompt.on('close', () => clearTimeout(timeout));
+  return !prompt.state.submitted ? keypress : '';
+};

examples/multiscale/prompt-checks.js

@@ -0,0 +1,52 @@
+const { MultiScale } = require('../..');
+const prompt = new MultiScale({
+  name: 'experience',
+  message: 'Please rate your experience',
+  scale: [
+    { name: '1', message: 'Strongly Disagree' },
+    { name: '2', message: 'Disagree' },
+    { name: '3', message: 'Neutral' },
+    { name: '4', message: 'Agree' },
+    { name: '5', message: 'Strongly Agree' }
+  ],
+  symbols: { line: ' ' },
+  edgeLength: 1,
+  messageWidth: 48,
+  scaleIndicator(choice, item, i) {
+    let enabled = choice.scaleIndex === item.index;
+    if (enabled) return this.styles.success(this.symbols.check);
+    if (this.index === i) return this.styles.muted(this.symbols.check);
+    return this.styles.dark(this.symbols.check);
+  },
+  choices: [
+    {
+      name: 'interface',
+      message: 'The website has a friendly interface.',
+      initial: 2
+    },
+    {
+      name: 'navigation',
+      message: 'The website is easy to navigate.',
+      initial: 2
+    },
+    {
+      name: 'images',
+      message: 'The website usually has good images.',
+      initial: 2
+    },
+    {
+      name: 'upload',
+      message: 'The website makes it easy to upload images.',
+      initial: 2
+    },
+    {
+      name: 'colors',
+      message: 'The website has a pleasing color palette.',
+      initial: 2
+    }
+  ]
+});
+
+prompt.run()
+  .then(value => console.log('ANSWERS:', value))
+  .catch(console.error);

examples/multiscale/prompt-experience.js

@@ -0,0 +1,39 @@
+const { MultiScale } = require('../..');
+const prompt = new MultiScale({
+  name: 'experience',
+  message: 'How would you rate your experience?',
+  hint: '(0=bad, 10=awesome)',
+  scale: 11,
+  edgeLength: 2,
+  choices: [
+    {
+      name: 'none',
+      message: 'The website has a friendly interface.',
+      initial: 5
+    },
+    {
+      name: 'navigation',
+      message: 'The website is easy to navigate.',
+      initial: 5
+    },
+    {
+      name: 'images',
+      message: 'The website usually has good images.',
+      initial: 5
+    },
+    {
+      name: 'upload',
+      message: 'The website makes it easy to upload images.',
+      initial: 5
+    },
+    {
+      name: 'colors',
+      message: 'The website has a pleasing color palette.',
+      initial: 5
+    }
+  ]
+});
+
+prompt.run()
+  .then(value => console.log('ANSWERS:', value))
+  .catch(console.error);

examples/multiscale/prompt-stars.js

@@ -0,0 +1,47 @@
+const colors = require('ansi-colors');
+const { MultiScale } = require('../..');
+const prompt = new MultiScale({
+  name: 'experience',
+  message: 'Please rate your experience',
+  scale: 5,
+  symbols: { line: ' ' },
+  margin: '',
+  edgeLength: 1,
+  styles: {
+    primary: colors.blue
+  },
+  format() {
+    return '';
+  },
+  renderScaleHeading() {
+    return '';
+  },
+  scaleIndicator(choice, item, i) {
+    let enabled = choice.scaleIndex >= item.index;
+    let { on, off, disabled } = this.symbols.stars;
+    if (choice.disabled) return this.styles.muted(disabled);
+    if (enabled) {
+      if (this.index === i) return this.styles.warning.dim(on);
+      return this.styles.warning(on);
+    }
+    return this.styles.dark(on);
+  },
+  // choices: [
+  //   { name: 'interface', message: 'The website has a friendly interface.', initial: 2 },
+  //   { name: 'navigation', message: 'The website is easy to navigate.', initial: 2 },
+  //   { name: 'images', message: 'The website usually has good images.', initial: 2 },
+  //   { name: 'upload', message: 'The website makes it easy to upload images.', initial: 2 },
+  //   { name: 'colors', message: 'The website has a pleasing color palette.', initial: 2 }
+  // ],
+  choices: [
+    { name: 'shipping', message: '1. Shipping', initial: 2 },
+    { name: 'price',   message: '2. Price', initial: 2 },
+    { name: 'quality', message: '3. Quality', initial: 2 },
+    { name: 'communication', message: '4. Communication', initial: 2 },
+    { name: 'experience', message: '5. Overall Experience', initial: 2 },
+  ]
+});
+
+prompt.run()
+  .then(value => console.log(value))
+  .catch(console.error);

examples/multiscale/prompt-wrapped-messages.js

@@ -1,12 +1,14 @@
+'use strict';
+
 const colors = require('ansi-colors');
 const { MultiScale } = require('../..');
 const prompt = new MultiScale({
   name: 'experience',
   message: 'Please rate your experience',
-  messageWidth: 35,
+  messageWidth: 20,
+  margin: '    ',
   edgeLength: 3,
   styles: { primary: colors.blue },
-  margin: '',
   scale: [
     { name: '1', message: 'Strongly Disagree' },
     { name: '2', message: 'Disagree' },